{/* ── Header ────────────────────────────────────────── */}
TG
TrustGraph
RETAIL INTELLIGENCE PLATFORM
{["graph", "query", "ontology"].map((tab) => (
))}
{/* ── Domain Filter Bar ──────────────────────────────── */}
{activeTab === "graph" && (
FILTER:
{Object.entries(ONTOLOGY).map(([key, data]) => (
))}
{getAllEntities().length} entities · {RELATIONSHIPS.length} relationships
)}
{/* ── Main Content ──────────────────────────────────── */}
{/* ── Graph View ──────────────────────────────────── */}
{activeTab === "graph" && (
<>
setSelectedNode(selectedNode?.id === node.id ? null : node)}
activeFilter={activeFilter}
/>
{/* Side panel for selected node */}
{selectedNode && (
{ONTOLOGY[selectedNode.domain].label.toUpperCase()} ENTITY
{selectedNode.icon} {selectedNode.label}
PROPERTIES
{Object.entries(selectedNode.props || {}).map(([k, v]) => (
{k}
{String(v)}
))}
RELATIONSHIPS
{RELATIONSHIPS.filter(r => r.from === selectedNode.id || r.to === selectedNode.id).map((r, i) => {
const otherId = r.from === selectedNode.id ? r.to : r.from;
const other = getAllEntities().find(e => e.id === otherId);
const direction = r.from === selectedNode.id ? "→" : "←";
return (
{ const n = getAllEntities().find(e => e.id === otherId); if (n) setSelectedNode(n); }}>
{direction} {other?.label}
{r.predicate.replace(/_/g, " ")} · strength: {r.strength}
);
})}
)}
)}
{/* ── Agent Query View ────────────────────────────── */}
{activeTab === "query" && (
{/* Query selector */}
SELECT A QUERY TO SEE GRAPH-POWERED AGENT INTELLIGENCE
{DEMO_QUERIES.map((dq, idx) => (
))}
{/* Response area */}
{selectedQuery !== null && (
{/* Graph traversal steps */}
{(queryPhase === "thinking" || queryPhase === "answering" || queryPhase === "done") && (
◈ GRAPH TRAVERSAL
{DEMO_QUERIES[selectedQuery].thinking.map((step, i) => (
{i < thinkingStep && ✓}
{step}
))}
{queryPhase === "thinking" && (
Traversing graph...
)}
)}
{/* Answer */}
{(queryPhase === "answering" || queryPhase === "done") && (
AGENT RESPONSE
{DEMO_QUERIES[selectedQuery].triples} triples traversed · {DEMO_QUERIES[selectedQuery].entities.length} entities resolved
setQueryPhase("done")}
/>
)}
)}
{/* Graph visualization alongside query */}
{}} activeFilter={null} />
)}
{/* ── Ontology View ──────────────────────────────── */}
{activeTab === "ontology" && (
ONTOLOGY SCHEMA · RETAIL INTELLIGENCE DOMAIN
{/* Ontology class cards */}
{Object.entries(ONTOLOGY).map(([key, data]) => (
{data.description}
PROPERTIES
{data.properties.map((p) => (
{p}
))}
INSTANCES ({data.subclasses.length})
{data.subclasses.map((sc) => (
{sc.label}
{sc.id}
))}
))}
{/* Relationship predicates */}
RELATIONSHIP PREDICATES
{[...new Set(RELATIONSHIPS.map(r => r.predicate))].map((pred) => {
const sample = RELATIONSHIPS.find(r => r.predicate === pred);
const fromDomain = sample.domain[0];
const toDomain = sample.domain[1];
return (
{pred.replace(/_/g, " ")}
{ONTOLOGY[fromDomain].label}
{" → "}
{ONTOLOGY[toDomain].label}
);
})}
{/* Triple count summary */}
{[
{ label: "Classes", value: 4 },
{ label: "Instances", value: getAllEntities().length },
{ label: "Predicates", value: [...new Set(RELATIONSHIPS.map(r => r.predicate))].length },
{ label: "Triples", value: RELATIONSHIPS.length },
].map((s) => (
{s.value}
{s.label.toUpperCase()}
))}
)}
{/* ── Bottom Status Bar ──────────────────────────────── */}
◈ Ontology: Consumer × Agent × Retail × Brand
⬡ GraphRAG: Active
⚡ Agent Orchestration: Online
● Context Graph Connected
|
trustgraph.ai