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

platform/app/public/config/customization.js

@@ -15,52 +15,6 @@ window.config = {
   customizationService: [
     '@ohif/extension-default.customizationModule.datasources',
     '@ohif/extension-default.customizationModule.helloPage',
-
-    {
-      id: '@ohif/cornerstoneOverlay',
-      // Append recursively, rather than replacing
-      merge: 'Append',
-      topRightItems: {
-        id: 'cornerstoneOverlayTopRight',
-        items: [
-          {
-            id: 'PatientNameOverlay',
-            // Note below that here we are using the customization prototype of
-            // `ohif.overlayItem` which was registered to the customization module in
-            // `ohif/extension-default` extension.
-            customizationType: 'ohif.overlayItem',
-            // the following props are passed to the `ohif.overlayItem` prototype
-            // which is used to render the overlay item based on the label, color,
-            // conditions, etc.
-            attribute: 'PatientName',
-            label: 'PN:',
-            title: 'Patient Name',
-            color: 'yellow',
-            condition: ({ instance }) => instance?.PatientName,
-            contentF: ({ instance, formatters: { formatPN } }) =>
-              formatPN(instance.PatientName) +
-              (instance.PatientSex ? ' (' + instance.PatientSex + ')' : ''),
-          },
-        ],
-      },
-
-      topLeftItems: {
-        items: {
-          // Note the -10000 means -10000 + length of existing list, which is
-          // much before the start of hte list, so put the new value at the start.
-          '-10000': {
-            id: 'Species',
-            customizationType: 'ohif.overlayItem',
-            label: 'Species:',
-            color: 'red',
-            background: 'green',
-            condition: ({ instance }) => instance?.PatientSpeciesDescription,
-            contentF: ({ instance }) =>
-              instance.PatientSpeciesDescription + '/' + instance.PatientBreedDescription,
-          },
-        },
-      },
-    },
   ],
 
   defaultDataSourceName: 'e2e',

platform/app/src/routes/Mode/defaultRouteInit.ts

@@ -1,10 +1,8 @@
 import getStudies from './studiesList';
-import { DicomMetadataStore, log } from '@ohif/core';
+import { DicomMetadataStore, log, utils, Enums } from '@ohif/core';
 import isSeriesFilterUsed from '../../utils/isSeriesFilterUsed';
 
-import { utils, Enums } from '@ohif/core';
-
-const { sortingCriteria, getSplitParam } = utils;
+const { getSplitParam } = utils;
 
 /**
  * Initialize the route.
@@ -85,9 +83,7 @@ export async function defaultRouteInit(
       StudyInstanceUID,
       filters,
       returnPromises: true,
-      sortCriteria:
-        customizationService.get('sortingCriteria') ||
-        sortingCriteria.seriesSortCriteria.seriesInfoSortingCriteria,
+      sortCriteria: customizationService.getCustomization('sortingCriteria'),
     })
   );
 

platform/app/src/routes/WorkList/WorkList.tsx

@@ -525,8 +525,7 @@ function WorkList({
   }
 
   const { customizationService } = servicesManager.services;
-  const { component: DicomUploadComponent } =
-    customizationService.getCustomization('dicomUploadComponent') || {};
+  const DicomUploadComponent = customizationService.getCustomization('dicomUploadComponent');
 
   const uploadProps =
     DicomUploadComponent && dataSource.getConfig()?.dicomUploadEnabled
@@ -554,8 +553,9 @@ function WorkList({
         }
       : undefined;
 
-  const { component: dataSourceConfigurationComponent } =
-    customizationService.get('ohif.dataSourceConfigurationComponent') ?? {};
+  const dataSourceConfigurationComponent = customizationService.getCustomization(
+    'ohif.dataSourceConfigurationComponent'
+  );
 
   return (
     <div className="flex h-screen flex-col bg-black">

platform/app/src/routes/index.tsx

@@ -108,7 +108,8 @@ const createRoutes = ({
     props: { children: WorkList, servicesManager, extensionManager },
   };
 
-  const customRoutes = customizationService.getGlobalCustomization('customRoutes');
+  const customRoutes = customizationService.getCustomization('routes.customRoutes');
+
   const allRoutes = [
     ...routes,
     ...(showStudyList ? [WorkListRoute] : []),