feat: customize cornerstone-SR-extension load toolbar

extensions/cornerstone-dicom-sr/src/customizations/viewportButtons.tsx

@@ -0,0 +1,21 @@
+import { ViewportActionButton } from '@ohif/ui-next';
+import i18n from '@ohif/i18n';
+import React from 'react';
+
+export default {
+  'cornerstone-dicom-sr.viewportButtons': [
+    {
+      // A base/default button for loading measurements. It is added to the toolbar below.
+      // Customizations to this button can be made in the mode or by another extension.
+      // For example, the button label can be changed and/or the command to clear
+      // the measurements can be dropped.
+      id: 'loadSRMeasurements',
+      component: props => (
+        <ViewportActionButton {...props}>{i18n.t('Common:LOAD')}</ViewportActionButton>
+      ),
+      props: {
+        commands: ['clearMeasurements', 'loadSRMeasurements'],
+      },
+    },
+  ],
+};

extensions/cornerstone-dicom-sr/src/getCustomizationModules.ts

@@ -0,0 +1,14 @@
+import viewportButtons from './customizations/viewportButtons';
+
+function getCustomizationModule() {
+  return [
+    {
+      name: 'default',
+      value: {
+        ...viewportButtons,
+      },
+    },
+  ];
+}
+
+export default getCustomizationModule;

extensions/cornerstone-dicom-sr/src/index.tsx

@@ -9,6 +9,7 @@ import toolNames from './tools/toolNames';
 import hydrateStructuredReport from './utils/hydrateStructuredReport';
 import createReferencedImageDisplaySet from './utils/createReferencedImageDisplaySet';
 import Enums from './enums';
+import getCustomizationModule from './getCustomizationModules';
 
 const Component = React.lazy(() => {
   return import(/* webpackPrefetch: true */ './components/OHIFCornerstoneSRViewport');
@@ -67,6 +68,7 @@ const dicomSRExtension = {
       },
     ];
   },
+  getCustomizationModule,
 };
 
 export default dicomSRExtension;

extensions/cornerstone-dicom-sr/src/onModeEnter.tsx

@@ -5,7 +5,7 @@ import { ViewportActionButton } from '@ohif/ui';
 import i18n from '@ohif/i18n';
 
 export default function onModeEnter({ servicesManager }) {
-  const { displaySetService, toolbarService } = servicesManager.services;
+  const { displaySetService, toolbarService, customizationService } = servicesManager.services;
   const displaySetCache = displaySetService.getDisplaySetCache();
 
   const srDisplaySets = [...displaySetCache.values()].filter(
@@ -17,23 +17,15 @@ export default function onModeEnter({ servicesManager }) {
     ds.isHydrated = false;
   });
 
-  toolbarService.addButtons([
-    {
-      // A base/default button for loading measurements. It is added to the toolbar below.
-      // Customizations to this button can be made in the mode or by another extension.
-      // For example, the button label can be changed and/or the command to clear
-      // the measurements can be dropped.
-      id: 'loadSRMeasurements',
-      component: props => (
-        <ViewportActionButton {...props}>{i18n.t('Common:LOAD')}</ViewportActionButton>
-      ),
-      props: {
-        commands: ['clearMeasurements', 'loadSRMeasurements'],
-      },
-    },
-  ]);
+  const buttons =
+    customizationService.getCustomization('cornerstone-dicom-sr.viewportButtons') ?? [];
+
+  toolbarService.addButtons(buttons);
 
   // The toolbar used in the viewport's status bar. Modes and extensions can further customize
   // it to optionally add other buttons.
-  toolbarService.createButtonSection('loadSRMeasurements', ['loadSRMeasurements']);
+  toolbarService.createButtonSection(
+    'loadSRMeasurements',
+    buttons.map(button => button.id)
+  );
 }

extensions/measurement-tracking/src/customizations/viewportButtons.tsx

@@ -0,0 +1,22 @@
+import { ViewportActionButton } from '@ohif/ui-next';
+import i18n from '@ohif/i18n';
+import React from 'react';
+
+export default {
+  'cornerstone-dicom-sr.viewportButtons': {
+    $set: [
+      {
+        // A button for loading tracked, SR measurements.
+        // Note that the command run is registered in TrackedMeasurementsContext
+        // because it must be bound to a React context's data.
+        id: 'loadSRMeasurements',
+        component: props => (
+          <ViewportActionButton {...props}>{i18n.t('Common:LOAD')}</ViewportActionButton>
+        ),
+        props: {
+          commands: ['loadTrackedSRMeasurements'],
+        },
+      },
+    ],
+  },
+};

extensions/measurement-tracking/src/getCustomizationModules.ts

@@ -0,0 +1,14 @@
+import viewportButtons from './customizations/viewportButtons';
+
+function getCustomizationModule() {
+  return [
+    {
+      name: 'default',
+      value: {
+        ...viewportButtons,
+      },
+    },
+  ];
+}
+
+export default getCustomizationModule;

extensions/measurement-tracking/src/index.tsx

@@ -1,11 +1,8 @@
-import React from 'react';
-
 import getContextModule from './getContextModule';
+import getCustomizationModule from './getCustomizationModules';
 import getPanelModule from './getPanelModule';
 import getViewportModule from './getViewportModule';
 import { id } from './id.js';
-import { ViewportActionButton } from '@ohif/ui';
-import i18n from '@ohif/i18n';
 
 const measurementTrackingExtension = {
   /**
@@ -16,28 +13,7 @@ const measurementTrackingExtension = {
   getContextModule,
   getPanelModule,
   getViewportModule,
-
-  onModeEnter({ servicesManager }) {
-    const { toolbarService } = servicesManager.services;
-
-    toolbarService.addButtons(
-      [
-        {
-          // A button for loading tracked, SR measurements.
-          // Note that the command run is registered in TrackedMeasurementsContext
-          // because it must be bound to a React context's data.
-          id: 'loadSRMeasurements',
-          component: props => (
-            <ViewportActionButton {...props}>{i18n.t('Common:LOAD')}</ViewportActionButton>
-          ),
-          props: {
-            commands: ['loadTrackedSRMeasurements'],
-          },
-        },
-      ],
-      true // replace the button if it is already defined
-    );
-  },
+  getCustomizationModule,
 };
 
 export default measurementTrackingExtension;

platform/docs/docs/platform/services/customization-service/sampleCustomizations.tsx

@@ -952,6 +952,50 @@ window.config = {
       };
         `,
   },
+  {
+    id: 'cornerstone-dicom-sr.viewportButtons',
+    description:
+      'Configures which buttons appear on the top-left toolbar when you open the SR measurements viewport.',
+    default: `
+    [
+      {
+        id: 'loadSRMeasurements',
+        component: props => (
+          <ViewportActionButton {...props}>{i18n.t('Common:LOAD')}</ViewportActionButton>
+        ),
+        props: {
+          commands: ['clearMeasurements', 'loadSRMeasurements'],
+        },
+      },
+    ]`,
+    configuration: `
+  window.config = {
+    // rest of window config
+    customizationService: [{
+        'cornerstone-dicom-sr.viewportButtons': {
+            $set: [{
+                    id: 'replaceSRMeasurements',
+                    component: props => < ViewportActionButton {
+                        ...props
+                    } > REPLACE < /ViewportActionButton>,
+                    props: {
+                        commands: ['clearMeasurements', 'loadSRMeasurements'],
+                    },
+                },
+                {
+                    id: 'loadSRMeasurements',
+                    component: props => < ViewportActionButton {
+                        ...props
+                    } > LOAD < /ViewportActionButton>,
+                    props: {
+                        commands: ['loadSRMeasurements'],
+                    },
+                },
+            ],
+        },
+    }],
+  };`,
+  },
 ];
 
 export const segmentationCustomizations = [