feat: Update approach to better handle rtdose instead of disabling panel

Co-authored-by: Davide Punzo <punzodavide@hotmail.it>

extensions/dicom-rt/src/components/RTPanel/RTPanel.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';
@@ -31,19 +31,20 @@ const refreshViewport = () => {
  *
  * @param {Object} props
  * @param {Array} props.studies
- * @param {Array} props.viewports - viewportSpecificData
+ * @param {Array} props.getActiveViewport - get active viewport data
  * @param {number} props.activeIndex - activeViewportIndex
  * @param {number} props.isOpen - isOpen
  * @returns component
  */
 const RTPanel = ({
   studies,
-  viewports,
   activeIndex,
   isOpen,
   onContourItemClick,
   activeContexts = [],
   contexts = {},
+  activeViewport,
+  getActiveViewport
 }) => {
   const isVTK = () => activeContexts.includes(contexts.VTK);
   const isCornerstone = () => activeContexts.includes(contexts.CORNERSTONE);
@@ -54,11 +55,11 @@ const RTPanel = ({
     referencedDisplaysets: [],
     sets: [],
     selectedSet: null,
+    isLocked: false
   };
 
   const [state, setState] = useState(DEFAULT_STATE);
   const [showSettings, setShowSettings] = useState(false);
-  const activeViewport = viewports[activeIndex];
 
   /*
    * TODO: Improve the way we notify parts of the app that depends on rts to be loaded.
@@ -81,27 +82,32 @@ const RTPanel = ({
     document.addEventListener('extensiondicomrtrtloaded', updateStructureSets);
 
     return () => {
-      document.removeEventListener(
+      document.removeEventListener('extensiondicomrtrtloaded', updateStructureSets);
-        'extensiondicomrtrtloaded',
-        updateStructureSets
-      );
     };
   }, []);
 
+  useEffect(() => {
+    const studyMetadata = studyMetadataManager.get(activeViewport.StudyInstanceUID);
+    const referencedDisplaysets = studyMetadata.getDerivedDatasets({
+      referencedSeriesInstanceUID: activeViewport.SeriesInstanceUID,
+      Modality: 'RTSTRUCT',
+    });
+    setState(state => ({ ...state, isLocked: !referencedDisplaysets.length }));
+  }, [activeViewport]);
+
   const updateStructureSets = () => {
+    const viewport = getActiveViewport();
     const module = cornerstoneTools.getModule('rtstruct');
     const StructureSets = module.state.StructureSets;
 
     if (StructureSets && StructureSets.length) {
       const viewportSets = module.getters.structuresSetsWhichReferenceSeriesInstanceUid(
-        activeViewport.SeriesInstanceUID
+        viewport.SeriesInstanceUID
       );
 
-      const studyMetadata = studyMetadataManager.get(
+      const studyMetadata = studyMetadataManager.get(viewport.StudyInstanceUID);
-        activeViewport.StudyInstanceUID
-      );
       const referencedDisplaysets = studyMetadata.getDerivedDatasets({
-        referencedSeriesInstanceUID: activeViewport.SeriesInstanceUID,
+        referencedSeriesInstanceUID: viewport.SeriesInstanceUID,
         Modality: 'RTSTRUCT',
       });
 
@@ -118,10 +124,6 @@ const RTPanel = ({
     }
   };
 
-  useEffect(() => {
-    updateStructureSets();
-  }, [studies, viewports, activeIndex]);
-
   useEffect(() => {
     setShowSettings(showSettings && !isOpen);
   }, [isOpen]);
@@ -232,6 +234,7 @@ const RTPanel = ({
     <div className="dcmrt-panel">
       <div className="dcmrt-panel-header">
         <h3>RT Structure Sets</h3>
+        {!state.isLocked && (
           <Icon
             className="cog-icon"
             name="cog"
@@ -239,22 +242,23 @@ const RTPanel = ({
             height="25px"
             onClick={() => setShowSettings(true)}
           />
-      </div>
-      {!state.referencedDisplaysets.length && (
-        <LoadingIndicator expand height="70px" width="70px" />
         )}
-      {state.sets &&
+      </div>
-        state.referencedDisplaysets.map(displaySet => {
+      {!state.isLocked && !state.referencedDisplaysets.length && <LoadingIndicator expand height="70px" width="70px" />}
+      {state.sets && state.referencedDisplaysets.map(displaySet => {
         const { SeriesInstanceUID, metadata, isLoaded } = displaySet;
 
         const module = cornerstoneTools.getModule('rtstruct');
         const sets = module.getters.structuresSetsWhichReferenceSeriesInstanceUid(
-            viewports[activeIndex].SeriesInstanceUID
+          activeViewport.SeriesInstanceUID
         );
 
         const loadedSet = sets.find(
           set => set.SeriesInstanceUID === SeriesInstanceUID
         );
+
+        if (!loadedSet) return null;
+
         return (
           <PanelSection
             key={SeriesInstanceUID}
@@ -276,17 +280,17 @@ const RTPanel = ({
                 module.setters.hideStructureSet(loadedSet.SeriesInstanceUID);
               }
               const sets = module.getters.structuresSetsWhichReferenceSeriesInstanceUid(
-                  viewports[activeIndex].SeriesInstanceUID
+                activeViewport.SeriesInstanceUID
               );
               setState(state => ({ ...state, sets }));
               refreshViewport();
             }}
             onExpandChange={async () => {
               if (!isLoaded) {
-                  await displaySet.load(viewports[activeIndex], studies);
+                await displaySet.load(activeViewport, studies);
                 const module = cornerstoneTools.getModule('rtstruct');
                 const sets = module.getters.structuresSetsWhichReferenceSeriesInstanceUid(
-                    viewports[activeIndex].SeriesInstanceUID
+                  activeViewport.SeriesInstanceUID
                 );
                 const selectedSet = sets.find(
                   set => set.SeriesInstanceUID === SeriesInstanceUID

platform/viewer/src/connectedComponents/Viewer.js

@@ -83,6 +83,8 @@ class Viewer extends Component {
         disassociate: this.disassociateStudy,
       },
     });
+
+    this._getActiveViewport = this._getActiveViewport.bind(this);
   }
 
   state = {
@@ -214,6 +216,10 @@ class Viewer extends Component {
     }
   }
 
+  _getActiveViewport() {
+    return this.props.viewports[this.props.activeViewportIndex];
+  }
+
   render() {
     let VisiblePanelLeft, VisiblePanelRight;
     const panelExtensions = extensionManager.modules[MODULE_TYPES.PANEL];
@@ -341,6 +347,8 @@ class Viewer extends Component {
                   viewports={this.props.viewports}
                   studies={this.props.studies}
                   activeIndex={this.props.activeViewportIndex}
+                  activeViewport={this.props.viewports[this.props.activeViewportIndex]}
+                  getActiveViewport={this._getActiveViewport}
                 />
               )}
             </SidePanel>
@@ -363,7 +371,7 @@ export default withDialog(Viewer);
  * @param {Study[]} studies
  * @param {DisplaySet[]} studies[].displaySets
  */
-const _mapStudiesToThumbnails = function(studies) {
+const _mapStudiesToThumbnails = function (studies) {
   return studies.map(study => {
     const { StudyInstanceUID } = study;