silx-kit · axelboc · Feb 5, 2025 · Apr 7, 2025
diff --git a/packages/app/src/vis-packs/core/complex/MappedComplexLineVis.tsx b/packages/app/src/vis-packs/core/complex/MappedComplexLineVis.tsx
@@ -56,8 +56,14 @@ function MappedComplexLineVis(props: Props) {
   } = props;
 
   const { visType } = config;
-  const { customDomain, yScaleType, xScaleType, curveType, showGrid } =
-    lineConfig;
+  const {
+    customDomain,
+    yScaleType,
+    xScaleType,
+    curveType,
+    showGrid,
+    exactNotation,
+  } = lineConfig;
 
   const numAxisArrays = useToNumArrays(axisValues);
   const [dataArray, ...auxArrays] = useMappedComplexArrays(
@@ -110,6 +116,7 @@ function MappedComplexLineVis(props: Props) {
           label: auxLabels[i],
           array,
         }))}
+        exactNotation={exactNotation}
         testid={dimMapping.toString()}
       />
     </>

diff --git a/packages/app/src/vis-packs/core/complex/MappedComplexVis.tsx b/packages/app/src/vis-packs/core/complex/MappedComplexVis.tsx
@@ -61,6 +61,7 @@ function MappedComplexVis(props: Props) {
     keepRatio,
     showGrid,
     invertColorMap,
+    exactNotation,
   } = heatmapConfig;
 
   const numAxisArrays = useToNumArrays(axisValues);
@@ -111,6 +112,7 @@ function MappedComplexVis(props: Props) {
         scaleType={scaleType}
         aspect={keepRatio ? 'equal' : 'auto'}
         showGrid={showGrid}
+        exactNotation={exactNotation}
         invertColorMap={invertColorMap}
         abscissaParams={{
           label: axisLabels[xDimIndex],

diff --git a/packages/app/src/vis-packs/core/heatmap/HeatmapToolbar.tsx b/packages/app/src/vis-packs/core/heatmap/HeatmapToolbar.tsx
@@ -14,6 +14,7 @@ import { COLOR_SCALE_TYPES } from '@h5web/shared/vis-utils';
 import {
   MdAspectRatio,
   MdGridOn,
+  MdQueryStats,
   MdSwapHoriz,
   MdSwapVert,
 } from 'react-icons/md';
@@ -39,6 +40,7 @@ function HeatmapToolbar(props: Props) {
     invertColorMap,
     flipXAxis,
     flipYAxis,
+    exactNotation,
     setCustomDomain,
     setColorMap,
     setScaleType,
@@ -47,6 +49,7 @@ function HeatmapToolbar(props: Props) {
     toggleColorMapInversion,
     toggleXAxisFlip,
     toggleYAxisFlip,
+    toggleExactNotation,
   } = config;
 
   return (
@@ -105,6 +108,13 @@ function HeatmapToolbar(props: Props) {
         onToggle={toggleGrid}
       />
 
+      <ToggleBtn
+        label="Exact"
+        Icon={MdQueryStats}
+        value={exactNotation}
+        onToggle={toggleExactNotation}
+      />
+
       <Separator />
 
       {exportEntries.length > 0 && (

diff --git a/packages/app/src/vis-packs/core/heatmap/MappedHeatmapVis.tsx b/packages/app/src/vis-packs/core/heatmap/MappedHeatmapVis.tsx
@@ -62,6 +62,7 @@ function MappedHeatmapVis(props: Props) {
     invertColorMap,
     flipXAxis,
     flipYAxis,
+    exactNotation,
   } = config;
 
   const numArray = useToNumArray(value);
@@ -116,6 +117,7 @@ function MappedHeatmapVis(props: Props) {
         }}
         flipXAxis={flipXAxis}
         flipYAxis={flipYAxis}
+        exactNotation={exactNotation}
         ignoreValue={ignoreValue}
       />
     </>

diff --git a/packages/app/src/vis-packs/core/heatmap/config.tsx b/packages/app/src/vis-packs/core/heatmap/config.tsx
@@ -33,6 +33,9 @@ export interface HeatmapConfig {
 
   flipYAxis: boolean;
   toggleYAxisFlip: () => void;
+
+  exactNotation: boolean;
+  toggleExactNotation: () => void;
 }
 
 function createHeatmapConfigStore() {
@@ -69,6 +72,10 @@ function createHeatmapConfigStore() {
         flipXAxis: false,
         toggleXAxisFlip: () =>
           set((state) => ({ flipXAxis: !state.flipXAxis })),
+
+        exactNotation: false,
+        toggleExactNotation: () =>
+          set((state) => ({ exactNotation: !state.exactNotation })),
       }),
       {
         name: 'h5web:heatmap',

diff --git a/packages/app/src/vis-packs/core/line/LineToolbar.tsx b/packages/app/src/vis-packs/core/line/LineToolbar.tsx
@@ -10,7 +10,7 @@ import {
 } from '@h5web/lib';
 import { type Domain, type ExportEntry } from '@h5web/shared/vis-models';
 import { AXIS_SCALE_TYPES } from '@h5web/shared/vis-utils';
-import { MdGridOn } from 'react-icons/md';
+import { MdGridOn, MdQueryStats } from 'react-icons/md';
 
 import { INTERACTIONS_WITH_AXIAL_ZOOM } from '../utils';
 import { type LineConfig } from './config';
@@ -34,12 +34,14 @@ function LineToolbar(props: Props) {
     xScaleType,
     yScaleType,
     showErrors,
+    exactNotation,
     setCustomDomain,
     setCurveType,
     toggleGrid,
     setXScaleType,
     setYScaleType,
     toggleErrors,
+    toggleExactNotation,
   } = config;
 
   return (
@@ -82,6 +84,13 @@ function LineToolbar(props: Props) {
         onToggle={toggleGrid}
       />
 
+      <ToggleBtn
+        label="Exact"
+        Icon={MdQueryStats}
+        value={exactNotation}
+        onToggle={toggleExactNotation}
+      />
+
       <Separator />
 
       <ToggleGroup

diff --git a/packages/app/src/vis-packs/core/line/MappedLineVis.tsx b/packages/app/src/vis-packs/core/line/MappedLineVis.tsx
@@ -75,6 +75,7 @@ function MappedLineVis(props: Props) {
     curveType,
     showGrid,
     showErrors,
+    exactNotation,
   } = config;
 
   const { shape: dims } = dataset;
@@ -160,6 +161,7 @@ function MappedLineVis(props: Props) {
         errorsArray={errorsArray}
         showErrors={showErrors}
         auxiliaries={auxiliaries}
+        exactNotation={exactNotation}
         testid={dimMapping.toString()}
         ignoreValue={ignoreValue}
       />

diff --git a/packages/app/src/vis-packs/core/line/config.tsx b/packages/app/src/vis-packs/core/line/config.tsx
@@ -25,6 +25,9 @@ export interface LineConfig {
 
   showErrors: boolean;
   toggleErrors: () => void;
+
+  exactNotation: boolean;
+  toggleExactNotation: () => void;
 }
 
 function createLineConfigStore() {
@@ -47,6 +50,10 @@ function createLineConfigStore() {
 
         showErrors: true,
         toggleErrors: () => set((state) => ({ showErrors: !state.showErrors })),
+
+        exactNotation: false,
+        toggleExactNotation: () =>
+          set((state) => ({ exactNotation: !state.exactNotation })),
       }),
       {
         name: 'h5web:line',

diff --git a/packages/lib/src/vis/heatmap/HeatmapVis.tsx b/packages/lib/src/vis/heatmap/HeatmapVis.tsx
@@ -50,6 +50,7 @@ interface Props extends ClassStyleAttrs {
   minFilter?: MinificationTextureFilter;
   flipXAxis?: boolean;
   flipYAxis?: boolean;
+  exactNotation?: boolean;
   renderTooltip?: (data: TooltipData) => ReactElement;
   children?: ReactNode;
   interactions?: DefaultInteractionsConfig;
@@ -74,13 +75,15 @@ function HeatmapVis(props: Props) {
     minFilter,
     flipXAxis,
     flipYAxis,
+    exactNotation,
     renderTooltip,
     children,
     interactions,
     ignoreValue,
     className = '',
     style,
   } = props;
+
   const { label: abscissaLabel, value: abscissaValue } = abscissaParams;
   const { label: ordinateLabel, value: ordinateValue } = ordinateParams;
   const { rows, cols } = getDims(dataArray);
@@ -142,12 +145,17 @@ function HeatmapVis(props: Props) {
 
             return (
               <>
-                {`${abscissaLabel ?? 'x'}=${formatTooltipVal(abscissa)}, `}
-                {`${ordinateLabel ?? 'y'}=${formatTooltipVal(ordinate)}`}
+                {`${abscissaLabel ?? 'x'}=${exactNotation ? abscissa : formatTooltipVal(abscissa)}, `}
+                {`${ordinateLabel ?? 'y'}=${exactNotation ? ordinate : formatTooltipVal(ordinate)}`}
                 <div className={styles.tooltipValue}>
-                  <strong>{formatTooltipVal(dataArray.get(yi, xi))}</strong>
+                  <strong>
+                    {exactNotation
+                      ? dataArray.get(yi, xi)
+                      : formatTooltipVal(dataArray.get(yi, xi))}
+                  </strong>
                   {dtype && <em>{` (${dtype})`}</em>}
-                  {alpha && ` (${formatTooltipVal(alpha.array.get(yi, xi))})`}
+                  {alpha &&
+                    ` (${exactNotation ? alpha.array.get(yi, xi) : formatTooltipVal(alpha.array.get(yi, xi))})`}
                 </div>
               </>
             );

diff --git a/packages/lib/src/vis/line/LineVis.tsx b/packages/lib/src/vis/line/LineVis.tsx
@@ -37,6 +37,7 @@ interface Props extends ClassStyleAttrs {
   errorsArray?: NdArray<NumArray>;
   showErrors?: boolean;
   auxiliaries?: AuxiliaryParams[];
+  exactNotation?: boolean;
   renderTooltip?: (data: TooltipData) => ReactElement;
   children?: ReactNode;
   interactions?: DefaultInteractionsConfig;
@@ -58,6 +59,7 @@ function LineVis(props: Props) {
     errorsArray,
     showErrors = false,
     auxiliaries = [],
+    exactNotation,
     renderTooltip,
     children,
     interactions,
@@ -137,7 +139,7 @@ function LineVis(props: Props) {
 
             return (
               <>
-                {`${abscissaLabel ?? 'x'} = ${formatTooltipVal(abscissa)}`}
+                {`${abscissaLabel ?? 'x'} = ${exactNotation ? abscissa : formatTooltipVal(abscissa)}`}
 
                 <div className={styles.tooltipValue}>
                   {auxiliaries.length > 0 && (
@@ -148,8 +150,11 @@ function LineVis(props: Props) {
                     />
                   )}
                   <span>
-                    <strong>{formatTooltipVal(value)}</strong>
-                    {error !== undefined && ` ±${formatTooltipErr(error)}`}
+                    <strong>
+                      {exactNotation ? value : formatTooltipVal(value)}
+                    </strong>
+                    {error !== undefined &&
+                      ` ±${exactNotation ? error : formatTooltipErr(error)}`}
                     {dtype && <em>{` (${dtype})`}</em>}
                   </span>
                 </div>
@@ -162,8 +167,11 @@ function LineVis(props: Props) {
                       style={{ color: auxColors[index % auxColors.length] }}
                     />
                     {label ? `${label} = ` : ''}
-                    {formatTooltipVal(array.get(xi))}
-                    {errors && ` ±${formatTooltipErr(errors.get(xi))}`}
+                    {exactNotation
+                      ? array.get(xi)
+                      : formatTooltipVal(array.get(xi))}
+                    {errors &&
+                      ` ±${exactNotation ? errors.get(xi) : formatTooltipErr(errors.get(xi))}`}
                   </div>
                 ))}
               </>

diff --git a/packages/lib/src/vis/shared/TooltipMesh.tsx b/packages/lib/src/vis/shared/TooltipMesh.tsx
@@ -14,7 +14,7 @@ interface Props {
 }
 
 function TooltipMesh(props: Props) {
-  const { guides, renderTooltip, size } = props;
+  const { size, guides, renderTooltip } = props;
   const { canvasSize, worldToData } = useVisCanvasContext();
   const { width, height } = canvasSize;