Compare commits
No commits in common. "83adcce9516058aa0008c123fa8c1d391ded4bbb" and "3a65cf436bea29f1549715125e3afe6b22fe8579" have entirely different histories.
83adcce951
...
3a65cf436b
@ -1,121 +1,458 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
IconButton, Tooltip, Box, Menu, MenuItem,
|
||||
ListItemIcon, ListItemText, Chip, styled,
|
||||
import React, { useState, useCallback, useEffect, useRef } from 'react';
|
||||
import {
|
||||
IconButton,
|
||||
Tooltip,
|
||||
Box,
|
||||
Menu,
|
||||
MenuItem,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
Button,
|
||||
styled
|
||||
} from '@mui/material';
|
||||
import {
|
||||
import {
|
||||
ArrowBack as ArrowBackIcon,
|
||||
ArrowForward as ArrowForwardIcon,
|
||||
History as HistoryIcon,
|
||||
Home as HomeIcon,
|
||||
CalendarToday,
|
||||
DateRange,
|
||||
Event,
|
||||
WorkspacesOutlined,
|
||||
School as SchoolIcon,
|
||||
Person as PersonIcon,
|
||||
AccountCircle as AccountCircleIcon,
|
||||
CalendarToday as CalendarIcon,
|
||||
School as TeachingIcon,
|
||||
Business as BusinessIcon,
|
||||
AccountTree as DepartmentIcon,
|
||||
Class as ClassIcon,
|
||||
ExpandMore as ExpandMoreIcon
|
||||
} from '@mui/icons-material';
|
||||
import { useNavigationStore } from '../../stores/navigationStore';
|
||||
import { useNeoUser } from '../../contexts/NeoUserContext';
|
||||
import { NAVIGATION_CONTEXTS } from '../../config/navigationContexts';
|
||||
import {
|
||||
BaseContext,
|
||||
ViewContext
|
||||
} from '../../types/navigation';
|
||||
import { logger } from '../../debugConfig';
|
||||
|
||||
const NavigationRoot = styled(Box)`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 8px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
function getNodeIcon(nodeType: string) {
|
||||
switch (nodeType) {
|
||||
case 'User': return <HomeIcon fontSize="small" />;
|
||||
case 'CalendarYear': return <CalendarToday fontSize="small" />;
|
||||
case 'CalendarMonth': return <DateRange fontSize="small" />;
|
||||
case 'CalendarDay': return <Event fontSize="small" />;
|
||||
default: return <WorkspacesOutlined fontSize="small" />;
|
||||
const NavigationControls = styled(Box)`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
`;
|
||||
|
||||
const ContextToggleContainer = styled(Box)(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
backgroundColor: theme.palette.action.hover,
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
padding: theme.spacing(0.5),
|
||||
gap: theme.spacing(0.5),
|
||||
'& .button-label': {
|
||||
'@media (max-width: 500px)': {
|
||||
display: 'none'
|
||||
}
|
||||
}
|
||||
}
|
||||
}));
|
||||
|
||||
const ContextToggleButton = styled(Button, {
|
||||
shouldForwardProp: (prop) => prop !== 'active'
|
||||
})<{ active?: boolean }>(({ theme, active }) => ({
|
||||
minWidth: 0,
|
||||
padding: theme.spacing(0.5, 1.5),
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
backgroundColor: active ? theme.palette.primary.main : 'transparent',
|
||||
color: active ? theme.palette.primary.contrastText : theme.palette.text.primary,
|
||||
textTransform: 'none',
|
||||
transition: theme.transitions.create(['background-color', 'color'], {
|
||||
duration: theme.transitions.duration.shorter,
|
||||
}),
|
||||
'&:hover': {
|
||||
backgroundColor: active ? theme.palette.primary.dark : theme.palette.action.hover,
|
||||
},
|
||||
'@media (max-width: 500px)': {
|
||||
padding: theme.spacing(0.5),
|
||||
}
|
||||
}));
|
||||
|
||||
export const GraphNavigator: React.FC = () => {
|
||||
const { context, goBack, goForward, isLoading } = useNavigationStore();
|
||||
const {
|
||||
context,
|
||||
switchContext,
|
||||
goBack,
|
||||
goForward,
|
||||
isLoading
|
||||
} = useNavigationStore();
|
||||
|
||||
const { userDbName, workerDbName, isInitialized: isNeoUserInitialized } = useNeoUser();
|
||||
|
||||
const [contextMenuAnchor, setContextMenuAnchor] = useState<null | HTMLElement>(null);
|
||||
const [historyMenuAnchor, setHistoryMenuAnchor] = useState<null | HTMLElement>(null);
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
const [availableWidth, setAvailableWidth] = useState<number>(0);
|
||||
|
||||
const { history } = context;
|
||||
const canGoBack = history.currentIndex > 0;
|
||||
const canGoForward = history.currentIndex < history.nodes.length - 1;
|
||||
const currentNode = context.node;
|
||||
useEffect(() => {
|
||||
const calculateAvailableSpace = () => {
|
||||
if (!rootRef.current) return;
|
||||
|
||||
// Get the header element
|
||||
const header = rootRef.current.closest('.MuiToolbar-root');
|
||||
if (!header) return;
|
||||
|
||||
// Get the title and menu elements
|
||||
const title = header.querySelector('.app-title');
|
||||
const menu = header.querySelector('.menu-button');
|
||||
|
||||
if (!title || !menu) return;
|
||||
|
||||
// Calculate available width
|
||||
const headerWidth = header.clientWidth;
|
||||
const titleWidth = title.clientWidth;
|
||||
const menuWidth = menu.clientWidth;
|
||||
const padding = 48; // Increased buffer space
|
||||
|
||||
const newAvailableWidth = headerWidth - titleWidth - menuWidth - padding;
|
||||
console.log('Available width:', newAvailableWidth); // Debug log
|
||||
setAvailableWidth(newAvailableWidth);
|
||||
};
|
||||
|
||||
// Set up ResizeObserver
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
// Use requestAnimationFrame to debounce calculations
|
||||
window.requestAnimationFrame(calculateAvailableSpace);
|
||||
});
|
||||
|
||||
// Observe both the root element and the header
|
||||
if (rootRef.current) {
|
||||
const header = rootRef.current.closest('.MuiToolbar-root');
|
||||
if (header) {
|
||||
resizeObserver.observe(header);
|
||||
resizeObserver.observe(rootRef.current);
|
||||
}
|
||||
}
|
||||
|
||||
// Initial calculation
|
||||
calculateAvailableSpace();
|
||||
|
||||
return () => {
|
||||
resizeObserver.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Helper function to determine what should be visible
|
||||
const getVisibility = () => {
|
||||
// Adjusted thresholds and collapse order:
|
||||
// 1. Navigation controls (back/forward/history) collapse first
|
||||
// 2. Toggle labels collapse second
|
||||
// 3. Context label collapses last
|
||||
if (availableWidth < 300) {
|
||||
return {
|
||||
navigation: false,
|
||||
contextLabel: true, // Keep context label visible longer
|
||||
toggleLabels: false
|
||||
};
|
||||
} else if (availableWidth < 450) {
|
||||
return {
|
||||
navigation: false,
|
||||
contextLabel: true, // Keep context label visible
|
||||
toggleLabels: true
|
||||
};
|
||||
} else if (availableWidth < 600) {
|
||||
return {
|
||||
navigation: true,
|
||||
contextLabel: true,
|
||||
toggleLabels: true
|
||||
};
|
||||
}
|
||||
return {
|
||||
navigation: true,
|
||||
contextLabel: true,
|
||||
toggleLabels: true
|
||||
};
|
||||
};
|
||||
|
||||
const visibility = getVisibility();
|
||||
|
||||
const handleHistoryClick = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setHistoryMenuAnchor(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleHistoryClose = () => {
|
||||
setHistoryMenuAnchor(null);
|
||||
};
|
||||
|
||||
const handleHistoryClick = (e: React.MouseEvent<HTMLElement>) => setHistoryMenuAnchor(e.currentTarget);
|
||||
const handleHistoryClose = () => setHistoryMenuAnchor(null);
|
||||
const handleHistoryItemClick = (index: number) => {
|
||||
const delta = index - history.currentIndex;
|
||||
if (delta < 0) for (let i = 0; i < -delta; i++) goBack();
|
||||
else if (delta > 0) for (let i = 0; i < delta; i++) goForward();
|
||||
const {currentIndex} = context.history;
|
||||
const steps = index - currentIndex;
|
||||
|
||||
if (steps < 0) {
|
||||
for (let i = 0; i < -steps; i++) {
|
||||
goBack();
|
||||
}
|
||||
} else if (steps > 0) {
|
||||
for (let i = 0; i < steps; i++) {
|
||||
goForward();
|
||||
}
|
||||
}
|
||||
|
||||
handleHistoryClose();
|
||||
};
|
||||
|
||||
const handleContextChange = useCallback(async (newContext: BaseContext) => {
|
||||
try {
|
||||
// Check if trying to access institute contexts without worker database
|
||||
if (['school', 'department', 'class'].includes(newContext) && !workerDbName) {
|
||||
logger.error('navigation', '❌ Cannot switch to institute context: missing worker database');
|
||||
return;
|
||||
}
|
||||
// Check if trying to access profile contexts without user database
|
||||
if (['profile', 'calendar', 'teaching'].includes(newContext) && !userDbName) {
|
||||
logger.error('navigation', '❌ Cannot switch to profile context: missing user database');
|
||||
return;
|
||||
}
|
||||
|
||||
logger.debug('navigation', '🔄 Changing main context', {
|
||||
from: context.main,
|
||||
to: newContext,
|
||||
userDbName,
|
||||
workerDbName
|
||||
});
|
||||
|
||||
// Get default view for new context
|
||||
const defaultView = getDefaultViewForContext(newContext);
|
||||
|
||||
// Use unified context switch with both base and extended contexts
|
||||
await switchContext({
|
||||
main: ['profile', 'calendar', 'teaching'].includes(newContext) ? 'profile' : 'institute',
|
||||
base: newContext,
|
||||
extended: defaultView,
|
||||
skipBaseContextLoad: false
|
||||
}, userDbName, workerDbName);
|
||||
|
||||
} catch (error) {
|
||||
logger.error('navigation', '❌ Failed to change context:', error);
|
||||
}
|
||||
}, [context.main, switchContext, userDbName, workerDbName]);
|
||||
|
||||
// Helper function to get default view for a context
|
||||
const getDefaultViewForContext = (context: BaseContext): ViewContext => {
|
||||
switch (context) {
|
||||
case 'calendar':
|
||||
return 'overview';
|
||||
case 'teaching':
|
||||
return 'overview';
|
||||
case 'school':
|
||||
return 'overview';
|
||||
case 'department':
|
||||
return 'overview';
|
||||
case 'class':
|
||||
return 'overview';
|
||||
default:
|
||||
return 'overview';
|
||||
}
|
||||
};
|
||||
|
||||
const handleContextMenu = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setContextMenuAnchor(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleContextSelect = useCallback(async (context: BaseContext) => {
|
||||
setContextMenuAnchor(null);
|
||||
try {
|
||||
// Use unified context switch with both base and extended contexts
|
||||
const contextDef = NAVIGATION_CONTEXTS[context];
|
||||
const defaultExtended = contextDef?.views[0]?.id;
|
||||
|
||||
await switchContext({
|
||||
base: context,
|
||||
extended: defaultExtended
|
||||
}, userDbName, workerDbName);
|
||||
} catch (error) {
|
||||
logger.error('navigation', '❌ Failed to select context:', error);
|
||||
}
|
||||
}, [switchContext, userDbName, workerDbName]);
|
||||
|
||||
const getContextItems = useCallback(() => {
|
||||
if (context.main === 'profile') {
|
||||
return [
|
||||
{ id: 'profile', label: 'Profile', icon: AccountCircleIcon },
|
||||
{ id: 'calendar', label: 'Calendar', icon: CalendarIcon },
|
||||
{ id: 'teaching', label: 'Teaching', icon: TeachingIcon },
|
||||
];
|
||||
} else {
|
||||
return [
|
||||
{ id: 'school', label: 'School', icon: BusinessIcon },
|
||||
{ id: 'department', label: 'Department', icon: DepartmentIcon },
|
||||
{ id: 'class', label: 'Class', icon: ClassIcon },
|
||||
];
|
||||
}
|
||||
}, [context.main]);
|
||||
|
||||
const getContextIcon = useCallback((contextType: string) => {
|
||||
switch (contextType) {
|
||||
case 'profile':
|
||||
return <AccountCircleIcon />;
|
||||
case 'calendar':
|
||||
return <CalendarIcon />;
|
||||
case 'teaching':
|
||||
return <TeachingIcon />;
|
||||
case 'school':
|
||||
return <BusinessIcon />;
|
||||
case 'department':
|
||||
return <DepartmentIcon />;
|
||||
case 'class':
|
||||
return <ClassIcon />;
|
||||
default:
|
||||
return <AccountCircleIcon />;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const isDisabled = !isNeoUserInitialized || isLoading;
|
||||
const { history } = context;
|
||||
const canGoBack = history.currentIndex > 0;
|
||||
const canGoForward = history.currentIndex < history.nodes.length - 1;
|
||||
|
||||
return (
|
||||
<NavigationRoot>
|
||||
<Tooltip title="Back">
|
||||
<span>
|
||||
<IconButton onClick={goBack} disabled={!canGoBack || isLoading} size="small">
|
||||
<ArrowBackIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</span>
|
||||
</Tooltip>
|
||||
<NavigationRoot ref={rootRef}>
|
||||
<NavigationControls sx={{ display: visibility.navigation ? 'flex' : 'none' }}>
|
||||
<Tooltip title="Back">
|
||||
<span>
|
||||
<IconButton
|
||||
onClick={goBack}
|
||||
disabled={!canGoBack || isDisabled}
|
||||
size="small"
|
||||
>
|
||||
<ArrowBackIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</span>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="History">
|
||||
<span>
|
||||
<IconButton
|
||||
onClick={handleHistoryClick}
|
||||
disabled={!history.nodes.length}
|
||||
size="small"
|
||||
>
|
||||
<HistoryIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</span>
|
||||
</Tooltip>
|
||||
<Tooltip title="History">
|
||||
<span>
|
||||
<IconButton
|
||||
onClick={handleHistoryClick}
|
||||
disabled={!history.nodes.length || isDisabled}
|
||||
size="small"
|
||||
>
|
||||
<HistoryIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</span>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Forward">
|
||||
<span>
|
||||
<IconButton onClick={goForward} disabled={!canGoForward || isLoading} size="small">
|
||||
<ArrowForwardIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</span>
|
||||
</Tooltip>
|
||||
|
||||
{currentNode && (
|
||||
<Chip
|
||||
size="small"
|
||||
icon={getNodeIcon(currentNode.type)}
|
||||
label={currentNode.label || currentNode.type}
|
||||
variant="outlined"
|
||||
sx={{ maxWidth: 200, fontSize: '0.75rem' }}
|
||||
/>
|
||||
)}
|
||||
<Tooltip title="Forward">
|
||||
<span>
|
||||
<IconButton
|
||||
onClick={goForward}
|
||||
disabled={!canGoForward || isDisabled}
|
||||
size="small"
|
||||
>
|
||||
<ArrowForwardIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</NavigationControls>
|
||||
|
||||
{/* History Menu */}
|
||||
<Menu
|
||||
anchorEl={historyMenuAnchor}
|
||||
open={Boolean(historyMenuAnchor)}
|
||||
onClose={handleHistoryClose}
|
||||
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
|
||||
transformOrigin={{ vertical: 'top', horizontal: 'center' }}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'center',
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'center',
|
||||
}}
|
||||
>
|
||||
{history.nodes.map((node, index) => (
|
||||
<MenuItem
|
||||
key={`${node.id}-${index}`}
|
||||
onClick={() => handleHistoryItemClick(index)}
|
||||
selected={index === history.currentIndex}
|
||||
dense
|
||||
>
|
||||
<ListItemIcon sx={{ minWidth: 32 }}>
|
||||
{getNodeIcon(node.type)}
|
||||
<ListItemIcon>
|
||||
{getContextIcon(node.type)}
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
<ListItemText
|
||||
primary={node.label || node.id}
|
||||
secondary={node.type}
|
||||
primaryTypographyProps={{ fontSize: '0.8rem' }}
|
||||
secondaryTypographyProps={{ fontSize: '0.7rem' }}
|
||||
/>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
|
||||
<ContextToggleContainer>
|
||||
<ContextToggleButton
|
||||
active={context.main === 'profile'}
|
||||
onClick={() => handleContextChange('profile' as BaseContext)}
|
||||
startIcon={<PersonIcon />}
|
||||
disabled={isDisabled || !userDbName}
|
||||
>
|
||||
{visibility.toggleLabels && <span className="button-label">Profile</span>}
|
||||
</ContextToggleButton>
|
||||
<ContextToggleButton
|
||||
active={context.main === 'institute'}
|
||||
onClick={() => handleContextChange('school' as BaseContext)}
|
||||
startIcon={<SchoolIcon />}
|
||||
disabled={isDisabled || !workerDbName}
|
||||
>
|
||||
{visibility.toggleLabels && <span className="button-label">Institute</span>}
|
||||
</ContextToggleButton>
|
||||
</ContextToggleContainer>
|
||||
|
||||
<Box>
|
||||
<Tooltip title={context.base}>
|
||||
<span>
|
||||
<Button
|
||||
onClick={handleContextMenu}
|
||||
disabled={isDisabled}
|
||||
sx={{
|
||||
minWidth: 0,
|
||||
p: 0.5,
|
||||
color: 'text.primary',
|
||||
'&:hover': {
|
||||
bgcolor: 'action.hover'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{getContextIcon(context.base)}
|
||||
{visibility.contextLabel && (
|
||||
<Box sx={{ ml: 1 }}>
|
||||
{context.base}
|
||||
</Box>
|
||||
)}
|
||||
<ExpandMoreIcon sx={{ ml: visibility.contextLabel ? 0.5 : 0 }} />
|
||||
</Button>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
|
||||
<Menu
|
||||
anchorEl={contextMenuAnchor}
|
||||
open={Boolean(contextMenuAnchor)}
|
||||
onClose={() => setContextMenuAnchor(null)}
|
||||
>
|
||||
{getContextItems().map(item => (
|
||||
<MenuItem
|
||||
key={item.id}
|
||||
onClick={() => handleContextSelect(item.id as BaseContext)}
|
||||
disabled={isDisabled}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<item.icon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={item.label} />
|
||||
</MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
</NavigationRoot>
|
||||
);
|
||||
};
|
||||
};
|
||||
@ -1,225 +0,0 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
Box, IconButton, CircularProgress, Tooltip, Collapse,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
ChevronLeft, ChevronRight,
|
||||
ExpandMore, ChevronRight as ChevronRightIcon,
|
||||
Home as HomeIcon, CalendarToday, DateRange, Event,
|
||||
} from '@mui/icons-material';
|
||||
import { useNavigationStore } from '../../stores/navigationStore';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import { NeoGraphNode } from '../../types/navigation';
|
||||
import { logger } from '../../debugConfig';
|
||||
|
||||
interface TreeNode extends NeoGraphNode {
|
||||
has_children?: boolean;
|
||||
children?: TreeNode[];
|
||||
}
|
||||
|
||||
const NODE_ICONS: Record<string, React.ElementType> = {
|
||||
User: HomeIcon,
|
||||
CalendarYear: CalendarToday,
|
||||
CalendarMonth: DateRange,
|
||||
CalendarWeek: DateRange,
|
||||
CalendarDay: Event,
|
||||
};
|
||||
|
||||
const SIDEBAR_WIDTH = 220;
|
||||
|
||||
interface TreeItemProps {
|
||||
node: TreeNode;
|
||||
depth: number;
|
||||
onSelect: (node: TreeNode) => void;
|
||||
onExpand: (node: TreeNode) => Promise<TreeNode[]>;
|
||||
activeRoomId?: string;
|
||||
}
|
||||
|
||||
function TreeItem({ node, depth, onSelect, onExpand, activeRoomId }: TreeItemProps) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [children, setChildren] = useState<TreeNode[]>(node.children || []);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const Icon = NODE_ICONS[node.node_type] || HomeIcon;
|
||||
const canExpand = node.has_children !== false && node.node_type !== 'CalendarDay';
|
||||
|
||||
const handleToggle = async (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
if (!expanded && children.length === 0 && canExpand) {
|
||||
setLoading(true);
|
||||
try {
|
||||
const loaded = await onExpand(node);
|
||||
setChildren(loaded);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
setExpanded(v => !v);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box
|
||||
onClick={() => onSelect(node)}
|
||||
sx={{
|
||||
display: 'flex', alignItems: 'center',
|
||||
pl: depth * 1.5 + 0.5, pr: 0.5, py: 0.4,
|
||||
cursor: 'pointer', borderRadius: 1, mx: 0.5,
|
||||
fontSize: '0.78rem', minHeight: 28,
|
||||
bgcolor: 'transparent',
|
||||
'&:hover': { bgcolor: 'action.hover' },
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: 18, flexShrink: 0, display: 'flex', alignItems: 'center' }}>
|
||||
{canExpand && (
|
||||
loading
|
||||
? <CircularProgress size={10} />
|
||||
: (
|
||||
<IconButton
|
||||
size="small" sx={{ p: 0, color: 'text.secondary' }}
|
||||
onClick={handleToggle}
|
||||
>
|
||||
{expanded
|
||||
? <ExpandMore sx={{ fontSize: 14 }} />
|
||||
: <ChevronRightIcon sx={{ fontSize: 14 }} />}
|
||||
</IconButton>
|
||||
)
|
||||
)}
|
||||
</Box>
|
||||
<Icon sx={{ fontSize: 14, mr: 0.75, flexShrink: 0, color: 'text.secondary' }} />
|
||||
<Box sx={{
|
||||
overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
|
||||
flexGrow: 1, color: 'text.primary',
|
||||
}}>
|
||||
{node.label}
|
||||
</Box>
|
||||
</Box>
|
||||
{canExpand && (
|
||||
<Collapse in={expanded} timeout="auto">
|
||||
{children.map(child => (
|
||||
<TreeItem
|
||||
key={child.neo4j_node_id}
|
||||
node={child}
|
||||
depth={depth + 1}
|
||||
onSelect={onSelect}
|
||||
onExpand={onExpand}
|
||||
activeRoomId={activeRoomId}
|
||||
/>
|
||||
))}
|
||||
</Collapse>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
interface GraphSidebarProps {
|
||||
open: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
export function GraphSidebar({ open, onToggle }: GraphSidebarProps) {
|
||||
const { accessToken } = useAuth();
|
||||
const { navigateToNeoNode, context } = useNavigationStore();
|
||||
const [tree, setTree] = useState<TreeNode | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const apiBase = import.meta.env.VITE_API_BASE as string;
|
||||
|
||||
const fetchTree = useCallback(async () => {
|
||||
if (!accessToken) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await fetch(`${apiBase}/graph/tree`, {
|
||||
headers: { Authorization: `Bearer ${accessToken}` },
|
||||
});
|
||||
if (!res.ok) throw new Error(`Graph tree fetch failed: ${res.status}`);
|
||||
const data = await res.json();
|
||||
setTree(data.tree);
|
||||
} catch (err) {
|
||||
logger.error('graph-sidebar', 'Failed to load graph tree', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [accessToken, apiBase]);
|
||||
|
||||
useEffect(() => {
|
||||
if (open && !tree && accessToken) fetchTree();
|
||||
}, [open, tree, accessToken, fetchTree]);
|
||||
|
||||
const handleExpand = useCallback(async (node: TreeNode): Promise<TreeNode[]> => {
|
||||
if (!accessToken) return [];
|
||||
const params = new URLSearchParams({
|
||||
neo4j_node_id: node.neo4j_node_id,
|
||||
neo4j_db_name: node.neo4j_db_name,
|
||||
node_type: node.node_type,
|
||||
});
|
||||
try {
|
||||
const res = await fetch(`${apiBase}/graph/node/children?${params}`, {
|
||||
headers: { Authorization: `Bearer ${accessToken}` },
|
||||
});
|
||||
if (!res.ok) return [];
|
||||
const data = await res.json();
|
||||
return data.children || [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}, [accessToken, apiBase]);
|
||||
|
||||
return (
|
||||
<Box sx={{ position: 'relative', height: '100%', display: 'flex', flexShrink: 0 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: open ? SIDEBAR_WIDTH : 0,
|
||||
overflow: 'hidden',
|
||||
transition: 'width 0.2s ease',
|
||||
bgcolor: 'background.paper',
|
||||
borderRight: 1,
|
||||
borderColor: 'divider',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ overflowY: 'auto', flexGrow: 1, pt: 1 }}>
|
||||
{loading ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', pt: 3 }}>
|
||||
<CircularProgress size={20} />
|
||||
</Box>
|
||||
) : tree ? (
|
||||
<TreeItem
|
||||
node={tree}
|
||||
depth={0}
|
||||
onSelect={n => navigateToNeoNode(n)}
|
||||
onExpand={handleExpand}
|
||||
activeRoomId={context.node?.id}
|
||||
/>
|
||||
) : null}
|
||||
</Box>
|
||||
</Box>
|
||||
<Tooltip title={open ? 'Collapse sidebar' : 'Expand sidebar'} placement="right">
|
||||
<IconButton
|
||||
onClick={onToggle}
|
||||
size="small"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
right: -14,
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
zIndex: 10,
|
||||
bgcolor: 'background.paper',
|
||||
border: 1,
|
||||
borderColor: 'divider',
|
||||
width: 22,
|
||||
height: 44,
|
||||
borderRadius: '0 4px 4px 0',
|
||||
'&:hover': { bgcolor: 'action.hover' },
|
||||
}}
|
||||
>
|
||||
{open
|
||||
? <ChevronLeft sx={{ fontSize: 14 }} />
|
||||
: <ChevronRight sx={{ fontSize: 14 }} />}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@ -33,11 +33,9 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||
const [user, setUser] = useState<CCUser | null>(null);
|
||||
const [user_role, setUserRole] = useState<string | null>(null);
|
||||
const [accessToken, setAccessToken] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loading, setLoading] = useState(true); // true until INITIAL_SESSION fires
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
const apiBase = import.meta.env.VITE_API_BASE as string;
|
||||
|
||||
const persistSession = useCallback((session: Session | null) => {
|
||||
if (session) {
|
||||
storageService.set(StorageKeys.SUPABASE_SESSION, session);
|
||||
@ -71,82 +69,57 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||
return { user: resolvedUser, role: resolvedRole };
|
||||
}, []);
|
||||
|
||||
const triggerUserInit = useCallback((token: string) => {
|
||||
fetch(`${apiBase}/user/init`, {
|
||||
method: 'POST',
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => logger.debug('auth-context', '✅ User init', data))
|
||||
.catch(err => logger.warn('auth-context', '⚠️ User init failed', { err }));
|
||||
}, [apiBase]);
|
||||
|
||||
useEffect(() => {
|
||||
// Canonical Supabase auth pattern: rely solely on onAuthStateChange.
|
||||
// INITIAL_SESSION fires immediately with the current session state,
|
||||
// eliminating the race condition between loadInitialSession + onAuthStateChange.
|
||||
const { data: { subscription } } = supabase.auth.onAuthStateChange(
|
||||
async (event, session) => {
|
||||
logger.debug('auth-context', '🔄 Auth state change', { event, hasSession: !!session });
|
||||
|
||||
if (event === 'SIGNED_IN') {
|
||||
persistSession(session ?? null);
|
||||
if (session?.user) {
|
||||
try {
|
||||
const { user: resolvedUser, role } = await buildUserFromSupabase(session.user);
|
||||
setUser(resolvedUser);
|
||||
setUserRole(role);
|
||||
setAccessToken(session.access_token ?? null);
|
||||
triggerUserInit(session.access_token);
|
||||
} catch (buildError) {
|
||||
logger.error('auth-context', '❌ Failed to build user from session', { event, error: buildError });
|
||||
switch (event) {
|
||||
case 'INITIAL_SESSION':
|
||||
case 'SIGNED_IN':
|
||||
case 'TOKEN_REFRESHED': {
|
||||
persistSession(session ?? null);
|
||||
if (session?.user) {
|
||||
try {
|
||||
const { user: resolvedUser, role } = await buildUserFromSupabase(session.user);
|
||||
setUser(resolvedUser);
|
||||
setUserRole(role);
|
||||
setAccessToken(session.access_token ?? null);
|
||||
} catch (buildError) {
|
||||
logger.error('auth-context', '❌ Failed to build user from session', { event, error: buildError });
|
||||
setUser(null);
|
||||
setUserRole(null);
|
||||
setAccessToken(null);
|
||||
setError(buildError instanceof Error ? buildError : new Error('Failed to load user'));
|
||||
}
|
||||
} else {
|
||||
setUser(null);
|
||||
setUserRole(null);
|
||||
setAccessToken(null);
|
||||
setError(buildError instanceof Error ? buildError : new Error('Failed to load user'));
|
||||
}
|
||||
} else {
|
||||
// Always clear loading after the first auth event resolves
|
||||
setLoading(false);
|
||||
break;
|
||||
}
|
||||
case 'SIGNED_OUT': {
|
||||
persistSession(null);
|
||||
setUser(null);
|
||||
setUserRole(null);
|
||||
setAccessToken(null);
|
||||
setLoading(false);
|
||||
break;
|
||||
}
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event === 'INITIAL_SESSION' || event === 'TOKEN_REFRESHED') {
|
||||
persistSession(session ?? null);
|
||||
if (session?.user) {
|
||||
try {
|
||||
const { user: resolvedUser, role } = await buildUserFromSupabase(session.user);
|
||||
setUser(resolvedUser);
|
||||
setUserRole(role);
|
||||
setAccessToken(session.access_token ?? null);
|
||||
} catch (buildError) {
|
||||
logger.error('auth-context', '❌ Failed to build user from session', { event, error: buildError });
|
||||
setUser(null);
|
||||
setUserRole(null);
|
||||
setAccessToken(null);
|
||||
setError(buildError instanceof Error ? buildError : new Error('Failed to load user'));
|
||||
}
|
||||
} else {
|
||||
setUser(null);
|
||||
setUserRole(null);
|
||||
setAccessToken(null);
|
||||
}
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event === 'SIGNED_OUT') {
|
||||
persistSession(null);
|
||||
setUser(null);
|
||||
setUserRole(null);
|
||||
setAccessToken(null);
|
||||
setLoading(false);
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
return () => subscription.unsubscribe();
|
||||
}, [buildUserFromSupabase, persistSession, triggerUserInit]);
|
||||
}, [buildUserFromSupabase, persistSession]);
|
||||
|
||||
const signIn = async (email: string, password: string) => {
|
||||
try {
|
||||
|
||||
@ -3,6 +3,7 @@ import { useAuth } from './AuthContext';
|
||||
import { useUser } from './UserContext';
|
||||
import { logger } from '../debugConfig';
|
||||
import { CCUserNodeProps, CCCalendarNodeProps, CCUserTeacherTimetableNodeProps } from '../utils/tldraw/cc-base/cc-graph/cc-graph-types';
|
||||
import { DatabaseNameService } from '../services/graph/databaseNameService';
|
||||
import { CalendarStructure, WorkerStructure } from '../types/navigation';
|
||||
import { useNavigationStore } from '../stores/navigationStore';
|
||||
|
||||
@ -130,7 +131,7 @@ const NeoUserContext = createContext<NeoUserContextType>({
|
||||
});
|
||||
|
||||
export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
|
||||
const { user, accessToken } = useAuth();
|
||||
const { user } = useAuth();
|
||||
const { profile, isInitialized: isUserInitialized } = useUser();
|
||||
const navigationStore = useNavigationStore();
|
||||
|
||||
@ -214,9 +215,12 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
// Inject auth into navigation store so Supabase queries work
|
||||
if (user?.id && accessToken) {
|
||||
navigationStore.setAuthInfo(accessToken, user.id);
|
||||
// Set database names
|
||||
const userDb = profile.user_db_name || (user?.email ?
|
||||
DatabaseNameService.getStoredUserDatabase() || null : null);
|
||||
|
||||
if (!userDb) {
|
||||
throw new Error('No user database name available');
|
||||
}
|
||||
|
||||
// Initialize user node in profile context
|
||||
@ -232,7 +236,7 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
|
||||
main: 'profile',
|
||||
base: 'profile',
|
||||
extended: 'overview'
|
||||
}, null, null),
|
||||
}, userDb, profile.school_db_name),
|
||||
switchTimeout
|
||||
]);
|
||||
|
||||
@ -267,9 +271,9 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
|
||||
// Continue without user node - this is not critical for basic functionality
|
||||
}
|
||||
|
||||
// Set final state — userDbName signals auth availability for UI guards
|
||||
setUserDbName(user?.id || null);
|
||||
setWorkerDbName(null);
|
||||
// Set final state
|
||||
setUserDbName(userDb);
|
||||
setWorkerDbName(profile.school_db_name);
|
||||
setIsInitialized(true);
|
||||
setIsLoading(false);
|
||||
initializationRef.current.isComplete = true;
|
||||
@ -290,13 +294,13 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
|
||||
|
||||
// Calendar Navigation Functions
|
||||
const navigateToDay = async (id: string) => {
|
||||
if (!user?.id) return;
|
||||
if (!userDbName) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await navigationStore.switchContext({
|
||||
base: 'calendar',
|
||||
extended: 'day'
|
||||
}, null, null);
|
||||
}, userDbName, workerDbName);
|
||||
|
||||
const node = navigationStore.context.node;
|
||||
if (node?.data) {
|
||||
@ -330,13 +334,13 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
|
||||
};
|
||||
|
||||
const navigateToWeek = async (id: string) => {
|
||||
if (!user?.id) return;
|
||||
if (!userDbName) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await navigationStore.switchContext({
|
||||
base: 'calendar',
|
||||
extended: 'week'
|
||||
}, null, null);
|
||||
}, userDbName, workerDbName);
|
||||
|
||||
const node = navigationStore.context.node;
|
||||
if (node?.data) {
|
||||
@ -370,13 +374,13 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
|
||||
};
|
||||
|
||||
const navigateToMonth = async (id: string) => {
|
||||
if (!user?.id) return;
|
||||
if (!userDbName) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await navigationStore.switchContext({
|
||||
base: 'calendar',
|
||||
extended: 'month'
|
||||
}, null, null);
|
||||
}, userDbName, workerDbName);
|
||||
|
||||
const node = navigationStore.context.node;
|
||||
if (node?.data) {
|
||||
@ -410,13 +414,13 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
|
||||
};
|
||||
|
||||
const navigateToYear = async (id: string) => {
|
||||
if (!user?.id) return;
|
||||
if (!userDbName) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await navigationStore.switchContext({
|
||||
base: 'calendar',
|
||||
extended: 'year'
|
||||
}, null, null);
|
||||
}, userDbName, workerDbName);
|
||||
|
||||
const node = navigationStore.context.node;
|
||||
if (node?.data) {
|
||||
@ -451,13 +455,13 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
|
||||
|
||||
// Worker Navigation Functions
|
||||
const navigateToTimetable = async (id: string) => {
|
||||
if (!user?.id) return;
|
||||
if (!userDbName) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await navigationStore.switchContext({
|
||||
base: 'teaching',
|
||||
extended: 'timetable'
|
||||
}, null, null);
|
||||
}, userDbName, workerDbName);
|
||||
|
||||
const node = navigationStore.context.node;
|
||||
if (node?.data) {
|
||||
@ -488,13 +492,13 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
|
||||
};
|
||||
|
||||
const navigateToJournal = async (id: string) => {
|
||||
if (!user?.id) return;
|
||||
if (!userDbName) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await navigationStore.switchContext({
|
||||
base: 'teaching',
|
||||
extended: 'journal'
|
||||
}, null, null);
|
||||
}, userDbName, workerDbName);
|
||||
|
||||
const node = navigationStore.context.node;
|
||||
if (node?.data) {
|
||||
@ -525,13 +529,13 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
|
||||
};
|
||||
|
||||
const navigateToPlanner = async (id: string) => {
|
||||
if (!user?.id) return;
|
||||
if (!userDbName) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await navigationStore.switchContext({
|
||||
base: 'teaching',
|
||||
extended: 'planner'
|
||||
}, null, null);
|
||||
}, userDbName, workerDbName);
|
||||
|
||||
const node = navigationStore.context.node;
|
||||
if (node?.data) {
|
||||
@ -562,14 +566,14 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
|
||||
};
|
||||
|
||||
const navigateToClass = async (id: string) => {
|
||||
if (!user?.id) return;
|
||||
if (!userDbName) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await navigationStore.switchContext({
|
||||
base: 'teaching',
|
||||
extended: 'classes'
|
||||
}, null, null);
|
||||
await navigationStore.navigate(id, '');
|
||||
}, userDbName, workerDbName);
|
||||
await navigationStore.navigate(id, userDbName);
|
||||
|
||||
const node = navigationStore.context.node;
|
||||
if (node?.data) {
|
||||
@ -600,14 +604,14 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
|
||||
};
|
||||
|
||||
const navigateToLesson = async (id: string) => {
|
||||
if (!user?.id) return;
|
||||
if (!userDbName) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await navigationStore.switchContext({
|
||||
base: 'teaching',
|
||||
extended: 'lessons'
|
||||
}, null, null);
|
||||
await navigationStore.navigate(id, '');
|
||||
}, userDbName, workerDbName);
|
||||
await navigationStore.navigate(id, userDbName);
|
||||
|
||||
const node = navigationStore.context.node;
|
||||
if (node?.data) {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { Box, CircularProgress, MenuItem, Select, Typography } from '@mui/material';
|
||||
import { SelectChangeEvent } from '@mui/material/Select';
|
||||
import { useAuth } from '../../../contexts/AuthContext';
|
||||
import { supabase } from '../../../supabaseClient';
|
||||
|
||||
type Manifest = {
|
||||
bucket: string;
|
||||
@ -41,7 +41,6 @@ export const CCBundleViewer: React.FC<{
|
||||
currentPage?: number;
|
||||
combinedBundles?: Array<{ id: string }>;
|
||||
}> = ({ fileId, bundleId, currentPage, combinedBundles }) => {
|
||||
const { accessToken } = useAuth();
|
||||
const [manifest, setManifest] = useState<Manifest | null>(null);
|
||||
const [combinedManifests, setCombinedManifests] = useState<Manifest[] | null>(null);
|
||||
const [mode, setMode] = useState<Mode>('markdown_full');
|
||||
@ -54,9 +53,9 @@ export const CCBundleViewer: React.FC<{
|
||||
const API_BASE_FALLBACK = 'http://127.0.0.1:8080';
|
||||
|
||||
const proxyUrl = useCallback(async (bucket: string, relPath: string) => {
|
||||
const token = accessToken || '';
|
||||
const token = (await supabase.auth.getSession()).data.session?.access_token || '';
|
||||
return `${API_BASE}/database/files/proxy_signed?bucket=${encodeURIComponent(bucket)}&path=${encodeURIComponent(relPath)}&token=${encodeURIComponent(token)}`;
|
||||
}, [API_BASE, accessToken]);
|
||||
}, [API_BASE]);
|
||||
|
||||
const replaceAllSafe = useCallback((s: string, search: string, replacement: string) => {
|
||||
if (!s || typeof s !== 'string') return s || '';
|
||||
@ -223,7 +222,7 @@ export const CCBundleViewer: React.FC<{
|
||||
setManifest(null);
|
||||
if (combinedBundles && combinedBundles.length > 0) {
|
||||
try {
|
||||
const token = accessToken || '';
|
||||
const token = (await supabase.auth.getSession()).data.session?.access_token || '';
|
||||
const ms: Manifest[] = [];
|
||||
for (const b of combinedBundles) {
|
||||
const res = await fetch(`${API_BASE}/database/files/${encodeURIComponent(fileId)}/artefacts/${encodeURIComponent(b.id)}/manifest`, { headers: { Authorization: `Bearer ${token}` } });
|
||||
@ -240,7 +239,7 @@ export const CCBundleViewer: React.FC<{
|
||||
}
|
||||
if (!bundleId) return;
|
||||
try {
|
||||
const token = accessToken || '';
|
||||
const token = (await supabase.auth.getSession()).data.session?.access_token || '';
|
||||
const res = await fetch(`${API_BASE}/database/files/${encodeURIComponent(fileId)}/artefacts/${encodeURIComponent(bundleId)}/manifest`, { headers: { Authorization: `Bearer ${token}` } });
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
const rawManifest: Manifest = await res.json();
|
||||
@ -267,7 +266,7 @@ export const CCBundleViewer: React.FC<{
|
||||
let textParts: string[] = [];
|
||||
let jsonParts: string[] = [];
|
||||
for (const m of combinedManifests) {
|
||||
const token = accessToken || '';
|
||||
const token = (await supabase.auth.getSession()).data.session?.access_token || '';
|
||||
let rel: string | undefined;
|
||||
if (mode === 'markdown_full') rel = m.markdown_full || m.html_full || m.text_full || m.json_full;
|
||||
else if (mode === 'html_full') rel = m.html_full || m.markdown_full || m.text_full || m.json_full;
|
||||
@ -349,7 +348,7 @@ export const CCBundleViewer: React.FC<{
|
||||
relPath = rec?.path;
|
||||
}
|
||||
if (!relPath) { setContent(''); setLoading(false); return; }
|
||||
const token = accessToken || '';
|
||||
const token = (await supabase.auth.getSession()).data.session?.access_token || '';
|
||||
const url = await proxyUrl(bucket, relPath);
|
||||
let res = await fetch(url, { headers: { Authorization: `Bearer ${token}` } });
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { Box, CircularProgress, IconButton } from '@mui/material';
|
||||
import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
|
||||
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
|
||||
import { useAuth } from '../../../contexts/AuthContext';
|
||||
import { supabase } from '../../../supabaseClient';
|
||||
|
||||
type Artefact = { id: string; type: string; rel_path: string; created_at: string };
|
||||
|
||||
@ -43,7 +43,6 @@ export const CCDoclingViewer: React.FC<{
|
||||
hideToolbar?: boolean;
|
||||
sectionRange?: { start: number; end: number };
|
||||
}> = ({ fileId, currentPage, onPageChange, onExtractedText, onTotalPagesChange, hideToolbar, sectionRange }) => {
|
||||
const { accessToken } = useAuth();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [images, setImages] = useState<Array<{ src: string; width?: number; height?: number }>>([]);
|
||||
@ -185,7 +184,7 @@ export const CCDoclingViewer: React.FC<{
|
||||
const API_BASE = import.meta.env.VITE_API_BASE || (location.port.startsWith('517') ? 'http://127.0.0.1:8080' : '/api');
|
||||
try {
|
||||
const mRes = await fetch(`${API_BASE}/database/files/${encodeURIComponent(fileId)}/page-images/manifest`, {
|
||||
headers: { 'Authorization': `Bearer ${accessToken || ''}` }
|
||||
headers: { 'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
|
||||
});
|
||||
if (mRes.ok) {
|
||||
const m: PageImagesManifest = await mRes.json();
|
||||
@ -200,7 +199,7 @@ export const CCDoclingViewer: React.FC<{
|
||||
|
||||
// Legacy: Load artefacts for file to find docling JSON artefacts
|
||||
const artefactsRes = await fetch(`${import.meta.env.VITE_API_BASE || (location.port.startsWith('517') ? 'http://127.0.0.1:8080' : '/api')}/database/files/${encodeURIComponent(fileId)}/artefacts`, {
|
||||
headers: { 'Authorization': `Bearer ${accessToken || ''}` }
|
||||
headers: { 'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
|
||||
});
|
||||
if (!artefactsRes.ok) throw new Error(await artefactsRes.text());
|
||||
const artefacts: Artefact[] = await artefactsRes.json();
|
||||
@ -217,7 +216,7 @@ export const CCDoclingViewer: React.FC<{
|
||||
|
||||
// Download artefact JSON via backend (service-role) to avoid RLS issues
|
||||
const jsonRes = await fetch(`${API_BASE}/database/files/${encodeURIComponent(fileId)}/artefacts/${encodeURIComponent(target.id)}/json`, {
|
||||
headers: { 'Authorization': `Bearer ${accessToken || ''}` }
|
||||
headers: { 'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
|
||||
});
|
||||
if (!jsonRes.ok) throw new Error(await jsonRes.text());
|
||||
const doc: DoclingJson = await jsonRes.json();
|
||||
@ -268,7 +267,7 @@ export const CCDoclingViewer: React.FC<{
|
||||
setPageObjectUrl(cached);
|
||||
return;
|
||||
}
|
||||
const token = accessToken || '';
|
||||
const token = (await supabase.auth.getSession()).data.session?.access_token || '';
|
||||
let resp = await fetch(pageProxyUrl, { headers: { Authorization: `Bearer ${token}` } });
|
||||
if (!resp.ok && manifest) {
|
||||
// Fallback to thumbnail if the full image is not accessible yet
|
||||
@ -370,7 +369,6 @@ export const CCDoclingViewer: React.FC<{
|
||||
export default CCDoclingViewer;
|
||||
|
||||
const ImageByProxy: React.FC<{ url: string; alt: string }> = ({ url, alt }) => {
|
||||
const { accessToken } = useAuth();
|
||||
const [blobUrl, setBlobUrl] = useState<string | undefined>(undefined);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@ -378,7 +376,7 @@ const ImageByProxy: React.FC<{ url: string; alt: string }> = ({ url, alt }) => {
|
||||
let revoked: string | null = null;
|
||||
const load = async () => {
|
||||
try {
|
||||
const token = accessToken || '';
|
||||
const token = (await supabase.auth.getSession()).data.session?.access_token || '';
|
||||
const resp = await fetch(url, { headers: { Authorization: `Bearer ${token}` } });
|
||||
if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
|
||||
const blob = await resp.blob();
|
||||
|
||||
@ -6,7 +6,7 @@ import { SelectChangeEvent } from '@mui/material/Select';
|
||||
import { CCDoclingViewer } from './CCDoclingViewer.tsx';
|
||||
import CCEnhancedFilePanel from './CCEnhancedFilePanel.tsx';
|
||||
import CCBundleViewer from './CCBundleViewer.tsx';
|
||||
import { useAuth } from '../../../contexts/AuthContext';
|
||||
import { supabase } from '../../../supabaseClient';
|
||||
|
||||
type CanonicalDoclingConfig = {
|
||||
pipeline: 'standard' | 'vlm' | 'asr';
|
||||
@ -46,7 +46,6 @@ export const CCDocumentIntelligence: React.FC = () => {
|
||||
const { fileId } = useParams<{ fileId: string }>();
|
||||
|
||||
const validFileId = useMemo(() => fileId || '', [fileId]);
|
||||
const { accessToken } = useAuth();
|
||||
const [page, setPage] = useState<number>(1);
|
||||
const [outlineOptions, setOutlineOptions] = useState<Array<{ id: string; title: string; start_page: number; end_page: number }>>([]);
|
||||
const [profile, setProfile] = useState<Profile>('default');
|
||||
@ -149,7 +148,7 @@ export const CCDocumentIntelligence: React.FC = () => {
|
||||
const loadBundles = async () => {
|
||||
if (!validFileId) return;
|
||||
const API_BASE = import.meta.env.VITE_API_BASE || (location.port.startsWith('517') ? 'http://127.0.0.1:8080' : '/api');
|
||||
const token = accessToken || '';
|
||||
const token = (await supabase.auth.getSession()).data.session?.access_token || '';
|
||||
const res = await fetch(`${API_BASE}/database/files/${encodeURIComponent(validFileId)}/artefacts`, { headers: { Authorization: `Bearer ${token}` } });
|
||||
if (!res.ok) return;
|
||||
const arts: Artefact[] = await res.json();
|
||||
@ -226,14 +225,14 @@ export const CCDocumentIntelligence: React.FC = () => {
|
||||
const API_BASE = import.meta.env.VITE_API_BASE || (location.port.startsWith('517') ? 'http://127.0.0.1:8080' : '/api');
|
||||
try {
|
||||
const artsRes = await fetch(`${API_BASE}/database/files/${encodeURIComponent(validFileId)}/artefacts`, {
|
||||
headers: { 'Authorization': `Bearer ${accessToken || ''}` }
|
||||
headers: { 'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
|
||||
});
|
||||
if (!artsRes.ok) return;
|
||||
const arts: Array<{ id: string; type: string; rel_path?: string }> = await artsRes.json();
|
||||
const outlineArt = arts.find(a => a.type === 'document_outline_hierarchy');
|
||||
if (!outlineArt) return;
|
||||
const jsonRes = await fetch(`${API_BASE}/database/files/${encodeURIComponent(validFileId)}/artefacts/${encodeURIComponent(outlineArt.id)}/json`, {
|
||||
headers: { 'Authorization': `Bearer ${accessToken || ''}` }
|
||||
headers: { 'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
|
||||
});
|
||||
if (!jsonRes.ok) return;
|
||||
const doc = await jsonRes.json();
|
||||
@ -243,7 +242,7 @@ export const CCDocumentIntelligence: React.FC = () => {
|
||||
const splitArt = arts.find(a => a.type === 'split_map_json');
|
||||
if (splitArt) {
|
||||
const smRes = await fetch(`${API_BASE}/database/files/${encodeURIComponent(validFileId)}/artefacts/${encodeURIComponent(splitArt.id)}/json`, {
|
||||
headers: { 'Authorization': `Bearer ${accessToken || ''}` }
|
||||
headers: { 'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
|
||||
});
|
||||
if (smRes.ok) {
|
||||
const sm = await smRes.json();
|
||||
@ -487,7 +486,7 @@ export const CCDocumentIntelligence: React.FC = () => {
|
||||
try {
|
||||
setBusy(true);
|
||||
const API_BASE = import.meta.env.VITE_API_BASE || (location.port.startsWith('517') ? 'http://127.0.0.1:8080' : '/api');
|
||||
const token = accessToken || '';
|
||||
const token = (await supabase.auth.getSession()).data.session?.access_token || '';
|
||||
const body: CanonicalDoclingRequest = {
|
||||
use_split_map: selectedSectionId === 'full' ? autoSplit : false,
|
||||
config: {
|
||||
|
||||
@ -11,8 +11,7 @@ import Schedule from '@mui/icons-material/Schedule';
|
||||
import Visibility from '@mui/icons-material/Visibility';
|
||||
import Psychology from '@mui/icons-material/Psychology';
|
||||
import Overview from '@mui/icons-material/Home';
|
||||
import CalendarViewMonth from '@mui/icons-material/CalendarViewMonth';
|
||||
import { useAuth } from '../../../contexts/AuthContext';
|
||||
import { supabase } from '../../../supabaseClient';
|
||||
|
||||
// Types
|
||||
type PageImagesManifest = {
|
||||
@ -67,7 +66,6 @@ export const CCEnhancedFilePanel: React.FC<CCEnhancedFilePanelProps> = ({
|
||||
fileId, selectedPage, onSelectPage, currentSection
|
||||
}) => {
|
||||
// State
|
||||
const { accessToken } = useAuth();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [manifest, setManifest] = useState<PageImagesManifest | null>(null);
|
||||
@ -96,7 +94,7 @@ export const CCEnhancedFilePanel: React.FC<CCEnhancedFilePanelProps> = ({
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const token = accessToken || '';
|
||||
const token = (await supabase.auth.getSession()).data.session?.access_token || '';
|
||||
|
||||
// Load page images manifest
|
||||
const manifestRes = await fetch(`${API_BASE}/database/files/${encodeURIComponent(fileId)}/page-images/manifest`, {
|
||||
@ -200,7 +198,7 @@ export const CCEnhancedFilePanel: React.FC<CCEnhancedFilePanelProps> = ({
|
||||
|
||||
try {
|
||||
const url = `${API_BASE}/database/files/proxy?bucket=${encodeURIComponent(manifest.bucket || '')}&path=${encodeURIComponent(pageInfo.thumbnail_path)}`;
|
||||
const token = accessToken || '';
|
||||
const token = (await supabase.auth.getSession()).data.session?.access_token || '';
|
||||
const response = await fetch(url, { headers: { Authorization: `Bearer ${token}` } });
|
||||
|
||||
if (!response.ok) return undefined;
|
||||
|
||||
@ -5,7 +5,7 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight';
|
||||
import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
|
||||
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
|
||||
import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
|
||||
import { useAuth } from '../../../contexts/AuthContext';
|
||||
import { supabase } from '../../../supabaseClient';
|
||||
|
||||
type PageImagesManifest = {
|
||||
version: number;
|
||||
@ -54,7 +54,6 @@ export const CCFileDetailPanel: React.FC<{
|
||||
selectedPage: number;
|
||||
onSelectPage: (p: number) => void;
|
||||
}> = ({ fileId, selectedPage, onSelectPage }) => {
|
||||
const { accessToken } = useAuth();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [manifest, setManifest] = useState<PageImagesManifest | null>(null);
|
||||
@ -74,7 +73,7 @@ export const CCFileDetailPanel: React.FC<{
|
||||
setError(null);
|
||||
try {
|
||||
const mRes = await fetch(`${API_BASE}/database/files/${encodeURIComponent(fileId)}/page-images/manifest`, {
|
||||
headers: { 'Authorization': `Bearer ${accessToken || ''}` }
|
||||
headers: { 'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
|
||||
});
|
||||
if (!mRes.ok) throw new Error(await mRes.text());
|
||||
const m: PageImagesManifest = await mRes.json();
|
||||
@ -83,14 +82,14 @@ export const CCFileDetailPanel: React.FC<{
|
||||
// Try to load outline structure artefact (for grouping only)
|
||||
try {
|
||||
const artsRes = await fetch(`${API_BASE}/database/files/${encodeURIComponent(fileId)}/artefacts`, {
|
||||
headers: { 'Authorization': `Bearer ${accessToken || ''}` }
|
||||
headers: { 'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
|
||||
});
|
||||
if (artsRes.ok) {
|
||||
const arts: Array<{ id: string; type: string }> = await artsRes.json();
|
||||
const outlineArt = arts.find(a => a.type === 'document_outline_hierarchy');
|
||||
if (outlineArt) {
|
||||
const jsonRes = await fetch(`${API_BASE}/database/files/${encodeURIComponent(fileId)}/artefacts/${encodeURIComponent(outlineArt.id)}/json`, {
|
||||
headers: { 'Authorization': `Bearer ${accessToken || ''}` }
|
||||
headers: { 'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
|
||||
});
|
||||
if (jsonRes.ok) {
|
||||
const outJson = await jsonRes.json();
|
||||
@ -119,7 +118,7 @@ export const CCFileDetailPanel: React.FC<{
|
||||
const pg = manifest.page_images[idx];
|
||||
if (!pg) return undefined;
|
||||
const url = `${API_BASE}/database/files/proxy?bucket=${encodeURIComponent(manifest.bucket || '')}&path=${encodeURIComponent(pg.thumbnail_path)}`;
|
||||
const token = accessToken || '';
|
||||
const token = (await supabase.auth.getSession()).data.session?.access_token || '';
|
||||
const resp = await fetch(url, { headers: { Authorization: `Bearer ${token}` } });
|
||||
if (!resp.ok) return undefined;
|
||||
const blob = await resp.blob();
|
||||
@ -151,7 +150,7 @@ export const CCFileDetailPanel: React.FC<{
|
||||
<IconButton size="small" onClick={async () => {
|
||||
try {
|
||||
setShowAdmin(true);
|
||||
const token = accessToken || '';
|
||||
const token = (await supabase.auth.getSession()).data.session?.access_token || '';
|
||||
const res = await fetch(`${API_BASE}/queue/queue/tasks/by-file/${encodeURIComponent(fileId)}`, { headers: { Authorization: `Bearer ${token}` } });
|
||||
const data = await res.json();
|
||||
setAdminData(data);
|
||||
|
||||
@ -10,11 +10,11 @@ import {
|
||||
TLStoreWithStatus
|
||||
} from '@tldraw/tldraw';
|
||||
import { useTLDraw } from '../../contexts/TLDrawContext';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import { useUser } from '../../contexts/UserContext';
|
||||
// Tldraw services
|
||||
import { localStoreService } from '../../services/tldraw/localStoreService';
|
||||
import { PresentationService } from '../../services/tldraw/presentationService';
|
||||
import { UserNeoDBService } from '../../services/graph/userNeoDBService';
|
||||
import { NodeCanvasService } from '../../services/tldraw/nodeCanvasService';
|
||||
import { NavigationSnapshotService } from '../../services/tldraw/snapshotService';
|
||||
// Tldraw utils
|
||||
@ -46,8 +46,6 @@ interface LoadingState {
|
||||
export default function SinglePlayerPage() {
|
||||
// Context hooks with initialization states
|
||||
const { profile: user, loading: userLoading } = useUser();
|
||||
const { accessToken } = useAuth();
|
||||
const { context, setAuthInfo, switchContext } = useNavigationStore();
|
||||
const {
|
||||
tldrawPreferences,
|
||||
initializePreferences,
|
||||
@ -57,6 +55,8 @@ export default function SinglePlayerPage() {
|
||||
const routerNavigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
// Navigation store
|
||||
const { context } = useNavigationStore();
|
||||
|
||||
// Refs
|
||||
const editorRef = useRef<Editor | null>(null);
|
||||
@ -114,7 +114,6 @@ export default function SinglePlayerPage() {
|
||||
|
||||
// 2. Initialize snapshot service
|
||||
const snapshotService = new NavigationSnapshotService(newStore, editorRef.current || undefined);
|
||||
if (accessToken) snapshotService.setAccessToken(accessToken);
|
||||
snapshotServiceRef.current = snapshotService;
|
||||
logger.debug('single-player-page', '✨ Initialized NavigationSnapshotService');
|
||||
|
||||
@ -132,14 +131,12 @@ export default function SinglePlayerPage() {
|
||||
|
||||
await NavigationSnapshotService.loadNodeSnapshotFromDatabase(
|
||||
nodeStoragePath,
|
||||
accessToken || '',
|
||||
null,
|
||||
newStore,
|
||||
setLoadingState,
|
||||
undefined,
|
||||
editorRef.current || undefined
|
||||
undefined, // sharedStore
|
||||
editorRef.current || undefined // editor
|
||||
);
|
||||
// Wire auto-save: set the current path on the service instance
|
||||
snapshotService.setCurrentNodePath(nodeStoragePath);
|
||||
logger.debug('single-player-page', '✅ Snapshot loaded from database');
|
||||
} else {
|
||||
logger.debug('single-player-page', '⚠️ No node_storage_path found in node, skipping snapshot load', {
|
||||
@ -155,7 +152,7 @@ export default function SinglePlayerPage() {
|
||||
let isAutoSaving = false;
|
||||
|
||||
newStore.listen(() => {
|
||||
if (snapshotServiceRef.current && snapshotServiceRef.current.getCurrentNodePath()) {
|
||||
if (snapshotServiceRef.current && context.node && snapshotServiceRef.current.getCurrentNodePath()) {
|
||||
// Skip if already saving
|
||||
if (isAutoSaving) {
|
||||
logger.debug('single-player-page', '⚠️ Skipping auto-save - already saving');
|
||||
@ -181,6 +178,8 @@ export default function SinglePlayerPage() {
|
||||
isAutoSaving = false;
|
||||
}
|
||||
}, 2000); // Increased to 2 seconds debounce
|
||||
} else if (snapshotServiceRef.current && context.node && !snapshotServiceRef.current.getCurrentNodePath()) {
|
||||
logger.debug('single-player-page', '⚠️ Skipping auto-save - no current node path set yet');
|
||||
}
|
||||
});
|
||||
|
||||
@ -254,16 +253,11 @@ export default function SinglePlayerPage() {
|
||||
|
||||
try {
|
||||
setLoadingState({ status: 'loading', error: '' });
|
||||
|
||||
if (context.node.type !== 'workspace') {
|
||||
try {
|
||||
const nodeData = await loadNodeData(context.node);
|
||||
await NodeCanvasService.centerCurrentNode(editorRef.current, context.node, nodeData);
|
||||
} catch (shapeErr) {
|
||||
logger.warn('single-player-page', '⚠️ Could not place node shape', { type: context.node.type, error: shapeErr });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Center the node
|
||||
const nodeData = await loadNodeData(context.node);
|
||||
await NodeCanvasService.centerCurrentNode(editorRef.current, context.node, nodeData);
|
||||
|
||||
setIsInitialLoad(false);
|
||||
setLoadingState({ status: 'ready', error: '' });
|
||||
} catch (error) {
|
||||
@ -303,17 +297,12 @@ export default function SinglePlayerPage() {
|
||||
? context.history.nodes[context.history.currentIndex - 1]
|
||||
: null;
|
||||
|
||||
// Handle navigation in snapshot service (load/save snapshot)
|
||||
// Handle navigation in snapshot service
|
||||
await snapshotService.handleNavigationStart(previousNode, currentNode);
|
||||
|
||||
if (currentNode.type !== 'workspace') {
|
||||
try {
|
||||
const nodeData = await loadNodeData(currentNode);
|
||||
await NodeCanvasService.centerCurrentNode(editor, currentNode, nodeData);
|
||||
} catch (shapeErr) {
|
||||
logger.warn('single-player-page', '⚠️ Could not place node shape', { type: currentNode.type, error: shapeErr });
|
||||
}
|
||||
}
|
||||
// Center the node on canvas
|
||||
const nodeData = await loadNodeData(currentNode);
|
||||
await NodeCanvasService.centerCurrentNode(editor, currentNode, nodeData);
|
||||
|
||||
setLoadingState({ status: 'ready', error: '' });
|
||||
} catch (error) {
|
||||
@ -326,17 +315,7 @@ export default function SinglePlayerPage() {
|
||||
};
|
||||
|
||||
handleNodeChange();
|
||||
}, [context.node, context.history, store]);
|
||||
|
||||
// Inject auth and trigger initial context when token is ready
|
||||
useEffect(() => {
|
||||
if (user?.id && accessToken) {
|
||||
setAuthInfo(accessToken, user.id);
|
||||
if (!context.node) {
|
||||
switchContext({ main: 'profile', base: 'profile' }, null, null);
|
||||
}
|
||||
}
|
||||
}, [user?.id, accessToken]);
|
||||
}, [context.node, context.history, store, isInitialLoad]);
|
||||
|
||||
// Initialize preferences when user is available
|
||||
useEffect(() => {
|
||||
@ -483,6 +462,9 @@ export default function SinglePlayerPage() {
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
top: `${HEADER_HEIGHT}px`,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
{/* Loading overlay - show when loading or contexts not initialized */}
|
||||
{(loadingState.status === 'loading' || !store) && (
|
||||
@ -545,7 +527,6 @@ export default function SinglePlayerPage() {
|
||||
// Update snapshot service with editor reference
|
||||
if (snapshotServiceRef.current) {
|
||||
snapshotServiceRef.current.setEditor(editor);
|
||||
if (accessToken) snapshotServiceRef.current.setAccessToken(accessToken);
|
||||
}
|
||||
|
||||
setIsEditorReady(true);
|
||||
@ -584,21 +565,68 @@ const getNodeStoragePath = (node: NavigationNode): string | null => {
|
||||
};
|
||||
|
||||
const loadNodeData = async (node: NavigationNode): Promise<NodeData> => {
|
||||
if (!node?.id) throw new Error('Node parameter is required');
|
||||
// Validate the node parameter
|
||||
if (!node) {
|
||||
throw new Error('Node parameter is required');
|
||||
}
|
||||
|
||||
if (!node.id) {
|
||||
throw new Error('Node must have an ID');
|
||||
}
|
||||
|
||||
const nodeStoragePath = getNodeStoragePath(node);
|
||||
if (!nodeStoragePath) throw new Error(`Node ${node.id} is missing node_storage_path`);
|
||||
if (!nodeStoragePath) {
|
||||
throw new Error(`Node ${node.id} is missing node_storage_path`);
|
||||
}
|
||||
|
||||
logger.debug('single-player-page', '🔄 Loading node data', {
|
||||
nodeId: node.id,
|
||||
nodeType: node.type,
|
||||
nodeLabel: node.label,
|
||||
nodeStoragePath: nodeStoragePath
|
||||
});
|
||||
|
||||
const theme = getThemeFromLabel(node.type);
|
||||
return {
|
||||
title: node.label || node.type || '',
|
||||
w: 500,
|
||||
h: 350,
|
||||
state: { parentId: null, isPageChild: true, hasChildren: null, bindings: null },
|
||||
headerColor: theme.headerColor,
|
||||
backgroundColor: theme.backgroundColor,
|
||||
isLocked: false,
|
||||
__primarylabel__: node.type,
|
||||
uuid_string: node.id,
|
||||
node_storage_path: nodeStoragePath,
|
||||
};
|
||||
try {
|
||||
// 1. Always fetch fresh data
|
||||
// Create a temporary node object with the correct structure for the service
|
||||
const normalizedNode = {
|
||||
...node,
|
||||
node_storage_path: nodeStoragePath
|
||||
};
|
||||
|
||||
const dbName = UserNeoDBService.getNodeDatabaseName(normalizedNode);
|
||||
const fetchedData = await UserNeoDBService.fetchNodeData(node.id, dbName);
|
||||
|
||||
if (!fetchedData?.node_data) {
|
||||
throw new Error('Failed to fetch node data');
|
||||
}
|
||||
|
||||
// 2. Process the data into the correct shape
|
||||
const theme = getThemeFromLabel(node.type);
|
||||
return {
|
||||
...fetchedData.node_data,
|
||||
title: String(fetchedData.node_data.title || node.label || ''),
|
||||
w: 500,
|
||||
h: 350,
|
||||
state: {
|
||||
parentId: null,
|
||||
isPageChild: true,
|
||||
hasChildren: null,
|
||||
bindings: null
|
||||
},
|
||||
headerColor: theme.headerColor,
|
||||
backgroundColor: theme.backgroundColor,
|
||||
isLocked: false,
|
||||
__primarylabel__: node.type,
|
||||
uuid_string: node.id,
|
||||
node_storage_path: nodeStoragePath
|
||||
};
|
||||
} catch (error) {
|
||||
logger.error('single-player-page', '❌ Error in loadNodeData', {
|
||||
nodeId: node.id,
|
||||
nodeType: node.type,
|
||||
error: error instanceof Error ? error.message : String(error)
|
||||
});
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,52 +1,27 @@
|
||||
// External imports
|
||||
import { TLStore, getSnapshot, Editor, loadSnapshot } from '@tldraw/tldraw';
|
||||
import axios from '../../axiosConfig';
|
||||
import logger from '../../debugConfig';
|
||||
import { SharedStoreService } from './sharedStoreService';
|
||||
import { StorageKeys, storageService } from '../auth/localStorageService';
|
||||
import { NavigationNode } from '../../types/navigation';
|
||||
|
||||
export interface LoadingState {
|
||||
status: 'loading' | 'ready' | 'error';
|
||||
error: string;
|
||||
}
|
||||
|
||||
const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL as string;
|
||||
const SUPABASE_ANON_KEY = import.meta.env.VITE_SUPABASE_ANON_KEY as string;
|
||||
const BUCKET = 'cc.users';
|
||||
|
||||
async function storageGet(path: string, accessToken: string): Promise<unknown | null> {
|
||||
const url = `${SUPABASE_URL}/storage/v1/object/authenticated/${BUCKET}/${path}`;
|
||||
const res = await fetch(url, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${accessToken}`,
|
||||
apikey: SUPABASE_ANON_KEY,
|
||||
},
|
||||
});
|
||||
if (res.status === 404 || res.status === 400) return null;
|
||||
if (!res.ok) throw new Error(`Storage GET ${res.status}: ${await res.text()}`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
async function storagePut(path: string, accessToken: string, data: unknown): Promise<void> {
|
||||
const url = `${SUPABASE_URL}/storage/v1/object/${BUCKET}/${path}`;
|
||||
const headers = {
|
||||
Authorization: `Bearer ${accessToken}`,
|
||||
apikey: SUPABASE_ANON_KEY,
|
||||
'Content-Type': 'application/json',
|
||||
};
|
||||
const body = JSON.stringify(data);
|
||||
// PUT replaces an existing object; POST creates a new one.
|
||||
// Avoids x-upsert custom header which self-hosted Supabase CORS may block.
|
||||
let res = await fetch(url, { method: 'PUT', headers, body });
|
||||
if (!res.ok && (res.status === 404 || res.status === 400)) {
|
||||
res = await fetch(url, { method: 'POST', headers, body });
|
||||
}
|
||||
if (!res.ok) throw new Error(`Storage ${res.status}: ${await res.text()}`);
|
||||
}
|
||||
const EMPTY_NODE: NavigationNode = {
|
||||
id: '',
|
||||
node_storage_path: '',
|
||||
type: '',
|
||||
label: ''
|
||||
};
|
||||
|
||||
export class NavigationSnapshotService {
|
||||
private store: TLStore;
|
||||
private editor: Editor | null = null;
|
||||
private currentNodePath: string | null = null;
|
||||
private _accessToken: string | null = null;
|
||||
private isAutoSaveEnabled = true;
|
||||
private isSaving = false;
|
||||
private isLoading = false;
|
||||
@ -58,21 +33,24 @@ export class NavigationSnapshotService {
|
||||
this.editor = editor || null;
|
||||
logger.debug('snapshot-service', '🔄 Initialized NavigationSnapshotService', {
|
||||
storeId: store.id,
|
||||
hasEditor: !!editor,
|
||||
hasEditor: !!editor
|
||||
});
|
||||
}
|
||||
|
||||
setEditor(editor: Editor): void {
|
||||
this.editor = editor;
|
||||
logger.debug('snapshot-service', '🔄 Editor reference updated', {
|
||||
editorId: editor.store.id
|
||||
});
|
||||
}
|
||||
|
||||
setAccessToken(token: string): void {
|
||||
this._accessToken = token;
|
||||
private static replaceBackslashes(input: string | undefined): string {
|
||||
return input ? input.replace(/\\/g, '/') : '';
|
||||
}
|
||||
|
||||
static async loadNodeSnapshotFromDatabase(
|
||||
nodePath: string,
|
||||
accessToken: string,
|
||||
dbName: string,
|
||||
store: TLStore,
|
||||
setLoadingState: (state: LoadingState) => void,
|
||||
sharedStore?: SharedStoreService,
|
||||
@ -80,102 +58,252 @@ export class NavigationSnapshotService {
|
||||
): Promise<void> {
|
||||
try {
|
||||
setLoadingState({ status: 'loading', error: '' });
|
||||
logger.info('snapshot-service', '📂 Loading snapshot from Storage', { path: nodePath });
|
||||
|
||||
const snapshot = await storageGet(nodePath, accessToken);
|
||||
logger.info('snapshot-service', '📂 Loading file from path', {
|
||||
path: nodePath,
|
||||
db_name: dbName
|
||||
});
|
||||
|
||||
if (!snapshot) {
|
||||
logger.debug('snapshot-service', 'ℹ️ No snapshot found at path — clearing canvas', { nodePath });
|
||||
// Clear all shapes so the canvas is blank for this new node
|
||||
if (editor) {
|
||||
const shapeIds = [...editor.getCurrentPageShapeIds()];
|
||||
if (shapeIds.length > 0) {
|
||||
editor.deleteShapes(shapeIds);
|
||||
const response = await axios.get(
|
||||
'/database/tldraw_supabase/get_tldraw_node_file', {
|
||||
params: {
|
||||
path: this.replaceBackslashes(nodePath),
|
||||
db_name: dbName
|
||||
}
|
||||
}
|
||||
setLoadingState({ status: 'ready', error: '' });
|
||||
return;
|
||||
}
|
||||
);
|
||||
|
||||
const snap = snapshot as { document?: unknown; session?: unknown; schemaVersion?: unknown };
|
||||
if (!snap.document || !snap.session) {
|
||||
logger.warn('snapshot-service', '⚠️ Invalid snapshot format at path', { nodePath });
|
||||
setLoadingState({ status: 'ready', error: '' });
|
||||
return;
|
||||
}
|
||||
|
||||
if (sharedStore) {
|
||||
await sharedStore.loadSnapshot(snapshot, setLoadingState);
|
||||
return;
|
||||
}
|
||||
|
||||
const snapshotCopy = {
|
||||
schemaVersion: snap.schemaVersion || (snap.document as { schema?: { schemaVersion?: unknown } })?.schema?.schemaVersion,
|
||||
document: snap.document,
|
||||
session: snap.session,
|
||||
};
|
||||
|
||||
try {
|
||||
if (editor) {
|
||||
loadSnapshot(editor.store, snapshotCopy as Parameters<typeof loadSnapshot>[1]);
|
||||
} else {
|
||||
loadSnapshot(store, snapshotCopy as Parameters<typeof loadSnapshot>[1]);
|
||||
}
|
||||
logger.debug('snapshot-service', '✅ Snapshot loaded successfully');
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : String(err);
|
||||
const isSchemaMigration = /migration|schema|Incompatible/i.test(msg);
|
||||
if (isSchemaMigration) {
|
||||
logger.debug('snapshot-service', 'ℹ️ Schema migration warning (non-critical)', { error: msg });
|
||||
} else {
|
||||
logger.warn('snapshot-service', '⚠️ Unexpected loadSnapshot error', { error: msg });
|
||||
}
|
||||
}
|
||||
|
||||
setLoadingState({ status: 'ready', error: '' });
|
||||
} catch (error) {
|
||||
logger.error('snapshot-service', '❌ Failed to load snapshot', {
|
||||
error: error instanceof Error ? error.message : 'Unknown error',
|
||||
const snapshot = response.data;
|
||||
logger.debug('snapshot-service', '🔍 Snapshot data received', {
|
||||
hasSnapshot: !!snapshot,
|
||||
hasDocument: !!snapshot?.document,
|
||||
hasSession: !!snapshot?.session,
|
||||
hasSchemaVersion: !!snapshot?.schemaVersion,
|
||||
schemaVersion: snapshot?.schemaVersion,
|
||||
snapshotKeys: snapshot ? Object.keys(snapshot) : []
|
||||
});
|
||||
setLoadingState({
|
||||
status: 'error',
|
||||
error: error instanceof Error ? error.message : 'Failed to load snapshot',
|
||||
|
||||
if (snapshot && snapshot.document && snapshot.session) {
|
||||
logger.debug('snapshot-service', '📥 Snapshot loaded successfully');
|
||||
|
||||
if (sharedStore) {
|
||||
await sharedStore.loadSnapshot(snapshot, setLoadingState);
|
||||
} else {
|
||||
logger.debug('snapshot-service', '🔄 Calling TLDraw loadSnapshot', {
|
||||
hasStore: !!store,
|
||||
snapshotType: typeof snapshot,
|
||||
snapshotKeys: Object.keys(snapshot),
|
||||
snapshotSchemaVersion: snapshot?.schemaVersion,
|
||||
snapshotDocument: !!snapshot?.document,
|
||||
snapshotSession: !!snapshot?.session
|
||||
});
|
||||
|
||||
// Create a defensive copy to ensure the snapshot doesn't get modified
|
||||
const snapshotCopy = {
|
||||
schemaVersion: snapshot.schemaVersion || snapshot.document?.schema?.schemaVersion,
|
||||
document: snapshot.document,
|
||||
session: snapshot.session
|
||||
};
|
||||
|
||||
logger.debug('snapshot-service', '🔄 Calling loadSnapshot with defensive copy', {
|
||||
copySchemaVersion: snapshotCopy.schemaVersion,
|
||||
copyDocument: !!snapshotCopy.document,
|
||||
copySession: !!snapshotCopy.session,
|
||||
storeType: typeof store,
|
||||
storeIsNull: store === null,
|
||||
storeIsUndefined: store === undefined,
|
||||
storeKeys: store ? Object.keys(store) : 'N/A'
|
||||
});
|
||||
|
||||
// Debug: Log the snapshot schema sequences
|
||||
if (snapshotCopy.document?.schema?.sequences) {
|
||||
logger.debug('snapshot-service', '🔍 Snapshot schema sequences:', snapshotCopy.document.schema.sequences);
|
||||
const customSequences = Object.keys(snapshotCopy.document.schema.sequences).filter(key => key.includes('cc-'));
|
||||
logger.debug('snapshot-service', '🔍 Custom shape sequences in snapshot:', customSequences);
|
||||
}
|
||||
|
||||
// Debug: Log the store schema sequences
|
||||
if (store?.schema) {
|
||||
const storeSequences = store.schema.serialize().sequences;
|
||||
logger.debug('snapshot-service', '🔍 Store schema sequences:', storeSequences);
|
||||
const storeCustomSequences = Object.keys(storeSequences).filter(key => key.includes('cc-'));
|
||||
logger.debug('snapshot-service', '🔍 Custom shape sequences in store:', storeCustomSequences);
|
||||
}
|
||||
|
||||
// Add try-catch around the loadSnapshot call to get more specific error info
|
||||
try {
|
||||
// Ensure store is properly initialized before loading snapshot
|
||||
if (!store) {
|
||||
throw new Error('Store is null or undefined');
|
||||
}
|
||||
|
||||
// Validate snapshot structure before loading
|
||||
if (!snapshotCopy || !snapshotCopy.document || !snapshotCopy.session) {
|
||||
throw new Error('Invalid snapshot structure');
|
||||
}
|
||||
|
||||
// Check for schema migrations and handle them properly
|
||||
logger.debug('snapshot-service', '🔄 Checking for schema migrations', {
|
||||
storeId: store.id,
|
||||
storeType: typeof store,
|
||||
storeConstructor: store.constructor.name,
|
||||
snapshotSchemaVersion: snapshotCopy.schemaVersion,
|
||||
snapshotDocumentKeys: Object.keys(snapshotCopy.document || {}),
|
||||
snapshotSessionKeys: Object.keys(snapshotCopy.session || {})
|
||||
});
|
||||
|
||||
try {
|
||||
// Try to load the snapshot directly first
|
||||
logger.debug('snapshot-service', '🔄 Attempting to load snapshot directly');
|
||||
if (editor) {
|
||||
loadSnapshot(editor.store, snapshotCopy);
|
||||
logger.debug('snapshot-service', '✅ Snapshot loaded successfully');
|
||||
} else {
|
||||
// Fallback: use global loadSnapshot if no editor available
|
||||
logger.debug('snapshot-service', '🔄 No editor available, using global loadSnapshot');
|
||||
loadSnapshot(store, snapshotCopy);
|
||||
logger.debug('snapshot-service', '✅ Snapshot loaded successfully via global loadSnapshot');
|
||||
}
|
||||
} catch (migrationError) {
|
||||
// Check if this is a schema migration error that we can safely ignore
|
||||
const errorMessage = migrationError instanceof Error ? migrationError.message : String(migrationError);
|
||||
const isSchemaMigrationError = errorMessage.includes('migration') ||
|
||||
errorMessage.includes('schema') ||
|
||||
errorMessage.includes('Incompatible');
|
||||
|
||||
if (isSchemaMigrationError) {
|
||||
logger.debug('snapshot-service', 'ℹ️ Schema migration warning (non-critical)', {
|
||||
error: errorMessage
|
||||
});
|
||||
// Continue with empty store - this is expected for some snapshots
|
||||
} else {
|
||||
logger.warn('snapshot-service', '⚠️ Unexpected load error', {
|
||||
error: errorMessage
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
logger.debug('snapshot-service', '✅ loadSnapshot call succeeded');
|
||||
setLoadingState({ status: 'ready', error: '' });
|
||||
} catch (loadError) {
|
||||
logger.error('snapshot-service', '❌ loadSnapshot call failed', {
|
||||
error: loadError instanceof Error ? loadError.message : String(loadError),
|
||||
storeType: typeof store,
|
||||
storeHasLoadSnapshot: store && typeof store.loadSnapshot === 'function',
|
||||
snapshotType: typeof snapshotCopy,
|
||||
snapshotKeys: Object.keys(snapshotCopy)
|
||||
});
|
||||
throw loadError;
|
||||
}
|
||||
storageService.set(StorageKeys.NODE_FILE_PATH, nodePath);
|
||||
}
|
||||
} else {
|
||||
logger.error('snapshot-service', '❌ Invalid snapshot format');
|
||||
setLoadingState({ status: 'error', error: 'Invalid snapshot format' });
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('snapshot-service', '❌ Failed to fetch snapshot', {
|
||||
error: error instanceof Error ? error.message : 'Unknown error'
|
||||
});
|
||||
setLoadingState({
|
||||
status: 'error',
|
||||
error: error instanceof Error ? error.message : 'Failed to load file'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
static async saveNodeSnapshotToDatabase(
|
||||
nodePath: string,
|
||||
accessToken: string,
|
||||
dbName: string,
|
||||
store: TLStore
|
||||
): Promise<void> {
|
||||
try {
|
||||
logger.info('snapshot-service', '💾 Saving snapshot to Storage', { path: nodePath });
|
||||
logger.info('snapshot-service', '💾 Saving snapshot to database', {
|
||||
path: nodePath,
|
||||
db_name: dbName
|
||||
});
|
||||
|
||||
const snapshot = getSnapshot(store);
|
||||
await storagePut(nodePath, accessToken, snapshot);
|
||||
logger.debug('snapshot-service', '✅ Snapshot saved successfully');
|
||||
|
||||
// Debug: Log what we're saving
|
||||
logger.debug('snapshot-service', '🔍 Snapshot being saved:', {
|
||||
hasSnapshot: !!snapshot,
|
||||
snapshotKeys: Object.keys(snapshot || {}),
|
||||
schemaVersion: snapshot?.schemaVersion,
|
||||
hasDocument: !!snapshot?.document,
|
||||
hasSession: !!snapshot?.session
|
||||
});
|
||||
|
||||
// Debug: Log the schema sequences in the snapshot being saved
|
||||
if (snapshot?.document?.schema?.sequences) {
|
||||
logger.debug('snapshot-service', '🔍 Schema sequences being saved:', snapshot.document.schema.sequences);
|
||||
const customSequences = Object.keys(snapshot.document.schema.sequences).filter(key => key.includes('cc-'));
|
||||
logger.debug('snapshot-service', '🔍 Custom shape sequences being saved:', customSequences);
|
||||
}
|
||||
|
||||
const response = await axios.post(
|
||||
'/database/tldraw_supabase/set_tldraw_node_file',
|
||||
snapshot,
|
||||
{
|
||||
params: {
|
||||
path: this.replaceBackslashes(nodePath),
|
||||
db_name: dbName
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (response.data.status === 'success') {
|
||||
logger.debug('snapshot-service', '✅ Snapshot saved successfully');
|
||||
} else {
|
||||
throw new Error('Failed to save snapshot');
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('snapshot-service', '❌ Failed to save snapshot', {
|
||||
error: error instanceof Error ? error.message : 'Unknown error',
|
||||
logger.error('snapshot-service', '❌ Failed to save snapshot', {
|
||||
error: error instanceof Error ? error.message : 'Unknown error'
|
||||
});
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
private async saveCurrentSnapshot(nodePath: string): Promise<void> {
|
||||
if (!this.currentNodePath || this.currentNodePath !== nodePath) return;
|
||||
if (!this._accessToken) {
|
||||
logger.debug('snapshot-service', '⚠️ No access token — snapshot save skipped');
|
||||
if (!this.currentNodePath || this.currentNodePath !== nodePath) {
|
||||
logger.debug('snapshot-service', '⚠️ Skipping save - path mismatch', {
|
||||
currentPath: this.currentNodePath,
|
||||
savePath: nodePath
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.isSaving = true;
|
||||
await NavigationSnapshotService.saveNodeSnapshotToDatabase(nodePath, this._accessToken, this.store);
|
||||
logger.debug('snapshot-service', '✅ Saved navigation snapshot', { nodePath });
|
||||
const user = storageService.get(StorageKeys.USER);
|
||||
if (!user) {
|
||||
throw new Error('No user found');
|
||||
}
|
||||
|
||||
const dbName = (user as (typeof user & { user_db_name?: string })).user_db_name ?? '';
|
||||
if (!dbName) {
|
||||
logger.debug('snapshot-service', '⚠️ No db name - snapshot save skipped (Phase B will migrate to Supabase Storage)');
|
||||
return;
|
||||
}
|
||||
|
||||
logger.debug('snapshot-service', '💾 Saving snapshot', {
|
||||
nodePath,
|
||||
dbName,
|
||||
userType: user.user_type,
|
||||
username: user.username
|
||||
});
|
||||
|
||||
await NavigationSnapshotService.saveNodeSnapshotToDatabase(nodePath, dbName, this.store);
|
||||
|
||||
logger.debug('snapshot-service', '✅ Saved navigation snapshot', {
|
||||
nodePath,
|
||||
storeId: this.store.id
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error('snapshot-service', '❌ Failed to save navigation snapshot', {
|
||||
error: error instanceof Error ? error.message : 'Unknown error',
|
||||
nodePath,
|
||||
nodePath
|
||||
});
|
||||
throw error;
|
||||
} finally {
|
||||
@ -183,77 +311,141 @@ export class NavigationSnapshotService {
|
||||
}
|
||||
}
|
||||
|
||||
private async loadSnapshotForNode(node: { node_storage_path: string }): Promise<void> {
|
||||
if (!this._accessToken) {
|
||||
logger.debug('snapshot-service', '⚠️ No access token — snapshot load skipped');
|
||||
return;
|
||||
}
|
||||
private async loadSnapshotForNode(node: NavigationNode): Promise<void> {
|
||||
try {
|
||||
this.isLoading = true;
|
||||
const user = storageService.get(StorageKeys.USER);
|
||||
if (!user) {
|
||||
throw new Error('No user found');
|
||||
}
|
||||
|
||||
const dbName = (user as (typeof user & { user_db_name?: string })).user_db_name ?? '';
|
||||
if (!dbName) {
|
||||
logger.debug('snapshot-service', '⚠️ No db name - snapshot load skipped (Phase B will migrate to Supabase Storage)');
|
||||
return;
|
||||
}
|
||||
|
||||
logger.debug('snapshot-service', '📥 Loading snapshot', {
|
||||
nodePath: node.node_storage_path,
|
||||
dbName,
|
||||
userType: user.user_type,
|
||||
username: user.username
|
||||
});
|
||||
|
||||
await NavigationSnapshotService.loadNodeSnapshotFromDatabase(
|
||||
node.node_storage_path,
|
||||
this._accessToken,
|
||||
dbName,
|
||||
this.store,
|
||||
(state: LoadingState) => {
|
||||
if (state.status === 'ready') {
|
||||
this.currentNodePath = node.node_storage_path;
|
||||
logger.debug('snapshot-service', '✅ Snapshot loaded and path updated', {
|
||||
nodePath: node.node_storage_path,
|
||||
currentNodePath: this.currentNodePath
|
||||
});
|
||||
} else if (state.status === 'error') {
|
||||
logger.error('snapshot-service', '❌ Error in load callback', {
|
||||
error: state.error,
|
||||
nodePath: node.node_storage_path
|
||||
});
|
||||
}
|
||||
},
|
||||
undefined,
|
||||
this.editor || undefined
|
||||
undefined, // sharedStore
|
||||
this.editor || undefined // editor - use stored editor or fallback to store.loadSnapshot
|
||||
);
|
||||
} catch (error) {
|
||||
logger.error('snapshot-service', '❌ Failed to load navigation snapshot', {
|
||||
error: error instanceof Error ? error.message : 'Unknown error',
|
||||
nodePath: node.node_storage_path
|
||||
});
|
||||
throw error;
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async handleNavigationStart(fromNode: { node_storage_path: string } | null, toNode: { node_storage_path: string } | null): Promise<void> {
|
||||
if (!toNode) return;
|
||||
if (this.debounceTimeout) clearTimeout(this.debounceTimeout);
|
||||
async handleNavigationStart(fromNode: NavigationNode | null, toNode: NavigationNode | null): Promise<void> {
|
||||
if (!toNode) {
|
||||
logger.warn('snapshot-service', '⚠️ Cannot navigate to null node');
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear any pending debounce
|
||||
if (this.debounceTimeout) {
|
||||
clearTimeout(this.debounceTimeout);
|
||||
}
|
||||
|
||||
// Debounce the navigation operation
|
||||
return new Promise((resolve) => {
|
||||
this.debounceTimeout = setTimeout(async () => {
|
||||
try {
|
||||
await this.executeNavigation(fromNode, toNode);
|
||||
await this.executeNavigation(fromNode || EMPTY_NODE, toNode);
|
||||
resolve();
|
||||
} catch (error) {
|
||||
logger.error('snapshot-service', '❌ Navigation failed', error);
|
||||
throw error;
|
||||
}
|
||||
}, 100);
|
||||
}, 100); // 100ms debounce
|
||||
});
|
||||
}
|
||||
|
||||
private async executeNavigation(fromNode: { node_storage_path: string } | null, toNode: { node_storage_path: string }): Promise<void> {
|
||||
if (this.isSaving || this.isLoading) {
|
||||
this.pendingOperation = {
|
||||
save: fromNode?.node_storage_path,
|
||||
load: toNode.node_storage_path,
|
||||
};
|
||||
return;
|
||||
}
|
||||
private async executeNavigation(fromNode: NavigationNode, toNode: NavigationNode): Promise<void> {
|
||||
try {
|
||||
logger.debug('snapshot-service', '🔄 Starting navigation snapshot handling', {
|
||||
from: fromNode.node_storage_path,
|
||||
to: toNode.node_storage_path,
|
||||
currentPath: this.currentNodePath
|
||||
});
|
||||
|
||||
this.currentNodePath = null;
|
||||
// If we're already in a navigation operation, queue this one
|
||||
if (this.isSaving || this.isLoading) {
|
||||
this.pendingOperation = {
|
||||
save: fromNode.node_storage_path || undefined,
|
||||
load: toNode.node_storage_path
|
||||
};
|
||||
logger.debug('snapshot-service', '⏳ Queued navigation operation', this.pendingOperation);
|
||||
return;
|
||||
}
|
||||
|
||||
if (toNode.node_storage_path) {
|
||||
await this.loadSnapshotForNode(toNode);
|
||||
}
|
||||
// Clear the store before loading new snapshot
|
||||
logger.debug('snapshot-service', '🔄 Clearing store');
|
||||
this.currentNodePath = null;
|
||||
logger.debug('snapshot-service', '🧹 Cleared current node path');
|
||||
|
||||
if (this.pendingOperation) {
|
||||
const op = this.pendingOperation;
|
||||
this.pendingOperation = null;
|
||||
await this.handleNavigationStart(
|
||||
op.save ? { node_storage_path: op.save } : null,
|
||||
op.load ? { node_storage_path: op.load } : null
|
||||
);
|
||||
// Load the new node's snapshot
|
||||
if (toNode.node_storage_path) {
|
||||
await this.loadSnapshotForNode(toNode);
|
||||
logger.debug('snapshot-service', '✅ Loaded new node snapshot', {
|
||||
nodePath: toNode.node_storage_path
|
||||
});
|
||||
}
|
||||
|
||||
// Process any pending operations
|
||||
if (this.pendingOperation) {
|
||||
logger.debug('snapshot-service', '🔄 Processing pending operation', this.pendingOperation);
|
||||
const operation = this.pendingOperation;
|
||||
this.pendingOperation = null;
|
||||
await this.handleNavigationStart(
|
||||
operation.save ? { ...EMPTY_NODE, node_storage_path: operation.save } : null,
|
||||
operation.load ? { ...EMPTY_NODE, node_storage_path: operation.load } : null
|
||||
);
|
||||
logger.debug('snapshot-service', '✅ Completed pending operation');
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('snapshot-service', '❌ Error during navigation snapshot handling', {
|
||||
error: error instanceof Error ? error.message : 'Unknown error',
|
||||
fromPath: fromNode.node_storage_path,
|
||||
toPath: toNode.node_storage_path
|
||||
});
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
setAutoSave(enabled: boolean): void {
|
||||
this.isAutoSaveEnabled = enabled;
|
||||
}
|
||||
|
||||
setCurrentNodePath(path: string): void {
|
||||
this.currentNodePath = path;
|
||||
logger.debug('snapshot-service', '🔄 Auto-save setting changed', {
|
||||
enabled
|
||||
});
|
||||
}
|
||||
|
||||
getCurrentNodePath(): string | null {
|
||||
@ -263,11 +455,14 @@ export class NavigationSnapshotService {
|
||||
async forceSaveCurrentNode(): Promise<void> {
|
||||
if (this.currentNodePath) {
|
||||
await this.saveCurrentSnapshot(this.currentNodePath);
|
||||
} else {
|
||||
logger.warn('snapshot-service', '⚠️ Cannot save - no current node path set');
|
||||
}
|
||||
}
|
||||
|
||||
clearCurrentNode(): void {
|
||||
this.currentNodePath = null;
|
||||
this.store.clear();
|
||||
logger.debug('snapshot-service', '🧹 Cleared current node and store');
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,45 +1,32 @@
|
||||
import { create } from 'zustand';
|
||||
import { UserNeoDBService } from '../services/graph/userNeoDBService';
|
||||
import { logger } from '../debugConfig';
|
||||
import { isValidNodeType } from '../utils/tldraw/cc-base/cc-graph/cc-graph-types';
|
||||
import {
|
||||
NavigationStore,
|
||||
import {
|
||||
NavigationStore,
|
||||
NavigationNode,
|
||||
NeoGraphNode,
|
||||
MainContext,
|
||||
BaseContext,
|
||||
NavigationContextState,
|
||||
isProfileContext,
|
||||
isInstituteContext,
|
||||
getContextDatabase,
|
||||
addToHistory,
|
||||
navigateHistory,
|
||||
getCurrentHistoryNode,
|
||||
ExtendedContext,
|
||||
UnifiedContextSwitch,
|
||||
NodeContext
|
||||
} from '../types/navigation';
|
||||
|
||||
interface WhiteboardRoom {
|
||||
id: string;
|
||||
user_id: string;
|
||||
name: string;
|
||||
context_type: string;
|
||||
is_default: boolean;
|
||||
storage_path: string | null;
|
||||
neo4j_node_id: string | null;
|
||||
neo4j_db_name: string | null;
|
||||
node_type: string | null;
|
||||
}
|
||||
|
||||
interface NavigationStoreWithAuth extends NavigationStore {
|
||||
_accessToken: string | null;
|
||||
_userId: string | null;
|
||||
setAuthInfo: (token: string | null, userId: string | null) => void;
|
||||
}
|
||||
|
||||
const initialState: NavigationContextState = {
|
||||
main: 'profile',
|
||||
base: 'profile',
|
||||
node: null,
|
||||
history: { nodes: [], currentIndex: -1 }
|
||||
history: {
|
||||
nodes: [],
|
||||
currentIndex: -1
|
||||
}
|
||||
};
|
||||
|
||||
function getDefaultBaseForMain(main: MainContext): BaseContext {
|
||||
@ -51,288 +38,402 @@ function validateContextTransition(
|
||||
updates: Partial<NavigationContextState>
|
||||
): NavigationContextState {
|
||||
const newState = { ...current, ...updates };
|
||||
|
||||
// Validate main context
|
||||
if (updates.main) {
|
||||
newState.base = getDefaultBaseForMain(updates.main);
|
||||
}
|
||||
|
||||
// Validate base context
|
||||
if (updates.base) {
|
||||
const isValid = newState.main === 'profile'
|
||||
// Ensure base context matches main context
|
||||
const isValid = newState.main === 'profile'
|
||||
? isProfileContext(updates.base)
|
||||
: isInstituteContext(updates.base);
|
||||
|
||||
if (!isValid) {
|
||||
newState.base = getDefaultBaseForMain(newState.main);
|
||||
}
|
||||
}
|
||||
|
||||
return newState;
|
||||
}
|
||||
|
||||
export const useNavigationStore = create<NavigationStoreWithAuth>((set, get) => {
|
||||
const pgFetch = async <T = unknown>(
|
||||
method: 'GET' | 'POST' | 'PATCH' | 'DELETE',
|
||||
table: string,
|
||||
options: { body?: object; query?: string; prefer?: string; single?: boolean } = {}
|
||||
): Promise<T | null> => {
|
||||
const token = get()._accessToken;
|
||||
if (!token) throw new Error('pgFetch: no access token');
|
||||
const url = `${import.meta.env.VITE_SUPABASE_URL}/rest/v1/${table}${options.query ? `?${options.query}` : ''}`;
|
||||
const headers: Record<string, string> = {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'apikey': import.meta.env.VITE_SUPABASE_ANON_KEY,
|
||||
'Content-Type': 'application/json',
|
||||
export interface NavigationActions {
|
||||
// Context Navigation
|
||||
setMainContext: (context: MainContext, userDbName: string | null, workerDbName: string | null) => Promise<void>;
|
||||
setBaseContext: (context: BaseContext, userDbName: string | null, workerDbName: string | null) => Promise<void>;
|
||||
setExtendedContext: (context: ExtendedContext, userDbName: string | null, workerDbName: string | null) => Promise<void>;
|
||||
|
||||
// Node Navigation
|
||||
navigate: (nodeId: string, dbName: string) => Promise<void>;
|
||||
navigateToNode: (node: NavigationNode, userDbName: string | null, workerDbName: string | null) => Promise<void>;
|
||||
|
||||
// History Navigation
|
||||
goBack: () => void;
|
||||
goForward: () => void;
|
||||
|
||||
// Utility Methods
|
||||
refreshNavigationState: (userDbName: string | null, workerDbName: string | null) => Promise<void>;
|
||||
}
|
||||
|
||||
export interface NavigationState {
|
||||
context: {
|
||||
main: NodeContext;
|
||||
base: NodeContext;
|
||||
extended?: string;
|
||||
node: NavigationNode;
|
||||
history: {
|
||||
nodes: NavigationNode[];
|
||||
currentIndex: number;
|
||||
};
|
||||
if (options.prefer) headers['Prefer'] = options.prefer;
|
||||
if (options.single) headers['Accept'] = 'application/vnd.pgrst.object+json';
|
||||
const res = await fetch(url, {
|
||||
method,
|
||||
headers,
|
||||
...(options.body ? { body: JSON.stringify(options.body) } : {}),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = await res.text();
|
||||
throw new Error(`PostgREST ${res.status}: ${err}`);
|
||||
}
|
||||
if (res.status === 204) return null;
|
||||
return res.json() as Promise<T>;
|
||||
};
|
||||
// ... rest of the state interface ...
|
||||
}
|
||||
|
||||
const getOrCreateDefaultRoom = async (contextType: string): Promise<NavigationNode> => {
|
||||
const userId = get()._userId;
|
||||
if (!userId) throw new Error('getOrCreateDefaultRoom: no user ID');
|
||||
export const useNavigationStore = create<NavigationStore>((set, get) => ({
|
||||
context: initialState,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
|
||||
const rooms = await pgFetch<WhiteboardRoom[]>('GET', 'whiteboard_rooms', {
|
||||
query: `user_id=eq.${userId}&context_type=eq.${contextType}&is_default=eq.true`,
|
||||
});
|
||||
switchContext: async (contextSwitch: UnifiedContextSwitch, userDbName: string | null, workerDbName: string | null) => {
|
||||
try {
|
||||
// Check if we have the necessary database connections
|
||||
if (contextSwitch.main === 'profile' && !userDbName) {
|
||||
logger.error('navigation-context', '❌ User database connection not initialized');
|
||||
set({
|
||||
error: 'User database connection not initialized',
|
||||
isLoading: false
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (contextSwitch.main === 'institute' && !workerDbName) {
|
||||
logger.error('navigation-context', '❌ Worker database connection not initialized');
|
||||
set({
|
||||
error: 'Worker database connection not initialized',
|
||||
isLoading: false
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (rooms && rooms.length > 0) {
|
||||
const room = rooms[0];
|
||||
return {
|
||||
id: room.id,
|
||||
node_storage_path: room.storage_path || `${userId}/workspaces/${contextType}_default.json`,
|
||||
label: room.name,
|
||||
type: 'workspace',
|
||||
logger.debug('navigation-context', '🔄 Starting context switch', {
|
||||
from: {
|
||||
main: get().context.main,
|
||||
base: get().context.base,
|
||||
extended: contextSwitch.extended,
|
||||
nodeId: get().context.node?.id
|
||||
},
|
||||
to: {
|
||||
main: contextSwitch.main,
|
||||
base: contextSwitch.base,
|
||||
extended: contextSwitch.extended
|
||||
},
|
||||
skipBaseContextLoad: contextSwitch.skipBaseContextLoad
|
||||
});
|
||||
|
||||
set({ isLoading: true, error: null });
|
||||
|
||||
const currentState = get().context;
|
||||
|
||||
// Clear node state immediately
|
||||
const clearedState: NavigationContextState = {
|
||||
...currentState,
|
||||
node: null
|
||||
};
|
||||
set({
|
||||
context: clearedState,
|
||||
isLoading: true
|
||||
});
|
||||
|
||||
let newState: NavigationContextState = {
|
||||
...currentState,
|
||||
node: null
|
||||
};
|
||||
|
||||
// Update main context if provided
|
||||
if (contextSwitch.main) {
|
||||
newState = validateContextTransition(newState, { main: contextSwitch.main });
|
||||
if (!contextSwitch.skipBaseContextLoad) {
|
||||
newState.base = getDefaultBaseForMain(contextSwitch.main);
|
||||
}
|
||||
logger.debug('navigation-state', '✅ Main context updated', {
|
||||
previous: currentState.main,
|
||||
new: newState.main,
|
||||
defaultBase: newState.base
|
||||
});
|
||||
}
|
||||
|
||||
// Update base context if provided
|
||||
if (contextSwitch.base) {
|
||||
newState = validateContextTransition(newState, { base: contextSwitch.base });
|
||||
logger.debug('navigation-state', '✅ Base context updated', {
|
||||
previous: currentState.base,
|
||||
new: newState.base
|
||||
});
|
||||
}
|
||||
|
||||
logger.debug('navigation-state', '✅ Context validation complete', {
|
||||
validatedState: newState,
|
||||
originalState: currentState
|
||||
});
|
||||
|
||||
// Determine which context to use for the node
|
||||
const targetContext = contextSwitch.base ||
|
||||
contextSwitch.extended ||
|
||||
(contextSwitch.main ? getDefaultBaseForMain(contextSwitch.main) :
|
||||
newState.base);
|
||||
|
||||
// Get database name
|
||||
const dbName = getContextDatabase(newState, userDbName, workerDbName);
|
||||
|
||||
logger.debug('context-switch', '🔍 Fetching default node for context', {
|
||||
targetContext,
|
||||
dbName,
|
||||
currentState: newState
|
||||
});
|
||||
|
||||
// Get default node for the final context
|
||||
const defaultNode = await UserNeoDBService.getDefaultNode(targetContext, dbName);
|
||||
|
||||
if (!defaultNode) {
|
||||
const errorMsg = `No default node found for context: ${targetContext}`;
|
||||
logger.error('context-switch', '❌ Default node fetch failed', { targetContext });
|
||||
set({
|
||||
error: errorMsg,
|
||||
isLoading: false
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
logger.debug('context-switch', '✨ Default node fetched', {
|
||||
nodeId: defaultNode.id,
|
||||
node_storage_path: defaultNode.node_storage_path,
|
||||
type: defaultNode.type
|
||||
});
|
||||
|
||||
// Update history and state
|
||||
const newHistory = addToHistory(currentState.history, defaultNode);
|
||||
logger.debug('history-management', '📚 History updated', {
|
||||
previousState: currentState.history,
|
||||
newState: newHistory,
|
||||
addedNode: defaultNode
|
||||
});
|
||||
|
||||
set({
|
||||
context: {
|
||||
...newState,
|
||||
node: defaultNode,
|
||||
history: newHistory
|
||||
},
|
||||
isLoading: false,
|
||||
error: null
|
||||
});
|
||||
|
||||
logger.debug('navigation-context', '✅ Context switch completed', {
|
||||
finalState: {
|
||||
main: newState.main,
|
||||
base: newState.base,
|
||||
nodeId: defaultNode.id
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error('navigation-context', '❌ Failed to switch context:', error);
|
||||
set({
|
||||
error: error instanceof Error ? error.message : 'Failed to switch context',
|
||||
isLoading: false
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
const storagePath = `${userId}/workspaces/${contextType}_default.json`;
|
||||
const room = await pgFetch<WhiteboardRoom>('POST', 'whiteboard_rooms', {
|
||||
body: {
|
||||
user_id: userId,
|
||||
name: `${contextType.charAt(0).toUpperCase() + contextType.slice(1)} Workspace`,
|
||||
context_type: contextType,
|
||||
is_default: true,
|
||||
storage_path: storagePath,
|
||||
},
|
||||
prefer: 'return=representation',
|
||||
single: true,
|
||||
});
|
||||
|
||||
if (!room) throw new Error('Failed to create default whiteboard room');
|
||||
logger.debug('navigation-context', '✅ Created default whiteboard room', { contextType, roomId: room.id });
|
||||
|
||||
return {
|
||||
id: room.id,
|
||||
node_storage_path: room.storage_path || storagePath,
|
||||
label: room.name,
|
||||
type: 'workspace',
|
||||
};
|
||||
};
|
||||
|
||||
return {
|
||||
_accessToken: null,
|
||||
_userId: null,
|
||||
setAuthInfo: (token: string | null, userId: string | null) => {
|
||||
set({ _accessToken: token, _userId: userId });
|
||||
},
|
||||
|
||||
context: initialState,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
|
||||
switchContext: async (contextSwitch: UnifiedContextSwitch, _userDbName: string | null = null, _workerDbName: string | null = null) => {
|
||||
if (!get()._accessToken || !get()._userId) {
|
||||
logger.warn('navigation-context', '⚠️ switchContext called without auth — skipping');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
set({ isLoading: true, error: null });
|
||||
const currentState = get().context;
|
||||
let newState: NavigationContextState = { ...currentState, node: null };
|
||||
|
||||
if (contextSwitch.main) {
|
||||
newState = validateContextTransition(newState, { main: contextSwitch.main });
|
||||
if (!contextSwitch.skipBaseContextLoad) {
|
||||
newState.base = getDefaultBaseForMain(contextSwitch.main);
|
||||
}
|
||||
goBack: () => {
|
||||
const currentState = get().context;
|
||||
if (currentState.history.currentIndex > 0) {
|
||||
const newHistory = navigateHistory(currentState.history, currentState.history.currentIndex - 1);
|
||||
const node = getCurrentHistoryNode(newHistory);
|
||||
set({
|
||||
context: {
|
||||
...currentState,
|
||||
node,
|
||||
history: newHistory
|
||||
}
|
||||
if (contextSwitch.base) {
|
||||
newState = validateContextTransition(newState, { base: contextSwitch.base });
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
goForward: () => {
|
||||
const currentState = get().context;
|
||||
if (currentState.history.currentIndex < currentState.history.nodes.length - 1) {
|
||||
const newHistory = navigateHistory(currentState.history, currentState.history.currentIndex + 1);
|
||||
const node = getCurrentHistoryNode(newHistory);
|
||||
set({
|
||||
context: {
|
||||
...currentState,
|
||||
node,
|
||||
history: newHistory
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
const targetContext = contextSwitch.base ||
|
||||
contextSwitch.extended ||
|
||||
(contextSwitch.main ? getDefaultBaseForMain(contextSwitch.main) : newState.base);
|
||||
|
||||
const defaultNode = await getOrCreateDefaultRoom(targetContext);
|
||||
const newHistory = addToHistory(currentState.history, defaultNode);
|
||||
|
||||
set({
|
||||
context: { ...newState, node: defaultNode, history: newHistory },
|
||||
isLoading: false,
|
||||
error: null,
|
||||
});
|
||||
logger.debug('navigation-context', '✅ Context switch complete', {
|
||||
main: newState.main, base: newState.base, nodeId: defaultNode.id,
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error('navigation-context', '❌ switchContext failed', error);
|
||||
set({ error: error instanceof Error ? error.message : 'Failed to switch context', isLoading: false });
|
||||
}
|
||||
},
|
||||
|
||||
goBack: () => {
|
||||
const currentState = get().context;
|
||||
if (currentState.history.currentIndex > 0) {
|
||||
const newHistory = navigateHistory(currentState.history, currentState.history.currentIndex - 1);
|
||||
set({ context: { ...currentState, node: getCurrentHistoryNode(newHistory), history: newHistory } });
|
||||
}
|
||||
},
|
||||
|
||||
goForward: () => {
|
||||
const currentState = get().context;
|
||||
if (currentState.history.currentIndex < currentState.history.nodes.length - 1) {
|
||||
const newHistory = navigateHistory(currentState.history, currentState.history.currentIndex + 1);
|
||||
set({ context: { ...currentState, node: getCurrentHistoryNode(newHistory), history: newHistory } });
|
||||
}
|
||||
},
|
||||
|
||||
setMainContext: async (main: MainContext, userDbName: string | null, workerDbName: string | null) => {
|
||||
setMainContext: async (main: MainContext, userDbName: string | null, workerDbName: string | null) => {
|
||||
try {
|
||||
// Use switchContext instead of direct implementation
|
||||
await get().switchContext({ main }, userDbName, workerDbName);
|
||||
},
|
||||
} catch (error) {
|
||||
logger.error('navigation', '❌ Failed to set main context:', error);
|
||||
set({
|
||||
error: error instanceof Error ? error.message : 'Failed to set main context',
|
||||
isLoading: false
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
setBaseContext: async (base: BaseContext, userDbName: string | null, workerDbName: string | null) => {
|
||||
setBaseContext: async (base: BaseContext, userDbName: string | null, workerDbName: string | null) => {
|
||||
try {
|
||||
// Use switchContext instead of direct implementation
|
||||
await get().switchContext({ base }, userDbName, workerDbName);
|
||||
},
|
||||
} catch (error) {
|
||||
logger.error('navigation', '❌ Failed to set base context:', error);
|
||||
set({
|
||||
error: error instanceof Error ? error.message : 'Failed to set base context',
|
||||
isLoading: false
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
setExtendedContext: async (extended: ExtendedContext, userDbName: string | null, workerDbName: string | null) => {
|
||||
setExtendedContext: async (extended: ExtendedContext, userDbName: string | null, workerDbName: string | null) => {
|
||||
try {
|
||||
// Use switchContext instead of direct implementation
|
||||
await get().switchContext({ extended }, userDbName, workerDbName);
|
||||
},
|
||||
} catch (error) {
|
||||
logger.error('navigation', '❌ Failed to set extended context:', error);
|
||||
set({
|
||||
error: error instanceof Error ? error.message : 'Failed to set extended context',
|
||||
isLoading: false
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
navigate: async (nodeId: string, _dbName: string) => {
|
||||
try {
|
||||
set({ isLoading: true, error: null });
|
||||
if (!get()._accessToken) { set({ isLoading: false }); return; }
|
||||
|
||||
const currentState = get().context;
|
||||
const existingIndex = currentState.history.nodes.findIndex(n => n.id === nodeId);
|
||||
if (existingIndex !== -1) {
|
||||
const newHistory = navigateHistory(currentState.history, existingIndex);
|
||||
set({ context: { ...currentState, node: getCurrentHistoryNode(newHistory), history: newHistory }, isLoading: false });
|
||||
return;
|
||||
}
|
||||
|
||||
const rooms = await pgFetch<WhiteboardRoom[]>('GET', 'whiteboard_rooms', {
|
||||
query: `id=eq.${nodeId}&user_id=eq.${get()._userId}`,
|
||||
navigate: async (nodeId: string, dbName: string) => {
|
||||
try {
|
||||
set({ isLoading: true, error: null });
|
||||
|
||||
// Check if we already have this node in history
|
||||
const currentState = get().context;
|
||||
const existingNodeIndex = currentState.history.nodes.findIndex(n => n.id === nodeId);
|
||||
|
||||
// If node exists in history, just navigate to it
|
||||
if (existingNodeIndex !== -1) {
|
||||
logger.debug('navigation', '📍 Navigating to existing node in history', {
|
||||
nodeId,
|
||||
historyIndex: existingNodeIndex,
|
||||
currentIndex: currentState.history.currentIndex
|
||||
});
|
||||
|
||||
const newHistory = navigateHistory(currentState.history, existingNodeIndex);
|
||||
const node = getCurrentHistoryNode(newHistory);
|
||||
|
||||
set({
|
||||
context: {
|
||||
...currentState,
|
||||
node,
|
||||
history: newHistory
|
||||
},
|
||||
isLoading: false,
|
||||
error: null
|
||||
});
|
||||
if (!rooms || rooms.length === 0) throw new Error(`Whiteboard room not found: ${nodeId}`);
|
||||
|
||||
const room = rooms[0];
|
||||
const node: NavigationNode = {
|
||||
id: room.id,
|
||||
node_storage_path: room.storage_path || `${get()._userId}/workspaces/${room.context_type}_default.json`,
|
||||
label: room.name,
|
||||
type: 'workspace',
|
||||
};
|
||||
const newHistory = addToHistory(currentState.history, node);
|
||||
set({ context: { ...currentState, node, history: newHistory }, isLoading: false });
|
||||
} catch (error) {
|
||||
logger.error('navigation', '❌ navigate failed', error);
|
||||
set({ error: error instanceof Error ? error.message : 'Failed to navigate', isLoading: false });
|
||||
}
|
||||
},
|
||||
|
||||
navigateToNode: async (node: NavigationNode, userDbName: string | null, workerDbName: string | null) => {
|
||||
if (!isValidNodeType(node.type)) {
|
||||
logger.warn('navigation', `⚠️ navigateToNode called with non-graph type: ${node.type} — navigating anyway`);
|
||||
}
|
||||
await get().navigate(node.id, userDbName || '');
|
||||
},
|
||||
|
||||
refreshNavigationState: async (_userDbName: string | null, _workerDbName: string | null) => {
|
||||
try {
|
||||
set({ isLoading: true, error: null });
|
||||
const currentNode = get().context.node;
|
||||
if (currentNode && get()._accessToken) {
|
||||
const rooms = await pgFetch<WhiteboardRoom[]>('GET', 'whiteboard_rooms', {
|
||||
query: `id=eq.${currentNode.id}`,
|
||||
});
|
||||
if (rooms && rooms.length > 0) {
|
||||
const room = rooms[0];
|
||||
set({
|
||||
context: {
|
||||
...get().context,
|
||||
node: {
|
||||
id: room.id,
|
||||
node_storage_path: room.storage_path || currentNode.node_storage_path,
|
||||
label: room.name,
|
||||
type: 'workspace',
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
set({ isLoading: false });
|
||||
} catch (error) {
|
||||
logger.error('navigation', '❌ refreshNavigationState failed', error);
|
||||
set({ error: error instanceof Error ? error.message : 'Failed to refresh', isLoading: false });
|
||||
}
|
||||
},
|
||||
|
||||
navigateToNeoNode: async (neoNode: NeoGraphNode) => {
|
||||
const userId = get()._userId;
|
||||
if (!userId || !get()._accessToken) {
|
||||
logger.warn('navigation', '⚠️ navigateToNeoNode called without auth');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
set({ isLoading: true, error: null });
|
||||
const existing = await pgFetch<WhiteboardRoom[]>('GET', 'whiteboard_rooms', {
|
||||
query: `user_id=eq.${userId}&neo4j_node_id=eq.${neoNode.neo4j_node_id}`,
|
||||
});
|
||||
let room: WhiteboardRoom;
|
||||
if (existing && existing.length > 0) {
|
||||
room = existing[0];
|
||||
} else {
|
||||
const storagePath = `${userId}/nodes/${neoNode.neo4j_node_id}.json`;
|
||||
const created = await pgFetch<WhiteboardRoom>('POST', 'whiteboard_rooms', {
|
||||
body: {
|
||||
user_id: userId,
|
||||
name: neoNode.label,
|
||||
context_type: neoNode.node_type.toLowerCase(),
|
||||
is_default: false,
|
||||
storage_path: storagePath,
|
||||
neo4j_node_id: neoNode.neo4j_node_id,
|
||||
neo4j_db_name: neoNode.neo4j_db_name,
|
||||
node_type: neoNode.node_type,
|
||||
},
|
||||
prefer: 'return=representation',
|
||||
single: true,
|
||||
});
|
||||
if (!created) throw new Error('Failed to create whiteboard room for node');
|
||||
room = created;
|
||||
}
|
||||
const node: NavigationNode = {
|
||||
id: room.id,
|
||||
node_storage_path: room.storage_path || `${userId}/nodes/${neoNode.neo4j_node_id}.json`,
|
||||
label: room.name,
|
||||
type: neoNode.node_type,
|
||||
};
|
||||
const currentState = get().context;
|
||||
const newHistory = addToHistory(currentState.history, node);
|
||||
set({ context: { ...currentState, node, history: newHistory }, isLoading: false, error: null });
|
||||
logger.debug('navigation', '✅ Navigated to Neo4j node', { neoNode });
|
||||
} catch (error) {
|
||||
logger.error('navigation', '❌ navigateToNeoNode failed', error);
|
||||
set({ error: error instanceof Error ? error.message : 'Navigation failed', isLoading: false });
|
||||
|
||||
// Fetch new node data
|
||||
const nodeData = await UserNeoDBService.fetchNodeData(nodeId, dbName);
|
||||
if (!nodeData) {
|
||||
throw new Error(`Node not found: ${nodeId}`);
|
||||
}
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
const node: NavigationNode = {
|
||||
id: nodeId,
|
||||
node_storage_path: nodeData.node_data.node_storage_path || '',
|
||||
label: nodeData.node_data.title || nodeData.node_data.user_name || nodeId,
|
||||
type: nodeData.node_type
|
||||
};
|
||||
|
||||
logger.debug('navigation', '📍 Adding new node to history', {
|
||||
nodeId: node.id,
|
||||
type: node.type,
|
||||
node_storage_path: node.node_storage_path
|
||||
});
|
||||
|
||||
// Add to history and update state
|
||||
const newHistory = addToHistory(currentState.history, node);
|
||||
set({
|
||||
context: {
|
||||
...currentState,
|
||||
node,
|
||||
history: newHistory
|
||||
},
|
||||
isLoading: false,
|
||||
error: null
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error('navigation', '❌ Failed to navigate:', error);
|
||||
set({
|
||||
error: error instanceof Error ? error.message : 'Failed to navigate',
|
||||
isLoading: false
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
navigateToNode: async (node: NavigationNode, userDbName: string | null, workerDbName: string | null) => {
|
||||
try {
|
||||
set({ isLoading: true, error: null });
|
||||
|
||||
if (!isValidNodeType(node.type)) {
|
||||
throw new Error(`Invalid node type: ${node.type}`);
|
||||
}
|
||||
|
||||
const dbName = getContextDatabase(get().context, userDbName, workerDbName);
|
||||
await get().navigate(node.id, dbName);
|
||||
} catch (error) {
|
||||
logger.error('navigation', '❌ Failed to navigate to node:', error);
|
||||
set({
|
||||
error: error instanceof Error ? error.message : 'Failed to navigate to node',
|
||||
isLoading: false
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
refreshNavigationState: async (userDbName: string | null, workerDbName: string | null) => {
|
||||
try {
|
||||
set({ isLoading: true, error: null });
|
||||
const currentState = get().context;
|
||||
|
||||
if (currentState.node) {
|
||||
const dbName = getContextDatabase(currentState, userDbName, workerDbName);
|
||||
const nodeData = await UserNeoDBService.fetchNodeData(currentState.node.id, dbName);
|
||||
if (nodeData) {
|
||||
const node: NavigationNode = {
|
||||
id: currentState.node.id,
|
||||
node_storage_path: nodeData.node_data.node_storage_path || '',
|
||||
label: nodeData.node_data.title || nodeData.node_data.user_name || currentState.node.id,
|
||||
type: nodeData.node_type
|
||||
};
|
||||
set({
|
||||
context: {
|
||||
...currentState,
|
||||
node
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
set({ isLoading: false });
|
||||
} catch (error) {
|
||||
logger.error('navigation', '❌ Failed to refresh navigation state:', error);
|
||||
set({
|
||||
error: error instanceof Error ? error.message : 'Failed to refresh navigation state',
|
||||
isLoading: false
|
||||
});
|
||||
}
|
||||
}
|
||||
}));
|
||||
File diff suppressed because it is too large
Load Diff
@ -227,13 +227,6 @@ export interface UnifiedContextSwitch {
|
||||
}
|
||||
|
||||
// Navigation Actions Interface
|
||||
export interface NeoGraphNode {
|
||||
neo4j_node_id: string;
|
||||
neo4j_db_name: string;
|
||||
node_type: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export interface NavigationActions {
|
||||
// Unified Context Switch
|
||||
switchContext: (contextSwitch: UnifiedContextSwitch, userDbName: string | null, workerDbName: string | null) => Promise<void>;
|
||||
@ -246,7 +239,6 @@ export interface NavigationActions {
|
||||
// Node Navigation
|
||||
navigate: (nodeId: string, dbName: string) => Promise<void>;
|
||||
navigateToNode: (node: NavigationNode, userDbName: string | null, workerDbName: string | null) => Promise<void>;
|
||||
navigateToNeoNode: (neoNode: NeoGraphNode) => Promise<void>;
|
||||
|
||||
// History Navigation
|
||||
goBack: () => void;
|
||||
|
||||
@ -7,14 +7,6 @@ export interface TranscriptionConfig {
|
||||
useVad?: boolean;
|
||||
}
|
||||
|
||||
export interface ServerSegment {
|
||||
text: string;
|
||||
start: number;
|
||||
end: number;
|
||||
}
|
||||
|
||||
type ServerSegmentsCallback = (segments: ServerSegment[], isLastLive: boolean) => void;
|
||||
|
||||
export class TranscriptionService {
|
||||
private socket: WebSocket | null = null;
|
||||
private stream: MediaStream | null = null;
|
||||
@ -22,29 +14,27 @@ export class TranscriptionService {
|
||||
private mediaStreamSource: MediaStreamAudioSourceNode | null = null;
|
||||
private workletNode: AudioWorkletNode | null = null;
|
||||
private selectedDeviceId: string = '';
|
||||
private intentionalStop: boolean = false;
|
||||
private onServerSegments: ServerSegmentsCallback | null = null;
|
||||
private onDisconnect: (() => void) | null = null;
|
||||
private finalizedSegmentCount: number = 0;
|
||||
private onTranscriptionUpdate: ((text: string, isFinal: boolean, metadata: { start: number, end: number }) => void) | null = null;
|
||||
|
||||
constructor(deviceId: string = '') {
|
||||
this.selectedDeviceId = deviceId;
|
||||
}
|
||||
|
||||
setServerSegmentsCallback(callback: ServerSegmentsCallback) {
|
||||
this.onServerSegments = callback;
|
||||
}
|
||||
|
||||
setDisconnectCallback(callback: () => void) {
|
||||
this.onDisconnect = callback;
|
||||
setTranscriptionCallback(callback: (text: string, isFinal: boolean, metadata: { start: number, end: number }) => void) {
|
||||
this.onTranscriptionUpdate = callback;
|
||||
}
|
||||
|
||||
async startTranscription(config: TranscriptionConfig = {}) {
|
||||
console.log('🎙️ Starting transcription service...');
|
||||
this.intentionalStop = false;
|
||||
|
||||
try {
|
||||
logger.info('transcription-service', '🔊 Requesting microphone access...');
|
||||
|
||||
// Call getUserMedia directly — this triggers the browser permission prompt.
|
||||
// The old code called enumerateDevices() first to find a device ID, but
|
||||
// without microphone permission deviceId is always (empty string, falsy),
|
||||
// causing an early return that never prompted the user for permission.
|
||||
const audioConstraints: MediaTrackConstraints = this.selectedDeviceId
|
||||
? { deviceId: { exact: this.selectedDeviceId } }
|
||||
: { echoCancellation: true, noiseSuppression: true };
|
||||
@ -70,13 +60,13 @@ export class TranscriptionService {
|
||||
clearTimeout(connectionTimeout);
|
||||
logger.info('transcription-service', '✅ WebSocket connected');
|
||||
|
||||
// Send initial configuration — audio capture starts only after SERVER_READY.
|
||||
ws.send(JSON.stringify({
|
||||
uid: uuid,
|
||||
language: config.language || 'en',
|
||||
task: config.task || 'transcribe',
|
||||
model: config.modelSize || 'large-v3',
|
||||
model: config.modelSize || 'base',
|
||||
use_vad: config.useVad ?? true,
|
||||
max_connection_time: 7200, // server default is 600 s — set to 2 h
|
||||
}));
|
||||
};
|
||||
|
||||
@ -86,18 +76,17 @@ export class TranscriptionService {
|
||||
|
||||
ws.onclose = () => {
|
||||
logger.info('transcription-service', '🔌 WebSocket closed');
|
||||
const wasIntentional = this.intentionalStop;
|
||||
this.cleanup();
|
||||
if (!wasIntentional && this.onDisconnect) {
|
||||
this.onDisconnect();
|
||||
}
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
const data = JSON.parse(event.data);
|
||||
if (data.uid !== uuid) return;
|
||||
if (data.uid !== uuid) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.message === 'SERVER_READY') {
|
||||
// Server is ready — now safe to start streaming audio.
|
||||
logger.info('transcription-service', '🟢 Server ready, starting audio capture');
|
||||
this.setupAudioProcessing();
|
||||
return;
|
||||
@ -105,29 +94,37 @@ export class TranscriptionService {
|
||||
|
||||
if (data.status === 'WAIT') {
|
||||
logger.info('transcription-service', `⏳ Wait time: ${Math.round(data.message)} minutes`);
|
||||
this.intentionalStop = true;
|
||||
this.cleanup();
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.message === 'DISCONNECT') {
|
||||
logger.info('transcription-service', '🔕 Server requested disconnection');
|
||||
this.intentionalStop = true;
|
||||
this.cleanup();
|
||||
return;
|
||||
}
|
||||
|
||||
// Pass the full segment window directly to the store — the store owns
|
||||
// all boundary and archival decisions, matching the WhisperLive reference
|
||||
// frontend which simply re-renders the server's authoritative segment list.
|
||||
if (this.onServerSegments && data.segments && data.segments.length > 0) {
|
||||
const segs: ServerSegment[] = data.segments.map((s: any) => ({
|
||||
text: String(s.text ?? ''),
|
||||
start: parseFloat(s.start ?? 0),
|
||||
end: parseFloat(s.end ?? 0),
|
||||
}));
|
||||
const isLastLive = !(data.segments[data.segments.length - 1]?.completed);
|
||||
this.onServerSegments(segs, isLastLive);
|
||||
if (this.onTranscriptionUpdate && data.segments && data.segments.length > 0) {
|
||||
const segments = data.segments;
|
||||
const lastIdx = segments.length - 1;
|
||||
|
||||
// Only emit segments we have not finalized yet — avoids re-processing the
|
||||
// full array on every message (which caused the stuck last segment bug).
|
||||
for (let i = this.finalizedSegmentCount; i < lastIdx; i++) {
|
||||
const seg = segments[i];
|
||||
this.onTranscriptionUpdate(seg.text, true, {
|
||||
start: parseFloat(seg.start),
|
||||
end: parseFloat(seg.end),
|
||||
});
|
||||
this.finalizedSegmentCount = i + 1;
|
||||
}
|
||||
|
||||
// Always update the live (last) segment
|
||||
const lastSeg = segments[lastIdx];
|
||||
this.onTranscriptionUpdate(lastSeg.text, lastSeg.completed ?? false, {
|
||||
start: parseFloat(lastSeg.start),
|
||||
end: parseFloat(lastSeg.end),
|
||||
});
|
||||
}
|
||||
};
|
||||
} catch (error) {
|
||||
@ -137,18 +134,26 @@ export class TranscriptionService {
|
||||
}
|
||||
|
||||
private async setupAudioProcessing() {
|
||||
if (!this.stream || !this.socket) return;
|
||||
if (!this.stream || !this.socket) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Request 16 kHz from the browser — it resamples natively so we send
|
||||
// the correct rate to the server without any JS resampling overhead.
|
||||
this.audioContext = new AudioContext({ sampleRate: 16000 });
|
||||
|
||||
await this.audioContext.audioWorklet.addModule('/audioWorklet.js');
|
||||
|
||||
this.mediaStreamSource = this.audioContext.createMediaStreamSource(this.stream);
|
||||
this.workletNode = new AudioWorkletNode(this.audioContext, 'audio-processor');
|
||||
|
||||
// The worklet accumulates 4096 samples (256 ms at 16 kHz) before posting,
|
||||
// matching the reference frontend chunk size and eliminating the tiny-frame
|
||||
// flood that was overwhelming the server during silence.
|
||||
this.workletNode.port.onmessage = (event) => {
|
||||
if (this.socket?.readyState === WebSocket.OPEN) {
|
||||
this.socket.send(event.data);
|
||||
this.socket.send(event.data); // event.data is a transferred ArrayBuffer
|
||||
}
|
||||
};
|
||||
|
||||
@ -160,7 +165,7 @@ export class TranscriptionService {
|
||||
}
|
||||
|
||||
stopTranscription() {
|
||||
this.intentionalStop = true;
|
||||
// Signal the server cleanly so it can finalise the last segment.
|
||||
if (this.socket?.readyState === WebSocket.OPEN) {
|
||||
this.socket.send('END_OF_AUDIO');
|
||||
}
|
||||
@ -168,22 +173,27 @@ export class TranscriptionService {
|
||||
}
|
||||
|
||||
private cleanup() {
|
||||
this.finalizedSegmentCount = 0;
|
||||
if (this.workletNode) {
|
||||
this.workletNode.disconnect();
|
||||
this.workletNode = null;
|
||||
}
|
||||
|
||||
if (this.mediaStreamSource) {
|
||||
this.mediaStreamSource.disconnect();
|
||||
this.mediaStreamSource = null;
|
||||
}
|
||||
|
||||
if (this.audioContext) {
|
||||
this.audioContext.close();
|
||||
this.audioContext = null;
|
||||
}
|
||||
|
||||
if (this.stream) {
|
||||
this.stream.getTracks().forEach(track => track.stop());
|
||||
this.stream = null;
|
||||
}
|
||||
|
||||
if (this.socket) {
|
||||
this.socket.close();
|
||||
this.socket = null;
|
||||
|
||||
@ -34,7 +34,6 @@ import { CCYoutubePanel } from './CCYoutubePanel';
|
||||
import { CCGraphPanel } from './CCGraphPanel';
|
||||
import { CCExamMarkerPanel } from './CCExamMarkerPanel';
|
||||
import { CCSearchPanel } from './CCSearchPanel'
|
||||
import { CCGraphNavPanel } from './navigation/CCGraphNavPanel'
|
||||
import { CCTranscriptionPanel } from './CCTranscriptionPanel'
|
||||
import { PANEL_DIMENSIONS, Z_INDICES } from './panel-styles';
|
||||
import './panel.css';
|
||||
@ -146,6 +145,7 @@ export const BasePanel: React.FC<BasePanelProps> = ({
|
||||
return createTheme({
|
||||
palette: {
|
||||
mode,
|
||||
divider: 'var(--color-divider)',
|
||||
},
|
||||
});
|
||||
}, [tldrawPreferences?.colorScheme, prefersDarkMode]);
|
||||
@ -281,8 +281,6 @@ export const BasePanel: React.FC<BasePanelProps> = ({
|
||||
return <CCGraphPanel />;
|
||||
case 'search':
|
||||
return <CCSearchPanel />;
|
||||
case 'navigation':
|
||||
return <CCGraphNavPanel />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
@ -388,11 +386,9 @@ export const BasePanel: React.FC<BasePanelProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ThemeProvider theme={theme}>
|
||||
<div className="panel-content">
|
||||
{renderCurrentPanel()}
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
||||
@ -35,7 +35,7 @@ import DescriptionIcon from '@mui/icons-material/Description';
|
||||
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
|
||||
import CloudUploadIcon from '@mui/icons-material/CloudUpload';
|
||||
import { useTLDraw } from '../../../../../contexts/TLDrawContext';
|
||||
import { useAuth } from '../../../../../contexts/AuthContext';
|
||||
import { supabase } from '../../../../../supabaseClient';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
pickDirectory,
|
||||
@ -75,8 +75,7 @@ interface UploadProgress {
|
||||
}
|
||||
|
||||
export const CCFilesPanelEnhanced: React.FC = () => {
|
||||
const { tldrawPreferences } = useTLDraw() as { tldrawPreferences?: { colorScheme?: 'light' | 'dark' | 'system' } };
|
||||
const { user: authUser, accessToken } = useAuth();
|
||||
const { tldrawPreferences, authToken } = useTLDraw() as { tldrawPreferences?: { colorScheme?: 'light' | 'dark' | 'system' }, authToken?: string };
|
||||
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
|
||||
const [cabinets, setCabinets] = useState<Cabinet[]>([]);
|
||||
const [selectedCabinet, setSelectedCabinet] = useState<string>('');
|
||||
@ -110,7 +109,7 @@ export const CCFilesPanelEnhanced: React.FC = () => {
|
||||
|
||||
const apiFetch = async (url: string, init?: RequestInitLike) => {
|
||||
const headers: HeadersInitLike = {
|
||||
'Authorization': `Bearer ${accessToken || ''}`,
|
||||
'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token || authToken || ''}`,
|
||||
...(init?.headers || {})
|
||||
};
|
||||
const fullUrl = url.startsWith('http') ? url : `${API_BASE}${url}`;
|
||||
@ -141,7 +140,7 @@ export const CCFilesPanelEnhanced: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => { if (authUser?.id) { loadCabinets(); } }, [authUser?.id]);
|
||||
useEffect(() => { loadCabinets(); }, []);
|
||||
useEffect(() => { if (selectedCabinet) loadFiles(selectedCabinet); }, [selectedCabinet]);
|
||||
|
||||
const handleSingleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
|
||||
@ -1,49 +1,15 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Close from '@mui/icons-material/Close';
|
||||
import { useTranscriptionStore, LLMConfig } from '../../../../../stores/transcriptionStore';
|
||||
|
||||
const PROVIDERS = [
|
||||
{ value: 'openai', label: 'OpenAI' },
|
||||
{ value: 'anthropic', label: 'Anthropic' },
|
||||
{ value: 'ollama', label: 'Ollama (local)' },
|
||||
{ value: 'ollama', label: 'Ollama' },
|
||||
{ value: 'openrouter', label: 'OpenRouter' },
|
||||
{ value: 'google', label: 'Google Gemini' },
|
||||
{ value: 'google', label: 'Google' },
|
||||
] as const;
|
||||
|
||||
const WHISPER_MODELS = [
|
||||
{ value: 'tiny', label: 'Tiny (fastest, least accurate)' },
|
||||
{ value: 'tiny.en', label: 'Tiny English' },
|
||||
{ value: 'base', label: 'Base' },
|
||||
{ value: 'base.en', label: 'Base English' },
|
||||
{ value: 'small', label: 'Small' },
|
||||
{ value: 'small.en', label: 'Small English' },
|
||||
{ value: 'medium', label: 'Medium' },
|
||||
{ value: 'medium.en', label: 'Medium English' },
|
||||
{ value: 'large-v2', label: 'Large v2' },
|
||||
{ value: 'large-v3', label: 'Large v3 (best accuracy)' },
|
||||
];
|
||||
|
||||
const fieldStyle: React.CSSProperties = {
|
||||
width: '100%',
|
||||
padding: '7px 10px',
|
||||
border: '1px solid var(--color-divider)',
|
||||
borderRadius: '6px',
|
||||
backgroundColor: 'var(--color-muted)',
|
||||
color: 'var(--color-text)',
|
||||
fontSize: '13px',
|
||||
outline: 'none',
|
||||
boxSizing: 'border-box',
|
||||
};
|
||||
|
||||
const labelStyle: React.CSSProperties = {
|
||||
display: 'block',
|
||||
fontSize: '12px',
|
||||
fontWeight: 600,
|
||||
color: 'var(--color-text-2)',
|
||||
marginBottom: '4px',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.05em',
|
||||
};
|
||||
|
||||
const LLMConfigModal: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, onClose }) => {
|
||||
const { llmConfig, setLLMConfig } = useTranscriptionStore();
|
||||
const [form, setForm] = useState<LLMConfig>(llmConfig);
|
||||
@ -59,196 +25,97 @@ const LLMConfigModal: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ is
|
||||
const handleSave = () => {
|
||||
setLLMConfig(form);
|
||||
setSaved(true);
|
||||
setTimeout(() => {
|
||||
setSaved(false);
|
||||
onClose();
|
||||
}, 1000);
|
||||
setTimeout(() => setSaved(false), 2000);
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
zIndex: 99999,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}
|
||||
>
|
||||
<div className="fixed inset-0 z-[9999] overflow-y-auto">
|
||||
{/* Backdrop */}
|
||||
<div style={{ position: 'absolute', inset: 0, backgroundColor: 'rgba(0,0,0,0.5)' }} />
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 transition-opacity"
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* Modal panel */}
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
maxWidth: '420px',
|
||||
backgroundColor: 'var(--color-panel)',
|
||||
border: '1px solid var(--color-divider)',
|
||||
borderRadius: '10px',
|
||||
boxShadow: '0 20px 60px rgba(0,0,0,0.4)',
|
||||
overflow: 'hidden',
|
||||
zIndex: 1,
|
||||
}}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 w-full max-w-md mx-auto">
|
||||
{/* Header */}
|
||||
<div style={{
|
||||
padding: '14px 16px',
|
||||
borderBottom: '1px solid var(--color-divider)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}}>
|
||||
<span style={{ fontSize: '14px', fontWeight: 600, color: 'var(--color-text)' }}>
|
||||
Settings
|
||||
</span>
|
||||
<div className="bg-gray-50 px-4 py-3 flex items-center justify-between border-b border-gray-200">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900">
|
||||
LLM Provider Settings
|
||||
</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
padding: '2px 6px',
|
||||
border: 'none',
|
||||
backgroundColor: 'transparent',
|
||||
color: 'var(--color-text-2)',
|
||||
cursor: 'pointer',
|
||||
fontSize: '18px',
|
||||
lineHeight: 1,
|
||||
}}
|
||||
className="text-gray-400 hover:text-gray-500 focus:outline-none"
|
||||
>
|
||||
×
|
||||
<Close sx={{ fontSize: 20 }} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div style={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: '14px', maxHeight: '80vh', overflowY: 'auto' }}>
|
||||
|
||||
{/* ── Transcription section ── */}
|
||||
<div className="px-4 py-5 sm:p-6 space-y-4">
|
||||
{/* Provider dropdown */}
|
||||
<div>
|
||||
<div style={{
|
||||
fontSize: '11px',
|
||||
fontWeight: 700,
|
||||
color: 'var(--color-text-3)',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.08em',
|
||||
marginBottom: '10px',
|
||||
paddingBottom: '6px',
|
||||
borderBottom: '1px solid var(--color-divider)',
|
||||
}}>
|
||||
Transcription
|
||||
</div>
|
||||
<label style={labelStyle}>Whisper Model</label>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Provider
|
||||
</label>
|
||||
<select
|
||||
value={form.whisperModel || 'large-v3'}
|
||||
onChange={(e) => setForm({ ...form, whisperModel: e.target.value })}
|
||||
style={fieldStyle}
|
||||
value={form.provider}
|
||||
onChange={(e) => setForm({ ...form, provider: e.target.value as LLMConfig['provider'] })}
|
||||
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
{WHISPER_MODELS.map((m) => (
|
||||
<option key={m.value} value={m.value}>{m.label}</option>
|
||||
{PROVIDERS.map((p) => (
|
||||
<option key={p.value} value={p.value}>
|
||||
{p.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div style={{ fontSize: '11px', color: 'var(--color-text-3)', marginTop: '4px' }}>
|
||||
Larger models are more accurate but slower to load. Server has large-v3 downloaded.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── LLM section ── */}
|
||||
{/* Model name */}
|
||||
<div>
|
||||
<div style={{
|
||||
fontSize: '11px',
|
||||
fontWeight: 700,
|
||||
color: 'var(--color-text-3)',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.08em',
|
||||
marginBottom: '10px',
|
||||
paddingBottom: '6px',
|
||||
borderBottom: '1px solid var(--color-divider)',
|
||||
}}>
|
||||
AI Summary Provider
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
||||
<div>
|
||||
<label style={labelStyle}>Provider</label>
|
||||
<select
|
||||
value={form.provider}
|
||||
onChange={(e) => setForm({ ...form, provider: e.target.value as LLMConfig['provider'] })}
|
||||
style={fieldStyle}
|
||||
>
|
||||
{PROVIDERS.map((p) => (
|
||||
<option key={p.value} value={p.value}>{p.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style={labelStyle}>Model</label>
|
||||
<input
|
||||
type="text"
|
||||
value={form.model}
|
||||
onChange={(e) => setForm({ ...form, model: e.target.value })}
|
||||
placeholder={
|
||||
form.provider === 'ollama' ? 'e.g. gemma4:e4b, llama3.2' :
|
||||
form.provider === 'anthropic' ? 'e.g. claude-sonnet-4-6' :
|
||||
form.provider === 'google' ? 'e.g. gemini-2.0-flash' :
|
||||
'e.g. gpt-4o, gpt-4o-mini'
|
||||
}
|
||||
style={fieldStyle}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{form.provider === 'ollama' && (
|
||||
<div>
|
||||
<label style={labelStyle}>Ollama Base URL</label>
|
||||
<input
|
||||
type="text"
|
||||
value={form.baseUrl || ''}
|
||||
onChange={(e) => setForm({ ...form, baseUrl: e.target.value })}
|
||||
placeholder="https://ollama.kevlarai.com"
|
||||
style={fieldStyle}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label style={labelStyle}>
|
||||
{form.provider === 'ollama' ? 'API Key (optional — leave blank if unrestricted)' : 'API Key'}
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={form.apiKey}
|
||||
onChange={(e) => setForm({ ...form, apiKey: e.target.value })}
|
||||
placeholder={form.provider === 'ollama' ? 'Leave blank or any value' : 'sk-...'}
|
||||
style={fieldStyle}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ fontSize: '11px', color: 'var(--color-text-3)', marginTop: '8px' }}>
|
||||
API keys are stored in your browser only.
|
||||
</div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Model
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={form.model}
|
||||
onChange={(e) => setForm({ ...form, model: e.target.value })}
|
||||
placeholder="e.g. gpt-4o, claude-sonnet-4-20250514"
|
||||
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* API Key */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
API Key
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={form.apiKey}
|
||||
onChange={(e) => setForm({ ...form, apiKey: e.target.value })}
|
||||
placeholder="sk-..."
|
||||
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Note */}
|
||||
<p className="text-xs text-gray-500">
|
||||
API keys are stored locally in your browser only. They are never sent to Supabase or stored on any server.
|
||||
</p>
|
||||
|
||||
{/* Save button */}
|
||||
<button
|
||||
onClick={handleSave}
|
||||
style={{
|
||||
padding: '9px',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
backgroundColor: saved ? '#16a34a' : '#2563eb',
|
||||
color: '#fff',
|
||||
fontSize: '13px',
|
||||
fontWeight: 600,
|
||||
cursor: 'pointer',
|
||||
transition: 'background-color 200ms',
|
||||
}}
|
||||
className={`w-full rounded-md px-4 py-2 text-sm font-medium text-white transition-colors ${
|
||||
saved
|
||||
? 'bg-green-600 hover:bg-green-700'
|
||||
: 'bg-blue-600 hover:bg-blue-700'
|
||||
}`}
|
||||
>
|
||||
{saved ? '✓ Saved' : 'Save Settings'}
|
||||
{saved ? '✓ Saved!' : 'Save Settings'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,586 +0,0 @@
|
||||
import React, { useState, useEffect, useCallback, createContext, useContext } from 'react';
|
||||
import {
|
||||
Box, IconButton, CircularProgress, Collapse, Typography, Tooltip,
|
||||
ToggleButtonGroup, ToggleButton,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
ExpandMore, ChevronRight as ChevronRightIcon,
|
||||
Home as HomeIcon,
|
||||
CalendarToday, DateRange, Event,
|
||||
Schedule as TimetableIcon,
|
||||
Class as ClassIcon,
|
||||
MenuBook as CurriculumIcon,
|
||||
Book as JournalIcon,
|
||||
EventNote as PlannerIcon,
|
||||
Business as SchoolIcon,
|
||||
LinkOff as UnlinkedIcon,
|
||||
HourglassEmpty as PendingIcon,
|
||||
School as AcademicIcon,
|
||||
GridOn as GridIcon,
|
||||
Settings as SetupIcon,
|
||||
Edit as EditIcon,
|
||||
} from '@mui/icons-material';
|
||||
import { useNavigationStore } from '../../../../../../stores/navigationStore';
|
||||
import { useAuth } from '../../../../../../contexts/AuthContext';
|
||||
import { NeoGraphNode } from '../../../../../../types/navigation';
|
||||
import { logger } from '../../../../../../debugConfig';
|
||||
import { SchoolCalendarWizard, SchoolInfo } from './SchoolCalendarWizard';
|
||||
import { TeacherTimetableWizard, PeriodTemplate } from './TeacherTimetableWizard';
|
||||
|
||||
type NodeStatus = 'populated' | 'empty' | 'no_school' | 'not_initialized';
|
||||
type CalendarMode = 'generic' | 'academic';
|
||||
|
||||
interface TreeNode extends NeoGraphNode {
|
||||
has_children?: boolean;
|
||||
children?: TreeNode[];
|
||||
is_section?: boolean;
|
||||
section_id?: string;
|
||||
status?: NodeStatus;
|
||||
neo4j_props?: Record<string, string>;
|
||||
}
|
||||
|
||||
interface SchoolStatus {
|
||||
status: string;
|
||||
user_role?: string;
|
||||
school_id?: string;
|
||||
school_has_calendar?: boolean;
|
||||
teacher_has_timetable?: boolean;
|
||||
timetable_id?: string | null;
|
||||
periods_template?: PeriodTemplate[] | null;
|
||||
school_info?: SchoolInfo;
|
||||
}
|
||||
|
||||
const NODE_ICONS: Record<string, React.ElementType> = {
|
||||
User: HomeIcon,
|
||||
CalendarYear: CalendarToday,
|
||||
CalendarMonth: DateRange,
|
||||
CalendarWeek: DateRange,
|
||||
CalendarDay: Event,
|
||||
AcademicYear: AcademicIcon,
|
||||
AcademicTerm: AcademicIcon,
|
||||
AcademicWeek: DateRange,
|
||||
TeacherTimetable: TimetableIcon,
|
||||
SubjectClass: ClassIcon,
|
||||
TimetableLesson: TimetableIcon,
|
||||
TimetableSlot: GridIcon,
|
||||
Journal: JournalIcon,
|
||||
Planner: PlannerIcon,
|
||||
School: SchoolIcon,
|
||||
Department: SchoolIcon,
|
||||
Section: HomeIcon,
|
||||
};
|
||||
|
||||
const SECTION_ICONS: Record<string, React.ElementType> = {
|
||||
calendar: CalendarToday,
|
||||
timetable: TimetableIcon,
|
||||
classes: ClassIcon,
|
||||
curriculum: CurriculumIcon,
|
||||
journal: JournalIcon,
|
||||
planner: PlannerIcon,
|
||||
school: SchoolIcon,
|
||||
};
|
||||
|
||||
const STATUS_MESSAGES: Record<NodeStatus, string> = {
|
||||
populated: '',
|
||||
empty: 'Not set up yet',
|
||||
no_school: 'Join a school to unlock',
|
||||
not_initialized: 'Setting up...',
|
||||
};
|
||||
|
||||
// ─── Panel context ─────────────────────────────────────────────────────────────
|
||||
|
||||
interface NavPanelContextValue {
|
||||
calendarMode: CalendarMode;
|
||||
setCalendarMode: (m: CalendarMode) => void;
|
||||
academicCalendarStatus: 'idle' | 'loading' | 'populated' | 'empty' | 'no_school' | 'error';
|
||||
academicTerms: TreeNode[];
|
||||
schoolStatus: SchoolStatus | null;
|
||||
onSetupSchoolCalendar: () => void;
|
||||
onSetupTimetable: () => void;
|
||||
activeNodeId?: string;
|
||||
}
|
||||
|
||||
const NavPanelContext = createContext<NavPanelContextValue>({
|
||||
calendarMode: 'generic',
|
||||
setCalendarMode: () => {},
|
||||
academicCalendarStatus: 'idle',
|
||||
academicTerms: [],
|
||||
schoolStatus: null,
|
||||
onSetupSchoolCalendar: () => {},
|
||||
onSetupTimetable: () => {},
|
||||
});
|
||||
|
||||
// ─── TreeItem ─────────────────────────────────────────────────────────────────
|
||||
|
||||
interface TreeItemProps {
|
||||
node: TreeNode;
|
||||
depth: number;
|
||||
onSelect: (node: TreeNode) => void;
|
||||
onExpand: (node: TreeNode) => Promise<TreeNode[]>;
|
||||
}
|
||||
|
||||
function TreeItem({ node, depth, onSelect, onExpand }: TreeItemProps) {
|
||||
const ctx = useContext(NavPanelContext);
|
||||
const [expanded, setExpanded] = useState(node.is_section && node.status === 'populated');
|
||||
const [children, setChildren] = useState<TreeNode[]>(node.children || []);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const isSection = !!node.is_section;
|
||||
const isCalendarSection = isSection && node.section_id === 'calendar';
|
||||
const isTimetableSection = isSection && node.section_id === 'timetable';
|
||||
const isSchoolSection = isSection && node.section_id === 'school';
|
||||
const SectionIcon = node.section_id ? SECTION_ICONS[node.section_id] : null;
|
||||
const Icon = SectionIcon || NODE_ICONS[node.node_type] || HomeIcon;
|
||||
|
||||
const canExpand = node.has_children !== false
|
||||
&& node.node_type !== 'CalendarDay'
|
||||
&& node.node_type !== 'AcademicWeek'
|
||||
&& node.status !== 'empty'
|
||||
&& node.status !== 'no_school'
|
||||
&& node.status !== 'not_initialized';
|
||||
|
||||
const isActive = !isSection && node.neo4j_node_id === ctx.activeNodeId;
|
||||
const isEmpty = node.status === 'empty' || node.status === 'no_school' || node.status === 'not_initialized';
|
||||
|
||||
const displayChildren = isCalendarSection && ctx.calendarMode === 'academic'
|
||||
? ctx.academicTerms
|
||||
: children;
|
||||
|
||||
const academicEmpty = isCalendarSection
|
||||
&& ctx.calendarMode === 'academic'
|
||||
&& (ctx.academicCalendarStatus === 'empty' || ctx.academicCalendarStatus === 'idle');
|
||||
|
||||
const handleToggle = async (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
if (!expanded && displayChildren.length === 0 && canExpand && !isCalendarSection) {
|
||||
setLoading(true);
|
||||
try {
|
||||
const loaded = await onExpand(node);
|
||||
setChildren(loaded);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
setExpanded(v => !v);
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
if (!isSection) {
|
||||
onSelect(node);
|
||||
} else if (canExpand || (isCalendarSection && ctx.calendarMode === 'academic')) {
|
||||
handleToggle({ stopPropagation: () => {} } as React.MouseEvent);
|
||||
}
|
||||
};
|
||||
|
||||
// Derive action buttons per section
|
||||
const ss = ctx.schoolStatus;
|
||||
// School section: calendar setup (admin) or pending notice (non-admin)
|
||||
const showCalendarSetup = isSchoolSection
|
||||
&& ss && ss.status !== 'no_school'
|
||||
&& !ss.school_has_calendar && ss.user_role === 'school_admin';
|
||||
const showCalendarPending = isSchoolSection
|
||||
&& ss && ss.status !== 'no_school'
|
||||
&& !ss.school_has_calendar && ss.user_role !== 'school_admin';
|
||||
// Timetable section: teacher timetable setup (requires school calendar first)
|
||||
const showTimetableSetup = isTimetableSection && node.status === 'empty'
|
||||
&& ss && ss.status !== 'no_school'
|
||||
&& ss.school_has_calendar && !ss.teacher_has_timetable;
|
||||
const showLegacySetup = isTimetableSection && node.status === 'empty' && !ss;
|
||||
const showTimetableEdit = isTimetableSection && node.status === 'populated'
|
||||
&& ss && ss.status !== 'no_school' && !!ss.teacher_has_timetable;
|
||||
|
||||
if (isSection) {
|
||||
return (
|
||||
<Box>
|
||||
<Box
|
||||
onClick={handleClick}
|
||||
sx={{
|
||||
display: 'flex', alignItems: 'center',
|
||||
px: 1, py: 0.6,
|
||||
cursor: (canExpand || isCalendarSection) ? 'pointer' : 'default',
|
||||
mt: depth === 0 ? 0.5 : 0,
|
||||
borderRadius: 1,
|
||||
'&:hover': (canExpand || isCalendarSection) ? { bgcolor: 'action.hover' } : {},
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: 18, flexShrink: 0, display: 'flex', alignItems: 'center' }}>
|
||||
{(canExpand || (isCalendarSection && !academicEmpty)) && (
|
||||
loading
|
||||
? <CircularProgress size={10} />
|
||||
: (
|
||||
<IconButton size="small" sx={{ p: 0, color: 'text.secondary' }} onClick={handleToggle}>
|
||||
{expanded
|
||||
? <ExpandMore sx={{ fontSize: 14 }} />
|
||||
: <ChevronRightIcon sx={{ fontSize: 14 }} />}
|
||||
</IconButton>
|
||||
)
|
||||
)}
|
||||
{isEmpty && !isCalendarSection && !isTimetableSection && !isSchoolSection && (
|
||||
<Box sx={{ width: 18, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
{node.status === 'no_school'
|
||||
? <UnlinkedIcon sx={{ fontSize: 11, color: 'text.disabled' }} />
|
||||
: node.status === 'not_initialized'
|
||||
? <PendingIcon sx={{ fontSize: 11, color: 'text.disabled' }} />
|
||||
: null}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Icon sx={{ fontSize: 13, mr: 0.75, flexShrink: 0, color: isEmpty ? 'text.disabled' : 'primary.main', opacity: isEmpty ? 0.5 : 1 }} />
|
||||
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{
|
||||
fontWeight: 600, letterSpacing: '0.04em',
|
||||
textTransform: 'uppercase', fontSize: '0.68rem',
|
||||
color: isEmpty ? 'text.disabled' : 'text.secondary',
|
||||
flexGrow: 1, overflow: 'hidden',
|
||||
textOverflow: 'ellipsis', whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{node.label}
|
||||
</Typography>
|
||||
|
||||
{isEmpty && !isCalendarSection && !isTimetableSection && !isSchoolSection && node.status && (
|
||||
<Tooltip title={STATUS_MESSAGES[node.status]} placement="right">
|
||||
<Typography variant="caption" sx={{ fontSize: '0.6rem', color: 'text.disabled', ml: 0.5, flexShrink: 0 }}>
|
||||
{node.status === 'no_school' ? '—' : '…'}
|
||||
</Typography>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
{/* Timetable section — role-aware action */}
|
||||
{showCalendarSetup && (
|
||||
<Tooltip title="Set up school calendar" placement="right">
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{ p: 0.25, ml: 0.5, color: 'primary.main' }}
|
||||
onClick={e => { e.stopPropagation(); ctx.onSetupSchoolCalendar(); }}
|
||||
>
|
||||
<SetupIcon sx={{ fontSize: 13 }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
{showCalendarPending && (
|
||||
<Tooltip title="School calendar not set up yet — contact your school admin" placement="right">
|
||||
<PendingIcon sx={{ fontSize: 11, color: 'text.disabled', ml: 0.5 }} />
|
||||
</Tooltip>
|
||||
)}
|
||||
{showTimetableSetup && (
|
||||
<Tooltip title="Set up my timetable" placement="right">
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{ p: 0.25, ml: 0.5, color: 'primary.main' }}
|
||||
onClick={e => { e.stopPropagation(); ctx.onSetupTimetable(); }}
|
||||
>
|
||||
<SetupIcon sx={{ fontSize: 13 }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
{showLegacySetup && (
|
||||
<Tooltip title="Set up timetable" placement="right">
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{ p: 0.25, ml: 0.5, color: 'primary.main' }}
|
||||
onClick={e => { e.stopPropagation(); ctx.onSetupTimetable(); }}
|
||||
>
|
||||
<SetupIcon sx={{ fontSize: 13 }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
{showTimetableEdit && (
|
||||
<Tooltip title="Edit my class schedule" placement="right">
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{ p: 0.25, ml: 0.5, color: 'text.secondary' }}
|
||||
onClick={e => { e.stopPropagation(); ctx.onSetupTimetable(); }}
|
||||
>
|
||||
<EditIcon sx={{ fontSize: 13 }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Calendar mode toggle */}
|
||||
{isCalendarSection && (
|
||||
<Box sx={{ px: 1.5, pb: 0.5 }}>
|
||||
<ToggleButtonGroup
|
||||
value={ctx.calendarMode}
|
||||
exclusive
|
||||
onChange={(_, v) => { if (v) ctx.setCalendarMode(v); }}
|
||||
size="small"
|
||||
sx={{ height: 22 }}
|
||||
>
|
||||
<ToggleButton value="generic" sx={{ px: 1, fontSize: '0.6rem', textTransform: 'none' }}>
|
||||
Generic
|
||||
</ToggleButton>
|
||||
<ToggleButton value="academic" sx={{ px: 1, fontSize: '0.6rem', textTransform: 'none' }}>
|
||||
Academic
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
{ctx.calendarMode === 'academic' && academicEmpty && (
|
||||
<Typography variant="caption" sx={{ display: 'block', color: 'text.disabled', fontSize: '0.6rem', mt: 0.5 }}>
|
||||
No academic calendar — set up school calendar first
|
||||
</Typography>
|
||||
)}
|
||||
{ctx.calendarMode === 'academic' && ctx.academicCalendarStatus === 'loading' && (
|
||||
<CircularProgress size={10} sx={{ mt: 0.5, ml: 0.5 }} />
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{(canExpand || (isCalendarSection && ctx.calendarMode === 'academic' && displayChildren.length > 0)) && (
|
||||
<Collapse in={expanded} timeout="auto">
|
||||
{displayChildren.map(child => (
|
||||
<TreeItem key={child.neo4j_node_id} node={child} depth={depth + 1}
|
||||
onSelect={onSelect} onExpand={onExpand} />
|
||||
))}
|
||||
</Collapse>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// Regular navigable node
|
||||
return (
|
||||
<Box>
|
||||
<Box
|
||||
onClick={handleClick}
|
||||
sx={{
|
||||
display: 'flex', alignItems: 'center',
|
||||
pl: depth * 1.5 + 0.5, pr: 0.5, py: 0.35,
|
||||
cursor: 'pointer', borderRadius: 1, mx: 0.5,
|
||||
fontSize: '0.78rem', minHeight: 26,
|
||||
bgcolor: isActive ? 'action.selected' : 'transparent',
|
||||
'&:hover': { bgcolor: isActive ? 'action.selected' : 'action.hover' },
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: 18, flexShrink: 0, display: 'flex', alignItems: 'center' }}>
|
||||
{canExpand && (
|
||||
loading
|
||||
? <CircularProgress size={10} />
|
||||
: (
|
||||
<IconButton size="small" sx={{ p: 0, color: 'text.secondary' }} onClick={handleToggle}>
|
||||
{expanded
|
||||
? <ExpandMore sx={{ fontSize: 14 }} />
|
||||
: <ChevronRightIcon sx={{ fontSize: 14 }} />}
|
||||
</IconButton>
|
||||
)
|
||||
)}
|
||||
</Box>
|
||||
<Icon sx={{ fontSize: 13, mr: 0.75, flexShrink: 0, color: isActive ? 'primary.main' : 'text.secondary' }} />
|
||||
<Box sx={{
|
||||
overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
|
||||
flexGrow: 1, fontSize: '0.78rem',
|
||||
color: isActive ? 'primary.main' : 'text.primary',
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
}}>
|
||||
{node.label}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{canExpand && (
|
||||
<Collapse in={expanded} timeout="auto">
|
||||
{children.map(child => (
|
||||
<TreeItem key={child.neo4j_node_id} node={child} depth={depth + 1}
|
||||
onSelect={onSelect} onExpand={onExpand} />
|
||||
))}
|
||||
</Collapse>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Main Panel ───────────────────────────────────────────────────────────────
|
||||
|
||||
export function CCGraphNavPanel() {
|
||||
const { accessToken } = useAuth();
|
||||
const { navigateToNeoNode, context } = useNavigationStore();
|
||||
const [tree, setTree] = useState<TreeNode | null>(null);
|
||||
const [schoolStatus, setSchoolStatus] = useState<SchoolStatus | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [calendarMode, setCalendarMode] = useState<CalendarMode>('generic');
|
||||
const [academicCalendarStatus, setAcademicCalendarStatus] = useState<NavPanelContextValue['academicCalendarStatus']>('idle');
|
||||
const [academicTerms, setAcademicTerms] = useState<TreeNode[]>([]);
|
||||
|
||||
const [calendarWizardOpen, setCalendarWizardOpen] = useState(false);
|
||||
const [timetableWizardOpen, setTimetableWizardOpen] = useState(false);
|
||||
|
||||
const apiBase = import.meta.env.VITE_API_BASE as string;
|
||||
const activeNodeId = context.node?.type !== 'workspace' ? context.node?.id : undefined;
|
||||
|
||||
const fetchTree = useCallback(async () => {
|
||||
if (!accessToken) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetch(`${apiBase}/graph/tree`, {
|
||||
headers: { Authorization: `Bearer ${accessToken}` },
|
||||
});
|
||||
if (!res.ok) throw new Error(`${res.status}`);
|
||||
const data = await res.json();
|
||||
setTree(data.tree);
|
||||
} catch (err) {
|
||||
logger.error('graph-nav-panel', 'Failed to load graph tree', err);
|
||||
setError('Failed to load navigation tree');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [accessToken, apiBase]);
|
||||
|
||||
const fetchSchoolStatus = useCallback(async () => {
|
||||
if (!accessToken) return;
|
||||
try {
|
||||
const res = await fetch(`${apiBase}/school/status`, {
|
||||
headers: { Authorization: `Bearer ${accessToken}` },
|
||||
});
|
||||
if (!res.ok) return;
|
||||
const data = await res.json();
|
||||
setSchoolStatus(data);
|
||||
} catch {
|
||||
// non-fatal — panel still works without school status
|
||||
}
|
||||
}, [accessToken, apiBase]);
|
||||
|
||||
useEffect(() => {
|
||||
if (accessToken && !tree) fetchTree();
|
||||
}, [accessToken, tree, fetchTree]);
|
||||
|
||||
useEffect(() => {
|
||||
if (accessToken && !schoolStatus) fetchSchoolStatus();
|
||||
}, [accessToken, schoolStatus, fetchSchoolStatus]);
|
||||
|
||||
// Fetch academic calendar when switching to academic mode
|
||||
useEffect(() => {
|
||||
if (calendarMode !== 'academic' || !accessToken) return;
|
||||
if (academicCalendarStatus !== 'idle') return;
|
||||
setAcademicCalendarStatus('loading');
|
||||
fetch(`${apiBase}/graph/calendar/academic`, {
|
||||
headers: { Authorization: `Bearer ${accessToken}` },
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.status === 'populated') {
|
||||
setAcademicTerms(data.terms);
|
||||
setAcademicCalendarStatus('populated');
|
||||
} else {
|
||||
setAcademicCalendarStatus(data.status || 'empty');
|
||||
}
|
||||
})
|
||||
.catch(() => setAcademicCalendarStatus('error'));
|
||||
}, [calendarMode, accessToken, apiBase, academicCalendarStatus]);
|
||||
|
||||
const handleSetCalendarMode = useCallback((m: CalendarMode) => {
|
||||
setCalendarMode(m);
|
||||
if (m === 'academic') setAcademicCalendarStatus('idle');
|
||||
}, []);
|
||||
|
||||
const handleExpand = useCallback(async (node: TreeNode): Promise<TreeNode[]> => {
|
||||
if (!accessToken) return [];
|
||||
const params = new URLSearchParams({
|
||||
neo4j_node_id: node.neo4j_node_id,
|
||||
neo4j_db_name: node.neo4j_db_name,
|
||||
node_type: node.node_type,
|
||||
section_id: node.section_id || '',
|
||||
});
|
||||
try {
|
||||
const res = await fetch(`${apiBase}/graph/node/children?${params}`, {
|
||||
headers: { Authorization: `Bearer ${accessToken}` },
|
||||
});
|
||||
if (!res.ok) return [];
|
||||
const data = await res.json();
|
||||
return data.children || [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}, [accessToken, apiBase]);
|
||||
|
||||
const handleSelect = useCallback((node: TreeNode) => {
|
||||
if (!node.is_section) navigateToNeoNode(node);
|
||||
}, [navigateToNeoNode]);
|
||||
|
||||
const refreshAll = useCallback(() => {
|
||||
setTree(null);
|
||||
setSchoolStatus(null);
|
||||
setAcademicCalendarStatus('idle');
|
||||
setAcademicTerms([]);
|
||||
}, []);
|
||||
|
||||
const handleCalendarWizardComplete = useCallback(() => {
|
||||
logger.info('graph-nav-panel', 'School calendar setup complete');
|
||||
refreshAll();
|
||||
}, [refreshAll]);
|
||||
|
||||
const handleTimetableWizardComplete = useCallback((timetableId: string) => {
|
||||
logger.info('graph-nav-panel', 'Teacher timetable setup complete', { timetableId });
|
||||
refreshAll();
|
||||
}, [refreshAll]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', pt: 3 }}>
|
||||
<CircularProgress size={20} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Box sx={{ p: 1.5, fontSize: '0.78rem', color: 'error.main' }}>
|
||||
{error}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (!tree) return null;
|
||||
|
||||
const ctxValue: NavPanelContextValue = {
|
||||
calendarMode,
|
||||
setCalendarMode: handleSetCalendarMode,
|
||||
academicCalendarStatus,
|
||||
academicTerms,
|
||||
schoolStatus,
|
||||
onSetupSchoolCalendar: () => setCalendarWizardOpen(true),
|
||||
onSetupTimetable: () => setTimetableWizardOpen(true),
|
||||
activeNodeId,
|
||||
};
|
||||
|
||||
const defaultSchoolInfo: SchoolInfo = {
|
||||
name: '', urn: '', website: '', address: {},
|
||||
headteacher: '', term_dates_url: '', staff_list_url: '',
|
||||
};
|
||||
|
||||
return (
|
||||
<NavPanelContext.Provider value={ctxValue}>
|
||||
<Box sx={{ pt: 0.5, pb: 2 }}>
|
||||
<TreeItem
|
||||
node={tree}
|
||||
depth={0}
|
||||
onSelect={handleSelect}
|
||||
onExpand={handleExpand}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{schoolStatus?.school_info && (
|
||||
<SchoolCalendarWizard
|
||||
open={calendarWizardOpen}
|
||||
onClose={() => setCalendarWizardOpen(false)}
|
||||
onComplete={handleCalendarWizardComplete}
|
||||
apiBase={apiBase}
|
||||
schoolInfo={schoolStatus.school_info || defaultSchoolInfo}
|
||||
/>
|
||||
)}
|
||||
|
||||
<TeacherTimetableWizard
|
||||
open={timetableWizardOpen}
|
||||
onClose={() => setTimetableWizardOpen(false)}
|
||||
onComplete={handleTimetableWizardComplete}
|
||||
apiBase={apiBase}
|
||||
periodsTemplate={schoolStatus?.periods_template || []}
|
||||
timetableId={schoolStatus?.timetable_id || null}
|
||||
/>
|
||||
</NavPanelContext.Provider>
|
||||
);
|
||||
}
|
||||
@ -4,7 +4,7 @@ import Save from '@mui/icons-material/Save';
|
||||
import Reset from '@mui/icons-material/RestartAlt';
|
||||
import { useEditor, useToasts, loadSnapshot } from '@tldraw/tldraw';
|
||||
import { useNavigationStore } from '../../../../../../stores/navigationStore';
|
||||
import { useAuth } from '../../../../../../contexts/AuthContext';
|
||||
import { UserNeoDBService } from '../../../../../../services/graph/userNeoDBService';
|
||||
import { PageComponent } from '../components/pageComponent';
|
||||
import { logger } from '../../../../../../debugConfig';
|
||||
import { useTLDraw } from '../../../../../../contexts/TLDrawContext';
|
||||
@ -68,7 +68,6 @@ export const CCNodeSnapshotPanel: React.FC = () => {
|
||||
const editor = useEditor();
|
||||
const { addToast } = useToasts();
|
||||
const { context: navigationContext, isLoading, error } = useNavigationStore();
|
||||
const { accessToken } = useAuth();
|
||||
const { tldrawPreferences } = useTLDraw();
|
||||
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
@ -132,9 +131,8 @@ export const CCNodeSnapshotPanel: React.FC = () => {
|
||||
type: navigationContext.node.type
|
||||
});
|
||||
|
||||
const storagePath = navigationContext.node.node_storage_path;
|
||||
if (!storagePath) throw new Error('No storage path on current node');
|
||||
await NavigationSnapshotService.saveNodeSnapshotToDatabase(storagePath, accessToken || '', editor.store);
|
||||
const dbName = UserNeoDBService.getNodeDatabaseName(navigationContext.node);
|
||||
await NavigationSnapshotService.saveNodeSnapshotToDatabase(navigationContext.node.id, dbName, editor.store);
|
||||
|
||||
addToast({
|
||||
title: 'Snapshot saved',
|
||||
|
||||
@ -1,316 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Dialog, DialogTitle, DialogContent, DialogActions,
|
||||
Button, Stepper, Step, StepLabel, Box, TextField,
|
||||
Typography, IconButton, Select, MenuItem, FormControl,
|
||||
InputLabel, CircularProgress, Alert, Divider,
|
||||
} from '@mui/material';
|
||||
import { Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-material';
|
||||
import { useAuth } from '../../../../../../contexts/AuthContext';
|
||||
|
||||
interface TermInput {
|
||||
name: string;
|
||||
term_number: number;
|
||||
start_date: string;
|
||||
end_date: string;
|
||||
}
|
||||
|
||||
interface PeriodInput {
|
||||
code: string;
|
||||
name: string;
|
||||
start_time: string;
|
||||
end_time: string;
|
||||
period_type: 'lesson' | 'break' | 'registration';
|
||||
}
|
||||
|
||||
export interface SchoolInfo {
|
||||
name: string;
|
||||
urn: string;
|
||||
website: string;
|
||||
address: Record<string, string>;
|
||||
headteacher: string;
|
||||
term_dates_url: string;
|
||||
staff_list_url: string;
|
||||
}
|
||||
|
||||
const DEFAULT_TERMS: TermInput[] = [
|
||||
{ name: 'Autumn', term_number: 1, start_date: '2025-09-03', end_date: '2025-12-19' },
|
||||
{ name: 'Spring', term_number: 2, start_date: '2026-01-06', end_date: '2026-04-01' },
|
||||
{ name: 'Summer', term_number: 3, start_date: '2026-04-22', end_date: '2026-07-22' },
|
||||
];
|
||||
|
||||
const DEFAULT_PERIODS: PeriodInput[] = [
|
||||
{ code: 'REG', name: 'Registration', start_time: '08:45', end_time: '09:00', period_type: 'registration' },
|
||||
{ code: 'P1', name: 'Period 1', start_time: '09:00', end_time: '10:00', period_type: 'lesson' },
|
||||
{ code: 'P2', name: 'Period 2', start_time: '10:00', end_time: '11:00', period_type: 'lesson' },
|
||||
{ code: 'BREAK', name: 'Break', start_time: '11:00', end_time: '11:20', period_type: 'break' },
|
||||
{ code: 'P3', name: 'Period 3', start_time: '11:20', end_time: '12:20', period_type: 'lesson' },
|
||||
{ code: 'P4', name: 'Period 4', start_time: '12:20', end_time: '13:20', period_type: 'lesson' },
|
||||
{ code: 'LUNCH', name: 'Lunch', start_time: '13:20', end_time: '14:05', period_type: 'break' },
|
||||
{ code: 'P5', name: 'Period 5', start_time: '14:05', end_time: '15:05', period_type: 'lesson' },
|
||||
];
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onComplete: () => void;
|
||||
apiBase: string;
|
||||
schoolInfo: SchoolInfo;
|
||||
}
|
||||
|
||||
export function SchoolCalendarWizard({ open, onClose, onComplete, apiBase, schoolInfo }: Props) {
|
||||
const { accessToken } = useAuth();
|
||||
const [step, setStep] = useState(0);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [headteacher, setHeadteacher] = useState(schoolInfo.headteacher || '');
|
||||
const [termDatesUrl, setTermDatesUrl] = useState(schoolInfo.term_dates_url || '');
|
||||
const [staffListUrl, setStaffListUrl] = useState(schoolInfo.staff_list_url || '');
|
||||
|
||||
const [yearStart, setYearStart] = useState('2025-09-01');
|
||||
const [yearEnd, setYearEnd] = useState('2026-07-31');
|
||||
const [terms, setTerms] = useState<TermInput[]>(DEFAULT_TERMS);
|
||||
|
||||
const [periods, setPeriods] = useState<PeriodInput[]>(DEFAULT_PERIODS);
|
||||
|
||||
const addTerm = () => setTerms(prev => [...prev, {
|
||||
name: `Term ${prev.length + 1}`,
|
||||
term_number: prev.length + 1,
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
}]);
|
||||
|
||||
const removeTerm = (i: number) => setTerms(prev =>
|
||||
prev.filter((_, idx) => idx !== i).map((t, idx) => ({ ...t, term_number: idx + 1 }))
|
||||
);
|
||||
|
||||
const updateTerm = (i: number, field: keyof TermInput, value: string) =>
|
||||
setTerms(prev => prev.map((t, idx) => idx === i ? { ...t, [field]: value } : t));
|
||||
|
||||
const addPeriod = () => setPeriods(prev => [...prev, {
|
||||
code: `P${prev.length + 1}`,
|
||||
name: `Period ${prev.length + 1}`,
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
period_type: 'lesson',
|
||||
}]);
|
||||
|
||||
const removePeriod = (i: number) => setPeriods(prev => prev.filter((_, idx) => idx !== i));
|
||||
|
||||
const updatePeriod = (i: number, field: keyof PeriodInput, value: string) =>
|
||||
setPeriods(prev => prev.map((p, idx) => idx === i ? { ...p, [field]: value } : p));
|
||||
|
||||
const handleSaveSchoolInfo = async () => {
|
||||
if (!accessToken) return;
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetch(`${apiBase}/school/info`, {
|
||||
method: 'PATCH',
|
||||
headers: { Authorization: `Bearer ${accessToken}`, 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ headteacher, term_dates_url: termDatesUrl, staff_list_url: staffListUrl }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.status === 'ok') {
|
||||
setStep(1);
|
||||
} else {
|
||||
setError(data.message || 'Failed to save school info');
|
||||
}
|
||||
} catch (e: any) {
|
||||
setError(e.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveCalendar = async () => {
|
||||
if (!accessToken) return;
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetch(`${apiBase}/timetable/setup`, {
|
||||
method: 'POST',
|
||||
headers: { Authorization: `Bearer ${accessToken}`, 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ year_start: yearStart, year_end: yearEnd, terms, periods }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.status === 'ok') {
|
||||
onComplete();
|
||||
handleClose();
|
||||
} else {
|
||||
setError(data.message || 'Calendar setup failed');
|
||||
}
|
||||
} catch (e: any) {
|
||||
setError(e.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setStep(0);
|
||||
setError(null);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const addr = schoolInfo.address || {};
|
||||
const addressStr = [addr.street, addr.town, addr.county, addr.postcode].filter(Boolean).join(', ');
|
||||
|
||||
const STEPS = ['School Details', 'Academic Calendar', 'Daily Periods'];
|
||||
|
||||
return (
|
||||
<Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
|
||||
<DialogTitle sx={{ pb: 1 }}>Set Up School Calendar</DialogTitle>
|
||||
<Box sx={{ px: 3 }}>
|
||||
<Stepper activeStep={step} sx={{ mb: 2 }}>
|
||||
{STEPS.map(label => <Step key={label}><StepLabel>{label}</StepLabel></Step>)}
|
||||
</Stepper>
|
||||
</Box>
|
||||
|
||||
<DialogContent>
|
||||
{error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
|
||||
|
||||
{step === 0 && (
|
||||
<Box>
|
||||
<Typography variant="subtitle2" sx={{ mb: 1.5 }}>School Information</Typography>
|
||||
<Box sx={{ mb: 2, p: 1.5, bgcolor: 'action.hover', borderRadius: 1 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>{schoolInfo.name || '—'}</Typography>
|
||||
{schoolInfo.urn && (
|
||||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>URN: {schoolInfo.urn}</Typography>
|
||||
)}
|
||||
{addressStr && (
|
||||
<Typography variant="caption" sx={{ display: 'block', color: 'text.secondary' }}>{addressStr}</Typography>
|
||||
)}
|
||||
{schoolInfo.website && (
|
||||
<Typography variant="caption" sx={{ display: 'block', color: 'text.secondary' }}>{schoolInfo.website}</Typography>
|
||||
)}
|
||||
</Box>
|
||||
<Divider sx={{ mb: 2 }} />
|
||||
<Typography variant="subtitle2" sx={{ mb: 1.5 }}>Additional Details</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<TextField
|
||||
label="Headteacher"
|
||||
value={headteacher}
|
||||
onChange={e => setHeadteacher(e.target.value)}
|
||||
size="small"
|
||||
fullWidth
|
||||
placeholder="e.g. Mr J Smith"
|
||||
/>
|
||||
<TextField
|
||||
label="Term Dates URL"
|
||||
value={termDatesUrl}
|
||||
onChange={e => setTermDatesUrl(e.target.value)}
|
||||
size="small"
|
||||
fullWidth
|
||||
placeholder="Link to term dates page on school website"
|
||||
/>
|
||||
<TextField
|
||||
label="Staff List URL"
|
||||
value={staffListUrl}
|
||||
onChange={e => setStaffListUrl(e.target.value)}
|
||||
size="small"
|
||||
fullWidth
|
||||
placeholder="Link to staff list page on school website"
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{step === 1 && (
|
||||
<Box>
|
||||
<Typography variant="subtitle2" sx={{ mb: 1.5 }}>School Year</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
|
||||
<TextField label="Year Start" type="date" value={yearStart}
|
||||
onChange={e => setYearStart(e.target.value)}
|
||||
size="small" InputLabelProps={{ shrink: true }} />
|
||||
<TextField label="Year End" type="date" value={yearEnd}
|
||||
onChange={e => setYearEnd(e.target.value)}
|
||||
size="small" InputLabelProps={{ shrink: true }} />
|
||||
</Box>
|
||||
<Divider sx={{ mb: 2 }} />
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1.5 }}>
|
||||
<Typography variant="subtitle2">Terms</Typography>
|
||||
<Button size="small" startIcon={<AddIcon />} onClick={addTerm}>Add Term</Button>
|
||||
</Box>
|
||||
{terms.map((term, i) => (
|
||||
<Box key={i} sx={{ display: 'flex', gap: 1.5, mb: 1.5, alignItems: 'center' }}>
|
||||
<TextField label="Term Name" value={term.name}
|
||||
onChange={e => updateTerm(i, 'name', e.target.value)}
|
||||
size="small" sx={{ width: 140 }} />
|
||||
<TextField label="Start Date" type="date" value={term.start_date}
|
||||
onChange={e => updateTerm(i, 'start_date', e.target.value)}
|
||||
size="small" InputLabelProps={{ shrink: true }} />
|
||||
<TextField label="End Date" type="date" value={term.end_date}
|
||||
onChange={e => updateTerm(i, 'end_date', e.target.value)}
|
||||
size="small" InputLabelProps={{ shrink: true }} />
|
||||
<IconButton size="small" onClick={() => removeTerm(i)}>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1.5 }}>
|
||||
<Typography variant="subtitle2">Daily Period Schedule</Typography>
|
||||
<Button size="small" startIcon={<AddIcon />} onClick={addPeriod}>Add Period</Button>
|
||||
</Box>
|
||||
{periods.map((p, i) => (
|
||||
<Box key={i} sx={{ display: 'flex', gap: 1.5, mb: 1.5, alignItems: 'center' }}>
|
||||
<TextField label="Code" value={p.code}
|
||||
onChange={e => updatePeriod(i, 'code', e.target.value)}
|
||||
size="small" sx={{ width: 80 }} />
|
||||
<TextField label="Name" value={p.name}
|
||||
onChange={e => updatePeriod(i, 'name', e.target.value)}
|
||||
size="small" sx={{ width: 140 }} />
|
||||
<TextField label="Start" type="time" value={p.start_time}
|
||||
onChange={e => updatePeriod(i, 'start_time', e.target.value)}
|
||||
size="small" InputLabelProps={{ shrink: true }} />
|
||||
<TextField label="End" type="time" value={p.end_time}
|
||||
onChange={e => updatePeriod(i, 'end_time', e.target.value)}
|
||||
size="small" InputLabelProps={{ shrink: true }} />
|
||||
<FormControl size="small" sx={{ width: 130 }}>
|
||||
<InputLabel>Type</InputLabel>
|
||||
<Select label="Type" value={p.period_type}
|
||||
onChange={e => updatePeriod(i, 'period_type', e.target.value)}>
|
||||
<MenuItem value="lesson">Lesson</MenuItem>
|
||||
<MenuItem value="break">Break</MenuItem>
|
||||
<MenuItem value="registration">Registration</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<IconButton size="small" onClick={() => removePeriod(i)}>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions sx={{ px: 3, pb: 2 }}>
|
||||
<Button onClick={handleClose} disabled={saving}>Cancel</Button>
|
||||
{step > 0 && (
|
||||
<Button onClick={() => setStep(s => s - 1)} disabled={saving}>Back</Button>
|
||||
)}
|
||||
{step === 0 && (
|
||||
<Button onClick={handleSaveSchoolInfo} variant="contained" disabled={saving}>
|
||||
{saving ? <CircularProgress size={18} /> : 'Save & Continue'}
|
||||
</Button>
|
||||
)}
|
||||
{step === 1 && (
|
||||
<Button onClick={() => setStep(2)} variant="outlined" disabled={saving}>
|
||||
Next: Daily Periods
|
||||
</Button>
|
||||
)}
|
||||
{step === 2 && (
|
||||
<Button onClick={handleSaveCalendar} variant="contained" disabled={saving}>
|
||||
{saving ? <CircularProgress size={18} /> : 'Save School Calendar'}
|
||||
</Button>
|
||||
)}
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@ -1,244 +0,0 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import {
|
||||
Dialog, DialogTitle, DialogContent, DialogActions,
|
||||
Button, Box, TextField, Typography, Table, TableHead,
|
||||
TableBody, TableRow, TableCell, CircularProgress, Alert,
|
||||
} from '@mui/material';
|
||||
import { useAuth } from '../../../../../../contexts/AuthContext';
|
||||
|
||||
export interface PeriodTemplate {
|
||||
code: string;
|
||||
name: string;
|
||||
start_time: string;
|
||||
end_time: string;
|
||||
period_type: string;
|
||||
}
|
||||
|
||||
const DAYS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
|
||||
|
||||
function emptyGrid(): Record<string, Record<string, string>> {
|
||||
const g: Record<string, Record<string, string>> = {};
|
||||
DAYS.forEach(d => { g[d] = {}; });
|
||||
return g;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onComplete: (timetableId: string) => void;
|
||||
apiBase: string;
|
||||
periodsTemplate: PeriodTemplate[];
|
||||
timetableId: string | null;
|
||||
}
|
||||
|
||||
export function TeacherTimetableWizard({
|
||||
open,
|
||||
onClose,
|
||||
onComplete,
|
||||
apiBase,
|
||||
periodsTemplate,
|
||||
timetableId: initialTimetableId,
|
||||
}: Props) {
|
||||
const { accessToken } = useAuth();
|
||||
const [localTimetableId, setLocalTimetableId] = useState<string | null>(initialTimetableId);
|
||||
const [initializing, setInitializing] = useState(false);
|
||||
const [loadingSlots, setLoadingSlots] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [grid, setGrid] = useState<Record<string, Record<string, string>>>(emptyGrid);
|
||||
const slotsLoadedRef = useRef(false);
|
||||
|
||||
const lessonPeriods = periodsTemplate.filter(p => p.period_type === 'lesson');
|
||||
const isEditing = !!initialTimetableId;
|
||||
|
||||
// Reset when dialog opens
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
slotsLoadedRef.current = false;
|
||||
return;
|
||||
}
|
||||
setLocalTimetableId(initialTimetableId);
|
||||
setGrid(emptyGrid());
|
||||
setError(null);
|
||||
slotsLoadedRef.current = false;
|
||||
}, [open, initialTimetableId]);
|
||||
|
||||
// Auto-create TeacherTimetable node if not yet done
|
||||
useEffect(() => {
|
||||
if (!open || localTimetableId || !accessToken || initializing) return;
|
||||
setInitializing(true);
|
||||
setError(null);
|
||||
fetch(`${apiBase}/timetable/init`, {
|
||||
method: 'POST',
|
||||
headers: { Authorization: `Bearer ${accessToken}` },
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.status === 'ok') {
|
||||
setLocalTimetableId(data.timetable_id);
|
||||
} else {
|
||||
setError(data.message || 'Could not initialize timetable. Has an admin set up the school calendar?');
|
||||
}
|
||||
})
|
||||
.catch(e => setError(e.message))
|
||||
.finally(() => setInitializing(false));
|
||||
}, [open, localTimetableId, accessToken, apiBase, initializing]);
|
||||
|
||||
// Load existing slots when editing
|
||||
useEffect(() => {
|
||||
if (!open || !localTimetableId || !accessToken || slotsLoadedRef.current || loadingSlots) return;
|
||||
slotsLoadedRef.current = true;
|
||||
setLoadingSlots(true);
|
||||
fetch(`${apiBase}/timetable/slots`, {
|
||||
headers: { Authorization: `Bearer ${accessToken}` },
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.status === 'ok' && Array.isArray(data.slots) && data.slots.length > 0) {
|
||||
const g = emptyGrid();
|
||||
for (const slot of data.slots) {
|
||||
if (g[slot.day_of_week]) {
|
||||
g[slot.day_of_week][slot.period_code] = slot.subject_class || '';
|
||||
}
|
||||
}
|
||||
setGrid(g);
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => setLoadingSlots(false));
|
||||
}, [open, localTimetableId, accessToken, apiBase, loadingSlots]);
|
||||
|
||||
const setCell = (day: string, code: string, value: string) => {
|
||||
setGrid(prev => ({ ...prev, [day]: { ...prev[day], [code]: value } }));
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!accessToken || !localTimetableId) return;
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
const slots = [];
|
||||
for (const day of DAYS) {
|
||||
for (const period of lessonPeriods) {
|
||||
const cls = (grid[day]?.[period.code] || '').trim();
|
||||
if (cls) {
|
||||
slots.push({
|
||||
day_of_week: day,
|
||||
period_code: period.code,
|
||||
subject_class: cls,
|
||||
start_time: period.start_time,
|
||||
end_time: period.end_time,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
const res = await fetch(`${apiBase}/timetable/slots`, {
|
||||
method: 'POST',
|
||||
headers: { Authorization: `Bearer ${accessToken}`, 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ timetable_id: localTimetableId, slots }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.status === 'ok') {
|
||||
onComplete(localTimetableId);
|
||||
handleClose();
|
||||
} else {
|
||||
setError(data.message || 'Save failed');
|
||||
}
|
||||
} catch (e: any) {
|
||||
setError(e.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setError(null);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const busy = initializing || loadingSlots || saving;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onClose={handleClose} maxWidth="lg" fullWidth>
|
||||
<DialogTitle sx={{ pb: 1 }}>
|
||||
{isEditing ? 'Edit My Timetable' : 'Set Up My Timetable'}
|
||||
</DialogTitle>
|
||||
|
||||
<DialogContent>
|
||||
{error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
|
||||
|
||||
{(initializing || loadingSlots) && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 2 }}>
|
||||
<CircularProgress size={16} />
|
||||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
||||
{initializing ? 'Preparing your timetable…' : 'Loading existing classes…'}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{!initializing && !loadingSlots && localTimetableId && (
|
||||
<Box>
|
||||
<Typography variant="subtitle2" sx={{ mb: 1.5 }}>
|
||||
Enter your class codes for each lesson slot (leave blank if free)
|
||||
</Typography>
|
||||
<Box sx={{ overflowX: 'auto' }}>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell sx={{ fontWeight: 600, minWidth: 100 }}>Period</TableCell>
|
||||
{DAYS.map(d => (
|
||||
<TableCell key={d} align="center" sx={{ fontWeight: 600, minWidth: 110 }}>
|
||||
{d}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{lessonPeriods.map(period => (
|
||||
<TableRow key={period.code}>
|
||||
<TableCell>
|
||||
<Box>
|
||||
<Typography variant="caption" sx={{ fontWeight: 600 }}>
|
||||
{period.code}
|
||||
</Typography>
|
||||
<Typography variant="caption" sx={{ display: 'block', color: 'text.secondary' }}>
|
||||
{period.start_time}–{period.end_time}
|
||||
</Typography>
|
||||
</Box>
|
||||
</TableCell>
|
||||
{DAYS.map(day => (
|
||||
<TableCell key={day} align="center" sx={{ p: 0.5 }}>
|
||||
<TextField
|
||||
size="small"
|
||||
placeholder="—"
|
||||
value={grid[day]?.[period.code] || ''}
|
||||
onChange={e => setCell(day, period.code, e.target.value)}
|
||||
inputProps={{
|
||||
style: { textAlign: 'center', fontSize: '0.8rem', padding: '4px 6px' },
|
||||
}}
|
||||
sx={{ width: 96 }}
|
||||
/>
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions sx={{ px: 3, pb: 2 }}>
|
||||
<Button onClick={handleClose} disabled={busy}>Cancel</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
variant="contained"
|
||||
disabled={busy || !localTimetableId}
|
||||
>
|
||||
{saving ? <CircularProgress size={18} /> : 'Save Timetable'}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user