Add auxiliaries toggle to line vis toolbar

Author: axelboc

apps/storybook/src/DataCurve.stories.tsx

@@ -3,6 +3,7 @@ import {
   CurveType,
   DataCurve,
   DefaultInteractions,
+  FloatingControl,
   GlyphType as GlyphTypeEnum,
   mockValues,
   ScaleType,
@@ -29,7 +30,6 @@ const meta = {
   args: {
     abscissas: range(oneD.size),
     ordinates: oneD.data,
-    errors: oneD.data.map(() => 10),
     curveType: CurveType.LineOnly,
     color: 'blue',
     materialProps: {},
@@ -52,13 +52,13 @@ type Story = StoryObj<typeof meta>;
 
 export const Default = {
   render: (args) => {
-    const { abscissas, ordinates, errors, showErrors, ignoreValue } = args;
+    const { abscissas, ordinates, errors, ignoreValue } = args;
 
     const abscissaDomain = useDomain(abscissas);
     const ordinateDomain = useDomain(
       ordinates,
       ScaleType.Linear,
-      showErrors ? errors : undefined,
+      errors,
       ignoreValue,
     );
 
@@ -94,7 +94,7 @@ export const Glyphs = {
 export const WithErrors = {
   ...Default,
   args: {
-    showErrors: true,
+    errors: oneD.data.map(() => 10),
   },
 } satisfies Story;
 

packages/app/src/vis-packs/core/complex/MappedComplexLineVis.tsx

@@ -59,8 +59,9 @@ function MappedComplexLineVis(props: Props) {
     yScaleType,
     xScaleType,
     complexVisType,
-    curveType,
+    showAux,
     showGrid,
+    curveType,
   } = config;
 
   const { phaseArrays, amplitudeArrays } = usePhaseAmplitudeArrays([
@@ -98,7 +99,12 @@ function MappedComplexLineVis(props: Props) {
     <>
       {toolbarContainer &&
         createPortal(
-          <LineToolbar dataDomain={combinedDomain} isComplex config={config} />,
+          <LineToolbar
+            dataDomain={combinedDomain}
+            isComplex
+            withAux={auxValues.length > 0}
+            config={config}
+          />,
           toolbarContainer,
         )}
 
@@ -107,8 +113,6 @@ function MappedComplexLineVis(props: Props) {
         dataArray={dataArray}
         domain={safeDomain}
         scaleType={yScaleType}
-        curveType={curveType}
-        showGrid={showGrid}
         abscissaParams={{
           label: axisLabels[xDimIndex],
           value: numAxisArrays[xDimIndex],
@@ -120,6 +124,9 @@ function MappedComplexLineVis(props: Props) {
           label: auxLabels[i],
           array,
         }))}
+        showAux={showAux}
+        showGrid={showGrid}
+        curveType={curveType}
         testid={dimMapping.toString()}
       />
     </>

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

@@ -15,7 +15,7 @@ import {
   type ExportEntry,
 } from '@h5web/shared/vis-models';
 import { AXIS_SCALE_TYPES } from '@h5web/shared/vis-utils';
-import { MdGridOn } from 'react-icons/md';
+import { MdGridOn, MdLegendToggle } from 'react-icons/md';
 
 import { INTERACTIONS_WITH_AXIAL_ZOOM } from '../utils';
 import { type LineConfig } from './config';
@@ -25,7 +25,8 @@ interface Props {
   dataDomain: Domain;
   isSlice?: boolean;
   isComplex?: boolean;
-  disableErrors?: boolean;
+  withErrors?: boolean;
+  withAux?: boolean;
   config: LineConfig;
   exportEntries?: ExportEntry[];
 }
@@ -35,26 +36,29 @@ function LineToolbar(props: Props) {
     dataDomain,
     isSlice,
     isComplex,
-    disableErrors,
+    withErrors,
+    withAux,
     config,
     exportEntries,
   } = props;
 
   const {
     customDomain,
-    curveType,
-    showGrid,
     xScaleType,
     yScaleType,
     complexVisType,
     showErrors,
+    showAux,
+    showGrid,
+    curveType,
     setCustomDomain,
-    setCurveType,
-    toggleGrid,
     setXScaleType,
     setYScaleType,
     setComplexVisType,
+    toggleAux,
     toggleErrors,
+    toggleGrid,
+    setCurveType,
   } = config;
 
   return (
@@ -93,13 +97,21 @@ function LineToolbar(props: Props) {
 
       <Separator />
 
-      {!isComplex && (
+      {withErrors && (
         <ToggleBtn
           label="Errors"
           Icon={ErrorsIcon}
-          value={!disableErrors && showErrors}
+          value={showErrors}
           onToggle={toggleErrors}
-          disabled={disableErrors}
+        />
+      )}
+
+      {withAux && (
+        <ToggleBtn
+          label="Aux"
+          Icon={MdLegendToggle}
+          value={showAux}
+          onToggle={toggleAux}
         />
       )}
 
@@ -110,8 +122,6 @@ function LineToolbar(props: Props) {
         onToggle={toggleGrid}
       />
 
-      <Separator />
-
       <ToggleGroup
         role="radiogroup"
         ariaLabel="Curve type"

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

@@ -76,9 +76,10 @@ function MappedLineVis(props: Props) {
     customDomain,
     yScaleType,
     xScaleType,
-    curveType,
-    showGrid,
     showErrors,
+    showAux,
+    showGrid,
+    curveType,
   } = config;
 
   const { shape: dims } = dataset;
@@ -153,7 +154,8 @@ function MappedLineVis(props: Props) {
           <LineToolbar
             dataDomain={combinedDomain}
             isSlice={selection !== undefined}
-            disableErrors={!errors}
+            withErrors={!!errors}
+            withAux={auxiliaries.length > 0}
             config={config}
             exportEntries={exportEntries}
           />,
@@ -165,15 +167,16 @@ function MappedLineVis(props: Props) {
         dataArray={dataArray}
         domain={safeDomain}
         scaleType={yScaleType}
-        curveType={curveType}
-        showGrid={showGrid}
         abscissaParams={abscissaParams}
         ordinateLabel={valueLabel}
         title={title}
         dtype={formatNumLikeType(dataset.type)}
         errorsArray={errorsArray}
         showErrors={showErrors}
         auxiliaries={auxiliaries}
+        showAux={showAux}
+        showGrid={showGrid}
+        curveType={curveType}
         testid={dimMapping.toString()}
         ignoreValue={ignoreValue}
       />

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

@@ -17,12 +17,6 @@ export interface LineConfig {
   customDomain: CustomDomain;
   setCustomDomain: (customDomain: CustomDomain) => void;
 
-  curveType: CurveType;
-  setCurveType: (type: CurveType) => void;
-
-  showGrid: boolean;
-  toggleGrid: () => void;
-
   xScaleType: AxisScaleType;
   yScaleType: AxisScaleType;
   setXScaleType: (type: AxisScaleType) => void;
@@ -33,6 +27,15 @@ export interface LineConfig {
 
   showErrors: boolean;
   toggleErrors: () => void;
+
+  showAux: boolean;
+  toggleAux: () => void;
+
+  showGrid: boolean;
+  toggleGrid: () => void;
+
+  curveType: CurveType;
+  setCurveType: (type: CurveType) => void;
 }
 
 function createLineConfigStore() {
@@ -42,12 +45,6 @@ function createLineConfigStore() {
         customDomain: [null, null],
         setCustomDomain: (customDomain) => set({ customDomain }),
 
-        curveType: CurveType.LineOnly,
-        setCurveType: (curveType) => set({ curveType }),
-
-        showGrid: true,
-        toggleGrid: () => set((state) => ({ showGrid: !state.showGrid })),
-
         xScaleType: ScaleType.Linear,
         yScaleType: ScaleType.Linear,
         setXScaleType: (xScaleType) => set({ xScaleType }),
@@ -58,10 +55,19 @@ function createLineConfigStore() {
 
         showErrors: true,
         toggleErrors: () => set((state) => ({ showErrors: !state.showErrors })),
+
+        showAux: true,
+        toggleAux: () => set((state) => ({ showAux: !state.showAux })),
+
+        showGrid: true,
+        toggleGrid: () => set((state) => ({ showGrid: !state.showGrid })),
+
+        curveType: CurveType.LineOnly,
+        setCurveType: (curveType) => set({ curveType }),
       }),
       {
         name: 'h5web:line',
-        version: 6,
+        version: 7,
       },
     ),
   );

packages/lib/src/vis/line/DataCurve.tsx

@@ -35,7 +35,7 @@ function DataCurve(props: Props) {
     abscissas,
     ordinates,
     errors,
-    showErrors,
+    showErrors = true,
     color,
     curveType = CurveType.LineOnly,
     glyphType = GlyphType.Cross,

packages/lib/src/vis/line/LineVis.tsx

@@ -28,15 +28,16 @@ interface Props extends ClassStyleAttrs {
   dataArray: NdArray<NumArray>;
   domain: Domain | undefined;
   scaleType?: AxisScaleType;
-  curveType?: CurveType;
-  showGrid?: boolean;
   abscissaParams?: AxisParams;
   ordinateLabel?: string;
   title?: string;
   dtype?: string;
   errorsArray?: NdArray<NumArray>;
   showErrors?: boolean;
   auxiliaries?: AuxiliaryParams[];
+  showAux?: boolean;
+  showGrid?: boolean;
+  curveType?: CurveType;
   renderTooltip?: (data: TooltipData) => ReactElement;
   children?: ReactNode;
   interactions?: DefaultInteractionsConfig;
@@ -56,8 +57,9 @@ function LineVis(props: Props) {
     title,
     dtype,
     errorsArray,
-    showErrors = false,
+    showErrors = true,
     auxiliaries = [],
+    showAux = true,
     renderTooltip,
     children,
     interactions,
@@ -191,6 +193,7 @@ function LineVis(props: Props) {
             color={auxColors[i % auxColors.length]}
             curveType={curveType}
             ignoreValue={ignoreValue}
+            visible={showAux}
           />
         ))}