feat: cornerstone3D stack and volume viewports (#2787)

* feat: cs3d working stack viewport and tools (#19) * Squashed everything * fix weird react issue * fix eslint / prettier stuff * thumbnails work now with cpu rendering * feat: use new loadImageToCanvas in cs3d * make jump to measurement work * fix active thumbnail * fix measurement delete * fix window level presets * remove segmentation and sync groups for now * fix the dicom pdf and dicom video * fix cornerstone window assignment for cypress * apply review comments Co-authored-by: Erik <erik.sweed@gmail.com> * feat: cs3d tools and toolGroups (#20) * add more tools to work with cs3d mode * fix hotkeys * add stack manager usage for stach viewports * add image scrollbar * wip viewport overlay * fix toAnnotation schema for tools * fix the unnecessary size change that triggered resize * hanging protocol improvement to allow unmatched errors * study description matching for hanging protocol * fix the displaysetOptions to work * fix handle the active tool when a new viewport is added * fix separate toolGroups for mode * apply review comments * apply review comments * yarn lock * feat: overlay component (#21) * fix default displayset options * add viewport overlay * apply review comments * feat: loading and orientation indicators (#22) * add loading indicator * add orientation marker initial work * apply review comments * fix: orientation markers (#23) * finished the orientation markers * fix various broken cypress tests * apply review comments * update yarn lock * feat: re-working measurement tracking mode with cornerstone3d (#2805) * feat: cs3d working stack viewport and tools (#19) * Squashed everything * fix weird react issue * fix eslint / prettier stuff * thumbnails work now with cpu rendering * feat: use new loadImageToCanvas in cs3d * make jump to measurement work * fix active thumbnail * fix measurement delete * fix window level presets * remove segmentation and sync groups for now * fix the dicom pdf and dicom video * fix cornerstone window assignment for cypress * apply review comments Co-authored-by: Erik <erik.sweed@gmail.com> * feat: Add Measurement tracking mode with cs3D (#2789) * feat: first render for cornerstone3d tracked viewport * make tool active work * wip for SR extension * renamed dicom sr to cornerstone dicom sr * remove cornerstone from dicom pdf and video * move dicom sr logic to sr extension * feat: Add hydration for the length tool * fix SR display tool for length using cs3d * fix default config * fix: various bugs with sr viewport and tracking * fix promptying to continue tracking for when SR is created * feat: add keep trackign of unique identifiers * fix hydration for same imageIds * feat: Add SR toolGroup creation on modeEnter * feat: remove the need for separate mapper for SR hydration * add SR display for ellipse * handle hydration of elliptical ROI tool * remove cornerstone extension * add arrow mapping * feat: Add ArrowAnnotate SR display and hydration * apply review comments * apply review comments * move viewport labels to the viewportData * apply review comments * fix: integration cypress tests with cornerstone3D and add CINE tool (#2795) * fix: integration cypress tests with cornerstone3D * revert to addOrUpdate as it makes more sense * fix local drag and drop * fix tests * move dicomLoaderService to cornerstone extension * fix various import bugs * fix bug for local PT series * fix various unit tests * bump cs3d versions * add angle and magnify tool * bump dependencies to avoid broken peerDeps * feat: add initial work for capture using cs3d * feat: show annotations on the image capture * feat: add svg layer export * feat: Add CINE Tool * feat: remove unnecessary viewport rendering for cine state changes Co-authored-by: Erik Ziegler <erik.sweed@gmail.com> * docs: modify and improve documentation (#2800) * cleanup docs versionings * feat: Add all version explanations * version docs for 3.0 * wip for changing docs * wip for updated docs * add utility module documentation * fix demo with nohoisting of history * add slides and video to resources * apply review comments * fix: drag and drop SR into SR viewport (#2803) * update yarn lock Co-authored-by: Erik <erik.sweed@gmail.com> * update pathnames to match v3-stable * update the e2e pathname * fix: various bugs with regard to tracking workflow (#2811) * fix: various issues with measurement panel * fix: update default tool style for annotations * fix: annotatoin label getting removed * feat: Add backward compatibility for SR hydration with legacy cornerstone * fix: cursors and ellipse ROI max style * fix: ArrowAnnotate SRDisplay * apply review comments * bump package versions * fix: bugin rehydration of SR * fix: e2e tests * fix active viewport thickness and arrowTool ui * add readme for measurement tracking * use uploaded image for readme * add back images * try to fix e2e test * fix: window level presets hotkeys * Update README.md * update yarn lock * feat: volume api and TMTV mode (#2817) * feat: volumeAPI and TMTV mode * feat: use cs3d cache service to obtain viewportData * wip for volume api * wip: fusion viewport * feat: add blend mode option * wip for image scrollbar * fix drag and drop thumbnail * wip for image scrollbar for voluems * fix: element mismatch bug for scroll * feat: Add image scrollbar to volumes * feat: add syncGroups to volume api * feat: add tmtv mode initial setup * feat: add initial image options for the stack viewports * feat: Add custom load strategy for volume viewports via HP * apply review comments fix: Jump presets cs3d (#2812) * feat: Add JumpPreset to OHIF for Cornerstone3D * fix: accessing viewport service from servicesManager feat: volume API and TMTV mode (#2814) * fix: do not display overlays on mip viewports * feat: add optional disableCommands for toggle buttons * fix: toggleCrossharis * feat: config the crosshairs * feat: add PetSUV Panel for changing metadata * feat: initial work for the rectangleROIThreshold panel * wip: measurement service * roi threshold working * feat: Add displayText to segmentations * feat: add remove segmentation * feat: add csv export * feat: add RT export for annotations in tmtv mode * fix: fusion to use pt in tmtv mode and measuremet mappings * fix: various bugs * apply review comments * apply review comments * feat: add fusion color maps * add readme to tmtv mode * Update README.md * fix: try to fix build * fix unit tests * Update README.md * feat: add about to the panel * fix: changing strategy in roi panel * apply review comments * update package versions * wip for stackPrefetch * fix: cornerstone3d hydration and renaming (#2818) * update readme * renamed cornerstone extension * wip for renaming cornerstone3D variables * wip for renaming cornerstone3D variables * wip for fixing bugs for SR viewport * fix: jumpToMeasurement and initial label after hydration * fix: fileName capitalization * feat: use the new prefetch stack in the cs3d (#2820) * feat: use the new prefetch stack in the cs3d * use viewport scroll api for stack viewport * fix cine stop when scrollbar changes * feat: use new prefetch events * fix loading state to not show repeatedly * fix: various bugs for tmtv mode thresholding and new icons (#2823) * feat: make tmtv mode available in worklist * feat: add new icons for tmtv mode * feat: add fusion color icon * fix: parallel scale calculation * fix: bump Cornerstone to get large image support working * fix: Fix issues with CPU viewport flipping, including config files * fix: bump cornerstone to fix magnify tool * fix: Bump Cornerstone version to fix resetCamera issue in StackViewport * ci: Add _headers file to enable CORS headers for Netlify Drag/Drop deploys * fix: WADO-URI was not working. PET Metadata was coming from the wrong place. Fixed some minor React errors * feat(OHIF):Allow modes and extensions to be added after commpile time. (#2838) Also works with the compile time add that the existing cli uses, so that both build types work. Eric and I agreed this doesn't change existing functionality, but is almost entirely build issues/fixes. * bump: dependency versions to fix hydration bugs (#2848) * bump: dcmjs version to fix hydration bugs * try to fix tests * bump dependency versions Co-authored-by: Alireza <ar.sedghi@gmail.com> Co-authored-by: Bill Wallace <wayfarer3130@gmail.com>
2022-07-27 12:39:04 -04:00
1 parent 86dcaf6293
commit bd1c38c00c
@@ -1,10 +1,10 @@
 // External
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import i18n from '@ohif/i18n';
 import { I18nextProvider } from 'react-i18next';
 import { BrowserRouter } from 'react-router-dom';
-import Compose from './routes/Mode/Compose.js';
+import Compose from './routes/Mode/Compose.tsx';

 import {
  DialogProvider,
@@ -22,12 +22,26 @@ import {
 import { AppConfigProvider } from '@state';
 import createRoutes from './routes';
 import appInit from './appInit.js';
-import OpenIdConnectRoutes from './utils/OpenIdConnectRoutes.jsx';
+import OpenIdConnectRoutes from './utils/OpenIdConnectRoutes.tsx';

 let commandsManager, extensionManager, servicesManager, hotkeysManager;

 function App({ config, defaultExtensions, defaultModes }) {
-  const init = appInit(config, defaultExtensions, defaultModes);
+  const [init, setInit] = useState(null);
+
+  useEffect(() => {
+    const run = async () => {
+      appInit(config, defaultExtensions, defaultModes)
+        .then(setInit)
+        .catch(console.error);
+    };
+
+    run();
+  }, []);
+
+  if (!init) {
+    return null;
+  }

  // Set above for named export
  commandsManager = init.commandsManager;
@@ -45,7 +59,9 @@ function App({ config, defaultExtensions, defaultModes }) {
    dataSources,
    extensionManager,
    servicesManager,
+    commandsManager,
    hotkeysManager,
+    commandsManager,
    routerBasename,
  });
  const {
@@ -12,6 +12,7 @@ import {
  ToolBarService,
  ViewportGridService,
  HangingProtocolService,
+  SegmentationService,
  CineService,
  UserAuthenticationService,
  errorHandler,
@@ -22,7 +23,7 @@ import {
 * @param {object|func} appConfigOrFunc - application configuration, or a function that returns application configuration
 * @param {object[]} defaultExtensions - array of extension objects
 */
-function appInit(appConfigOrFunc, defaultExtensions, defaultModes) {
+async function appInit(appConfigOrFunc, defaultExtensions, defaultModes) {
  const appConfig = {
    ...(typeof appConfigOrFunc === 'function'
      ? appConfigOrFunc({ servicesManager })
@@ -31,12 +32,6 @@ function appInit(appConfigOrFunc, defaultExtensions, defaultModes) {

  const commandsManagerConfig = {
    getAppState: () => {},
-    /** Used by commands to determine active context */
-    getActiveContexts: () => [
-      'VIEWER',
-      'DEFAULT',
-      'ACTIVE_VIEWPORT::CORNERSTONE',
-    ],
  };

  const commandsManager = new CommandsManager(commandsManagerConfig);
@@ -59,6 +54,7 @@ function appInit(appConfigOrFunc, defaultExtensions, defaultModes) {
    ToolBarService,
    ViewportGridService,
    HangingProtocolService,
+    SegmentationService,
    CineService,
    UserAuthenticationService,
  ]);
@@ -73,7 +69,7 @@ function appInit(appConfigOrFunc, defaultExtensions, defaultModes) {
   * Example: [ext1, ext2, ext3]
   * Example2: [[ext1, config], ext2, [ext3, config]]
   */
-  extensionManager.registerExtensions(
+  await extensionManager.registerExtensions(
    [...defaultExtensions, ...appConfig.extensions],
    appConfig.dataSources
  );
@@ -1,286 +0,0 @@
-/**
- * CSS Grid Reference: http://grid.malven.co/
- */
-import React, { useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { ViewportGrid, ViewportPane, useViewportGrid } from '@ohif/ui';
-import EmptyViewport from './EmptyViewport';
-import classNames from 'classnames';
-
-function ViewerViewportGrid(props) {
-  const { servicesManager, viewportComponents, dataSource } = props;
-  const [viewportGrid, viewportGridService] = useViewportGrid();
-
-  const {
-    numCols,
-    numRows,
-    activeViewportIndex,
-    viewports,
-    cachedLayout,
-  } = viewportGrid;
-
-  // TODO -> Need some way of selecting which displaySets hit the viewports.
-  const {
-    DisplaySetService,
-    MeasurementService,
-    HangingProtocolService,
-  } = servicesManager.services;
-
-
-  const updateDisplaysetForViewports = useCallback(
-    (displaySets) => {
-      const [
-        matchDetails,
-        hpAlreadyApplied,
-      ] = HangingProtocolService.getState();
-
-      if (!matchDetails.length) return;
-      // Match each viewport individually
-
-      const numViewports = viewportGrid.numRows * viewportGrid.numCols;
-      for (let i = 0; i < numViewports; i++) {
-        if (hpAlreadyApplied[i] === true) {
-          continue;
-        }
-
-        // if current viewport doesn't have a match
-        if (matchDetails[i] === undefined) return
-
-        const { SeriesInstanceUID } = matchDetails[i];
-        const matchingDisplaySet = displaySets.find(ds => {
-          return ds.SeriesInstanceUID === SeriesInstanceUID;
-        });
-
-        if (!matchingDisplaySet) {
-          continue;
-        }
-
-        viewportGridService.setDisplaysetForViewport({
-          viewportIndex: i,
-          displaySetInstanceUID: matchingDisplaySet.displaySetInstanceUID,
-        });
-
-        HangingProtocolService.setHangingProtocolAppliedForViewport(i);
-      }
-    },
-    [viewportGrid, numRows, numCols],
-  )
-
-  // Using Hanging protocol engine to match the displaySets
-  useEffect(() => {
-    const { unsubscribe } = DisplaySetService.subscribe(
-      DisplaySetService.EVENTS.DISPLAY_SETS_ADDED,
-      eventData => {
-        const { displaySetsAdded } = eventData;
-        updateDisplaysetForViewports(displaySetsAdded)
-      }
-    );
-
-    return () => {
-      unsubscribe();
-    };
-  }, [viewportGrid]);
-
-
-
-  // Changing the Hanging protocol while viewing
-  useEffect(() => {
-    const displaySets = DisplaySetService.getActiveDisplaySets();
-    updateDisplaysetForViewports(displaySets)
-  }, [viewportGrid])
-
-
-
-
-  // Layout change based on hanging protocols
-  useEffect(() => {
-    const { unsubscribe } = HangingProtocolService.subscribe(
-      HangingProtocolService.EVENTS.NEW_LAYOUT,
-      ({ numRows, numCols }) => {
-        viewportGridService.setLayout({ numRows, numCols });
-      }
-    );
-
-    return () => {
-      unsubscribe();
-    };
-  }, [viewports]);
-
-
-  useEffect(() => {
-    const { unsubscribe } = MeasurementService.subscribe(
-      MeasurementService.EVENTS.JUMP_TO_MEASUREMENT,
-      ({ viewportIndex, measurement }) => {
-        const referencedDisplaySetInstanceUID =
-          measurement.displaySetInstanceUID;
-
-        const viewportsDisplaySetInstanceUIDs = viewports.map(
-          vp => vp.displaySetInstanceUID
-        );
-
-        // if we already have the displayset in one of the viewports
-        if (
-          viewportsDisplaySetInstanceUIDs.indexOf(
-            referencedDisplaySetInstanceUID
-          ) > -1
-        ) {
-          return;
-        }
-
-        // If not in any of the viewports, hang it inside the active viewport
-        viewportGridService.setDisplaysetForViewport({
-          viewportIndex,
-          displaySetInstanceUID: referencedDisplaySetInstanceUID,
-        });
-      }
-    );
-
-    return () => {
-      unsubscribe();
-    };
-  }, [viewports]);
-
-  const onDoubleClick = viewportIndex => {
-    // TODO -> Disabled for now.
-    // onNewImage on a cornerstone viewport is firing setDisplaySetForViewport.
-    // Which it really really shouldn't. We need a larger fix for jump to
-    // measurements and all cornerstone "imageIndex" state to fix this.
-    if (cachedLayout) {
-      viewportGridService.set({
-        numCols: cachedLayout.numCols,
-        numRows: cachedLayout.numRows,
-        activeViewportIndex: cachedLayout.activeViewportIndex,
-        viewports: cachedLayout.viewports,
-        cachedLayout: null,
-      });
-
-      return;
-    }
-
-    const cachedViewports = viewports.map(viewport => {
-      return {
-        displaySetInstanceUID: viewport.displaySetInstanceUID,
-      };
-    });
-
-    viewportGridService.set({
-      numCols: 1,
-      numRows: 1,
-      activeViewportIndex: 0,
-      viewports: [
-        {
-          displaySetInstanceUID: viewports[viewportIndex].displaySetInstanceUID,
-          imageIndex: undefined,
-        },
-      ],
-      cachedLayout: {
-        numCols,
-        numRows,
-        viewports: cachedViewports,
-        activeViewportIndex: viewportIndex,
-      },
-    });
-  };
-
-  const onDropHandler = (viewportIndex, { displaySetInstanceUID }) => {
-    viewportGridService.setDisplaysetForViewport({
-      viewportIndex,
-      displaySetInstanceUID,
-    });
-  };
-
-  const getViewportPanes = () => {
-    const viewportPanes = [];
-    const numViewportPanes = numCols * numRows;
-
-    for (let i = 0; i < numViewportPanes; i++) {
-      const viewportIndex = i;
-      const isActive = activeViewportIndex === viewportIndex;
-      const paneMetadata = viewports[i] || {};
-      const { displaySetInstanceUID } = paneMetadata;
-
-      const displaySet =
-        DisplaySetService.getDisplaySetByUID(displaySetInstanceUID) || {};
-
-      const ViewportComponent = _getViewportComponent(
-        displaySet.SOPClassHandlerId,
-        viewportComponents
-      );
-
-      const onInterationHandler = event => {
-        if (isActive) return;
-
-        if (event) {
-          event.preventDefault();
-          event.stopPropagation();
-        }
-
-        viewportGridService.setActiveViewportIndex(viewportIndex);
-      };
-
-      // TEMP -> Double click disabled for now
-      // onDoubleClick={() => onDoubleClick(viewportIndex)}
-
-      viewportPanes[i] = (
-        <ViewportPane
-          key={viewportIndex}
-          className="m-1"
-          acceptDropsFor="displayset"
-          onDrop={onDropHandler.bind(null, viewportIndex)}
-          onInteraction={onInterationHandler}
-          isActive={isActive}
-        >
-          <div
-            className={classNames('h-full w-full flex flex-col', {
-              'pointer-events-none': !isActive,
-            })}
-          >
-            <ViewportComponent
-              displaySet={displaySet}
-              viewportIndex={viewportIndex}
-              dataSource={dataSource}
-            />
-          </div>
-        </ViewportPane>
-      );
-    }
-
-    return viewportPanes;
-  };
-
-  if (!numCols || !numCols) {
-    return null;
-  }
-
-  return (
-    <ViewportGrid numRows={numRows} numCols={numCols}>
-      {/* {ViewportPanes} */}
-      {getViewportPanes()}
-    </ViewportGrid>
-  );
-}
-
-ViewerViewportGrid.propTypes = {
-  viewportComponents: PropTypes.array.isRequired,
-};
-
-ViewerViewportGrid.defaultProps = {
-  viewportComponents: [],
-};
-
-function _getViewportComponent(SOPClassHandlerId, viewportComponents) {
-  if (!SOPClassHandlerId) {
-    return EmptyViewport;
-  }
-
-  for (let i = 0; i < viewportComponents.length; i++) {
-    if (
-      viewportComponents[i].displaySetsToDisplay.includes(SOPClassHandlerId)
-    ) {
-      const { component } = viewportComponents[i];
-      return component;
-    }
-  }
-}
-
-export default ViewerViewportGrid;
@@ -0,0 +1,381 @@
+import React, { useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { ViewportGrid, ViewportPane, useViewportGrid } from '@ohif/ui';
+import EmptyViewport from './EmptyViewport';
+import classNames from 'classnames';
+
+function ViewerViewportGrid(props) {
+  const { servicesManager, viewportComponents, dataSource } = props;
+  const [viewportGrid, viewportGridService] = useViewportGrid();
+
+  const { numCols, numRows, activeViewportIndex, viewports } = viewportGrid;
+
+  // TODO -> Need some way of selecting which displaySets hit the viewports.
+  const {
+    DisplaySetService,
+    MeasurementService,
+    HangingProtocolService,
+  } = servicesManager.services;
+
+  /**
+   * This callback runs only after displaySets have changed (created and added or modified)
+   */
+  const updateDisplaySetsForViewports = useCallback(
+    availableDisplaySets => {
+      if (!availableDisplaySets.length) {
+        return;
+      }
+
+      const [
+        matchDetails,
+        hpAlreadyApplied,
+      ] = HangingProtocolService.getState();
+
+      if (!matchDetails.length) {
+        return;
+      }
+
+      // Match each viewport individually
+      const numViewports = viewportGrid.numRows * viewportGrid.numCols;
+      for (let i = 0; i < numViewports; i++) {
+        if (hpAlreadyApplied[i] === true) {
+          continue;
+        }
+
+        // if current viewport doesn't have a match
+        if (matchDetails[i] === undefined) return;
+
+        const { displaySetsInfo, viewportOptions } = matchDetails[i];
+
+        const displaySetUIDsToHang = [];
+        const displaySetUIDsToHangOptions = [];
+        displaySetsInfo.forEach(({ SeriesInstanceUID, displaySetOptions }) => {
+          const matchingDisplaySet = availableDisplaySets.find(ds => {
+            return ds.SeriesInstanceUID === SeriesInstanceUID;
+          });
+
+          if (!matchingDisplaySet) {
+            return;
+          }
+
+          displaySetUIDsToHang.push(matchingDisplaySet.displaySetInstanceUID);
+          displaySetUIDsToHangOptions.push(displaySetOptions);
+        });
+
+        if (!displaySetUIDsToHang.length) {
+          continue;
+        }
+
+        viewportGridService.setDisplaySetsForViewport({
+          viewportIndex: i,
+          displaySetInstanceUIDs: displaySetUIDsToHang,
+          viewportOptions,
+          displaySetOptions: displaySetUIDsToHangOptions,
+        });
+
+        // During setting displaySets for viewport, we need to update the hanging protocol
+        // but some viewports contain more than one display set (fusion), and their displaySet
+        // will not be available at the time of setting displaySets for viewport. So we need to
+        // update the hanging protocol after making sure all the matched display sets are available
+        // and set on the viewport
+        if (displaySetUIDsToHang.length === displaySetsInfo.length) {
+          // The following will set the hpAlreadyApplied state
+          HangingProtocolService.setHangingProtocolAppliedForViewport(i);
+        }
+      }
+    },
+    [viewportGrid, numRows, numCols]
+  );
+
+  useEffect(() => {
+    const displaySets = DisplaySetService.getActiveDisplaySets();
+    updateDisplaySetsForViewports(displaySets);
+  }, [numRows, numCols]);
+
+  // Layout change based on hanging protocols
+  useEffect(() => {
+    const { unsubscribe } = HangingProtocolService.subscribe(
+      HangingProtocolService.EVENTS.NEW_LAYOUT,
+      ({ layoutType, numRows, numCols, layoutOptions }) => {
+        viewportGridService.setLayout({
+          numRows,
+          numCols,
+          layoutType,
+          layoutOptions,
+        });
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [viewports]);
+
+  // Using Hanging protocol engine to match the displaySets
+  useEffect(() => {
+    const { unsubscribe } = DisplaySetService.subscribe(
+      DisplaySetService.EVENTS.DISPLAY_SETS_CHANGED,
+      activeDisplaySets => {
+        updateDisplaySetsForViewports(activeDisplaySets);
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [viewports]);
+
+  useEffect(() => {
+    const { unsubscribe } = MeasurementService.subscribe(
+      MeasurementService.EVENTS.JUMP_TO_MEASUREMENT,
+      ({ viewportIndex, measurement }) => {
+        const referencedDisplaySetInstanceUID =
+          measurement.displaySetInstanceUID;
+
+        // if we already have the displaySet in one of the viewports
+        // Todo: handle fusion display sets?
+        for (const viewport of viewports) {
+          const isMatch = viewport.displaySetInstanceUIDs.includes(
+            referencedDisplaySetInstanceUID
+          );
+          if (isMatch) {
+            return;
+          }
+        }
+
+        const displaySet = DisplaySetService.getDisplaySetByUID(
+          referencedDisplaySetInstanceUID
+        );
+
+        let imageIndex;
+        // jump straight to the initial image index if we can
+        if (displaySet.images && measurement.SOPInstanceUID) {
+          imageIndex = displaySet.images.findIndex(
+            image => image.SOPInstanceUID === measurement.SOPInstanceUID
+          );
+        }
+
+        // If not in any of the viewports, hang it inside the active viewport
+        viewportGridService.setDisplaySetsForViewport({
+          viewportIndex,
+          displaySetInstanceUIDs: [referencedDisplaySetInstanceUID],
+          viewportOptions: {
+            initialImageOptions: {
+              index: imageIndex,
+            },
+          },
+        });
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [viewports]);
+
+  /**
+  //Changing the Hanging protocol while viewing
+  useEffect(() => {
+    const displaySets = DisplaySetService.getActiveDisplaySets();
+    updateDisplaySetsForViewports(displaySets);
+  }, [viewports]);
+
+
+  // subscribe to displayset metadata changes
+  useEffect(() => {
+    const { unsubscribe } = DisplaySetService.subscribe(
+      DisplaySetService.EVENTS.DISPLAY_SETS_METADATA_UPDATED,
+      displaySets => {
+        // Todo: properly refresh the viewportGrid to use the new displaySet
+        // with the new metadata.
+        setState({});
+      }
+    );
+    return () => {
+      unsubscribe();
+    };
+  }, [viewports]);
+
+  const onDoubleClick = viewportIndex => {
+    // TODO -> Disabled for now.
+    // onNewImage on a cornerstone viewport is firing setDisplaySetsForViewport.
+    // Which it really really shouldn't. We need a larger fix for jump to
+    // measurements and all cornerstone "imageIndex" state to fix this.
+    if (cachedLayout) {
+      viewportGridService.set({
+        numCols: cachedLayout.numCols,
+        numRows: cachedLayout.numRows,
+        activeViewportIndex: cachedLayout.activeViewportIndex,
+        viewports: cachedLayout.viewports,
+        cachedLayout: null,
+      });
+
+      return;
+    }
+
+    const cachedViewports = viewports.map(viewport => {
+      return {
+        displaySetInstanceUID: viewport.displaySetInstanceUID,
+      };
+    });
+
+    viewportGridService.set({
+      numCols: 1,
+      numRows: 1,
+      activeViewportIndex: 0,
+      viewports: [
+        {
+          displaySetInstanceUID: viewports[viewportIndex].displaySetInstanceUID,
+          imageIndex: undefined,
+        },
+      ],
+      cachedLayout: {
+        numCols,
+        numRows,
+        viewports: cachedViewports,
+        activeViewportIndex: viewportIndex,
+      },
+    });
+  };
+
+  */
+
+  const onDropHandler = (viewportIndex, { displaySetInstanceUID }) => {
+    viewportGridService.setDisplaySetsForViewport({
+      viewportIndex,
+      displaySetInstanceUIDs: [displaySetInstanceUID],
+    });
+  };
+
+  const getViewportPanes = useCallback(() => {
+    const viewportPanes = [];
+
+    for (let i = 0; i < viewports.length; i++) {
+      const viewportIndex = i;
+      const isActive = activeViewportIndex === viewportIndex;
+      const paneMetadata = viewports[i] || {};
+      const {
+        displaySetInstanceUIDs,
+        viewportOptions,
+        displaySetOptions, // array of options for each display set in the viewport
+        x: viewportX,
+        y: viewportY,
+        width: viewportWidth,
+        height: viewportHeight,
+        viewportLabel,
+      } = paneMetadata;
+
+      const displaySetInstanceUIDsToUse = displaySetInstanceUIDs || [];
+
+      // This is causing the viewport components re-render when the activeViewportIndex changes
+      const displaySets = displaySetInstanceUIDsToUse.map(
+        displaySetInstanceUID => {
+          return (
+            DisplaySetService.getDisplaySetByUID(displaySetInstanceUID) || {}
+          );
+        }
+      );
+
+      const ViewportComponent = _getViewportComponent(
+        displaySets,
+        viewportComponents
+      );
+
+      // look inside displaySets to see if they need reRendering
+      const displaySetsNeedsRerendering = displaySets.some(displaySet => {
+        return displaySet.needsRerendering;
+      });
+
+      const onInteractionHandler = event => {
+        if (isActive) return;
+
+        if (event) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+
+        viewportGridService.setActiveViewportIndex(viewportIndex);
+      };
+
+      // TEMP -> Double click disabled for now
+      // onDoubleClick={() => onDoubleClick(viewportIndex)}
+
+      viewportPanes[i] = (
+        <ViewportPane
+          key={viewportIndex}
+          acceptDropsFor="displayset"
+          onDrop={onDropHandler.bind(null, viewportIndex)}
+          onInteraction={onInteractionHandler}
+          customStyle={{
+            position: 'absolute',
+            top: viewportY * 100 + 0.2 + '%',
+            left: viewportX * 100 + 0.2 + '%',
+            width: viewportWidth * 100 - 0.3 + '%',
+            height: viewportHeight * 100 - 0.3 + '%',
+          }}
+          isActive={isActive}
+        >
+          <div
+            className={classNames('h-full w-full flex flex-col', {
+              'pointer-events-none': !isActive,
+            })}
+          >
+            <ViewportComponent
+              displaySets={displaySets}
+              viewportIndex={viewportIndex}
+              viewportLabel={viewports.length > 1 ? viewportLabel : ''}
+              dataSource={dataSource}
+              viewportOptions={viewportOptions}
+              displaySetOptions={displaySetOptions}
+              needsRerendering={displaySetsNeedsRerendering}
+            />
+          </div>
+        </ViewportPane>
+      );
+    }
+
+    return viewportPanes;
+  }, [viewports, activeViewportIndex, viewportComponents, dataSource]);
+
+  /**
+   * Loading indicator until numCols and numRows are gotten from the HangingProtocolService
+   */
+  if (!numRows || !numCols) {
+    return null;
+  }
+
+  return (
+    <ViewportGrid numRows={numRows} numCols={numCols}>
+      {/* {ViewportPanes} */}
+      {getViewportPanes()}
+    </ViewportGrid>
+  );
+}
+
+ViewerViewportGrid.propTypes = {
+  viewportComponents: PropTypes.array.isRequired,
+};
+
+ViewerViewportGrid.defaultProps = {
+  viewportComponents: [],
+};
+
+function _getViewportComponent(displaySets, viewportComponents) {
+  if (!displaySets || !displaySets.length) {
+    return EmptyViewport;
+  }
+
+  // Todo: Do we have a viewport that has two different SOPClassHandlerIds?
+  const SOPClassHandlerId = displaySets[0].SOPClassHandlerId;
+
+  for (let i = 0; i < viewportComponents.length; i++) {
+    if (
+      viewportComponents[i].displaySetsToDisplay.includes(SOPClassHandlerId)
+    ) {
+      const { component } = viewportComponents[i];
+      return component;
+    }
+  }
+}
+
+export default ViewerViewportGrid;
@@ -2,7 +2,7 @@
 * Entry point for development and production PWA builds.
 */
 import 'regenerator-runtime/runtime';
-import App from './App.jsx';
+import App from './App.tsx';
 import React from 'react';
 import ReactDOM from 'react-dom';

@@ -15,19 +15,21 @@ import ReactDOM from 'react-dom';
 * pluginImports.js imports all of the modes and extensions and adds them
 * to the window for processing.
 */
-import './pluginImports.js';
+import loadDynamicImports from './pluginImports.js';

-/**
- * Combine our appConfiguration with installed extensions and modes.
- * In the future appConfiguration may contain modes added at runtime.
- *  */
-const appProps = {
-  config: window ? window.config : {},
-  defaultExtensions: window.extensions,
-  defaultModes: window.modes,
-};
+loadDynamicImports().then(() => {
+  /**
+   * Combine our appConfiguration with installed extensions and modes.
+   * In the future appConfiguration may contain modes added at runtime.
+   *  */
+  const appProps = {
+    config: window ? window.config : {},
+    defaultExtensions: window.extensions,
+    defaultModes: window.modes,
+  };

-/** Create App */
-const app = React.createElement(App, appProps, null);
-/** Render */
-ReactDOM.render(app, document.getElementById('root'));
+  /** Create App */
+  const app = React.createElement(App, appProps, null);
+  /** Render */
+  ReactDOM.render(app, document.getElementById('root'));
+});
@@ -11,8 +11,7 @@ function CallbackPage({ userManager, onRedirectSuccess }) {
    .then(user => onRedirectSuccess(user))
    .catch(error => onRedirectError(error));

-  // todo: add i18n (or return null?)
-  return <div>Redirecting...</div>;
+  return null;
 }

 CallbackPage.propTypes = {
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { MODULE_TYPES } from '@ohif/core';
 //
-import { extensionManager } from '../App.jsx';
+import { extensionManager } from '../App.tsx';
 import { useParams, useLocation } from 'react-router';

 /**
@@ -35,7 +35,7 @@ function DataSourceWrapper(props) {
  // Grabbing first for now - should get active?
  const name = webApiDataSources[0].name;
  // TODO: Why does this return an array?
-  const dataSource = extensionManager.getDataSources(name)[0]
+  const dataSource = extensionManager.getDataSources(name)[0];

  // Route props --> studies.mapParams
  // mapParams --> studies.search
@@ -86,12 +86,13 @@ function DataSourceWrapper(props) {
      const newOffset =
        Math.floor(
          (queryFilterValues.pageNumber * queryFilterValues.resultsPerPage) /
-          STUDIES_LIMIT
+            STUDIES_LIMIT
        ) *
        (STUDIES_LIMIT - 1);
      const isLocationUpdated = data.location !== location;
-      const isDataInvalid = !isSamePage || !isLoading &&
-        (newOffset !== previousOffset || isLocationUpdated);
+      const isDataInvalid =
+        !isSamePage ||
+        (!isLoading && (newOffset !== previousOffset || isLocationUpdated));

      if (isDataInvalid) {
        getData();
@@ -1,14 +1,14 @@
-import React, { useEffect, useRef } from 'react'
-import classnames from 'classnames'
+import React, { useEffect, useRef } from 'react';
+import classnames from 'classnames';
 import { useNavigate } from 'react-router-dom';
-import { MODULE_TYPES } from '@ohif/core'
+import { MODULE_TYPES } from '@ohif/core';

-import Dropzone from 'react-dropzone'
-import filesToStudies from './filesToStudies'
+import Dropzone from 'react-dropzone';
+import filesToStudies from './filesToStudies';

-import { extensionManager } from '../../App.jsx'
+import { extensionManager } from '../../App.tsx';

-import { Icon, Button } from '@ohif/ui'
+import { Icon, Button } from '@ohif/ui';

 const getLoadButton = (onDrop, text, isDir) => {
  return (
@@ -21,7 +21,7 @@ const getLoadButton = (onDrop, text, isDir) => {
            disabled={false}
            endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info
            className={classnames('font-bold', 'ml-2')}
-            onClick={() => { }}
+            onClick={() => {}}
          >
            {text}
            {isDir ? (
@@ -36,41 +36,42 @@ const getLoadButton = (onDrop, text, isDir) => {
          </Button>
        </div>
      )}
-    </Dropzone>)
-}
+    </Dropzone>
+  );
+};

 function Local() {
  const navigate = useNavigate();
-  const dropzoneRef = useRef()
+  const dropzoneRef = useRef();

  // Initializing the dicom local dataSource
-  const dataSourceModules = extensionManager.modules[MODULE_TYPES.DATA_SOURCE]
+  const dataSourceModules = extensionManager.modules[MODULE_TYPES.DATA_SOURCE];
  const localDataSources = dataSourceModules.reduce((acc, curr) => {
-    const mods = []
-    curr.module.forEach((mod) => {
+    const mods = [];
+    curr.module.forEach(mod => {
      if (mod.type === 'localApi') {
-        mods.push(mod)
+        mods.push(mod);
      }
-    })
-    return acc.concat(mods)
-  }, [])
+    });
+    return acc.concat(mods);
+  }, []);

-  const firstLocalDataSource = localDataSources[0]
-  const dataSource = firstLocalDataSource.createDataSource({})
+  const firstLocalDataSource = localDataSources[0];
+  const dataSource = firstLocalDataSource.createDataSource({});

-  const onDrop = async (acceptedFiles) => {
-    const studies = await filesToStudies(acceptedFiles, dataSource)
+  const onDrop = async acceptedFiles => {
+    const studies = await filesToStudies(acceptedFiles, dataSource);
    // Todo: navigate to work list and let user select a mode
-    navigate(`/viewer/dicomlocal?StudyInstanceUIDs=${studies[0]}`)
-  }
+    navigate(`/viewer/dicomlocal?StudyInstanceUIDs=${studies[0]}`);
+  };

  // Set body style
  useEffect(() => {
-    document.body.classList.add('bg-black')
+    document.body.classList.add('bg-black');
    return () => {
-      document.body.classList.remove('bg-black')
-    }
-  }, [])
+      document.body.classList.remove('bg-black');
+    };
+  }, []);

  return (
    <Dropzone ref={dropzoneRef} onDrop={onDrop} noClick>
@@ -104,7 +105,7 @@ function Local() {
        </div>
      )}
    </Dropzone>
-  )
+  );
 }

-export default Local
+export default Local;
@@ -61,6 +61,7 @@ export default function ModeRoute({
  dataSourceName,
  extensionManager,
  servicesManager,
+  commandsManager,
  hotkeysManager,
 }) {
  // Parse route params/querystring
@@ -197,16 +198,20 @@ export default function ModeRoute({
      return;
    }
    // TODO: For some reason this is running before the Providers
-    // are calling setServiceImplementationf
-    // TOOD -> iterate through services.
+    // are calling setServiceImplementation
+    // TODO -> iterate through services.

    // Extension

    // Add SOPClassHandlers to a new SOPClassManager.
    DisplaySetService.init(extensionManager, sopClassHandlers);

-    extensionManager.onModeEnter();
-    mode?.onModeEnter({ servicesManager, extensionManager });
+    extensionManager.onModeEnter({
+      servicesManager,
+      extensionManager,
+      commandsManager,
+    });
+    mode?.onModeEnter({ servicesManager, extensionManager, commandsManager });

    // Adding hanging protocols of extensions after onModeEnter since
    // it will reset the protocols
@@ -214,6 +219,7 @@ export default function ModeRoute({
      const hangingProtocolModule = extensionManager.getModuleEntry(
        extensionProtocols
      );
+
      if (hangingProtocolModule?.protocols) {
        HangingProtocolService.addProtocols(hangingProtocolModule.protocols);
      }
@@ -232,8 +238,6 @@ export default function ModeRoute({

      return await defaultRouteInit({
        servicesManager,
-        extensionManager,
-        hotkeysManager,
        studyInstanceUIDs,
        dataSource,
      });
@@ -22,8 +22,7 @@ function SignoutCallbackComponent({ userManager }) {
    .then(user => onRedirectSuccess(user))
    .catch(error => onRedirectError(error));

-  // todo: add i18n
-  return <div>Redirecting...</div>;
+  return null;
 }

 SignoutCallbackComponent.propTypes = {
@@ -12,8 +12,6 @@ import { useAppConfig } from '@state';
 import { useDebounce, useQuery } from '@hooks';
 import { utils, hotkeys } from '@ohif/core';

-const { sortBySeriesDate } = utils;
-
 import {
  Icon,
  StudyListExpandedRow,
@@ -31,6 +29,8 @@ import {

 import i18n from '@ohif/i18n';

+const { sortBySeriesDate } = utils;
+
 const { availableLanguages, defaultLanguage, currentLanguage } = i18n;

 const seriesInStudiesMap = new Map();
@@ -309,6 +309,8 @@ function WorkList({
          gridCol: 4,
        },
      ],
+      // Todo: This is actually running for all rows, even if they are
+      // not clicked on.
      expandedContent: (
        <StudyListExpandedRow
          seriesTableColumns={{
@@ -334,7 +336,6 @@ function WorkList({
            const isFirst = i === 0;

            const isValidMode = mode.isValidMode({ modalities });
-
            // TODO: Modes need a default/target route? We mostly support a single one for now.
            // We should also be using the route path, but currently are not
            // mode.routeName
@@ -27,6 +27,7 @@ export default function buildModeRoutes({
  dataSources,
  extensionManager,
  servicesManager,
+  commandsManager,
  hotkeysManager,
 }) {
  const routes = [];
@@ -58,7 +59,9 @@ export default function buildModeRoutes({
          dataSourceName={dataSourceName}
          extensionManager={extensionManager}
          servicesManager={servicesManager}
+          commandsManager={commandsManager}
          hotkeysManager={hotkeysManager}
+          commandsManager={commandsManager}
        />
      );

@@ -80,7 +83,9 @@ export default function buildModeRoutes({
        dataSourceName={defaultDataSourceName}
        extensionManager={extensionManager}
        servicesManager={servicesManager}
+        commandsManager={commandsManager}
        hotkeysManager={hotkeysManager}
+        commandsManager={commandsManager}
      />
    );

@@ -33,6 +33,7 @@ const createRoutes = ({
  dataSources,
  extensionManager,
  servicesManager,
+  commandsManager,
  hotkeysManager,
  routerBasename,
 }) => {
@@ -42,6 +43,7 @@ const createRoutes = ({
      dataSources,
      extensionManager,
      servicesManager,
+      commandsManager,
      hotkeysManager,
    }) || [];

@@ -67,7 +69,7 @@ const createRoutes = ({
  // Note: PrivateRoutes in react-router-dom 6.x should be defined within
  // a Route element
  return (
-    <Routes basename={routerBasename}>
+    <Routes>
      {allRoutes.map((route, i) => {
        return route.private === true ? (
          <Route
@@ -10,7 +10,7 @@ workbox.core.clientsClaim();

 // Cache static assets that aren't precached
 workbox.routing.registerRoute(
-  /\.(?:js|css)$/,
+  /\.(?:js|css|json5)$/,
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'static-resources',
  })
@@ -1,3 +1,3 @@
-import { AppConfigProvider, useAppConfig } from './appConfig.js';
+import { AppConfigProvider, useAppConfig } from './appConfig.tsx';

 export { AppConfigProvider, useAppConfig };