packages/core/package.json

@@ -61,8 +61,8 @@
     "typescript": "5.5.3"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "eslintConfig": {
     "extends": [

packages/h5/package.json

@@ -19,14 +19,12 @@
   "dependencies": {
     "@edata-portal/core": "workspace:*",
     "@edata-portal/icat-plus-api": "^1.8.15",
-    "@h5web/app": "13.0.0",
-    "@h5web/lib": "13.0.0",
+    "@h5web/app": "14.0.0",
+    "@h5web/lib": "14.0.0",
     "@react-three/fiber": "^8.17.6",
-    "ndarray": "^1.0.19",
     "three": "^0.167.1"
   },
   "devDependencies": {
-    "@types/ndarray": "^1.0.14",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
     "eslint": "^8.57.0",
@@ -36,8 +34,8 @@
     "typescript": "5.5.3"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "eslintConfig": {
     "extends": [

packages/h5/src/h5/ImageVisForMXData.tsx

-import { useDataContext } from '@h5web/app';
+import { assertDataset, isTypedArray, useNdArray } from '@h5web/app';
+import { useEntity } from '@h5web/app';
+import { assertArrayShape } from '@h5web/app';
+import { assertIntegerType } from '@h5web/app';
+import { useDatasetValue } from '@h5web/app';
 import { HeatmapVis } from '@h5web/lib';
-import ndarray from 'ndarray';
-import { useMemo } from 'react';
 
 interface Props {
   title: string;
@@ -11,28 +13,18 @@ interface Props {
 function ImageVisForMXData(props: Props) {
   const { title, imageIndex } = props;
 
-  const { entitiesStore, valuesStore } = useDataContext();
-  const entity = entitiesStore.get('/entry/data/data');
+  const dataset = useEntity('/entry/data/data');
+  assertDataset(dataset);
+  assertArrayShape(dataset);
+  assertIntegerType(dataset);
 
-  if (entity.kind !== 'dataset') {
-    throw new Error(
-      `Expected dataset at /entry/data/data but got ${entity.kind}`,
-    );
-  }
+  const data = useDatasetValue(dataset, `${imageIndex},:,:`);
 
-  if (entity.shape === null) {
-    throw new Error(`Expected dataset with non-null shape at /entry/data/data`);
+  if (!isTypedArray(data)) {
+    throw new Error('Expected typed array');
   }
 
-  const data = valuesStore.get({
-    dataset: entity as any,
-    selection: `${imageIndex},:,:`,
-  }) as Uint32Array;
-
-  const dataArray = useMemo(
-    () => ndarray(data, entity.shape!.slice(1)),
-    [entity, data],
-  );
+  const dataArray = useNdArray(data, dataset.shape.slice(1));
 
   return (
     <div className="d-flex h-100 w-100">