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

2025-09-22 10:59:33 +01:00
parent e685b8b11d
commit f4497ef59d
1 changed files with 1 additions and 84 deletions
@@ -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) */}
+      {/* Right-side stack panel is implemented in the main content flex container below */}
      <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>
      {/* Floating right-edge toggle — always visible so users can open the panel */}
      {! (stackPanelPinned || stackPanelOpen) && (