Merge pull request #1894 from silx-kit/signals-menu

Move NX Heatmap signal picker to vis bar

Author: axelboc

apps/storybook/src/RadioGroup.stories.tsx

@@ -26,7 +26,7 @@ export const Default = {
         {...args}
         options={OPTIONS}
         value={value}
-        onValueChanged={setValue}
+        onChange={setValue}
       />
     );
   },

cypress/e2e/app.cy.ts

@@ -431,8 +431,8 @@ describe('/mock', () => {
       }).should('be.visible');
       cy.findByRole('figure', { name: 'twoD' }).should('be.visible');
 
+      cy.findByRole('button', { name: 'Signals' }).click();
       cy.findByRole('radio', { name: 'tertiary' }).click();
-      cy.waitForStableDOM();
 
       cy.findByRole('figure', { name: 'tertiary' })
         .should('be.visible')
@@ -469,7 +469,9 @@ describe('/mock', () => {
       }
 
       // Select float auxiliary signal
-      cy.findByLabelText('tertiary_float').check();
+      cy.findByRole('button', { name: 'Signals' }).click();
+      cy.findByRole('radio', { name: 'tertiary_float' }).click();
+
       cy.findByRole('figure', { name: 'tertiary_float' }).should('be.visible');
 
       if (Cypress.env('TAKE_SNAPSHOTS')) {

cypress/snapshots/app.cy.ts/auximage.snap.png

@@ -0,0 +1,17 @@
+import { screen } from '@testing-library/react';
+import { expect, test } from 'vitest';
+
+import { getSelectedVisTab, renderApp, waitForAllLoaders } from '../test-utils';
+import { NxDataVis } from '../vis-packs/nexus/visualizations';
+
+test('pick auxiliary signal on NX Heatmap', async () => {
+  const { user } = await renderApp('/nexus_entry/image_with_aux');
+  expect(getSelectedVisTab()).toBe(NxDataVis.NxHeatmap);
+  expect(screen.getByRole('figure', { name: 'twoD' })).toBeVisible();
+
+  await user.click(screen.getByRole('button', { name: 'Signals' }));
+  await user.click(screen.getByRole('radio', { name: 'tertiary' }));
+  await waitForAllLoaders();
+
+  expect(screen.getByRole('figure', { name: 'tertiary' })).toBeVisible();
+});

cypress/snapshots/app.cy.ts/nxheatmap_complex_2d.snap.png

@@ -120,15 +120,15 @@ function LineToolbar(props: Props) {
           value={curveType}
           options={Object.values(CurveType)}
           optionsLabels={CURVE_TYPE_LABELS}
-          onValueChanged={setCurveType}
+          onChange={setCurveType}
         />
         <RadioGroup
           name="interpolation"
           label="Interpolation"
           options={Object.values(Interpolation)}
           disabled={curveType === CurveType.GlyphsOnly}
           value={interpolation}
-          onValueChanged={setInterpolation}
+          onChange={setInterpolation}
         />
       </Menu>
 

cypress/snapshots/app.cy.ts/nxheatmap_complex_2d_float_aux.snap.png

@@ -1,32 +1,6 @@
-.bar {
-  grid-area: bar;
+.wrapper {
+  z-index: 1; /* for picker menu to appear above visualization */
   display: flex;
-  align-items: center;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scrollbar-width: thin;
-  min-width: 0;
-  margin: 0;
-  padding: 0.675rem 1.25rem 0;
-  font-size: 0.875em;
-  line-height: 1.4;
-}
-
-.text {
-  margin-right: 0.5rem;
-  font-weight: 600;
-}
-
-.label {
-  display: flex;
-  align-items: center;
-  padding: 0.25rem;
-  cursor: pointer;
-}
-
-.label > input {
-  margin-bottom: -0.1em;
-  margin-right: 0.25rem;
-  accent-color: var(--secondary-dark);
-  cursor: pointer;
+  padding: 0 0.5rem;
+  font-size: 0.875rem;
 }

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

@@ -1,39 +1,48 @@
+import { assertDefined, Menu, RadioGroup, Separator } from '@h5web/lib';
 import {
   type ComplexType,
   type NumericLikeType,
 } from '@h5web/shared/hdf5-models';
+import { createPortal } from 'react-dom';
+import { MdLineAxis } from 'react-icons/md';
 
 import { type DatasetDef } from './models';
 import styles from './NxSignalPicker.module.css';
 
 interface Props<T extends NumericLikeType | ComplexType> {
   definitions: DatasetDef<T>[];
+  toolbarContainer: HTMLDivElement | undefined;
+  value: DatasetDef<T>;
   onChange: (def: DatasetDef<T>) => void;
 }
 
 function NxSignalPicker<T extends NumericLikeType | ComplexType>(
   props: Props<T>,
 ) {
-  const { definitions, onChange } = props;
+  const { definitions, toolbarContainer, value, onChange } = props;
 
-  return (
-    <p className={styles.bar}>
-      <span className={styles.text}>Signal:</span>
-      {definitions.map((def, index) => (
-        <label key={def.dataset.name} className={styles.label}>
-          {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-          <input
-            type="radio"
-            name="signal"
-            value={def.dataset.name}
-            defaultChecked={index === 0}
-            autoComplete="off" // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked
-            onChange={() => onChange(def)}
-          />
-          {def.dataset.name}
-        </label>
-      ))}
-    </p>
+  if (!toolbarContainer) {
+    return null;
+  }
+
+  return createPortal(
+    <div className={styles.wrapper}>
+      <Separator />
+
+      <Menu label="Signals" Icon={MdLineAxis}>
+        <RadioGroup
+          name="signals"
+          options={definitions.map((def) => def.dataset.name)}
+          value={value.dataset.name}
+          onChange={(name) => {
+            const selection = definitions.find((s) => s.dataset.name === name);
+            assertDefined(selection);
+            onChange(selection);
+          }}
+        />
+      </Menu>
+    </div>,
+    toolbarContainer,
   );
 }
 

packages/app/src/vis-packs/core/line/LineToolbar.tsx

@@ -58,9 +58,12 @@ function NxHeatmapContainer(props: VisContainerProps) {
       {auxDefs.length > 0 && (
         <NxSignalPicker
           definitions={[signalDef, ...auxDefs]}
+          value={selectedDef}
           onChange={setSelectedDef}
+          toolbarContainer={toolbarContainer}
         />
       )}
+
       <DimensionMapper
         className={visualizerStyles.dimMapper}
         dims={dims}
@@ -69,6 +72,7 @@ function NxHeatmapContainer(props: VisContainerProps) {
         canSliceFast={useNxValuesCached(nxData)}
         onChange={setDimMapping}
       />
+
       <VisBoundary resetKey={dimMapping}>
         <NxValuesFetcher
           nxData={nxDataToFetch}