import React, { useEffect, useCallback } from "react"; import { useAgentGraph } from "@/context/AgentGraphContext"; import { useNavigation } from "@/context/NavigationContext"; import { Breadcrumb } from "./Breadcrumb"; import { DashboardView } from "../features/workspace/DashboardView"; import { TraceKnowledgeGraphView } from "../features/traces/TraceKnowledgeGraphView"; import { TracesView } from "../features/traces/TracesView"; import { KnowledgeGraphVisualizer } from "../features/traces/KnowledgeGraphVisualizer"; import { AdvancedProcessingView } from "../features/processing/AdvancedProcessingView"; import { TraceEditor } from "../features/traces/TraceEditor"; import { TemporalGraphVisualizer } from "../features/traces/TemporalGraphVisualizer"; import { GraphComparisonView } from "../features/comparison/GraphComparisonView"; import { FloatingActionWidget } from "../shared/FloatingActionWidget"; import ExampleTraceBrowserView from "@/components/features/traces/ExampleTraceBrowserView"; import { ConnectionsView } from "../features/connections/ConnectionsView"; import { UploadView } from "../features/upload/UploadView"; import { Button } from "@/components/ui/button"; import { ArrowLeft } from "lucide-react"; interface MainWorkspaceProps { isSidebarCollapsed: boolean; onToggleSidebar?: () => void; } export function MainWorkspace({ isSidebarCollapsed: _isSidebarCollapsed, onToggleSidebar: _onToggleSidebar, }: MainWorkspaceProps) { const { state, actions } = useAgentGraph(); const navigation = useNavigation(); const { activeView } = state; // FloatingActionWidget now handles its own contextual actions // Function to handle back navigation using breadcrumbs const handleBackNavigation = useCallback(() => { const breadcrumbs = navigation.state.breadcrumbs; if (breadcrumbs.length > 1) { // Navigate to the second-to-last breadcrumb item const previousBreadcrumb = breadcrumbs[breadcrumbs.length - 2]; if (previousBreadcrumb?.path) { switch (previousBreadcrumb.path) { case "welcome": actions.setActiveView("welcome"); break; case "traces": actions.setActiveView("traces"); break; case "trace-kg": actions.setActiveView("trace-kg"); break; case "kg-visualizer": actions.setActiveView("kg-visualizer"); break; case "advanced-processing": actions.setActiveView("advanced-processing"); break; case "trace-editor": actions.setActiveView("trace-editor"); break; case "temporal-visualizer": actions.setActiveView("temporal-visualizer"); break; case "connections": actions.setActiveView("connections"); break; case "upload": actions.setActiveView("upload"); break; case "graph-comparison": actions.setActiveView("graph-comparison"); break; case "example-traces": actions.setActiveView("example-traces"); break; default: actions.setActiveView("welcome"); } } else { actions.setActiveView("welcome"); } } else { // If no previous breadcrumb, go to dashboard actions.setActiveView("welcome"); } }, [navigation.state.breadcrumbs, actions]); // Generate breadcrumbs based on current state const generateBreadcrumbs = useCallback(() => { const breadcrumbs: Array<{ label: string; path: string; active: boolean }> = []; // Always show Dashboard breadcrumb if (activeView === "welcome") { breadcrumbs.push({ label: "Dashboard", path: "welcome", active: true, }); } else { breadcrumbs.push({ label: "Dashboard", path: "welcome", active: false, }); } if (activeView === "traces") { breadcrumbs.push({ label: "My Traces", path: "traces", active: true, }); } if (activeView === "trace-kg" && state.selectedTrace) { breadcrumbs.push({ label: "My Traces", path: "traces", active: false, }); breadcrumbs.push({ label: state.selectedTrace.filename, path: "trace-kg", active: true, }); } if ( activeView === "kg-visualizer" && state.selectedTrace && state.selectedKnowledgeGraph ) { breadcrumbs.push({ label: "My Traces", path: "traces", active: false, }); breadcrumbs.push({ label: state.selectedTrace.filename, path: "trace-kg", active: false, }); breadcrumbs.push({ label: "Agent Graph Visualization", path: "kg-visualizer", active: true, }); } if ( activeView === "advanced-processing" && state.selectedTrace && state.selectedKnowledgeGraph ) { breadcrumbs.push({ label: "My Traces", path: "traces", active: false, }); breadcrumbs.push({ label: state.selectedTrace.filename, path: "trace-kg", active: false, }); breadcrumbs.push({ label: "Agent Graph Visualization", path: "kg-visualizer", active: false, }); breadcrumbs.push({ label: "Advanced Processing", path: "advanced-processing", active: true, }); } if (activeView === "trace-editor" && state.selectedTrace) { breadcrumbs.push({ label: "My Traces", path: "traces", active: false, }); breadcrumbs.push({ label: state.selectedTrace.filename, path: "trace-kg", active: false, }); breadcrumbs.push({ label: "Edit Trace", path: "trace-editor", active: true, }); } if (activeView === "temporal-visualizer" && state.selectedTemporalData) { breadcrumbs.push({ label: "My Traces", path: "traces", active: false, }); breadcrumbs.push({ label: state.selectedTemporalData.trace_title, path: "trace-kg", active: false, }); breadcrumbs.push({ label: "Temporal Visualization", path: "temporal-visualizer", active: true, }); } if (activeView === "graph-comparison") { breadcrumbs.push({ label: "Graph Comparison", path: "graph-comparison", active: true, }); } if (activeView === "example-traces") { breadcrumbs.push({ label: "Gallery", path: "example-traces", active: true, }); } if (activeView === "connections") { breadcrumbs.push({ label: "Connections", path: "connections", active: true, }); } if (activeView === "upload") { breadcrumbs.push({ label: "Upload Trace", path: "upload", active: true, }); } return breadcrumbs; }, [ activeView, state.selectedTrace, state.selectedKnowledgeGraph, state.selectedTemporalData, ]); // Update navigation context when state changes useEffect(() => { const breadcrumbs = generateBreadcrumbs(); navigation.actions.setBreadcrumbs(breadcrumbs); }, [generateBreadcrumbs, navigation.actions]); const renderView = () => { switch (activeView) { case "welcome": return ; case "traces": return ; case "trace-kg": return state.selectedTrace ? ( kg.filename === state.selectedTrace?.filename )} /> ) : ( ); case "kg-visualizer": return state.selectedKnowledgeGraph ? ( ) : ( ); case "advanced-processing": return state.selectedKnowledgeGraph ? ( actions.setActiveView("trace-kg")} /> ) : ( ); case "trace-editor": return state.selectedTrace ? ( actions.setActiveView("trace-kg")} /> ) : ( ); case "temporal-visualizer": return state.selectedTemporalData ? ( actions.setActiveView("trace-kg")} /> ) : ( ); case "graph-comparison": return ; case "example-traces": return ; case "connections": return ; case "upload": return ; default: return ; } }; // Special layout for temporal visualizer - full screen with sidebar if (activeView === "temporal-visualizer") { return (
{/* Global Floating Action Widget for temporal view */} {/* Breadcrumb Navigation */}
{navigation.state.breadcrumbs.length > 1 && ( )}
{/* Main content with sidebar */}
{renderView()}
); } return (
{/* Global Floating Action Widget */} {/* Breadcrumb Navigation - Only show when needed */} {navigation.state.breadcrumbs.length > 0 ? (
{navigation.state.breadcrumbs.length > 1 && ( )}
) : (
{/* Empty div to maintain layout when no breadcrumbs */}
)} {/* Main Content */}
{renderView()}
); }