Update h5web to version 12

client/component/package.json

@@ -23,10 +23,10 @@
     "types": "dist/index.d.ts"
   },
   "dependencies": {
-    "@h5web/lib": "^11.2.0",
-    "@react-hookz/web": "^23.1.0",
-    "@react-three/drei": "^9.102.4",
-    "@react-three/fiber": "^8.15.19",
+    "@h5web/lib": "^12.0.1",
+    "@react-hookz/web": "^24.0.4",
+    "@react-three/drei": "^9.111.2",
+    "@react-three/fiber": "^8.17.5",
     "@visx/drag": "^3.3.0",
     "afterframe": "^1.0.2",
     "buffer": "^6.0.3",
@@ -38,16 +38,16 @@
     "ndarray": "^1.0.19",
     "ndarray-concat-rows": "^1.0.1",
     "ndarray-linspace": "^2.0.3",
-    "react": "^18.3.0",
+    "react": "^18.3.1",
     "react-colorful": "^5.6.1",
-    "react-dom": "^18.3.0",
+    "react-dom": "^18.3.1",
     "react-draggable": "^4.4.6",
-    "react-icons": "^5.2.0",
+    "react-icons": "^5.3.0",
     "react-select": "^5.8.0",
     "react-toastify": "^9.1.3",
-    "react-use-websocket": "^4.5.0",
-    "three": "^0.162.0",
-    "websocket": "^1.0.34"
+    "react-use-websocket": "^4.8.1",
+    "three": "^0.167.1",
+    "websocket": "^1.0.35"
   },
   "devDependencies": {
     "@types/cwise": "^1.0.6",
@@ -56,13 +56,13 @@
     "@types/d3-random": "^3.0.3",
     "@types/d3-scale": "^4.0.8",
     "@types/ndarray": "^1.0.14",
-    "@types/react": "^18.3.0",
+    "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
-    "@types/three": "^0.162.0",
+    "@types/three": "^0.164.1",
     "@types/websocket": "^1.0.10",
     "d3-random": "^3.0.1",
-    "typedoc": "^0.25.7",
-    "vite-plugin-dts": "^3.7.2",
-    "vitest": "^1.3.1"
+    "typedoc": "^0.25.13",
+    "vite-plugin-dts": "^3.9.1",
+    "vitest": "^1.6.0"
   }
 }

client/component/src/AnyPlot.tsx

@@ -28,38 +28,40 @@ type AnyPlotProps = AnyPlotVisProps | TableDisplayProps;
 
 function AnyVisCanvas(props: AnyPlotProps) {
   let visCanvas = null;
-  if ('heatmapScale' in props) {
-    visCanvas = (
-      <HeatmapVisCanvas
-        xValues={props.plotConfig.xValues}
-        yValues={props.plotConfig.yValues}
-        values={props.values}
-      />
-    );
+  if ('lineData' in props && props.lineData.length !== 0) {
+    visCanvas = <LineVisCanvas lineData={props.lineData} />;
   } else if ('values' in props) {
-    visCanvas = (
-      <ImageVisCanvas
-        xValues={props.plotConfig.xValues}
-        yValues={props.plotConfig.yValues}
-        values={props.values}
-      />
-    );
-  } else if ('surfaceScale' in props) {
+    if ('heatmapScale' in props) {
+      visCanvas = (
+        <HeatmapVisCanvas
+          xValues={props.plotConfig.xValues}
+          yValues={props.plotConfig.yValues}
+          values={props.values}
+        />
+      );
+    } else {
+      visCanvas = (
+        <ImageVisCanvas
+          xValues={props.plotConfig.xValues}
+          yValues={props.plotConfig.yValues}
+          values={props.values}
+        />
+      );
+    }
+  } else if ('heightValues' in props) {
     visCanvas = <SurfaceVisCanvas values={props.heightValues} />;
   } else if ('pointValues' in props) {
     visCanvas = (
       <ScatterVisCanvas x={props.x} y={props.y} values={props.pointValues} />
     );
-  } else if ('lineData' in props && props.lineData.length !== 0) {
-    visCanvas = <LineVisCanvas lineData={props.lineData} />;
   }
   return visCanvas;
 }
 
 /**
  * A plot that accepts any plot props
  * @param {AnyPlotProps} props - component props
- * @returns {React.JSX.Element} The rendered component.
+ * @returns {JSX.Element} The rendered component.
  */
 function AnyPlot(props: AnyPlotProps) {
   const interactionTime = useRef<number>(0);
@@ -68,20 +70,6 @@ function AnyPlot(props: AnyPlotProps) {
     interactionTime.current = interaction.end();
   });
 
-  if (!props.batonProps) {
-    props = {
-      ...props,
-      batonProps: {
-        uuid: '',
-        batonUuid: '',
-        others: [],
-        hasBaton: true,
-        requestBaton: () => {},
-        approveBaton: (_s) => {},
-      },
-    };
-  }
-
   if ('cellWidth' in props) {
     return <TableDisplay {...props}></TableDisplay>;
   }

client/component/src/AspectConfigModal.tsx

@@ -1,6 +1,7 @@
 import { type Aspect, ToggleGroup } from '@h5web/lib';
-import React, { useEffect, useMemo, useState } from 'react';
-import type { ReactNode } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import type { PropsWithChildren } from 'react';
+import { MdAspectRatio } from 'react-icons/md';
 
 import LabelledInput from './LabelledInput';
 import type { IIconType } from './Modal';
@@ -12,61 +13,51 @@ import { getAspectType, isValidPositiveNumber } from './utils';
  * Props for the `AspectConfigModal` component.
  */
 interface AspectConfigModalProps {
-  /**
-   * The title of the modal and the label on the modal's button */
-  title: string;
-  /**
-   * The icon to display on the modal's button (optional) */
-  icon?: IIconType;
-  /**
-   * The current value of the aspect */
+  /** The current value of the aspect */
   aspect: Aspect;
-  /**
-   * The function to update aspect state */
+  /** The function to update aspect state */
   setAspect: (value: Aspect) => void;
-  /**
-   * The children to render inside the modal (optional) */
-  children?: ReactNode;
+  /** If true, hide toggle */
+  hideToggle?: boolean;
+  /** The children to render inside the modal (optional) */
 }
 
 /**
  * Render the configuration options for the aspect ratio.
  * @param {AspectConfigModalProps} props - The component props.
- * @returns {(React.JSX.Element | null)[]} {Modal} The rendered component.
+ * @returns {JSX.Element} {Modal} The rendered component.
  */
-function AspectConfigModal(
-  props: AspectConfigModalProps
-): (React.JSX.Element | null)[] {
-  const initialAspect = props.aspect;
-  const [aspectType, setAspectType] = useState<string>('');
-  const [aspectRatio, setAspectRatio] = useState<number>(1.0);
-  const initialType = useMemo(
-    () => getAspectType(initialAspect),
-    [initialAspect]
-  );
+function AspectConfigModal(props: PropsWithChildren<AspectConfigModalProps>) {
+  const { aspect: initAspect, setAspect, children } = props;
+  const typeRef = useRef('number');
+  const [aspectRatio, setAspectRatio] = useState<number>(2.0);
+
   useEffect(() => {
-    setAspectType(initialType);
-    setAspectRatio(initialType === 'number' ? (initialAspect as number) : 2);
-  }, [initialAspect, initialType]);
+    const initType = getAspectType(initAspect);
+    console.log('Set initial type', initType, initAspect);
+    typeRef.current = initType;
+    setAspectRatio(initType === 'number' ? (initAspect as number) : 2.0);
+  }, [initAspect]);
 
   function handleAspectTypeChange(val: string) {
-    setAspectType(val);
+    typeRef.current = val;
     if (val === 'number') {
-      props.setAspect(aspectRatio);
+      setAspect(aspectRatio);
     } else {
-      props.setAspect(val as Aspect);
+      setAspect(val as Aspect);
     }
   }
 
   return Modal({
-    title: props.title,
-    icon: props.icon,
+    title: 'Aspect ratio',
+    icon: MdAspectRatio as IIconType,
+    hideToggle: props.hideToggle,
     children: (
       <>
         <div className={styles.aspect}>
           <LabelledInput<number>
             key="0"
-            disabled={aspectType !== 'number'}
+            disabled={typeRef.current !== 'number'}
             label="aspect ratio"
             input={aspectRatio}
             isValid={(v) => isValidPositiveNumber(v, 10)}
@@ -76,8 +67,8 @@ function AspectConfigModal(
               size: 3,
             }}
             updateValue={(v) => {
-              props.setAspect(v);
               setAspectRatio(v);
+              setAspect(v);
             }}
             submitLabel="update ratio"
           />
@@ -86,14 +77,14 @@ function AspectConfigModal(
           <ToggleGroup
             role="radiogroup"
             ariaLabel="aspect"
-            value={aspectType}
+            value={typeRef.current}
             onChange={handleAspectTypeChange}
           >
             <ToggleGroup.Btn label="number" value="number" />
             <ToggleGroup.Btn label="auto" value="auto" />
             <ToggleGroup.Btn label="equal" value="equal" />
           </ToggleGroup>
-          {props.children}
+          {children}
         </div>
       </>
     ),

client/component/src/AxialSelectionConfig.tsx

@@ -3,7 +3,7 @@ import { isNumber } from './utils';
 import type AxialSelection from './selections/AxialSelection';
 import { XInput, YInput } from './SelectionConfigComponents';
 import { Fragment } from 'react';
-import type { AddSelectionHandler } from './selections/utils';
+import type { SelectionHandler } from './selections/utils';
 
 /**
  * Props for the `AxialSelectionConfig` component.
@@ -13,22 +13,26 @@ interface AxialSelectionConfigProps {
   /** The axial selection to configure */
   selection: AxialSelection;
   /** The function to call to update the selections state */
-  updateSelection?: AddSelectionHandler;
+  updateSelection?: SelectionHandler;
   /** Indicates whether the component is disabled (optional) */
   disabled?: boolean;
 }
 
 /**
  * Renders the configuration options for an axial selection.
  * @param {AxialSelectionConfigProps} props - The component props.
- * @returns {React.JSX.Element} The rendered component.
+ * @returns {JSX.Element} The rendered component.
  */
 function AxialSelectionConfig(props: AxialSelectionConfigProps) {
   const { selection, updateSelection, disabled } = props;
 
   return selection.dimension === 0 ? (
     <Fragment key="axis x">
-      <XInput selection={selection} updateSelection={updateSelection} />
+      <XInput
+        selection={selection}
+        updateSelection={updateSelection}
+        disabled={disabled}
+      />
       <LabelledInput<number>
         key="x length"
         label="x length"
@@ -46,7 +50,11 @@ function AxialSelectionConfig(props: AxialSelectionConfigProps) {
     </Fragment>
   ) : (
     <Fragment key="axis y">
-      <YInput selection={selection} updateSelection={updateSelection} />
+      <YInput
+        selection={selection}
+        updateSelection={updateSelection}
+        disabled={disabled}
+      />
       <LabelledInput<number>
         key="y length"
         label="y length"

client/component/src/AxisConfigModal.tsx

@@ -6,12 +6,12 @@ import type {
   HistogramParams,
 } from '@h5web/lib';
 import {
-  ColorMapOption,
+  ColorMapGradient,
   ColorMapSelector,
   ScaleSelector,
   ScaleType,
 } from '@h5web/lib';
-import type { ReactNode } from 'react';
+import type { PropsWithChildren } from 'react';
 
 import DomainConfig from './DomainConfig';
 import LabelledInput from './LabelledInput';
@@ -61,17 +61,19 @@ interface AxisConfigModalProps<S extends ScaleType> {
   setScatterPointSize?: (p: number) => void;
   /** If has control of the baton */
   hasBaton?: boolean;
-  /** The children to render inside the modal (optional) */
-  children?: ReactNode;
+  /** If true, hide toggle */
+  hideToggle?: boolean;
 }
 
 /**
  * Render the configuration options for an axis.
- * @param {AxisConfigModalProps} props - The component props.
- * @returns {React.JSX.Element} The rendered component.
+ * @param {AxisConfigModalProps<S>} props - The component props.
+ * @returns {JSX.Element} The rendered component.
  * @template S
  */
-function AxisConfigModal<S extends ScaleType>(props: AxisConfigModalProps<S>) {
+function AxisConfigModal<S extends ScaleType>(
+  props: PropsWithChildren<AxisConfigModalProps<S>>
+) {
   const labelInput = props.label && props.setLabel && (
     <LabelledInput<string>
       key="label"
@@ -133,8 +135,9 @@ function AxisConfigModal<S extends ScaleType>(props: AxisConfigModalProps<S>) {
     title: props.title,
     icon: props.icon,
     button: props.colourMap ? (
-      <ColorMapOption option={props.colourMap} />
+      <ColorMapGradient colorMap={props.colourMap} />
     ) : null,
+    hideToggle: props.hideToggle,
     children: (
       <>
         {labelInput}