feat(customization): new customization service api (#4688)

modes/basic-test-mode/src/index.ts

@@ -86,7 +86,7 @@ function modeFactory() {
       initToolGroups(extensionManager, toolGroupService, commandsManager);
 
       // init customizations
-      customizationService.addModeCustomizations([
+      customizationService.setCustomizations([
         '@ohif/extension-test.customizationModule.custom-context-menu',
       ]);
 

modes/longitudinal/src/customizations.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import {
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuPortal,
-  DropdownMenuLabel,
-  Icons,
-} from '@ohif/ui-next';
-
-export const performCustomizations = customizationService => {
-  // Set the custom SegmentationTable
-  customizationService.addModeCustomizations([
-    // To disable editing in the SegmentationTable
-    {
-      id: 'PanelSegmentation.disableEditing',
-      disableEditing: true,
-    },
-    // to only show current study in the panel study browser
-    // {
-    //   id: 'PanelStudyBrowser.studyMode',
-    //   mode: 'primary',
-    // },
-    // To disable editing in the MeasurementTable
-    // {
-    //   id: 'PanelMeasurement.disableEditing',
-    //   disableEditing: true,
-    // },
-    //   {
-    //     id: 'measurementLabels',
-    //     labelOnMeasure: true,
-    //     exclusive: true,
-    //     items: [
-    //       { value: 'Head', label: 'Head' },
-    //       { value: 'Shoulder', label: 'Shoulder' },
-    //       { value: 'Knee', label: 'Knee' },
-    //       { value: 'Toe', label: 'Toe' },
-    //     ],
-    //   },
-    /**
-     * Custom Dropdown Menu Item
-     */
-    // {
-    //   id: 'PanelSegmentation.CustomDropdownMenuContent',
-    //   content: ({
-    //     activeSegmentation,
-    //     onSegmentationAdd,
-    //     onSegmentationRemoveFromViewport,
-    //     onSegmentationEdit,
-    //     onSegmentationDelete,
-    //     allowExport,
-    //     storeSegmentation,
-    //     onSegmentationDownload,
-    //     onSegmentationDownloadRTSS,
-    //     t,
-    //   }) => (
-    //     <DropdownMenuContent align="start">
-    //       <DropdownMenuItem onClick={() => onSegmentationDelete(activeSegmentation.id)}>
-    //         <Icons.Delete className="text-red-600" />
-    //         <span className="pl-2 text-red-600">{t('My Custom Dropdown Menu Item')}</span>
-    //       </DropdownMenuItem>
-    //     </DropdownMenuContent>
-    //   ),
-    // },
-  ]);
-};

modes/longitudinal/src/index.ts

@@ -4,7 +4,6 @@ import { id } from './id';
 import initToolGroups from './initToolGroups';
 import toolbarButtons from './toolbarButtons';
 import moreTools from './moreTools';
-import { performCustomizations } from './customizations';
 
 // Allow this mode by excluding non-imaging modalities such as SR, SEG
 // Also, SM is not a simple imaging modalities, so exclude it.
@@ -89,15 +88,12 @@ function modeFactory({ modeConfiguration }) {
         measurementService,
         toolbarService,
         toolGroupService,
-        customizationService,
         panelService,
         segmentationService,
       } = servicesManager.services;
 
       measurementService.clearMeasurements();
 
-      performCustomizations(customizationService);
-
       // Init Default and SR ToolGroups
       initToolGroups(extensionManager, toolGroupService, commandsManager, this.labelConfig);
 

modes/preclinical-4d/src/index.tsx

@@ -62,36 +62,19 @@ function modeFactory({ modeConfiguration }) {
 
       // the primary button section is created in the workflow steps
       // specific to the step
-      customizationService.addModeCustomizations([
-        {
-          id: 'PanelSegmentation.tableMode',
-          mode: 'expanded',
+      customizationService.setCustomizations({
+        'panelSegmentation.tableMode': {
+          $set: 'expanded',
         },
-        {
-          id: 'PanelSegmentation.onSegmentationAdd',
-          onSegmentationAdd: () => {
+        'panelSegmentation.onSegmentationAdd': {
+          $set: () => {
             commandsManager.run('createNewLabelMapForDynamicVolume');
           },
         },
-        {
-          id: 'PanelSegmentation.showAddSegment',
-          showAddSegment: false,
+        'panelSegmentation.showAddSegment': {
+          $set: false,
         },
-        {
-          id: 'PanelSegmentation.readableText',
-          // remove following if you are not interested in that stats
-          readableText: {
-            lesionStats: 'Lesion Statistics',
-            minValue: 'Minimum Value',
-            maxValue: 'Maximum Value',
-            meanValue: 'Mean Value (ml)',
-            volume: 'Volume',
-            suvPeak: 'SUV Peak',
-            suvMax: 'Maximum SUV',
-            suvMaxIJK: 'SUV Max IJK',
-          },
-        },
-      ]);
+      });
 
       // Auto play the clip initially when the volumes are loaded
       const { unsubscribe } = cornerstoneViewportService.subscribe(

modes/tmtv/src/index.ts

@@ -101,33 +101,16 @@ function modeFactory({ modeConfiguration }) {
         'BrushTools',
       ]);
 
-      customizationService.addModeCustomizations([
-        {
-          id: 'PanelSegmentation.tableMode',
-          mode: 'expanded',
+      customizationService.setCustomizations({
+        'panelSegmentation.tableMode': {
+          $set: 'expanded',
         },
-        {
-          id: 'PanelSegmentation.onSegmentationAdd',
-          onSegmentationAdd: () => {
+        'panelSegmentation.onSegmentationAdd': {
+          $set: () => {
             commandsManager.run('createNewLabelmapFromPT');
           },
         },
-        {
-          id: 'PanelSegmentation.readableText',
-          // remove following if you are not interested in that stats
-          readableText: {
-            lesionStats: 'Lesion Statistics',
-            minValue: 'Minimum Value',
-            maxValue: 'Maximum Value',
-            meanValue: 'Mean Value',
-            volume: 'Volume (ml)',
-            suvPeak: 'SUV Peak',
-            suvMax: 'Maximum SUV',
-            suvMaxIJK: 'SUV Max IJK',
-            lesionGlyoclysisStats: 'Lesion Glycolysis',
-          },
-        },
-      ]);
+      });
 
       // For the hanging protocol we need to decide on the window level
       // based on whether the SUV is corrected or not, hence we can't hard