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

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(
-    item[tag],
-    item[descriptorTag]
-  )
+  return _getPaletteColor(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 =>
-        c.charCodeAt(0)
+      const arraybuffer = Uint8Array.from(
+        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 =>
-      (paletteColorLookupTableData.palette = arrayBufferToPaletteColorLUT(val)));
+    return paletteColorLookupTableData
+      .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',
-    black:
+    translucent:
+      '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,