Support complex image auxiliaries

cypress/e2e/app.cy.ts

@@ -399,29 +399,29 @@ describe('/mock', () => {
       }
     });
 
-    it('visualize 2D complex signal as NxImage', () => {
+    it('visualize 2D complex signal with "spectrum" interpretation and auxiliaries as NxLine', () => {
       cy.selectExplorerNode('nexus_entry');
-      cy.selectExplorerNode('complex');
+      cy.selectExplorerNode('complex_spectrum');
 
       cy.findByRole('heading', {
-        name: 'nexus_entry / complex',
+        name: 'nexus_entry / complex_spectrum',
       }).should('be.visible');
 
       if (Cypress.env('TAKE_SNAPSHOTS')) {
-        cy.matchImageSnapshot('nximage_complex_2d');
+        cy.matchImageSnapshot('nxline_complex_2d_aux');
       }
     });
 
-    it('visualize 2D complex signal with "spectrum" interpretation and auxiliaries as NxLine', () => {
+    it('visualize 2D complex signal as NxImage', () => {
       cy.selectExplorerNode('nexus_entry');
-      cy.selectExplorerNode('complex_spectrum');
+      cy.selectExplorerNode('complex_image');
 
       cy.findByRole('heading', {
-        name: 'nexus_entry / complex_spectrum',
+        name: 'nexus_entry / complex_image',
       }).should('be.visible');
 
       if (Cypress.env('TAKE_SNAPSHOTS')) {
-        cy.matchImageSnapshot('nxline_complex_2d_aux');
+        cy.matchImageSnapshot('nximage_complex_2d');
       }
     });
 

packages/app/src/__tests__/NexusPack.test.tsx

@@ -55,7 +55,7 @@ test('visualize NXdata group without explicit signal interpretation', async () =
   expect(screen.getByRole('figure', { name: 'oneD' })).toBeVisible(); // signal name
 
   // 2D complex signal (no interpretation)
-  await selectExplorerNode('complex');
+  await selectExplorerNode('complex_image');
   expect(getVisTabs()).toEqual([NexusVis.NxSpectrum, NexusVis.NxImage]);
   expect(getSelectedVisTab()).toBe(NexusVis.NxImage);
   expect(

packages/app/src/providers/mock/mock-file.ts

@@ -219,18 +219,20 @@ export function makeMockFile(): GroupWithChildren {
             },
             auxAttr: ['secondary', 'tertiary'],
           }),
-          nxData('complex', {
-            signal: array('twoD_cplx'),
-            axes: { position: array('position') },
-            axesAttr: ['.', 'position'],
-          }),
           nxData('complex_spectrum', {
             signal: withNxAttr(array('twoD_cplx'), {
               interpretation: 'spectrum',
             }),
             auxiliary: { secondary_cplx: array('secondary_cplx') },
             auxAttr: ['secondary_cplx'],
           }),
+          nxData('complex_image', {
+            signal: array('twoD_cplx'),
+            axes: { position: array('position') },
+            axesAttr: ['.', 'position'],
+            auxiliary: { secondary_cplx: array('secondary_cplx') },
+            auxAttr: ['secondary_cplx'],
+          }),
           nxData('rgb-image', {
             signal: withImageAttr(
               withNxAttr(array('fourD_rgb'), {

packages/app/src/vis-packs/nexus/containers/NxComplexImageContainer.tsx

@@ -1,4 +1,5 @@
 import { assertGroup, assertMinDims } from '@h5web/shared/guards';
+import { useState } from 'react';
 
 import DimensionMapper from '../../../dimension-mapper/DimensionMapper';
 import { useDimMappingState } from '../../../dimension-mapper/hooks';
@@ -9,7 +10,8 @@ import { getSliceSelection } from '../../core/utils';
 import type { VisContainerProps } from '../../models';
 import VisBoundary from '../../VisBoundary';
 import { assertComplexNxData } from '../guards';
-import { useNxData, useNxValuesCached } from '../hooks';
+import { useNxData, useNxImageDataToFetch, useNxValuesCached } from '../hooks';
+import NxSignalPicker from '../NxSignalPicker';
 import NxValuesFetcher from '../NxValuesFetcher';
 import { guessKeepRatio } from '../utils';
 
@@ -20,10 +22,11 @@ function NxComplexImageContainer(props: VisContainerProps) {
   const nxData = useNxData(entity);
   assertComplexNxData(nxData);
 
-  const { signalDef, axisDefs, silxStyle } = nxData;
-  assertMinDims(signalDef.dataset, 2);
+  const { signalDef, axisDefs, auxDefs, silxStyle } = nxData;
+  const [selectedDef, setSelectedDef] = useState(signalDef);
+  assertMinDims(selectedDef.dataset, 2);
 
-  const { shape: dims } = signalDef.dataset;
+  const { shape: dims } = selectedDef.dataset;
   const [dimMapping, setDimMapping] = useDimMappingState(dims, 2);
 
   const axisLabels = axisDefs.map((def) => def?.label);
@@ -36,8 +39,16 @@ function NxComplexImageContainer(props: VisContainerProps) {
     keepRatio: guessKeepRatio(xAxisDef, yAxisDef),
   });
 
+  const nxDataToFetch = useNxImageDataToFetch(nxData, selectedDef);
+
   return (
     <>
+      {auxDefs.length > 0 && (
+        <NxSignalPicker
+          definitions={[signalDef, ...auxDefs]}
+          onChange={setSelectedDef}
+        />
+      )}
       <DimensionMapper
         dims={dims}
         axisLabels={axisLabels}
@@ -47,7 +58,7 @@ function NxComplexImageContainer(props: VisContainerProps) {
       />
       <VisBoundary resetKey={dimMapping}>
         <NxValuesFetcher
-          nxData={nxData}
+          nxData={nxDataToFetch}
           selection={getSliceSelection(dimMapping)}
           render={(nxValues) => {
             const { signal, axisValues, title } = nxValues;

packages/app/src/vis-packs/nexus/containers/NxImageContainer.tsx

@@ -1,5 +1,4 @@
 import { assertGroup, assertMinDims } from '@h5web/shared/guards';
-import type { NumericType } from '@h5web/shared/hdf5-models';
 import { useState } from 'react';
 
 import DimensionMapper from '../../../dimension-mapper/DimensionMapper';
@@ -10,8 +9,7 @@ import { getSliceSelection } from '../../core/utils';
 import type { VisContainerProps } from '../../models';
 import VisBoundary from '../../VisBoundary';
 import { assertNumericNxData } from '../guards';
-import { useNxData, useNxValuesCached } from '../hooks';
-import type { NxData } from '../models';
+import { useNxData, useNxImageDataToFetch, useNxValuesCached } from '../hooks';
 import NxSignalPicker from '../NxSignalPicker';
 import NxValuesFetcher from '../NxValuesFetcher';
 import { guessKeepRatio } from '../utils';
@@ -39,15 +37,7 @@ function NxImageContainer(props: VisContainerProps) {
     keepRatio: guessKeepRatio(xAxisDef, yAxisDef),
   });
 
-  const nxDataToFetch: NxData<NumericType> = {
-    ...nxData,
-    signalDef: selectedDef,
-    auxDefs: [], // fetch selected signal only
-    titleDataset:
-      selectedDef.dataset === signalDef.dataset
-        ? nxData.titleDataset
-        : undefined, // when auxiliary signal is selected, always use its label as title
-  };
+  const nxDataToFetch = useNxImageDataToFetch(nxData, selectedDef);
 
   return (
     <>

packages/app/src/vis-packs/nexus/hooks.ts

@@ -1,9 +1,13 @@
-import type { GroupWithChildren } from '@h5web/shared/hdf5-models';
+import type {
+  ComplexType,
+  GroupWithChildren,
+  NumericType,
+} from '@h5web/shared/hdf5-models';
 
 import type { DimensionMapping } from '../../dimension-mapper/models';
 import { useDataContext } from '../../providers/DataProvider';
 import { useValuesInCache } from '../core/hooks';
-import type { NxData } from './models';
+import type { DatasetDef, NxData } from './models';
 import {
   assertNxDataGroup,
   findAuxErrorDataset,
@@ -44,6 +48,23 @@ export function useNxData(group: GroupWithChildren): NxData {
   };
 }
 
+export function useNxImageDataToFetch<T extends NumericType | ComplexType>(
+  nxData: NxData<T>,
+  selectedDef: DatasetDef<T>,
+): NxData<T> {
+  const { signalDef } = nxData;
+
+  return {
+    ...nxData,
+    signalDef: selectedDef,
+    auxDefs: [], // fetch selected signal only
+    titleDataset:
+      selectedDef.dataset === signalDef.dataset
+        ? nxData.titleDataset
+        : undefined, // when auxiliary signal is selected, always use its label as title
+  };
+}
+
 export function useNxValuesCached(
   nxData: NxData,
 ): (dimMapping: DimensionMapping) => boolean {