ross/dv3d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement code changes to enhance functionality and improve performance

Browse Source
This commit is contained in:
Ross
2025-09-15 12:42:55 +01:00
parent 9080370bd1
commit 2c9b0345c4
1 changed files with 671 additions and 698 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dicom-viewer/src/App.tsx
+37 -64
View File
@@ -2790,50 +2790,46 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
>
{/* Custom Stack Dropdown */}
<div style={{ position: "relative" }}>
{/* Stack selector trigger button */}
<button
onClick={(e) => {
e.stopPropagation();
setOpenDropdownIdx(prev => (prev === i ? null : i));
}}
style={{
background: "#222",
padding: "6px 12px",
background: "#333",
color: "#fff",
border: "1px solid #444",
borderRadius: "4px",
padding: "2px 8px",
fontSize: "13px",
marginRight: "6px",
minWidth: 120,
textAlign: "left",
cursor: "pointer",
pointerEvents: "auto",
fontSize: 13,
}}
onClick={() => setOpenDropdownIdx(openDropdownIdx === i ? null : i)}
//onBlur={() => setTimeout(() => setOpenDropdownIdx(null), 150)}
aria-haspopup="listbox"
aria-expanded={openDropdownIdx === i}
title="Choose stack"
>
{/* Show current stack with indicator */}
{(() => {
const stackObj = availableStacks[selectedStackIdx[i] || 0];
const thisUID = stackObj?.studyInstanceUID;
const sameStudy = referenceUID && thisUID && referenceUID === thisUID;
const dotColor = sameStudy ? "#4caf50" : "#888";
return (
<span>
<span style={{
color: dotColor,
fontWeight: "bold",
marginRight: 6,
fontSize: "16px",
verticalAlign: "middle",
}}>●</span>
Stack {selectedStackIdx[i] + 1} ({stackObj?.imageIds.length || 0} images)
</span>
);
// Determine label for currently selected stack in this viewport
const selIdx = (Array.isArray(selectedStackIdx) ? selectedStackIdx[i] : undefined);
const stackObj = typeof selIdx === "number" && availableStacks[selIdx] ? availableStacks[selIdx] : undefined;
const imageIds = stackObj && Array.isArray((stackObj as any).imageIds) ? (stackObj as any).imageIds : [];
const label = stackObj
? ((stackObj as any).name || ((stackObj as any).caseId ? `Case: ${(stackObj as any).caseId}` : undefined))
: undefined;
if (label) return label;
if (imageIds.length > 0) return `Stack ${(typeof selIdx === 'number') ? (selIdx + 1) : '1'}`;
// fallback: if viewport already has images, show count
const currentImages = viewportImageIds[i] || [];
if (currentImages.length > 0) return `Stack (${currentImages.length} images)`;
return "No stack";
})()}
<span style={{ float: "right", fontSize: "12px" }}>▼</span>
<span style={{ marginLeft: 8, opacity: 0.8 }}>{openDropdownIdx === i ? "▲" : "▼"}</span>
</button>
{/* Dropdown */}
{openDropdownIdx === i && (
<div
ref={el => {
if (el) el.focus();
}}
ref={el => { if (el) el.focus(); }}
tabIndex={0}
style={{
position: "absolute",
@@ -2852,31 +2848,13 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
}}
role="listbox"
onMouseDown={e => e.stopPropagation()}
onWheel={e => {
// Trap scroll inside the dropdown
const target = e.currentTarget as HTMLDivElement;
const { scrollTop, scrollHeight, clientHeight } = target;
const atTop = scrollTop === 0;
const atBottom = scrollTop + clientHeight >= scrollHeight - 1;
if (
(e.deltaY < 0 && atTop) ||
(e.deltaY > 0 && atBottom)
) {
// Let the event bubble to parent (viewport)
return;
}
// Otherwise, prevent scrolling the viewport
e.stopPropagation();
e.preventDefault();
// Manually scroll the menu
target.scrollTop += e.deltaY;
}}
onBlur={e => {
const related = e.relatedTarget as Node;
const parent = e.currentTarget.parentElement;
if (!parent?.contains(related)) {
setTimeout(() => setOpenDropdownIdx(null), 100);
// close when focus leaves
setTimeout(() => {
if (!(e.currentTarget as HTMLElement).contains(document.activeElement)) {
setOpenDropdownIdx(null);
}
}, 0);
}}
>
{availableStacks.map((stackObj, idx) => {
@@ -2911,13 +2889,8 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
console.warn(`Attempted to select invalid stack at index ${idx}`, stackObj);
return;
}
// Select the stack for this viewport
// Use the shared handler so selection behavior is consistent
handleLoadStack(i, idx).catch((err) => {
console.error("Failed to load stack:", err);
});
// Close the dropdown
// Use existing handler to load the stack into this viewport
handleLoadStack(i, idx).catch(err => console.error("Failed to load stack:", err));
setOpenDropdownIdx(null);
}}
>
@@ -2934,12 +2907,12 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
}
</div >
);
}
}
return (
return (
// App root
<div
ref={appRootRef}
@@ -3639,7 +3612,7 @@ return (
{/* ...rest of your UI... */}
</div >
)
)
}