Upgrade deps

silx-kit · Jun 9, 2021 · 7e3df61 · 7e3df61
1 parent 65aba0b
commit 7e3df61
Show file tree

Hide file tree

Showing 11 changed files with 1,262 additions and 8,554 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -22,6 +22,9 @@ module.exports = createConfig({
     // Properties available after typeguard may be tedious to destructure (e.g. in JSX)
     'unicorn/consistent-destructuring': 'off',
 
+    // Not really more readable and makes Jest crash
+    'unicorn/prefer-prototype-methods': 'off',
+
     // zustand has `whitelist` option
     'inclusive-language/use-inclusive-words': [
       'error',

diff --git a/.prettierignore b/.prettierignore
@@ -1,3 +1,4 @@
 /build/
 /storybook-static/
 /packages/**/dist/
+**/package-lock.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,20 +29,20 @@
     "postversion": "git push && git push --tags"
   },
   "dependencies": {
-    "@react-hookz/web": "^1.20.1",
-    "@react-three/fiber": "^6.1.5",
-    "@visx/axis": "^1.11.1",
-    "@visx/grid": "^1.11.1",
+    "@react-hookz/web": "^1.25.1",
+    "@react-three/fiber": "^7.0.1",
+    "@visx/axis": "^1.12.0",
+    "@visx/grid": "^1.12.0",
     "@visx/scale": "^1.11.1",
-    "@visx/shape": "^1.11.1",
+    "@visx/shape": "^1.12.0",
     "@visx/tooltip": "^1.7.2",
     "axios": "^0.21.1",
-    "complex.js": "^2.0.11",
-    "d3-array": "^2.12.1",
-    "d3-color": "^2.0.0",
-    "d3-format": "^3.0.0",
-    "d3-scale": "^3.3.0",
-    "d3-scale-chromatic": "^2.0.0",
+    "complex.js": "^2.0.13",
+    "d3-array": "^3.0.1",
+    "d3-color": "^3.0.1",
+    "d3-format": "^3.0.1",
+    "d3-scale": "^4.0.0",
+    "d3-scale-chromatic": "^3.0.0",
     "lodash": "^4.17.21",
     "ndarray": "^1.0.19",
     "ndarray-ops": "^1.2.2",
@@ -55,11 +55,11 @@
     "react-measure": "^2.5.2",
     "react-reflex": "^4.0.1",
     "react-router-dom": "^5.2.0",
-    "react-slider": "^1.1.4",
+    "react-slider": "^1.3.0",
     "react-suspense-fetch": "^0.4.0",
     "react-use": "^17.2.4",
     "react-window": "^1.8.6",
-    "three": "^0.128.0",
+    "three": "^0.129.0",
     "zustand": "^3.5.2"
   },
   "devDependencies": {
@@ -72,52 +72,52 @@
     "@storybook/preset-create-react-app": "^3.1.7",
     "@storybook/react": "^6.2.9",
     "@testing-library/cypress": "^7.0.6",
-    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/jest-dom": "^5.13.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^13.1.9",
     "@types/complex.js": "^2.0.2",
     "@types/cypress-image-snapshot": "^3.1.5",
-    "@types/d3-array": "^2.11.0",
+    "@types/d3-array": "^2.12.1",
     "@types/d3-color": "^2.0.1",
     "@types/d3-format": "^2.0.0",
-    "@types/d3-scale": "^3.2.2",
+    "@types/d3-scale": "^3.3.0",
     "@types/d3-scale-chromatic": "^2.0.0",
     "@types/jest": "^26.0.23",
     "@types/lodash": "^4.14.170",
     "@types/ndarray": "^1.0.9",
     "@types/node": "^15.12.2",
-    "@types/react": "^17.0.6",
+    "@types/react": "^17.0.10",
     "@types/react-aria-menubutton": "^6.2.7",
-    "@types/react-dom": "^17.0.5",
+    "@types/react-dom": "^17.0.7",
     "@types/react-measure": "^2.0.6",
     "@types/react-router-dom": "^5.1.7",
-    "@types/react-slider": "^1.1.2",
-    "@types/react-window": "^1.8.2",
-    "@types/three": "^0.128.0",
-    "@typescript-eslint/eslint-plugin": "4.24.0",
-    "@typescript-eslint/parser": "4.24.0",
+    "@types/react-slider": "^1.3.0",
+    "@types/react-window": "^1.8.3",
+    "@types/three": "^0.129.1",
+    "@typescript-eslint/eslint-plugin": "4.26.1",
+    "@typescript-eslint/parser": "4.26.1",
     "babel-loader": "8.1.0",
     "cypress": "^7.5.0",
     "cypress-image-snapshot": "^4.0.1",
-    "eslint": "^7.26.0",
-    "eslint-config-galex": "^2.16.1",
-    "eslint-plugin-import": "2.23.2",
+    "eslint": "^7.28.0",
+    "eslint-config-galex": "^2.16.4",
+    "eslint-plugin-import": "2.23.4",
     "eslint-plugin-jest": "24.3.6",
     "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-react": "7.23.2",
+    "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
-    "eslint-plugin-testing-library": "4.5.0",
+    "eslint-plugin-testing-library": "4.6.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.3.0",
+    "prettier": "^2.3.1",
     "react-app-polyfill": "^2.0.0",
     "react-is": "^17.0.2",
     "react-scripts": "^4.0.3",
-    "typescript": "^4.2.4"
+    "typescript": "^4.3.2"
   },
   "jest": {
     "restoreMocks": true,
     "transformIgnorePatterns": [
-      "node_modules/(?!(d3-format)/)"
+      "node_modules/(?!(d3-array|d3-color|d3-format|d3-scale-chromatic)/)"
     ]
   },
   "browserslist": {

diff --git a/src/h5web/dimension-mapper/SlicingSlider.tsx b/src/h5web/dimension-mapper/SlicingSlider.tsx
@@ -1,5 +1,5 @@
 import ReactSlider from 'react-slider';
-import { useMeasure } from 'react-use';
+import { useMeasure } from '@react-hookz/web';
 import styles from './SlicingSlider.module.css';
 import type { DimensionMapping } from './models';
 import { useEffect, useRef } from 'react';
@@ -17,19 +17,15 @@ interface Props {
 function SlicingSlider(props: Props) {
   const { dimension, slicingIndex, rawDims, mapperState, onChange } = props;
 
-  const [containerRef, { height }] = useMeasure();
+  const [containerSize, containerRef] = useMeasure<HTMLDivElement>();
   const sliderRef = useRef<ReactSlider>(null);
 
   useEffect(() => {
     sliderRef.current?.resize();
-  }, [height]);
+  }, [containerSize]);
 
   return (
-    <div
-      key={dimension}
-      ref={containerRef as (element: HTMLElement | null) => void} // https://github.com/streamich/react-use/issues/1264
-      className={styles.container}
-    >
+    <div key={dimension} ref={containerRef} className={styles.container}>
       <span className={styles.label}>D{dimension}</span>
       <ReactSlider
         ref={sliderRef}
@@ -38,7 +34,10 @@ function SlicingSlider(props: Props) {
         min={0}
         max={rawDims[dimension] - 1}
         step={1}
-        marks={height / rawDims[dimension] >= MIN_HEIGHT_PER_MARK}
+        marks={
+          containerSize &&
+          containerSize.height / rawDims[dimension] >= MIN_HEIGHT_PER_MARK
+        }
         markClassName={styles.mark}
         orientation="vertical"
         invert

diff --git a/src/h5web/toolbar/Toolbar.tsx b/src/h5web/toolbar/Toolbar.tsx
@@ -1,5 +1,6 @@
 import { ReactElement, Children } from 'react';
-import { useMeasure, useList } from 'react-use';
+import { useMeasure } from '@react-hookz/web';
+import { useList } from 'react-use';
 import styles from './Toolbar.module.css';
 import Separator from './Separator';
 import OverflowMenu from './OverflowMenu';
@@ -15,7 +16,9 @@ function Toolbar(props: Props) {
   // Convert `children` to array, as it cannot be used directly (and remove `undefined` children)
   const allChildren = Children.toArray(children) as ReactElement[];
 
-  const [containerRef, { width: availableWidth }] = useMeasure();
+  const [containerSize, containerRef] = useMeasure<HTMLDivElement>();
+  const availableWidth = containerSize ? containerSize.width : 0;
+
   const [childrenWidths, { updateAt: setChildWidth }] = useList<number>();
 
   // Group visible and hidden children based on their accumulated width
@@ -48,10 +51,7 @@ function Toolbar(props: Props) {
 
   return (
     <div className={styles.toolbar}>
-      <div
-        ref={containerRef as (element: HTMLElement | null) => void} // https://github.com/streamich/react-use/issues/1264
-        className={styles.controls}
-      >
+      <div ref={containerRef} className={styles.controls}>
         <div className={styles.controlsInner} data-all-measured={allMeasured}>
           {allOrVisibleChildren.map((child) => (
             <MeasuredControl

diff --git a/src/h5web/toolbar/controls/DomainSlider/ScaledSlider.tsx b/src/h5web/toolbar/controls/DomainSlider/ScaledSlider.tsx
@@ -78,7 +78,7 @@ function ScaledSlider(props: Props) {
       max={SLIDER_RANGE[1]}
       value={scaledValue}
       onBeforeChange={setBeforeChangeValue}
-      onChange={handleChange}
+      onChange={(bounds) => handleChange(bounds)}
       onAfterChange={(bounds) => handleChange(bounds, true)}
       renderThumb={(thumbProps, { index }) => (
         <Thumb

diff --git a/src/h5web/toolbar/controls/ToggleGroup.tsx b/src/h5web/toolbar/controls/ToggleGroup.tsx
@@ -9,8 +9,9 @@ interface ToggleGroupProps {
   onChange: (val: string) => void;
 }
 
-const ToggleGroupContext =
-  createContext<ToggleGroupProps | undefined>(undefined);
+const ToggleGroupContext = createContext<ToggleGroupProps | undefined>(
+  undefined
+);
 
 function useToggleGroupProps(): ToggleGroupProps {
   const context = useContext(ToggleGroupContext);

diff --git a/src/h5web/vis-packs/core/heatmap/ColorBar.tsx b/src/h5web/vis-packs/core/heatmap/ColorBar.tsx
@@ -1,5 +1,5 @@
 import { AxisRight, AxisBottom } from '@visx/axis';
-import { useMeasure } from 'react-use';
+import { useMeasure } from '@react-hookz/web';
 import { adaptedNumTicks, createAxisScale } from '../utils';
 import styles from './ColorBar.module.css';
 import { getInterpolator, getLinearGradient } from './utils';
@@ -27,16 +27,19 @@ function ColorBar(props: Props) {
     invertColorMap,
   } = props;
 
-  const [gradientRef, gradientBox] = useMeasure();
-  const { height: gradientHeight, width: gradientWidth } = gradientBox;
-  const gradientLength = horizontal ? gradientWidth : gradientHeight;
+  const [barSize, barRef] = useMeasure<HTMLDivElement>();
+  const gradientLength = barSize
+    ? horizontal
+      ? barSize.width
+      : barSize.height
+    : 0;
 
   const Axis = horizontal ? AxisBottom : AxisRight;
   const isEmptyDomain = domain[0] === domain[1];
 
   const axisScale = createAxisScale({
     domain,
-    range: horizontal ? [0, gradientWidth] : [gradientHeight, 0],
+    range: horizontal ? [0, gradientLength] : [gradientLength, 0],
     type: scaleType,
   });
 
@@ -52,10 +55,7 @@ function ColorBar(props: Props) {
           </p>
         </>
       )}
-      <div
-        ref={gradientRef as (element: HTMLElement | null) => void} // https://github.com/streamich/react-use/issues/1264
-        className={styles.gradientBar}
-      >
+      <div ref={barRef} className={styles.gradientBar}>
         <div
           className={styles.gradient}
           data-keep-colors

diff --git a/src/h5web/vis-packs/core/matrix/MatrixVis.tsx b/src/h5web/vis-packs/core/matrix/MatrixVis.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import { FixedSizeGrid as IndexedGrid } from 'react-window';
-import { useMeasure } from 'react-use';
+import { useMeasure } from '@react-hookz/web';
 import type { NdArray } from 'ndarray';
 import styles from './MatrixVis.module.css';
 import GridSettingsProvider from './GridSettingsContext';
@@ -21,8 +21,7 @@ function MatrixVis(props: Props) {
   const { dataArray, formatter, cellWidth } = props;
   const dims = dataArray.shape;
 
-  const [divRef, { width, height }] = useMeasure();
-  const isVisible = width > 0 && height > 0;
+  const [wrapperSize, wrapperRef] = useMeasure<HTMLDivElement>();
 
   const rowCount = dims[0] + 1; // includes IndexRow
   const columnCount = (dims.length === 2 ? dims[1] : 1) + 1; // includes IndexColumn
@@ -34,24 +33,21 @@ function MatrixVis(props: Props) {
       columnCount={columnCount}
       cellFormatter={
         dims.length === 1
-          ? (row: number) => formatter(dataArray.get(row))
-          : (row: number, col: number) => formatter(dataArray.get(row, col))
+          ? (row) => formatter(dataArray.get(row))
+          : (row, col) => formatter(dataArray.get(row, col))
       }
     >
-      <div
-        ref={divRef as (element: HTMLElement | null) => void} // https://github.com/streamich/react-use/issues/1264
-        className={styles.wrapper}
-      >
-        {isVisible && (
+      <div ref={wrapperRef} className={styles.wrapper}>
+        {wrapperSize && (
           <IndexedGrid
             className={styles.grid}
             innerElementType={forwardRef(StickyGrid)}
             columnWidth={cellWidth}
             rowHeight={CELL_HEIGHT}
             columnCount={columnCount}
             rowCount={rowCount}
-            width={width}
-            height={height}
+            width={wrapperSize.width}
+            height={wrapperSize.height}
           >
             {Cell}
           </IndexedGrid>

diff --git a/src/h5web/vis-packs/core/shared/VisCanvas.tsx b/src/h5web/vis-packs/core/shared/VisCanvas.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { Canvas } from '@react-three/fiber';
-import { useMeasure } from 'react-use';
+import { useMeasure } from '@react-hookz/web';
 import styles from './VisCanvas.module.css';
 import type { AxisOffsets } from '../models';
 import { computeVisSize } from '../utils';
@@ -14,7 +14,11 @@ interface Props {
 function VisCanvas(props: Props) {
   const { axisOffsets, children, aspectRatio } = props;
 
-  const [visAreaRef, visAreaSize] = useMeasure();
+  const [visAreaSize, visAreaRef] = useMeasure<HTMLDivElement>();
+
+  if (!visAreaSize) {
+    return <div ref={visAreaRef} className={styles.visArea} />;
+  }
 
   const availableSize = {
     width: visAreaSize.width - axisOffsets.left - axisOffsets.right,
@@ -24,35 +28,30 @@ function VisCanvas(props: Props) {
   const visSize = computeVisSize(availableSize, aspectRatio);
 
   return (
-    <div
-      ref={visAreaRef as (element: HTMLElement | null) => void} // https://github.com/streamich/react-use/issues/1264
-      className={styles.visArea}
-    >
-      {visSize && (
-        <div
-          className={styles.vis}
-          style={{
-            ...visSize,
-            paddingBottom: axisOffsets.bottom,
-            paddingLeft: axisOffsets.left,
-            paddingTop: axisOffsets.top,
-            paddingRight: axisOffsets.right,
-            boxSizing: 'content-box',
-          }}
+    <div ref={visAreaRef} className={styles.visArea}>
+      <div
+        className={styles.vis}
+        style={{
+          ...visSize,
+          paddingBottom: axisOffsets.bottom,
+          paddingLeft: axisOffsets.left,
+          paddingTop: axisOffsets.top,
+          paddingRight: axisOffsets.right,
+          boxSizing: 'content-box',
+        }}
+      >
+        <Canvas
+          className={styles.canvasWrapper}
+          orthographic
+          linear // disable automatic color encoding and gamma correction
+          frameloop="demand" // disable game loop
+          dpr={Math.min(window.devicePixelRatio, 3)} // https://discoverthreejs.com/tips-and-tricks/#performance
+          gl={{ preserveDrawingBuffer: true }} // for screenshot feature
         >
-          <Canvas
-            className={styles.canvasWrapper}
-            orthographic
-            linear // disable automatic color encoding and gamma correction
-            frameloop="demand" // disable game loop
-            dpr={Math.min(window.devicePixelRatio, 3)} // https://discoverthreejs.com/tips-and-tricks/#performance
-            gl={{ preserveDrawingBuffer: true }} // for screenshot feature
-          >
-            <ambientLight />
-            {children}
-          </Canvas>
-        </div>
-      )}
+          <ambientLight />
+          {children}
+        </Canvas>
+      </div>
     </div>
   );
 }