Mark/support loading swapped axes images

CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 * Added a selection option in the PV generator widget to swap x and y axis, an input for spectral axis limit, and a toggle button to let users decide whether or not to keep the previously generated PV images ([#1950](https://github.com/cartavis/carta-frontend/issues/1950), [#1951](https://github.com/cartavis/carta-frontend/issues/1951), [#1952](https://github.com/cartavis/carta-frontend/issues/1952)).
 * Added a toggle button to let users decide whether or not to keep the previously generated moment images ([#2054](https://github.com/CARTAvis/carta-frontend/issues/2054)).
 * Added settings in the image view settings widget for panning and zooming the images ([#1176](https://github.com/CARTAvis/carta-frontend/issues/1176)).
+* Added supports for swapped-axes image cubes ([#1953](https://github.com/CARTAvis/carta-frontend/issues/1953)).
 ### Fixed
 * Fixed the issue of contour levels not deleted as intended ([#2091](https://github.com/CARTAvis/carta-frontend/issues/2091)).
 * Fixed issue of only enabling catalog selection button when there is a layer of catalog overlay ([#1826](https://github.com/CARTAvis/carta-frontend/issues/1826)).

src/components/Animator/AnimatorComponent.tsx

@@ -244,7 +244,13 @@ export class AnimatorComponent extends React.Component<WidgetProps> {
             const channelTick = numChannels > 10 ? channelTickPre : Array.from(Array(numChannels).keys());
             channelSlider = (
                 <div className="animator-slider">
-                    <Radio value={AnimationMode.CHANNEL} disabled={appStore.animatorStore.animationActive} checked={appStore.animatorStore.animationMode === AnimationMode.CHANNEL} onChange={this.onAnimationModeChanged} label="Channel" />
+                    <Radio
+                        value={AnimationMode.CHANNEL}
+                        disabled={appStore.animatorStore.animationActive}
+                        checked={appStore.animatorStore.animationMode === AnimationMode.CHANNEL}
+                        onChange={this.onAnimationModeChanged}
+                        label={activeFrame.channelType}
+                    />
                     {hideSliders && <SafeNumericInput value={activeFrame.requiredChannel} min={-1} max={numChannels} stepSize={1} onValueChange={this.onChannelChanged} fill={true} disabled={appStore.animatorStore.animationActive} />}
                     {!hideSliders && (
                         <React.Fragment>
@@ -260,7 +266,7 @@ export class AnimatorComponent extends React.Component<WidgetProps> {
                                 disabled={appStore.animatorStore.animationActive}
                             />
                             <div className="slider-info">
-                                <pre>{activeFrame.simpleSpectralInfo}</pre>
+                                <pre>{activeFrame.depthAxisInfo}</pre>
                             </div>
                         </React.Fragment>
                     )}

src/components/ImageView/Overlay/OverlayComponent.tsx

@@ -166,18 +166,32 @@ export class OverlayComponent extends React.Component<OverlayComponentProps> {
         const distanceMeasuringLineWidth = frame.distanceMeasuring.lineWidth;
         const title = frame.titleCustomText;
         const ratio = AppStore.Instance.imageRatio;
+        if (frame.isSwappedZ) {
+            const requiredChannel = frame.requiredChannel;
+        }
         /* eslint-enable no-unused-vars, @typescript-eslint/no-unused-vars */
 
         // Trigger switching AST overlay axis for PV image
+        const spectralAxisSetting =
+            `${frame.spectralType ? `System(${frame.spectral})=${frame.spectralType},` : ""}` +
+            `${frame.spectralUnit ? `Unit(${frame.spectral})=${frame.spectralUnit},` : ""}` +
+            `${frame.spectralSystem ? `StdOfRest=${frame.spectralSystem},` : ""}` +
+            `${frame.restFreqStore.restFreqInHz ? `RestFreq=${frame.restFreqStore.restFreqInHz} Hz,` : ""}` +
+            `${frame.spectralType && frame.spectralSystem ? `Label(${frame.spectral})=[${frame.spectralSystem}] ${SPECTRAL_TYPE_STRING.get(frame.spectralType)},` : ""}`;
+
+        const dirAxesSetting = `${frame.dirX > 2 || frame.dirXLabel === "" ? "" : `Label(${frame.dirX})=${frame.dirXLabel},`} ${frame.dirY > 2 || frame.dirYLabel === "" ? "" : `Label(${frame.dirY})=${frame.dirYLabel},`}`;
+
         if (frame.isPVImage && frame.spectralAxis?.valid) {
-            AST.set(
-                frame.wcsInfo,
-                `${frame.spectralType ? `System(${frame.isReversedPVImage ? 1 : 2})=${frame.spectralType},` : ""}` +
-                    `${frame.spectralUnit ? `Unit(${frame.isReversedPVImage ? 1 : 2})=${frame.spectralUnit},` : ""}` +
-                    `${frame.spectralSystem ? `StdOfRest=${frame.spectralSystem},` : ""}` +
-                    `${frame.restFreqStore.restFreqInHz ? `RestFreq=${frame.restFreqStore.restFreqInHz} Hz,` : ""}` +
-                    `${frame.spectralType && frame.spectralSystem ? `Label(${frame.isReversedPVImage ? 1 : 2})=[${frame.spectralSystem}] ${SPECTRAL_TYPE_STRING.get(frame.spectralType)},` : ""}`
-            );
+            AST.set(frame.wcsInfo, spectralAxisSetting);
+        } else if (frame.isSwappedZ && frame.spectralAxis?.valid) {
+            AST.set(frame.wcsInfo, spectralAxisSetting + dirAxesSetting);
+        } else {
+            const formatStringX = this.props.overlaySettings.numbers.formatStringX;
+            const formatStyingY = this.props.overlaySettings.numbers.formatStringY;
+            const explicitSystem = this.props.overlaySettings.global.explicitSystem;
+            if (formatStringX !== undefined && formatStyingY !== undefined && explicitSystem !== undefined) {
+                AST.set(frame.wcsInfo, `Format(${frame.dirX})=${formatStringX}, Format(${frame.dirY})=${formatStyingY}, System=${explicitSystem},` + dirAxesSetting);
+            }
         }
 
         const className = classNames("overlay-canvas", {docked: this.props.docked});

src/stores/CatalogOnlineQuery/CatalogOnlineQueryConfigStore.ts

@@ -318,9 +318,11 @@ export class CatalogOnlineQueryConfigStore {
             const wcsCopy = AST.copy(frame.wcsInfo);
             let astString = new ASTSettingsString();
             const sys = system ? system : overlay.global.explicitSystem ? overlay.global.explicitSystem : SystemType.ICRS;
-            AST.set(wcsCopy, `System=${sys}`);
-            astString.add("Format(1)", format);
-            astString.add("Format(2)", format);
+            if ((frame.dirX === 1 && frame.dirY === 2) || (frame.dirX === 2 && frame.dirY === 1)) {
+                AST.set(wcsCopy, `System=${sys}`);
+                astString.add(`Format(${frame.dirX})`, format);
+                astString.add(`Format(${frame.dirY})`, format);
+            }
             const pointWCS = transformPoint(wcsCopy, pixelCoords);
             const normVals = AST.normalizeCoordinates(wcsCopy, pointWCS.x, pointWCS.y);
             p = AST.getFormattedCoordinates(wcsCopy, normVals.x, normVals.y, astString.toString(), true);
@@ -337,9 +339,11 @@ export class CatalogOnlineQueryConfigStore {
             const precision = overlay.numbers.customPrecision ? overlay.numbers.precision : "*";
             const format = `${NumberFormatType.Degrees}.${precision}`;
             const wcsCopy = AST.copy(frame.wcsInfo);
-            AST.set(wcsCopy, `System=${SystemType.ICRS}`);
-            AST.set(wcsCopy, `Format(1)=${format}`);
-            AST.set(wcsCopy, `Format(2)=${format}`);
+            if ((frame.dirX === 1 && frame.dirY === 2) || (frame.dirX === 2 && frame.dirY === 1)) {
+                AST.set(wcsCopy, `System=${SystemType.ICRS}`);
+                AST.set(wcsCopy, `Format(${frame.dirX})=${format}`);
+                AST.set(wcsCopy, `Format(${frame.dirY})=${format}`);
+            }
             p = getPixelValueFromWCS(wcsCopy, {x: coords.x.toString(), y: coords.y.toString()});
             AST.deleteObject(wcsCopy);
         }

src/stores/FileBrowserStore/FileBrowserStore.ts

@@ -298,7 +298,7 @@ export class FileBrowserStore {
     /// Update the spectral range for save image file
     @action initialSaveSpectralRange = () => {
         const activeFrame = AppStore.Instance.activeFrame;
-        if (activeFrame && activeFrame.numChannels > 1) {
+        if (activeFrame && activeFrame.numChannels > 1 && activeFrame.isSpectralChannel) {
             const min = Math.min(activeFrame.channelValueBounds.max, activeFrame.channelValueBounds.min);
             const max = Math.max(activeFrame.channelValueBounds.max, activeFrame.channelValueBounds.min);
             const delta = (max - min) / (activeFrame.numChannels - 1);