jan-henrik/constellation-analyzer
1
0
Fork 0
mirror of https://github.com/OFFIS-ESC/constellation-analyzer synced 2026-01-27 07:43:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: improve bottom panel collapsed state and remove broken right panel close button

Browse source 
- Increase collapsed bottom panel height from 40px to 48px for better proportions
- Show current state indicator in bottom panel even when collapsed
- Remove unnecessary and broken close button from right panel header

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jan-Henrik Bruhn 2025-10-11 22:22:42 +02:00
parent bd36dd365a
commit 227b61b2a0
3 changed files with 10 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/Panels/RightPanel.tsx
View file

@ -38,28 +38,18 @@ interface Props {
*/ */
interface PanelHeaderProps { interface PanelHeaderProps {
title: string; title: string;
onClose?: () => void;
onCollapse: () => void; onCollapse: () => void;
} }
const PanelHeader = ({ title, onClose, onCollapse }: PanelHeaderProps) => ( const PanelHeader = ({ title, onCollapse }: PanelHeaderProps) => (
<div className="flex items-center justify-between px-3 py-2 border-b border-gray-200 bg-gray-50"> <div className="flex items-center justify-between px-3 py-2 border-b border-gray-200 bg-gray-50">
<h2 className="text-sm font-semibold text-gray-700">{title}</h2> <h2 className="text-sm font-semibold text-gray-700">{title}</h2>
<div className="flex items-center space-x-1">
{onClose && (
<Tooltip title="Close (Esc)">
<IconButton size="small" onClick={onClose}>
✕
</IconButton>
</Tooltip>
)}
<Tooltip title="Collapse Panel"> <Tooltip title="Collapse Panel">
<IconButton size="small" onClick={onCollapse}> <IconButton size="small" onClick={onCollapse}>
<ChevronRightIcon fontSize="small" /> <ChevronRightIcon fontSize="small" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div> </div>
</div>
); );
const RightPanel = ({ selectedNode, selectedEdge, onClose }: Props) => { const RightPanel = ({ selectedNode, selectedEdge, onClose }: Props) => {
@ -262,7 +252,7 @@ const RightPanel = ({ selectedNode, selectedEdge, onClose }: Props) => {
className="h-full bg-white border-l border-gray-200 flex flex-col" className="h-full bg-white border-l border-gray-200 flex flex-col"
style={{ width: `${rightPanelWidth}px` }} style={{ width: `${rightPanelWidth}px` }}
> >
<PanelHeader title="Actor Properties" onClose={onClose} onCollapse={collapseRightPanel} /> <PanelHeader title="Actor Properties" onCollapse={collapseRightPanel} />
{/* Scrollable content */} {/* Scrollable content */}
<div className="flex-1 overflow-y-auto overflow-x-hidden px-3 py-3 space-y-4"> <div className="flex-1 overflow-y-auto overflow-x-hidden px-3 py-3 space-y-4">
@ -431,7 +421,7 @@ const RightPanel = ({ selectedNode, selectedEdge, onClose }: Props) => {
className="h-full bg-white border-l border-gray-200 flex flex-col" className="h-full bg-white border-l border-gray-200 flex flex-col"
style={{ width: `${rightPanelWidth}px` }} style={{ width: `${rightPanelWidth}px` }}
> >
<PanelHeader title="Relation Properties" onClose={onClose} onCollapse={collapseRightPanel} /> <PanelHeader title="Relation Properties" onCollapse={collapseRightPanel} />
{/* Scrollable content */} {/* Scrollable content */}
<div className="flex-1 overflow-y-auto overflow-x-hidden px-3 py-3 space-y-4"> <div className="flex-1 overflow-y-auto overflow-x-hidden px-3 py-3 space-y-4">

2
src/components/Timeline/BottomPanel.tsx
View file

@ -95,7 +95,7 @@ const BottomPanel: React.FC = () => {
<h3 className="font-semibold text-sm">Timeline</h3> <h3 className="font-semibold text-sm">Timeline</h3>
{/* Current State Indicator */} {/* Current State Indicator */}
{currentState && !bottomPanelCollapsed && ( {currentState && (
<> <>
<Divider orientation="vertical" flexItem sx={{ mx: 1 }} /> <Divider orientation="vertical" flexItem sx={{ mx: 1 }} />
<div className="flex items-center gap-2 px-2 py-0.5 bg-blue-50 rounded border border-blue-200"> <div className="flex items-center gap-2 px-2 py-0.5 bg-blue-50 rounded border border-blue-200">

2
src/stores/panelStore.ts
View file

@ -60,7 +60,7 @@ const MAX_RIGHT_WIDTH = 500;
const MIN_BOTTOM_HEIGHT = 150; const MIN_BOTTOM_HEIGHT = 150;
const MAX_BOTTOM_HEIGHT = 500; const MAX_BOTTOM_HEIGHT = 500;
const COLLAPSED_LEFT_WIDTH = 40; const COLLAPSED_LEFT_WIDTH = 40;
const COLLAPSED_BOTTOM_HEIGHT = 40; const COLLAPSED_BOTTOM_HEIGHT = 48;
export const usePanelStore = create<PanelState>()( export const usePanelStore = create<PanelState>()(
persist( persist(