// Fabric page — the org's knowledge graph (Overview / Graph / Timeline / Catalog)
//
// Every tab reads the live `/skill/graph` snapshot. There is no demo dataset
// behind this page: figures come from deriveFabricStats() / deriveLearningEvents()
// over what the backend returned, and anything the snapshot can't support
// (industry, ARR, account health, vendor logos) is simply not shown.
const { useState: useFb, useEffect: useFbE, useRef: useFbR, useMemo: useFbM } = React;
function FabricPage({ openEntity, setRoute, reveal, onRevealConsumed }) {
const [tab, setTab] = useFb('overview');
const [snapshot, setSnapshot] = useFb(null);
// Starts true: the fetch below is kicked off in an effect, which runs AFTER
// the first paint. Starting false would commit one frame of empty content
// under the hero before the loading state appears.
const [snapLoading, setSnapLoading] = useFb(true);
const [snapError, setSnapError] = useFb(null);
const [reloadNonce, setReloadNonce] = useFb(0);
const [tick, setTick] = useFb(0);
// Relative stamps ("3 min ago") and rolling windows ("+N · 24h", the 14-day
// sparkline) are functions of the current time, not only of the snapshot.
// Without a clock they would freeze at load and quietly go stale — a page
// left open would keep insisting the graph was last updated a minute ago.
useFbE(() => {
const t = setInterval(() => setTick(v => v + 1), 60000);
return () => clearInterval(t);
}, []);
// Load graph snapshot once (and on reload). Also subscribe to live
// updates pushed by applyMutationResponse / applyAskGraphDelta so edits
// performed inside the side panel (or elsewhere in the app) reflect in
// the graph view without a manual refresh.
useFbE(() => {
let cancelled = false;
setSnapLoading(true);
setSnapError(null);
fetchGraphSnapshotCached()
.then(s => { if (!cancelled) { setSnapshot(s); setSnapLoading(false); } })
.catch(e => { if (!cancelled) { setSnapError(e.message || String(e)); setSnapLoading(false); } });
const unsub = typeof subscribeGraphSnapshot === 'function'
? subscribeGraphSnapshot(s => { if (!cancelled) setSnapshot(s); })
: null;
return () => { cancelled = true; if (unsub) unsub(); };
}, [reloadNonce]);
const reloadSnapshot = () => { invalidateGraphSnapshot(); setReloadNonce(n => n + 1); };
// The stream and the aggregates are wanted by the hero AND by two tabs.
// Derived once here so a large graph is walked once per snapshot rather than
// once per consumer — and so every surface on the page necessarily quotes the
// same numbers.
const learningEvents = useFbM(
() => (snapshot ? deriveLearningEvents(snapshot) : []),
[snapshot]
);
const stats = useFbM(
() => deriveFabricStats(snapshot, learningEvents),
[snapshot, learningEvents, tick] // `tick`: the 24h/14-day windows move with the clock
);
const origins = useFbM(() => fabOriginBreakdown(snapshot), [snapshot]);
// A learned-concept reveal request (from the global toast) forces the graph
// tab so the reveal sequence has a canvas to play on.
useFbE(() => {
if (reveal && reveal.ids && reveal.ids.length) setTab('graph');
}, [reveal && reveal.token]);
return (
{/* Hero header — the organization's graph at a glance */}
{/* Tab content. `tick` is passed to the time-rendering tabs purely as a
re-render trigger, so their relative stamps age with the clock. */}
);
}
// --------- SHARED STATES ---------
// Loading / error / empty are the normal states of a page with no fallback
// dataset, so they get first-class rendering rather than a blank panel.
function FabricLoading({ label }) {
return (
{label}
);
}
function FabricError({ error, reload }) {
return (
Failed to load graph
{error}
{reload && (
)}
);
}
function FabricEmpty({ setRoute }) {
return (
Nothing indexed yet
Connect Databricks or Slack, or upload a file — the entities, relationships
and concepts this org learns from them show up here.
);
}
// --------- OVERVIEW TAB ---------
const FAB_METRIC_CARDS = [
{ key: 'entities', label: 'Entities indexed', note: 'tables, columns, documents, chunks and concepts' },
{ key: 'relations', label: 'Relationships', note: 'mapping, dependency, relation and category edges' },
{ key: 'merges', label: 'Cross-source merges', note: 'duplicates folded into an existing concept' },
{ key: 'learnings', label: 'Learning events', note: 'every change the graph recorded' },
];
// Named FabricOverviewTab, not OverviewTab: drawers.jsx already owns that name
// for the connector drawer, and every top-level declaration in these scripts
// lands in ONE shared global scope — whichever file loaded last would win and
// silently render the wrong component in the other's tab.
function FabricOverviewTab({ snapshot, stats, origins, events, tick, loading, error, reload, openEntity, setRoute, setTab }) {
const hubs = useFbM(() => fabTopNodes(snapshot, 8), [snapshot]);
const recent = useFbM(
() => (events || []).filter(e => e.undo_state !== 'undo').slice(0, 6),
[events]
);
if (error && !snapshot) return ;
if (!snapshot) return loading ? : null;
if (stats.isEmpty) return ;
return (
{/* A refresh that failed leaves the previous snapshot on screen. Say so
loudly — otherwise these numbers read as current when they are not. */}
{error && (
Couldn't refresh the graph — {error}. Everything below is from the last successful load.
)}
{/* Aggregate stats strip */}
{FAB_METRIC_CARDS.map(card => (
))}
{/* Two columns: left = provenance, right = graph hubs */}
No semantic relationships yet — they appear as the graph links concepts to data.
) : hubs.map(n => (
))}
{/* Recent learning */}
Recent learning
{stats.learnings.last24h > 0
? `${stats.learnings.last24h.toLocaleString()} in the last 24h`
: 'nothing in the last 24h'}
{recent.length === 0 ? (
No learning events recorded yet.
) : recent.map(row => )}
);
}
// One overview metric. The 24h delta and the sparkline are omitted (not zeroed)
// when the underlying rows carry no usable timestamps, so the card never
// implies a trend it can't evidence.
function FabricMetricCard({ label, note, metric }) {
return (