Extract event

extensions/dicom-rt/src/index.js

@@ -43,6 +43,23 @@ export default {
       );
     };
 
+    const RTPanelTabChangedEvent = 'rt-panel-tab-updated';
+
+    /**
+     * Trigger's an event to update the state of the panel's RoundedButtonGroup.
+     *
+     * This is required to avoid extension state
+     * coupling with the viewer's ToolbarRow component.
+     *
+     * @param {object} data
+     */
+    const triggerRTPanelUpdatedEvent = data => {
+      const event = new CustomEvent(RTPanelTabChangedEvent, {
+        detail: data,
+      });
+      document.dispatchEvent(event);
+    };
+
     const onRTStructsLoaded = ({ detail }) => {
       const { rtStructDisplaySet, referencedDisplaySet } = detail;
 
@@ -53,13 +70,10 @@ export default {
         referencedSeriesInstanceUID: referencedDisplaySet.SeriesInstanceUID,
         Modality: 'RTSTRUCT',
       });
-      const event = new CustomEvent('rt-panel-updated', {
+      triggerRTPanelUpdatedEvent({
-        detail: {
         badgeNumber: referencedDisplaysets.length,
         target: 'rt-panel',
-        },
       });
-      document.dispatchEvent(event);
     };
 
     document.addEventListener('extensiondicomrtrtloaded', onRTStructsLoaded);
@@ -70,7 +84,7 @@ export default {
           icon: 'list',
           label: 'RTSTRUCT',
           target: 'rt-panel',
-          stateEvent: 'rt-panel-updated',
+          stateEvent: RTPanelTabChangedEvent,
           isDisabled: (studies, activeViewport) => {
             if (!studies) {
               return true;

extensions/dicom-segmentation/src/index.js

@@ -82,6 +82,23 @@ export default {
       );
     };
 
+    const SegmentationPanelTabUpdatedEvent = 'segmentation-panel-tab-updated';
+
+    /**
+     * Trigger's an event to update the state of the panel's RoundedButtonGroup.
+     *
+     * This is required to avoid extension state
+     * coupling with the viewer's ToolbarRow component.
+     *
+     * @param {object} data
+     */
+    const triggerSegmentationPanelTabUpdatedEvent = data => {
+      const event = new CustomEvent(SegmentationPanelTabUpdatedEvent, {
+        detail: data,
+      });
+      document.dispatchEvent(event);
+    };
+
     const onSegmentationsLoaded = ({ detail }) => {
       const { segDisplaySet, segMetadata } = detail;
       const studyMetadata = studyMetadataManager.get(
@@ -91,13 +108,10 @@ export default {
         referencedSeriesInstanceUID: segMetadata.seriesInstanceUid,
         Modality: 'SEG',
       });
-      const event = new CustomEvent('segmentation-panel-updated', {
+      triggerSegmentationPanelTabUpdatedEvent({
-        detail: {
         badgeNumber: referencedDisplaysets.length,
         target: 'segmentation-panel',
-        },
       });
-      document.dispatchEvent(event);
     };
 
     document.addEventListener(
@@ -111,7 +125,7 @@ export default {
           icon: 'list',
           label: 'Segmentations',
           target: 'segmentation-panel',
-          stateEvent: 'segmentation-panel-updated',
+          stateEvent: SegmentationPanelTabUpdatedEvent,
           isDisabled: studies => {
             if (!studies) {
               return true;

platform/viewer/src/connectedComponents/ToolbarRow.js

@@ -112,10 +112,6 @@ class ToolbarRow extends Component {
       icon: 'th-large',
       bottomLabel: this.props.t('Series'),
     });
-
-    // this.setState({
-    //   toolbarButtons: _getVisibleToolbarButtons.call(this),
-    // });
   }
 
   componentDidMount() {