Simplify MatrixVis API

apps/storybook/src/MatrixVis.stories.tsx

@@ -1,5 +1,4 @@
 import { MatrixVis, mockValues } from '@h5web/lib';
-import type { H5WebComplex } from '@h5web/shared/hdf5-models';
 import {
   createComplexFormatter,
   toTypedNdArray,
@@ -10,6 +9,7 @@ import { format } from 'd3-format';
 import FillHeight from './decorators/FillHeight';
 
 const dataArray = mockValues.twoD();
+const typedDataArray = toTypedNdArray(dataArray, Float32Array);
 const complexDataArray = mockValues.twoD_cplx();
 
 const formatMatrixValue = format('.3e');
@@ -30,8 +30,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Default = {
   args: {
-    dataArray,
-    formatter: (val) => formatMatrixValue(val as number),
+    dims: dataArray.shape,
+    cellFormatter: (row, col) => formatMatrixValue(dataArray.get(row, col)),
   },
 } satisfies Story;
 
@@ -51,16 +51,18 @@ export const StaticHeaderCells = {
 
 export const Complex = {
   args: {
-    dataArray: complexDataArray,
-    formatter: (val) => formatMatrixComplex(val as H5WebComplex),
+    dims: complexDataArray.shape,
+    cellFormatter: (row, col) =>
+      formatMatrixComplex(complexDataArray.get(row, col)),
     cellWidth: 232,
   },
 } satisfies Story;
 
 export const TypedArray = {
   args: {
-    dataArray: toTypedNdArray(dataArray, Float32Array),
-    formatter: (val) => formatMatrixValue(val as number),
+    dims: typedDataArray.shape,
+    cellFormatter: (row, col) =>
+      formatMatrixValue(typedDataArray.get(row, col)),
   },
 } satisfies Story;
 

packages/app/src/vis-packs/core/compound/MappedCompoundVis.tsx

@@ -2,10 +2,9 @@ import { MatrixVis } from '@h5web/lib';
 import type {
   ArrayShape,
   Dataset,
-  Primitive,
   PrintableCompoundType,
-  PrintableType,
   ScalarShape,
+  Value,
 } from '@h5web/shared/hdf5-models';
 import { createPortal } from 'react-dom';
 
@@ -20,7 +19,7 @@ import { getSliceSelection } from '../utils';
 
 interface Props {
   dataset: Dataset<ScalarShape | ArrayShape, PrintableCompoundType>;
-  value: Primitive<PrintableType>[] | Primitive<PrintableType>[][];
+  value: Value<Props['dataset']>;
   dimMapping: DimensionMapping;
   toolbarContainer: HTMLDivElement | undefined;
   config: MatrixVisConfig;
@@ -70,8 +69,10 @@ function MappedCompoundVis(props: Props) {
         )}
       <MatrixVis
         className={visualizerStyles.vis}
-        dataArray={mappedArray}
-        formatter={(val, colIndex) => fieldFormatters[colIndex](val)}
+        dims={mappedArray.shape}
+        cellFormatter={(row, col) =>
+          fieldFormatters[col](mappedArray.get(row, col))
+        }
         cellWidth={customCellWidth ?? cellWidth}
         columnHeaders={fieldNames}
         sticky={sticky}

packages/app/src/vis-packs/core/matrix/MappedMatrixVis.tsx

@@ -1,9 +1,9 @@
 import { MatrixVis } from '@h5web/lib';
 import type {
   ArrayShape,
-  ArrayValue,
   Dataset,
   PrintableType,
+  Value,
 } from '@h5web/shared/hdf5-models';
 import { createPortal } from 'react-dom';
 
@@ -18,7 +18,7 @@ import { getCellWidth, getFormatter } from './utils';
 
 interface Props {
   dataset: Dataset<ArrayShape, PrintableType>;
-  value: ArrayValue<PrintableType>;
+  value: Value<Props['dataset']>;
   dimMapping: DimensionMapping;
   toolbarContainer: HTMLDivElement | undefined;
   config: MatrixVisConfig;
@@ -56,8 +56,10 @@ function MappedMatrixVis(props: Props) {
 
       <MatrixVis
         className={visualizerStyles.vis}
-        dataArray={mappedArray}
-        formatter={formatter}
+        dims={mappedArray.shape}
+        cellFormatter={(row: number, col: number) =>
+          formatter(mappedArray.get(row, col))
+        }
         cellWidth={customCellWidth ?? cellWidth}
         sticky={sticky}
       />

packages/lib/src/vis/matrix/MatrixVis.tsx

@@ -1,40 +1,32 @@
-import type { ArrayValue, Primitive } from '@h5web/shared/hdf5-models';
-import type { NdArray } from 'ndarray';
+import type { ArrayShape } from '@h5web/shared/hdf5-models';
 
-import type { ClassStyleAttrs, PrintableType } from '../models';
+import type { ClassStyleAttrs } from '../models';
 import GridProvider from './context';
 import Grid from './Grid';
 
 const ROW_HEADERS_WIDTH = 80;
 const CELL_HEIGHT = 32;
 
 interface Props extends ClassStyleAttrs {
-  dataArray: NdArray<ArrayValue<PrintableType>>;
-  formatter: (value: Primitive<PrintableType>, colIndex: number) => string;
+  dims: ArrayShape;
+  cellFormatter: (row: number, col: number) => string;
   cellWidth: number;
   sticky?: boolean;
   columnHeaders?: string[];
 }
 
 function MatrixVis(props: Props) {
   const {
-    dataArray,
-    formatter,
+    dims,
+    cellFormatter,
     cellWidth,
     sticky = true,
     columnHeaders,
     className = '',
     style,
   } = props;
-  const dims = dataArray.shape;
-
   const [rowCount, columnCount = 1] = dims;
 
-  const cellFormatter =
-    dims.length === 1
-      ? (row: number) => formatter(dataArray.get(row), 0)
-      : (row: number, col: number) => formatter(dataArray.get(row, col), col);
-
   return (
     <GridProvider
       rowCount={rowCount}

packages/shared/src/guards.ts

@@ -421,34 +421,37 @@ export function isComplexValue(
   return type.class === DTypeClass.Complex;
 }
 
-function assertPrimitiveValue<D extends Dataset>(
-  dataset: D,
+function assertPrimitiveValue<T extends DType>(
+  type: T,
   value: unknown,
 ): asserts value is Primitive<DType> {
-  if (hasNumericType(dataset)) {
+  if (isNumericType(type)) {
     assertNum(value);
-  } else if (hasStringType(dataset)) {
+  } else if (isStringType(type)) {
     assertStr(value);
-  } else if (hasBoolType(dataset)) {
+  } else if (isBoolType(type)) {
     assertNumOrBool(value);
-  } else if (hasComplexType(dataset)) {
+  } else if (isComplexType(type)) {
     assertComplex(value);
+  } else if (isCompoundType(type)) {
+    assertArray(value);
   }
 }
 
 export function assertDatasetValue<D extends Dataset<ScalarShape | ArrayShape>>(
   value: unknown,
   dataset: D,
 ): asserts value is Value<D> {
-  if (hasArrayShape(dataset)) {
+  const { type } = dataset;
+
+  if (hasScalarShape(dataset)) {
+    assertPrimitiveValue(type, value);
+  } else {
     assertArrayOrTypedArray(value);
 
     if (value.length > 0) {
-      assertPrimitiveValue(dataset, value[0]);
+      assertPrimitiveValue(type, value[0]);
     }
-  } else {
-    // Scalar shape
-    assertPrimitiveValue(dataset, value);
   }
 }