Add support for nD datasets in CompoundMatrix

packages/app/src/providers/mock/mock-api.ts

@@ -10,7 +10,6 @@ import {
   assertDefined,
   assertMockAttribute,
   assertMockDataset,
-  assertPrintableType,
   findMockEntity,
   hasArrayShape,
   isTypedArray,
@@ -71,7 +70,6 @@ export class MockApi extends DataProviderApi {
     }
 
     assertArrayShape(dataset);
-    assertPrintableType(dataset);
 
     return sliceValue(value, dataset, selection);
   }

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

@@ -5,9 +5,12 @@ import {
   assertPrintableCompoundType,
 } from '@h5web/shared';
 
+import DimensionMapper from '../../../dimension-mapper/DimensionMapper';
+import { useDimMappingState } from '../../../dimension-mapper/hooks';
 import VisBoundary from '../../VisBoundary';
 import type { VisContainerProps } from '../../models';
 import ValueFetcher from '../ValueFetcher';
+import { getSliceSelection } from '../utils';
 import MappedCompoundMatrixVis from './MappedCompoundMatrixVis';
 
 function CompoundMatrixVisContainer(props: VisContainerProps) {
@@ -17,19 +20,32 @@ function CompoundMatrixVisContainer(props: VisContainerProps) {
   assertCompoundType(entity);
   assertPrintableCompoundType(entity);
 
+  const { shape: dims } = entity;
+  const axesCount = Math.min(dims.length, 1);
+  const [dimMapping, setDimMapping] = useDimMappingState(dims, axesCount);
+
   return (
-    <VisBoundary loadingMessage="Loading current data">
-      <ValueFetcher
-        dataset={entity}
-        render={(value) => (
-          <MappedCompoundMatrixVis
-            dataset={entity}
-            value={value}
-            toolbarContainer={toolbarContainer}
-          />
-        )}
+    <>
+      <DimensionMapper
+        rawDims={dims}
+        mapperState={dimMapping}
+        onChange={setDimMapping}
       />
-    </VisBoundary>
+      <VisBoundary loadingMessage="Loading current slice">
+        <ValueFetcher
+          dataset={entity}
+          selection={getSliceSelection(dimMapping)}
+          render={(value) => (
+            <MappedCompoundMatrixVis
+              dataset={entity}
+              value={value}
+              toolbarContainer={toolbarContainer}
+              dimMapping={dimMapping}
+            />
+          )}
+        />
+      </VisBoundary>
+    </>
   );
 }
 

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

@@ -6,47 +6,57 @@ import type {
   PrintableCompoundType,
   PrintableType,
 } from '@h5web/shared';
-import ndarray from 'ndarray';
 import { createPortal } from 'react-dom';
 import shallow from 'zustand/shallow';
 
+import type { DimensionMapping } from '../../../dimension-mapper/models';
+import { useMappedArray, useSlicedDimsAndMapping } from '../hooks';
 import MatrixToolbar from '../matrix/MatrixToolbar';
 import { useMatrixConfig } from '../matrix/config';
 import { getCellWidth } from '../matrix/utils';
+import { getSliceSelection } from '../utils';
 import { compoundFormatter } from './utils';
 
 interface Props {
   dataset: Dataset<ArrayShape, PrintableCompoundType>;
   value: Primitive<PrintableType>[][];
+  dimMapping: DimensionMapping;
   toolbarContainer: HTMLDivElement | undefined;
 }
 
 function MappedCompoundMatrixVis(props: Props) {
-  const { value, dataset, toolbarContainer } = props;
-  const { fields } = dataset.type;
-
-  const fieldNames = Object.keys(fields);
-  const cellWidth = getCellWidth(dataset.type);
-
-  const dataArray = ndarray(value.flat(1), [
-    ...dataset.shape,
-    fieldNames.length,
-  ]);
+  const { value, dataset, toolbarContainer, dimMapping } = props;
 
   const { sticky, customCellWidth } = useMatrixConfig(
     (state) => state,
     shallow
   );
 
+  const { type, shape: dims } = dataset;
+  const { fields } = type;
+  const fieldNames = Object.keys(fields);
+  const cellWidth = getCellWidth(type);
+
+  const [slicedDims, slicedMapping] = useSlicedDimsAndMapping(dims, dimMapping);
+  const [mappedArray] = useMappedArray(
+    value.flat(1),
+    [...slicedDims, fieldNames.length],
+    slicedMapping
+  );
+
   return (
     <>
       {toolbarContainer &&
         createPortal(
-          <MatrixToolbar dataset={dataset} cellWidth={cellWidth} />,
+          <MatrixToolbar
+            dataset={dataset}
+            selection={getSliceSelection(dimMapping)}
+            cellWidth={cellWidth}
+          />,
           toolbarContainer
         )}
       <MatrixVis
-        dataArray={dataArray}
+        dataArray={mappedArray}
         formatter={compoundFormatter}
         cellWidth={customCellWidth ?? cellWidth}
         columnHeaders={fieldNames}

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

@@ -10,41 +10,40 @@ import shallow from 'zustand/shallow';
 
 import type { DimensionMapping } from '../../../dimension-mapper/models';
 import { useMappedArray, useSlicedDimsAndMapping } from '../hooks';
+import { getSliceSelection } from '../utils';
 import MatrixToolbar from './MatrixToolbar';
 import { useMatrixConfig } from './config';
 import { getCellWidth, getFormatter } from './utils';
 
 interface Props {
   dataset: Dataset<ArrayShape, PrintableType>;
-  selection: string | undefined;
   value: ArrayValue<PrintableType>;
-  dims: number[];
   dimMapping: DimensionMapping;
   toolbarContainer: HTMLDivElement | undefined;
 }
 
 function MappedMatrixVis(props: Props) {
-  const { dataset, selection, value, dims, dimMapping, toolbarContainer } =
-    props;
+  const { dataset, value, dimMapping, toolbarContainer } = props;
 
   const { sticky, customCellWidth } = useMatrixConfig(
     (state) => state,
     shallow
   );
 
+  const { shape: dims, type } = dataset;
   const [slicedDims, slicedMapping] = useSlicedDimsAndMapping(dims, dimMapping);
   const [mappedArray] = useMappedArray(value, slicedDims, slicedMapping);
 
   const formatter = getFormatter(dataset);
-  const cellWidth = getCellWidth(dataset.type);
+  const cellWidth = getCellWidth(type);
 
   return (
     <>
       {toolbarContainer &&
         createPortal(
           <MatrixToolbar
             dataset={dataset}
-            selection={selection}
+            selection={getSliceSelection(dimMapping)}
             cellWidth={cellWidth}
           />,
           toolbarContainer

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

@@ -21,7 +21,6 @@ function MatrixVisContainer(props: VisContainerProps) {
   const { shape: dims } = entity;
   const axesCount = Math.min(dims.length, 2);
   const [dimMapping, setDimMapping] = useDimMappingState(dims, axesCount);
-  const selection = getSliceSelection(dimMapping);
 
   return (
     <>
@@ -33,13 +32,11 @@ function MatrixVisContainer(props: VisContainerProps) {
       <VisBoundary resetKey={dimMapping} loadingMessage="Loading current slice">
         <ValueFetcher
           dataset={entity}
-          selection={selection}
+          selection={getSliceSelection(dimMapping)}
           render={(value) => (
             <MappedMatrixVis
               dataset={entity}
-              selection={selection}
               value={value}
-              dims={dims}
               dimMapping={dimMapping}
               toolbarContainer={toolbarContainer}
             />

packages/app/src/vis-packs/core/visualizations.ts

@@ -1,7 +1,6 @@
 import type { Dataset } from '@h5web/shared';
 import { hasPrintableCompoundType } from '@h5web/shared';
 import { hasCompoundType } from '@h5web/shared';
-import { hasNumDims } from '@h5web/shared';
 import {
   hasScalarShape,
   hasArrayShape,
@@ -152,7 +151,7 @@ export const CORE_VIS: Record<Vis, CoreVisDef> = {
   },
 
   [Vis.CompoundMatrix]: {
-    name: Vis.Matrix,
+    name: 'CMatrix', // Vis.Matrix,
     Icon: FiGrid,
     Container: CompoundMatrixVisContainer,
     ConfigProvider: MatrixConfigProvider,
@@ -161,7 +160,7 @@ export const CORE_VIS: Record<Vis, CoreVisDef> = {
         hasCompoundType(dataset) &&
         hasPrintableCompoundType(dataset) &&
         hasArrayShape(dataset) &&
-        hasNumDims(dataset, 1)
+        hasMinDims(dataset, 1)
       );
     },
   },

packages/shared/src/mock/metadata-utils.ts

@@ -16,6 +16,7 @@ import type {
   LinkClass,
   UnresolvedEntity,
   GroupWithChildren,
+  PrintableCompoundType,
 } from '../models-hdf5';
 import { EntityKind, DTypeClass, Endianness } from '../models-hdf5';
 import type { NxInterpretation, SilxStyle } from '../models-nexus';
@@ -64,6 +65,17 @@ export const complexType: ComplexType = {
   imagType: floatType,
 };
 
+export const printableCompoundType: PrintableCompoundType = {
+  class: DTypeClass.Compound,
+  fields: {
+    string: stringType,
+    int: intType,
+    float: floatType,
+    bool: booleanType,
+    complex: complexType,
+  },
+};
+
 /* ---------------------- */
 /* ----- ATTRIBUTES ----- */
 

packages/shared/src/mock/metadata.ts

@@ -1,4 +1,3 @@
-import { DTypeClass } from '../models-hdf5';
 import { ScaleType } from '../models-vis';
 import {
   compoundType,
@@ -19,6 +18,7 @@ import {
   withImageAttributes,
   withAttributes,
   makeIntAttr,
+  printableCompoundType,
 } from './metadata-utils';
 
 export const mockFilepath = 'source.h5';
@@ -50,22 +50,10 @@ export const mockMetadata = makeNxGroup(mockFilepath, 'NXroot', {
       makeDataset('oneD_linear', intType, [41]),
       makeDataset('oneD', intType, [41]),
       makeDataset('oneD_cplx', complexType, [10]),
-      makeDataset(
-        'oneD_compound',
-        {
-          class: DTypeClass.Compound,
-          fields: {
-            string: stringType,
-            int: intType,
-            float: floatType,
-            bool: booleanType,
-            complex: complexType,
-          },
-        },
-        [5]
-      ),
+      makeDataset('oneD_compound', printableCompoundType, [5]),
       makeDataset('twoD', intType, [20, 41]),
       makeDataset('twoD_cplx', complexType, [2, 2]),
+      makeDataset('twoD_compound', printableCompoundType, [2, 5]),
       makeDataset('threeD', intType, [9, 20, 41]),
       makeDataset('threeD_bool', booleanType, [2, 3, 4]),
       makeDataset('threeD_cplx', complexType, [2, 3, 4]),

packages/shared/src/mock/values.ts

@@ -42,6 +42,21 @@ const oneD_cplx = range(1, 11).map((val) => [
   val * Math.sin((val * 3.14) / 10),
 ]);
 
+const oneD_compound = ['Hydrogen', 'Lithum', 'Carbon', 'Sodium', 'Argon'].map(
+  (v, i) => [v, i, oneD[i], i % 2 === 0, oneD_cplx[i]]
+);
+
+const twoD_compound = [
+  oneD_compound,
+  ['Vanadium', 'Niobium', 'Tantalum', 'Silicon', 'Germanium'].map((v, i) => [
+    v,
+    i * 10,
+    oneD[i],
+    i % 2 === 1,
+    oneD_cplx[i],
+  ]),
+];
+
 export const mockValues = {
   null: null,
   raw: { int: 42 },
@@ -144,7 +159,7 @@ export const mockValues = {
   position: [-1, 1],
   scatter_data: arr1.map((val) => Math.cos((val * 3.14) / 40)),
   Y_scatter: arr1.map((v, i) => (i % 10) + (i % 5)),
-  oneD_compound: ['Hydrogen', 'Lithum', 'Carbon', 'Sodium', 'Argon'].map(
-    (v, i) => [v, i, oneD[i], i % 2 === 0, oneD_cplx[i]]
-  ),
+  oneD_compound,
+  twoD_compound,
+  threeD_compound: [twoD_compound, twoD_compound, twoD_compound, twoD_compound],
 };