fix(calm-hub-ui): improve sidebar positioning, style, and deeplink support

aidanm3341 · aidanm3341 · commit ceba66ded5c7 · 2026-03-11T20:28:03.000Z
diff --git a/calm-hub-ui/src/hub/Hub.tsx b/calm-hub-ui/src/hub/Hub.tsx
@@ -1,28 +1,43 @@
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { IoChevronForwardOutline } from 'react-icons/io5';
 import { TreeNavigation } from './components/tree-navigation/TreeNavigation.js';
 import { Data, Adr } from '../model/calm.js';
 import { Navbar } from '../components/navbar/Navbar.js';
 import { AdrRenderer } from './components/adr-renderer/AdrRenderer.js';
 import { DocumentDetailSection } from './components/document-detail-section/DocumentDetailSection.js';
 import { DiagramSection } from './components/diagram-section/DiagramSection.js';
+import { Sidebar } from '../visualizer/components/sidebar/Sidebar.js';
+import type { SelectedItem } from '../visualizer/contracts/contracts.js';
 import './Hub.css';
 
 export default function Hub() {
     const [data, setData] = useState<Data | undefined>();
     const [adrData, setAdrData] = useState<Adr | undefined>();
     const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+    const [selectedItem, setSelectedItem] = useState<SelectedItem>(null);
 
     function handleDataLoad(data: Data) {
         setData(data);
         setAdrData(undefined);
+        setSelectedItem(null);
     }
 
     function handleAdrLoad(adr: Adr) {
         setAdrData(adr);
         setData(undefined);
+        setSelectedItem(null);
     }
 
+    const handleItemSelect = useCallback((item: SelectedItem) => {
+        setSelectedItem(item);
+    }, []);
+
+    const closeSidebar = useCallback(() => {
+        setSelectedItem(null);
+    }, []);
+
+    const isDiagramView = data?.calmType === 'Architectures' || data?.calmType === 'Patterns';
+
     const memoizedDataLoad = useMemo(() => handleDataLoad, []);
     const memoizedAdrLoad = useMemo(() => handleAdrLoad, []);
 
@@ -31,7 +46,7 @@ export default function Hub() {
             <Navbar />
             <div className="flex flex-row flex-1 overflow-hidden bg-base-300">
                 <div className={`${isSidebarOpen ? 'w-1/4' : 'w-12'} p-4 pr-2 transition-all duration-300`}>
-                    <div className="h-full bg-base-100 rounded-2xl overflow-hidden shadow-xl flex flex-col">
+                    <div className="h-full bg-base-100 rounded-box overflow-hidden shadow-xl flex flex-col">
                         {isSidebarOpen ? (
                             <div className="flex-1 min-h-0 overflow-hidden">
                                 <TreeNavigation onDataLoad={memoizedDataLoad} onAdrLoad={memoizedAdrLoad} onCollapse={() => setIsSidebarOpen(false)} />
@@ -49,15 +64,18 @@ export default function Hub() {
                         )}
                     </div>
                 </div>
-                <div className="flex-1 overflow-auto">
+                <div className="flex-1 overflow-auto min-w-0">
                     {adrData ? (
                         <AdrRenderer adrDetails={adrData} />
-                    ) : (data?.calmType === 'Architectures' || data?.calmType === 'Patterns') ? (
-                        <DiagramSection data={data} />
+                    ) : isDiagramView ? (
+                        <DiagramSection data={data} onItemSelect={handleItemSelect} hasDetailsPanel={!!selectedItem} />
                     ) : (
                         <DocumentDetailSection data={data} />
                     )}
                 </div>
+                {selectedItem && isDiagramView && (
+                    <Sidebar selectedData={selectedItem.data} closeSidebar={closeSidebar} />
+                )}
             </div>
         </div>
     );
diff --git a/calm-hub-ui/src/hub/components/diagram-section/DiagramSection.tsx b/calm-hub-ui/src/hub/components/diagram-section/DiagramSection.tsx
@@ -4,17 +4,20 @@ import { Data } from '../../../model/calm.js';
 import { JsonRenderer } from '../json-renderer/JsonRenderer.js';
 import { Drawer } from '../../../visualizer/components/drawer/Drawer.js';
 import { SectionHeader } from '../section-header/SectionHeader.js';
+import type { SelectedItem } from '../../../visualizer/contracts/contracts.js';
 
 interface DiagramSectionProps {
     data: Data & { calmType: 'Architectures' | 'Patterns' };
+    onItemSelect?: (item: SelectedItem) => void;
+    hasDetailsPanel?: boolean;
 }
 
 const iconMap = {
     Architectures: IoConstructOutline,
     Patterns: IoGridOutline,
 } as const;
 
-export function DiagramSection({ data }: DiagramSectionProps) {
+export function DiagramSection({ data, onItemSelect, hasDetailsPanel }: DiagramSectionProps) {
     const [activeTab, setActiveTab] = useState<'diagram' | 'json'>('diagram');
 
     const Icon = iconMap[data.calmType];
@@ -41,8 +44,8 @@ export function DiagramSection({ data }: DiagramSectionProps) {
     );
 
     return (
-        <div className="w-full h-full py-4 pl-2 pr-4">
-            <div className="h-full bg-base-100 rounded-2xl overflow-hidden flex flex-col shadow-xl">
+        <div className={`w-full h-full py-4 pl-2 ${hasDetailsPanel ? 'pr-2' : 'pr-4'}`}>
+            <div className="h-full bg-base-100 rounded-box overflow-hidden flex flex-col shadow-xl">
                 <SectionHeader
                     icon={<Icon className="text-accent" />}
                     namespace={data.name}
@@ -54,7 +57,7 @@ export function DiagramSection({ data }: DiagramSectionProps) {
                 <div className="flex-1 min-h-0 overflow-hidden">
                     {activeTab === 'diagram' ? (
                         <div className="w-full h-full">
-                            <Drawer data={data} />
+                            <Drawer data={data} onItemSelect={onItemSelect} />
                         </div>
                     ) : (
                         <div className="h-full bg-base-200 overflow-auto">
diff --git a/calm-hub-ui/src/hub/components/document-detail-section/DocumentDetailSection.tsx b/calm-hub-ui/src/hub/components/document-detail-section/DocumentDetailSection.tsx
@@ -23,7 +23,7 @@ export function DocumentDetailSection({ data }: DocumentDetailSectionProps) {
 
     return (
         <div className="w-full h-full py-4 pl-2 pr-4">
-            <div className="h-full bg-base-100 rounded-2xl overflow-hidden flex flex-col shadow-xl">
+            <div className="h-full bg-base-100 rounded-box overflow-hidden flex flex-col shadow-xl">
                 <SectionHeader
                     icon={getIcon()}
                     namespace={data.name}
diff --git a/calm-hub-ui/src/hub/components/tree-navigation/TreeNavigation.tsx b/calm-hub-ui/src/hub/components/tree-navigation/TreeNavigation.tsx
@@ -343,7 +343,7 @@ function loadResource({
 export function TreeNavigation({ onDataLoad, onAdrLoad, onCollapse }: TreeNavigationProps) {
     const navigate = useNavigate();
     const params = useParams<HubParams>();
-    
+
     const [namespaces, setNamespaces] = useState<string[]>([]);
     const [selectedNamespace, setSelectedNamespace] = useState<string>(EMPTY_STR_VALUE);
     const [selectedType, setSelectedType] = useState<string>(EMPTY_STR_VALUE);
diff --git a/calm-hub-ui/src/index.css b/calm-hub-ui/src/index.css
@@ -10,13 +10,15 @@
 
 #root {
     height: 100vh;
+
+    --radius-box: 0.5rem; /* or whatever value you prefer */
 }
 
 body {
     margin: 0;
     font-family:
-        -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
-        'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+        -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+        'Helvetica Neue', sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
diff --git a/calm-hub-ui/src/visualizer/components/drawer/Drawer.test.tsx b/calm-hub-ui/src/visualizer/components/drawer/Drawer.test.tsx
@@ -1,19 +1,11 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, act } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Drawer } from './Drawer.js';
 import { Data } from '../../../model/calm.js';
-import type { SidebarProps, ReactFlowVisualizerProps } from '../../contracts/contracts.js';
+import type { ReactFlowVisualizerProps } from '../../contracts/contracts.js';
 import { DropzoneOptions } from 'react-dropzone';
 
 // Mock dependencies
-vi.mock('../sidebar/Sidebar.js', () => ({
-    Sidebar: ({ selectedData, closeSidebar }: SidebarProps) => (
-        <div data-testid="sidebar">
-            <button onClick={closeSidebar}>Close</button>
-            <div>{String(selectedData?.name ?? '')}</div>
-        </div>
-    ),
-}));
 vi.mock('../reactflow/ReactFlowVisualizer.js', () => ({
     ReactFlowVisualizer: ({ calmData }: ReactFlowVisualizerProps) => (
         <div data-testid="reactflow-visualizer">
@@ -98,12 +90,8 @@ describe('Drawer', () => {
         expect(screen.getByTestId('relationship-count')).toHaveTextContent('2');
     });
 
-    it('shows sidebar when selectedNode is set', () => {
+    it('does not show sidebar initially', () => {
         render(<Drawer data={calmData as unknown as Data} />);
-        const checkbox = screen.getByRole('checkbox', { name: /drawer-toggle/i });
-        act(() => {
-            fireEvent.click(checkbox);
-        });
-        expect(checkbox).toBeInTheDocument();
+        expect(screen.queryByLabelText('close-sidebar')).not.toBeInTheDocument();
     });
 });
diff --git a/calm-hub-ui/src/visualizer/components/drawer/Drawer.tsx b/calm-hub-ui/src/visualizer/components/drawer/Drawer.tsx
@@ -3,10 +3,9 @@ import { CalmArchitectureSchema, CalmNodeSchema, CalmRelationshipSchema } from '
 import { useDropzone } from 'react-dropzone';
 import { ReactFlowVisualizer } from '../reactflow/ReactFlowVisualizer.js';
 import { PatternVisualizer } from '../reactflow/PatternVisualizer.js';
-import { Sidebar } from '../sidebar/Sidebar.js';
 import { MetadataPanel } from '../reactflow/MetadataPanel.js';
 import { toSidebarNodeData, toSidebarEdgeData } from '../reactflow/utils/patternClickHandlers.js';
-import type { DrawerProps, SelectedItem, Flow, Control } from '../../contracts/contracts.js';
+import type { DrawerProps, Flow, Control } from '../../contracts/contracts.js';
 
 /**
  * Detect whether JSON data is a CALM pattern (JSON Schema) or an architecture instance.
@@ -26,11 +25,10 @@ function extractId(item: CalmNodeSchema | CalmRelationshipSchema): string {
     return item?.['unique-id'] || '';
 }
 
-export function Drawer({ data }: DrawerProps) {
+export function Drawer({ data, onItemSelect }: DrawerProps) {
     const [calmInstance, setCALMInstance] = useState<CalmArchitectureSchema | undefined>(undefined);
     const [patternInstance, setPatternInstance] = useState<Record<string, unknown> | undefined>(undefined);
     const [fileInstance, setFileInstance] = useState<Record<string, unknown> | undefined>(undefined);
-    const [selectedItem, setSelectedItem] = useState<SelectedItem>(null);
     // Default to collapsed as per user request
     const [isMetadataCollapsed, setIsMetadataCollapsed] = useState(true);
     // Height of the metadata panel when expanded (in pixels)
@@ -114,25 +112,25 @@ export function Drawer({ data }: DrawerProps) {
     const hasContent = !!(calmInstance || patternInstance);
 
     const closeSidebar = useCallback(() => {
-        setSelectedItem(null);
-    }, []);
+        onItemSelect?.(null);
+    }, [onItemSelect]);
 
     // Pattern-specific click handlers
     const handlePatternNodeClick = useCallback((nodeData: Record<string, unknown>) => {
-        setSelectedItem({ data: toSidebarNodeData(nodeData) });
-    }, []);
+        onItemSelect?.({ data: toSidebarNodeData(nodeData) });
+    }, [onItemSelect]);
 
     const handlePatternEdgeClick = useCallback((edgeData: Record<string, unknown>) => {
-        setSelectedItem({ data: toSidebarEdgeData(edgeData) });
-    }, []);
+        onItemSelect?.({ data: toSidebarEdgeData(edgeData) });
+    }, [onItemSelect]);
 
     const handleNodeClick = useCallback((nodeData: CalmNodeSchema) => {
-        setSelectedItem({ data: toSidebarNodeData(nodeData as Record<string, unknown>) });
-    }, []);
+        onItemSelect?.({ data: toSidebarNodeData(nodeData as Record<string, unknown>) });
+    }, [onItemSelect]);
 
     const handleEdgeClick = useCallback((edgeData: CalmRelationshipSchema) => {
-        setSelectedItem({ data: toSidebarEdgeData(edgeData as Record<string, unknown>) });
-    }, []);
+        onItemSelect?.({ data: toSidebarEdgeData(edgeData as Record<string, unknown>) });
+    }, [onItemSelect]);
 
     // Handle transition click from flows panel - highlight the relationship
     const handleTransitionClick = useCallback(
@@ -157,77 +155,65 @@ export function Drawer({ data }: DrawerProps) {
     );
 
     return (
-        <div {...getRootProps()} className="flex-1 flex overflow-hidden h-full">
+        <div {...getRootProps()} className="flex-1 flex flex-col overflow-hidden h-full">
             {!hasContent && <input {...getInputProps()} />}
-            <div className={`drawer drawer-end ${selectedItem ? 'drawer-open' : ''} w-full h-full`}>
-                <input
-                    type="checkbox"
-                    aria-label="drawer-toggle"
-                    className="drawer-toggle"
-                    checked={!!selectedItem}
-                    onChange={closeSidebar}
-                />
-                <div className="drawer-content h-full flex flex-col">
-                    {hasContent ? (
-                        <>
-                            <div
-                                style={{
-                                    flex: 1,
-                                    minHeight: 0,
-                                    ...(hasMetadata && !isMetadataCollapsed ? { height: `calc(100% - ${metadataPanelHeight}px)` } : {}),
-                                }}
-                            >
-                                {patternInstance ? (
-                                    <PatternVisualizer
-                                        patternData={patternInstance}
-                                        onNodeClick={handlePatternNodeClick}
-                                        onEdgeClick={handlePatternEdgeClick}
-                                        onBackgroundClick={closeSidebar}
-                                    />
-                                ) : calmInstance ? (
-                                    <ReactFlowVisualizer
-                                        calmData={calmInstance}
-                                        onNodeClick={handleNodeClick}
-                                        onEdgeClick={handleEdgeClick}
-                                        onBackgroundClick={closeSidebar}
-                                    />
-                                ) : null}
-                            </div>
-                            {hasMetadata && !patternInstance && (
-                                <div
-                                    style={{
-                                        height: isMetadataCollapsed ? '48px' : `${metadataPanelHeight}px`,
-                                        flexShrink: 0,
-                                    }}
-                                >
-                                    <MetadataPanel
-                                        flows={flows}
-                                        controls={controls}
-                                        onTransitionClick={handleTransitionClick}
-                                        onNodeClick={handleControlNodeClick}
-                                        isCollapsed={isMetadataCollapsed}
-                                        onToggleCollapse={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-                                        height={metadataPanelHeight}
-                                        onHeightChange={setMetadataPanelHeight}
-                                    />
-                                </div>
-                            )}
-                        </>
-                    ) : (
-                        <div className="flex justify-center items-center h-full w-full">
-                            {isDragActive ? (
-                                <p>Drop your file here ...</p>
-                            ) : (
-                                <p>
-                                    {'Drag and drop your file here or '}
-                                    <span className="border-b border-dotted border-black pb-1">Browse</span>
-                                </p>
-                            )}
+            {hasContent ? (
+                <>
+                    <div
+                        style={{
+                            flex: 1,
+                            minHeight: 0,
+                            ...(hasMetadata && !isMetadataCollapsed ? { height: `calc(100% - ${metadataPanelHeight}px)` } : {}),
+                        }}
+                    >
+                        {patternInstance ? (
+                            <PatternVisualizer
+                                patternData={patternInstance}
+                                onNodeClick={handlePatternNodeClick}
+                                onEdgeClick={handlePatternEdgeClick}
+                                onBackgroundClick={closeSidebar}
+                            />
+                        ) : calmInstance ? (
+                            <ReactFlowVisualizer
+                                calmData={calmInstance}
+                                onNodeClick={handleNodeClick}
+                                onEdgeClick={handleEdgeClick}
+                                onBackgroundClick={closeSidebar}
+                            />
+                        ) : null}
+                    </div>
+                    {hasMetadata && !patternInstance && (
+                        <div
+                            style={{
+                                height: isMetadataCollapsed ? '48px' : `${metadataPanelHeight}px`,
+                                flexShrink: 0,
+                            }}
+                        >
+                            <MetadataPanel
+                                flows={flows}
+                                controls={controls}
+                                onTransitionClick={handleTransitionClick}
+                                onNodeClick={handleControlNodeClick}
+                                isCollapsed={isMetadataCollapsed}
+                                onToggleCollapse={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
+                                height={metadataPanelHeight}
+                                onHeightChange={setMetadataPanelHeight}
+                            />
                         </div>
                     )}
+                </>
+            ) : (
+                <div className="flex justify-center items-center h-full w-full">
+                    {isDragActive ? (
+                        <p>Drop your file here ...</p>
+                    ) : (
+                        <p>
+                            {'Drag and drop your file here or '}
+                            <span className="border-b border-dotted border-black pb-1">Browse</span>
+                        </p>
+                    )}
                 </div>
-                {selectedItem && <Sidebar selectedData={selectedItem.data} closeSidebar={closeSidebar} />}
-            </div>
+            )}
         </div>
     );
 }
diff --git a/calm-hub-ui/src/visualizer/components/sidebar/Sidebar.tsx b/calm-hub-ui/src/visualizer/components/sidebar/Sidebar.tsx
diff --git a/calm-hub-ui/src/visualizer/contracts/contracts.ts b/calm-hub-ui/src/visualizer/contracts/contracts.ts
diff --git a/calm-hub-ui/src/visualizer/contracts/visualizer-contracts.ts b/calm-hub-ui/src/visualizer/contracts/visualizer-contracts.ts
