Merge pull request #197 from silx-kit/fix-custom-domain

Fix custom domain resetting

Author: axelboc

src/h5web/visualizations/heatmap/ColorBar.tsx

@@ -9,7 +9,7 @@ import type { ColorMap } from './models';
 import { INTERPOLATORS } from './interpolators';
 
 interface Props {
-  domain?: Domain;
+  domain: Domain;
   scaleType: ScaleType;
   colorMap: ColorMap;
 }
@@ -19,10 +19,6 @@ function ColorBar(props: Props): JSX.Element {
   const interpolator = INTERPOLATORS[colorMap];
   const [gradientRef, { height: gradientHeight }] = useMeasure();
 
-  if (!domain) {
-    return <></>;
-  }
-
   const axisScale = SCALE_FUNCTIONS[scaleType]();
   axisScale.domain(domain);
   axisScale.range([gradientHeight, 0]);

src/h5web/visualizations/heatmap/DomainSlider.tsx

@@ -22,7 +22,7 @@ function DomainSlider(props: Props): ReactElement {
   const [extendedMin, extendedMax] = extendDomain(dataDomain, EXTEND_FACTOR);
   const step = Math.max((extendedMax - extendedMin) / 100, 10 ** -NB_DECIMALS);
 
-  const updateCustomDomain = debounce((bounds) => {
+  const updateDomain = debounce((bounds) => {
     const roundedDomain = (bounds as number[]).map((val) =>
       round(val, NB_DECIMALS)
     ) as Domain;
@@ -54,7 +54,7 @@ function DomainSlider(props: Props): ReactElement {
           </div>
         )}
         value={[...(value || dataDomain)]}
-        onChange={updateCustomDomain}
+        onChange={updateDomain}
         min={extendedMin}
         max={extendedMax}
         step={step}

src/h5web/visualizations/heatmap/HeatmapToolbar.tsx

@@ -12,8 +12,8 @@ import ScaleSelector from '../shared/ScaleSelector';
 function HeatmapToolbar(): ReactElement {
   const {
     dataDomain,
-    customDomain,
-    setCustomDomain,
+    requestedDomain,
+    setRequestedDomain,
     colorMap,
     setColorMap,
     scaleType,
@@ -29,8 +29,8 @@ function HeatmapToolbar(): ReactElement {
       {dataDomain && (
         <DomainSlider
           dataDomain={dataDomain}
-          value={customDomain}
-          onChange={setCustomDomain}
+          value={requestedDomain}
+          onChange={setRequestedDomain}
         />
       )}
 

src/h5web/visualizations/heatmap/HeatmapVis.module.css

@@ -47,3 +47,8 @@
   flex: 1 0 auto;
   border: 1px solid black;
 }
+
+.domainError {
+  padding: 1em;
+  color: var(--danger);
+}

src/h5web/visualizations/heatmap/HeatmapVis.tsx

@@ -1,14 +1,17 @@
-import React, { useEffect } from 'react';
+import React, { useMemo, useEffect } from 'react';
 import { format } from 'd3-format';
 import type ndarray from 'ndarray';
+import { usePrevious } from 'react-use';
 import styles from './HeatmapVis.module.css';
 import ColorBar from './ColorBar';
 import Mesh from './Mesh';
 import TooltipMesh from '../shared/TooltipMesh';
 import { useHeatmapConfig } from './config';
 import PanZoomMesh from '../shared/PanZoomMesh';
 import VisCanvas from '../shared/VisCanvas';
-import { getDims, useMemoColorScaleDomain } from './utils';
+import { getDims } from './utils';
+import { findDomain } from '../shared/utils';
+import { useMemoColorScaleDomain } from './hooks';
 
 interface Props {
   dataArray: ndarray<number>;
@@ -21,21 +24,27 @@ function HeatmapVis(props: Props): JSX.Element {
   const values = dataArray.data as number[];
 
   const {
-    dataDomain,
-    customDomain,
+    requestedDomain,
     scaleType,
     colorMap,
     keepAspectRatio,
     showGrid,
-    initDataDomain,
+    resetDomains,
   } = useHeatmapConfig();
 
-  // width / height <=> cols / rows
-  const aspectRatio = keepAspectRatio ? cols / rows : undefined;
+  const dataDomain = useMemo(() => findDomain(values), [values]);
+  const prevDataDomain = usePrevious(dataDomain);
+
+  // If `dataDomain` just changed, use `undefined` custom domain for this render until config's `requestedDomain` is updated through `useEffect` below
+  const customDomain =
+    dataDomain !== prevDataDomain ? undefined : requestedDomain;
 
   useEffect(() => {
-    initDataDomain(values);
-  }, [initDataDomain, values]);
+    // When `dataDomain` changes:
+    // - set data domain in config so toolbar can render domain slider with correct bounds;
+    // - reset requested domain in config so toolbar can reset value of domain slider, and so Heatmap can use in its next render.
+    resetDomains(dataDomain);
+  }, [dataDomain, resetDomains]);
 
   const domain = useMemoColorScaleDomain(
     scaleType,
@@ -44,6 +53,13 @@ function HeatmapVis(props: Props): JSX.Element {
     customDomain
   );
 
+  // width / height <=> cols / rows
+  const aspectRatio = keepAspectRatio ? cols / rows : undefined;
+
+  if (!domain) {
+    return <p className={styles.domainError}>Unable to compute domain</p>;
+  }
+
   return (
     <div className={styles.root}>
       <VisCanvas

src/h5web/visualizations/heatmap/Mesh.tsx

@@ -11,7 +11,7 @@ interface Props {
   rows: number;
   cols: number;
   values: number[];
-  domain: Domain | undefined;
+  domain: Domain;
   scaleType: ScaleType;
   colorMap: ColorMap;
 }

src/h5web/visualizations/heatmap/config.ts

@@ -1,14 +1,13 @@
 import type { ColorMap } from './models';
 import { Domain, ScaleType } from '../shared/models';
 import { StorageConfig, createPersistableState } from '../../storage-utils';
-import { findDomain } from '../shared/utils';
 
 interface HeatmapConfig {
   dataDomain: Domain | undefined;
-  initDataDomain: (values: number[]) => void;
+  resetDomains: (dataDomain: Domain | undefined) => void;
 
-  customDomain: Domain | undefined;
-  setCustomDomain: (customDomain: Domain | undefined) => void;
+  requestedDomain: Domain | undefined;
+  setRequestedDomain: (requestedDomain: Domain | undefined) => void;
 
   colorMap: ColorMap;
   setColorMap: (colorMap: ColorMap) => void;
@@ -32,16 +31,16 @@ export const [useHeatmapConfig] = createPersistableState<HeatmapConfig>(
   STORAGE_CONFIG,
   (set) => ({
     dataDomain: undefined,
-    initDataDomain: (values: number[]) => {
+    resetDomains: (dataDomain: Domain | undefined) => {
       set({
-        dataDomain: findDomain(values),
-        customDomain: undefined, // reset custom domain
+        dataDomain,
+        requestedDomain: undefined,
       });
     },
 
-    customDomain: undefined,
-    setCustomDomain: (customDomain: Domain | undefined) =>
-      set({ customDomain }),
+    requestedDomain: undefined,
+    setRequestedDomain: (requestedDomain: Domain | undefined) =>
+      set({ requestedDomain }),
 
     colorMap: 'Viridis',
     setColorMap: (colorMap: ColorMap) => set({ colorMap }),

src/h5web/visualizations/heatmap/hooks.ts

@@ -1,14 +1,15 @@
 import { useEffect } from 'react';
 import { transfer } from 'comlink';
 import { useComlink } from 'react-use-comlink';
-import { useSetState } from 'react-use';
+import { useSetState, createMemo } from 'react-use';
 
 // @ts-ignore
 import Worker from 'worker-loader!./worker';
 
 import type { TextureWorker } from './worker';
 import type { Domain, ScaleType } from '../shared/models';
 import type { ColorMap } from './models';
+import { getColorScaleDomain } from './utils';
 
 export interface TextureDataState {
   loading?: boolean;
@@ -20,26 +21,14 @@ export function useTextureData(
   rows: number,
   cols: number,
   values: number[],
-  domain: Domain | undefined,
+  domain: Domain,
   scaleType: ScaleType,
   colorMap: ColorMap
 ): TextureDataState {
   const { proxy } = useComlink<TextureWorker>(() => new Worker(), []);
   const [state, mergeState] = useSetState<TextureDataState>({});
 
-  /*
-   * Dependencies that trigger a recomputation of the texture.
-   * > Note that `values` is purposely not included. When `values` changes, a first render
-   * > is triggered, during which `dataDomain` has not yet been recomputed. We must wait for
-   * > `domain` to be updated before recomputing the texture.
-   */
-  const deps = [colorMap, domain, scaleType, proxy, mergeState];
-
   useEffect(() => {
-    if (!domain) {
-      return;
-    }
-
     // Keep existing texture data, if any
     mergeState({ loading: true });
 
@@ -57,7 +46,7 @@ export function useTextureData(
         ),
       });
     })();
-  }, deps); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [colorMap, domain, scaleType, proxy, mergeState, values]);
 
   // Reset texture when dimensions change to avoid rendering glitch while computing new texture
   const dims = `${rows}x${cols}`;
@@ -67,3 +56,5 @@ export function useTextureData(
 
   return state;
 }
+
+export const useMemoColorScaleDomain = createMemo(getColorScaleDomain);

src/h5web/visualizations/heatmap/utils.ts

@@ -1,5 +1,4 @@
 import { range } from 'lodash-es';
-import { createMemo } from 'react-use';
 import type { D3Interpolator, Dims } from './models';
 import type { DataArray } from '../../dataset-visualizer/models';
 import { ScaleType, Domain } from '../shared/models';
@@ -21,7 +20,7 @@ export function generateCSSLinearGradient(
   return `linear-gradient(to ${direction},${gradientColors})`;
 }
 
-function getColorScaleDomain(
+export function getColorScaleDomain(
   scaleType: ScaleType,
   values: number[],
   dataDomain?: Domain,
@@ -47,5 +46,3 @@ function getColorScaleDomain(
 
   return supportedDomain;
 }
-
-export const useMemoColorScaleDomain = createMemo(getColorScaleDomain);

src/styles/vars.css

@@ -12,6 +12,7 @@
   --secondary-darker: #0e5846;
   --secondary-bg: #d9f4ec;
   --secondary-light-bg: #ecfaf6;
+  --danger: #99231b;
   --monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
     monospace;
   --sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',