54 lines
2.2 KiB
TypeScript
54 lines
2.2 KiB
TypeScript
|
/**
|
||
|
|
* /graph — force-directed entity graph view, Obsidian-style, FULLSCREEN.
|
||
|
|
*
|
||
|
|
* Layout: fixed 100vh viewport, overlay HUD com header + AuthBar no canto,
|
||
|
|
* canvas full-bleed por baixo. Mais imersivo que o layout em container.
|
||
|
|
*/
|
||
|
|
import Link from "next/link";
|
||
|
|
import { AuthBar } from "@/components/auth-bar";
|
||
|
|
import { ForceGraphCanvas } from "@/components/force-graph-canvas";
|
||
|
|
|
||
|
|
export const dynamic = "force-dynamic";
|
||
|
|
|
||
|
|
export default function GraphPage() {
|
||
|
|
return (
|
||
|
|
<main className="fixed inset-0 bg-[#040810] overflow-hidden">
|
||
|
|
{/* Top overlay HUD */}
|
||
|
|
<div className="absolute top-0 left-0 right-0 z-30 pointer-events-none">
|
||
|
|
<div className="flex items-start justify-between gap-4 p-4 bg-gradient-to-b from-[#040810]/95 via-[#040810]/60 to-transparent pointer-events-auto">
|
||
|
|
<div>
|
||
|
|
<div className="font-mono text-[10px] text-[#5a6678] tracking-widest uppercase mb-1">
|
||
|
|
graph · entity co-mention network
|
||
|
|
</div>
|
||
|
|
<h1 className="font-mono text-xl text-[#00ff9c]">▍ Bureau Connections</h1>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2 pointer-events-auto">
|
||
|
|
<Link
|
||
|
|
href="/"
|
||
|
|
className="font-mono text-xs px-3 py-1.5 border border-[#7fdbff] text-[#7fdbff] hover:bg-[rgba(127,219,255,0.10)] rounded"
|
||
|
|
>
|
||
|
|
← home
|
||
|
|
</Link>
|
||
|
|
<AuthBar />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Bottom legend */}
|
||
|
|
<div className="absolute bottom-0 left-0 right-0 z-30 pointer-events-none">
|
||
|
|
<div className="bg-gradient-to-t from-[#040810]/95 via-[#040810]/60 to-transparent p-3">
|
||
|
|
<p className="font-mono text-[10px] text-[#5a6678] text-center max-w-3xl mx-auto">
|
||
|
|
Cada nó é uma entidade. Arestas = co-menções no mesmo chunk (peso = nº de chunks compartilhados).
|
||
|
|
Clique para expandir vizinhos + abrir a página da entidade. Dados de <code className="text-[#7fdbff]">public.entity_mentions</code>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Fullscreen canvas */}
|
||
|
|
<div className="absolute inset-0">
|
||
|
|
<ForceGraphCanvas />
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
);
|
||
|
|
}
|