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
@@ -139,6 +139,7 @@ App.defaultProps = {
    /**
     *
     */
+    showLoadingIndicator: true,
    showStudyList: true,
    oidc: [],
    extensions: [],
@@ -12,7 +12,6 @@ import {
  ToolBarService,
  ViewportGridService,
  HangingProtocolService,
-  SegmentationService,
  CineService,
  UserAuthenticationService,
  errorHandler,
@@ -54,7 +53,6 @@ async function appInit(appConfigOrFunc, defaultExtensions, defaultModes) {
    ToolBarService,
    ViewportGridService,
    HangingProtocolService,
-    SegmentationService,
    CineService,
    UserAuthenticationService,
  ]);
@@ -1,9 +1,27 @@
 import React, { useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { ViewportGrid, ViewportPane, useViewportGrid } from '@ohif/ui';
+import { utils } from '@ohif/core';
 import EmptyViewport from './EmptyViewport';
 import classNames from 'classnames';

+const { isEqualWithin } = utils;
+
+const ORIENTATION_MAP = {
+  axial: {
+    viewPlaneNormal: [0, 0, -1],
+    viewUp: [0, -1, 0],
+  },
+  sagittal: {
+    viewPlaneNormal: [1, 0, 0],
+    viewUp: [0, 0, 1],
+  },
+  coronal: {
+    viewPlaneNormal: [0, 1, 0],
+    viewUp: [0, 0, 1],
+  },
+};
+
 function ViewerViewportGrid(props) {
  const { servicesManager, viewportComponents, dataSource } = props;
  const [viewportGrid, viewportGridService] = useViewportGrid();
@@ -15,6 +33,7 @@ function ViewerViewportGrid(props) {
    DisplaySetService,
    MeasurementService,
    HangingProtocolService,
+    UINotificationService,
  } = servicesManager.services;

  /**
@@ -31,23 +50,29 @@ function ViewerViewportGrid(props) {
        hpAlreadyApplied,
      } = HangingProtocolService.getMatchDetails();

-      if (!viewportMatchDetails.length) {
+      if (!viewportMatchDetails.size) {
        return;
      }

      // Match each viewport individually
      const numViewports = viewportGrid.numRows * viewportGrid.numCols;
-      for (let i = 0; i < numViewports; i++) {
-        if (hpAlreadyApplied[i] === true) {
+      for (
+        let viewportIndex = 0;
+        viewportIndex < numViewports;
+        viewportIndex++
+      ) {
+        if (hpAlreadyApplied.get(viewportIndex)) {
          continue;
        }

        // if current viewport doesn't have a match
-        if (viewportMatchDetails[i] === undefined) {
+        if (viewportMatchDetails.get(viewportIndex) === undefined) {
          return;
        }

-        const { displaySetsInfo, viewportOptions } = viewportMatchDetails[i];
+        const { displaySetsInfo, viewportOptions } = viewportMatchDetails.get(
+          viewportIndex
+        );

        const displaySetUIDsToHang = [];
        const displaySetUIDsToHangOptions = [];
@@ -62,12 +87,8 @@ function ViewerViewportGrid(props) {
          }
        );

-        if (!displaySetUIDsToHang.length) {
-          continue;
-        }
-
        viewportGridService.setDisplaySetsForViewport({
-          viewportIndex: i,
+          viewportIndex: viewportIndex,
          displaySetInstanceUIDs: displaySetUIDsToHang,
          viewportOptions,
          displaySetOptions: displaySetUIDsToHangOptions,
@@ -79,14 +100,45 @@ function ViewerViewportGrid(props) {
        // 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);
+          // The following will set the viewportsDisplaySetsMatched state
+
+          const suppressEvent = true;
+          const applied = true;
+          HangingProtocolService.setHangingProtocolAppliedForViewport(
+            viewportIndex,
+            applied,
+            suppressEvent
+          );
        }
      }
    },
    [viewportGrid, numRows, numCols]
  );

+  const _getUpdatedViewports = useCallback(
+    (viewportIndex, displaySetInstanceUID) => {
+      let updatedViewports = [];
+      try {
+        updatedViewports = HangingProtocolService.getViewportsRequireUpdate(
+          viewportIndex,
+          displaySetInstanceUID
+        );
+      } catch (error) {
+        console.warn(error);
+        UINotificationService.show({
+          title: 'Drag and Drop',
+          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,
+        });
+      }
+
+      return updatedViewports;
+    },
+    [HangingProtocolService, UINotificationService]
+  );
+
  useEffect(() => {
    const displaySets = DisplaySetService.getActiveDisplaySets();
    updateDisplaySetsForViewports(displaySets);
@@ -109,7 +161,7 @@ function ViewerViewportGrid(props) {
    return () => {
      unsubscribe();
    };
-  }, [viewports]);
+  }, []);

  // Using Hanging protocol engine to match the displaySets
  useEffect(() => {
@@ -130,8 +182,10 @@ function ViewerViewportGrid(props) {
    const { unsubscribe } = MeasurementService.subscribe(
      MeasurementService.EVENTS.JUMP_TO_MEASUREMENT,
      ({ viewportIndex, measurement }) => {
-        const referencedDisplaySetInstanceUID =
-          measurement.displaySetInstanceUID;
+        const {
+          displaySetInstanceUID: referencedDisplaySetInstanceUID,
+          metadata: { viewPlaneNormal },
+        } = measurement;

        // if we already have the displaySet in one of the viewports
        // Todo: handle fusion display sets?
@@ -156,16 +210,47 @@ function ViewerViewportGrid(props) {
          );
        }

-        // If not in any of the viewports, hang it inside the active viewport
-        viewportGridService.setDisplaySetsForViewport({
+        const updatedViewports = _getUpdatedViewports(
          viewportIndex,
-          displaySetInstanceUIDs: [referencedDisplaySetInstanceUID],
-          viewportOptions: {
-            initialImageOptions: {
+          referencedDisplaySetInstanceUID
+        );
+
+        if (!updatedViewports || !updatedViewports.length) {
+          return;
+        }
+
+        updatedViewports.forEach(vp => {
+          const { orientation, viewportType } = vp.viewportOptions;
+          let initialImageOptions;
+
+          // For initial imageIndex to hang be careful for the volume viewport
+          if (viewportType === 'stack') {
+            initialImageOptions = {
              index: imageIndex,
-            },
-          },
+            };
+          } else if (viewportType === 'volume') {
+            // For the volume viewports, be careful to not jump in the viewports
+            // that are not in the same orientation.
+            // Todo: this doesn't work for viewports that have custom orientation
+            // vectors specified
+            if (
+              orientation &&
+              viewPlaneNormal &&
+              isEqualWithin(
+                ORIENTATION_MAP[orientation]?.viewPlaneNormal,
+                viewPlaneNormal
+              )
+            ) {
+              initialImageOptions = {
+                index: imageIndex,
+              };
+            }
+          }
+
+          vp.viewportOptions['initialImageOptions'] = initialImageOptions;
        });
+
+        viewportGridService.setDisplaySetsForViewports(updatedViewports);
      }
    );

@@ -175,28 +260,6 @@ function ViewerViewportGrid(props) {
  }, [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.
@@ -238,14 +301,14 @@ function ViewerViewportGrid(props) {
      },
    });
  };
-
  */

  const onDropHandler = (viewportIndex, { displaySetInstanceUID }) => {
-    viewportGridService.setDisplaySetsForViewport({
+    const updatedViewports = _getUpdatedViewports(
      viewportIndex,
-      displaySetInstanceUIDs: [displaySetInstanceUID],
-    });
+      displaySetInstanceUID
+    );
+    viewportGridService.setDisplaySetsForViewports(updatedViewports);
  };

  const getViewportPanes = useCallback(() => {
@@ -279,7 +342,8 @@ function ViewerViewportGrid(props) {

      const ViewportComponent = _getViewportComponent(
        displaySets,
-        viewportComponents
+        viewportComponents,
+        UINotificationService
      );

      // look inside displaySets to see if they need reRendering
@@ -361,7 +425,11 @@ ViewerViewportGrid.defaultProps = {
  viewportComponents: [],
 };

-function _getViewportComponent(displaySets, viewportComponents) {
+function _getViewportComponent(
+  displaySets,
+  viewportComponents,
+  UINotificationService
+) {
  if (!displaySets || !displaySets.length) {
    return EmptyViewport;
  }
@@ -383,7 +451,14 @@ function _getViewportComponent(displaySets, viewportComponents) {
      return component;
    }
  }
-  throw new Error(`No display set handler for ${SOPClassHandlerId}`);
+
+  UINotificationService.show({
+    title: 'Viewport Not Supported Yet',
+    message: `Cannot display SOPClassId of ${displaySets[0].SOPClassUID} yet`,
+    type: 'error',
+  });
+
+  return EmptyViewport;
 }

 export default ViewerViewportGrid;
@@ -8,7 +8,7 @@ import filesToStudies from './filesToStudies';

 import { extensionManager } from '../../App.tsx';

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

 const getLoadButton = (onDrop, text, isDir) => {
  return (
@@ -20,7 +20,7 @@ const getLoadButton = (onDrop, text, isDir) => {
            variant="contained" // outlined
            disabled={false}
            endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info
-            className={classnames('font-bold', 'ml-2')}
+            className={classnames('font-medium', 'ml-2')}
            onClick={() => {}}
          >
            {text}
@@ -43,6 +43,7 @@ const getLoadButton = (onDrop, text, isDir) => {
 function Local() {
  const navigate = useNavigate();
  const dropzoneRef = useRef();
+  const [dropInitiated, setDropInitiated] = React.useState(false);

  // Initializing the dicom local dataSource
  const dataSourceModules = extensionManager.modules[MODULE_TYPES.DATA_SOURCE];
@@ -76,29 +77,44 @@ function Local() {
  }, []);

  return (
-    <Dropzone ref={dropzoneRef} onDrop={onDrop} noClick>
+    <Dropzone
+      ref={dropzoneRef}
+      onDrop={acceptedFiles => {
+        setDropInitiated(true);
+        onDrop(acceptedFiles);
+      }}
+      noClick
+    >
      {({ getRootProps }) => (
        <div {...getRootProps()} 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-10"
-                src="./customLogo.svg"
+                className="block mx-auto h-14"
+                src="./ohif-logo.svg"
                alt="OHIF"
              />
              <div className="text-center space-y-2 pt-4">
-                <div className="space-y-2">
-                  <p className="text-blue-300 text-base">
-                    Note: You data is not uploaded to any server, it will stay
-                    in your local browser application
-                  </p>
-                  <p className="text-xg text-primary-active font-semibold pt-8">
-                    Drag and Drop DICOM files here to load them in the Viewer
-                  </p>
-                  <p className="text-blue-300 text-lg">Or click to </p>
-                </div>
+                {dropInitiated ? (
+                  <div className="flex flex-col items-center justify-center pt-48">
+                    <LoadingIndicatorProgress
+                      className={'w-full h-full bg-black'}
+                    />
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    <p className="text-blue-300 text-base">
+                      Note: You data is not uploaded to any server, it will stay
+                      in your local browser application
+                    </p>
+                    <p className="text-xg text-primary-active font-semibold pt-6">
+                      Drag and Drop DICOM files here to load them in the Viewer
+                    </p>
+                    <p className="text-blue-300 text-lg">Or click to </p>
+                  </div>
+                )}
              </div>
-              <div className="flex justify-around pt-4">
+              <div className="flex justify-around pt-4 ">
                {getLoadButton(onDrop, 'Load files', false)}
                {getLoadButton(onDrop, 'Load folders', true)}
              </div>
@@ -1,5 +1,4 @@
 import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
-import { DicomMetadataStore } from '@ohif/core';

 import FileLoader from './fileLoader';
 import PDFFileLoader from './pdfFileLoader';
@@ -25,6 +25,7 @@ import {
  useModal,
  AboutModal,
  UserPreferences,
+  LoadingIndicatorProgress,
 } from '@ohif/ui';

 import i18n from '@ohif/i18n';
@@ -322,13 +323,13 @@ function WorkList({
          seriesTableDataSource={
            seriesInStudiesMap.has(studyInstanceUid)
              ? seriesInStudiesMap.get(studyInstanceUid).map(s => {
-                return {
-                  description: s.description || '(empty)',
-                  seriesNumber: s.seriesNumber || '',
-                  modality: s.modality || '',
-                  instances: s.numSeriesInstances || '',
-                };
-              })
+                  return {
+                    description: s.description || '(empty)',
+                    seriesNumber: s.seriesNumber ?? '',
+                    modality: s.modality || '',
+                    instances: s.numSeriesInstances || '',
+                  };
+                })
              : []
          }
        >
@@ -346,15 +347,15 @@ function WorkList({
              <Link
                key={i}
                to={`${mode.routeName}?StudyInstanceUIDs=${studyInstanceUid}`}
-              // to={`${mode.routeName}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`}
+                // to={`${mode.routeName}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`}
              >
                <Button
                  rounded="full"
                  variant={isValidMode ? 'contained' : 'disabled'}
                  disabled={!isValidMode}
                  endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info
-                  className={classnames('font-bold', { 'ml-2': !isFirst })}
-                  onClick={() => { }}
+                  className={classnames('font-medium	', { 'ml-2': !isFirst })}
+                  onClick={() => {}}
                >
                  {t(`Modes:${mode.displayName}`)}
                </Button>
@@ -419,9 +420,10 @@ function WorkList({
      icon: 'power-off',
      title: t('Header:Logout'),
      onClick: () => {
-        navigate(`/logout?redirect_uri=${encodeURIComponent(window.location.href)}`);
-
-      }
+        navigate(
+          `/logout?redirect_uri=${encodeURIComponent(window.location.href)}`
+        );
+      },
    });
  }

@@ -461,7 +463,11 @@ function WorkList({
        </>
      ) : (
        <div className="flex flex-col items-center justify-center pt-48">
-          <EmptyStudies isLoading={isLoadingData} />
+          {appConfig.showLoadingIndicator && isLoadingData ? (
+            <LoadingIndicatorProgress className={'w-full h-full bg-black'} />
+          ) : (
+            <EmptyStudies />
+          )}
        </div>
      )}
    </div>
@@ -493,7 +499,7 @@ const defaultFilterValues = {
 };

 function _tryParseInt(str, defaultValue) {
-  var retValue = defaultValue;
+  let retValue = defaultValue;
  if (str !== null) {
    if (str.length > 0) {
      if (!isNaN(str)) {