Defer histogram for dialog

client/component/src/AxisConfigModal.tsx

@@ -51,8 +51,8 @@ interface AxisConfigModalProps<S extends ScaleType> {
   domain?: Domain;
   /** The custom domain for the axis (optional) */
   customDomain?: CustomDomain;
-  /** Histogram params */
-  histogram?: HistogramParams;
+  /** Histogram params getter */
+  histogramGetter?: () => HistogramParams;
   /** The function to call when the custom domain is updated (optional) */
   setCustomDomain?: (value: CustomDomain) => void;
   /** Point size for scatter plot (optional) */
@@ -106,15 +106,15 @@ function AxisConfigModal<S extends ScaleType>(
     );
 
   const domainSelector = props.domain &&
-    props.histogram &&
+    props.histogramGetter &&
     props.customDomain &&
     props.setCustomDomain && (
       <DomainConfig
         dataDomain={props.domain}
         customDomain={props.customDomain}
         scaleType={props.scaleType as ColorScaleType | undefined}
         onCustomDomainChange={props.setCustomDomain}
-        histogram={props.histogram}
+        histogramGetter={props.histogramGetter}
       />
     );
 

client/component/src/DomainConfig.tsx

@@ -73,7 +73,7 @@ interface DomainConfigProps {
   /** Handles custom domain change */
   onCustomDomainChange: (domain: CustomDomain) => void;
   /** Histogram params */
-  histogram?: HistogramParams;
+  histogramGetter?: () => HistogramParams;
 }
 
 /**
@@ -83,11 +83,16 @@ interface DomainConfigProps {
  */
 function DomainConfig(props: DomainConfigProps) {
   const { dataDomain, customDomain, scaleType } = props;
-  const { onCustomDomainChange, histogram } = props;
+  const { onCustomDomainChange, histogramGetter } = props;
   const [lockDomain, setLockDomain] = useState<boolean>(false);
 
   const visDomain = useVisDomain(customDomain, dataDomain);
 
+  const histogram = useMemo(
+    () => histogramGetter && histogramGetter(),
+    [histogramGetter]
+  );
+
   const memoizedCustomDomain = useMemo(() => {
     if (lockDomain) {
       return customDomain;

client/component/src/HeatmapPlot.tsx

@@ -8,7 +8,7 @@ import {
 } from '@h5web/lib';
 
 import {
-  calculateHistogramCounts,
+  createHistogramParams,
   createInteractionsConfig,
   InteractionModeType,
 } from './utils';
@@ -20,7 +20,7 @@ import {
   usePlotCustomizationContext,
 } from './PlotCustomizationContext';
 import { AnyToolbar } from './PlotToolbar';
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 
 interface Props {
   xValues?: NDT;
@@ -47,24 +47,15 @@ export function HeatmapVisCanvas({ xValues, yValues, values }: Props) {
     colourMap,
     invertColourMap,
     dScaleType,
-    setHistogram,
+    updateHistogramGetter,
   } = usePlotCustomizationContext();
   const interactionsConfig = createInteractionsConfig(mode);
 
-  const histogram = useMemo(
-    () => calculateHistogramCounts(values.data, dDomain),
-    [dDomain, values]
-  );
-
   useEffect(() => {
-    if (histogram) {
-      setHistogram({
-        ...histogram,
-        colorMap: colourMap,
-        invertColorMap: invertColourMap,
-      });
-    }
-  }, [colourMap, invertColourMap, histogram, setHistogram]);
+    const hg = () =>
+      createHistogramParams(values.data, dDomain, colourMap, invertColourMap);
+    updateHistogramGetter(hg);
+  }, [values.data, dDomain, colourMap, invertColourMap, updateHistogramGetter]);
 
   return (
     <HeatmapVis

client/component/src/PlotCustomizationContext.tsx

@@ -142,10 +142,11 @@ export interface PlotCustomizationContextValue {
   showPoints: boolean;
   /** A function that toggles the points */
   toggleShowPoints: () => void;
-  /** Histogram params */
-  histogram?: HistogramParams;
-  /** Set heatmap histogram */
-  setHistogram: (histogram: HistogramParams) => void;
+  /** Get heatmap histogram */
+  histogramGetter?: () => HistogramParams;
+  /** Update heatmap histogram getter */
+  updateHistogramGetter: (getter: () => HistogramParams) => void;
+
   /** Can select */
   canSelect: boolean;
   /** Type of plot */
@@ -213,9 +214,15 @@ export function PlotCustomizationContextProvider(
     new Map()
   );
   const [currentLineKey, setCurrentLineKey] = useState<string | null>(null);
-  const [histogram, setHistogram] = useState<HistogramParams>();
+  const [histogramGetter, setHistogramGetter] =
+    useState<() => HistogramParams>();
   const [scatterPointSize, setScatterPointSize] = useState<number>(10);
 
+  const updateHistogramGetter = useCallback(
+    (g: () => HistogramParams) => setHistogramGetter(() => g),
+    [setHistogramGetter]
+  );
+
   useEffect(() => {
     if (props.plotConfig.title) setTitle(props.plotConfig.title);
   }, [props.plotConfig.title, setTitle]);
@@ -370,7 +377,8 @@ export function PlotCustomizationContextProvider(
       selectionMax,
       selectionType,
       setSelectionType: newSetSelectionType,
-      setHistogram,
+      histogramGetter,
+      updateHistogramGetter,
       selections,
       setSelections,
       updateSelection: newUpdateSelection,
@@ -387,7 +395,6 @@ export function PlotCustomizationContextProvider(
       setColourMap,
       invertColourMap,
       toggleInvertColourMap,
-      histogram,
       scatterPointSize,
       setScatterPointSize,
       showPoints,
@@ -405,7 +412,8 @@ export function PlotCustomizationContextProvider(
     dCustomDomain,
     dDomain,
     dScaleType,
-    histogram,
+    histogramGetter,
+    updateHistogramGetter,
     invertColourMap,
     mode,
     newUpdateSelection,

client/component/src/PlotToolbar.tsx

@@ -253,7 +253,7 @@ function PlotToolbar(props: PropsWithChildren): JSX.Element {
       domain: value.dDomain,
       customDomain: value.dCustomDomain,
       setCustomDomain: value.setDCustomDomain,
-      histogram: value.histogram,
+      histogramGetter: value.histogramGetter,
       scatterPointSize: isScatter ? value.scatterPointSize : undefined,
       setScatterPointSize: value.setScatterPointSize,
       hasBaton,

client/component/src/ScatterPlot.tsx

@@ -8,7 +8,7 @@ import {
 
 import SelectionComponent from './SelectionComponent';
 import {
-  calculateHistogramCounts,
+  createHistogramParams,
   createInteractionsConfig,
   InteractionModeType,
 } from './utils';
@@ -18,7 +18,7 @@ import {
   usePlotCustomizationContext,
 } from './PlotCustomizationContext';
 import { AnyToolbar } from './PlotToolbar';
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 
 interface Props {
   x: NDT;
@@ -47,24 +47,15 @@ export function ScatterVisCanvas({ x, y, values }: Props) {
     invertColourMap,
     dScaleType,
     scatterPointSize,
-    setHistogram,
+    updateHistogramGetter,
   } = usePlotCustomizationContext();
   const interactionsConfig = createInteractionsConfig(mode);
 
-  const histogram = useMemo(
-    () => calculateHistogramCounts(values.data, dDomain),
-    [dDomain, values]
-  );
-
   useEffect(() => {
-    if (histogram) {
-      setHistogram({
-        ...histogram,
-        colorMap: colourMap,
-        invertColorMap: invertColourMap,
-      });
-    }
-  }, [colourMap, invertColourMap, histogram, setHistogram]);
+    const hg = () =>
+      createHistogramParams(values.data, dDomain, colourMap, invertColourMap);
+    updateHistogramGetter(hg);
+  }, [values.data, dDomain, colourMap, invertColourMap, updateHistogramGetter]);
 
   return (
     <ScatterVis

client/component/src/SurfacePlot.tsx

@@ -14,7 +14,7 @@ import {
 } from './PlotCustomizationContext';
 import { AnyToolbar } from './PlotToolbar';
 import { PropsWithChildren, useEffect, useMemo } from 'react';
-import { calculateHistogramCounts } from './utils';
+import { createHistogramParams } from './utils';
 
 interface Props {
   values: NDT;
@@ -30,7 +30,7 @@ export function SurfaceVisCanvas(props: PropsWithChildren<Props>) {
     invertColourMap,
     dScaleType,
     showPoints,
-    setHistogram,
+    updateHistogramGetter,
   } = usePlotCustomizationContext();
 
   const visDomain = useMemo(
@@ -39,18 +39,10 @@ export function SurfaceVisCanvas(props: PropsWithChildren<Props>) {
   );
 
   useEffect(() => {
-    const histogram = calculateHistogramCounts(values.data, dDomain);
-
-    if (histogram) {
-      console.log('Set histogram:', histogram, colourMap, invertColourMap);
-
-      setHistogram({
-        ...histogram,
-        colorMap: colourMap,
-        invertColorMap: invertColourMap,
-      });
-    }
-  }, [dDomain, values, colourMap, invertColourMap, setHistogram]);
+    const hg = () =>
+      createHistogramParams(values.data, dDomain, colourMap, invertColourMap);
+    updateHistogramGetter(hg);
+  }, [values.data, dDomain, colourMap, invertColourMap, updateHistogramGetter]);
 
   return (
     <SurfaceVis

client/component/src/utils.ts

@@ -12,6 +12,7 @@ import type {
   ColorScaleType,
   DefaultInteractionsConfig,
   Domain,
+  HistogramParams,
   PanProps,
   SelectToZoomProps,
   XAxisZoomProps,
@@ -545,6 +546,27 @@ function calculateHistogramCounts(
   return undefined;
 }
 
+/**
+ * Create histogram parameters
+ * @param data
+ * @param domain
+ * @param colorMap
+ * @param invertColorMap
+ * @returns histogram parameters
+ */
+function createHistogramParams(
+  data: TypedArray,
+  domain: Domain,
+  colorMap: ColorMap,
+  invertColorMap: boolean
+) {
+  const histogram = calculateHistogramCounts(data, domain);
+  return { ...histogram, colorMap, invertColorMap } as HistogramParams;
+}
+
+/**
+ * Measure time of interaction
+ */
 function measureInteraction() {
   const startTimestamp = performance.now();
   return {
@@ -573,6 +595,7 @@ export {
   createSurfaceData,
   createTableData,
   calculateHistogramCounts,
+  createHistogramParams,
   createInteractionsConfig,
   getAspectType,
   InteractionModeType,