Assert values of enum datasets and other tweaks

apps/storybook/src/HeatmapVisDisplay.stories.tsx

@@ -10,7 +10,7 @@ import { type Meta, type StoryFn, type StoryObj } from '@storybook/react';
 import HeatmapVisStoriesMeta from './HeatmapVis.stories';
 
 const { dataArray } = HeatmapVisStoriesMeta.args;
-const asymTwoD = mockValues.twoDAsym();
+const asymTwoD = mockValues.twoD_asym();
 
 const meta = {
   ...HeatmapVisStoriesMeta,

packages/app/src/metadata-viewer/utils.ts

@@ -1,7 +1,7 @@
 import {
+  isFloatType,
   isH5WebComplex,
   isIntegerType,
-  isNumericType,
   isScalarShape,
 } from '@h5web/shared/guards';
 import {
@@ -28,17 +28,15 @@ export function renderShape(shape: Shape): string {
 }
 
 export function renderType(type: DType): string {
-  if (isNumericType(type)) {
-    const { endianness, size } = type;
-
-    const endiannessStr = endianness ? `, ${endianness}` : '';
-    const signStr = isIntegerType(type)
-      ? type.signed
-        ? ' (signed)'
-        : ' (unsigned)'
-      : '';
+  if (isIntegerType(type)) {
+    const sign = type.signed ? ' (signed)' : ' (unsigned)';
+    const endianness = type.endianness ? `, ${type.endianness}` : '';
+    return `Integer${sign}, ${type.size}-bit${endianness}`;
+  }
 
-    return `${type.class}${signStr}, ${size}-bit${endiannessStr}`;
+  if (isFloatType(type)) {
+    const endianness = type.endianness ? `, ${type.endianness}` : '';
+    return `Float, ${type.size}-bit${endianness}`;
   }
 
   if (type.class === DTypeClass.String) {

packages/app/src/vis-packs/core/complex/MappedComplexLineVis.tsx

@@ -46,8 +46,8 @@ function MappedComplexLineVis(props: Props) {
     auxValues = [],
     dims,
     dimMapping,
-    axisLabels,
-    axisValues,
+    axisLabels = [],
+    axisValues = [],
     title,
     toolbarContainer,
     config,
@@ -98,8 +98,8 @@ function MappedComplexLineVis(props: Props) {
         curveType={curveType}
         showGrid={showGrid}
         abscissaParams={{
-          label: axisLabels?.[xDimIndex],
-          value: axisValues?.[xDimIndex],
+          label: axisLabels[xDimIndex],
+          value: axisValues[xDimIndex],
           scaleType: xScaleType,
         }}
         ordinateLabel={ordinateLabel}

packages/app/src/vis-packs/core/complex/MappedComplexVis.tsx

@@ -44,8 +44,8 @@ function MappedComplexVis(props: Props) {
     value,
     dims,
     dimMapping,
-    axisLabels,
-    axisValues,
+    axisLabels = [],
+    axisValues = [],
     title,
     toolbarContainer,
     config,
@@ -111,12 +111,12 @@ function MappedComplexVis(props: Props) {
         showGrid={showGrid}
         invertColorMap={invertColorMap}
         abscissaParams={{
-          label: axisLabels?.[xDimIndex],
-          value: axisValues?.[xDimIndex],
+          label: axisLabels[xDimIndex],
+          value: axisValues[xDimIndex],
         }}
         ordinateParams={{
-          label: axisLabels?.[yDimIndex],
-          value: axisValues?.[yDimIndex],
+          label: axisLabels[yDimIndex],
+          value: axisValues[yDimIndex],
         }}
         alpha={
           visType === ComplexVisType.PhaseAmplitude

packages/app/src/vis-packs/core/heatmap/MappedHeatmapVis.tsx

@@ -38,8 +38,8 @@ function MappedHeatmapVis(props: Props) {
     dataset,
     value,
     dimMapping,
-    axisLabels,
-    axisValues,
+    axisLabels = [],
+    axisValues = [],
     title,
     toolbarContainer,
     config,
@@ -57,8 +57,9 @@ function MappedHeatmapVis(props: Props) {
     flipYAxis,
   } = config;
 
-  const { shape: dims } = dataset;
   const numArray = useToNumArray(value);
+
+  const { shape: dims } = dataset;
   const [slicedDims, slicedMapping] = useSlicedDimsAndMapping(dims, dimMapping);
   const dataArray = useMappedArray(numArray, slicedDims, slicedMapping);
 
@@ -101,12 +102,12 @@ function MappedHeatmapVis(props: Props) {
         showGrid={showGrid}
         invertColorMap={invertColorMap}
         abscissaParams={{
-          label: axisLabels?.[xDimIndex],
-          value: axisValues?.[xDimIndex],
+          label: axisLabels[xDimIndex],
+          value: axisValues[xDimIndex],
         }}
         ordinateParams={{
-          label: axisLabels?.[yDimIndex],
-          value: axisValues?.[yDimIndex],
+          label: axisLabels[yDimIndex],
+          value: axisValues[yDimIndex],
         }}
         flipXAxis={flipXAxis}
         flipYAxis={flipYAxis}

packages/app/src/vis-packs/core/line/LineVisContainer.tsx

@@ -43,7 +43,6 @@ function LineVisContainer(props: VisContainerProps) {
             <MappedLineVis
               dataset={entity}
               value={value}
-              dims={dims}
               dimMapping={dimMapping}
               title={entity.name}
               toolbarContainer={toolbarContainer}

packages/app/src/vis-packs/core/line/MappedLineVis.tsx

@@ -38,7 +38,6 @@ interface Props {
   auxLabels?: string[];
   auxValues?: ArrayValue<NumericLikeType>[];
   auxErrors?: (ArrayValue<NumericType> | undefined)[];
-  dims: number[];
   dimMapping: DimensionMapping;
   axisLabels?: AxisMapping<string>;
   axisValues?: AxisMapping<ArrayValue<NumericType>>;
@@ -57,10 +56,9 @@ function MappedLineVis(props: Props) {
     auxLabels = [],
     auxValues = [],
     auxErrors = [],
-    dims,
     dimMapping,
-    axisLabels,
-    axisValues,
+    axisLabels = [],
+    axisValues = [],
     title,
     toolbarContainer,
     config,
@@ -76,20 +74,22 @@ function MappedLineVis(props: Props) {
     showErrors,
   } = config;
 
+  const { shape: dims } = dataset;
+  const [slicedDims, slicedMapping] = useSlicedDimsAndMapping(dims, dimMapping);
+  const hookArgs = [slicedDims, slicedMapping] as const;
+
   const numArray = useToNumArray(value);
   const numAuxArrays = useToNumArrays(auxValues);
-  const [slicedDims, slicedMapping] = useSlicedDimsAndMapping(dims, dimMapping);
 
-  const hookArgs = [slicedDims, slicedMapping] as const;
   const dataArray = useMappedArray(numArray, ...hookArgs);
-  const errorArray = useMappedArray(errors, ...hookArgs);
+  const errorsArray = useMappedArray(errors, ...hookArgs);
   const auxArrays = useMappedArrays(numAuxArrays, ...hookArgs);
   const auxErrorsArrays = useMappedArrays(auxErrors, ...hookArgs);
 
   const dataDomain = useDomain(
     dataArray,
     yScaleType,
-    showErrors ? errorArray : undefined,
+    showErrors ? errorsArray : undefined,
     ignoreValue,
   );
 
@@ -130,14 +130,14 @@ function MappedLineVis(props: Props) {
         curveType={curveType}
         showGrid={showGrid}
         abscissaParams={{
-          label: axisLabels?.[xDimIndex],
-          value: axisValues?.[xDimIndex],
+          label: axisLabels[xDimIndex],
+          value: axisValues[xDimIndex],
           scaleType: xScaleType,
         }}
         ordinateLabel={valueLabel}
         title={title}
         dtype={formatNumLikeType(dataset.type)}
-        errorsArray={errorArray}
+        errorsArray={errorsArray}
         showErrors={showErrors}
         auxiliaries={auxArrays.map((array, i) => ({
           label: auxLabels[i],

packages/app/src/vis-packs/core/matrix/utils.ts

@@ -6,12 +6,12 @@ import {
   isNumericType,
 } from '@h5web/shared/guards';
 import {
-  type BooleanType,
   type ComplexType,
   type CompoundType,
   DTypeClass,
   type NumericType,
   type PrintableType,
+  type ScalarValue,
 } from '@h5web/shared/hdf5-models';
 import { type ValueFormatter } from '@h5web/shared/vis-models';
 import {
@@ -23,7 +23,7 @@ import { format } from 'd3-format';
 
 export function createNumericFormatter(
   notation: Notation,
-): ValueFormatter<NumericType> {
+): (val: ScalarValue<NumericType>) => string {
   switch (notation) {
     case Notation.FixedPoint:
       return format('.3f');
@@ -36,7 +36,7 @@ export function createNumericFormatter(
 
 export function createMatrixComplexFormatter(
   notation: Notation,
-): ValueFormatter<ComplexType> {
+): (val: ScalarValue<ComplexType>) => string {
   const formatStr =
     notation === Notation.FixedPoint
       ? '.2f'
@@ -48,24 +48,29 @@ export function createMatrixComplexFormatter(
 export function getFormatter(
   type: PrintableType,
   notation: Notation,
-): ValueFormatter<PrintableType> {
-  if (isComplexType(type)) {
-    return createMatrixComplexFormatter(notation);
-  }
+): (val: ScalarValue<PrintableType>) => string; // override distributivity of `ValueFormatter`
 
+export function getFormatter(
+  type: PrintableType,
+  notation: Notation,
+): ValueFormatter<PrintableType> {
   if (isNumericType(type)) {
     return createNumericFormatter(notation);
   }
 
   if (isBoolType(type)) {
-    return formatBool as ValueFormatter<BooleanType>;
+    return formatBool;
   }
 
   if (isEnumType(type)) {
     return createEnumFormatter(type.mapping);
   }
 
-  return (val) => (val as string).toString(); // call `toString()` for safety, in case type cast is wrong
+  if (isComplexType(type)) {
+    return createMatrixComplexFormatter(notation);
+  }
+
+  return (val: string) => val.toString(); // call `toString()` for safety, in case type cast is wrong
 }
 
 export function getCellWidth(

packages/app/src/vis-packs/core/rgb/MappedRgbVis.tsx

@@ -29,8 +29,8 @@ function MappedRgbVis(props: Props) {
   const {
     dataset,
     value,
-    axisLabels,
-    axisValues,
+    axisLabels = [],
+    axisValues = [],
     dimMapping,
     title,
     toolbarContainer,
@@ -58,12 +58,12 @@ function MappedRgbVis(props: Props) {
         aspect={keepRatio ? 'equal' : 'auto'}
         imageType={imageType}
         abscissaParams={{
-          label: axisLabels?.[xDimIndex],
-          value: axisValues?.[xDimIndex],
+          label: axisLabels[xDimIndex],
+          value: axisValues[xDimIndex],
         }}
         ordinateParams={{
-          label: axisLabels?.[yDimIndex],
-          value: axisValues?.[yDimIndex],
+          label: axisLabels[yDimIndex],
+          value: axisValues[yDimIndex],
         }}
         flipXAxis={flipXAxis}
         flipYAxis={flipYAxis}

packages/app/src/vis-packs/core/scalar/utils.ts

@@ -1,9 +1,9 @@
 import { hasBoolType, hasComplexType, hasEnumType } from '@h5web/shared/guards';
 import {
   type ArrayShape,
-  type BooleanType,
   type Dataset,
   type PrintableType,
+  type ScalarValue,
 } from '@h5web/shared/hdf5-models';
 import { type ValueFormatter } from '@h5web/shared/vis-models';
 import {
@@ -14,18 +14,22 @@ import {
 
 export function getFormatter(
   dataset: Dataset<ArrayShape, PrintableType>,
+): (val: ScalarValue<PrintableType>) => string; // override distributivity of `ValueFormatter`
+
+export function getFormatter<T extends PrintableType>(
+  dataset: Dataset<ArrayShape, T>,
 ): ValueFormatter<PrintableType> {
   if (hasComplexType(dataset)) {
     return formatScalarComplex;
   }
 
   if (hasBoolType(dataset)) {
-    return formatBool as ValueFormatter<BooleanType>;
+    return formatBool;
   }
 
   if (hasEnumType(dataset)) {
     return createEnumFormatter(dataset.type.mapping);
   }
 
-  return (val) => (val as number | string).toString();
+  return (val: number | string) => val.toString();
 }

packages/app/src/vis-packs/nexus/containers/NxSpectrumContainer.tsx

@@ -67,7 +67,6 @@ function NxSpectrumContainer(props: VisContainerProps) {
                 auxLabels={auxDefs.map((def) => def.label)}
                 auxValues={auxValues}
                 auxErrors={auxErrors}
-                dims={signalDims}
                 dimMapping={dimMapping}
                 axisLabels={axisLabels}
                 axisValues={axisValues}

packages/app/src/vis-packs/nexus/models.ts

@@ -10,7 +10,6 @@ import {
   type StringType,
 } from '@h5web/shared/hdf5-models';
 import { type AxisMapping } from '@h5web/shared/nexus-models';
-import { type NumArray } from '@h5web/shared/vis-models';
 
 export type NxAttribute =
   | 'NX_class'
@@ -58,8 +57,8 @@ export interface NxData<
 export interface NxValues<T extends NumericLikeType | ComplexType> {
   title: string;
   signal: ArrayValue<T>;
-  errors?: NumArray;
+  errors?: ArrayValue<NumericType>;
   auxValues: ArrayValue<T>[];
-  auxErrors: (NumArray | undefined)[];
-  axisValues: AxisMapping<NumArray>;
+  auxErrors: (ArrayValue<NumericType> | undefined)[];
+  axisValues: AxisMapping<ArrayValue<NumericType>>;
 }