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

extensions/default/src/customizations/contextMenuCustomization.ts

@@ -0,0 +1,25 @@
+import { CustomizationService } from '@ohif/core';
+
+export default {
+  'ohif.contextMenu': {
+    $transform: function (customizationService: CustomizationService) {
+      /**
+       * Applies the inheritsFrom to all the menu items.
+       * This function clones the object and child objects to prevent
+       * changes to the original customization object.
+       */
+      // Don't modify the children, as those are copied by reference
+      const clonedObject = { ...this };
+      clonedObject.menus = this.menus.map(menu => ({ ...menu }));
+
+      for (const menu of clonedObject.menus) {
+        const { items: originalItems } = menu;
+        menu.items = [];
+        for (const item of originalItems) {
+          menu.items.push(customizationService.transform(item));
+        }
+      }
+      return clonedObject;
+    },
+  },
+};

extensions/default/src/customizations/customRoutesCustomization.ts

@@ -0,0 +1,6 @@
+export default {
+  'routes.customRoutes': {
+    routes: [],
+    notFoundRoute: null,
+  },
+};

extensions/default/src/customizations/dataSourceConfigurationCustomization.ts

@@ -0,0 +1,19 @@
+import DataSourceConfigurationComponent from '../Components/DataSourceConfigurationComponent';
+import { GoogleCloudDataSourceConfigurationAPI } from '../DataSourceConfigurationAPI/GoogleCloudDataSourceConfigurationAPI';
+
+export default function getDataSourceConfigurationCustomization({
+  servicesManager,
+  extensionManager,
+}) {
+  return {
+    // the generic GUI component to configure a data source using an instance of a BaseDataSourceConfigurationAPI
+    'ohif.dataSourceConfigurationComponent': DataSourceConfigurationComponent.bind(null, {
+      servicesManager,
+      extensionManager,
+    }),
+
+    // The factory for creating an instance of a BaseDataSourceConfigurationAPI for Google Cloud Healthcare
+    'ohif.dataSourceConfigurationAPI.google': (dataSourceName: string) =>
+      new GoogleCloudDataSourceConfigurationAPI(dataSourceName, servicesManager, extensionManager),
+  };
+}

extensions/default/src/customizations/datasourcesCustomization.tsx

@@ -0,0 +1,14 @@
+import DataSourceSelector from '../Panels/DataSourceSelector';
+
+export default {
+  'routes.customRoutes': {
+    routes: {
+      $push: [
+        {
+          path: '/datasources',
+          children: DataSourceSelector,
+        },
+      ],
+    },
+  },
+};

extensions/default/src/customizations/defaultContextMenuCustomization.ts

@@ -0,0 +1,22 @@
+export default {
+  measurementsContextMenu: {
+    inheritsFrom: 'ohif.contextMenu',
+    menus: [
+      // Get the items from the UI Customization for the menu name (and have a custom name)
+      {
+        id: 'forExistingMeasurement',
+        selector: ({ nearbyToolData }) => !!nearbyToolData,
+        items: [
+          {
+            label: 'Delete measurement',
+            commands: 'deleteMeasurement',
+          },
+          {
+            label: 'Add Label',
+            commands: 'setMeasurementLabel',
+          },
+        ],
+      },
+    ],
+  },
+};

extensions/default/src/customizations/helloPageCustomization.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export default {
+  'routes.customRoutes': {
+    routes: {
+      $push: [
+        {
+          path: '/custom',
+          children: () => <h1 style={{ color: 'white' }}>Hello Custom Route</h1>,
+        },
+      ],
+    },
+  },
+};

extensions/default/src/customizations/menuContentCustomization.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import {
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuPortal,
+  DropdownMenuSubContent,
+  DropdownMenuItem,
+  Icons,
+} from '@ohif/ui-next';
+
+export default {
+  'ohif.menuContent': function (props) {
+    const { item: topLevelItem, commandsManager, servicesManager, ...rest } = props;
+
+    const content = function (subProps) {
+      const { item: subItem } = subProps;
+
+      // Regular menu item
+      const isDisabled = subItem.selector && !subItem.selector({ servicesManager });
+
+      return (
+        <DropdownMenuItem
+          disabled={isDisabled}
+          onSelect={() => {
+            commandsManager.runAsync(subItem.commands, {
+              ...subItem.commandOptions,
+              ...rest,
+            });
+          }}
+          className="gap-[6px]"
+        >
+          {subItem.iconName && (
+            <Icons.ByName
+              name={subItem.iconName}
+              className="-ml-1"
+            />
+          )}
+          {subItem.label}
+        </DropdownMenuItem>
+      );
+    };
+
+    // If item has sub-items, render a submenu
+    if (topLevelItem.items) {
+      return (
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger className="gap-[6px]">
+            {topLevelItem.iconName && (
+              <Icons.ByName
+                name={topLevelItem.iconName}
+                className="-ml-1"
+              />
+            )}
+            {topLevelItem.label}
+          </DropdownMenuSubTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent>
+              {topLevelItem.items.map(subItem => content({ ...props, item: subItem }))}
+            </DropdownMenuSubContent>
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
+      );
+    }
+
+    return content({ ...props, item: topLevelItem });
+  },
+};

extensions/default/src/customizations/multimonitorCustomization.ts

@@ -0,0 +1,63 @@
+export default {
+  'studyBrowser.studyMenuItems': {
+    $push: [
+      {
+        id: 'applyHangingProtocol',
+        label: 'Apply Hanging Protocol',
+        iconName: 'ViewportViews',
+        items: [
+          {
+            id: 'applyDefaultProtocol',
+            label: 'Default',
+            commands: [
+              'loadStudy',
+              {
+                commandName: 'setHangingProtocol',
+                commandOptions: {
+                  protocolId: 'default',
+                },
+              },
+            ],
+          },
+          {
+            id: 'applyMPRProtocol',
+            label: '2x2 Grid',
+            commands: [
+              'loadStudy',
+              {
+                commandName: 'setHangingProtocol',
+                commandOptions: {
+                  protocolId: '@ohif/mnGrid',
+                },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'showInOtherMonitor',
+        label: 'Launch On Second Monitor',
+        iconName: 'DicomTagBrowser',
+        selector: ({ servicesManager }) => {
+          const { multiMonitorService } = servicesManager.services;
+          return multiMonitorService.isMultimonitor;
+        },
+        commands: {
+          commandName: 'multimonitor',
+          commandOptions: {
+            hashParams: '&hangingProtocolId=@ohif/mnGrid8',
+            commands: [
+              'loadStudy',
+              {
+                commandName: 'setHangingProtocol',
+                commandOptions: {
+                  protocolId: '@ohif/mnGrid8',
+                },
+              },
+            ],
+          },
+        },
+      },
+    ],
+  },
+};

extensions/default/src/customizations/overlayItemCustomization.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+export default {
+  'ohif.overlayItem': function (props) {
+    if (this.condition && !this.condition(props)) {
+      return null;
+    }
+
+    const { instance } = props;
+    const value =
+      instance && this.attribute
+        ? instance[this.attribute]
+        : this.contentF && typeof this.contentF === 'function'
+          ? this.contentF(props)
+          : null;
+    if (!value) {
+      return null;
+    }
+
+    return (
+      <span
+        className="overlay-item flex flex-row"
+        style={{ color: this.color || undefined }}
+        title={this.title || ''}
+      >
+        {this.label && <span className="mr-1 shrink-0">{this.label}</span>}
+        <span className="font-light">{value}</span>
+      </span>
+    );
+  },
+};

extensions/default/src/customizations/progressDropdownCustomization.ts

@@ -0,0 +1,5 @@
+import { ProgressDropdownWithService } from '../Components/ProgressDropdownWithService';
+
+export default {
+  progressDropdownWithServiceComponent: ProgressDropdownWithService,
+};

extensions/default/src/customizations/sortingCriteriaCustomization.ts

@@ -0,0 +1,7 @@
+import { utils } from '@ohif/core';
+
+const { sortingCriteria } = utils;
+
+export default {
+  sortingCriteria: sortingCriteria.seriesSortCriteria.seriesInfoSortingCriteria,
+};

extensions/default/src/customizations/studyBrowserCustomization.ts

@@ -0,0 +1,43 @@
+import { utils } from '@ohif/core';
+const { formatDate } = utils;
+
+export default {
+  'studyBrowser.studyMenuItems': [],
+  'studyBrowser.thumbnailMenuItems': [
+    {
+      id: 'tagBrowser',
+      label: 'Tag Browser',
+      iconName: 'DicomTagBrowser',
+      commands: 'openDICOMTagViewer',
+    },
+  ],
+  'studyBrowser.sortFunctions': [
+    {
+      label: 'Series Number',
+      sortFunction: (a, b) => {
+        return a?.SeriesNumber - b?.SeriesNumber;
+      },
+    },
+    {
+      label: 'Series Date',
+      sortFunction: (a, b) => {
+        const dateA = new Date(formatDate(a?.SeriesDate));
+        const dateB = new Date(formatDate(b?.SeriesDate));
+        return dateB.getTime() - dateA.getTime();
+      },
+    },
+  ],
+  'studyBrowser.viewPresets': [
+    {
+      id: 'list',
+      iconName: 'ListView',
+      selected: false,
+    },
+    {
+      id: 'thumbnails',
+      iconName: 'ThumbnailView',
+      selected: true,
+    },
+  ],
+  'studyBrowser.studyMode': 'all',
+};