Generate mock data lazily and improve API

apps/storybook/src/AxialSelectToZoom.stories.tsx

@@ -7,6 +7,7 @@ import {
   Pan,
   ResetZoomButton,
   ScaleType,
+  toTypedNdArray,
   useDomain,
   VisCanvas,
   Zoom,
@@ -15,9 +16,9 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { range } from 'lodash';
 
 import FillHeight from './decorators/FillHeight';
-import { useMockData } from './hooks';
 
-const { oneD, twoD } = mockValues;
+const dataArray1D = mockValues.oneD();
+const dataArray2D = toTypedNdArray(mockValues.twoD(), Float32Array);
 
 const meta = {
   title: 'Building Blocks/Interactions/AxialSelectToZoom',
@@ -44,20 +45,24 @@ type Story = StoryObj<typeof meta>;
 const Default = {
   render: (args) => {
     const { modifierKey } = args;
-    const domain = useDomain(oneD);
+    const domain = useDomain(dataArray1D);
     assertDefined(domain);
 
     return (
       <VisCanvas
-        abscissaConfig={{ visDomain: [0, oneD.length], showGrid: true }}
+        abscissaConfig={{ visDomain: [0, dataArray1D.size], showGrid: true }}
         ordinateConfig={{ visDomain: domain, showGrid: true }}
       >
         <Pan modifierKey={modifierKey?.length === 0 ? 'Control' : undefined} />
         <Zoom />
         <AxialSelectToZoom {...args} />
         <ResetZoomButton />
 
-        <Line abscissas={range(oneD.length)} ordinates={oneD} color="blue" />
+        <Line
+          abscissas={range(dataArray1D.size)}
+          ordinates={dataArray1D.data}
+          color="blue"
+        />
       </VisCanvas>
     );
   },
@@ -110,12 +115,14 @@ export const Disabled = {
 
 export const DisabledInsideEqualAspectCanvas = {
   render: (args) => {
-    const { values, domain } = useMockData(twoD, [20, 41]);
+    const [rows, cols] = dataArray2D.shape;
+    const domain = useDomain(dataArray2D);
+    assertDefined(domain);
 
     return (
       <VisCanvas
-        abscissaConfig={{ visDomain: [0, 41], showGrid: true }}
-        ordinateConfig={{ visDomain: [0, 20], showGrid: true }}
+        abscissaConfig={{ visDomain: [0, cols], showGrid: true }}
+        ordinateConfig={{ visDomain: [0, rows], showGrid: true }}
         aspect="equal"
       >
         <Pan modifierKey="Control" />
@@ -124,7 +131,7 @@ export const DisabledInsideEqualAspectCanvas = {
         <ResetZoomButton />
 
         <HeatmapMesh
-          values={values}
+          values={dataArray2D}
           domain={domain}
           colorMap="Viridis"
           scaleType={ScaleType.Linear}

apps/storybook/src/DataCurve.stories.tsx

@@ -4,17 +4,19 @@ import {
   DataCurve,
   DefaultInteractions,
   GlyphType as GlyphTypeEnum,
+  mockValues,
   useDomain,
   VisCanvas,
 } from '@h5web/lib';
 import { assertDefined } from '@h5web/shared/guards';
-import { mockValues } from '@h5web/shared/mock/values';
 import type { Meta, StoryObj } from '@storybook/react';
 import { range } from 'lodash';
 import { useState } from 'react';
 
 import FillHeight from './decorators/FillHeight';
 
+const dataArray = mockValues.oneD();
+
 const meta = {
   title: 'Building Blocks/DataCurve',
   component: DataCurve,
@@ -24,9 +26,9 @@ const meta = {
     controls: { sort: 'requiredFirst' },
   },
   args: {
-    abscissas: range(0, mockValues.oneD.length),
-    ordinates: mockValues.oneD,
-    errors: mockValues.oneD.map(() => 10),
+    abscissas: range(0, dataArray.size),
+    ordinates: dataArray.data,
+    errors: dataArray.data.map(() => 10),
     curveType: CurveType.LineOnly,
     color: 'blue',
     visible: true,

apps/storybook/src/DefaultInteractions.stories.tsx

@@ -1,17 +1,19 @@
 import {
+  assertDefined,
   DefaultInteractions,
   HeatmapMesh,
   mockValues,
   ResetZoomButton,
   ScaleType,
+  toTypedNdArray,
+  useDomain,
   VisCanvas,
 } from '@h5web/lib';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import FillHeight from './decorators/FillHeight';
-import { useMockData } from './hooks';
 
-const { twoD } = mockValues;
+const dataArray = toTypedNdArray(mockValues.twoD(), Float32Array);
 
 const meta = {
   title: 'Building Blocks/Interactions/DefaultInteractions',
@@ -34,19 +36,21 @@ type Story = StoryObj<typeof meta>;
 
 export const InsideAutoAspectCanvas = {
   render: (args) => {
-    const { values, domain } = useMockData(twoD, [20, 41]);
+    const [rows, cols] = dataArray.shape;
+    const domain = useDomain(dataArray);
+    assertDefined(domain);
 
     return (
       <VisCanvas
-        abscissaConfig={{ visDomain: [0, values.shape[1]], showGrid: true }}
-        ordinateConfig={{ visDomain: [0, values.shape[0]], showGrid: true }}
+        abscissaConfig={{ visDomain: [0, cols], showGrid: true }}
+        ordinateConfig={{ visDomain: [0, rows], showGrid: true }}
         aspect="auto"
       >
         <DefaultInteractions {...args} />
         <ResetZoomButton />
 
         <HeatmapMesh
-          values={values}
+          values={dataArray}
           domain={domain}
           colorMap="Viridis"
           scaleType={ScaleType.Linear}
@@ -58,19 +62,21 @@ export const InsideAutoAspectCanvas = {
 
 export const InsideEqualAspectCanvas = {
   render: (args) => {
-    const { values, domain } = useMockData(twoD, [20, 41]);
+    const [rows, cols] = dataArray.shape;
+    const domain = useDomain(dataArray);
+    assertDefined(domain);
 
     return (
       <VisCanvas
-        abscissaConfig={{ visDomain: [0, values.shape[1]], showGrid: true }}
-        ordinateConfig={{ visDomain: [0, values.shape[0]], showGrid: true }}
+        abscissaConfig={{ visDomain: [0, cols], showGrid: true }}
+        ordinateConfig={{ visDomain: [0, rows], showGrid: true }}
         aspect="equal"
       >
         <DefaultInteractions {...args} />
         <ResetZoomButton />
 
         <HeatmapMesh
-          values={values}
+          values={dataArray}
           domain={domain}
           colorMap="Viridis"
           scaleType={ScaleType.Linear}

apps/storybook/src/ErrorBars.stories.tsx

@@ -1,17 +1,19 @@
 import {
   DefaultInteractions,
   ErrorBars,
+  mockValues,
   useDomain,
   VisCanvas,
 } from '@h5web/lib';
 import { assertDefined } from '@h5web/shared/guards';
-import { mockValues } from '@h5web/shared/mock/values';
 import { ScaleType } from '@h5web/shared/models-vis';
 import type { Meta, StoryObj } from '@storybook/react';
 import { range } from 'lodash';
 
 import FillHeight from './decorators/FillHeight';
 
+const dataArray = mockValues.oneD();
+
 const meta = {
   title: 'Building Blocks/ErrorBars',
   component: ErrorBars,
@@ -21,9 +23,9 @@ const meta = {
     controls: { sort: 'requiredFirst' },
   },
   args: {
-    abscissas: range(0, mockValues.oneD.length),
-    ordinates: mockValues.oneD,
-    errors: mockValues.oneD.map(() => 10),
+    abscissas: range(0, dataArray.size),
+    ordinates: dataArray.data,
+    errors: dataArray.data.map(() => 10),
     color: 'blue',
     visible: true,
   },

apps/storybook/src/GettingStarted.mdx

@@ -45,13 +45,22 @@ import { Meta } from '@storybook/addon-docs';
    ];
 
    // Flatten source array
-   const flatValues = values.flat(Infinity) as number[];
+   const flatValues = values.flat(1);
 
    // Convert to ndarray and get domain
    const dataArray = ndarray(flatValues, [2, 3]);
    const domain = getDomain(dataArray);
    ```
 
+   Alternatively, use one the provided mock ndarrays:
+
+   ```tsx
+   import { getDomain, mockValues } from '@h5web/lib';
+
+   const dataArray = mockValues.twoD();
+   const domain = getDomain(dataArray);
+   ```
+
 1. Import the visualization component and render it inside an element styled with `display: flex` and a height, for example:
 
    ```tsx

apps/storybook/src/Glyphs.stories.tsx

@@ -2,17 +2,19 @@ import {
   DefaultInteractions,
   Glyphs,
   GlyphType as GlyphTypeEnum,
+  mockValues,
   useDomain,
   VisCanvas,
 } from '@h5web/lib';
 import { assertDefined } from '@h5web/shared/guards';
-import { mockValues } from '@h5web/shared/mock/values';
 import { ScaleType } from '@h5web/shared/models-vis';
 import type { Meta, StoryObj } from '@storybook/react';
 import { range } from 'lodash';
 
 import FillHeight from './decorators/FillHeight';
 
+const dataArray = mockValues.oneD();
+
 const meta = {
   title: 'Building Blocks/Glyphs',
   component: Glyphs,
@@ -22,8 +24,8 @@ const meta = {
     controls: { sort: 'requiredFirst' },
   },
   args: {
-    abscissas: range(0, mockValues.oneD.length),
-    ordinates: mockValues.oneD,
+    abscissas: range(0, dataArray.size),
+    ordinates: dataArray.data,
     glyphType: GlyphTypeEnum.Cross,
     color: 'blue',
     size: 6,

apps/storybook/src/HeatmapMesh.stories.tsx

@@ -2,25 +2,21 @@ import type { Domain } from '@h5web/lib';
 import {
   DefaultInteractions,
   getDomain,
-  getMockDataArray,
   HeatmapMesh,
+  mockValues,
   VisCanvas,
 } from '@h5web/lib';
 import { assertDefined } from '@h5web/shared/guards';
 import { ScaleType } from '@h5web/shared/models-vis';
-import {
-  COLOR_SCALE_TYPES,
-  getDims,
-  toTypedNdArray,
-} from '@h5web/shared/utils';
+import { COLOR_SCALE_TYPES, toTypedNdArray } from '@h5web/shared/utils';
 import type { Meta, StoryObj } from '@storybook/react';
 import { range } from 'lodash';
 import ndarray from 'ndarray';
 import { LinearFilter, NearestFilter } from 'three';
 
 import FillHeight from './decorators/FillHeight';
 
-const dataArray = getMockDataArray('/nD_datasets/twoD');
+const dataArray = mockValues.twoD();
 const domain = getDomain(dataArray.data);
 assertDefined(domain);
 
@@ -65,7 +61,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default = {
   render: (args) => {
-    const { rows, cols } = getDims(args.values);
+    const [rows, cols] = args.values.shape;
 
     return (
       <VisCanvas

apps/storybook/src/HeatmapVis.stories.tsx

@@ -1,8 +1,8 @@
 import {
   getDomain,
-  getMockDataArray,
   HeatmapVis,
   INTERPOLATORS,
+  mockValues,
   ScaleType,
 } from '@h5web/lib';
 import { assertDefined } from '@h5web/shared/guards';
@@ -12,7 +12,7 @@ import ndarray from 'ndarray';
 
 import FillHeight from './decorators/FillHeight';
 
-const dataArray = getMockDataArray('/nD_datasets/twoD');
+const dataArray = mockValues.twoD();
 const domain = getDomain(dataArray.data);
 
 const alphaArray = ndarray(

apps/storybook/src/HeatmapVisDisplay.stories.tsx

@@ -1,15 +1,15 @@
 import {
   Annotation,
   DefaultInteractions,
-  getMockDataArray,
   HeatmapVis,
+  mockValues,
 } from '@h5web/lib';
 import { formatTooltipVal } from '@h5web/shared/utils';
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 
 import HeatmapVisStoriesMeta from './HeatmapVis.stories';
 
-const dataArray = getMockDataArray('/nD_datasets/twoD');
+const dataArray = mockValues.twoD();
 
 const meta = {
   ...HeatmapVisStoriesMeta,

apps/storybook/src/HeatmapVisScales.stories.tsx

@@ -1,10 +1,10 @@
 import type { HeatmapVisProps } from '@h5web/lib';
-import { getDomain, getMockDataArray, HeatmapVis, ScaleType } from '@h5web/lib';
+import { getDomain, HeatmapVis, mockValues, ScaleType } from '@h5web/lib';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import HeatmapVisStoriesMeta from './HeatmapVis.stories';
 
-const dataArray = getMockDataArray('/nD_datasets/twoD');
+const dataArray = mockValues.twoD();
 const domain = getDomain(dataArray.data);
 const logSafeDomain = getDomain(dataArray.data, ScaleType.Log);
 const sqrtSafeDomain = getDomain(dataArray.data, ScaleType.Sqrt);

apps/storybook/src/Line.stories.tsx

@@ -1,12 +1,19 @@
-import { DefaultInteractions, Line, useDomain, VisCanvas } from '@h5web/lib';
+import {
+  DefaultInteractions,
+  Line,
+  mockValues,
+  useDomain,
+  VisCanvas,
+} from '@h5web/lib';
 import { assertDefined } from '@h5web/shared/guards';
-import { mockValues } from '@h5web/shared/mock/values';
 import { ScaleType } from '@h5web/shared/models-vis';
 import type { Meta, StoryObj } from '@storybook/react';
 import { range } from 'lodash';
 
 import FillHeight from './decorators/FillHeight';
 
+const dataArray = mockValues.oneD();
+
 const meta = {
   title: 'Building Blocks/Line',
   component: Line,
@@ -16,8 +23,8 @@ const meta = {
     controls: { sort: 'requiredFirst' },
   },
   args: {
-    abscissas: range(0, mockValues.oneD.length),
-    ordinates: mockValues.oneD,
+    abscissas: range(0, dataArray.size),
+    ordinates: dataArray.data,
     color: 'blue',
     visible: true,
   },