feat: add mindmap components from jarvis frontend
- Copied mindmap visualization components (ReactFlow-based interactive graph) - Added MindmapViewer, ReactFlowEditor, MermaidViewer - Included all node types: Concept, Task, Idea, Project - Added controls: NodeCreateModal, ExportButton - Created mindmap route at /mindmap - Added useGraphData hook for knowledge graph API - Copied auth-client and api utilities (dependencies) Note: Requires better-auth packages to be installed for full compilation
This commit is contained in:
Jason Woltje
253
apps/web/src/components/mindmap/MindmapViewer.tsx
Normal file
253
apps/web/src/components/mindmap/MindmapViewer.tsx
Normal file
@@ -0,0 +1,253 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import { MermaidViewer } from './MermaidViewer';
|
||||
import { ReactFlowEditor } from './ReactFlowEditor';
|
||||
import { useGraphData, KnowledgeNode, NodeCreateInput, EdgeCreateInput } from './hooks/useGraphData';
|
||||
import { NodeCreateModal } from './controls/NodeCreateModal';
|
||||
import { ExportButton } from './controls/ExportButton';
|
||||
|
||||
type ViewMode = 'interactive' | 'mermaid';
|
||||
type MermaidStyle = 'flowchart' | 'mindmap';
|
||||
|
||||
interface MindmapViewerProps {
|
||||
rootId?: string;
|
||||
maxDepth?: number;
|
||||
className?: string;
|
||||
readOnly?: boolean;
|
||||
}
|
||||
|
||||
export function MindmapViewer({
|
||||
rootId,
|
||||
maxDepth = 3,
|
||||
className = '',
|
||||
readOnly = false,
|
||||
}: MindmapViewerProps) {
|
||||
const [viewMode, setViewMode] = useState<ViewMode>('interactive');
|
||||
const [mermaidStyle, setMermaidStyle] = useState<MermaidStyle>('flowchart');
|
||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||
const [selectedNode, setSelectedNode] = useState<KnowledgeNode | null>(null);
|
||||
|
||||
const {
|
||||
graph,
|
||||
mermaid,
|
||||
statistics,
|
||||
isLoading,
|
||||
error,
|
||||
fetchMermaid,
|
||||
createNode,
|
||||
updateNode,
|
||||
deleteNode,
|
||||
createEdge,
|
||||
} = useGraphData({ rootId, maxDepth });
|
||||
|
||||
const handleViewModeChange = useCallback(
|
||||
async (mode: ViewMode) => {
|
||||
setViewMode(mode);
|
||||
if (mode === 'mermaid') {
|
||||
await fetchMermaid(mermaidStyle);
|
||||
}
|
||||
},
|
||||
[fetchMermaid, mermaidStyle]
|
||||
);
|
||||
|
||||
const handleMermaidStyleChange = useCallback(
|
||||
async (style: MermaidStyle) => {
|
||||
setMermaidStyle(style);
|
||||
if (viewMode === 'mermaid') {
|
||||
await fetchMermaid(style);
|
||||
}
|
||||
},
|
||||
[viewMode, fetchMermaid]
|
||||
);
|
||||
|
||||
const handleCreateNode = useCallback(
|
||||
async (nodeData: NodeCreateInput) => {
|
||||
await createNode(nodeData);
|
||||
setShowCreateModal(false);
|
||||
},
|
||||
[createNode]
|
||||
);
|
||||
|
||||
const handleDeleteNode = useCallback(
|
||||
async (id: string) => {
|
||||
await deleteNode(id);
|
||||
setSelectedNode(null);
|
||||
},
|
||||
[deleteNode]
|
||||
);
|
||||
|
||||
const handleCreateEdge = useCallback(
|
||||
async (edgeData: EdgeCreateInput) => {
|
||||
await createEdge(edgeData);
|
||||
},
|
||||
[createEdge]
|
||||
);
|
||||
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className={`flex items-center justify-center p-8 ${className}`}>
|
||||
<div className="text-center">
|
||||
<div className="text-red-500 mb-2">Error loading graph</div>
|
||||
<div className="text-sm text-gray-500">{error}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`flex flex-col h-full ${className}`}>
|
||||
{/* Toolbar */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
|
||||
<div className="flex items-center gap-4">
|
||||
{/* View mode toggle */}
|
||||
<div className="flex rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
onClick={() => handleViewModeChange('interactive')}
|
||||
className={`px-3 py-1.5 text-sm font-medium transition-colors ${
|
||||
viewMode === 'interactive'
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
Interactive
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleViewModeChange('mermaid')}
|
||||
className={`px-3 py-1.5 text-sm font-medium transition-colors ${
|
||||
viewMode === 'mermaid'
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
Diagram
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mermaid style selector (only shown in mermaid mode) */}
|
||||
{viewMode === 'mermaid' && (
|
||||
<select
|
||||
value={mermaidStyle}
|
||||
onChange={(e) => handleMermaidStyleChange(e.target.value as MermaidStyle)}
|
||||
className="px-3 py-1.5 text-sm rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<option value="flowchart">Flowchart</option>
|
||||
<option value="mindmap">Mindmap</option>
|
||||
</select>
|
||||
)}
|
||||
|
||||
{/* Statistics */}
|
||||
{statistics && (
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{statistics.node_count} nodes, {statistics.edge_count} edges
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{!readOnly && (
|
||||
<button
|
||||
onClick={() => setShowCreateModal(true)}
|
||||
className="px-3 py-1.5 text-sm font-medium bg-green-500 text-white rounded hover:bg-green-600 transition-colors"
|
||||
>
|
||||
+ Add Node
|
||||
</button>
|
||||
)}
|
||||
<ExportButton graph={graph} mermaid={mermaid} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex-1 relative">
|
||||
{isLoading && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-white/50 dark:bg-gray-900/50 z-10">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{viewMode === 'interactive' && graph && (
|
||||
<ReactFlowEditor
|
||||
graphData={graph}
|
||||
onNodeSelect={setSelectedNode}
|
||||
onNodeUpdate={readOnly ? undefined : updateNode}
|
||||
onNodeDelete={readOnly ? undefined : handleDeleteNode}
|
||||
onEdgeCreate={readOnly ? undefined : handleCreateEdge}
|
||||
readOnly={readOnly}
|
||||
className="h-full"
|
||||
/>
|
||||
)}
|
||||
|
||||
{viewMode === 'mermaid' && mermaid && (
|
||||
<MermaidViewer diagram={mermaid.diagram} className="h-full p-4" />
|
||||
)}
|
||||
|
||||
{!graph && !isLoading && (
|
||||
<div className="flex flex-col items-center justify-center h-full text-gray-500 dark:text-gray-400">
|
||||
<svg
|
||||
className="w-16 h-16 mb-4 opacity-50"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1}
|
||||
d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"
|
||||
/>
|
||||
</svg>
|
||||
<p className="text-lg font-medium">No nodes yet</p>
|
||||
<p className="text-sm mt-1">Create your first node to get started</p>
|
||||
{!readOnly && (
|
||||
<button
|
||||
onClick={() => setShowCreateModal(true)}
|
||||
className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
|
||||
>
|
||||
Create Node
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Selected node details panel */}
|
||||
{selectedNode && (
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 p-4 bg-gray-50 dark:bg-gray-800">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 className="font-medium text-gray-900 dark:text-gray-100">
|
||||
{selectedNode.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 capitalize">
|
||||
{selectedNode.node_type}
|
||||
{selectedNode.domain && ` • ${selectedNode.domain}`}
|
||||
</p>
|
||||
{selectedNode.content && (
|
||||
<p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
|
||||
{selectedNode.content}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSelectedNode(null)}
|
||||
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create node modal */}
|
||||
{showCreateModal && (
|
||||
<NodeCreateModal
|
||||
onClose={() => setShowCreateModal(false)}
|
||||
onCreate={handleCreateNode}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user