feat: knowledge graph table view met sort, group en bulk edit

Voegt een Graph/Table toggle toe aan de admin Knowledge Graph. De tabel
ondersteunt sorteren per kolom, groeperen op type/relevance/theme/difficulty,
filteren op label, multi-select en bulk-wijzigen van type, learning_relevance
en relevance_locked.

Closes #10

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/admin/KnowledgeGraph.jsx

@@ -3,9 +3,11 @@ import * as d3 from 'd3';
 import * as db from '../../lib/db';
 import { callLLM } from '../../lib/llm';
 import { EMIT_GRAPH_ACTIONS_TOOL } from '../../lib/llmTools';
+import { Network, Table2 } from 'lucide-react';
 import { useGraphData } from '../../hooks/useGraphData';
 import GraphControls from './graph/GraphControls';
 import NodeDetailPanel from './graph/NodeDetailPanel';
+import GraphTable from './graph/GraphTable';
 
 // ── Edge visual style per relation type ────────────────────────────────────────
 // stroke — line colour
@@ -72,10 +74,11 @@ const KnowledgeGraph = () => {
   const [isAnalyzing, setIsAnalyzing] = useState(false);
   const [analyzeError, setAnalyzeError] = useState(null);
   const [isRestoring, setIsRestoring] = useState(false);
+  const [viewMode, setViewMode] = useState('graph'); // 'graph' | 'table'
 
   const {
     topics, relations, snapshotMeta,
-    reload, updateTopic, deleteTopic, addRelation, removeRelation, bulkSave, restoreSnapshot,
+    reload, updateTopic, bulkUpdateTopics, deleteTopic, addRelation, removeRelation, bulkSave, restoreSnapshot,
   } = useGraphData();
 
   // ── Canvas sizing ────────────────────────────────────────────────────────────
@@ -94,6 +97,7 @@ const KnowledgeGraph = () => {
   // ── D3 force graph ───────────────────────────────────────────────────────────
 
   useEffect(() => {
+    if (viewMode !== 'graph') return;
     if (!svgRef.current || topics.length === 0) return;
 
     const { width, height } = dimensions;
@@ -236,7 +240,7 @@ const KnowledgeGraph = () => {
     });
 
     return () => simulation.stop();
-  }, [dimensions, topics, relations, showExcludeNodes]);
+  }, [dimensions, topics, relations, showExcludeNodes, viewMode]);
 
   // ── Pan/zoom canvas to a node ────────────────────────────────────────────────
 
@@ -396,10 +400,34 @@ const KnowledgeGraph = () => {
 
   return (
     <div className="relative w-full h-full flex flex-col md:flex-row">
-      {/* D3 canvas */}
+      {/* Main view: graph canvas or table */}
+      <div className="flex-1 flex flex-col border-r border-bg-warm min-w-0">
+        {/* View-mode toggle */}
+        <div className="flex items-center gap-1 px-3 py-2 border-b border-bg-warm bg-paper">
+          <button
+            onClick={() => setViewMode('graph')}
+            className={`flex items-center gap-1.5 px-3 py-1 text-xs rounded-[var(--r-sm)] transition-colors ${
+              viewMode === 'graph' ? 'bg-bg-warm text-teal font-medium' : 'text-fg-muted hover:bg-bg-warm/50'
+            }`}
+            title="Force-directed graph view"
+          >
+            <Network size={13} /> Graph
+          </button>
+          <button
+            onClick={() => setViewMode('table')}
+            className={`flex items-center gap-1.5 px-3 py-1 text-xs rounded-[var(--r-sm)] transition-colors ${
+              viewMode === 'table' ? 'bg-bg-warm text-teal font-medium' : 'text-fg-muted hover:bg-bg-warm/50'
+            }`}
+            title="Sortable table with bulk edit"
+          >
+            <Table2 size={13} /> Table
+          </button>
+        </div>
+
+        {viewMode === 'graph' ? (
           <div
             ref={wrapperRef}
-        className="flex-1 h-[400px] md:h-full cursor-grab active:cursor-grabbing border-r border-bg-warm"
+            className="flex-1 h-[400px] md:h-full cursor-grab active:cursor-grabbing"
           >
             {topics.length === 0 ? (
               <div className="h-full flex items-center justify-center text-fg-muted p-8 text-center">
@@ -409,6 +437,23 @@ const KnowledgeGraph = () => {
               <svg ref={svgRef} className="w-full h-full" />
             )}
           </div>
+        ) : (
+          <div className="flex-1 min-h-[400px] overflow-hidden">
+            {topics.length === 0 ? (
+              <div className="h-full flex items-center justify-center text-fg-muted p-8 text-center">
+                No knowledge graph data yet. Upload source material in the Sources tab first.
+              </div>
+            ) : (
+              <GraphTable
+                topics={topics}
+                relations={relations}
+                onBulkUpdate={bulkUpdateTopics}
+                onSelectNode={setSelectedNode}
+              />
+            )}
+          </div>
+        )}
+      </div>
 
       {/* Sidebar */}
       <div className="w-full md:w-80 bg-paper p-6 overflow-y-auto border-t md:border-t-0 border-bg-warm flex flex-col">

src/components/admin/graph/GraphTable.jsx

@@ -0,0 +1,466 @@
+import { useMemo, useState } from 'react';
+import { ArrowUp, ArrowDown, ArrowUpDown, X, Search, ChevronRight, ChevronDown, Lock, Unlock } from 'lucide-react';
+import Button from '../../ui/Button';
+
+const TYPES = ['concept', 'role', 'process'];
+const RELEVANCE = ['core', 'standard', 'peripheral', 'exclude'];
+
+const SORTABLE = ['label', 'type', 'learning_relevance', 'theme', 'complexity_weight', 'difficulty', 'relations'];
+
+const GROUP_OPTIONS = [
+  { value: 'none',                label: 'No grouping' },
+  { value: 'type',                label: 'Type' },
+  { value: 'learning_relevance',  label: 'Relevance' },
+  { value: 'theme',               label: 'Theme' },
+  { value: 'difficulty',          label: 'Difficulty' },
+];
+
+const RELEVANCE_RANK = { core: 0, standard: 1, peripheral: 2, exclude: 3 };
+const DIFFICULTY_RANK = { beginner: 0, intermediate: 1, advanced: 2 };
+
+function compareValues(a, b, key) {
+  if (key === 'learning_relevance') {
+    return (RELEVANCE_RANK[a] ?? 99) - (RELEVANCE_RANK[b] ?? 99);
+  }
+  if (key === 'difficulty') {
+    return (DIFFICULTY_RANK[a] ?? 99) - (DIFFICULTY_RANK[b] ?? 99);
+  }
+  if (typeof a === 'number' && typeof b === 'number') return a - b;
+  return String(a ?? '').localeCompare(String(b ?? ''), undefined, { sensitivity: 'base' });
+}
+
+function SortIcon({ active, dir }) {
+  if (!active) return <ArrowUpDown size={11} className="text-fg-muted/60 inline-block ml-1" />;
+  return dir === 'asc'
+    ? <ArrowUp size={11} className="text-teal inline-block ml-1" />
+    : <ArrowDown size={11} className="text-teal inline-block ml-1" />;
+}
+
+/**
+ * Table view of the knowledge graph.
+ *
+ * Supports sort (per column), grouping (per key), free-text label filter,
+ * multi-row selection, and bulk-change of type / learning_relevance / lock.
+ *
+ * Persistence is delegated to onBulkUpdate(ids, patch). The parent (KnowledgeGraph)
+ * provides this from useGraphData.bulkUpdateTopics.
+ */
+export default function GraphTable({
+  topics,
+  relations,
+  onBulkUpdate,
+  onSelectNode,
+}) {
+  const [sortKey, setSortKey] = useState('label');
+  const [sortDir, setSortDir] = useState('asc');
+  const [groupBy, setGroupBy] = useState('none');
+  const [query, setQuery] = useState('');
+  const [selectedIds, setSelectedIds] = useState(() => new Set());
+  const [collapsed, setCollapsed] = useState(() => new Set());
+
+  // Bulk-action form state
+  const [bulkType, setBulkType] = useState('');
+  const [bulkRelevance, setBulkRelevance] = useState('');
+  const [bulkLockOnRelevance, setBulkLockOnRelevance] = useState(true);
+  const [isApplying, setIsApplying] = useState(false);
+  const [feedback, setFeedback] = useState(null);
+
+  // Pre-compute relation counts per topic so the column is cheap to render.
+  const relationCount = useMemo(() => {
+    const counts = new Map();
+    for (const r of relations) {
+      counts.set(r.source, (counts.get(r.source) || 0) + 1);
+      counts.set(r.target, (counts.get(r.target) || 0) + 1);
+    }
+    return counts;
+  }, [relations]);
+
+  // Filter + sort
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    const rows = topics
+      .map(t => ({
+        ...t,
+        learning_relevance: t.learning_relevance || 'standard',
+        type: t.type || 'concept',
+        difficulty: t.difficulty || 'intermediate',
+        complexity_weight: t.complexity_weight ?? 3,
+        theme: t.theme || '',
+        relations: relationCount.get(t.id) || 0,
+      }))
+      .filter(t => !q || t.label?.toLowerCase().includes(q) || t.description?.toLowerCase().includes(q));
+
+    const sorted = [...rows].sort((a, b) => {
+      const cmp = compareValues(a[sortKey], b[sortKey], sortKey);
+      return sortDir === 'asc' ? cmp : -cmp;
+    });
+    return sorted;
+  }, [topics, relationCount, query, sortKey, sortDir]);
+
+  // Group rows (flat array if groupBy === 'none')
+  const groups = useMemo(() => {
+    if (groupBy === 'none') return [{ key: '__all__', label: null, rows: filtered }];
+    const map = new Map();
+    for (const t of filtered) {
+      const k = t[groupBy] || '—';
+      if (!map.has(k)) map.set(k, []);
+      map.get(k).push(t);
+    }
+    return [...map.entries()]
+      .sort(([a], [b]) => compareValues(a, b, groupBy))
+      .map(([key, rows]) => ({ key, label: String(key), rows }));
+  }, [filtered, groupBy]);
+
+  // ── Selection helpers ─────────────────────────────────────────────────────
+
+  const allVisibleIds = useMemo(() => filtered.map(t => t.id), [filtered]);
+  const visibleSelected = useMemo(
+    () => allVisibleIds.filter(id => selectedIds.has(id)).length,
+    [allVisibleIds, selectedIds],
+  );
+  const allVisibleChecked = visibleSelected === allVisibleIds.length && allVisibleIds.length > 0;
+  const someVisibleChecked = visibleSelected > 0 && !allVisibleChecked;
+
+  const toggleOne = (id) => {
+    setSelectedIds(prev => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+  };
+  const toggleAllVisible = () => {
+    setSelectedIds(prev => {
+      const next = new Set(prev);
+      if (allVisibleChecked) {
+        for (const id of allVisibleIds) next.delete(id);
+      } else {
+        for (const id of allVisibleIds) next.add(id);
+      }
+      return next;
+    });
+  };
+  const toggleGroup = (groupRows) => {
+    setSelectedIds(prev => {
+      const next = new Set(prev);
+      const ids = groupRows.map(r => r.id);
+      const allOn = ids.every(id => next.has(id));
+      for (const id of ids) (allOn ? next.delete(id) : next.add(id));
+      return next;
+    });
+  };
+  const clearSelection = () => setSelectedIds(new Set());
+
+  // ── Sorting ───────────────────────────────────────────────────────────────
+
+  const onSort = (key) => {
+    if (!SORTABLE.includes(key)) return;
+    if (sortKey === key) {
+      setSortDir(d => (d === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setSortKey(key);
+      setSortDir('asc');
+    }
+  };
+
+  // ── Bulk actions ──────────────────────────────────────────────────────────
+
+  const runBulk = async (patch, label) => {
+    if (selectedIds.size === 0) return;
+    setIsApplying(true);
+    setFeedback(null);
+    try {
+      const n = await onBulkUpdate([...selectedIds], patch);
+      setFeedback(`${label} — ${n} topic${n === 1 ? '' : 's'} updated.`);
+    } catch (e) {
+      setFeedback(`Failed: ${e.message || 'unknown error'}`);
+    } finally {
+      setIsApplying(false);
+    }
+  };
+
+  const applyBulkType = () => {
+    if (!bulkType) return;
+    runBulk({ type: bulkType }, `Type → ${bulkType}`);
+  };
+  const applyBulkRelevance = () => {
+    if (!bulkRelevance) return;
+    const patch = { learning_relevance: bulkRelevance };
+    if (bulkLockOnRelevance) patch.relevance_locked = true;
+    runBulk(patch, `Relevance → ${bulkRelevance}${bulkLockOnRelevance ? ' (locked)' : ''}`);
+  };
+  const applyLock = (locked) => {
+    runBulk({ relevance_locked: locked }, locked ? 'Locked relevance' : 'Unlocked relevance');
+  };
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  const totalSel = selectedIds.size;
+  const isCollapsed = (key) => collapsed.has(key);
+  const toggleCollapse = (key) => {
+    setCollapsed(prev => {
+      const next = new Set(prev);
+      next.has(key) ? next.delete(key) : next.add(key);
+      return next;
+    });
+  };
+
+  return (
+    <div className="h-full flex flex-col bg-paper">
+      {/* Toolbar */}
+      <div className="flex flex-wrap items-center gap-3 p-3 border-b border-bg-warm bg-bg">
+        <div className="relative">
+          <Search size={14} className="absolute left-2 top-1/2 -translate-y-1/2 text-fg-muted pointer-events-none" />
+          <input
+            type="text"
+            value={query}
+            onChange={e => setQuery(e.target.value)}
+            placeholder="Filter by label or description…"
+            className="pl-7 pr-3 py-1.5 text-sm border border-bg-warm rounded-[var(--r-sm)] bg-paper w-64"
+          />
+        </div>
+        <label className="text-xs text-fg-muted flex items-center gap-1.5">
+          Group by
+          <select
+            value={groupBy}
+            onChange={e => setGroupBy(e.target.value)}
+            className="border border-bg-warm rounded-[var(--r-sm)] px-2 py-1 text-xs bg-paper"
+          >
+            {GROUP_OPTIONS.map(o => (
+              <option key={o.value} value={o.value}>{o.label}</option>
+            ))}
+          </select>
+        </label>
+        <span className="text-xs text-fg-muted ml-auto">
+          {filtered.length} of {topics.length} topics
+          {totalSel > 0 && <> · <span className="text-teal font-medium">{totalSel} selected</span></>}
+        </span>
+      </div>
+
+      {/* Bulk action bar */}
+      {totalSel > 0 && (
+        <div className="flex flex-wrap items-center gap-2 p-3 border-b border-bg-warm bg-teal/5">
+          <span className="text-xs font-medium text-teal mr-1">Bulk:</span>
+
+          {/* Type */}
+          <div className="flex items-center gap-1">
+            <select
+              value={bulkType}
+              onChange={e => setBulkType(e.target.value)}
+              className="border border-bg-warm rounded-[var(--r-sm)] px-2 py-1 text-xs bg-paper"
+              disabled={isApplying}
+            >
+              <option value="">— set type —</option>
+              {TYPES.map(t => <option key={t} value={t}>{t}</option>)}
+            </select>
+            <Button
+              onClick={applyBulkType}
+              disabled={!bulkType || isApplying}
+              className="px-2 py-1 text-xs"
+            >Apply</Button>
+          </div>
+
+          {/* Relevance */}
+          <div className="flex items-center gap-1">
+            <select
+              value={bulkRelevance}
+              onChange={e => setBulkRelevance(e.target.value)}
+              className="border border-bg-warm rounded-[var(--r-sm)] px-2 py-1 text-xs bg-paper"
+              disabled={isApplying}
+            >
+              <option value="">— set relevance —</option>
+              {RELEVANCE.map(r => <option key={r} value={r}>{r}</option>)}
+            </select>
+            <label className="flex items-center gap-1 text-xs text-fg-muted cursor-pointer">
+              <input
+                type="checkbox"
+                checked={bulkLockOnRelevance}
+                onChange={e => setBulkLockOnRelevance(e.target.checked)}
+                className="rounded bg-bg-warm border-transparent focus:ring-0 text-teal"
+              />
+              lock
+            </label>
+            <Button
+              onClick={applyBulkRelevance}
+              disabled={!bulkRelevance || isApplying}
+              className="px-2 py-1 text-xs"
+            >Apply</Button>
+          </div>
+
+          {/* Lock toggles */}
+          <button
+            onClick={() => applyLock(true)}
+            disabled={isApplying}
+            className="flex items-center gap-1 px-2 py-1 text-xs border border-bg-warm rounded-[var(--r-sm)] bg-paper hover:bg-bg-warm/50 disabled:opacity-40"
+            title="Lock relevance for selected topics"
+          >
+            <Lock size={11} /> Lock
+          </button>
+          <button
+            onClick={() => applyLock(false)}
+            disabled={isApplying}
+            className="flex items-center gap-1 px-2 py-1 text-xs border border-bg-warm rounded-[var(--r-sm)] bg-paper hover:bg-bg-warm/50 disabled:opacity-40"
+            title="Unlock relevance for selected topics"
+          >
+            <Unlock size={11} /> Unlock
+          </button>
+
+          <button
+            onClick={clearSelection}
+            className="ml-auto flex items-center gap-1 px-2 py-1 text-xs text-fg-muted hover:text-fg"
+          >
+            <X size={12} /> Clear
+          </button>
+
+          {feedback && (
+            <span className="basis-full text-xs text-fg-muted">{feedback}</span>
+          )}
+        </div>
+      )}
+
+      {/* Table */}
+      <div className="flex-1 overflow-auto">
+        <table className="w-full text-sm">
+          <thead className="bg-bg sticky top-0 z-10">
+            <tr className="text-left border-b border-bg-warm">
+              <th className="px-3 py-2 w-8">
+                <input
+                  type="checkbox"
+                  checked={allVisibleChecked}
+                  ref={el => { if (el) el.indeterminate = someVisibleChecked; }}
+                  onChange={toggleAllVisible}
+                  className="rounded bg-bg-warm border-transparent focus:ring-0 text-teal"
+                  title={allVisibleChecked ? 'Deselect all visible' : 'Select all visible'}
+                />
+              </th>
+              {[
+                ['label', 'Label'],
+                ['type', 'Type'],
+                ['learning_relevance', 'Relevance'],
+                ['theme', 'Theme'],
+                ['difficulty', 'Difficulty'],
+                ['complexity_weight', 'Weight'],
+                ['relations', 'Rel.'],
+              ].map(([key, label]) => (
+                <th
+                  key={key}
+                  onClick={() => onSort(key)}
+                  className="px-3 py-2 text-xs uppercase tracking-wider text-fg-muted cursor-pointer select-none hover:text-teal"
+                >
+                  {label}<SortIcon active={sortKey === key} dir={sortDir} />
+                </th>
+              ))}
+              <th className="px-3 py-2 text-xs uppercase tracking-wider text-fg-muted">Lock</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            {groups.map(group => (
+              <Group
+                key={group.key}
+                group={group}
+                groupBy={groupBy}
+                collapsed={isCollapsed(group.key)}
+                onToggleCollapse={() => toggleCollapse(group.key)}
+                onToggleGroup={() => toggleGroup(group.rows)}
+                selectedIds={selectedIds}
+                onToggleOne={toggleOne}
+                onSelectNode={onSelectNode}
+              />
+            ))}
+            {filtered.length === 0 && (
+              <tr>
+                <td colSpan={9} className="px-3 py-12 text-center text-fg-muted text-sm">
+                  No topics match the current filter.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function Group({
+  group, groupBy, collapsed, onToggleCollapse, onToggleGroup,
+  selectedIds, onToggleOne, onSelectNode,
+}) {
+  const groupHeader = groupBy !== 'none' && group.label != null;
+  const groupSelectedCount = group.rows.filter(r => selectedIds.has(r.id)).length;
+  const allGroupSelected = groupSelectedCount === group.rows.length && group.rows.length > 0;
+  const someGroupSelected = groupSelectedCount > 0 && !allGroupSelected;
+
+  return (
+    <>
+      {groupHeader && (
+        <tr className="bg-bg-warm/40 border-b border-bg-warm">
+          <td className="px-3 py-1.5 w-8">
+            <input
+              type="checkbox"
+              checked={allGroupSelected}
+              ref={el => { if (el) el.indeterminate = someGroupSelected; }}
+              onChange={onToggleGroup}
+              className="rounded bg-bg-warm border-transparent focus:ring-0 text-teal"
+            />
+          </td>
+          <td colSpan={8} className="px-3 py-1.5 text-xs font-medium text-fg-muted">
+            <button
+              onClick={onToggleCollapse}
+              className="inline-flex items-center gap-1 text-fg-muted hover:text-teal"
+            >
+              {collapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
+              <span className="uppercase tracking-wider">{group.label}</span>
+              <span className="text-fg-muted/70 normal-case">· {group.rows.length}</span>
+            </button>
+          </td>
+        </tr>
+      )}
+      {!collapsed && group.rows.map(t => (
+        <Row
+          key={t.id}
+          topic={t}
+          checked={selectedIds.has(t.id)}
+          onToggle={() => onToggleOne(t.id)}
+          onSelectNode={onSelectNode}
+        />
+      ))}
+    </>
+  );
+}
+
+function Row({ topic, checked, onToggle, onSelectNode }) {
+  return (
+    <tr
+      className={`border-b border-bg-warm/60 hover:bg-bg-warm/30 transition-colors ${checked ? 'bg-teal/5' : ''}`}
+    >
+      <td className="px-3 py-2 w-8">
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={onToggle}
+          className="rounded bg-bg-warm border-transparent focus:ring-0 text-teal"
+        />
+      </td>
+      <td className="px-3 py-2">
+        <button
+          onClick={() => onSelectNode?.(topic)}
+          className="text-left hover:text-teal underline-offset-2 hover:underline"
+          title={topic.description || ''}
+        >
+          {topic.label}
+        </button>
+      </td>
+      <td className="px-3 py-2 font-mono text-xs">{topic.type}</td>
+      <td className="px-3 py-2 font-mono text-xs">{topic.learning_relevance}</td>
+      <td className="px-3 py-2 text-xs text-fg-muted">{topic.theme || '—'}</td>
+      <td className="px-3 py-2 text-xs">{topic.difficulty}</td>
+      <td className="px-3 py-2 text-xs text-center">{topic.complexity_weight}</td>
+      <td className="px-3 py-2 text-xs text-center text-fg-muted">{topic.relations}</td>
+      <td className="px-3 py-2 text-center">
+        {topic.relevance_locked
+          ? <Lock size={12} className="text-teal inline" />
+          : <Unlock size={12} className="text-fg-muted/40 inline" />}
+      </td>
+    </tr>
+  );
+}

src/hooks/useGraphData.js

@@ -104,6 +104,23 @@ export function useGraphData() {
     return true;
   }, []);
 
+  /**
+   * Apply the same patch to many topics in one call. `ids` is the set of
+   * topic IDs to update; `patch` is the partial-topic to merge into each one
+   * (e.g. `{ type: 'process' }` or `{ learning_relevance: 'core', relevance_locked: true }`).
+   *
+   * Persists each topic via db.upsertTopic in parallel and mirrors into state.
+   * Returns the number of topics actually written (selected ∩ existing).
+   */
+  const bulkUpdateTopics = useCallback(async (ids, patch) => {
+    const idSet = new Set(ids);
+    const targets = topicsRef.current.filter(t => idSet.has(t.id));
+    const updated = targets.map(t => ({ ...t, ...patch }));
+    await Promise.all(updated.map(t => db.upsertTopic(t)));
+    setTopics(prev => prev.map(t => (idSet.has(t.id) ? { ...t, ...patch } : t)));
+    return updated.length;
+  }, []);
+
   /** Remove a specific (source, target, type) relation triple. */
   const removeRelation = useCallback(async (source, target, type) => {
     await db.removeRelation(source, target, type);
@@ -165,6 +182,7 @@ export function useGraphData() {
     snapshotMeta,
     reload,
     updateTopic,
+    bulkUpdateTopics,
     deleteTopic,
     addRelation,
     removeRelation,