feat: 🎸 Seg jump to slice + show/hide

* Add segment part 2 (jump to frame and visibility toggle)

* Cr updates

* Filter displaysets with images

* feat: 🎸 Seg jump to slice + show/hide

Co-authored-by: James Petts <jamesapetts@gmail.com>

extensions/cornerstone/package.json

@@ -36,7 +36,7 @@
     "cornerstone-math": "^0.1.8",
     "cornerstone-tools": "4.12.5",
     "cornerstone-wado-image-loader": "^3.1.0",
-    "dcmjs": "^0.10.1",
+    "dcmjs": "^0.12.2",
     "dicom-parser": "^1.8.3",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",

extensions/cornerstone/src/commandsModule.js

@@ -267,7 +267,7 @@ const commandsModule = ({ servicesManager }) => {
       const study = studyMetadataManager.get(StudyInstanceUID);
 
       const displaySet = study.findDisplaySet(ds => {
-        return ds.images.find(i => i.getSOPInstanceUID() === SOPInstanceUID)
+        return ds.images && ds.images.find(i => i.getSOPInstanceUID() === SOPInstanceUID)
       });
 
       displaySet.SOPInstanceUID = SOPInstanceUID;

extensions/dicom-html/package.json

@@ -29,7 +29,7 @@
   },
   "peerDependencies": {
     "@ohif/core": "^0.50.0",
-    "dcmjs": "^0.10.1",
+    "dcmjs": "^0.12.2",
     "prop-types": "^15.6.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"

extensions/dicom-rt/package.json

@@ -31,7 +31,7 @@
     "@ohif/core": "^0.50.0",
     "cornerstone-core": "^2.2.8",
     "cornerstone-tools": "^4.0.9",
-    "dcmjs": "^0.8.3",
+    "dcmjs": "^0.12.2",
     "prop-types": "^15.6.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"

extensions/dicom-rt/src/components/StructureSetItem/StructureSetItem.css

@@ -61,14 +61,17 @@
 }
 
 .dcmrt-structure-set-item .item-label {
-  overflow: hidden;
-  max-width: calc(100% - 15px); /* calc(100% - 50px); 20px = eye icon */
-  text-overflow: ellipsis;
-  overflow-wrap: normal;
-  white-space: nowrap;
-
   display: flex;
   justify-content: space-between;
+  padding-right: 10px;
+}
+
+.dcmrt-structure-set-item .item-label span {
+  overflow-wrap: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: calc(100% - 40px); /* calc(100% - 50px); 20px = eye icon */
+  text-overflow: ellipsis;
 }
 
 .dcmrt-structure-set-item .item-label .eye-icon {

extensions/dicom-rt/src/components/StructureSetItem/StructureSetItem.js

@@ -41,7 +41,7 @@ const StructureSetItem = ({
       >
         <div>
           <div className="item-label" style={{ marginBottom: 4 }}>
-            {label}
+            <span>{label}</span>
             <Icon
               className={`eye-icon ${isVisible && '--visible'}`}
               name={isVisible ? 'eye' : 'eye-closed'}

extensions/dicom-rt/src/index.js

@@ -27,10 +27,7 @@ export default {
       };
 
       return (
-        <RTPanel
+        <RTPanel {...props} onContourItemClick={contourItemClickHandler} />
-          {...props}
-          onContourItemClick={contourItemClickHandler}
-        />
       );
     };
 
@@ -51,8 +48,10 @@ export default {
               if (study && study.series) {
                 for (let j = 0; j < study.series.length; j++) {
                   const series = study.series[j];
-                  console.log(studies);
+                  if (
-                  if (['RTSTRUCT', 'RTPLAN', 'RTDOSE'].includes(series.Modality)) {
+                    /* Could be expanded to contain RTPLAN and RTDOSE information in the future */
+                    ['RTSTRUCT'].includes(series.Modality)
+                  ) {
                     return false;
                   }
                 }

extensions/dicom-segmentation/package.json

@@ -31,7 +31,7 @@
     "@ohif/core": "^0.50.0",
     "cornerstone-core": "^2.2.8",
     "cornerstone-tools": "4.12.5",
-    "dcmjs": "^0.6.1",
+    "dcmjs": "^0.12.2",
     "prop-types": "^15.6.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"

extensions/dicom-segmentation/src/components/SegmentItem/SegmentItem.css

@@ -12,14 +12,6 @@
   height: 20px;
 }
 
-.dcmseg-segment-item .segment-label {
-  overflow: hidden;
-  max-width: calc(100% - 50px);
-  text-overflow: ellipsis;
-  overflow-wrap: normal;
-  white-space: nowrap;
-}
-
 .dcmseg-segment-item .segment-info {
   display: inline-block;
   margin-top: 9px;
@@ -62,3 +54,30 @@
 .dcmseg-segment-item .segment-actions .btnAction i {
   margin-right: 4px;
 }
+
+.dcmseg-segment-item .segment-label {
+  display: flex;
+  justify-content: space-between;
+  padding-right: 20px;
+}
+
+.dcmseg-segment-item .segment-label span {
+  overflow-wrap: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: calc(100% - 40px); /* calc(100% - 50px); 20px = eye icon */
+  text-overflow: ellipsis;
+}
+
+.dcmseg-segment-item .segment-label .eye-icon {
+  cursor: pointer;
+  color: var(--active-color);
+}
+
+.dcmseg-segment-item .segment-label .eye-icon:hover {
+  color: var(--hover-color);
+}
+
+.dcmseg-segment-item .segment-label .eye-icon.--visible {
+  color: var(--default-color);
+}

extensions/dicom-segmentation/src/components/SegmentItem/SegmentItem.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { TableListItem, Icon } from '@ohif/ui';
 
@@ -17,7 +17,9 @@ ColoredCircle.propTypes = {
   color: PropTypes.array.isRequired,
 };
 
-const SegmentItem = ({ index, label, onClick, itemClass, color }) => (
+const SegmentItem = ({ index, label, onClick, itemClass, color, visible = true, onVisibilityChange }) => {
+  const [isVisible, setIsVisible] = useState(visible);
+  return (
     <div className="dcmseg-segment-item">
       <TableListItem
         key={index}
@@ -30,7 +32,19 @@ const SegmentItem = ({ index, label, onClick, itemClass, color }) => (
       >
         <div>
           <div className="segment-label" style={{ marginBottom: 4 }}>
-          {label}
+            <span>{label}</span>
+            <Icon
+              className={`eye-icon ${isVisible && '--visible'}`}
+              name={isVisible ? 'eye' : 'eye-closed'}
+              width="20px"
+              height="20px"
+              onClick={event => {
+                event.stopPropagation();
+                const newVisibility = !isVisible;
+                setIsVisible(newVisibility);
+                onVisibilityChange(newVisibility);
+              }}
+            />
           </div>
           {false && <div className="segment-info">{'...'}</div>}
           {false && (
@@ -59,6 +73,7 @@ const SegmentItem = ({ index, label, onClick, itemClass, color }) => (
       </TableListItem>
     </div>
   );
+};
 
 SegmentItem.propTypes = {
   index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,

extensions/dicom-segmentation/src/components/SegmentationPanel/SegmentationPanel.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cornerstoneTools from 'cornerstone-tools';
 import cornerstone from 'cornerstone-core';
@@ -28,13 +28,20 @@ const refreshViewport = () => {
 /**
  * SegmentationPanel component
  *
- * @param {Object} props
+ * @param {Array} props.studies - Studies data
- * @param {Array} props.studies
+ * @param {Array} props.viewports - Viewports data (viewportSpecificData)
- * @param {Array} props.viewports - viewportSpecificData
+ * @param {number} props.activeIndex - Active viewport index
- * @param {number} props.activeIndex - activeViewportIndex
+ * @param {boolean} props.isOpen - Boolean that indicates if the panel is expanded
+ * @param {Function} props.onSegItemClick - Segment click handler
  * @returns component
  */
-const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
+const SegmentationPanel = ({
+  studies,
+  viewports,
+  activeIndex,
+  isOpen,
+  onSegItemClick,
+}) => {
   /*
    * TODO: wrap get/set interactions with the cornerstoneTools
    * store with context to make these kind of things less blurry.
@@ -43,13 +50,14 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
   const DEFAULT_BRUSH_RADIUS = configuration.radius || 10;
   const [state, setState] = useState({
     brushRadius: DEFAULT_BRUSH_RADIUS,
-    brushColor: 'rgba(221, 85, 85, 1)', /* TODO: We shouldn't hardcode this color, in the future the SEG may set the colorLUT to whatever it wants. */
+    brushColor:
+      'rgba(221, 85, 85, 1)' /* TODO: We shouldn't hardcode this color, in the future the SEG may set the colorLUT to whatever it wants. */,
     selectedSegment: null,
     selectedSegmentation: null,
     showSegSettings: false,
     brushStackState: null,
     labelmapList: [],
-    segmentList: []
+    segmentList: [],
   });
 
   useEffect(() => {
@@ -57,7 +65,12 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
       log.warn('Segmentation Panel: labelmap modified', event);
       const module = cornerstoneTools.getModule('segmentation');
       const activeViewport = viewports[activeIndex];
-      const firstImageId = studyMetadata.getFirstImageId(activeViewport.displaySetInstanceUID);
+      const studyMetadata = studyMetadataManager.get(
+        activeViewport.StudyInstanceUID
+      );
+      const firstImageId = studyMetadata.getFirstImageId(
+        activeViewport.displaySetInstanceUID
+      );
       updateState('brushStackState', module.state.series[firstImageId]);
     };
 
@@ -86,20 +99,29 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
   useEffect(() => {
     const module = cornerstoneTools.getModule('segmentation');
     const activeViewport = viewports[activeIndex];
-    const studyMetadata = studyMetadataManager.get(activeViewport.StudyInstanceUID);
+    const studyMetadata = studyMetadataManager.get(
-    const firstImageId = studyMetadata.getFirstImageId(activeViewport.displaySetInstanceUID);
+      activeViewport.StudyInstanceUID
+    );
+    const firstImageId = studyMetadata.getFirstImageId(
+      activeViewport.displaySetInstanceUID
+    );
     const brushStackState = module.state.series[firstImageId];
 
     if (brushStackState) {
-      const labelmap3D = brushStackState.labelmaps3D[brushStackState.activeLabelmapIndex];
+      const labelmap3D =
-      const labelmapList = getLabelmapList(brushStackState, firstImageId, activeViewport);
+        brushStackState.labelmaps3D[brushStackState.activeLabelmapIndex];
-      const segmentList = getSegmentList(labelmap3D, firstImageId);
+      const labelmapList = getLabelmapList(
+        brushStackState,
+        firstImageId,
+        activeViewport
+      );
+      const segmentList = getSegmentList(labelmap3D, firstImageId, brushStackState);
       setState(state => ({
         ...state,
         brushStackState,
         selectedSegmentation: brushStackState.activeLabelmapIndex,
         labelmapList,
-        segmentList
+        segmentList,
       }));
     } else {
       setState(state => ({
@@ -108,14 +130,18 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
         segmentList: [],
       }));
     }
-  }, [studies, viewports, activeIndex]);
+  }, [studies, viewports, activeIndex, getLabelmapList, getSegmentList]);
 
   /* Handle open/closed panel behaviour */
   useEffect(() => {
-    updateState('showSegSettings', state.showSegSettings && !isOpen);
+    setState(state => ({
+      ...state,
+      showSegSettings: state.showSegSettings && !isOpen,
+    }));
   }, [isOpen]);
 
-  const getLabelmapList = (brushStackState, firstImageId, activeViewport) => {
+  const getLabelmapList = useCallback(
+    (brushStackState, firstImageId, activeViewport) => {
       /* Get list of SEG labelmaps specific to active viewport (reference series) */
       const referencedSegDisplaysets = _getReferencedSegDisplaysets(
         activeViewport.StudyInstanceUID,
@@ -150,9 +176,12 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
           },
         };
       });
-  };
+    },
+    [studies]
+  );
 
-  const getSegmentList = (labelmap3D, firstImageId) => {
+  const getSegmentList = useCallback(
+    (labelmap3D, firstImageId, brushStackState) => {
       /*
        * Newly created segments have no `meta`
        * So we instead build a list of all segment indexes in use
@@ -205,8 +234,64 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
             labelmap3D.activeSegmentIndex
           );
           updateState('selectedSegment', sameSegment ? null : segmentNumber);
+
+          const validIndexList = [];
+          labelmap3D.labelmaps2D.forEach((labelMap2D, index) => {
+            if (labelMap2D.segmentsOnLabelmap.includes(segmentNumber)) {
+              validIndexList.push(index);
+            }
+          });
+          const avg = array => array.reduce((a, b) => a + b) / array.length;
+          const average = avg(validIndexList);
+          const closest = validIndexList.reduce((prev, curr) => {
+            return Math.abs(curr - average) < Math.abs(prev - average)
+              ? curr
+              : prev;
+          });
+
+          const enabledElements = cornerstone.getEnabledElements();
+          const element = enabledElements[activeIndex].element;
+          const toolState = cornerstoneTools.getToolState(element, 'stack');
+
+          if (!toolState) {
+            return;
+          }
+
+          const imageIds = toolState.data[0].imageIds;
+          const imageId = imageIds[closest];
+          const frameIndex = imageIds.indexOf(imageId);
+
+          const SOPInstanceUID = cornerstone.metaData.get(
+            'SOPInstanceUID',
+            imageId
+          );
+          const StudyInstanceUID = cornerstone.metaData.get(
+            'StudyInstanceUID',
+            imageId
+          );
+
+          onSegItemClick({
+            StudyInstanceUID,
+            SOPInstanceUID,
+            frameIndex,
+            activeViewportIndex: activeIndex,
+          });
         };
 
+        const enabledElements = cornerstone.getEnabledElements();
+        const enabledElementViewport = enabledElements[activeIndex];
+
+        let isVisible = true;
+        if (enabledElementViewport) {
+          const element = enabledElementViewport.element;
+          const module = cornerstoneTools.getModule('segmentation');
+          isVisible = module.getters.isSegmentVisible(
+            element,
+            segmentNumber,
+            brushStackState.activeLabelmapIndex
+          );
+        }
+
         segmentList.push(
           <SegmentItem
             key={segmentNumber}
@@ -215,6 +300,16 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
             label={segmentLabel}
             index={segmentNumber}
             color={color}
+            visible={isVisible}
+            onVisibilityChange={() => {
+              const element = enabledElements[activeIndex].element;
+              module.setters.toggleSegmentVisibility(
+                element,
+                segmentNumber,
+                brushStackState.activeLabelmapIndex
+              );
+              refreshViewport();
+            }}
           />
         );
       }
@@ -227,7 +322,9 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
        * If now, add "no-meta" class
        * Show default name
        */
-  };
+    },
+    [activeIndex, onSegItemClick, state.selectedSegment]
+  );
 
   const updateState = (field, value) => {
     setState(state => ({ ...state, [field]: value }));
@@ -270,8 +367,7 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
     }
 
     const module = cornerstoneTools.getModule('segmentation');
-    const colorLutTable =
+    const colorLutTable = module.state.colorLutTables[labelmap3D.colorLUTIndex];
-      module.state.colorLutTables[labelmap3D.colorLUTIndex];
     const color = colorLutTable[labelmap3D.activeSegmentIndex];
 
     return `rgba(${color.join(',')})`;
@@ -329,7 +425,9 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
         <div className="segmentations">
           <SegmentationSelect
             value={
-              state.labelmapList.find(i => i.value === state.selectedSegmentation) || null
+              state.labelmapList.find(
+                i => i.value === state.selectedSegmentation
+              ) || null
             }
             formatOptionLabel={SegmentationItem}
             options={state.labelmapList}

extensions/dicom-segmentation/src/components/SegmentationSelect.js

@@ -17,6 +17,10 @@ const defaultColor = computedstyle.getPropertyValue('--default-color');
 const uiGrayDark = computedstyle.getPropertyValue('--ui-gray-dark');
 
 const segmentationSelectStyles = {
+  singleValue: (base, state) => ({
+    ...base,
+    width: '100%'
+  }),
   control: (base, state) => ({
     ...base,
     cursor: 'pointer',

extensions/dicom-segmentation/src/index.js

@@ -1,7 +1,9 @@
+import React from 'react';
+
 import init from './init.js';
 import toolbarModule from './toolbarModule.js';
-import panelModule from './panelModule.js';
 import sopClassHandlerModule from './OHIFDicomSegSopClassHandler.js';
+import SegmentationPanel from './components/SegmentationPanel/SegmentationPanel.js';
 
 export default {
   /**
@@ -21,8 +23,54 @@ export default {
   getToolbarModule({ servicesManager }) {
     return toolbarModule;
   },
-  getPanelModule({ servicesManager }) {
+  getPanelModule({ commandsManager }) {
-    return panelModule;
+    const ExtendedSegmentationPanel = props => {
+      const segItemClickHandler = segData => {
+        commandsManager.runCommand('jumpToImage', segData);
+      };
+
+      return (
+        <SegmentationPanel {...props} onSegItemClick={segItemClickHandler} />
+      );
+    };
+
+    return {
+      menuOptions: [
+        {
+          icon: 'list',
+          label: 'Segmentations',
+          target: 'segmentation-panel',
+          isDisabled: studies => {
+            if (!studies) {
+              return true;
+            }
+
+            for (let i = 0; i < studies.length; i++) {
+              const study = studies[i];
+
+              if (study && study.series) {
+                for (let j = 0; j < study.series.length; j++) {
+                  const series = study.series[j];
+
+                  if (series.Modality === 'SEG') {
+                    return false;
+                  }
+                }
+              }
+            }
+
+            return true;
+          },
+        },
+      ],
+      components: [
+        {
+          id: 'segmentation-panel',
+          component: ExtendedSegmentationPanel,
+        },
+      ],
+      defaultContext: ['VIEWER'],
+    };
   },
   getSopClassHandlerModule({ servicesManager }) {
     return sopClassHandlerModule;

extensions/dicom-segmentation/src/panelModule.js

@@ -1,39 +0,0 @@
-import SegmentationPanel from './components/SegmentationPanel/SegmentationPanel.js';
-
-export default {
-  menuOptions: [
-    {
-      icon: 'list',
-      label: 'Segmentations',
-      target: 'segmentation-panel',
-      isDisabled: studies => {
-        if (!studies) {
-          return true;
-        }
-
-        for (let i = 0; i < studies.length; i++) {
-          const study = studies[i];
-
-          if (study && study.series) {
-            for (let j = 0; j < study.series.length; j++) {
-              const series = study.series[j];
-
-              if (series.Modality === 'SEG') {
-                return false;
-              }
-            }
-          }
-        }
-
-        return true;
-      },
-    },
-  ],
-  components: [
-    {
-      id: 'segmentation-panel',
-      component: SegmentationPanel,
-    },
-  ],
-  defaultContext: ['VIEWER'],
-};

extensions/vtk/package.json

@@ -35,7 +35,7 @@
     "cornerstone-core": "^2.2.8",
     "cornerstone-tools": "4.12.5",
     "cornerstone-wado-image-loader": "^3.1.0",
-    "dcmjs": "^0.10.1",
+    "dcmjs": "^0.12.2",
     "dicom-parser": "^1.8.3",
     "i18next": "^17.0.3",
     "i18next-browser-languagedetector": "^3.0.1",

platform/core/package.json

@@ -39,7 +39,7 @@
   "dependencies": {
     "@babel/runtime": "^7.5.5",
     "ajv": "^6.10.0",
-    "dcmjs": "^0.12.0",
+    "dcmjs": "^0.12.2",
     "dicomweb-client": "^0.6.0",
     "immer": "6.0.2",
     "isomorphic-base64": "^1.0.2",

platform/core/src/classes/MetadataProvider.js

@@ -400,6 +400,7 @@ class MetadataProvider {
 
       case WADO_IMAGE_LOADER_TAGS.GENERAL_IMAGE_MODULE:
         metadata = {
+          sopInstanceUid: instance.SOPInstanceUID,
           instanceNumber: instance.InstanceNumber,
           lossyImageCompression: instance.LossyImageCompression,
           lossyImageCompressionRatio: instance.LossyImageCompressionRatio,

platform/viewer/package.json

@@ -67,7 +67,7 @@
     "cornerstone-math": "^0.1.8",
     "cornerstone-tools": "4.12.5",
     "cornerstone-wado-image-loader": "^3.1.0",
-    "dcmjs": "^0.12.0",
+    "dcmjs": "^0.12.2",
     "dicom-parser": "^1.8.3",
     "dicomweb-client": "^0.4.4",
     "hammerjs": "^2.0.8",

yarn.lock

@@ -6534,10 +6534,10 @@ dateformat@^3.0.0:
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
-dcmjs@^0.12.0:
+dcmjs@^0.12.2:
-  version "0.12.0"
+  version "0.12.2"
-  resolved "https://registry.yarnpkg.com/dcmjs/-/dcmjs-0.12.0.tgz#8b1634f9b66e452075295f5d1f2c5bf3dabdf03e"
+  resolved "https://registry.yarnpkg.com/dcmjs/-/dcmjs-0.12.2.tgz#1c16e19c27ff43202abc7cd25c5ecd6d8bf7672e"
-  integrity sha512-AZAnFMvzAxUv5+KWoZcxnTYflLKk0rNPeeFt2KrVAgaExFBFfDgJQh1lEgqdNlIP+XQDFrEEUmp726SQhgmVCg==
+  integrity sha512-B7cEVCfDi3mOLKoBYUMYy+6COjLZhtKaesNpq5XNA4IbEH4EJYVweJfiI9gsR5hypv9LAPg72xG/xrbqjy8TgQ==
   dependencies:
     "@babel/polyfill" "^7.8.3"
     "@babel/runtime" "^7.8.4"