feat: add GraphControls component and useGraphData hook for knowledge graph management

This commit is contained in:
RaymondVerhoef
2026-05-27 15:05:26 +02:00
parent 3aa32c383e
commit 7b6a5b4bf0
4 changed files with 577 additions and 128 deletions

View File

@@ -0,0 +1,54 @@
import { RefreshCw, AlertCircle } from 'lucide-react';
import Button from '../../ui/Button';
import SuggestionsQueue from '../SuggestionsQueue';
/**
* Sidebar controls panel: the exclude-nodes toggle, the AI analysis button,
* and the R42 suggestions queue.
*
* Kept intentionally thin — all async logic lives in the KnowledgeGraph
* orchestrator and is injected via props.
*/
export default function GraphControls({
showExcludeNodes,
onShowExcludeChange,
onAnalyze,
isAnalyzing,
analyzeError,
disabled,
onApplied,
}) {
return (
<div className="mb-6 pb-4 border-b border-bg-warm space-y-3">
<label className="flex items-center gap-2 text-sm text-fg-muted cursor-pointer">
<input
type="checkbox"
checked={showExcludeNodes}
onChange={e => onShowExcludeChange(e.target.checked)}
className="rounded bg-bg-warm border-transparent focus:ring-0 text-teal"
/>
Show Excluded Nodes (Reference Material)
</label>
<div>
<Button
onClick={onAnalyze}
disabled={isAnalyzing || disabled}
className="w-full flex justify-center items-center gap-2"
>
<RefreshCw size={16} className={isAnalyzing ? 'animate-spin' : ''} />
{isAnalyzing ? 'Analyzing Graph…' : 'Analyze & Optimize Graph'}
</Button>
{analyzeError && (
<p className="mt-2 text-xs text-red-600 flex items-start gap-1">
<AlertCircle size={14} className="shrink-0 mt-0.5" />
{analyzeError}
</p>
)}
</div>
<SuggestionsQueue onApplied={onApplied} />
</div>
);
}