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

Remove right-side stack panel implementation and update comments for clarity

Browse Source
This commit is contained in:
Ross
2025-09-22 10:59:33 +01:00
parent e685b8b11d
commit f4497ef59d
1 changed files with 1 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dicom-viewer/src/App.tsx
+1 -84
View File
@@ -2992,90 +2992,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
{/* top stack bar removed; use right-side panel instead */}
{/* Right-side stack panel (pinnable, shows on hover when not pinned) */}
<div style={{ position: 'absolute', right: 0, top: 12, height: 'calc(100% - 24px)', zIndex: 2100, display: 'flex', alignItems: 'stretch', pointerEvents: 'auto' }}>
{/* Panel container: translateX to hide when not pinned and not hovered */}
<div
style={{
height: '100%',
width: '100%',
background: '#1f2428',
color: '#fff',
boxShadow: '0 2px 14px rgba(0,0,0,0.45)',
borderLeft: '1px solid #2f3336',
transform: stackPanelPinned || stackPanelOpen ? 'translateX(0)' : 'translateX(96%)',
transition: 'transform 220ms ease',
display: 'flex',
flexDirection: 'column',
overflow: 'hidden',
}}
>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', borderBottom: '1px solid #2b2f31' }}>
<div style={{ fontWeight: 700 }}>Stacks</div>
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
<button
title={stackPanelPinned ? 'Unpin panel' : 'Pin panel'}
onClick={() => setStackPanelPinned(p => !p)}
style={{ background: stackPanelPinned ? '#1976d2' : '#333', color: '#fff', border: 'none', padding: '6px 8px', borderRadius: 4, cursor: 'pointer' }}
>
{stackPanelPinned ? 'Pinned' : 'Pin'}
</button>
<button
title="Close"
onClick={() => { setStackPanelPinned(false); setStackPanelOpen(false); }}
style={{ background: 'transparent', color: '#fff', border: 'none', cursor: 'pointer', fontSize: 18 }}
>
×
</button>
</div>
</div>
<div style={{ overflowY: 'auto', padding: 8, flex: 1 }}>
{availableStacks.length === 0 ? (
<div style={{ color: '#999', padding: 12 }}>No stacks available</div>
) : (
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
{availableStacks.map((stack, idx) => {
const imageIds = Array.isArray(stack.imageIds) ? stack.imageIds : [];
const label = stack.name || (stack.caseId ? `Case: ${stack.caseId}` : `Stack ${idx + 1}`);
const count = imageIds.length;
const invalid = !Array.isArray(imageIds) || count === 0;
const isSelected = selectedStackIdx.includes(idx);
return (
<div
key={idx}
draggable={!invalid}
onDragStart={e => {
if (invalid) return;
e.dataTransfer.setData('text/stack-idx', String(idx));
e.dataTransfer.effectAllowed = 'copy';
}}
onClick={() => { if (!invalid) handleLoadStack(0, idx); }}
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '8px 10px',
background: isSelected ? '#1976d2' : 'transparent',
color: isSelected ? '#fff' : '#ddd',
borderRadius: 6,
cursor: invalid ? 'not-allowed' : 'pointer',
}}
>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<div style={{ fontWeight: 600 }}>{label}</div>
<div style={{ fontSize: 12, opacity: 0.7 }}>{count} img{count === 1 ? '' : 's'}</div>
</div>
<div style={{ fontSize: 12, opacity: 0.8 }}>{stack.studyId || ''}</div>
</div>
);
})}
</div>
)}
</div>
</div>
</div>
{/* Right-side stack panel is implemented in the main content flex container below */}
{/* Floating right-edge toggle — always visible so users can open the panel */}
{! (stackPanelPinned || stackPanelOpen) && (