fix(bugs): enhancements and bug fixes - more (#4043)

extensions/cornerstone-dynamic-volume/src/panels/DynamicVolumeControls.tsx

@@ -24,7 +24,7 @@ const Header = ({ title, tooltip }) => (
       content={<div className="text-white">{tooltip}</div>}
       position="bottom-left"
       tight={true}
-      tooltipBoxClassName="max-w-xs"
+      tooltipBoxClassName="max-w-xs p-2"
     >
       <Icon
         name="info-link"
@@ -120,7 +120,19 @@ const DynamicVolumeControls = ({
           />
         </div>
         <div className={`mt-6 flex flex-col ${computedView ? '' : 'ohif-disabled'}`}>
-          <Header title="Computed Operation" />
+          <Header
+            title="Computed Operation"
+            tooltip={
+              <div>
+                Operation Buttons (SUM, AVERAGE, SUBTRACT): Select the mathematical operation to be
+                applied to the data set.
+                <br></br> Range Slider: Choose the numeric range within which the operation will be
+                performed.
+                <br></br>Generate Button: Execute the chosen operation on the specified range of
+                data.{' '}
+              </div>
+            }
+          />
           <ButtonGroup
             className={`mt-2 w-full `}
             separated={true}
@@ -187,7 +199,16 @@ function FrameControls({
 
   return (
     <div className={computedView && 'ohif-disabled'}>
-      <Header title="4D Controls" />
+      <Header
+        title="4D Controls"
+        tooltip={
+          <div>
+            Play/Pause Button: Begin or pause the animation of the 4D visualization. <br></br> Frame
+            Selector: Navigate through individual frames of the 4D data. <br></br> FPS (Frames Per
+            Second) Selector: Adjust the playback speed of the animation.
+          </div>
+        }
+      />
       <div className="mt-3 flex justify-between">
         <IconButton
           className="bg-customblue-30 h-[26px] w-[58px] rounded-[4px]"

extensions/cornerstone/src/commandsModule.ts

@@ -415,6 +415,7 @@ function commandsModule({
             onClose: uiModalService.hide,
             cornerstoneViewportService,
           },
+          containerDimensions: 'w-[70%] max-w-[900px]',
         });
       }
     },

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

@@ -102,6 +102,7 @@ export function Colorbar({
 
   return (
     <div className="all-in-one-menu-item flex w-full justify-center">
+      <div className="mr-2 w-[28px]"></div>
       <SwitchButton
         label="Display Color bar"
         checked={showColorbar}

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

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

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

@@ -52,6 +52,7 @@ export function WindowLevelActionMenu({
   } = colorbarProperties;
   const { colorbarService, cornerstoneViewportService } = serviceManager.services;
   const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+  const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
   const backgroundColor = viewportInfo.getViewportOptions().background;
   const isLight = backgroundColor ? utilities.isEqual(backgroundColor, [1, 1, 1]) : false;
 
@@ -93,13 +94,7 @@ export function WindowLevelActionMenu({
       colorbarService.removeColorbar(viewportId);
       onSetColorbar();
     }, 0);
-  }, [viewportId]);
-
-  useEffect(() => {
-    if (colorbarService.hasColorbar(viewportId)) {
-      colorbarService.removeColorbar(viewportId);
-    }
-  }, [displaySets]);
+  }, [viewportId, displaySets, viewport]);
 
   useEffect(() => {
     setMenuKey(menuKey + 1);

extensions/cornerstone/src/services/ColorbarService/ColorbarService.ts

@@ -75,10 +75,7 @@ export default class ColorbarService extends PubSubService {
 
     displaySetInstanceUIDs.forEach((displaySetInstanceUID, index) => {
       const actorEntry = actorEntries.find(entry => entry.uid.includes(displaySetInstanceUID));
-      if (!actorEntry) {
-        return;
-      }
-      const { uid: volumeId } = actorEntry;
+      const volumeId = actorEntry?.uid;
       const properties = viewport?.getProperties(volumeId);
       const colormap = properties?.colormap;
       // if there's an initial colormap set, and no colormap on the viewport, set it
@@ -194,8 +191,10 @@ export default class ColorbarService extends PubSubService {
   private setViewportColormap(viewportId, displaySetInstanceUID, colormap, immediate = false) {
     const renderingEngine = getRenderingEngine(RENDERING_ENGINE_ID);
     const viewport = renderingEngine.getViewport(viewportId);
-    const actorEntries = viewport.getActors();
-
+    const actorEntries = viewport?.getActors();
+    if (!viewport || !actorEntries || actorEntries.length === 0) {
+      return;
+    }
     const setViewportProperties = (viewport, uid) => {
       const actorEntry = actorEntries.find(entry => entry.uid.includes(uid));
       const { actor: volumeActor, uid: volumeId } = actorEntry;

extensions/default/src/Toolbar/ToolbarButtonGroupWithServices.tsx

@@ -11,6 +11,7 @@ function ToolbarButtonGroupWithServices({ groupId, items, onInteraction, size })
           label={item.label}
           disabled={item.disabled}
           className={item.className}
+          disabledText={item.disabledText}
           id={item.id}
           size={size}
           onClick={() => {

extensions/default/src/ViewerLayout/ViewerHeader.tsx

@@ -63,6 +63,7 @@ function ViewerHeader({ hotkeysManager, extensionManager, servicesManager, appCo
         show({
           title: t('UserPreferencesModal:User preferences'),
           content: UserPreferences,
+          containerDimensions: 'w-[70%] max-w-[900px]',
           contentProps: {
             hotkeyDefaults: hotkeysManager.getValidHotkeyDefinitions(hotkeyDefaults),
             hotkeyDefinitions,

extensions/default/src/commandsModule.ts

@@ -448,7 +448,7 @@ const commandsModule = ({
           displaySetInstanceUID,
           onClose: UIModalService.hide,
         },
-        containerDimensions: 'max-w-4xl max-h-4xl',
+        containerDimensions: 'w-[70%] max-w-[900px]',
         title: 'DICOM Tag Browser',
       });
     },

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/PanelROIThresholdExport.tsx

@@ -96,7 +96,7 @@ export default function PanelRoiThresholdSegmentation({ servicesManager, command
         </div>
       </div>
       <div
-        className="absolute bottom-1 flex cursor-pointer items-center justify-center text-blue-400 opacity-50 hover:opacity-80"
+        className="absolute bottom-1 left-[50px] flex cursor-pointer items-center justify-center text-blue-400 opacity-50 hover:opacity-80"
         onClick={() => {
           // navigate to a url in a new tab
           window.open('https://github.com/OHIF/Viewers/blob/master/modes/tmtv/README.md', '_blank');

platform/ui/src/components/AdvancedToolbox/AdvancedToolbox.tsx

@@ -19,7 +19,10 @@ const AdvancedToolbox = ({ title, items }) => {
   const activeItemOptions = items?.find(item => item.name === activeItemName)?.options;
 
   return (
-    <PanelSection title={title}>
+    <PanelSection
+      title={title}
+      childrenClassName="flex-shrink-0"
+    >
       <div className="flex flex-col bg-black">
         <div className="bg-primary-dark mt-0.5 flex flex-wrap py-2">
           {items?.map(item => {

platform/ui/src/components/ButtonGroup/ButtonGroup.tsx

@@ -37,7 +37,7 @@ const ButtonGroup = ({
   return (
     <div
       className={classnames(wrapperClasses, ' text-[13px]', {
-        'border-secondary-light rounded-[5px] border bg-black': !separated,
+        ' rounded-md  bg-black': !separated,
       })}
     >
       {!separated && (
@@ -52,7 +52,7 @@ const ButtonGroup = ({
                     ? 'bg-customblue-40 text-white'
                     : 'text-primary-active bg-black',
                   child.props.className,
-                  disabled ? 'ohif-disabled' : ''
+                  child.props.disabled ? 'ohif-disabled' : ''
                 ),
                 onClick: e => {
                   child.props.onClick && child.props.onClick(e);
@@ -76,7 +76,7 @@ const ButtonGroup = ({
                     ? 'bg-customblue-40 text-white'
                     : 'text-primary-active bg-black border-secondary-light rounded-[5px] border',
                   child.props.className,
-                  disabled ? 'ohif-disabled' : ''
+                  child.props.disabled ? 'ohif-disabled' : ''
                 ),
                 onClick: e => {
                   child.props.onClick && child.props.onClick(e);

platform/ui/src/components/HeaderPatientInfo/HeaderPatientInfo.tsx

@@ -94,7 +94,7 @@ function HeaderPatientInfo({ servicesManager, appConfig }) {
 
   return (
     <div
-      className="align-items-center hover:bg-primary-dark flex cursor-pointer justify-center gap-1 rounded-lg"
+      className="hover:bg-primary-dark flex cursor-pointer items-center justify-center gap-1 rounded-lg"
       onClick={handleOnClick}
     >
       <Icon

platform/ui/src/components/ListMenu/ListMenu.tsx

@@ -30,7 +30,7 @@ const ListMenu = ({ items = [], renderer, onClick }) => {
   };
 
   return (
-    <div className="bg-secondary-dark flex flex-col gap-[4px] rounded-md p-2">
+    <div className="bg-secondary-dark flex flex-col gap-[4px] rounded-md p-1">
       {items.map((item, index) => {
         return (
           <ListItem

platform/ui/src/components/SegmentationGroupTable/SegmentationConfig.tsx

@@ -20,20 +20,21 @@ const ActiveSegmentationConfig = ({
 }) => {
   const { t } = useTranslation('SegmentationTable');
   return (
-    <div className="flex justify-between px-3 pt-[13px] text-[12px]">
-      <div className="flex flex-col items-start">
+    <div className="flex justify-between gap-[5px] px-2 pt-[13px] text-[12px]">
+      <div className="flex h-[89px] flex-col items-start">
         <div className="mb-[12px] text-white">{t('Active')}</div>
         <CheckBox
           label={t('Outline')}
           checked={config.renderOutline}
-          labelClassName="text-[12px] pl-1 pt-1"
+          labelClassName="text-[12px]"
           className="mb-[9px]"
           onChange={setRenderOutline}
         />
+        <div className="mt-2"></div>
         <CheckBox
           label={t('Fill')}
           checked={config.renderFill}
-          labelClassName="text-[12px] pl-1 pt-1"
+          labelClassName="text-[12px]"
           className="mb-[9px]"
           onChange={setRenderFill}
         />
@@ -47,9 +48,9 @@ const ActiveSegmentationConfig = ({
           value={getRoundedValue(config.outlineOpacity * 100)}
           onChange={setOutlineOpacityActive}
           step={1}
-          containerClassName="mt-[4px] mb-[9px]"
+          containerClassName="mt-[4px] mb-[9px] w-[100px]"
           inputClassName="w-[64px]"
-          labelClassName="text-white text-[12px]"
+          labelClassName="text-white text-[12px] whitespace-nowrap"
           unit="%"
         />
         <InputRange
@@ -58,9 +59,9 @@ const ActiveSegmentationConfig = ({
           value={getRoundedValue(config.fillAlpha * 100)}
           onChange={setFillAlpha}
           step={1}
-          containerClassName="mt-[4px] mb-[9px]"
+          containerClassName="mt-[4px] mb-[9px] w-[100px]"
           inputClassName="w-[64px]"
-          labelClassName="text-white text-[12px]"
+          labelClassName="text-white text-[12px] whitespace-nowrap"
           unit="%"
         />
       </div>