fix(bugs): enhancements and bug fixes - more

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/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/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/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>

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

@@ -70,7 +70,7 @@ const SegmentItem = ({
             'border border-l-0 border-transparent': !isActive,
           })}
           style={{
-            width: 'calc(100% - 40px)',
+            width: 'calc(100% - 28px)',
           }}
         >
           <div className="bg-primary-dark flex h-full flex-grow items-center">
@@ -93,7 +93,7 @@ const SegmentItem = ({
           </div>
           <div
             className={classnames(
-              'absolute right-3 top-0 flex flex-row-reverse rounded-lg pt-[3px]',
+              'absolute right-[8px] top-0 flex flex-row-reverse rounded-lg pt-[3px]',
               {}
             )}
           >

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

@@ -75,7 +75,7 @@ const SegmentationGroupTable = ({
   const { t } = useTranslation('SegmentationTable');
 
   return (
-    <div className="flex min-h-0 flex-1 flex-col bg-black text-[13px] font-[300]">
+    <div className="flex min-h-0 flex-col bg-black text-[13px] font-[300]">
       <PanelSection
         title={t('Segmentation')}
         actionIcons={

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

@@ -67,7 +67,7 @@ const SegmentationGroupTableExpanded = ({
   const { t } = useTranslation('SegmentationTable');
 
   return (
-    <div className="flex min-h-0 flex-1 flex-col bg-black text-[13px] font-[300]">
+    <div className="flex min-h-0 flex-col bg-black text-[13px] font-[300]">
       <PanelSection
         title={t('Segmentation')}
         actionIcons={

platform/ui/src/components/SplitButton/SplitButton.tsx

@@ -31,7 +31,7 @@ const classes = {
       isActive
         ? isExpanded
           ? 'border-primary-dark !bg-primary-dark hover:border-primary-dark !text-primary-light'
-          : 'border-primary-light bg-primary-light border-2 rounded-md'
+          : 'border-primary-light bg-primary-light rounded-md'
         : `focus:!text-black focus:!rounded-md focus:!border-primary-light focus:!bg-primary-light ${isExpanded ? 'border-primary-dark bg-primary-dark !text-primary-light' : 'border-secondary-dark bg-secondary-dark group-hover/button:border-primary-dark group-hover/button:text-primary-light hover:!bg-primary-dark hover:border-primary-dark focus:!text-black'}`
     ),
   Secondary: ({ isExpanded, primary }) =>

platform/ui/src/components/StudyItem/StudyItem.tsx

@@ -40,9 +40,9 @@ const StudyItem = ({
             {numInstances}
           </div>
         </div>
-        <div className="flex flex-row py-1">
-          <div className="text-l pr-5 text-blue-300">{modalities}</div>
-          <div className="truncate-2-lines break-words text-base text-blue-300">{description}</div>
+        <div className="flex flex-row items-center py-1">
+          <div className="text-l flex items-center pr-5 text-blue-300">{modalities}</div>
+          <div className="flex items-center break-words text-base text-blue-300">{description}</div>
         </div>
       </div>
       {!!trackedSeries && (

platform/ui/src/components/Toolbox/ToolboxUI.tsx

@@ -63,6 +63,7 @@ function ToolboxUI(props) {
                           servicesManager={servicesManager}
                           onInteraction={onInteraction}
                           size="toolbox"
+                          className=" border-secondary-light rounded-[5px] border"
                         />
                       </div>
                     </Tooltip>
@@ -75,6 +76,7 @@ function ToolboxUI(props) {
                         servicesManager={servicesManager}
                         onInteraction={onInteraction}
                         size="toolbox"
+                        className=" border-secondary-light rounded-[5px] border"
                       />
                     </div>
                   )}
@@ -90,7 +92,16 @@ function ToolboxUI(props) {
     );
   };
 
-  return useCollapsedPanel ? <PanelSection title={title}>{render()}</PanelSection> : render();
+  return useCollapsedPanel ? (
+    <PanelSection
+      childrenClassName="flex-shrink-0"
+      title={title}
+    >
+      {render()}
+    </PanelSection>
+  ) : (
+    render()
+  );
 }
 
 export { ToolboxUI };

platform/ui/src/components/WindowLevel/WindowLevel.tsx

@@ -141,7 +141,7 @@ const WindowLevel = ({
             </div>
           </div>
           {showOpacitySlider && (
-            <div className="flex items-center justify-between text-base">
+            <div className="flex items-center justify-between gap-2 text-base">
               <div className="text-xs text-white">Opacity</div>
               <InputRange
                 inputClassName="grow"