Show NX axis labels as hints in axis mappers

silx-kit · May 23, 2023 · 360949e · 360949e
1 parent 67c1e83
commit 360949e
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 10 deletions.
diff --git a/packages/app/src/dimension-mapper/AxisMapper.tsx b/packages/app/src/dimension-mapper/AxisMapper.tsx
@@ -1,5 +1,5 @@
 import { ToggleGroup } from '@h5web/lib';
-import type { Axis } from '@h5web/shared';
+import type { Axis, AxisMapping } from '@h5web/shared';
 import { isNumber } from 'lodash';
 
 import styles from './DimensionMapper.module.css';
@@ -8,12 +8,13 @@ import type { DimensionMapping } from './models';
 interface Props {
   axis: Axis;
   rawDims: number[];
+  axisLabels: AxisMapping<string> | undefined;
   mapperState: DimensionMapping;
   onChange: (mapperState: DimensionMapping) => void;
 }
 
 function AxisMapper(props: Props) {
-  const { axis, rawDims, mapperState, onChange } = props;
+  const { axis, rawDims, axisLabels, mapperState, onChange } = props;
   const selectedDim = mapperState.indexOf(axis);
 
   if (selectedDim === -1) {
@@ -42,8 +43,13 @@ function AxisMapper(props: Props) {
           }
         }}
       >
-        {Object.keys(rawDims).map((dimKey) => (
-          <ToggleGroup.Btn key={dimKey} label={`D${dimKey}`} value={dimKey} />
+        {Object.keys(rawDims).map((dimKey, index) => (
+          <ToggleGroup.Btn
+            key={dimKey}
+            label={`D${dimKey}`}
+            value={dimKey}
+            hint={axisLabels?.[index]}
+          />
         ))}
       </ToggleGroup>
     </div>

diff --git a/packages/app/src/dimension-mapper/DimensionMapper.tsx b/packages/app/src/dimension-mapper/DimensionMapper.tsx
@@ -1,3 +1,4 @@
+import type { AxisMapping } from '@h5web/shared';
 import { isNumber } from 'lodash';
 
 import AxisMapper from './AxisMapper';
@@ -7,12 +8,13 @@ import SlicingSlider from './SlicingSlider';
 
 interface Props {
   rawDims: number[];
+  axisLabels?: AxisMapping<string>;
   mapperState: DimensionMapping;
   onChange: (d: DimensionMapping) => void;
 }
 
 function DimensionMapper(props: Props) {
-  const { rawDims, mapperState, onChange } = props;
+  const { rawDims, axisLabels, mapperState, onChange } = props;
 
   return (
     <div className={styles.mapper}>
@@ -32,12 +34,14 @@ function DimensionMapper(props: Props) {
         <AxisMapper
           axis="x"
           rawDims={rawDims}
+          axisLabels={axisLabels}
           mapperState={mapperState}
           onChange={onChange}
         />
         <AxisMapper
           axis="y"
           rawDims={rawDims}
+          axisLabels={axisLabels}
           mapperState={mapperState}
           onChange={onChange}
         />

diff --git a/packages/app/src/vis-packs/nexus/containers/NxComplexImageContainer.tsx b/packages/app/src/vis-packs/nexus/containers/NxComplexImageContainer.tsx
@@ -24,6 +24,8 @@ function NxComplexImageContainer(props: VisContainerProps) {
 
   const { shape: dims } = signalDef.dataset;
   const [dimMapping, setDimMapping] = useDimMappingState(dims, 2);
+
+  const axisLabels = axisDefs.map((def) => def?.label);
   const xAxisDef = axisDefs[dimMapping.indexOf('x')];
   const yAxisDef = axisDefs[dimMapping.indexOf('y')];
 
@@ -37,6 +39,7 @@ function NxComplexImageContainer(props: VisContainerProps) {
     <>
       <DimensionMapper
         rawDims={dims}
+        axisLabels={axisLabels}
         mapperState={dimMapping}
         onChange={setDimMapping}
       />

diff --git a/packages/app/src/vis-packs/nexus/containers/NxComplexSpectrumContainer.tsx b/packages/app/src/vis-packs/nexus/containers/NxComplexSpectrumContainer.tsx
@@ -18,10 +18,13 @@ function NxComplexSpectrumContainer(props: VisContainerProps) {
 
   const nxData = useNxData(entity);
   assertComplexNxData(nxData);
+
   const { signalDef, axisDefs, silxStyle } = nxData;
   const signalDims = signalDef.dataset.shape;
 
   const [dimMapping, setDimMapping] = useDimMappingState(signalDims, 1);
+
+  const axisLabels = axisDefs.map((def) => def?.label);
   const xDimIndex = dimMapping.indexOf('x');
 
   const config = useComplexLineConfig();
@@ -38,6 +41,7 @@ function NxComplexSpectrumContainer(props: VisContainerProps) {
     <>
       <DimensionMapper
         rawDims={signalDims}
+        axisLabels={axisLabels}
         mapperState={dimMapping}
         onChange={setDimMapping}
       />

diff --git a/packages/app/src/vis-packs/nexus/containers/NxImageContainer.tsx b/packages/app/src/vis-packs/nexus/containers/NxImageContainer.tsx
@@ -23,6 +23,8 @@ function NxImageContainer(props: VisContainerProps) {
 
   const { shape: dims } = signalDef.dataset;
   const [dimMapping, setDimMapping] = useDimMappingState(dims, 2);
+
+  const axisLabels = axisDefs.map((def) => def?.label);
   const xAxisDef = axisDefs[dimMapping.indexOf('x')];
   const yAxisDef = axisDefs[dimMapping.indexOf('y')];
 
@@ -35,6 +37,7 @@ function NxImageContainer(props: VisContainerProps) {
     <>
       <DimensionMapper
         rawDims={dims}
+        axisLabels={axisLabels}
         mapperState={dimMapping}
         onChange={setDimMapping}
       />
@@ -50,7 +53,7 @@ function NxImageContainer(props: VisContainerProps) {
                 dataset={signalDef.dataset}
                 value={signal}
                 dimMapping={dimMapping}
-                axisLabels={axisDefs.map((def) => def?.label)}
+                axisLabels={axisLabels}
                 axisValues={axisValues}
                 title={title}
                 toolbarContainer={toolbarContainer}

diff --git a/packages/app/src/vis-packs/nexus/containers/NxRgbContainer.tsx b/packages/app/src/vis-packs/nexus/containers/NxRgbContainer.tsx
@@ -28,12 +28,15 @@ function NxRgbContainer(props: VisContainerProps) {
 
   const mappableDims = dims.slice(0, -1);
   const [dimMapping, setDimMapping] = useDimMappingState(mappableDims, 2);
+
+  const axisLabels = axisDefs.map((def) => def?.label);
   const config = useRgbConfig();
 
   return (
     <>
       <DimensionMapper
         rawDims={mappableDims}
+        axisLabels={axisLabels}
         mapperState={dimMapping}
         onChange={setDimMapping}
       />

diff --git a/packages/app/src/vis-packs/nexus/containers/NxSpectrumContainer.tsx b/packages/app/src/vis-packs/nexus/containers/NxSpectrumContainer.tsx
@@ -29,6 +29,8 @@ function NxSpectrumContainer(props: VisContainerProps) {
   }
 
   const [dimMapping, setDimMapping] = useDimMappingState(signalDims, 1);
+
+  const axisLabels = axisDefs.map((def) => def?.label);
   const xDimIndex = dimMapping.indexOf('x');
 
   const config = useLineConfig({
@@ -45,6 +47,7 @@ function NxSpectrumContainer(props: VisContainerProps) {
     <>
       <DimensionMapper
         rawDims={signalDims}
+        axisLabels={axisLabels}
         mapperState={dimMapping}
         onChange={setDimMapping}
       />

diff --git a/packages/lib/src/toolbar/controls/ToggleGroup.module.css b/packages/lib/src/toolbar/controls/ToggleGroup.module.css
@@ -8,6 +8,10 @@
   padding: 0 !important; /* FIX style ordering issue with Vite */
 }
 
+.btn[data-hint] {
+  text-decoration: underline dotted;
+}
+
 .btnLike {
   composes: btnLike from '../Toolbar.module.css';
 }

diff --git a/packages/lib/src/toolbar/controls/ToggleGroup.tsx b/packages/lib/src/toolbar/controls/ToggleGroup.tsx
@@ -1,4 +1,9 @@
-import type { ComponentType, ReactElement, SVGAttributes } from 'react';
+import type {
+  ComponentType,
+  HTMLAttributes,
+  ReactElement,
+  SVGAttributes,
+} from 'react';
 import { createContext, useContext } from 'react';
 
 import styles from './ToggleGroup.module.css';
@@ -24,16 +29,17 @@ function useToggleGroupProps(): ToggleGroupProps {
   return context;
 }
 
-interface BtnProps {
+interface BtnProps extends HTMLAttributes<HTMLButtonElement> {
   label: string;
   value: string;
   icon?: ComponentType<SVGAttributes<SVGElement>>;
   iconOnly?: boolean;
+  hint?: string;
   disabled?: boolean;
 }
 
 function Btn(props: BtnProps) {
-  const { label, value, icon: Icon, iconOnly, disabled = false } = props;
+  const { label, value, icon: Icon, hint, iconOnly, disabled = false } = props;
   const {
     role,
     value: selectedValue,
@@ -46,9 +52,10 @@ function Btn(props: BtnProps) {
       disabled={disabled || isGroupDisabled}
       className={styles.btn}
       type="button"
-      title={iconOnly ? label : undefined}
+      title={hint || (iconOnly ? label : undefined)}
       role={role === 'tablist' ? 'tab' : 'radio'}
       data-raised
+      data-hint={hint || undefined}
       aria-label={iconOnly ? label : undefined}
       aria-checked={value === selectedValue}
       onClick={() => {