fix(bugs): enhancements and bug fixes (#4036)

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

@@ -68,6 +68,11 @@ export function Colormap({
       key: index,
       style: {
         minWidth: `calc(100% / ${displaySets.length})`,
+        fontSize: '0.8rem',
+        textAlign: 'center',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
       },
     }));
   }, [displaySets]);

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

@@ -60,7 +60,11 @@ export function VolumeLighting({
             min={0}
             type="range"
             step={0.1}
-            style={{ background: calculateBackground(ambient) }}
+            style={{
+              background: calculateBackground(ambient),
+              '--thumb-inner-color': '#5acce6',
+              '--thumb-outer-color': '#090c29',
+            }}
           />
         )}
       </div>
@@ -84,7 +88,11 @@ export function VolumeLighting({
             min={0}
             type="range"
             step={0.1}
-            style={{ background: calculateBackground(diffuse) }}
+            style={{
+              background: calculateBackground(diffuse),
+              '--thumb-inner-color': '#5acce6',
+              '--thumb-outer-color': '#090c29',
+            }}
           />
         )}
       </div>
@@ -109,7 +117,11 @@ export function VolumeLighting({
             min={0}
             type="range"
             step={0.1}
-            style={{ background: calculateBackground(specular) }}
+            style={{
+              background: calculateBackground(specular),
+              '--thumb-inner-color': '#5acce6',
+              '--thumb-outer-color': '#090c29',
+            }}
           />
         )}
       </div>

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

@@ -25,10 +25,10 @@ export function VolumeRenderingOptions({
         commandsManager={commandsManager}
         serviceManager={serviceManager}
       />
-      <div className="all-in-one-menu-item flex w-full justify-start">
+      <div className="all-in-one-menu-item flex !h-[20px] w-full justify-start">
         <div className="text-aqua-pale text-[13px]">LIGHTING</div>
       </div>
-      <AllInOneMenu.DividerItem />
+      <div className="bg-primary-dark mt-1 mb-1 h-[2px] w-full"></div>
       <div className="all-in-one-menu-item flex w-full justify-center">
         <VolumeShade
           commandsManager={commandsManager}

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

@@ -23,7 +23,7 @@ export function VolumeRenderingPresets({
         commandsManager,
       },
       containerDimensions: 'h-[543px] w-[460px]',
-      contentDimensions: 'h-[493px] w-[460px]  pl-[12px]',
+      contentDimensions: 'h-[493px] w-[460px]  pl-[12px] pr-[12px]',
     });
   };
 

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

@@ -60,7 +60,11 @@ export function VolumeRenderingQuality({
             type="range"
             step={step}
             onChange={e => onChange(parseInt(e.target.value, 10))}
-            style={{ background: calculateBackground((quality - min) / (max - min)) }}
+            style={{
+              background: calculateBackground((quality - min) / (max - min)),
+              '--thumb-inner-color': '#5acce6',
+              '--thumb-outer-color': '#090c29',
+            }}
           />
         )}
       </div>

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

@@ -82,6 +82,8 @@ export function VolumeShift({
             step={step}
             style={{
               background: calculateBackground((shift - minShift) / (maxShift - minShift)),
+              '--thumb-inner-color': '#5acce6',
+              '--thumb-outer-color': '#090c29',
             }}
           />
         )}

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

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 export type WindowLevelProps = {
   viewportId: string;
-  presets: Record<string, Array<WindowLevelPreset>>;
+  presets: Array<Record<string, Array<WindowLevelPreset>>>;
   commandsManager: CommandsManager;
 };
 
@@ -23,25 +23,34 @@ export function WindowLevel({
         commandName: 'setViewportWindowLevel',
         commandOptions: {
           ...props,
+          viewportId,
         },
         context: 'CORNERSTONE',
       });
     },
-    [commandsManager]
+    [commandsManager, viewportId]
   );
 
   return (
     <AllInOneMenu.ItemPanel>
-      <AllInOneMenu.HeaderItem>
-        {t('Modality Presets', { modality: Object.keys(presets)[0] })}
-      </AllInOneMenu.HeaderItem>
-      {Object.values(presets)[0].map((preset, index) => (
-        <AllInOneMenu.Item
-          key={index}
-          label={preset.description}
-          secondaryLabel={`${preset.window} / ${preset.level}`}
-          onClick={() => onSetWindowLevel({ ...preset, viewportId })}
-        ></AllInOneMenu.Item>
+      {presets.map((modalityPresets, modalityIndex) => (
+        <React.Fragment key={modalityIndex}>
+          {Object.entries(modalityPresets).map(([modality, presetsArray]) => (
+            <React.Fragment key={modality}>
+              <AllInOneMenu.HeaderItem>
+                {t('Modality Presets', { modality })}
+              </AllInOneMenu.HeaderItem>
+              {presetsArray.map((preset, index) => (
+                <AllInOneMenu.Item
+                  key={`${modality}-${index}`}
+                  label={preset.description}
+                  secondaryLabel={`${preset.window} / ${preset.level}`}
+                  onClick={() => onSetWindowLevel(preset)}
+                />
+              ))}
+            </React.Fragment>
+          ))}
+        </React.Fragment>
       ))}
     </AllInOneMenu.ItemPanel>
   );

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

@@ -19,7 +19,7 @@ import { utilities } from '@cornerstonejs/core';
 export type WindowLevelActionMenuProps = {
   viewportId: string;
   element: HTMLElement;
-  presets: Record<string, Array<WindowLevelPreset>>;
+  presets: Array<Record<string, Array<WindowLevelPreset>>>;
   verticalDirection: AllInOneMenu.VerticalDirection;
   horizontalDirection: AllInOneMenu.HorizontalDirection;
   commandsManager: CommandsManager;
@@ -128,10 +128,8 @@ export function WindowLevelActionMenu({
       iconClassName={classNames(
         // Visible on hover and for the active viewport
         activeViewportId === viewportId ? 'visible' : 'invisible group-hover:visible',
-        'flex shrink-0 cursor-pointer rounded active:text-white',
-        isLight
-          ? 'text-aqua-pale hover:bg-secondary-dark'
-          : 'text-primary-light hover:bg-secondary-light/60'
+        'flex shrink-0 cursor-pointer rounded active:text-white text-primary-light',
+        isLight ? ' hover:bg-secondary-dark' : 'hover:bg-secondary-light/60'
       )}
       menuStyle={{ maxHeight: vpHeight - 32, minWidth: 218 }}
       onVisibilityChange={() => {
@@ -166,10 +164,10 @@ export function WindowLevelActionMenu({
           </AllInOneMenu.SubMenu>
         )}
 
-        {presets && !is3DVolume && (
+        {presets && presets.length > 0 && !is3DVolume && (
           <AllInOneMenu.SubMenu
             key="windowLevelPresets"
-            itemLabel={t('Modality Window Presets', { modality: Object.keys(presets)[0] })}
+            itemLabel={t('Modality Window Presets')}
             itemIcon="viewport-window-level"
           >
             <WindowLevel

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

@@ -24,13 +24,11 @@ export function getWindowLevelActionMenu({
       return { [displaySet.Modality]: presets[displaySet.Modality] };
     });
 
-  const hasMenu = displaySetPresets.length > 0;
-
-  return hasMenu ? (
+  return (
     <WindowLevelActionMenu
       viewportId={viewportId}
       element={element}
-      presets={displaySetPresets[0]}
+      presets={displaySetPresets}
       verticalDirection={verticalDirection}
       horizontalDirection={horizontalDirection}
       commandsManager={commandsManager}
@@ -40,5 +38,5 @@ export function getWindowLevelActionMenu({
       volumeRenderingPresets={volumeRenderingPresets}
       volumeRenderingQualityRange={volumeRenderingQualityRange}
     />
-  ) : null;
+  );
 }