feat(frontend): schema-linking viewer (mermaid+table) + markdown view

TDD: SchemaLinkingViewer with mocked renderMermaid, toggle flowchart↔table, ≤45 element cap with Italian notice. MarkdownView renders mermaid fences. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-28 12:43:11 +02:00
parent f933b544ff
commit 2a23de6825
6 changed files with 2825 additions and 10 deletions
@@ -0,0 +1,178 @@
+import React, { useEffect, useState } from "react";
+import { renderMermaid } from "./mermaid";
+
+const CAP = 45;
+
+export interface Candidate {
+  kind: "table" | "column";
+  name: string;
+  decision: "promoted" | "excluded" | "pending";
+  signals?: Record<string, unknown>;
+  evidence?: string[];
+}
+
+export interface Join {
+  from: string;
+  to: string;
+  source?: string;
+}
+
+export interface SchemaLinking {
+  question?: string;
+  candidates: Candidate[];
+  joins: Join[];
+  excluded: { kind: string; name: string }[];
+  open_questions: string[];
+}
+
+function buildFlowchart(candidates: Candidate[], joins: Join[]): string {
+  const promoted = candidates.filter((c) => c.decision === "promoted");
+  const nodeId = (name: string) => name.replace(/[^a-zA-Z0-9]/g, "_");
+
+  const lines: string[] = ["flowchart TB"];
+
+  for (const c of promoted) {
+    const id = nodeId(c.name);
+    const tooltip = c.evidence?.length
+      ? ` %% ${c.evidence[0]}`
+      : c.signals && Object.keys(c.signals).length
+      ? ` %% ${Object.keys(c.signals).join(", ")}`
+      : "";
+    const shape = c.kind === "table" ? `[${c.name}]` : `(${c.name})`;
+    lines.push(`  ${id}${shape}${tooltip}`);
+  }
+
+  const promotedNames = new Set(promoted.map((c) => c.name));
+  for (const j of joins) {
+    if (promotedNames.has(j.from) && promotedNames.has(j.to)) {
+      lines.push(`  ${nodeId(j.from)} --> ${nodeId(j.to)}`);
+    }
+  }
+
+  return lines.join("\n");
+}
+
+function buildHierarchicalRows(candidates: Candidate[]) {
+  const promoted = candidates.filter((c) => c.decision === "promoted");
+  const tables = promoted.filter((c) => c.kind === "table");
+  const columns = promoted.filter((c) => c.kind === "column");
+
+  // Group columns under their table (column name format: "table.column")
+  const grouped: { table: Candidate; columns: Candidate[] }[] = tables.map(
+    (t) => ({
+      table: t,
+      columns: columns.filter((col) => col.name.startsWith(t.name + ".")),
+    })
+  );
+
+  // Orphan columns not attached to any promoted table
+  const attachedCols = new Set(
+    grouped.flatMap((g) => g.columns.map((c) => c.name))
+  );
+  const orphans = columns.filter((c) => !attachedCols.has(c.name));
+
+  return { grouped, orphans };
+}
+
+export function SchemaLinkingViewer({ linking }: { linking: SchemaLinking }) {
+  const oversized = linking.candidates.length > CAP;
+  const [view, setView] = useState<"chart" | "table">(
+    oversized ? "table" : "chart"
+  );
+  const [svg, setSvg] = useState<string>("");
+
+  useEffect(() => {
+    if (view !== "chart" || oversized) return;
+    let cancelled = false;
+    const def = buildFlowchart(linking.candidates, linking.joins);
+    renderMermaid(def).then((s) => {
+      if (!cancelled) setSvg(s);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [view, linking, oversized]);
+
+  const { grouped, orphans } = buildHierarchicalRows(linking.candidates);
+
+  return (
+    <div className="schema-linking-viewer">
+      <div className="flex gap-2 mb-2">
+        <button
+          onClick={() => setView("chart")}
+          disabled={oversized}
+          className={view === "chart" ? "font-bold" : ""}
+        >
+          Grafico
+        </button>
+        <button
+          onClick={() => setView("table")}
+          className={view === "table" ? "font-bold" : ""}
+        >
+          Tabella
+        </button>
+      </div>
+
+      {oversized && (
+        <p className="text-sm text-amber-600">
+          Troppi elementi per il grafico, usa la tabella
+        </p>
+      )}
+
+      {view === "chart" && !oversized && (
+        <div
+          className="mermaid-container overflow-auto"
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: svg }}
+        />
+      )}
+
+      {view === "table" && (
+        <table className="w-full text-sm border-collapse">
+          <thead>
+            <tr>
+              <th className="text-left border-b py-1">Nome</th>
+              <th className="text-left border-b py-1">Tipo</th>
+              <th className="text-left border-b py-1">Perché</th>
+            </tr>
+          </thead>
+          <tbody>
+            {grouped.map(({ table, columns: cols }) => (
+              <React.Fragment key={table.name}>
+                <tr className="font-semibold bg-muted/30">
+                  <td className="py-1 pl-1">{table.name}</td>
+                  <td>tabella</td>
+                  <td className="text-xs text-muted-foreground">
+                    {table.evidence?.[0] ?? ""}
+                  </td>
+                </tr>
+                {cols.map((col) => (
+                  <tr key={col.name} className="pl-4">
+                    <td className="py-0.5 pl-4 text-muted-foreground">
+                      {col.name}
+                    </td>
+                    <td>colonna</td>
+                    <td className="text-xs text-muted-foreground">
+                      {col.evidence?.[0] ?? ""}
+                    </td>
+                  </tr>
+                ))}
+              </React.Fragment>
+            ))}
+            {orphans.map((col) => (
+              <tr key={col.name}>
+                <td className="py-0.5 pl-1 text-muted-foreground">
+                  {col.name}
+                </td>
+                <td>colonna</td>
+                <td className="text-xs text-muted-foreground">
+                  {col.evidence?.[0] ?? ""}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}