KPMP-5528: get PhysicalSize vars from ome.xml

package.json

@@ -23,10 +23,12 @@
     "bootstrap": "5.2.3",
     "bootstrap-5-css-only": "5.1.3",
     "history": "5.1.0",
+    "@hms-dbmi/viv": "0.16.1",
     "immutability-helper": "3.1.1",
     "isomorphic-unfetch": "3.1.0",
     "kpmp-common-components": "1.2.14",
     "kpmp-common-styles": "1.0.13",
+    "mathjs": "13.1.0",
     "react": "17.0.2",
     "react-dnd": "15.1.1",
     "react-dnd-html5-backend": "15.1.2",
@@ -55,7 +57,7 @@
   "scripts": {
     "start": "npm-run-all -p start-js --max_old_space_size=8192",
     "build": "npm-run-all build-css build-js",
-    "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!vitessce|@devexpress|@elastic|react-ga4)'",
+    "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!vitessce|@devexpress|@elastic|react-ga4|@hms-dbmi|@deck.gl|@vivjs)'",
     "eject": "react-scripts eject",
     "start-js": "craco --max_old_space_size=8192 start",
     "build-js": "craco --max_old_space_size=8192 build",

src/components/SpatialViewer/segmentationViewConfig.json

@@ -0,0 +1,59 @@
+{
+    "coordinationSpace": {
+        "dataset": {
+            "A": "A"
+        }
+    },
+    "datasets": [
+        {
+            "files": [
+                {
+                    "name": "<IMAGE_NAME>",
+                    "url": "<IMAGE_URL>",
+                    "fileType": "image.ome-tiff"
+                },
+                {
+                    "name": "<SEGMENTATION_MASK_NAME>",
+                    "url": "<SEGMENTATION_MASK_URL>",
+                    "fileType": "obsSegmentations.ome-tiff",
+                    "options": {
+                        "obsTypesFromChannelNames": true,
+                        "coordinateTransformations": [
+                            {
+                                "type": "scale",
+                                "scale": [
+                                    "<PHYSICAL_SIZE_X>",
+                                    "<PHYSICAL_SIZE_Y>",
+                                    1,
+                                    1,
+                                    1
+                                ]
+                            }
+                        ]
+                    }
+                }
+            ],
+            "name": "Visualization Files",
+            "uid": "A"
+        }
+    ],
+    "layout": [
+        {
+            "component": "spatialBeta",
+            "x": 0,
+            "y": 0,
+            "w": 6,
+            "h": 12
+        },
+        {
+            "component": "layerControllerBeta",
+            "x": 6,
+            "y": 0,
+            "w": 6,
+            "h": 12
+        }
+    ],
+    "initStrategy": "auto",
+    "name": "KPMP Spatial Viewer",
+    "version": "1.0.4"
+}

src/components/SpatialViewer/viewConfigHelper.js

@@ -2,7 +2,10 @@ import lmViewConfig from './lightMicroscopyViewConfig.json';
 import threeDCytometryViewConfig from './threeDCytometryViewConfig.json';
 import threeDCytometryViewNoChannelsConfig from './threeDCytometryViewNoChannelsConfig.json';
 import stViewConfig from './spatialTranscriptomicsViewConfig.json'
+import segmentationConfig from './segmentationViewConfig.json';
 import { getFileLink } from "../../helpers/Api";
+import { loadOmeTiff } from '@hms-dbmi/viv';
+import { unit } from 'mathjs';
 
 export const getViewConfig = (type) => {
     switch (type) {
@@ -16,6 +19,8 @@ export const getViewConfig = (type) => {
             return lmViewConfig;
         case 'Spatial Transcriptomics':
             return stViewConfig;
+        case 'Segmentation':
+            return segmentationConfig;
         default:
             return threeDCytometryViewConfig
     }
@@ -45,6 +50,16 @@ export const populateViewConfig = async (viewConfig, selectedDataset) => {
         });
         let dataUrl = getPublicFileLink(selectedDataset["packageid"], relatedFiles[0]['filename']);
         stringifiedConfig = stringifiedConfig.replace(/<DATA_FILE_URL>/gi, dataUrl);
+
+        if (selectedDataset["configtype"] === "Segmentation") {
+            stringifiedConfig = stringifiedConfig.replace('<SEGMENTATION_MASK_NAME>', relatedFiles[0]['filename']);
+            stringifiedConfig = stringifiedConfig.replace('<SEGMENTATION_MASK_URL>', dataUrl);
+            const loaders = await loadOmeTiff(dataUrl);
+            const physicalSizeX = unit(loaders.metadata.Pixels.PhysicalSizeX, (loaders.metadata.Pixels.PhysicalSizeXUnit.replace('µ', 'u'))).to("um").toNumber();
+            const physicalSizeY = unit(loaders.metadata.Pixels.PhysicalSizeY, (loaders.metadata.Pixels.PhysicalSizeYUnit.replace('µ', 'u'))).to("um").toNumber();
+            stringifiedConfig = stringifiedConfig.replace('"<PHYSICAL_SIZE_X>"', physicalSizeX);
+            stringifiedConfig = stringifiedConfig.replace('"<PHYSICAL_SIZE_Y>"', physicalSizeY);
+        }
     }
     stringifiedConfig = stringifiedConfig.replace('<IMAGE_NAME>', selectedDataset["filename"]);
     stringifiedConfig = stringifiedConfig.replace('<IMAGE_URL>', imageUrlResponse.data);