feat: sync pane workspace overhaul from private repo
- ship the expanded left-nav and pane header workspace updates - add dimension-driven browse flow, map view upgrades, and delete-node tooling - expand eval coverage and refresh the public UI docs for the new layout Generated with Codex
This commit is contained in:
“BeeRad”
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import { useState, type ReactNode } from 'react';
|
||||
import {
|
||||
Search,
|
||||
Plus,
|
||||
@@ -11,6 +11,8 @@ import {
|
||||
Table2,
|
||||
BookOpen,
|
||||
Settings,
|
||||
PanelLeftClose,
|
||||
PanelLeftOpen,
|
||||
} from 'lucide-react';
|
||||
import type { PaneType } from '../panes/types';
|
||||
|
||||
@@ -20,127 +22,74 @@ interface LeftToolbarProps {
|
||||
onRefreshClick: () => void;
|
||||
onSettingsClick: () => void;
|
||||
onPaneTypeClick: (paneType: PaneType) => void;
|
||||
activePane: 'A' | 'B';
|
||||
slotAType: PaneType | null;
|
||||
slotBType: PaneType | null;
|
||||
isExpanded: boolean;
|
||||
onToggleExpanded: () => void;
|
||||
openTabTypes: Set<PaneType>;
|
||||
activeTabType: PaneType | null;
|
||||
}
|
||||
|
||||
// Map pane types to their icons (chat removed in rah-light, guides moved to settings)
|
||||
const PANE_TYPE_ICONS: Record<string, typeof LayoutList> = {
|
||||
views: LayoutList,
|
||||
map: Map,
|
||||
dimensions: Folder,
|
||||
table: Table2,
|
||||
skills: BookOpen,
|
||||
};
|
||||
const NAV_WIDTH_COLLAPSED = 50;
|
||||
const NAV_WIDTH_EXPANDED = 280;
|
||||
|
||||
const PANE_TYPE_LABELS: Record<string, string> = {
|
||||
views: 'Feed',
|
||||
map: 'Map',
|
||||
dimensions: 'Dimensions',
|
||||
table: 'Table',
|
||||
skills: 'Skills',
|
||||
};
|
||||
const VIEW_ITEMS: Array<{ paneType: PaneType; label: string; icon: typeof LayoutList }> = [
|
||||
{ paneType: 'views', label: 'Nodes', icon: LayoutList },
|
||||
{ paneType: 'skills', label: 'Skills', icon: BookOpen },
|
||||
{ paneType: 'map', label: 'Map', icon: Map },
|
||||
{ paneType: 'dimensions', label: 'Dimension', icon: Folder },
|
||||
{ paneType: 'table', label: 'Table', icon: Table2 },
|
||||
];
|
||||
|
||||
// Pane types shown in the toolbar center section (skills is pinned above settings)
|
||||
const TOOLBAR_PANE_TYPES: PaneType[] = ['views', 'map', 'dimensions', 'table'];
|
||||
|
||||
interface ToolbarButtonProps {
|
||||
function NavButton({
|
||||
icon: Icon,
|
||||
label,
|
||||
expanded,
|
||||
active,
|
||||
onClick,
|
||||
trailing,
|
||||
activeTone = 'neutral',
|
||||
}: {
|
||||
icon: typeof Search;
|
||||
label: string;
|
||||
shortcut?: string;
|
||||
expanded: boolean;
|
||||
active?: boolean;
|
||||
onClick: () => void;
|
||||
disabled?: boolean;
|
||||
isActive?: boolean;
|
||||
}
|
||||
|
||||
function ToolbarButton({ icon: Icon, label, shortcut, onClick, disabled, isActive }: ToolbarButtonProps) {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
trailing?: ReactNode;
|
||||
activeTone?: 'neutral' | 'green';
|
||||
}) {
|
||||
const [hovered, setHovered] = useState(false);
|
||||
const activeColor = activeTone === 'green' ? '#22c55e' : '#f0f0f0';
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
title={shortcut ? `${label} (${shortcut})` : label}
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
title={expanded ? undefined : label}
|
||||
style={{
|
||||
width: '36px',
|
||||
width: '100%',
|
||||
height: '36px',
|
||||
borderRadius: '8px',
|
||||
border: 'none',
|
||||
background: isHovered ? '#1a1a1a' : 'transparent',
|
||||
color: isActive ? '#22c55e' : (isHovered ? '#aaa' : '#666'),
|
||||
cursor: disabled ? 'not-allowed' : 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
transition: 'all 0.15s ease',
|
||||
opacity: disabled ? 0.5 : 1,
|
||||
}}
|
||||
>
|
||||
<Icon size={18} />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
interface PaneTypeButtonProps {
|
||||
icon: typeof LayoutList;
|
||||
label: string;
|
||||
paneType: PaneType;
|
||||
isOpen: boolean;
|
||||
isActivePane: boolean;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
function PaneTypeButton({ icon: Icon, label, paneType, isOpen, isActivePane, onClick }: PaneTypeButtonProps) {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
// Determine color: green if open, brighter if it's the active pane
|
||||
const getColor = () => {
|
||||
if (isOpen) {
|
||||
return isActivePane ? '#4ade80' : '#22c55e'; // Brighter green for active
|
||||
}
|
||||
return isHovered ? '#aaa' : '#666';
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
title={label}
|
||||
style={{
|
||||
width: '36px',
|
||||
height: '36px',
|
||||
borderRadius: '8px',
|
||||
border: 'none',
|
||||
background: isOpen ? '#1a1a1a' : (isHovered ? '#151515' : 'transparent'),
|
||||
color: getColor(),
|
||||
background: active ? '#151515' : (hovered ? '#121212' : 'transparent'),
|
||||
color: active ? activeColor : (hovered ? '#c7c7c7' : '#7a7a7a'),
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
justifyContent: expanded ? 'space-between' : 'center',
|
||||
gap: '10px',
|
||||
padding: expanded ? '0 10px' : '0',
|
||||
transition: 'all 0.15s ease',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<Icon size={18} />
|
||||
{/* Active pane indicator dot */}
|
||||
{isActivePane && isOpen && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: '4px',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
width: '4px',
|
||||
height: '4px',
|
||||
borderRadius: '50%',
|
||||
background: '#4ade80',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<span style={{ display: 'flex', alignItems: 'center', gap: '10px', minWidth: 0 }}>
|
||||
<Icon size={18} />
|
||||
{expanded ? (
|
||||
<span style={{ fontSize: '13px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
{label}
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
{expanded ? trailing : null}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -151,97 +100,59 @@ export default function LeftToolbar({
|
||||
onRefreshClick,
|
||||
onSettingsClick,
|
||||
onPaneTypeClick,
|
||||
activePane,
|
||||
slotAType,
|
||||
slotBType,
|
||||
isExpanded,
|
||||
onToggleExpanded,
|
||||
openTabTypes,
|
||||
activeTabType,
|
||||
}: LeftToolbarProps) {
|
||||
// Determine which pane types are currently open
|
||||
const openPaneTypes = new Set<PaneType>(
|
||||
[slotAType, slotBType].filter((t): t is PaneType => t !== null)
|
||||
);
|
||||
|
||||
// Determine which pane type is in the active pane (null if pane is closed)
|
||||
const activePaneType = activePane === 'A' ? slotAType : slotBType;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: '50px',
|
||||
width: isExpanded ? `${NAV_WIDTH_EXPANDED}px` : `${NAV_WIDTH_COLLAPSED}px`,
|
||||
height: '100%',
|
||||
background: '#0a0a0a',
|
||||
background: 'transparent',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
padding: '12px 0',
|
||||
padding: '12px 8px',
|
||||
flexShrink: 0,
|
||||
transition: 'width 0.2s ease',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{/* Top section - Actions */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
|
||||
<ToolbarButton
|
||||
icon={Search}
|
||||
label="Search"
|
||||
shortcut="⌘K"
|
||||
onClick={onSearchClick}
|
||||
/>
|
||||
<ToolbarButton
|
||||
icon={Plus}
|
||||
label="Add Stuff"
|
||||
onClick={onAddStuffClick}
|
||||
/>
|
||||
<ToolbarButton
|
||||
icon={RefreshCw}
|
||||
label="Refresh"
|
||||
shortcut="⌘⇧R"
|
||||
onClick={onRefreshClick}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
<NavButton
|
||||
icon={isExpanded ? PanelLeftClose : PanelLeftOpen}
|
||||
label={isExpanded ? 'Collapse' : 'Expand'}
|
||||
expanded={isExpanded}
|
||||
onClick={onToggleExpanded}
|
||||
/>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
|
||||
<NavButton icon={Search} label="Search" expanded={isExpanded} onClick={onSearchClick} />
|
||||
<NavButton icon={Plus} label="Add Stuff" expanded={isExpanded} onClick={onAddStuffClick} />
|
||||
<NavButton icon={RefreshCw} label="Refresh" expanded={isExpanded} onClick={onRefreshClick} />
|
||||
</div>
|
||||
|
||||
<div style={{ borderTop: '1px solid #1a1a1a', paddingTop: '14px', marginTop: '10px' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px', paddingTop: '4px' }}>
|
||||
{VIEW_ITEMS.map((item) => (
|
||||
<NavButton
|
||||
key={`${item.paneType}-${item.label}`}
|
||||
icon={item.icon}
|
||||
label={item.label}
|
||||
expanded={isExpanded}
|
||||
active={activeTabType === item.paneType || openTabTypes.has(item.paneType)}
|
||||
onClick={() => onPaneTypeClick(item.paneType)}
|
||||
activeTone="green"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Middle section - Pane Types */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: '4px',
|
||||
padding: '8px 0',
|
||||
}}
|
||||
>
|
||||
{TOOLBAR_PANE_TYPES.map((paneType) => {
|
||||
const Icon = PANE_TYPE_ICONS[paneType];
|
||||
const label = PANE_TYPE_LABELS[paneType];
|
||||
const isOpen = openPaneTypes.has(paneType);
|
||||
const isActivePane = activePaneType === paneType;
|
||||
|
||||
return (
|
||||
<PaneTypeButton
|
||||
key={paneType}
|
||||
icon={Icon}
|
||||
label={label}
|
||||
paneType={paneType}
|
||||
isOpen={isOpen}
|
||||
isActivePane={isActivePane}
|
||||
onClick={() => onPaneTypeClick(paneType)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Bottom section - Skills + Settings */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
|
||||
<PaneTypeButton
|
||||
icon={BookOpen}
|
||||
label="Skills"
|
||||
paneType="skills"
|
||||
isOpen={openPaneTypes.has('skills')}
|
||||
isActivePane={activePaneType === 'skills'}
|
||||
onClick={() => onPaneTypeClick('skills')}
|
||||
/>
|
||||
<ToolbarButton
|
||||
icon={Settings}
|
||||
label="Settings"
|
||||
onClick={onSettingsClick}
|
||||
/>
|
||||
<div style={{ borderTop: '1px solid #1a1a1a', paddingTop: '8px' }}>
|
||||
<NavButton icon={Settings} label="Settings" expanded={isExpanded} onClick={onSettingsClick} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -45,16 +45,17 @@ export default function ThreePanelLayout() {
|
||||
|
||||
// Slot states - the core of the flexible pane system
|
||||
// Default: Feed on left, closed on right (chat removed in rah-light)
|
||||
const [slotA, setSlotA] = usePersistentState<SlotState | null>('ui.slotA.v4', {
|
||||
const [slotA, setSlotA] = usePersistentState<SlotState | null>('ui.slotA.v5', {
|
||||
type: 'views',
|
||||
});
|
||||
|
||||
// SlotB can be null (closed) or a SlotState
|
||||
// Default: closed (chat removed in rah-light)
|
||||
const [slotB, setSlotB] = usePersistentState<SlotState | null>('ui.slotB.v4', null);
|
||||
const [slotB, setSlotB] = usePersistentState<SlotState | null>('ui.slotB.v5', null);
|
||||
|
||||
// SlotB width as percentage (when open)
|
||||
const [slotBWidth, setSlotBWidth] = usePersistentState<number>('ui.slotBWidth', 50);
|
||||
const [leftNavExpanded, setLeftNavExpanded] = usePersistentState<boolean>('ui.leftNavExpanded', false);
|
||||
|
||||
// Migration: if a slot was persisted with type 'guides' (now moved to settings), reset it
|
||||
useEffect(() => {
|
||||
@@ -64,6 +65,12 @@ export default function ThreePanelLayout() {
|
||||
if (slotB && (slotB.type as string) === 'guides') {
|
||||
setSlotB(null);
|
||||
}
|
||||
if (slotA?.type === 'node') {
|
||||
setSlotA({ type: 'views' });
|
||||
}
|
||||
if (slotB?.type === 'node') {
|
||||
setSlotB(null);
|
||||
}
|
||||
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
// Track which pane is active (last interacted with)
|
||||
@@ -96,6 +103,7 @@ export default function ThreePanelLayout() {
|
||||
|
||||
// Active dimension tracking
|
||||
const [activeDimension, setActiveDimension] = usePersistentState<string | null>('ui.focus.activeDimension', null);
|
||||
const [browseDimensionFilter, setBrowseDimensionFilter] = useState<string | null>(null);
|
||||
|
||||
// Delegations state (deprecated - kept for component compatibility)
|
||||
const [delegationsMap] = useState<Record<string, AgentDelegation>>({});
|
||||
@@ -485,6 +493,37 @@ export default function ThreePanelLayout() {
|
||||
setNodesPanelRefresh(prev => prev + 1);
|
||||
}, []);
|
||||
|
||||
const openPaneSingleton = useCallback((paneType: PaneType) => {
|
||||
if (paneType !== 'node') {
|
||||
if (slotA?.type === paneType) {
|
||||
setActivePane('A');
|
||||
return;
|
||||
}
|
||||
if (slotB?.type === paneType) {
|
||||
setActivePane('B');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (!slotA) {
|
||||
setSlotA({ type: paneType });
|
||||
setActivePane('A');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!slotB) {
|
||||
setSlotB({ type: paneType });
|
||||
setActivePane('B');
|
||||
return;
|
||||
}
|
||||
|
||||
if (activePane === 'A') {
|
||||
setSlotA(prev => prev ? ({ ...prev, type: paneType }) : { type: paneType });
|
||||
} else {
|
||||
setSlotB(prev => prev ? ({ ...prev, type: paneType }) : { type: paneType });
|
||||
}
|
||||
}, [activePane, slotA, slotB, setSlotA, setSlotB]);
|
||||
|
||||
const handleNodeOpenFromDimensions = useCallback((nodeId: number) => {
|
||||
// Switch to node pane and open the node
|
||||
const currentTabs = slotA?.type === 'node' ? (slotA.nodeTabs || []) : [];
|
||||
@@ -499,35 +538,26 @@ export default function ThreePanelLayout() {
|
||||
setActivePane('A');
|
||||
}, [slotA, setSlotA]);
|
||||
|
||||
// Handle pane type selection from toolbar
|
||||
const handlePaneTypeClick = useCallback((paneType: PaneType) => {
|
||||
// If no panes open → open in slot A
|
||||
if (!slotA) {
|
||||
setSlotA({ type: paneType });
|
||||
setActivePane('A');
|
||||
return;
|
||||
}
|
||||
const handleDimensionPaneSelect = useCallback((dimensionName: string | null) => {
|
||||
setBrowseDimensionFilter(dimensionName);
|
||||
setActiveDimension(dimensionName);
|
||||
|
||||
// If only one pane open → open second pane with this type
|
||||
if (!slotB) {
|
||||
setSlotB({ type: paneType });
|
||||
if (!dimensionName) return;
|
||||
|
||||
if (activePane === 'B' && slotB?.type === 'dimensions') {
|
||||
setSlotB({ type: 'views' });
|
||||
setActivePane('B');
|
||||
return;
|
||||
}
|
||||
|
||||
// Two panes open → replace the active pane
|
||||
if (activePane === 'A') {
|
||||
setSlotA(prev => prev ? ({
|
||||
...prev,
|
||||
type: paneType,
|
||||
}) : { type: paneType });
|
||||
} else {
|
||||
setSlotB(prev => prev ? ({
|
||||
...prev,
|
||||
type: paneType,
|
||||
}) : { type: paneType });
|
||||
}
|
||||
}, [activePane, slotA, slotB, setSlotA, setSlotB]);
|
||||
setSlotA({ type: 'views' });
|
||||
setActivePane('A');
|
||||
}, [activePane, slotB, setSlotA, setSlotB, setActiveDimension]);
|
||||
|
||||
// Handle pane type selection from toolbar
|
||||
const handlePaneTypeClick = useCallback((paneType: PaneType) => {
|
||||
openPaneSingleton(paneType);
|
||||
}, [openPaneSingleton]);
|
||||
|
||||
// Ensure the Feed pane is visible (for quick-add loading placeholders)
|
||||
const ensureFeedOpen = useCallback(() => {
|
||||
@@ -596,25 +626,19 @@ export default function ThreePanelLayout() {
|
||||
const handleSlotAAction = useCallback((action: PaneAction) => {
|
||||
switch (action.type) {
|
||||
case 'switch-pane-type':
|
||||
setSlotA(prev => ({
|
||||
...prev,
|
||||
type: action.paneType,
|
||||
}));
|
||||
openPaneSingleton(action.paneType);
|
||||
break;
|
||||
case 'open-node':
|
||||
handleNodeSelect(action.nodeId, false);
|
||||
break;
|
||||
}
|
||||
}, [handleNodeSelect, setSlotA]);
|
||||
}, [handleNodeSelect, openPaneSingleton]);
|
||||
|
||||
const handleSlotBAction = useCallback((action: PaneAction) => {
|
||||
if (!slotB) return;
|
||||
switch (action.type) {
|
||||
case 'switch-pane-type':
|
||||
setSlotB(prev => prev ? ({
|
||||
...prev,
|
||||
type: action.paneType,
|
||||
}) : null);
|
||||
openPaneSingleton(action.paneType);
|
||||
break;
|
||||
case 'open-node':
|
||||
// Open node in slot B (if it's a node pane)
|
||||
@@ -636,7 +660,7 @@ export default function ThreePanelLayout() {
|
||||
}
|
||||
break;
|
||||
}
|
||||
}, [slotB, setSlotB]);
|
||||
}, [slotB, setSlotB, openPaneSingleton]);
|
||||
|
||||
// Open a node directly in Slot B (for Alt+Click)
|
||||
const handleNodeOpenInSlotB = useCallback((nodeId: number) => {
|
||||
@@ -909,7 +933,7 @@ export default function ThreePanelLayout() {
|
||||
onNodeOpen={handleNodeOpenFromDimensions}
|
||||
refreshToken={folderViewRefresh}
|
||||
onDataChanged={handleFolderViewDataChanged}
|
||||
onDimensionSelect={setActiveDimension}
|
||||
onDimensionSelect={handleDimensionPaneSelect}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -942,6 +966,11 @@ export default function ThreePanelLayout() {
|
||||
refreshToken={nodesPanelRefresh}
|
||||
pendingNodes={pendingNodes}
|
||||
onDismissPending={(id) => setPendingNodes(prev => prev.filter(p => p.id !== id))}
|
||||
externalDimensionFilter={browseDimensionFilter}
|
||||
onClearExternalDimensionFilter={() => {
|
||||
setBrowseDimensionFilter(null);
|
||||
setActiveDimension(null);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -998,9 +1027,10 @@ export default function ThreePanelLayout() {
|
||||
setShowSettings(true);
|
||||
}}
|
||||
onPaneTypeClick={handlePaneTypeClick}
|
||||
activePane={activePane}
|
||||
slotAType={slotA?.type ?? null}
|
||||
slotBType={slotB?.type ?? null}
|
||||
isExpanded={leftNavExpanded}
|
||||
onToggleExpanded={() => setLeftNavExpanded(prev => !prev)}
|
||||
openTabTypes={new Set([slotA?.type, slotB?.type].filter((t): t is PaneType => t != null))}
|
||||
activeTabType={activePane === 'A' ? slotA?.type ?? null : slotB?.type ?? null}
|
||||
onRefreshClick={handleRefreshAll}
|
||||
/>
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState, useRef, type DragEvent } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { Check, X, ArrowLeft, Plus, Trash2, Edit2, Lock } from 'lucide-react';
|
||||
import type { Node } from '@/types/database';
|
||||
import ConfirmDialog from '../common/ConfirmDialog';
|
||||
@@ -23,11 +24,12 @@ interface FolderViewOverlayProps {
|
||||
refreshToken: number;
|
||||
onDataChanged?: () => void;
|
||||
onDimensionSelect?: (dimensionName: string | null) => void;
|
||||
toolbarHost?: HTMLDivElement | null;
|
||||
}
|
||||
|
||||
const PAGE_SIZE = 100;
|
||||
|
||||
export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, onDataChanged, onDimensionSelect: _onDimensionSelect }: FolderViewOverlayProps) {
|
||||
export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, onDataChanged, onDimensionSelect, toolbarHost }: FolderViewOverlayProps) {
|
||||
const [view, setView] = useState<'dimensions' | 'nodes'>('dimensions');
|
||||
const [dimensions, setDimensions] = useState<DimensionSummary[]>([]);
|
||||
const [dimensionsLoading, setDimensionsLoading] = useState(true);
|
||||
@@ -202,11 +204,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
|
||||
};
|
||||
|
||||
const handleSelectDimension = (dimension: DimensionSummary) => {
|
||||
setSelectedDimension(dimension);
|
||||
setNodes([]);
|
||||
setNodeOffset(0);
|
||||
setHasMoreNodes(false);
|
||||
setView('nodes');
|
||||
onDimensionSelect?.(dimension.dimension);
|
||||
};
|
||||
|
||||
const handleBackToDimensions = () => {
|
||||
@@ -215,6 +213,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
|
||||
setNodes([]);
|
||||
setNodeOffset(0);
|
||||
setHasMoreNodes(false);
|
||||
onDimensionSelect?.(null);
|
||||
};
|
||||
|
||||
const handleAddDimension = async (name: string) => {
|
||||
@@ -1563,6 +1562,96 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
|
||||
);
|
||||
};
|
||||
|
||||
const toolbar = (
|
||||
<div style={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: '8px',
|
||||
minWidth: 0
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', minWidth: 0 }}>
|
||||
{view === 'nodes' && (
|
||||
<button
|
||||
onClick={handleBackToDimensions}
|
||||
style={{
|
||||
padding: '6px',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid #1f1f1f',
|
||||
background: 'transparent',
|
||||
cursor: 'pointer',
|
||||
color: '#cbd5f5'
|
||||
}}
|
||||
>
|
||||
<ArrowLeft size={16} />
|
||||
</button>
|
||||
)}
|
||||
{view === 'nodes' && (
|
||||
<div style={{
|
||||
fontSize: '12px',
|
||||
color: '#7de8a5',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis'
|
||||
}}>
|
||||
{selectedDimension?.dimension ?? ''}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
|
||||
{view === 'dimensions' && (
|
||||
<button
|
||||
onClick={() => setShowAddDimensionDialog(true)}
|
||||
title="Add dimension"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '28px',
|
||||
height: '28px',
|
||||
color: '#555',
|
||||
background: 'transparent',
|
||||
border: '1px solid #1f1f1f',
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.15s'
|
||||
}}
|
||||
onMouseEnter={(e) => { e.currentTarget.style.color = '#22c55e'; e.currentTarget.style.borderColor = '#22c55e'; }}
|
||||
onMouseLeave={(e) => { e.currentTarget.style.color = '#555'; e.currentTarget.style.borderColor = '#1f1f1f'; }}
|
||||
>
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{!toolbarHost && (
|
||||
<button
|
||||
onClick={onClose}
|
||||
title="Close"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '28px',
|
||||
height: '28px',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid #1f1f1f',
|
||||
background: 'transparent',
|
||||
cursor: 'pointer',
|
||||
color: '#555',
|
||||
transition: 'all 0.15s'
|
||||
}}
|
||||
onMouseEnter={(e) => { e.currentTarget.style.color = '#888'; e.currentTarget.style.background = '#1a1a1a'; }}
|
||||
onMouseLeave={(e) => { e.currentTarget.style.color = '#555'; e.currentTarget.style.background = 'transparent'; }}
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
@@ -1572,105 +1661,17 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
background: '#050505',
|
||||
borderRadius: '4px',
|
||||
border: '1px solid #1a1a1a',
|
||||
background: 'transparent',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
zIndex: 5
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div style={{ borderBottom: '1px solid #1a1a1a' }}>
|
||||
{/* Top row: Mode tabs + Actions */}
|
||||
<div style={{ padding: '12px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
{/* Back button when viewing nodes in a dimension */}
|
||||
{view === 'nodes' && (
|
||||
<button
|
||||
onClick={handleBackToDimensions}
|
||||
style={{
|
||||
padding: '6px',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid #1f1f1f',
|
||||
background: 'transparent',
|
||||
cursor: 'pointer',
|
||||
color: '#cbd5f5'
|
||||
}}
|
||||
>
|
||||
<ArrowLeft size={16} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{view === 'dimensions' && (
|
||||
<div style={{ fontSize: '13px', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#f8fafc', display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<DynamicIcon name="Folder" size={14} style={{ color: '#22c55e' }} />
|
||||
Dimensions
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Title when viewing nodes in a dimension */}
|
||||
{view === 'nodes' && (
|
||||
<div style={{ fontSize: '13px', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#f8fafc', display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<span>Nodes –</span>
|
||||
<span style={{ color: '#22c55e' }}>{selectedDimension?.dimension ?? ''}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
|
||||
{/* Add Dimension button */}
|
||||
{view === 'dimensions' && (
|
||||
<button
|
||||
onClick={() => setShowAddDimensionDialog(true)}
|
||||
title="Add dimension"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '28px',
|
||||
height: '28px',
|
||||
color: '#555',
|
||||
background: 'transparent',
|
||||
border: '1px solid #1f1f1f',
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.15s'
|
||||
}}
|
||||
onMouseEnter={(e) => { e.currentTarget.style.color = '#22c55e'; e.currentTarget.style.borderColor = '#22c55e'; }}
|
||||
onMouseLeave={(e) => { e.currentTarget.style.color = '#555'; e.currentTarget.style.borderColor = '#1f1f1f'; }}
|
||||
>
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
|
||||
<button
|
||||
onClick={onClose}
|
||||
title="Close"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '28px',
|
||||
height: '28px',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid #1f1f1f',
|
||||
background: 'transparent',
|
||||
cursor: 'pointer',
|
||||
color: '#555',
|
||||
transition: 'all 0.15s'
|
||||
}}
|
||||
onMouseEnter={(e) => { e.currentTarget.style.color = '#888'; e.currentTarget.style.background = '#1a1a1a'; }}
|
||||
onMouseLeave={(e) => { e.currentTarget.style.color = '#555'; e.currentTarget.style.background = 'transparent'; }}
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
</div>
|
||||
{toolbarHost ? createPortal(toolbar, toolbarHost) : (
|
||||
<div style={{ borderBottom: '1px solid #1a1a1a', padding: '12px 16px' }}>
|
||||
{toolbar}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
{view === 'nodes' ? renderNodeGrid() : renderDimensionGrid()}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react';
|
||||
import FolderViewOverlay from '@/components/nodes/FolderViewOverlay';
|
||||
import PaneHeader from './PaneHeader';
|
||||
import { DimensionsPaneProps, PaneType } from './types';
|
||||
@@ -10,11 +11,13 @@ export default function DimensionsPane({
|
||||
onPaneAction,
|
||||
onCollapse,
|
||||
onSwapPanes,
|
||||
tabBar,
|
||||
onNodeOpen,
|
||||
refreshToken,
|
||||
onDataChanged,
|
||||
onDimensionSelect,
|
||||
}: DimensionsPaneProps) {
|
||||
const [toolbarHost, setToolbarHost] = useState<HTMLDivElement | null>(null);
|
||||
const handleTypeChange = (type: PaneType) => {
|
||||
onPaneAction?.({ type: 'switch-pane-type', paneType: type });
|
||||
};
|
||||
@@ -32,7 +35,13 @@ export default function DimensionsPane({
|
||||
background: 'transparent',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<PaneHeader slot={slot} onCollapse={onCollapse} onSwapPanes={onSwapPanes} />
|
||||
<PaneHeader
|
||||
slot={slot}
|
||||
onCollapse={onCollapse}
|
||||
onSwapPanes={onSwapPanes}
|
||||
tabBar={tabBar}
|
||||
toolbarHostRef={setToolbarHost}
|
||||
/>
|
||||
|
||||
<div style={{ flex: 1, minHeight: 0, overflow: 'hidden', position: 'relative' }}>
|
||||
{/* FolderViewOverlay expects to be an overlay, so we wrap it in a container */}
|
||||
@@ -47,6 +56,7 @@ export default function DimensionsPane({
|
||||
refreshToken={refreshToken}
|
||||
onDataChanged={onDataChanged}
|
||||
onDimensionSelect={onDimensionSelect}
|
||||
toolbarHost={toolbarHost}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@ import { useEffect, useMemo, useRef, useState, useCallback, type CSSProperties }
|
||||
import {
|
||||
ReactFlow,
|
||||
Background,
|
||||
MiniMap,
|
||||
useNodesState,
|
||||
useEdgesState,
|
||||
addEdge as rfAddEdge,
|
||||
@@ -22,10 +21,11 @@ import PaneHeader from './PaneHeader';
|
||||
import type { MapPaneProps } from './types';
|
||||
import { ChevronDown } from 'lucide-react';
|
||||
|
||||
import { MiniMap } from '@xyflow/react';
|
||||
import { RahNode } from './map/RahNode';
|
||||
import { RahEdge } from './map/RahEdge';
|
||||
import EdgeExplanationModal from './map/EdgeExplanationModal';
|
||||
import { toRFNodes, toRFEdges, NODE_LIMIT, type RahNodeData } from './map/utils';
|
||||
import { getPrimaryDimension, toRFNodes, toRFEdges, NODE_LIMIT, type MapViewMode, type RahNodeData } from './map/utils';
|
||||
import { useDimensionIcons } from '@/context/DimensionIconsContext';
|
||||
import './map/map-styles.css';
|
||||
|
||||
@@ -74,6 +74,7 @@ function MapPaneInner({
|
||||
// --- UI state ---
|
||||
const [selectedNodeId, setSelectedNodeId] = useState<number | null>(null);
|
||||
const [selectedDimension, setSelectedDimension] = useState<string | null>(null);
|
||||
const [viewMode, setViewMode] = useState<MapViewMode>('dimension');
|
||||
const [dimensionDropdownOpen, setDimensionDropdownOpen] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
@@ -86,6 +87,7 @@ function MapPaneInner({
|
||||
|
||||
// Track current RF positions so we can preserve them across data refreshes
|
||||
const rfPositionsRef = useRef<Map<string, { x: number; y: number }>>(new Map());
|
||||
const hasInitialFitRef = useRef(false);
|
||||
|
||||
// Combine base + expanded
|
||||
const allDbNodes = useMemo(() => {
|
||||
@@ -115,6 +117,26 @@ function MapPaneInner({
|
||||
[lockedDimensions],
|
||||
);
|
||||
|
||||
const clusterLabels = useMemo(() => {
|
||||
if (viewMode !== 'dimension') {
|
||||
return [];
|
||||
}
|
||||
const grouped = new Map<string, { x: number; y: number; count: number }>();
|
||||
for (const node of rfNodes) {
|
||||
const dimension = getPrimaryDimension((node.data as RahNodeData).dimensions);
|
||||
const current = grouped.get(dimension) || { x: 0, y: 0, count: 0 };
|
||||
current.x += node.position.x;
|
||||
current.y += node.position.y;
|
||||
current.count += 1;
|
||||
grouped.set(dimension, current);
|
||||
}
|
||||
return [...grouped.entries()].map(([dimension, totals]) => ({
|
||||
dimension,
|
||||
x: totals.x / totals.count,
|
||||
y: totals.y / totals.count - 84,
|
||||
}));
|
||||
}, [rfNodes, viewMode]);
|
||||
|
||||
// ----- Close dropdown on outside click -----
|
||||
useEffect(() => {
|
||||
if (!dimensionDropdownOpen) return;
|
||||
@@ -157,9 +179,7 @@ function MapPaneInner({
|
||||
if (dimsRes.ok) {
|
||||
const dimsPayload = await dimsRes.json();
|
||||
if (dimsPayload.success && dimsPayload.data) {
|
||||
setLockedDimensions(
|
||||
(dimsPayload.data as DimensionInfo[]).filter(d => d.isPriority),
|
||||
);
|
||||
setLockedDimensions(dimsPayload.data as DimensionInfo[]);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
@@ -196,6 +216,8 @@ function MapPaneInner({
|
||||
connectedNodeIds,
|
||||
rfPositionsRef.current,
|
||||
dimensionIcons,
|
||||
viewMode,
|
||||
dbEdges,
|
||||
);
|
||||
|
||||
const nodeIdSet = new Set(newRfNodes.map(n => n.id));
|
||||
@@ -203,7 +225,47 @@ function MapPaneInner({
|
||||
|
||||
setRfNodes(newRfNodes);
|
||||
setRfEdges(newRfEdges);
|
||||
}, [allDbNodes, baseNodes, expandedNodes, dbEdges, selectedNodeId, connectedNodeIds]);
|
||||
}, [allDbNodes, baseNodes, expandedNodes, dbEdges, selectedNodeId, connectedNodeIds, dimensionIcons, viewMode]);
|
||||
|
||||
useEffect(() => {
|
||||
if (hasInitialFitRef.current || rfNodes.length === 0 || loading) return;
|
||||
hasInitialFitRef.current = true;
|
||||
const hubNodeIds = baseNodes
|
||||
.sort((a, b) => (b.edge_count ?? 0) - (a.edge_count ?? 0))
|
||||
.slice(0, 25)
|
||||
.map(n => String(n.id));
|
||||
setTimeout(() => {
|
||||
if (hubNodeIds.length > 0) {
|
||||
reactFlowInstance.fitView({
|
||||
nodes: hubNodeIds.map(id => ({ id })),
|
||||
padding: 0.3,
|
||||
duration: 300,
|
||||
});
|
||||
}
|
||||
}, 100);
|
||||
}, [rfNodes, loading, baseNodes, reactFlowInstance]);
|
||||
|
||||
useEffect(() => {
|
||||
hasInitialFitRef.current = false;
|
||||
}, [selectedDimension, viewMode]);
|
||||
|
||||
const fitAllNodes = useCallback(() => {
|
||||
reactFlowInstance.fitView({ padding: 0.2, duration: 300 });
|
||||
}, [reactFlowInstance]);
|
||||
|
||||
const fitHubNodes = useCallback(() => {
|
||||
const hubNodeIds = baseNodes
|
||||
.sort((a, b) => (b.edge_count ?? 0) - (a.edge_count ?? 0))
|
||||
.slice(0, 25)
|
||||
.map(n => String(n.id));
|
||||
if (hubNodeIds.length > 0) {
|
||||
reactFlowInstance.fitView({
|
||||
nodes: hubNodeIds.map(id => ({ id })),
|
||||
padding: 0.3,
|
||||
duration: 300,
|
||||
});
|
||||
}
|
||||
}, [baseNodes, reactFlowInstance]);
|
||||
|
||||
// ----- Node traversal: fetch connected nodes -----
|
||||
const fetchConnectedNodes = useCallback(async (nodeId: number) => {
|
||||
@@ -379,7 +441,7 @@ function MapPaneInner({
|
||||
|
||||
// ----- Node drag → save position to metadata (debounced) -----
|
||||
const savePositionRef = useRef(
|
||||
debounce(async (nodeId: number, x: number, y: number) => {
|
||||
debounce(async (nodeId: number, x: number, y: number, mode: MapViewMode) => {
|
||||
try {
|
||||
const res = await fetch(`/api/nodes/${nodeId}`);
|
||||
if (!res.ok) return;
|
||||
@@ -393,7 +455,14 @@ function MapPaneInner({
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
metadata: { ...mergedMeta, map_position: { x, y } },
|
||||
metadata: {
|
||||
...mergedMeta,
|
||||
map_positions: {
|
||||
...(mergedMeta.map_positions || {}),
|
||||
[mode]: { x, y },
|
||||
},
|
||||
[`map_position_${mode}`]: { x, y },
|
||||
},
|
||||
}),
|
||||
});
|
||||
} catch (err) {
|
||||
@@ -406,9 +475,21 @@ function MapPaneInner({
|
||||
const nodeId = parseInt(node.id);
|
||||
if (!isNaN(nodeId)) {
|
||||
rfPositionsRef.current.set(node.id, node.position);
|
||||
savePositionRef.current(nodeId, node.position.x, node.position.y);
|
||||
savePositionRef.current(nodeId, node.position.x, node.position.y, viewMode);
|
||||
}
|
||||
}, []);
|
||||
}, [viewMode]);
|
||||
|
||||
useEffect(() => {
|
||||
rfPositionsRef.current.clear();
|
||||
}, [viewMode]);
|
||||
|
||||
useEffect(() => {
|
||||
if (loading || rfNodes.length === 0) return;
|
||||
const timeout = setTimeout(() => {
|
||||
reactFlowInstance.fitView({ padding: 0.22, duration: 300 });
|
||||
}, 80);
|
||||
return () => clearTimeout(timeout);
|
||||
}, [viewMode, selectedDimension, loading, rfNodes, reactFlowInstance]);
|
||||
|
||||
// ----- Node click → select + traverse -----
|
||||
const onNodeClickHandler: NodeMouseHandler<RFNode<RahNodeData>> = useCallback((_event, node) => {
|
||||
@@ -481,6 +562,39 @@ function MapPaneInner({
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: 'transparent', overflow: 'hidden' }}>
|
||||
<PaneHeader slot={slot} onCollapse={onCollapse} onSwapPanes={onSwapPanes} tabBar={tabBar}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
|
||||
<button
|
||||
onClick={() => setViewMode('dimension')}
|
||||
style={{
|
||||
padding: '6px 10px',
|
||||
background: viewMode === 'dimension' ? 'rgba(34, 197, 94, 0.12)' : 'transparent',
|
||||
border: '1px solid',
|
||||
borderColor: viewMode === 'dimension' ? 'rgba(34, 197, 94, 0.35)' : '#2a2a2a',
|
||||
borderRadius: '6px',
|
||||
color: viewMode === 'dimension' ? '#a7f3b8' : '#888',
|
||||
fontSize: '12px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
Dimension View
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode('hub')}
|
||||
style={{
|
||||
padding: '6px 10px',
|
||||
background: viewMode === 'hub' ? 'rgba(34, 197, 94, 0.12)' : 'transparent',
|
||||
border: '1px solid',
|
||||
borderColor: viewMode === 'hub' ? 'rgba(34, 197, 94, 0.35)' : '#2a2a2a',
|
||||
borderRadius: '6px',
|
||||
color: viewMode === 'hub' ? '#a7f3b8' : '#888',
|
||||
fontSize: '12px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
Hub View
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Dimension filter dropdown */}
|
||||
<div ref={dropdownRef} style={{ position: 'relative' }}>
|
||||
<button
|
||||
@@ -597,8 +711,6 @@ function MapPaneInner({
|
||||
onConnect={onConnect}
|
||||
nodeTypes={nodeTypes}
|
||||
edgeTypes={edgeTypes}
|
||||
fitView
|
||||
fitViewOptions={{ padding: 0.2 }}
|
||||
minZoom={0.1}
|
||||
maxZoom={3}
|
||||
defaultEdgeOptions={{ type: 'rahEdge' }}
|
||||
@@ -608,16 +720,76 @@ function MapPaneInner({
|
||||
<Background color="#1a1a1a" gap={40} size={1} />
|
||||
<MiniMap
|
||||
style={{ background: '#0a0a0a', border: '1px solid #1f1f1f', borderRadius: 6 }}
|
||||
maskColor="rgba(0,0,0,0.6)"
|
||||
nodeColor={(n) => {
|
||||
const data = n.data as RahNodeData | undefined;
|
||||
return data?.primaryDimensionColor || '#374151';
|
||||
maskColor="rgba(0, 0, 0, 0.7)"
|
||||
nodeColor={(node) => {
|
||||
const data = node.data as RahNodeData | undefined;
|
||||
return data?.primaryDimensionColor || '#2a2a2a';
|
||||
}}
|
||||
pannable
|
||||
zoomable
|
||||
/>
|
||||
</ReactFlow>
|
||||
|
||||
{viewMode === 'dimension' && clusterLabels.map((label) => (
|
||||
<div
|
||||
key={label.dimension}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
transform: `translate(${label.x}px, ${label.y}px)`,
|
||||
pointerEvents: 'none',
|
||||
color: '#7a7a7a',
|
||||
fontSize: '11px',
|
||||
letterSpacing: '0.05em',
|
||||
textTransform: 'uppercase',
|
||||
textShadow: '0 1px 6px rgba(0,0,0,0.45)',
|
||||
}}
|
||||
>
|
||||
{label.dimension}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: 8,
|
||||
right: 8,
|
||||
display: 'flex',
|
||||
gap: 4,
|
||||
zIndex: 10,
|
||||
}}>
|
||||
<button
|
||||
onClick={fitAllNodes}
|
||||
style={{
|
||||
padding: '4px 8px',
|
||||
fontSize: 10,
|
||||
background: '#1a1a1a',
|
||||
border: '1px solid #2a2a2a',
|
||||
borderRadius: 4,
|
||||
color: '#888',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
title="Fit all nodes"
|
||||
>
|
||||
Fit
|
||||
</button>
|
||||
{viewMode === 'hub' && (
|
||||
<button
|
||||
onClick={fitHubNodes}
|
||||
style={{
|
||||
padding: '4px 8px',
|
||||
fontSize: 10,
|
||||
background: '#1a1a1a',
|
||||
border: '1px solid #2a2a2a',
|
||||
borderRadius: 4,
|
||||
color: '#888',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
title="Fit to hub nodes"
|
||||
>
|
||||
Hubs
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Selected node info panel */}
|
||||
{selectedDbNode && (
|
||||
<div style={infoPanel}>
|
||||
|
||||
@@ -8,7 +8,9 @@ export default function PaneHeader({
|
||||
slot,
|
||||
onCollapse,
|
||||
onSwapPanes,
|
||||
children
|
||||
tabBar,
|
||||
children,
|
||||
toolbarHostRef,
|
||||
}: PaneHeaderProps) {
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [isDragOver, setIsDragOver] = useState(false);
|
||||
@@ -56,32 +58,53 @@ export default function PaneHeader({
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
padding: '8px 12px',
|
||||
gap: '10px',
|
||||
background: isDragOver ? 'rgba(34, 197, 94, 0.1)' : 'transparent',
|
||||
minHeight: '44px',
|
||||
cursor: slot && onSwapPanes ? 'grab' : 'default',
|
||||
opacity: isDragging ? 0.5 : 1,
|
||||
borderRadius: isDragOver ? '6px' : '0',
|
||||
transition: 'background 0.15s ease',
|
||||
padding: '8px 12px',
|
||||
minHeight: '48px',
|
||||
}}
|
||||
>
|
||||
{/* Children (tabs, etc.) - takes up available space */}
|
||||
<div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: '4px', minWidth: 0 }}>
|
||||
{children}
|
||||
<div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: '8px', minWidth: 0 }}>
|
||||
{tabBar ? (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '4px', minWidth: 0 }}>
|
||||
{tabBar}
|
||||
</div>
|
||||
) : null}
|
||||
{children ? (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', minWidth: 0, flexWrap: 'wrap' }}>
|
||||
{children}
|
||||
</div>
|
||||
) : null}
|
||||
{toolbarHostRef ? (
|
||||
<div
|
||||
ref={toolbarHostRef}
|
||||
style={{
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
{!tabBar && !children && !toolbarHostRef ? (
|
||||
<div style={{ color: '#666', fontSize: '12px' }} />
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* Close button (when onCollapse is provided) */}
|
||||
{onCollapse && (
|
||||
<button
|
||||
onClick={onCollapse}
|
||||
style={{
|
||||
width: '28px',
|
||||
height: '28px',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid #2a2a2a',
|
||||
background: '#111',
|
||||
color: '#777',
|
||||
width: '32px',
|
||||
height: '32px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #3a3a3a',
|
||||
background: '#161616',
|
||||
color: '#c2c2c2',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
@@ -91,17 +114,17 @@ export default function PaneHeader({
|
||||
}}
|
||||
title="Close pane"
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = '#1a1a1a';
|
||||
e.currentTarget.style.borderColor = '#3a3a3a';
|
||||
e.currentTarget.style.color = '#aaa';
|
||||
e.currentTarget.style.background = 'rgba(127, 29, 29, 0.22)';
|
||||
e.currentTarget.style.borderColor = 'rgba(248, 113, 113, 0.5)';
|
||||
e.currentTarget.style.color = '#fca5a5';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = '#111';
|
||||
e.currentTarget.style.borderColor = '#2a2a2a';
|
||||
e.currentTarget.style.color = '#777';
|
||||
e.currentTarget.style.background = '#161616';
|
||||
e.currentTarget.style.borderColor = '#3a3a3a';
|
||||
e.currentTarget.style.color = '#c2c2c2';
|
||||
}}
|
||||
>
|
||||
<X size={14} />
|
||||
<X size={15} strokeWidth={2.25} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react';
|
||||
import PaneHeader from './PaneHeader';
|
||||
import DatabaseTableView from '../views/DatabaseTableView';
|
||||
import type { BasePaneProps } from './types';
|
||||
@@ -19,6 +20,7 @@ export default function TablePane({
|
||||
onNodeClick,
|
||||
refreshToken
|
||||
}: TablePaneProps) {
|
||||
const [toolbarHost, setToolbarHost] = useState<HTMLDivElement | null>(null);
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
@@ -27,11 +29,18 @@ export default function TablePane({
|
||||
background: 'transparent',
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
<PaneHeader slot={slot} onCollapse={onCollapse} onSwapPanes={onSwapPanes} tabBar={tabBar} />
|
||||
<PaneHeader
|
||||
slot={slot}
|
||||
onCollapse={onCollapse}
|
||||
onSwapPanes={onSwapPanes}
|
||||
tabBar={tabBar}
|
||||
toolbarHostRef={setToolbarHost}
|
||||
/>
|
||||
<div style={{ flex: 1, overflow: 'hidden' }}>
|
||||
<DatabaseTableView
|
||||
onNodeClick={onNodeClick}
|
||||
refreshToken={refreshToken}
|
||||
toolbarHost={toolbarHost}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react';
|
||||
import PaneHeader from './PaneHeader';
|
||||
import ViewsOverlay from '../views/ViewsOverlay';
|
||||
import type { BasePaneProps, PaneAction, PaneType } from './types';
|
||||
@@ -11,6 +12,8 @@ export interface ViewsPaneProps extends BasePaneProps {
|
||||
refreshToken?: number;
|
||||
pendingNodes?: PendingNode[];
|
||||
onDismissPending?: (id: string) => void;
|
||||
externalDimensionFilter?: string | null;
|
||||
onClearExternalDimensionFilter?: () => void;
|
||||
}
|
||||
|
||||
export default function ViewsPane({
|
||||
@@ -19,12 +22,16 @@ export default function ViewsPane({
|
||||
onPaneAction,
|
||||
onCollapse,
|
||||
onSwapPanes,
|
||||
tabBar,
|
||||
onNodeClick,
|
||||
onNodeOpenInOtherPane,
|
||||
refreshToken,
|
||||
pendingNodes,
|
||||
onDismissPending,
|
||||
externalDimensionFilter,
|
||||
onClearExternalDimensionFilter,
|
||||
}: ViewsPaneProps) {
|
||||
const [toolbarHost, setToolbarHost] = useState<HTMLDivElement | null>(null);
|
||||
const handleTypeChange = (type: PaneType) => {
|
||||
onPaneAction?.({ type: 'switch-pane-type', paneType: type });
|
||||
};
|
||||
@@ -37,7 +44,13 @@ export default function ViewsPane({
|
||||
background: 'transparent',
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
<PaneHeader slot={slot} onCollapse={onCollapse} onSwapPanes={onSwapPanes} />
|
||||
<PaneHeader
|
||||
slot={slot}
|
||||
onCollapse={onCollapse}
|
||||
onSwapPanes={onSwapPanes}
|
||||
tabBar={tabBar}
|
||||
toolbarHostRef={setToolbarHost}
|
||||
/>
|
||||
<div style={{ flex: 1, overflow: 'hidden' }}>
|
||||
<ViewsOverlay
|
||||
onNodeClick={onNodeClick}
|
||||
@@ -45,6 +58,9 @@ export default function ViewsPane({
|
||||
refreshToken={refreshToken}
|
||||
pendingNodes={pendingNodes}
|
||||
onDismissPending={onDismissPending}
|
||||
externalDimensionFilter={externalDimensionFilter}
|
||||
onClearExternalDimensionFilter={onClearExternalDimensionFilter}
|
||||
toolbarHost={toolbarHost}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+163
-114
@@ -15,6 +15,8 @@ const DIMENSION_COLORS = [
|
||||
'#a855f7', // purple
|
||||
];
|
||||
|
||||
export type MapViewMode = 'dimension' | 'hub';
|
||||
|
||||
function hashDimensionColor(dimension: string): string {
|
||||
let hash = 0;
|
||||
for (let i = 0; i < dimension.length; i++) {
|
||||
@@ -23,10 +25,21 @@ function hashDimensionColor(dimension: string): string {
|
||||
return DIMENSION_COLORS[Math.abs(hash) % DIMENSION_COLORS.length];
|
||||
}
|
||||
|
||||
export function getOrderedDimensions(dimensions: string[] | undefined): string[] {
|
||||
if (!dimensions || dimensions.length === 0) {
|
||||
return [];
|
||||
}
|
||||
return [...dimensions].sort((a, b) => a.localeCompare(b));
|
||||
}
|
||||
|
||||
export function getPrimaryDimension(dimensions: string[] | undefined): string {
|
||||
const ordered = getOrderedDimensions(dimensions);
|
||||
return ordered[0] || 'Unsorted';
|
||||
}
|
||||
|
||||
export function getDimensionColor(dimensions: string[] | undefined): string | undefined {
|
||||
if (!dimensions || dimensions.length === 0) return undefined;
|
||||
// Use first dimension for border color
|
||||
return hashDimensionColor(dimensions[0]);
|
||||
const primary = getPrimaryDimension(dimensions);
|
||||
return primary === 'Unsorted' ? '#4b5563' : hashDimensionColor(primary);
|
||||
}
|
||||
|
||||
export interface RahNodeData {
|
||||
@@ -37,74 +50,155 @@ export interface RahNodeData {
|
||||
dbNode: DbNode;
|
||||
dimensionIcons?: Record<string, string>;
|
||||
primaryDimensionColor?: string;
|
||||
clusterKey?: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
const NODE_LIMIT = 200;
|
||||
const LABEL_THRESHOLD = 15;
|
||||
export const NODE_LIMIT = 200;
|
||||
export const LABEL_THRESHOLD = 15;
|
||||
|
||||
export { NODE_LIMIT, LABEL_THRESHOLD };
|
||||
|
||||
/**
|
||||
* Get node position from saved metadata or calculate using Fibonacci spiral.
|
||||
*/
|
||||
export function getNodePosition(
|
||||
export function getSavedMapPosition(
|
||||
node: DbNode,
|
||||
index: number,
|
||||
total: number,
|
||||
centerX: number,
|
||||
centerY: number,
|
||||
maxEdges: number,
|
||||
): { x: number; y: number } {
|
||||
// Check for saved position in metadata
|
||||
viewMode: MapViewMode,
|
||||
): { x: number; y: number } | null {
|
||||
const metadata = typeof node.metadata === 'string'
|
||||
? safeParseJSON(node.metadata)
|
||||
: node.metadata;
|
||||
const savedPos = metadata?.map_position;
|
||||
if (savedPos?.x !== undefined && savedPos?.y !== undefined) {
|
||||
return { x: savedPos.x, y: savedPos.y };
|
||||
const nested = metadata?.map_positions as Record<string, { x?: number; y?: number }> | undefined;
|
||||
const scoped = metadata?.[`map_position_${viewMode}`] as { x?: number; y?: number } | undefined;
|
||||
const saved = nested?.[viewMode] || scoped;
|
||||
if (saved?.x !== undefined && saved?.y !== undefined) {
|
||||
return { x: saved.x, y: saved.y };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function getAllNodes(baseNodes: DbNode[], expandedNodes: DbNode[]): DbNode[] {
|
||||
const baseIds = new Set(baseNodes.map((node) => node.id));
|
||||
return [...baseNodes, ...expandedNodes.filter((node) => !baseIds.has(node.id))];
|
||||
}
|
||||
|
||||
function buildDimensionLayout(nodes: DbNode[], centerX: number, centerY: number): Map<string, { x: number; y: number }> {
|
||||
const positions = new Map<string, { x: number; y: number }>();
|
||||
const groups = new Map<string, DbNode[]>();
|
||||
for (const node of nodes) {
|
||||
const key = getPrimaryDimension(node.dimensions);
|
||||
const existing = groups.get(key) || [];
|
||||
existing.push(node);
|
||||
groups.set(key, existing);
|
||||
}
|
||||
|
||||
// Fibonacci spiral layout
|
||||
const edgeCount = node.edge_count ?? 0;
|
||||
const edgeRatio = maxEdges > 0 ? edgeCount / maxEdges : 0;
|
||||
const clusterKeys = [...groups.keys()].sort((a, b) => a.localeCompare(b));
|
||||
const columns = Math.max(1, Math.ceil(Math.sqrt(clusterKeys.length || 1)));
|
||||
const clusterGapX = 360;
|
||||
const clusterGapY = 280;
|
||||
const originX = centerX - ((columns - 1) * clusterGapX) / 2;
|
||||
const rows = Math.max(1, Math.ceil(clusterKeys.length / columns));
|
||||
const originY = centerY - ((rows - 1) * clusterGapY) / 2;
|
||||
|
||||
const goldenAngle = Math.PI * (3 - Math.sqrt(5));
|
||||
const angle = index * goldenAngle;
|
||||
clusterKeys.forEach((clusterKey, clusterIndex) => {
|
||||
const clusterNodes = (groups.get(clusterKey) || []).sort((a, b) => (b.edge_count ?? 0) - (a.edge_count ?? 0));
|
||||
const clusterColumn = clusterIndex % columns;
|
||||
const clusterRow = Math.floor(clusterIndex / columns);
|
||||
const clusterCenterX = originX + clusterColumn * clusterGapX;
|
||||
const clusterCenterY = originY + clusterRow * clusterGapY;
|
||||
const clusterCols = Math.max(1, Math.ceil(Math.sqrt(clusterNodes.length)));
|
||||
|
||||
const isLabeled = index < LABEL_THRESHOLD;
|
||||
const labelSpacing = isLabeled ? 60 : 0;
|
||||
const containerSize = Math.min(centerX * 2, centerY * 2);
|
||||
const baseDistance = 80 + labelSpacing + (1 - edgeRatio) * containerSize * 0.35;
|
||||
const distance = baseDistance + index * 4;
|
||||
clusterNodes.forEach((node, index) => {
|
||||
const col = index % clusterCols;
|
||||
const row = Math.floor(index / clusterCols);
|
||||
const x = clusterCenterX + (col - (clusterCols - 1) / 2) * 120 + (row % 2 === 0 ? 0 : 18);
|
||||
const y = clusterCenterY + row * 96;
|
||||
positions.set(String(node.id), { x, y });
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
x: centerX + Math.cos(angle) * distance,
|
||||
y: centerY + Math.sin(angle) * distance,
|
||||
};
|
||||
return positions;
|
||||
}
|
||||
|
||||
/**
|
||||
* Position expanded (traversal) nodes in a circle around a reference node.
|
||||
*/
|
||||
export function getExpandedNodePosition(
|
||||
index: number,
|
||||
total: number,
|
||||
refX: number,
|
||||
refY: number,
|
||||
): { x: number; y: number } {
|
||||
const angle = (index / Math.max(total, 1)) * Math.PI * 2;
|
||||
const distance = 150 + (index % 3) * 40;
|
||||
return {
|
||||
x: refX + Math.cos(angle) * distance,
|
||||
y: refY + Math.sin(angle) * distance,
|
||||
};
|
||||
function buildHubLayout(
|
||||
nodes: DbNode[],
|
||||
dbEdges: DbEdge[],
|
||||
centerX: number,
|
||||
centerY: number,
|
||||
): Map<string, { x: number; y: number }> {
|
||||
const positions = new Map<string, { x: number; y: number }>();
|
||||
const sortedNodes = [...nodes].sort((a, b) => (b.edge_count ?? 0) - (a.edge_count ?? 0));
|
||||
const hubCount = Math.max(1, Math.min(10, Math.ceil(Math.sqrt(sortedNodes.length || 1))));
|
||||
const hubs = sortedNodes.slice(0, hubCount);
|
||||
const hubIds = new Set(hubs.map((node) => node.id));
|
||||
|
||||
const adjacency = new Map<number, number[]>();
|
||||
for (const edge of dbEdges) {
|
||||
const from = adjacency.get(edge.from_node_id) || [];
|
||||
from.push(edge.to_node_id);
|
||||
adjacency.set(edge.from_node_id, from);
|
||||
|
||||
const to = adjacency.get(edge.to_node_id) || [];
|
||||
to.push(edge.from_node_id);
|
||||
adjacency.set(edge.to_node_id, to);
|
||||
}
|
||||
|
||||
const clusterMembers = new Map<number, DbNode[]>();
|
||||
for (const hub of hubs) {
|
||||
clusterMembers.set(hub.id, [hub]);
|
||||
}
|
||||
|
||||
const orphanNodes: DbNode[] = [];
|
||||
for (const node of sortedNodes) {
|
||||
if (hubIds.has(node.id)) continue;
|
||||
const neighbours = adjacency.get(node.id) || [];
|
||||
const connectedHub = hubs
|
||||
.filter((hub) => neighbours.includes(hub.id))
|
||||
.sort((a, b) => (b.edge_count ?? 0) - (a.edge_count ?? 0))[0];
|
||||
|
||||
if (connectedHub) {
|
||||
const members = clusterMembers.get(connectedHub.id) || [connectedHub];
|
||||
members.push(node);
|
||||
clusterMembers.set(connectedHub.id, members);
|
||||
} else {
|
||||
orphanNodes.push(node);
|
||||
}
|
||||
}
|
||||
|
||||
const hubRadius = Math.max(160, hubCount * 42);
|
||||
hubs.forEach((hub, index) => {
|
||||
const angle = (index / hubCount) * Math.PI * 2 - Math.PI / 2;
|
||||
const hubX = centerX + Math.cos(angle) * hubRadius;
|
||||
const hubY = centerY + Math.sin(angle) * hubRadius;
|
||||
positions.set(String(hub.id), { x: hubX, y: hubY });
|
||||
|
||||
const members = (clusterMembers.get(hub.id) || []).filter((member) => member.id !== hub.id);
|
||||
members.forEach((member, memberIndex) => {
|
||||
const memberAngle = (memberIndex / Math.max(members.length, 1)) * Math.PI * 2;
|
||||
const ringRadius = 115 + Math.floor(memberIndex / 10) * 46;
|
||||
positions.set(String(member.id), {
|
||||
x: hubX + Math.cos(memberAngle) * ringRadius,
|
||||
y: hubY + Math.sin(memberAngle) * ringRadius,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
orphanNodes.forEach((node, index) => {
|
||||
const columns = Math.max(1, Math.ceil(Math.sqrt(orphanNodes.length)));
|
||||
const col = index % columns;
|
||||
const row = Math.floor(index / columns);
|
||||
positions.set(String(node.id), {
|
||||
x: centerX - 220 + col * 110,
|
||||
y: centerY + hubRadius + 140 + row * 90,
|
||||
});
|
||||
});
|
||||
|
||||
return positions;
|
||||
}
|
||||
|
||||
export function getClusterKey(node: DbNode, viewMode: MapViewMode, dbEdges: DbEdge[]): string {
|
||||
if (viewMode === 'dimension') {
|
||||
return getPrimaryDimension(node.dimensions);
|
||||
}
|
||||
return `hub:${node.id}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Transform DB nodes into React Flow nodes.
|
||||
* When a node is selected, non-connected nodes get dimmed via className.
|
||||
*/
|
||||
export function toRFNodes(
|
||||
baseNodes: DbNode[],
|
||||
expandedNodes: DbNode[],
|
||||
@@ -113,20 +207,23 @@ export function toRFNodes(
|
||||
selectedNodeId: number | null,
|
||||
connectedNodeIds: Set<number>,
|
||||
existingPositions: Map<string, { x: number; y: number }>,
|
||||
dimensionIcons?: Record<string, string>,
|
||||
dimensionIcons: Record<string, string> | undefined,
|
||||
viewMode: MapViewMode,
|
||||
dbEdges: DbEdge[],
|
||||
): RFNode<RahNodeData>[] {
|
||||
const sortedBase = [...baseNodes].sort((a, b) => (b.edge_count ?? 0) - (a.edge_count ?? 0));
|
||||
const maxEdges = Math.max(...sortedBase.map(n => n.edge_count ?? 0), 1);
|
||||
const baseNodeIds = new Set(baseNodes.map(n => n.id));
|
||||
const allNodes = getAllNodes(baseNodes, expandedNodes);
|
||||
const hasSelection = selectedNodeId !== null;
|
||||
const clusterLayout = viewMode === 'dimension'
|
||||
? buildDimensionLayout(allNodes, centerX, centerY)
|
||||
: buildHubLayout(allNodes, dbEdges, centerX, centerY);
|
||||
const baseNodeIds = new Set(baseNodes.map((node) => node.id));
|
||||
|
||||
const rfNodes: RFNode<RahNodeData>[] = sortedBase.map((node, index) => {
|
||||
return allNodes.map((node) => {
|
||||
const id = String(node.id);
|
||||
// Prefer React Flow's current position (for drag state), then saved, then calculated
|
||||
const existingPos = existingPositions.get(id);
|
||||
const pos = existingPos || getNodePosition(node, index, sortedBase.length, centerX, centerY, maxEdges);
|
||||
|
||||
// Dim nodes that aren't selected or connected to selection
|
||||
const savedPos = getSavedMapPosition(node, viewMode);
|
||||
const fallbackPos = clusterLayout.get(id) || { x: centerX, y: centerY };
|
||||
const pos = existingPos || savedPos || fallbackPos;
|
||||
const isDimmed = hasSelection && node.id !== selectedNodeId && !connectedNodeIds.has(node.id);
|
||||
|
||||
return {
|
||||
@@ -136,64 +233,16 @@ export function toRFNodes(
|
||||
className: isDimmed ? 'dimmed' : undefined,
|
||||
data: {
|
||||
label: node.title || 'Untitled',
|
||||
dimensions: node.dimensions || [],
|
||||
dimensions: getOrderedDimensions(node.dimensions),
|
||||
edgeCount: node.edge_count ?? 0,
|
||||
isExpanded: false,
|
||||
isExpanded: !baseNodeIds.has(node.id),
|
||||
dbNode: node,
|
||||
dimensionIcons,
|
||||
primaryDimensionColor: getDimensionColor(node.dimensions),
|
||||
clusterKey: viewMode === 'dimension' ? getPrimaryDimension(node.dimensions) : undefined,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
// Add expanded nodes not already in base
|
||||
const uniqueExpanded = expandedNodes.filter(n => !baseNodeIds.has(n.id));
|
||||
|
||||
// Find reference position for expanded nodes (the selected node)
|
||||
let refX = centerX;
|
||||
let refY = centerY;
|
||||
if (selectedNodeId) {
|
||||
const selectedRF = rfNodes.find(n => n.id === String(selectedNodeId));
|
||||
if (selectedRF) {
|
||||
refX = selectedRF.position.x;
|
||||
refY = selectedRF.position.y;
|
||||
}
|
||||
}
|
||||
|
||||
uniqueExpanded.forEach((node, index) => {
|
||||
const id = String(node.id);
|
||||
const existingPos = existingPositions.get(id);
|
||||
|
||||
// Check for saved metadata position
|
||||
const metadata = typeof node.metadata === 'string'
|
||||
? safeParseJSON(node.metadata)
|
||||
: node.metadata;
|
||||
const savedPos = metadata?.map_position;
|
||||
|
||||
const pos = existingPos
|
||||
|| (savedPos?.x !== undefined ? { x: savedPos.x, y: savedPos.y } : null)
|
||||
|| getExpandedNodePosition(index, uniqueExpanded.length, refX, refY);
|
||||
|
||||
const isDimmed = hasSelection && node.id !== selectedNodeId && !connectedNodeIds.has(node.id);
|
||||
|
||||
rfNodes.push({
|
||||
id,
|
||||
type: 'rahNode',
|
||||
position: pos,
|
||||
className: isDimmed ? 'dimmed' : undefined,
|
||||
data: {
|
||||
label: node.title || 'Untitled',
|
||||
dimensions: node.dimensions || [],
|
||||
edgeCount: node.edge_count ?? 0,
|
||||
isExpanded: true,
|
||||
dbNode: node,
|
||||
dimensionIcons,
|
||||
primaryDimensionColor: getDimensionColor(node.dimensions),
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
return rfNodes;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -87,6 +87,8 @@ export interface ViewsPaneProps extends BasePaneProps {
|
||||
onNodeClick: (nodeId: number) => void;
|
||||
onNodeOpenInOtherPane?: (nodeId: number) => void;
|
||||
refreshToken?: number;
|
||||
externalDimensionFilter?: string | null;
|
||||
onClearExternalDimensionFilter?: () => void;
|
||||
}
|
||||
|
||||
// TablePane specific props
|
||||
@@ -102,6 +104,7 @@ export interface PaneHeaderProps {
|
||||
onSwapPanes?: () => void;
|
||||
tabBar?: React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
toolbarHostRef?: (node: HTMLDivElement | null) => void;
|
||||
}
|
||||
|
||||
// Labels for pane types
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { Filter, ChevronDown, ChevronLeft, ChevronRight, X, ArrowUpDown, Search, ExternalLink } from 'lucide-react';
|
||||
import type { Node } from '@/types/database';
|
||||
|
||||
@@ -24,6 +25,7 @@ interface DimensionSummary {
|
||||
interface DatabaseTableViewProps {
|
||||
onNodeClick: (nodeId: number) => void;
|
||||
refreshToken?: number;
|
||||
toolbarHost?: HTMLDivElement | null;
|
||||
}
|
||||
|
||||
function formatRelativeTime(dateStr: string): string {
|
||||
@@ -56,7 +58,7 @@ function formatDate(dateStr: string | null | undefined): string {
|
||||
}
|
||||
}
|
||||
|
||||
export default function DatabaseTableView({ onNodeClick, refreshToken = 0 }: DatabaseTableViewProps) {
|
||||
export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolbarHost }: DatabaseTableViewProps) {
|
||||
const [nodes, setNodes] = useState<Node[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
@@ -161,18 +163,15 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0 }: Dat
|
||||
const startItem = (page - 1) * PAGE_SIZE + 1;
|
||||
const endItem = Math.min(page * PAGE_SIZE, total);
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: 'transparent' }}>
|
||||
{/* Compact toolbar */}
|
||||
<div style={{
|
||||
padding: '8px 12px',
|
||||
borderBottom: '1px solid #1a1a1a',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}>
|
||||
{/* Search */}
|
||||
<form onSubmit={handleSearchSubmit} style={{ display: 'flex', alignItems: 'center', gap: '0' }}>
|
||||
const toolbar = (
|
||||
<div style={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
minWidth: 0,
|
||||
}}>
|
||||
<form onSubmit={handleSearchSubmit} style={{ display: 'flex', alignItems: 'center', gap: '0' }}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -392,6 +391,21 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0 }: Dat
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: 'transparent' }}>
|
||||
{toolbarHost ? createPortal(toolbar, toolbarHost) : (
|
||||
<div style={{
|
||||
padding: '8px 12px',
|
||||
borderBottom: '1px solid #1a1a1a',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}>
|
||||
{toolbar}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Table */}
|
||||
<div style={{ flex: 1, overflow: 'auto' }}>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState, useRef, useCallback } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { Filter, ChevronDown, X, ArrowUpDown, GripVertical } from 'lucide-react';
|
||||
import type { Node } from '@/types/database';
|
||||
import { getNodeIcon } from '@/utils/nodeIcons';
|
||||
@@ -132,9 +133,21 @@ interface ViewsOverlayProps {
|
||||
refreshToken?: number;
|
||||
pendingNodes?: PendingNode[];
|
||||
onDismissPending?: (id: string) => void;
|
||||
externalDimensionFilter?: string | null;
|
||||
onClearExternalDimensionFilter?: () => void;
|
||||
toolbarHost?: HTMLDivElement | null;
|
||||
}
|
||||
|
||||
export default function ViewsOverlay({ onNodeClick, onNodeOpenInOtherPane, refreshToken = 0, pendingNodes, onDismissPending }: ViewsOverlayProps) {
|
||||
export default function ViewsOverlay({
|
||||
onNodeClick,
|
||||
onNodeOpenInOtherPane,
|
||||
refreshToken = 0,
|
||||
pendingNodes,
|
||||
onDismissPending,
|
||||
externalDimensionFilter = null,
|
||||
onClearExternalDimensionFilter,
|
||||
toolbarHost,
|
||||
}: ViewsOverlayProps) {
|
||||
const { dimensionIcons } = useDimensionIcons();
|
||||
|
||||
// Dimensions for filter picker
|
||||
@@ -160,10 +173,12 @@ export default function ViewsOverlay({ onNodeClick, onNodeOpenInOtherPane, refre
|
||||
const [showSortDropdown, setShowSortDropdown] = useState(false);
|
||||
|
||||
// Derive selectedFilters for backward compatibility (unique dimensions)
|
||||
const selectedFilters = useMemo(() =>
|
||||
[...new Set(columns.map(c => c.dimension))],
|
||||
[columns]
|
||||
);
|
||||
const selectedFilters = useMemo(() => {
|
||||
if (externalDimensionFilter) {
|
||||
return [externalDimensionFilter];
|
||||
}
|
||||
return [...new Set(columns.map(c => c.dimension))];
|
||||
}, [columns, externalDimensionFilter]);
|
||||
|
||||
// Sorted dimensions (locked first)
|
||||
const sortedDimensions = useMemo(() => {
|
||||
@@ -293,6 +308,9 @@ export default function ViewsOverlay({ onNodeClick, onNodeOpenInOtherPane, refre
|
||||
|
||||
// Column management
|
||||
const addColumn = (dimension: string) => {
|
||||
if (externalDimensionFilter) {
|
||||
return;
|
||||
}
|
||||
const newColumn: ColumnFilter = {
|
||||
id: `col-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
|
||||
dimension
|
||||
@@ -303,6 +321,10 @@ export default function ViewsOverlay({ onNodeClick, onNodeOpenInOtherPane, refre
|
||||
};
|
||||
|
||||
const removeFilter = (dimension: string) => {
|
||||
if (externalDimensionFilter && dimension === externalDimensionFilter) {
|
||||
onClearExternalDimensionFilter?.();
|
||||
return;
|
||||
}
|
||||
const idx = columns.findIndex(c => c.dimension === dimension);
|
||||
if (idx !== -1) {
|
||||
setColumns(columns.filter((_, i) => i !== idx));
|
||||
@@ -310,6 +332,9 @@ export default function ViewsOverlay({ onNodeClick, onNodeOpenInOtherPane, refre
|
||||
};
|
||||
|
||||
const clearFilters = () => {
|
||||
if (externalDimensionFilter) {
|
||||
onClearExternalDimensionFilter?.();
|
||||
}
|
||||
setColumns([]);
|
||||
};
|
||||
|
||||
@@ -552,24 +577,15 @@ export default function ViewsOverlay({ onNodeClick, onNodeOpenInOtherPane, refre
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
const toolbar = (
|
||||
<div style={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
background: 'transparent'
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
flexWrap: 'wrap'
|
||||
}}>
|
||||
{/* Header with filters + sort */}
|
||||
<div style={{
|
||||
padding: '10px 16px',
|
||||
borderBottom: '1px solid #1a1a1a',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
flexWrap: 'wrap'
|
||||
}}>
|
||||
{/* Filter chips + add filter button */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '6px', flexWrap: 'wrap', flex: 1 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '6px', flexWrap: 'wrap', flex: 1 }}>
|
||||
{selectedFilters.map(filter => (
|
||||
<div
|
||||
key={filter}
|
||||
@@ -605,10 +621,20 @@ export default function ViewsOverlay({ onNodeClick, onNodeOpenInOtherPane, refre
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Add filter button */}
|
||||
{externalDimensionFilter && (
|
||||
<span style={{ fontSize: '11px', color: '#666' }}>
|
||||
Sidebar filter
|
||||
</span>
|
||||
)}
|
||||
|
||||
<div style={{ position: 'relative' }} ref={filterPickerRef}>
|
||||
<button
|
||||
onClick={() => setShowFilterPicker(!showFilterPicker)}
|
||||
onClick={() => {
|
||||
if (!externalDimensionFilter) {
|
||||
setShowFilterPicker(!showFilterPicker);
|
||||
}
|
||||
}}
|
||||
disabled={!!externalDimensionFilter}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -617,14 +643,16 @@ export default function ViewsOverlay({ onNodeClick, onNodeOpenInOtherPane, refre
|
||||
background: 'transparent',
|
||||
border: '1px solid #222',
|
||||
borderRadius: '5px',
|
||||
color: '#888',
|
||||
color: externalDimensionFilter ? '#4b4b4b' : '#888',
|
||||
fontSize: '11px',
|
||||
cursor: 'pointer',
|
||||
cursor: externalDimensionFilter ? 'not-allowed' : 'pointer',
|
||||
transition: 'all 0.15s ease'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(255,255,255,0.04)';
|
||||
e.currentTarget.style.borderColor = '#333';
|
||||
if (!externalDimensionFilter) {
|
||||
e.currentTarget.style.background = 'rgba(255,255,255,0.04)';
|
||||
e.currentTarget.style.borderColor = '#333';
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'transparent';
|
||||
@@ -636,7 +664,7 @@ export default function ViewsOverlay({ onNodeClick, onNodeOpenInOtherPane, refre
|
||||
</button>
|
||||
|
||||
{/* Filter picker dropdown */}
|
||||
{showFilterPicker && (
|
||||
{showFilterPicker && !externalDimensionFilter && (
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: '100%',
|
||||
@@ -816,6 +844,27 @@ export default function ViewsOverlay({ onNodeClick, onNodeOpenInOtherPane, refre
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
background: 'transparent'
|
||||
}}>
|
||||
{toolbarHost ? createPortal(toolbar, toolbarHost) : (
|
||||
<div style={{
|
||||
padding: '10px 16px',
|
||||
borderBottom: '1px solid #1a1a1a',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
flexWrap: 'wrap'
|
||||
}}>
|
||||
{toolbar}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Content area — list view */}
|
||||
{filteredNodesLoading ? (
|
||||
|
||||
Reference in New Issue
Block a user