feat: Add DICOM SEG support and MPR, referenceLines and StackSync and more (#3015)

* feat: add initial sop class handler for SEG * feat: move segmentation service * update segmentation service methods * fix: viewport data structure * feat: Add initial render for the DICOM SEG for each displaySet * fix: various wrong architectural dependencies between services * feat: initial separate SEG display in each viewport * feat: refactore viewport action bar * initial work for SEG hydration * fix: various bugs regarding drag and dropping different viewports * fix: rendering issues for multiple seg displaysets * fix: bugs for thumbnail and hydration * feat: fix the initial segment color * update after rebase * feat: initial design for the segmentation group table * feat: initial new design for the segmentation panel * feat: segmentation panel * feat: make segmentation appear on all related viewports * fix: segmentation load bug based on functional groups * initial work for segmentation crosshairs * fix: various stylings and functionality * fix: various stylings for the seg panel * fix: overflow styles * feat: add more ui components * feat: added segmentation config * feat: add jump to segment * feat: add jump to segment for DICOM SEG viewport * fix: bugs after rebase * feat: jump in segmentation viewport * fix: mpr support for seg * feat: add more icons * feat: new icons * feat: add new side panel * feat: add segmentation config * feat: add loading indicator to ohif * feat: make hanging protocols follow matching rules for viewports * feat: enhance drag and drop to be hanging protocol aware * fix: mpr restore previous layout * fix: crosshairs toggle * fix: add auth headers to the dicom loader via dicomwebclient * fix: bug for crosshairs toggle in mpr * fix: seg viewport reusing old toolGroup * feat: add loading animation with lottie * fix: various bugs for Segmentation hydration in mpr * feat: change outline alpha to outline opacity * feat: loading indicator for seg viewport * fix: various segmentation group styles * fix: local mode for seg * feat: add animation for the highlight * fix: loading indicatro to show segment indices * feat: enhance modality drop down ui * fix: panels * fix: download form * fix: layout shift in loading indicator * fix: loading indicator to have correct values * fix: update software number * fix: image jump between MPR and default * fix: segmentation cleanup and cine service cleanup * fix: segmentation toolgroup clena up * fix: highlight interval should not trigger again * fix: issue with multiframe sorting * rename: change onSeriesChange to onArrowsClick * fix: buttons for tmtv and layout shift * fix: various bugs wrt crosshairs * fix: crosshairs re init on reset camera * fix: middle slice calculation different from cs middle reset camera * fix: reset camera should reset viewport camera * fix: loading segments in MPR mode * fix: tmtv hp back to before * fix: layout shift * feat: orientation markers for volume viewport * fix: capture for volume viewports * fix: memory leak for back to worklist * fix: loading bar bg color * fix: side panel for only one panel * fix: react select style in production * fix: various styling for segmentation groups * fix: various ui styles * feat: add new segmentation config styles * fix: hover state for segmentation item * fix: side panel layout shift * temp add panels * try to fix scrollbar for thimbnail * fix: scroll not appearing for side panels * feat: changed styles for scrollbar * feat: add cpu fallback warning * fix: webworker destroy * fix: select styles * fix: orientation marker color and position * fix: capture screenshot for volume viewports * fix: hide segment visibility on mpr * fix: reloading an already loaded seg displayset * feat: add is equal * fix: mpr jump to measurements * apply review comments * fix: optimization for the segmentation load * fix: remove unnecessary context menu and hp service reset * fix: segmentation service wrt brush settings * feat: initial work for the stack synchronization * fix: add validateDisplaySetSelectorsForNewDisplaySets to make sure drag and drop can follow requirements * fix: various react proptypes * fix: thumbnails for the tmtv and change default props to default params * feat: make showing loading indicator configurable and add docs * bump versions and add more docs * fix demo * update cornerstone versions * apply review comments * feat: add reference lines * fix build * fix unit tests * add reference lines icon * fix: e2e tests * fix static wado config * docs: add segmentation service docs * fix: docker build * fix: keep camera and bump versions * Try re-enabling minification to fix deploy previews Co-authored-by: Erik Ziegler <erik.sweed@gmail.com>
2022-11-16 14:19:52 -05:00
1 parent 08c58b0634
commit 83ea228d86
@@ -166,7 +166,6 @@ function createDicomLocalApi(dicomLocalConfig) {

      displaySet.images.forEach(instance => {
        const NumberOfFrames = instance.NumberOfFrames;
-
        if (NumberOfFrames > 1) {
          for (let i = 0; i < NumberOfFrames; i++) {
            const imageId = this.getImageIdsForInstance({
@@ -190,9 +189,14 @@ function createDicomLocalApi(dicomLocalConfig) {
        SeriesInstanceUID,
        SOPInstanceUID
      );
-      if (storedInstance.url) {
-        return storedInstance.url;
+
+      let imageId = storedInstance.url;
+
+      if (frame !== undefined) {
+        imageId += `&frame=${frame}`;
      }
+
+      return imageId;
    },
    deleteStudyMetadataPromise() {
      console.log('deleteStudyMetadataPromise not implemented');
@@ -423,6 +423,7 @@ function createDicomWebApi(dicomWebConfig, UserAuthenticationService) {
                // any implementation that stores static copies of the metadata
                StudyInstanceUID: naturalized.StudyInstanceUID,
              };
+              // Todo: this needs to be from wado dicom web client
              return qidoDicomWebClient.retrieveBulkData(options).then(val => {
                const ret = (val && val[0]) || undefined;
                value.Value = ret;
@@ -440,6 +441,9 @@ function createDicomWebApi(dicomWebConfig, UserAuthenticationService) {

        // Adding instanceMetadata to OHIF MetadataProvider
        naturalizedInstances.forEach((instance, index) => {
+          instance.wadoRoot = dicomWebConfig.wadoRoot;
+          instance.wadoUri = dicomWebConfig.wadoUri;
+
          const imageId = implementation.getImageIdsForInstance({
            instance,
          });
@@ -155,7 +155,6 @@ export default function PanelMeasurementTable({
      >
        <MeasurementTable
          title="Measurements"
-          amount={displayMeasurements.length}
          data={displayMeasurements}
          onClick={jumpToImage}
          onEdit={onMeasurementItemEditHandler}
@@ -10,12 +10,17 @@ const { formatDate } = utils;
 * @param {*} param0
 */
 function PanelStudyBrowser({
-  DisplaySetService,
+  servicesManager,
  getImageSrc,
  getStudiesForPatientByStudyInstanceUID,
  requestDisplaySetCreationForStudy,
  dataSource,
 }) {
+  const {
+    HangingProtocolService,
+    DisplaySetService,
+    UINotificationService,
+  } = servicesManager.services;
  // Normally you nest the components so the tree isn't so deep, and the data
  // doesn't have to have such an intense shape. This works well enough for now.
  // Tabs --> Studies --> DisplaySets --> Thumbnails
@@ -34,10 +39,25 @@ function PanelStudyBrowser({
  const isMounted = useRef(true);

  const onDoubleClickThumbnailHandler = displaySetInstanceUID => {
-    viewportGridService.setDisplaySetsForViewport({
-      viewportIndex: activeViewportIndex,
-      displaySetInstanceUIDs: [displaySetInstanceUID],
-    });
+    let updatedViewports = [];
+    const viewportIndex = activeViewportIndex;
+    try {
+      updatedViewports = HangingProtocolService.getViewportsRequireUpdate(
+        viewportIndex,
+        displaySetInstanceUID
+      );
+    } catch (error) {
+      console.warn(error);
+      UINotificationService.show({
+        title: 'Thumbnail Double Click',
+        message:
+          'The selected display sets could not be added to the viewport due to a mismatch in the Hanging Protocol rules.',
+        type: 'info',
+        duration: 3000,
+      });
+    }
+
+    viewportGridService.setDisplaySetsForViewports(updatedViewports);
  };

  // ~~ studyDisplayList
@@ -227,12 +247,7 @@ function PanelStudyBrowser({
 }

 PanelStudyBrowser.propTypes = {
-  DisplaySetService: PropTypes.shape({
-    EVENTS: PropTypes.object.isRequired,
-    activeDisplaySets: PropTypes.arrayOf(PropTypes.object).isRequired,
-    getDisplaySetByUID: PropTypes.func.isRequired,
-    subscribe: PropTypes.func.isRequired,
-  }).isRequired,
+  servicesManager: PropTypes.object.isRequired,
  dataSource: PropTypes.shape({
    getImageIdsForDisplaySet: PropTypes.func.isRequired,
  }).isRequired,
@@ -35,7 +35,7 @@ function WrappedPanelStudyBrowser({

  return (
    <PanelStudyBrowser
-      DisplaySetService={servicesManager.services.DisplaySetService}
+      servicesManager={servicesManager}
      dataSource={dataSource}
      getImageSrc={_getImageSrcFromImageId}
      getStudiesForPatientByStudyInstanceUID={
@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+
+export default function Toolbar({ servicesManager }) {
+  const { ToolBarService } = servicesManager.services;
+  const [toolbarButtons, setToolbarButtons] = useState([]);
+  const [buttonState, setButtonState] = useState({
+    primaryToolId: '',
+    toggles: {},
+    groups: {},
+  });
+
+  // Could track buttons and state separately...?
+  useEffect(() => {
+    const { unsubscribe: unsub1 } = ToolBarService.subscribe(
+      ToolBarService.EVENTS.TOOL_BAR_MODIFIED,
+      () => setToolbarButtons(ToolBarService.getButtonSection('primary'))
+    );
+    const { unsubscribe: unsub2 } = ToolBarService.subscribe(
+      ToolBarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
+      () => setButtonState({ ...ToolBarService.state })
+    );
+
+    return () => {
+      unsub1();
+      unsub2();
+    };
+  }, [ToolBarService]);
+
+  return (
+    <>
+      {toolbarButtons.map((toolDef, index) => {
+        const { id, Component, componentProps } = toolDef;
+        // TODO: ...
+
+        // isActive if:
+        // - id is primary?
+        // - id is in list of "toggled on"?
+        let isActive;
+        if (componentProps.type === 'toggle') {
+          isActive = buttonState.toggles[id];
+        }
+        // Also need... to filter list for splitButton, and set primary based on most recently clicked
+        // Also need to kill the radioGroup button's magic logic
+        // Everything should be reactive off these props, so commands can inform ToolbarService
+
+        // These can... Trigger toolbar events based on updates?
+        // Then sync using useEffect, or simply modify the state here?
+        return (
+          <Component
+            key={id}
+            id={id}
+            {...componentProps}
+            bState={buttonState}
+            isActive={isActive}
+            onInteraction={args => ToolBarService.recordInteraction(args)}
+            servicesManager={servicesManager}
+          />
+        );
+      })}
+    </>
+  );
+}
@@ -1,20 +1,43 @@
 import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 import {
  LayoutSelector as OHIFLayoutSelector,
  ToolbarButton,
  useViewportGrid,
 } from '@ohif/ui';

-function LayoutSelector({rows, columns}) {
+function LayoutSelector({ rows, columns, servicesManager }) {
  const [isOpen, setIsOpen] = useState(false);
+  const [disableSelector, setDisableSelector] = useState(false);
  const [viewportGridState, viewportGridService] = useViewportGrid();

+  const { HangingProtocolService } = servicesManager.services;
+
  const closeOnOutsideClick = () => {
    if (isOpen) {
      setIsOpen(false);
    }
  };

+  useEffect(() => {
+    const { unsubscribe } = HangingProtocolService.subscribe(
+      HangingProtocolService.EVENTS.PROTOCOL_CHANGED,
+      evt => {
+        const { protocol } = evt;
+
+        if (protocol.id === 'mpr') {
+          setDisableSelector(true);
+        } else {
+          setDisableSelector(false);
+        }
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [HangingProtocolService]);
+
  useEffect(() => {
    window.addEventListener('click', closeOnOutsideClick);
    return () => {
@@ -44,15 +67,27 @@ function LayoutSelector({rows, columns}) {
            rows={rows}
            columns={columns}
            onSelection={({ numRows, numCols }) => {
-              viewportGridService.setLayout({ numCols, numRows });
+              viewportGridService.setLayout({ numRows, numCols });
            }}
          />
        )
      }
-      isActive={isOpen}
+      isActive={disableSelector ? false : isOpen}
      type="toggle"
    />
  );
 }

+LayoutSelector.propTypes = {
+  rows: PropTypes.number,
+  columns: PropTypes.number,
+  onLayoutChange: PropTypes.func,
+};
+
+LayoutSelector.defaultProps = {
+  rows: 3,
+  columns: 3,
+  onLayoutChange: () => {},
+};
+
 export default LayoutSelector;
@@ -9,74 +9,16 @@ import {
  AboutModal,
  Header,
  useModal,
+  LoadingIndicatorProgress,
 } from '@ohif/ui';

 import i18n from '@ohif/i18n';
 import { hotkeys } from '@ohif/core';
 import { useAppConfig } from '@state';
+import Toolbar from '../Toolbar/Toolbar';

 const { availableLanguages, defaultLanguage, currentLanguage } = i18n;

-function Toolbar({ servicesManager }) {
-  const { ToolBarService } = servicesManager.services;
-  const [toolbarButtons, setToolbarButtons] = useState([]);
-  const [buttonState, setButtonState] = useState({
-    primaryToolId: '',
-    toggles: {},
-    groups: {},
-  });
-
-  // Could track buttons and state separately...?
-  useEffect(() => {
-    const { unsubscribe: unsub1 } = ToolBarService.subscribe(
-      ToolBarService.EVENTS.TOOL_BAR_MODIFIED,
-      () => setToolbarButtons(ToolBarService.getButtonSection('primary'))
-    );
-    const { unsubscribe: unsub2 } = ToolBarService.subscribe(
-      ToolBarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
-      () => setButtonState({ ...ToolBarService.state })
-    );
-
-    return () => {
-      unsub1();
-      unsub2();
-    };
-  }, [ToolBarService]);
-
-  return (
-    <>
-      {toolbarButtons.map((toolDef, index) => {
-        const { id, Component, componentProps } = toolDef;
-        // TODO: ...
-
-        // isActive if:
-        // - id is primary?
-        // - id is in list of "toggled on"?
-        let isActive;
-        if (componentProps.type === 'toggle') {
-          isActive = buttonState.toggles[id];
-        }
-        // Also need... to filter list for splitButton, and set primary based on most recently clicked
-        // Also need to kill the radioGroup button's magic logic
-        // Everything should be reactive off these props, so commands can inform ToolbarService
-
-        // These can... Trigger toolbar events based on updates?
-        // Then sync using useEffect, or simply modify the state here?
-        return (
-          <Component
-            key={id}
-            id={id}
-            {...componentProps}
-            bState={buttonState}
-            isActive={isActive}
-            onInteraction={args => ToolBarService.recordInteraction(args)}
-          />
-        );
-      })}
-    </>
-  );
-}
-
 function ViewerLayout({
  // From Extension Module Params
  extensionManager,
@@ -84,12 +26,12 @@ function ViewerLayout({
  hotkeysManager,
  commandsManager,
  // From Modes
-  leftPanels,
-  rightPanels,
-  leftPanelDefaultClosed,
-  rightPanelDefaultClosed,
  viewports,
  ViewportGridComp,
+  leftPanels = [],
+  rightPanels = [],
+  leftPanelDefaultClosed = false,
+  rightPanelDefaultClosed = false,
 }) {
  const [appConfig] = useAppConfig();
  const navigate = useNavigate();
@@ -101,6 +43,12 @@ function ViewerLayout({
  const { t } = useTranslation();
  const { show, hide } = useModal();

+  const [showLoadingIndicator, setShowLoadingIndicator] = useState(
+    appConfig.showLoadingIndicator
+  );
+
+  const { HangingProtocolService } = servicesManager.services;
+
  const { hotkeyDefinitions, hotkeyDefaults } = hotkeysManager;
  const versionNumber = process.env.VERSION_NUMBER;
  const buildNumber = process.env.BUILD_NUM;
@@ -153,8 +101,10 @@ function ViewerLayout({
      title: t('Header:Logout'),
      icon: 'power-off',
      onClick: async () => {
-        navigate(`/logout?redirect_uri=${encodeURIComponent(window.location.href)}`);
-      }
+        navigate(
+          `/logout?redirect_uri=${encodeURIComponent(window.location.href)}`
+        );
+      },
    });
  }

@@ -186,6 +136,25 @@ function ViewerLayout({
    };
  };

+  useEffect(() => {
+    const { unsubscribe } = HangingProtocolService.subscribe(
+      HangingProtocolService.EVENTS.HANGING_PROTOCOL_APPLIED_FOR_VIEWPORT,
+
+      // Todo: right now to set the loading indicator to false, we need to wait for the
+      // HangingProtocolService to finish applying the viewport matching to each viewport,
+      // however, this might not be the only approach to set the loading indicator to false. we need to explore this further.
+      ({ progress }) => {
+        if (progress === 100) {
+          setShowLoadingIndicator(false);
+        }
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [HangingProtocolService]);
+
  const getViewportComponentData = viewportComponent => {
    const entry = extensionManager.getModuleEntry(viewportComponent.namespace);

@@ -213,44 +182,45 @@ function ViewerLayout({
        </ErrorBoundary>
      </Header>
      <div
-        className="bg-black flex flex-row items-stretch w-full overflow-hidden flex-nowrap"
+        className="bg-black flex flex-row items-stretch w-full overflow-hidden flex-nowrap relative"
        style={{ height: 'calc(100vh - 52px' }}
      >
-        {/* LEFT SIDEPANELS */}
-        {leftPanelComponents.length ? (
-          <ErrorBoundary context="Left Panel">
-            <SidePanel
-              side="left"
-              defaultComponentOpen={
-                leftPanelDefaultClosed ? null : leftPanelComponents[0].name
-              }
-              childComponents={leftPanelComponents}
-            />
-          </ErrorBoundary>
-        ) : null}
-        {/* TOOLBAR + GRID */}
-        <div className="flex flex-col flex-1 h-full">
-          <div className="flex items-center justify-center flex-1 h-full overflow-hidden bg-black">
-            <ErrorBoundary context="Grid">
-              <ViewportGridComp
-                servicesManager={servicesManager}
-                viewportComponents={viewportComponents}
-                commandsManager={commandsManager}
+        <React.Fragment>
+          {showLoadingIndicator && (
+            <LoadingIndicatorProgress className="h-full w-full bg-black" />
+          )}
+          {/* LEFT SIDEPANELS */}
+          {leftPanelComponents.length ? (
+            <ErrorBoundary context="Left Panel">
+              <SidePanel
+                side="left"
+                activeTabIndex={leftPanelDefaultClosed ? null : 0}
+                tabs={leftPanelComponents}
              />
            </ErrorBoundary>
+          ) : null}
+          {/* TOOLBAR + GRID */}
+          <div className="flex flex-col flex-1 h-full">
+            <div className="flex items-center justify-center flex-1 h-full overflow-hidden bg-black relative">
+              <ErrorBoundary context="Grid">
+                <ViewportGridComp
+                  servicesManager={servicesManager}
+                  viewportComponents={viewportComponents}
+                  commandsManager={commandsManager}
+                />
+              </ErrorBoundary>
+            </div>
          </div>
-        </div>
-        {rightPanelComponents.length ? (
-          <ErrorBoundary context="Right Panel">
-            <SidePanel
-              side="right"
-              defaultComponentOpen={
-                rightPanelDefaultClosed ? null : rightPanelComponents[0].name
-              }
-              childComponents={rightPanelComponents}
-            />
-          </ErrorBoundary>
-        ) : null}
+          {rightPanelComponents.length ? (
+            <ErrorBoundary context="Right Panel">
+              <SidePanel
+                side="right"
+                activeTabIndex={rightPanelDefaultClosed ? null : 0}
+                tabs={rightPanelComponents}
+              />
+            </ErrorBoundary>
+          ) : null}
+        </React.Fragment>
      </div>
    </div>
  );
@@ -271,11 +241,4 @@ ViewerLayout.propTypes = {
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
 };

-ViewerLayout.defaultProps = {
-  leftPanels: [],
-  rightPanels: [],
-  leftPanelDefaultClosed: false,
-  rightPanelDefaultClosed: false,
-};
-
 export default ViewerLayout;
@@ -34,9 +34,10 @@ function getPanelModule({
    },
    {
      name: 'measure',
-      iconName: 'list-bullets',
+      iconName: 'tab-linear',
      iconLabel: 'Measure',
      label: 'Measurements',
+      secondaryLabel: 'Measurements',
      component: wrappedMeasurementPanel,
    },
  ];
@@ -25,6 +25,7 @@ const makeDisplaySet = instances => {
    StudyInstanceUID: instance.StudyInstanceUID,
    SeriesNumber: instance.SeriesNumber || 0,
    FrameRate: instance.FrameTime,
+    SOPClassUID: instance.SOPClassUID,
    SeriesDescription: instance.SeriesDescription || '',
    Modality: instance.Modality,
    isMultiFrame: isMultiFrame(instance),