fix: various bugs with v33 re cine and colors (#3052)

* fix various bugs

* feat: initial work for debug page

* change throw to console error for color lookup table

* update packages

* apply review

* apply review comments

.docker/Viewer-v3.x/default.conf.template

@@ -5,6 +5,13 @@ server {
     root   /usr/share/nginx/html;
     index  index.html index.htm;
     try_files $uri $uri/ /index.html;
+    add_header Cross-Origin-Opener-Policy same-origin;
+    add_header Cross-Origin-Embedder-Policy require-corp;
+    add_header Cross-Origin-Resource-Policy same-origin;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
   }
   error_page   500 502 503 504  /50x.html;
   location = /50x.html {

extensions/cornerstone-dicom-sr/package.json

@@ -45,7 +45,7 @@
   "dependencies": {
     "@babel/runtime": "7.16.3",
     "classnames": "^2.2.6",
-    "@cornerstonejs/core": "^0.21.5",
+    "@cornerstonejs/core": "^0.22.3",
-    "@cornerstonejs/tools": "^0.29.8"
+    "@cornerstonejs/tools": "^0.30.6"
   }
 }

extensions/cornerstone/package.json

@@ -43,9 +43,9 @@
   },
   "dependencies": {
     "@babel/runtime": "7.17.9",
-    "@cornerstonejs/core": "^0.21.5",
+    "@cornerstonejs/core": "^0.22.3",
-    "@cornerstonejs/streaming-image-volume-loader": "^0.6.5",
+    "@cornerstonejs/streaming-image-volume-loader": "^0.6.11",
-    "@cornerstonejs/tools": "^0.29.8",
+    "@cornerstonejs/tools": "^0.30.6",
     "@kitware/vtk.js": "25.9.0",
     "html2canvas": "^1.4.1",
     "lodash.debounce": "4.0.8",

extensions/cornerstone/src/init.tsx

@@ -70,6 +70,7 @@ export default async function init({
     DisplaySetService,
     UIDialogService,
     UIModalService,
+    UINotificationService,
     CineService,
     CornerstoneViewportService,
     HangingProtocolService,
@@ -79,6 +80,15 @@ export default async function init({
 
   window.services = servicesManager.services;
 
+  if (!window.crossOriginIsolated) {
+    UINotificationService.show({
+      title: 'Cross Origin Isolation',
+      message:
+        'Cross Origin Isolation is not enabled, volume rendering will not work (e.g., MPR)',
+      type: 'warning',
+    });
+  }
+
   if (cornerstone.getShouldUseCPURendering()) {
     _showCPURenderingModal(UIModalService, HangingProtocolService);
   }

extensions/measurement-tracking/package.json

@@ -32,8 +32,8 @@
   "peerDependencies": {
     "@ohif/core": "^3.0.0",
     "classnames": "^2.2.6",
-    "@cornerstonejs/core": "^0.21.5",
+    "@cornerstonejs/core": "^0.22.3",
-    "@cornerstonejs/tools": "^0.29.8",
+    "@cornerstonejs/tools": "^0.30.6",
     "@ohif/extension-cornerstone-dicom-sr": "^3.0.0",
     "dcmjs": "^0.28.3",
     "prop-types": "^15.6.2",

extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx

@@ -86,6 +86,8 @@ function TrackedCornerstoneViewport(props) {
       cineService.playClip(element, {
         framesPerSecond: validFrameRate,
       });
+    } else {
+      cineService.stopClip(element);
     }
   };
 

modes/tmtv/src/utils/setFusionActiveVolume.js

@@ -32,14 +32,17 @@ export default function setFusionActiveVolume(
     toolNames.EllipticalROI
   );
 
+  // Todo: this should not take into account the loader id
+  const volumeId = `cornerstoneStreamingImageVolume:${displaySets[0].displaySetInstanceUID}`;
+
   const windowLevelConfig = {
     ...wlToolConfig,
-    volumeId: displaySets[0].displaySetInstanceUID,
+    volumeId,
   };
 
   const ellipticalROIConfig = {
     ...ellipticalToolConfig,
-    volumeId: displaySets[0].displaySetInstanceUID,
+    volumeId,
   };
 
   ToolGroupService.setToolConfiguration(

platform/core/src/utils/metadataProvider/fetchPaletteColorLookupTableData.js

@@ -12,16 +12,16 @@
  * Returns undefined if the palette data is absent.
  */
 export default function fetchPaletteColorLookupTableData(
-  item, tag, descriptorTag
+  item,
+  tag,
+  descriptorTag
 ) {
   const { PaletteColorLookupTableUID } = item;
   const paletteData = item[tag];
-  if (paletteData === undefined && PaletteColorLookupTableUID === undefined) return;
+  if (paletteData === undefined && PaletteColorLookupTableUID === undefined)
+    return;
   // performance optimization - read UID and cache by UID
-  return _getPaletteColor(
+  return _getPaletteColor(item[tag], item[descriptorTag]);
-    item[tag],
-    item[descriptorTag]
-  )
 }
 
 function _getPaletteColor(paletteColorLookupTableData, lutDescriptor) {
@@ -36,13 +36,12 @@ function _getPaletteColor(paletteColorLookupTableData, lutDescriptor) {
     if (bits === 16) {
       let j = 0;
       for (let i = 0; i < numLutEntries; i++) {
-        lut[i] = arraybuffer[j++] + arraybuffer[j++] << 8;
+        lut[i] = (arraybuffer[j++] + arraybuffer[j++]) << 8;
       }
     } else {
       for (let i = 0; i < numLutEntries; i++) {
         lut[i] = byteArray[i];
       }
-
     }
     return lut;
   };
@@ -53,20 +52,33 @@ function _getPaletteColor(paletteColorLookupTableData, lutDescriptor) {
 
   if (paletteColorLookupTableData.InlineBinary) {
     try {
-      const arraybuffer = Uint8Array.from(atob(paletteColorLookupTableData.InlineBinary), c =>
+      const arraybuffer = Uint8Array.from(
-        c.charCodeAt(0)
+        atob(paletteColorLookupTableData.InlineBinary),
+        c => c.charCodeAt(0)
       );
-      return (paletteColorLookupTableData.palette = arrayBufferToPaletteColorLUT(arraybuffer));
+      return (paletteColorLookupTableData.palette = arrayBufferToPaletteColorLUT(
+        arraybuffer
+      ));
     } catch (e) {
-      console.log("Couldn't decode", paletteColorLookupTableData.InlineBinary, e);
+      console.log(
+        "Couldn't decode",
+        paletteColorLookupTableData.InlineBinary,
+        e
+      );
       return undefined;
     }
   }
 
   if (paletteColorLookupTableData.retrieveBulkData) {
-    return paletteColorLookupTableData.retrieveBulkData().then(val =>
+    return paletteColorLookupTableData
-      (paletteColorLookupTableData.palette = arrayBufferToPaletteColorLUT(val)));
+      .retrieveBulkData()
+      .then(
+        val =>
+          (paletteColorLookupTableData.palette = arrayBufferToPaletteColorLUT(
+            val
+          ))
+      );
   }
 
-  throw new Error(`No data found for ${paletteColorLookupTableData} palette`)
+  console.error(`No data found for ${paletteColorLookupTableData} palette`);
 }

platform/ui/src/components/Button/Button.tsx

@@ -44,9 +44,12 @@ const variants = {
       'text-primary-main hover:opacity-80 active:opacity-100 focus:opacity-80',
     secondary:
       'text-secondary-light hover:opacity-80 active:opacity-100 focus:opacity-80',
-    white: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
+    translucent:
-    black:
+      'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
+    white:
       'text-black hover:bg-primary-main focus:bg-primary-main hover:border-black focus:border-black',
+    black:
+      'text-white hover:bg-primary-main focus:bg-primary-main hover:border-black focus:border-black',
     primaryActive:
       'text-primary-active hover:opacity-80 active:opacity-100 focus:opacity-80',
     primaryLight:

platform/ui/src/components/StudyListPagination/StudyListPagination.tsx

@@ -59,7 +59,7 @@ const StudyListPagination = ({
                 <Button
                   size="initial"
                   className="px-4 py-2 text-base"
-                  color="white"
+                  color="translucent"
                   border="primary"
                   variant="outlined"
                   onClick={() => navigateToPage(1)}
@@ -69,7 +69,7 @@ const StudyListPagination = ({
                 <Button
                   size="initial"
                   className="py-2 px-2 text-base"
-                  color="white"
+                  color="translucent"
                   border="primary"
                   variant="outlined"
                   onClick={() => navigateToPage(currentPage - 1)}
@@ -79,7 +79,7 @@ const StudyListPagination = ({
                 <Button
                   size="initial"
                   className="py-2 px-4 text-base"
-                  color="white"
+                  color="translucent"
                   border="primary"
                   variant="outlined"
                   onClick={() => navigateToPage(currentPage + 1)}

platform/viewer/src/routes/Debug.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Icon } from '@ohif/ui';
+
+// this is a debug component that is used to list various things that might
+// be useful for debugging such as cross origin errors, etc.
+function Debug() {
+  return (
+    <div style={{ width: '100%', height: '100%' }}>
+      <div className="h-screen w-screen flex justify-center items-center ">
+        <div className="py-8 px-8 mx-auto bg-secondary-dark drop-shadow-md space-y-2 rounded-lg">
+          <img
+            className="block mx-auto h-14"
+            src="./ohif-logo.svg"
+            alt="OHIF"
+          />
+          <div className="text-center space-y-2 pt-4">
+            <div className="flex flex-col justify-center items-center">
+              <p className="text-xl text-primary-active font-semibold mt-4">
+                Debug Information
+              </p>
+              <div className="flex space-x-2 mt-4 items-center">
+                <p className="text-md text-white">
+                  Cross Origin Isolated (COOP/COEP)
+                </p>
+                <Icon
+                  name={
+                    window.crossOriginIsolated
+                      ? 'notifications-success'
+                      : 'notifications-error'
+                  }
+                  className="w-5 h-5"
+                />
+                {!window.crossOriginIsolated && (
+                  <div className="text-md text-white flex-1">
+                    We use SharedArrayBuffer to render volume data (e.g., MPR).
+                    If you are seeing this message, it means that your browser
+                    has not enabled COOP/COEP. Please see the following link for
+                    more information:{' '}
+                    <a
+                      href="https://web.dev/coop-coep/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-primary-active"
+                    >
+                      Learn More
+                    </a>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Debug;

platform/viewer/src/routes/index.tsx

@@ -6,6 +6,7 @@ import { ErrorBoundary } from '@ohif/ui';
 import DataSourceWrapper from './DataSourceWrapper';
 import WorkList from './WorkList';
 import Local from './Local';
+import Debug from './Debug';
 import NotFound from './NotFound';
 import buildModeRoutes from './buildModeRoutes';
 import PrivateRoute from './PrivateRoute';
@@ -13,6 +14,16 @@ import PrivateRoute from './PrivateRoute';
 // TODO: Include "routes" debug route if dev build
 const bakedInRoutes = [
   // WORK LIST
+  {
+    path: '/',
+    children: DataSourceWrapper,
+    private: true,
+    props: { children: WorkList },
+  },
+  {
+    path: '/debug',
+    children: Debug,
+  },
   {
     path: '/local',
     children: Local,

yarn.lock

@@ -2383,36 +2383,28 @@
   resolved "https://registry.yarnpkg.com/@cornerstonejs/codec-openjpeg/-/codec-openjpeg-0.1.1.tgz#5bd1c52a33a425299299e970312731fa0cc2711b"
   integrity sha512-HOMMOLV6xy8O/agNGGvrl0a8DwShpBvWxAzEzv2pqq12d3r5z/3MyIgNA3Oj/8bIBVvvVXxh9RX7rMDRHJdowg==
 
-"@cornerstonejs/core@^0.21.4":
+"@cornerstonejs/core@^0.22.3":
-  version "0.21.4"
+  version "0.22.3"
-  resolved "https://registry.npmjs.org/@cornerstonejs/core/-/core-0.21.4.tgz#d1dab2c985c382495a8ec91a28f2d62872cdb350"
+  resolved "https://registry.npmjs.org/@cornerstonejs/core/-/core-0.22.3.tgz#57bf1482ce91d094342bf116636dea1335bff0b3"
-  integrity sha512-8D8QyK5bjqxefSVr3vLzsp2MUprmABAbX4qpvpp1XRmC76i1dKKR8Yo9G9jdreR5xwKvJN7pY6/n1F2ZYSN48w==
+  integrity sha512-WqV6TnsTpsgezSj9SmnSgGCdY3u/EwYr6nKD8KnRQI8lqRTmMIKzbcIvPWAKJ/sU+A9Da6A5tweZvrhrcSorGg==
   dependencies:
     detect-gpu "^4.0.45"
     lodash.clonedeep "4.5.0"
 
-"@cornerstonejs/core@^0.21.5":
+"@cornerstonejs/streaming-image-volume-loader@^0.6.11":
-  version "0.21.5"
+  version "0.6.11"
-  resolved "https://registry.npmjs.org/@cornerstonejs/core/-/core-0.21.5.tgz#2c172379378fdead2417973578160b433c1d0519"
+  resolved "https://registry.npmjs.org/@cornerstonejs/streaming-image-volume-loader/-/streaming-image-volume-loader-0.6.11.tgz#53800b12d588300320aa479eef24f168a38826bd"
-  integrity sha512-dbjGRzYbEySdYGwwONqM9P83Da7MUJDp0OY37mZ9BAhzQFhbCJPNC6GLa8ZbAQIwyTVopUVXlFme601bSVMVXw==
+  integrity sha512-UrgiWIsTSPFWEgCKxsKZUZ5hgir8ymdXes2UB8OT7yX6M4QeTmKi26nVNP21vebKMMPBootK//geSToqBoBs4Q==
   dependencies:
-    detect-gpu "^4.0.45"
+    "@cornerstonejs/core" "^0.22.3"
-    lodash.clonedeep "4.5.0"
-
-"@cornerstonejs/streaming-image-volume-loader@^0.6.5":
-  version "0.6.5"
-  resolved "https://registry.npmjs.org/@cornerstonejs/streaming-image-volume-loader/-/streaming-image-volume-loader-0.6.5.tgz#f3f2ab362bf494e4072a146b45acedce0197fb36"
-  integrity sha512-dowoZYz0tMVtuUQl2WIZjOC/2TC0zMgas8KtpVcxJcGEu9HWA9oatgPlY0WqtFniDU7Oxnyy7OqYawtEoSSwdw==
-  dependencies:
-    "@cornerstonejs/core" "^0.21.4"
     cornerstone-wado-image-loader "^4.2.1"
 
-"@cornerstonejs/tools@^0.29.8":
+"@cornerstonejs/tools@^0.30.6":
-  version "0.29.8"
+  version "0.30.6"
-  resolved "https://registry.npmjs.org/@cornerstonejs/tools/-/tools-0.29.8.tgz#b90bf1d195adb28f8871e1f8c59de397e3f12ea6"
+  resolved "https://registry.npmjs.org/@cornerstonejs/tools/-/tools-0.30.6.tgz#a6e5209f00fe00a919f20fe1387f06062b289a16"
-  integrity sha512-61aOYqXYwRRtv+tqcX7BMdFVlOq+YdV7sVLLsLz52RCXruPcfs7A8QWE+Y2PzBjNwX3I6G+fzcwsnKK3JRVY1Q==
+  integrity sha512-GEm2xWOlBwgS/3aZDBZObyu+KJESyOmkCo3hA+tellLKCVr207wBUUDndEmkNX6PJ/mR4o9Md6ZjMfNF7CAYiA==
   dependencies:
-    "@cornerstonejs/core" "^0.21.5"
+    "@cornerstonejs/core" "^0.22.3"
     lodash.clonedeep "4.5.0"
     lodash.get "^4.4.2"