othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ibrahim 2025-01-23 14:13:44 -05:00 committed by GitHub
parent 9d07705a1f
commit d9abc3da8d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 282 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
extensions/default/src/ViewerLayout/ResizablePanelsHook.tsx
View File

@ -1,22 +1,6 @@
import { useState, useCallback, useLayoutEffect, useRef } from 'react';
import { getPanelElement, getPanelGroupElement } from 'react-resizable-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;
import { panelGroupDefinition } from './constants/panels';
/**
* 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
);
// Percentage sizes.
const [resizablePanelCollapsedSize, setResizablePanelCollapsedSize] = useState(0);
const [resizablePanelDefaultSize, setResizablePanelDefaultSize] = useState(0);
const [leftResizablePanelMinimumSize, setLeftResizablePanelMinimumSize] = useState(0);
const [rightResizablePanelMinimumSize, setRightResizablePanelMinimumSize] = useState(0);
const [leftResizeablePanelCollapsedSize, setLeftResizePanelCollapsedSize] = 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);
setMinMaxWidth(leftPanelElem, sidePanelExpandedDefaultOffsetWidth);
const leftResizablePanelExpandedSize =
(panelGroupDefinition.left.initialExpandedOffsetWidth / panelGroupWidth) * 100;
resizableLeftPanelAPIRef?.current?.expand(leftResizablePanelExpandedSize);
setMinMaxWidth(leftPanelElem, panelGroupDefinition.left.initialExpandedOffsetWidth);
}
if (!rightPanelClosed) {
resizableRightPanelAPIRef?.current?.expand(resizablePanelExpandedSize);
setMinMaxWidth(rightPanelElem, sidePanelExpandedDefaultOffsetWidth);
const rightResizablePanelExpandedSize =
(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));
setResizablePanelCollapsedSize((sidePanelCollapsedOffsetWidth / panelGroupWidth) * 100);
setLeftResizablePanelMinimumSize(Math.min(50, minimumLeftSize));
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
: leftPanelExpandedWidth + sidePanelExpandedInsideBorderSize;
? panelGroupDefinition.left.collapsedOffsetWidth
: leftPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize;
let rightPanelOffsetWidth = resizableRightPanelAPIRef.current.isCollapsed()
? sidePanelCollapsedOffsetWidth
: rightPanelExpandedWidth + sidePanelExpandedInsideBorderSize;
? panelGroupDefinition.right.collapsedOffsetWidth
: 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();
if (!isResizableHandleDraggingRef.current) {
setMinMaxWidth(
resizableLeftPanelElemRef.current,
leftPanelExpandedWidth + sidePanelExpandedInsideBorderSize
);
}
const { width: panelGroupWidth } = resizablePanelGroupElemRef.current.getBoundingClientRect();
resizableLeftPanelAPIRef?.current?.expand(
(panelGroupDefinition.left.initialExpandedOffsetWidth / panelGroupWidth) * 100
);
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();
if (!isResizableHandleDraggingRef.current) {
setMinMaxWidth(
resizableRightPanelElemRef.current,
rightPanelExpandedWidth + sidePanelExpandedInsideBorderSize
);
}
const { width: panelGroupWidth } = resizablePanelGroupElemRef.current.getBoundingClientRect();
resizableRightPanelAPIRef?.current?.expand(
(panelGroupDefinition.right.initialExpandedOffsetWidth / panelGroupWidth) * 100
);
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,
collapsedInsideBorderSize: sidePanelCollapsedInsideBorderSize,
collapsedOutsideBorderSize: sidePanelCollapsedOutsideBorderSize,
expandedInsideBorderSize: sidePanelExpandedInsideBorderSize,
collapsedWidth: panelGroupDefinition.shared.collapsedWidth,
collapsedInsideBorderSize: panelGroupDefinition.shared.collapsedInsideBorderSize,
collapsedOutsideBorderSize: panelGroupDefinition.shared.collapsedOutsideBorderSize,
expandedInsideBorderSize: panelGroupDefinition.shared.expandedInsideBorderSize,
onClose: onLeftPanelClose,
onOpen: onLeftPanelOpen,
},
{
expandedWidth: rightPanelExpandedWidth,
collapsedWidth: sidePanelCollapsedWidth,
collapsedInsideBorderSize: sidePanelCollapsedInsideBorderSize,
collapsedOutsideBorderSize: sidePanelCollapsedOutsideBorderSize,
expandedInsideBorderSize: sidePanelExpandedInsideBorderSize,
collapsedWidth: panelGroupDefinition.shared.collapsedWidth,
collapsedInsideBorderSize: panelGroupDefinition.shared.collapsedInsideBorderSize,
collapsedOutsideBorderSize: panelGroupDefinition.shared.collapsedOutsideBorderSize,
expandedInsideBorderSize: panelGroupDefinition.shared.expandedInsideBorderSize,
onClose: onRightPanelClose,
onOpen: onRightPanelOpen,
},
{ direction: 'horizontal', id: viewerLayoutResizablePanelGroupId },
{ direction: 'horizontal', id: panelGroupDefinition.groupId },
{
defaultSize: resizablePanelDefaultSize,
minSize: resizablePanelDefaultSize,
defaultSize: leftResizablePanelMinimumSize,
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,
minSize: resizablePanelDefaultSize,
defaultSize: rightResizablePanelMinimumSize,
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,
];

38
extensions/default/src/ViewerLayout/constants/panels.ts Normal file
View File

@ -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 };

2
modes/basic-dev-mode/src/index.ts
View File

@ -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,

2
modes/basic-test-mode/src/index.ts
View File

@ -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: [
{

2
modes/microscopy/src/index.tsx
View File

@ -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',

2
modes/preclinical-4d/src/index.tsx
View File

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

2
modes/segmentation/src/index.tsx
View File

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

2
modes/tmtv/src/index.ts
View File

@ -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,

1
platform/app/cypress/integration/OHIFVideoDisplay.spec.js
View File

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

2
platform/ui-next/src/components/StudyBrowser/StudyBrowser.tsx
View File

@ -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]">
<>

39
platform/ui-next/src/components/StudyBrowserSort/StudyBrowserSort.tsx
View File

@ -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">
{selectedSort.label}
</DropdownMenuTrigger>
<Tooltip>
<TooltipTrigger className="w-full overflow-hidden">
<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
onClick={toggleSortDirection}
className="flex h-[26px] items-center justify-center bg-black"
>
{sortDirection === 'ascending' ? (
<Icons.SortingAscending className="text-primary-main w-2" />
) : (
<Icons.SortingDescending className="text-primary-main w-2" />
)}
</button>
<Tooltip>
<TooltipTrigger>
<button
onClick={toggleSortDirection}
className="flex h-[26px] items-center justify-center bg-black"
>
{sortDirection === 'ascending' ? (
<Icons.SortingAscending className="text-primary-main w-2" />
) : (
<Icons.SortingDescending className="text-primary-main w-2" />
)}
</button>
</TooltipTrigger>
<TooltipContent>Sort direction</TooltipContent>
</Tooltip>
</div>
);
}

12
platform/ui-next/src/components/StudyBrowserViewOptions/StudyBrowserViewOptions.tsx
View File

@ -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">
{activeTab?.label}
</DropdownMenuTrigger>
<Tooltip>
<TooltipTrigger className="w-full w-[50%] overflow-hidden">
<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;

31
platform/ui-next/src/components/StudyItem/StudyItem.tsx
View File

@ -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')}>
<div className="flex h-[40px] flex-1 flex-row">
<div className="flex w-full flex-row items-center">
<div className="flex flex-col items-start text-[13px]">
<div className="text-white">{date}</div>
<div className="text-muted-foreground h-[18px] max-w-[160px] overflow-hidden truncate whitespace-nowrap">
{description}
</div>
<AccordionTrigger className={classnames('hover:bg-accent bg-popover group w-full rounded')}>
<div className="flex h-[40px] w-full flex-row overflow-hidden">
<div className="flex w-full flex-row items-center justify-between">
<div className="flex min-w-0 flex-col items-start text-[13px]">
<Tooltip>
<TooltipContent>{date}</TooltipContent>
<TooltipTrigger className="w-full">
<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>

39
platform/ui-next/src/components/Thumbnail/Thumbnail.tsx
View File

@ -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="min-h-[18px] w-[128px] overflow-hidden text-ellipsis pb-0.5 pl-1 text-[12px] font-normal leading-4 text-white">
{description}
</div>
<div className="flex h-[52px] w-[128px] flex-col justify-end">
<Tooltip>
<TooltipContent>{description}</TooltipContent>
<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>
<div className="max-w-[160px] overflow-hidden overflow-ellipsis whitespace-nowrap text-[13px] font-normal text-white">
{description}
</div>
<Tooltip>
<TooltipContent>{description}</TooltipContent>
<TooltipTrigger className="w-full overflow-hidden">
<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={

106
platform/ui-next/src/components/ThumbnailList/ThumbnailList.tsx
View File

@ -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
className="min-h-[350px]"
style={{
'--radix-accordion-content-height': '350px',
}}
>
<div
id="ohif-thumbnail-list"
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]'}`}
>
{thumbnails.map(
({
displaySetInstanceUID,
description,
dragData,
seriesNumber,
numInstances,
loadingProgress,
modality,
componentType,
countIcon,
canReject,
onReject,
isTracked,
imageSrc,
messages,
imageAltText,
isHydratedForDerivedDisplaySet,
}) => {
<div className="flex flex-col gap-[4px] pt-[4px] pr-[2.5px] pl-[5px] pb-[4px]">
{/* Thumbnail Items */}
{thumbnailItems.length > 0 && (
<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"
>
{thumbnailItems.map(item => {
const { displaySetInstanceUID, componentType, numInstances, ...rest } = item;
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)}
onDoubleClick={() => onThumbnailDoubleClick(displaySetInstanceUID)}
isTracked={isTracked}
loadingProgress={loadingProgress}
onClickUntrack={() => onClickUntrack(displaySetInstanceUID)}
isHydratedForDerivedDisplaySet={isHydratedForDerivedDisplaySet}
viewPreset="thumbnails"
onClick={onThumbnailClick.bind(null, displaySetInstanceUID)}
onDoubleClick={onThumbnailDoubleClick.bind(null, displaySetInstanceUID)}
onClickUntrack={onClickUntrack.bind(null, displaySetInstanceUID)}
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 };