feat(panels): responsive thumbnails based on panel size (#4723)

extensions/default/src/ViewerLayout/ResizablePanelsHook.tsx

@@ -1,22 +1,6 @@
 import { useState, useCallback, useLayoutEffect, useRef } from 'react';
 import { getPanelElement, getPanelGroupElement } from 'react-resizable-panels';
-
+import { panelGroupDefinition } from './constants/panels';
-// Id needed to grab the panel group for converting pixels to percentages
-const viewerLayoutResizablePanelGroupId = 'viewerLayoutResizablePanelGroup';
-const viewerLayoutResizableLeftPanelId = 'viewerLayoutResizableLeftPanel';
-const viewerLayoutResizableRightPanelId = 'viewerLayoutResizableRightPanel';
-
-const sidePanelExpandedDefaultWidth = 280;
-const sidePanelExpandedInsideBorderSize = 4;
-const sidePanelExpandedDefaultOffsetWidth =
-  sidePanelExpandedDefaultWidth + sidePanelExpandedInsideBorderSize;
-const sidePanelCollapsedInsideBorderSize = 4;
-const sidePanelCollapsedOutsideBorderSize = 8;
-const sidePanelCollapsedWidth = 25;
-const sidePanelCollapsedOffsetWidth =
-  sidePanelCollapsedWidth +
-  sidePanelCollapsedInsideBorderSize +
-  sidePanelCollapsedOutsideBorderSize;
 
 /**
  * Set the minimum and maximum css style width attributes for the given element.
@@ -43,15 +27,15 @@ const useResizablePanels = (
   setRightPanelClosed
 ) => {
   const [leftPanelExpandedWidth, setLeftPanelExpandedWidth] = useState(
-    sidePanelExpandedDefaultWidth
+    panelGroupDefinition.left.initialExpandedWidth
   );
   const [rightPanelExpandedWidth, setRightPanelExpandedWidth] = useState(
-    sidePanelExpandedDefaultWidth
+    panelGroupDefinition.right.initialExpandedWidth
   );
-
+  const [leftResizablePanelMinimumSize, setLeftResizablePanelMinimumSize] = useState(0);
-  // Percentage sizes.
+  const [rightResizablePanelMinimumSize, setRightResizablePanelMinimumSize] = useState(0);
-  const [resizablePanelCollapsedSize, setResizablePanelCollapsedSize] = useState(0);
+  const [leftResizeablePanelCollapsedSize, setLeftResizePanelCollapsedSize] = useState(0);
-  const [resizablePanelDefaultSize, setResizablePanelDefaultSize] = useState(0);
+  const [rightResizePanelCollapsedSize, setRightResizePanelCollapsedSize] = useState(0);
 
   const resizablePanelGroupElemRef = useRef(null);
   const resizableLeftPanelElemRef = useRef(null);
@@ -65,30 +49,33 @@ const useResizablePanels = (
   //   converting between percentages and pixels in various callbacks.
   // - Expand those panels that are initially expanded.
   useLayoutEffect(() => {
-    const panelGroupElem = getPanelGroupElement(viewerLayoutResizablePanelGroupId);
+    const panelGroupElem = getPanelGroupElement(panelGroupDefinition.groupId);
 
     resizablePanelGroupElemRef.current = panelGroupElem;
     const { width: panelGroupWidth } = panelGroupElem.getBoundingClientRect();
 
-    const leftPanelElem = getPanelElement(viewerLayoutResizableLeftPanelId);
+    const leftPanelElem = getPanelElement(panelGroupDefinition.left.panelId);
     resizableLeftPanelElemRef.current = leftPanelElem;
 
-    const rightPanelElem = getPanelElement(viewerLayoutResizableRightPanelId);
+    const rightPanelElem = getPanelElement(panelGroupDefinition.right.panelId);
     resizableRightPanelElemRef.current = rightPanelElem;
 
-    const resizablePanelExpandedSize =
-      (sidePanelExpandedDefaultOffsetWidth / panelGroupWidth) * 100;
-
     // Since both resizable panels are collapsed by default (i.e. their default size is zero),
     // on the very first render check if either/both side panels should be expanded.
+    // we use the initialExpandedOffsetWidth on the first render incase the panel has min width but we want the initial state to be larger than that
+
     if (!leftPanelClosed) {
-      resizableLeftPanelAPIRef?.current?.expand(resizablePanelExpandedSize);
+      const leftResizablePanelExpandedSize =
-      setMinMaxWidth(leftPanelElem, sidePanelExpandedDefaultOffsetWidth);
+        (panelGroupDefinition.left.initialExpandedOffsetWidth / panelGroupWidth) * 100;
+      resizableLeftPanelAPIRef?.current?.expand(leftResizablePanelExpandedSize);
+      setMinMaxWidth(leftPanelElem, panelGroupDefinition.left.initialExpandedOffsetWidth);
     }
 
     if (!rightPanelClosed) {
-      resizableRightPanelAPIRef?.current?.expand(resizablePanelExpandedSize);
+      const rightResizablePanelExpandedSize =
-      setMinMaxWidth(rightPanelElem, sidePanelExpandedDefaultOffsetWidth);
+        (panelGroupDefinition.right.initialExpandedOffsetWidth / panelGroupWidth) * 100;
+      resizableRightPanelAPIRef?.current?.expand(rightResizablePanelExpandedSize);
+      setMinMaxWidth(rightPanelElem, panelGroupDefinition.right.initialExpandedOffsetWidth);
     }
   }, []); // no dependencies because this useLayoutEffect is only needed on the very first render
 
@@ -114,13 +101,17 @@ const useResizablePanels = (
     // for a panel.
     if (!resizableLeftPanelAPIRef.current.isCollapsed()) {
       const leftSize =
-        ((leftPanelExpandedWidth + sidePanelExpandedInsideBorderSize) / panelGroupWidth) * 100;
+        ((leftPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize) /
+          panelGroupWidth) *
+        100;
       resizableLeftPanelAPIRef.current.resize(leftSize);
     }
 
     if (!resizableRightPanelAPIRef.current.isCollapsed()) {
       const rightSize =
-        ((rightPanelExpandedWidth + sidePanelExpandedInsideBorderSize) / panelGroupWidth) * 100;
+        ((rightPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize) /
+          panelGroupWidth) *
+        100;
       resizableRightPanelAPIRef.current.resize(rightSize);
     }
 
@@ -128,11 +119,20 @@ const useResizablePanels = (
     // component is resized. This typically occurs when the browser window resizes.
     const observer = new ResizeObserver(() => {
       const { width: panelGroupWidth } = resizablePanelGroupElemRef.current.getBoundingClientRect();
-      const defaultSize = (sidePanelExpandedDefaultOffsetWidth / panelGroupWidth) * 100;
+      const minimumLeftSize =
+        (panelGroupDefinition.left.minimumExpandedOffsetWidth / panelGroupWidth) * 100;
+      const minimumRightSize =
+        (panelGroupDefinition.right.minimumExpandedOffsetWidth / panelGroupWidth) * 100;
 
       // Set the new default and collapsed resizable panel sizes.
-      setResizablePanelDefaultSize(Math.min(50, defaultSize));
+      setLeftResizablePanelMinimumSize(Math.min(50, minimumLeftSize));
-      setResizablePanelCollapsedSize((sidePanelCollapsedOffsetWidth / panelGroupWidth) * 100);
+      setRightResizablePanelMinimumSize(Math.min(50, minimumRightSize));
+      setLeftResizePanelCollapsedSize(
+        (panelGroupDefinition.left.collapsedOffsetWidth / panelGroupWidth) * 100
+      );
+      setRightResizePanelCollapsedSize(
+        (panelGroupDefinition.right.collapsedOffsetWidth / panelGroupWidth) * 100
+      );
 
       if (
         resizableLeftPanelAPIRef.current.isCollapsed() &&
@@ -146,12 +146,12 @@ const useResizablePanels = (
 
       // Determine the current widths of the two side panels.
       let leftPanelOffsetWidth = resizableLeftPanelAPIRef.current.isCollapsed()
-        ? sidePanelCollapsedOffsetWidth
+        ? panelGroupDefinition.left.collapsedOffsetWidth
-        : leftPanelExpandedWidth + sidePanelExpandedInsideBorderSize;
+        : leftPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize;
 
       let rightPanelOffsetWidth = resizableRightPanelAPIRef.current.isCollapsed()
-        ? sidePanelCollapsedOffsetWidth
+        ? panelGroupDefinition.right.collapsedOffsetWidth
-        : rightPanelExpandedWidth + sidePanelExpandedInsideBorderSize;
+        : rightPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize;
 
       if (
         !resizableLeftPanelAPIRef.current.isCollapsed() &&
@@ -162,9 +162,11 @@ const useResizablePanels = (
         // Reduce the left panel width so that both panels might fit.
         leftPanelOffsetWidth = Math.max(
           panelGroupWidth - rightPanelOffsetWidth,
-          sidePanelExpandedDefaultOffsetWidth
+          panelGroupDefinition.left.minimumExpandedOffsetWidth
+        );
+        setLeftPanelExpandedWidth(
+          leftPanelOffsetWidth - panelGroupDefinition.shared.expandedInsideBorderSize
         );
-        setLeftPanelExpandedWidth(leftPanelOffsetWidth - sidePanelExpandedInsideBorderSize);
         setMinMaxWidth(resizableLeftPanelElemRef.current, leftPanelOffsetWidth);
       }
 
@@ -177,9 +179,11 @@ const useResizablePanels = (
         // Reduce the right panel width so that both panels might fit.
         rightPanelOffsetWidth = Math.max(
           panelGroupWidth - leftPanelOffsetWidth,
-          sidePanelExpandedDefaultOffsetWidth
+          panelGroupDefinition.right.minimumExpandedOffsetWidth
+        );
+        setRightPanelExpandedWidth(
+          rightPanelOffsetWidth - panelGroupDefinition.shared.expandedInsideBorderSize
         );
-        setRightPanelExpandedWidth(rightPanelOffsetWidth - sidePanelExpandedInsideBorderSize);
         setMinMaxWidth(resizableRightPanelElemRef.current, rightPanelOffsetWidth);
       }
     });
@@ -189,7 +193,12 @@ const useResizablePanels = (
     return () => {
       observer.disconnect();
     };
-  }, [leftPanelExpandedWidth, resizablePanelDefaultSize, rightPanelExpandedWidth]);
+  }, [
+    leftPanelExpandedWidth,
+    rightPanelExpandedWidth,
+    leftResizablePanelMinimumSize,
+    rightResizablePanelMinimumSize,
+  ]);
 
   /**
    * Handles dragging of either side panel resize handle.
@@ -207,14 +216,14 @@ const useResizablePanels = (
         if (resizableLeftPanelAPIRef?.current?.isExpanded()) {
           setMinMaxWidth(
             resizableLeftPanelElemRef.current,
-            leftPanelExpandedWidth + sidePanelExpandedInsideBorderSize
+            leftPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize
           );
         }
 
         if (resizableRightPanelAPIRef?.current?.isExpanded()) {
           setMinMaxWidth(
             resizableRightPanelElemRef.current,
-            rightPanelExpandedWidth + sidePanelExpandedInsideBorderSize
+            rightPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize
           );
         }
       }
@@ -229,15 +238,12 @@ const useResizablePanels = (
   }, [setLeftPanelClosed]);
 
   const onLeftPanelOpen = useCallback(() => {
-    resizableLeftPanelAPIRef?.current?.expand();
+    const { width: panelGroupWidth } = resizablePanelGroupElemRef.current.getBoundingClientRect();
-    if (!isResizableHandleDraggingRef.current) {
+    resizableLeftPanelAPIRef?.current?.expand(
-      setMinMaxWidth(
+      (panelGroupDefinition.left.initialExpandedOffsetWidth / panelGroupWidth) * 100
-        resizableLeftPanelElemRef.current,
+    );
-        leftPanelExpandedWidth + sidePanelExpandedInsideBorderSize
-      );
-    }
     setLeftPanelClosed(false);
-  }, [leftPanelExpandedWidth, setLeftPanelClosed]);
+  }, [setLeftPanelClosed]);
 
   const onLeftPanelResize = useCallback(size => {
     if (resizableLeftPanelAPIRef.current.isCollapsed()) {
@@ -245,7 +251,10 @@ const useResizablePanels = (
     }
 
     const { width: panelGroupWidth } = resizablePanelGroupElemRef.current.getBoundingClientRect();
-    setLeftPanelExpandedWidth((size / 100) * panelGroupWidth - sidePanelExpandedInsideBorderSize);
+    const newExpandedWidth =
+      (size / 100) * panelGroupWidth - panelGroupDefinition.shared.expandedInsideBorderSize;
+
+    setLeftPanelExpandedWidth(newExpandedWidth);
   }, []);
 
   const onRightPanelClose = useCallback(() => {
@@ -255,68 +264,69 @@ const useResizablePanels = (
   }, [setRightPanelClosed]);
 
   const onRightPanelOpen = useCallback(() => {
-    resizableRightPanelAPIRef?.current?.expand();
+    const { width: panelGroupWidth } = resizablePanelGroupElemRef.current.getBoundingClientRect();
-    if (!isResizableHandleDraggingRef.current) {
+    resizableRightPanelAPIRef?.current?.expand(
-      setMinMaxWidth(
+      (panelGroupDefinition.right.initialExpandedOffsetWidth / panelGroupWidth) * 100
-        resizableRightPanelElemRef.current,
+    );
-        rightPanelExpandedWidth + sidePanelExpandedInsideBorderSize
-      );
-    }
     setRightPanelClosed(false);
-  }, [rightPanelExpandedWidth, setRightPanelClosed]);
+  }, [setRightPanelClosed]);
 
   const onRightPanelResize = useCallback(size => {
     if (resizableRightPanelAPIRef?.current?.isCollapsed()) {
       return;
     }
+
     const { width: panelGroupWidth } = resizablePanelGroupElemRef.current.getBoundingClientRect();
-    setRightPanelExpandedWidth((size / 100) * panelGroupWidth - sidePanelExpandedInsideBorderSize);
+    const newExpandedWidth =
+      (size / 100) * panelGroupWidth - panelGroupDefinition.shared.expandedInsideBorderSize;
+
+    setRightPanelExpandedWidth(newExpandedWidth);
   }, []);
 
   return [
     {
       expandedWidth: leftPanelExpandedWidth,
-      collapsedWidth: sidePanelCollapsedWidth,
+      collapsedWidth: panelGroupDefinition.shared.collapsedWidth,
-      collapsedInsideBorderSize: sidePanelCollapsedInsideBorderSize,
+      collapsedInsideBorderSize: panelGroupDefinition.shared.collapsedInsideBorderSize,
-      collapsedOutsideBorderSize: sidePanelCollapsedOutsideBorderSize,
+      collapsedOutsideBorderSize: panelGroupDefinition.shared.collapsedOutsideBorderSize,
-      expandedInsideBorderSize: sidePanelExpandedInsideBorderSize,
+      expandedInsideBorderSize: panelGroupDefinition.shared.expandedInsideBorderSize,
       onClose: onLeftPanelClose,
       onOpen: onLeftPanelOpen,
     },
     {
       expandedWidth: rightPanelExpandedWidth,
-      collapsedWidth: sidePanelCollapsedWidth,
+      collapsedWidth: panelGroupDefinition.shared.collapsedWidth,
-      collapsedInsideBorderSize: sidePanelCollapsedInsideBorderSize,
+      collapsedInsideBorderSize: panelGroupDefinition.shared.collapsedInsideBorderSize,
-      collapsedOutsideBorderSize: sidePanelCollapsedOutsideBorderSize,
+      collapsedOutsideBorderSize: panelGroupDefinition.shared.collapsedOutsideBorderSize,
-      expandedInsideBorderSize: sidePanelExpandedInsideBorderSize,
+      expandedInsideBorderSize: panelGroupDefinition.shared.expandedInsideBorderSize,
       onClose: onRightPanelClose,
       onOpen: onRightPanelOpen,
     },
-    { direction: 'horizontal', id: viewerLayoutResizablePanelGroupId },
+    { direction: 'horizontal', id: panelGroupDefinition.groupId },
     {
-      defaultSize: resizablePanelDefaultSize,
+      defaultSize: leftResizablePanelMinimumSize,
-      minSize: resizablePanelDefaultSize,
+      minSize: leftResizablePanelMinimumSize,
       onResize: onLeftPanelResize,
       collapsible: true,
-      collapsedSize: resizablePanelCollapsedSize,
+      collapsedSize: leftResizeablePanelCollapsedSize,
       onCollapse: () => setLeftPanelClosed(true),
       onExpand: () => setLeftPanelClosed(false),
       ref: resizableLeftPanelAPIRef,
       order: 0,
-      id: viewerLayoutResizableLeftPanelId,
+      id: panelGroupDefinition.left.panelId,
     },
     { order: 1, id: 'viewerLayoutResizableViewportGridPanel' },
     {
-      defaultSize: resizablePanelDefaultSize,
+      defaultSize: rightResizablePanelMinimumSize,
-      minSize: resizablePanelDefaultSize,
+      minSize: rightResizablePanelMinimumSize,
       onResize: onRightPanelResize,
       collapsible: true,
-      collapsedSize: resizablePanelCollapsedSize,
+      collapsedSize: rightResizePanelCollapsedSize,
       onCollapse: () => setRightPanelClosed(true),
       onExpand: () => setRightPanelClosed(false),
       ref: resizableRightPanelAPIRef,
       order: 2,
-      id: viewerLayoutResizableRightPanelId,
+      id: panelGroupDefinition.right.panelId,
     },
     onHandleDragging,
   ];

extensions/default/src/ViewerLayout/constants/panels.ts

@@ -0,0 +1,38 @@
+const expandedInsideBorderSize = 4;
+const collapsedInsideBorderSize = 4;
+const collapsedOutsideBorderSize = 8;
+const collapsedWidth = 25;
+
+const rightPanelInitialExpandedWidth = 280;
+const leftPanelInitialExpandedWidth = 282;
+
+const panelGroupDefinition = {
+  groupId: 'viewerLayoutResizablePanelGroup',
+  shared: {
+    expandedInsideBorderSize,
+    collapsedInsideBorderSize,
+    collapsedOutsideBorderSize,
+    collapsedWidth,
+  },
+  left: {
+    // id
+    panelId: 'viewerLayoutResizableLeftPanel',
+    // expanded width
+    initialExpandedWidth: leftPanelInitialExpandedWidth,
+    // expanded width + expanded inside border
+    minimumExpandedOffsetWidth: 145 + expandedInsideBorderSize,
+    // initial expanded width
+    initialExpandedOffsetWidth: leftPanelInitialExpandedWidth + expandedInsideBorderSize,
+    // collapsed width + collapsed inside border + collapsed outside border
+    collapsedOffsetWidth: collapsedWidth + collapsedInsideBorderSize + collapsedOutsideBorderSize,
+  },
+  right: {
+    panelId: 'viewerLayoutResizableRightPanel',
+    initialExpandedWidth: rightPanelInitialExpandedWidth,
+    minimumExpandedOffsetWidth: rightPanelInitialExpandedWidth + expandedInsideBorderSize,
+    initialExpandedOffsetWidth: rightPanelInitialExpandedWidth + expandedInsideBorderSize,
+    collapsedOffsetWidth: collapsedWidth + collapsedInsideBorderSize + collapsedOutsideBorderSize,
+  },
+};
+
+export { panelGroupDefinition };

modes/basic-dev-mode/src/index.ts

@@ -141,7 +141,9 @@ function modeFactory({ modeConfiguration }) {
             props: {
               // TODO: Should be optional, or required to pass empty array for slots?
               leftPanels: [ohif.thumbnailList],
+              leftPanelResizable: true,
               rightPanels: [ohif.measurements],
+              rightPanelResizable: true,
               viewports: [
                 {
                   namespace: cs3d.viewport,

modes/basic-test-mode/src/index.ts

@@ -150,8 +150,10 @@ function modeFactory() {
               // leftPanels: [ohif.thumbnailList],
               // rightPanels: [dicomSeg.panel, ohif.measurements],
               leftPanels: [tracked.thumbnailList],
+              leftPanelResizable: true,
               // Can use cornerstone.measurements for all measurements
               rightPanels: [cornerstone.panel, tracked.measurements, cornerstone.measurements],
+              rightPanelResizable: true,
               // rightPanelClosed: true, // optional prop to start with collapse panels
               viewports: [
                 {

modes/microscopy/src/index.tsx

@@ -87,9 +87,11 @@ function modeFactory({ modeConfiguration }) {
             id: ohif.layout,
             props: {
               leftPanels: [ohif.leftPanel],
+              leftPanelResizable: true,
               leftPanelClosed: true, // we have problem with rendering thumbnails for microscopy images
               rightPanelClosed: true, // we do not have the save microscopy measurements yet
               rightPanels: ['@ohif/extension-dicom-microscopy.panelModule.measure'],
+              rightPanelResizable: true,
               viewports: [
                 {
                   namespace: '@ohif/extension-dicom-microscopy.viewportModule.microscopy-dicom',

modes/preclinical-4d/src/index.tsx

@@ -158,7 +158,9 @@ function modeFactory({ modeConfiguration }) {
             id: ohif.layout,
             props: {
               leftPanels: [[dynamicVolume.leftPanel, cornerstone.activeViewportWindowLevel]],
+              leftPanelResizable: true,
               rightPanels: [],
+              rightPanelResizable: true,
               rightPanelClosed: true,
               viewports: [
                 {

modes/segmentation/src/index.tsx

@@ -132,7 +132,9 @@ function modeFactory({ modeConfiguration }) {
             id: ohif.layout,
             props: {
               leftPanels: [ohif.leftPanel],
+              leftPanelResizable: true,
               rightPanels: [cornerstone.panelTool],
+              rightPanelResizable: true,
               // leftPanelClosed: true,
               viewports: [
                 {

modes/tmtv/src/index.ts

@@ -215,8 +215,10 @@ function modeFactory({ modeConfiguration }) {
             id: ohif.layout,
             props: {
               leftPanels: [ohif.thumbnailList],
+              leftPanelResizable: true,
               leftPanelClosed: true,
               rightPanels: [tmtv.tmtv, tmtv.petSUV],
+              rightPanelResizable: true,
               viewports: [
                 {
                   namespace: cs3d.viewport,

platform/app/cypress/integration/OHIFVideoDisplay.spec.js

@@ -1,5 +1,6 @@
 describe('OHIF Video Display', function () {
   beforeEach(function () {
+    Cypress.on('uncaught:exception', () => false);
     cy.openStudyInViewer('2.25.96975534054447904995905761963464388233');
   });
 

platform/ui-next/src/components/StudyBrowser/StudyBrowser.tsx

@@ -63,7 +63,7 @@ const StudyBrowser = ({
       className="ohif-scrollbar invisible-scrollbar bg-bkg-low flex flex-1 flex-col gap-[4px] overflow-auto"
       data-cy={'studyBrowser-panel'}
     >
-      <div>
+      <div className="flex flex-col gap-[4px]">
         {showSettings && (
           <div className="w-100 bg-bkg-low flex h-[48px] items-center justify-center gap-[10px] px-[8px] py-[10px]">
             <>

platform/ui-next/src/components/StudyBrowserSort/StudyBrowserSort.tsx

@@ -6,6 +6,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
 } from '../DropdownMenu/DropdownMenu';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../Tooltip';
 
 export function StudyBrowserSort({ servicesManager }: withAppTypes) {
   // Todo: this should not be here, no servicesManager should be in ui-next, only
@@ -50,11 +51,16 @@ export function StudyBrowserSort({ servicesManager }: withAppTypes) {
   }, [displaySetService, selectedSort, sortDirection]);
 
   return (
-    <div className="flex items-center gap-1">
+    <div className="flex w-[50%] items-center gap-1">
       <DropdownMenu>
-        <DropdownMenuTrigger className="border-inputfield-main focus:border-inputfield-main flex h-[26px] w-[125px] items-center justify-start rounded border bg-black p-2 text-base text-white">
+        <Tooltip>
-          {selectedSort.label}
+          <TooltipTrigger className="w-full overflow-hidden">
-        </DropdownMenuTrigger>
+            <DropdownMenuTrigger className="border-inputfield-main focus:border-inputfield-main flex h-[26px] w-full items-center justify-start overflow-hidden whitespace-nowrap rounded border bg-black p-2 text-base text-white">
+              {selectedSort.label}
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent>{selectedSort.label}</TooltipContent>
+        </Tooltip>
         <DropdownMenuContent className="bg-black">
           {sortFunctions.map(sort => (
             <DropdownMenuItem
@@ -67,16 +73,21 @@ export function StudyBrowserSort({ servicesManager }: withAppTypes) {
           ))}
         </DropdownMenuContent>
       </DropdownMenu>
-      <button
+      <Tooltip>
-        onClick={toggleSortDirection}
+        <TooltipTrigger>
-        className="flex h-[26px] items-center justify-center bg-black"
+          <button
-      >
+            onClick={toggleSortDirection}
-        {sortDirection === 'ascending' ? (
+            className="flex h-[26px] items-center justify-center bg-black"
-          <Icons.SortingAscending className="text-primary-main w-2" />
+          >
-        ) : (
+            {sortDirection === 'ascending' ? (
-          <Icons.SortingDescending className="text-primary-main w-2" />
+              <Icons.SortingAscending className="text-primary-main w-2" />
-        )}
+            ) : (
-      </button>
+              <Icons.SortingDescending className="text-primary-main w-2" />
+            )}
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>Sort direction</TooltipContent>
+      </Tooltip>
     </div>
   );
 }

platform/ui-next/src/components/StudyBrowserViewOptions/StudyBrowserViewOptions.tsx

@@ -5,6 +5,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
 } from '../DropdownMenu/DropdownMenu';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../Tooltip';
 
 export function StudyBrowserViewOptions({ tabs, onSelectTab, activeTabName }: withAppTypes) {
   const handleTabChange = (tabName: string) => {
@@ -15,9 +16,14 @@ export function StudyBrowserViewOptions({ tabs, onSelectTab, activeTabName }: wi
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger className="border-inputfield-main focus:border-inputfield-main flex h-[26px] w-[125px] items-center justify-start rounded border bg-black p-2 text-base text-white">
+      <Tooltip>
-        {activeTab?.label}
+        <TooltipTrigger className="w-full w-[50%] overflow-hidden">
-      </DropdownMenuTrigger>
+          <DropdownMenuTrigger className="border-inputfield-main focus:border-inputfield-main flex h-[26px] w-full items-center justify-start rounded border bg-black p-2 text-base text-white">
+            {activeTab?.label}
+          </DropdownMenuTrigger>
+        </TooltipTrigger>
+        <TooltipContent>{activeTab?.label}</TooltipContent>
+      </Tooltip>
       <DropdownMenuContent className="bg-black">
         {tabs.map(tab => {
           const { name, label, studies } = tab;

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

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { ThumbnailList } from '../ThumbnailList';
 
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../Accordion';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../Tooltip';
 
 const StudyItem = ({
   date,
@@ -34,16 +35,28 @@ const StudyItem = ({
       defaultValue={isActive ? 'study-item' : undefined}
     >
       <AccordionItem value="study-item">
-        <AccordionTrigger className={classnames('hover:bg-accent bg-popover group rounded')}>
+        <AccordionTrigger className={classnames('hover:bg-accent bg-popover group w-full rounded')}>
-          <div className="flex h-[40px] flex-1 flex-row">
+          <div className="flex h-[40px] w-full flex-row overflow-hidden">
-            <div className="flex w-full flex-row items-center">
+            <div className="flex w-full flex-row items-center justify-between">
-              <div className="flex flex-col items-start text-[13px]">
+              <div className="flex min-w-0 flex-col items-start text-[13px]">
-                <div className="text-white">{date}</div>
+                <Tooltip>
-                <div className="text-muted-foreground h-[18px] max-w-[160px] overflow-hidden truncate whitespace-nowrap">
+                  <TooltipContent>{date}</TooltipContent>
-                  {description}
+                  <TooltipTrigger className="w-full">
-                </div>
+                    <div className="h-[18px] w-full max-w-[160px] overflow-hidden truncate whitespace-nowrap text-left text-white">
+                      {date}
+                    </div>
+                  </TooltipTrigger>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipContent>{description}</TooltipContent>
+                  <TooltipTrigger className="w-full">
+                    <div className="text-muted-foreground h-[18px] w-full overflow-hidden truncate whitespace-nowrap text-left">
+                      {description}
+                    </div>
+                  </TooltipTrigger>
+                </Tooltip>
               </div>
-              <div className="text-muted-foreground ml-auto flex flex-col items-end text-[12px]">
+              <div className="text-muted-foreground flex flex-col items-end pl-[10px] text-[12px]">
                 <div className="max-w-[150px] overflow-hidden text-ellipsis">{modalities}</div>
                 <div>{numInstances}</div>
               </div>

platform/ui-next/src/components/Thumbnail/Thumbnail.tsx

@@ -20,17 +20,17 @@ const Thumbnail = ({
   loadingProgress,
   countIcon,
   messages,
-  dragData = {},
   isActive,
   onClick,
   onDoubleClick,
-  viewPreset = 'thumbnails',
+  thumbnailType,
   modality,
+  viewPreset = 'thumbnails',
   isHydratedForDerivedDisplaySet = false,
   isTracked = false,
   canReject = false,
+  dragData = {},
   onReject = () => {},
-  thumbnailType = 'thumbnail',
   onClickUntrack = () => {},
   ThumbnailMenuItems = () => {},
 }: withAppTypes): React.ReactNode => {
@@ -135,10 +135,15 @@ const Thumbnail = ({
             </div>
           </div>
         </div>
-        <div className="mt-3 flex h-[52px] w-[128px] flex-col">
+        <div className="flex h-[52px] w-[128px] flex-col justify-end">
-          <div className="min-h-[18px] w-[128px] overflow-hidden text-ellipsis pb-0.5 pl-1 text-[12px] font-normal leading-4 text-white">
+          <Tooltip>
-            {description}
+            <TooltipContent>{description}</TooltipContent>
-          </div>
+            <TooltipTrigger>
+              <div className="min-h-[18px] w-[128px] overflow-hidden text-ellipsis whitespace-nowrap pb-0.5 pl-1 text-left text-[12px] font-normal leading-4 text-white">
+                {description}
+              </div>
+            </TooltipTrigger>
+          </Tooltip>
           <div className="flex h-[12px] items-center gap-[7px] overflow-hidden">
             <div className="text-muted-foreground pl-1 text-[11px]"> S:{seriesNumber}</div>
             <div className="text-muted-foreground text-[11px]">
@@ -165,21 +170,25 @@ const Thumbnail = ({
           isActive && 'bg-popover'
         )}
       >
-        <div className="relative flex h-[32px] items-center gap-[8px]">
+        <div className="relative flex h-[32px] w-full items-center gap-[8px] overflow-hidden">
           <div
             className={classnames(
-              'h-[32px] w-[4px] rounded-[2px]',
+              'h-[32px] w-[4px] min-w-[4px] rounded-[2px]',
               isActive || isHydratedForDerivedDisplaySet ? 'bg-highlight' : 'bg-primary/65',
               loadingProgress && loadingProgress < 1 && 'bg-primary/25'
             )}
           ></div>
-          <div className="flex h-full flex-col">
+          <div className="flex h-full w-[calc(100%-12px)] flex-col">
             <div className="flex items-center gap-[7px]">
               <div className="text-[13px] font-semibold text-white">{modality}</div>
-
+              <Tooltip>
-              <div className="max-w-[160px] overflow-hidden overflow-ellipsis whitespace-nowrap text-[13px] font-normal text-white">
+                <TooltipContent>{description}</TooltipContent>
-                {description}
+                <TooltipTrigger className="w-full overflow-hidden">
-              </div>
+                  <div className="max-w-[160px] overflow-hidden overflow-ellipsis whitespace-nowrap text-left text-[13px] font-normal text-white">
+                    {description}
+                  </div>
+                </TooltipTrigger>
+              </Tooltip>
             </div>
 
             <div className="flex h-[12px] items-center gap-[7px] overflow-hidden">
@@ -246,7 +255,7 @@ const Thumbnail = ({
         className,
         'bg-muted hover:bg-primary/30 group flex cursor-pointer select-none flex-col rounded outline-none',
         viewPreset === 'thumbnails' && 'h-[170px] w-[135px]',
-        viewPreset === 'list' && 'col-span-2 h-[40px] w-[275px]'
+        viewPreset === 'list' && 'h-[40px] w-full'
       )}
       id={`thumbnail-${displaySetInstanceUID}`}
       data-cy={

platform/ui-next/src/components/ThumbnailList/ThumbnailList.tsx

@@ -11,68 +11,73 @@ const ThumbnailList = ({
   activeDisplaySetInstanceUIDs = [],
   viewPreset,
   ThumbnailMenuItems,
-}: withAppTypes) => {
+}) => {
+  // Filter thumbnails into list items and thumbnail items
+  const listItems = thumbnails?.filter(
+    ({ componentType }) => componentType === 'thumbnailNoImage' || viewPreset === 'list'
+  );
+
+  const thumbnailItems = thumbnails?.filter(
+    ({ componentType }) => componentType !== 'thumbnailNoImage' && viewPreset === 'thumbnails'
+  );
+
   return (
-    <div
+    <div className="flex flex-col gap-[4px] pt-[4px] pr-[2.5px] pl-[5px] pb-[4px]">
-      className="min-h-[350px]"
+      {/* Thumbnail Items */}
-      style={{
+      {thumbnailItems.length > 0 && (
-        '--radix-accordion-content-height': '350px',
+        <div
-      }}
+          id="ohif-thumbnail-list"
-    >
+          className="ohif-scrollbar bg-bkg-low grid grid-cols-[repeat(auto-fit,_minmax(0,135px))] place-items-start gap-[4px] overflow-y-hidden"
-      <div
+        >
-        id="ohif-thumbnail-list"
+          {thumbnailItems.map(item => {
-        className={`ohif-scrollbar bg-bkg-low grid place-items-center overflow-y-hidden pt-[4px] pr-[2.5px] pl-[2.5px] ${viewPreset === 'thumbnails' ? 'grid-cols-2 gap-[4px] pb-[12px]' : 'grid-cols-1 gap-[2px]'}`}
+            const { displaySetInstanceUID, componentType, numInstances, ...rest } = item;
-      >
+
-        {thumbnails.map(
-          ({
-            displaySetInstanceUID,
-            description,
-            dragData,
-            seriesNumber,
-            numInstances,
-            loadingProgress,
-            modality,
-            componentType,
-            countIcon,
-            canReject,
-            onReject,
-            isTracked,
-            imageSrc,
-            messages,
-            imageAltText,
-            isHydratedForDerivedDisplaySet,
-          }) => {
             const isActive = activeDisplaySetInstanceUIDs.includes(displaySetInstanceUID);
             return (
               <Thumbnail
                 key={displaySetInstanceUID}
+                {...rest}
                 displaySetInstanceUID={displaySetInstanceUID}
-                dragData={dragData}
-                description={description}
-                seriesNumber={seriesNumber}
                 numInstances={numInstances || 1}
-                countIcon={countIcon}
-                imageSrc={imageSrc}
-                imageAltText={imageAltText}
-                messages={messages}
                 isActive={isActive}
-                canReject={canReject}
-                onReject={onReject}
-                modality={modality}
-                viewPreset={componentType === 'thumbnailNoImage' ? 'list' : viewPreset}
                 thumbnailType={componentType}
-                onClick={() => onThumbnailClick(displaySetInstanceUID)}
+                viewPreset="thumbnails"
-                onDoubleClick={() => onThumbnailDoubleClick(displaySetInstanceUID)}
+                onClick={onThumbnailClick.bind(null, displaySetInstanceUID)}
-                isTracked={isTracked}
+                onDoubleClick={onThumbnailDoubleClick.bind(null, displaySetInstanceUID)}
-                loadingProgress={loadingProgress}
+                onClickUntrack={onClickUntrack.bind(null, displaySetInstanceUID)}
-                onClickUntrack={() => onClickUntrack(displaySetInstanceUID)}
-                isHydratedForDerivedDisplaySet={isHydratedForDerivedDisplaySet}
                 ThumbnailMenuItems={ThumbnailMenuItems}
               />
             );
-          }
+          })}
-        )}
+        </div>
-      </div>
+      )}
+      {/* List Items */}
+      {listItems.length > 0 && (
+        <div
+          id="ohif-thumbnail-list"
+          className="ohif-scrollbar bg-bkg-low grid grid-cols-[repeat(auto-fit,_minmax(0,275px))] place-items-start gap-[2px] overflow-y-hidden"
+        >
+          {listItems.map(item => {
+            const { displaySetInstanceUID, componentType, numInstances, ...rest } = item;
+            const isActive = activeDisplaySetInstanceUIDs.includes(displaySetInstanceUID);
+            return (
+              <Thumbnail
+                key={displaySetInstanceUID}
+                {...rest}
+                displaySetInstanceUID={displaySetInstanceUID}
+                numInstances={numInstances || 1}
+                isActive={isActive}
+                thumbnailType={componentType}
+                viewPreset="list"
+                onClick={onThumbnailClick.bind(null, displaySetInstanceUID)}
+                onDoubleClick={onThumbnailDoubleClick.bind(null, displaySetInstanceUID)}
+                onClickUntrack={onClickUntrack.bind(null, displaySetInstanceUID)}
+                ThumbnailMenuItems={ThumbnailMenuItems}
+              />
+            );
+          })}
+        </div>
+      )}
     </div>
   );
 };
@@ -107,6 +112,7 @@ ThumbnailList.propTypes = {
   onThumbnailDoubleClick: PropTypes.func.isRequired,
   onClickUntrack: PropTypes.func.isRequired,
   viewPreset: PropTypes.string,
+  ThumbnailMenuItems: PropTypes.any,
 };
 
 export { ThumbnailList };