Add support for greyscale image plots

client/component/README.md

@@ -3,20 +3,21 @@
 View the frontend Typescript documentation [here](https://diamondlightsource.github.io/davidia/typedocs/index.html).
 
 ## Installation
+
 ### `pnpm add @diamondlightsource/davidia`
 
 ## Vite configuration
 
 Some davidia dependencies require a global object to be defined when used in Vite applications. Add the following to your vite.config.ts:
 
 ```js
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
 export default defineConfig({
   plugins: [react()],
   define: {
     global: {},
   },
 });
-```
+```

client/component/package.json

@@ -40,6 +40,8 @@
     "d3-scale": "^4.0.2",
     "ndarray-concat-rows": "^1.0.1",
     "ndarray-linspace": "^2.0.3",
+    "ndarray-tile": "^1.0.3",
+    "ndarray-unsqueeze": "^1.0.3",
     "react-colorful": "^5.8.0",
     "react-draggable": "^4.7.0",
     "react-icons": "^5.7.0",

client/component/src/ImagePlot.tsx

@@ -1,4 +1,6 @@
 import { Aspect, type ModifierKey, RgbVis } from '@h5web/lib';
+import unsqueeze from 'ndarray-unsqueeze';
+import tile from 'ndarray-tile';
 
 import SelectionComponent from './SelectionComponent';
 import { createInteractionsConfig, InteractionModeType } from './utils';
@@ -38,6 +40,23 @@ function getAxisOffsets(
   };
 }
 
+function makeRGB(values: NDT): NDT | null {
+  const shape = values.shape;
+
+  if (shape.length == 2) {
+    return tile(unsqueeze(values), [1, 1, 3]) as NDT;
+  } else if (shape.length == 3) {
+    const channels = shape[2];
+    if (channels == 1) {
+      return tile(values, [1, 1, 3]) as NDT;
+    } else if (channels == 3) {
+      return values;
+    }
+  }
+  console.log('Shape of array is not compatible with RGB array:', shape);
+  return null;
+}
+
 export function ImageVisCanvas({ xValues, yValues, values }: Props) {
   const {
     title,
@@ -55,35 +74,39 @@ export function ImageVisCanvas({ xValues, yValues, values }: Props) {
   } = usePlotCustomizationContext();
   const interactionsConfig = createInteractionsConfig(mode);
 
+  const rgbValues = makeRGB(values);
+
   return (
-    <RgbVis
-      dataArray={values}
-      aspect={aspect}
-      showGrid={showGrid}
-      title={title}
-      abscissaParams={{
-        label: xLabel,
-        value: xValues?.data,
-      }}
-      ordinateParams={{
-        label: yLabel,
-        value: yValues?.data,
-      }}
-      interactions={interactionsConfig}
-      flipYAxis
-    >
-      {canSelect && (
-        <SelectionComponent
-          modifierKey={[] as ModifierKey[]}
-          disabled={mode !== InteractionModeType.selectRegion}
-          selectionMax={selectionMax}
-          selectionType={selectionType}
-          batonProps={batonProps}
-          updateSelection={updateSelection}
-          selections={selections}
-        />
-      )}
-    </RgbVis>
+    rgbValues && (
+      <RgbVis
+        dataArray={rgbValues}
+        aspect={aspect}
+        showGrid={showGrid}
+        title={title}
+        abscissaParams={{
+          label: xLabel,
+          value: xValues?.data,
+        }}
+        ordinateParams={{
+          label: yLabel,
+          value: yValues?.data,
+        }}
+        interactions={interactionsConfig}
+        flipYAxis
+      >
+        {canSelect && (
+          <SelectionComponent
+            modifierKey={[] as ModifierKey[]}
+            disabled={mode !== InteractionModeType.selectRegion}
+            selectionMax={selectionMax}
+            selectionType={selectionType}
+            batonProps={batonProps}
+            updateSelection={updateSelection}
+            selections={selections}
+          />
+        )}
+      </RgbVis>
+    )
   );
 }
 

client/example/src/App.tsx

@@ -62,6 +62,16 @@ function generateImage(width: number, height: number) {
   return ndarray(rgb, [height, width, 3]) as NDT;
 }
 
+function generateGreyImage(width: number, height: number, threeD = false) {
+  const rgb = new Uint8Array(width * height);
+
+  for (let i = 0; i < rgb.length; i++) {
+    rgb[i] = Math.random() * 255;
+  }
+  if (threeD) return ndarray(rgb, [height, width, 1]) as NDT;
+  return ndarray(rgb, [height, width]) as NDT;
+}
+
 class AppMain extends React.Component<AppMainProps, AppMainStates> {
   uuid: string;
   constructor(props: AppMainProps) {
@@ -136,6 +146,10 @@ class AppMain extends React.Component<AppMainProps, AppMainStates> {
     const port = import.meta.env.VITE_WS_PORT ?? window.location.port;
     console.log('host:', host, 'port:', port);
 
+    const portraitImage = generateImage(6, 12);
+    const landscapeImage = generateGreyImage(9, 2);
+    const squareImage = generateGreyImage(6, 6, true);
+
     return (
       <Tabs className={'outer-tabs'}>
         <TabList>
@@ -217,7 +231,7 @@ class AppMain extends React.Component<AppMainProps, AppMainStates> {
                   <ImagePlot
                     aspect="equal"
                     plotConfig={{ title: 'Sample Portrait Image' }}
-                    values={generateImage(6, 12)}
+                    values={portraitImage}
                     tightAxes={this.state.tightImagePlots}
                   />
                 </div>
@@ -233,7 +247,7 @@ class AppMain extends React.Component<AppMainProps, AppMainStates> {
                     <ImagePlot
                       aspect="equal"
                       plotConfig={{ title: 'Sample Landscape Image' }}
-                      values={generateImage(9, 2)}
+                      values={landscapeImage}
                       tightAxes={this.state.tightImagePlots}
                     />
                   </div>
@@ -245,7 +259,7 @@ class AppMain extends React.Component<AppMainProps, AppMainStates> {
                       yLabel: 'Y Co-ordinate',
                     }}
                     tightAxes={this.state.tightImagePlots}
-                    values={generateImage(6, 6)}
+                    values={squareImage}
                   />
                 </div>
               </div>

client/types/ndarray-tile/index.d.ts

@@ -0,0 +1,5 @@
+declare module 'ndarray-tile' {
+  import type { NdArray, TypedArray } from 'ndarray';
+  type NDT = NdArray<TypedArray>;
+  export default function tile(array: NDT, repeats: number[]): NDT;
+}

client/types/ndarray-unsqueeze/index.d.ts

@@ -0,0 +1,5 @@
+declare module 'ndarray-unsqueeze' {
+  import type { NdArray, TypedArray } from 'ndarray';
+  type NDT = NdArray<TypedArray>;
+  export default function unsqueeze(array: NDT, axis?: number): NDT;
+}

tsconfig.json

@@ -13,6 +13,8 @@
     "typeRoots": [ "client/types" ],
     "paths": {
       "ndarray-concat-rows": ["./client/types/ndarray-concat-rows"],
+      "ndarray-tile": ["./client/types/ndarray-tile"],
+      "ndarray-unsqueeze": ["./client/types/ndarray-unsqueeze"],
       "@diamondlightsource/davidia": [
         "./client/component/src/index.ts"
       ],