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

platform/ui/src/components/MeasurementTable/MeasurementTable.tsx

@@ -17,11 +17,7 @@ const MeasurementTable = ({
   const { t } = useTranslation('MeasurementTable');
   const amount = data.length;
 
-  const itemCustomization = customizationService.getCustomization('MeasurementItem', {
-    id: 'MeasurementItem',
-    content: MeasurementItem,
-    contentProps: {},
-  }) as Types.Customization;
+  const itemCustomization = customizationService.getCustomization('MeasurementItem');
 
   const CustomMeasurementItem = itemCustomization.content;
 

platform/ui/src/components/SelectTree/SelectTree.tsx

@@ -186,7 +186,7 @@ export class SelectTree extends Component<PropType> {
           <div className="flex w-full flex-col">
             {this.props.items.length > 0 && (
               <div className="absolute mt-2 mr-2.5 mb-3 ml-3 h-4 w-4">
-                <Icons.Magnifier fill="#a3a3a3" />
+                <Icons.Search fill="#a3a3a3" />
               </div>
             )}
             <input

platform/ui/src/components/StudyBrowser/StudyBrowser.tsx

@@ -43,7 +43,7 @@ const StudyBrowser = ({
   const { experimentalStudyBrowserSort } = window.config;
   const getTabContent = () => {
     const tabData = tabs.find(tab => tab.name === activeTabName);
-    return tabData.studies.map(
+    return tabData?.studies?.map(
       ({ studyInstanceUid, date, description, numInstances, modalities, displaySets }) => {
         if (!experimentalStudyBrowserSort) {
           sortStudySeries(displaySets);
@@ -96,7 +96,7 @@ const StudyBrowser = ({
             const isActive = activeTabName === name;
             const isDisabled = !studies.length;
             // Apply the contrasting color for brighter button color visibility
-            const classStudyBrowser = customizationService?.getModeCustomization(
+            const classStudyBrowser = customizationService?.getCustomization(
               'class:StudyBrowser'
             ) || {
               true: 'default',

platform/ui/src/components/StudyBrowserSort/StudyBrowserSort.tsx

@@ -3,7 +3,7 @@ import { Icons } from '@ohif/ui-next';
 
 export default function StudyBrowserSort({ servicesManager }: withAppTypes) {
   const { customizationService, displaySetService } = servicesManager.services;
-  const { values: sortFunctions } = customizationService.get('studyBrowser.sortFunctions');
+  const sortFunctions = customizationService.getCustomization('studyBrowser.sortFunctions');
 
   const [selectedSort, setSelectedSort] = useState(sortFunctions[0]);
   const [sortDirection, setSortDirection] = useState('ascending');