feat(windowLevelActionMenu) customization support for windowLevelActionMenu (#4725)

extensions/cornerstone/src/components/WindowLevelActionMenu/getWindowLevelActionMenu.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { nonWLModalities, WindowLevelActionMenu } from './WindowLevelActionMenu';
+import { nonWLModalities } from './WindowLevelActionMenu';
 
 export function getWindowLevelActionMenu({
   viewportId,
@@ -20,7 +20,9 @@ export function getWindowLevelActionMenu({
   const colorbarProperties = customizationService.getCustomization('cornerstone.colorbar');
   const { volumeRenderingPresets, volumeRenderingQualityRange } =
     customizationService.getCustomization('cornerstone.3dVolumeRendering');
-
+  const WindowLevelActionMenu = customizationService.getCustomization(
+    'cornerstone.windowLevelActionMenu'
+  );
   const displaySetPresets = displaySets
     .filter(displaySet => presets[displaySet.Modality])
     .map(displaySet => {

extensions/cornerstone/src/customizations/windowLevelActionMenuCustomization.ts

@@ -0,0 +1,5 @@
+import { WindowLevelActionMenu } from '../components/WindowLevelActionMenu/WindowLevelActionMenu';
+
+export default {
+  'cornerstone.windowLevelActionMenu': WindowLevelActionMenu,
+};

extensions/cornerstone/src/getCustomizationModule.tsx

@@ -8,6 +8,7 @@ import volumeRenderingCustomization from './customizations/volumeRenderingCustom
 import colorbarCustomization from './customizations/colorbarCustomization';
 import windowLevelPresetsCustomization from './customizations/windowLevelPresetsCustomization';
 import miscCustomization from './customizations/miscCustomization';
+import windowLevelActionMenuCustomization from './customizations/windowLevelActionMenuCustomization';
 
 function getCustomizationModule({ commandsManager, servicesManager }) {
   return [
@@ -24,6 +25,7 @@ function getCustomizationModule({ commandsManager, servicesManager }) {
         ...colorbarCustomization,
         ...windowLevelPresetsCustomization,
         ...miscCustomization,
+        ...windowLevelActionMenuCustomization,
       },
     },
   ];

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

@@ -14,6 +14,7 @@ import segDisplayEditingTrue from '../../../assets/img/segDisplayEditingTrue.png
 import segDisplayEditingFalse from '../../../assets/img/segDisplayEditingFalse.png';
 import thumbnailMenuItemsImage from '../../../assets/img/thumbnailMenuItemsImage.png';
 import studyMenuItemsImage from '../../../assets/img/studyMenuItemsImage.png';
+import windowLevelActionMenu from '../../../assets/img/windowLevelActionMenu.png';
 
 export const viewportOverlayCustomizations = [
   {
@@ -219,6 +220,24 @@ window.config = {
     default: 'The CinePlayer component in the UI',
     configuration: null,
   },
+  {
+    id: 'cornerstone.windowLevelActionMenu',
+    description: 'Window level action menu for the cornerstone viewport.',
+    image: windowLevelActionMenu,
+    default: null,
+    configuration: `
+      window.config = {
+        // rest of window config
+        customizationService: [
+          {
+            'cornerstone.windowLevelActionMenu': {
+                $set: CustomizedComponent,
+            },
+          },
+        ],
+      };
+    `,
+  },
   {
     id: 'cornerstone.windowLevelPresets',
     description: 'Window level presets for the cornerstone viewport.',