@anchrd/intel-ui 0.7.0 → 0.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {

package/src/i18n/en.json

@@ -120,7 +120,6 @@
   "view.showEditor": "Back to the editor",
   "view.showRuns": "Show this flow's runs",
   "view.graph": "Relation graph",
-  "view.graphDescription": "{nodes} nodes and {edges} relationships you are allowed to see.",
   "view.graphTruncated": "{omitted} more left out — this view draws at most {limit}.",
   "view.graphEmpty": "Nothing here that you may see.",
   "view.graphFailed": "The graph could not be loaded.",

package/src/knowledge-graph/graph-notice.tsx

@@ -0,0 +1,21 @@
+import type { RelationGraph } from "@anchrd/intel-contract";
+import type { I18n } from "@/i18n/i18n.types.ts";
+
+/**
+ * The one line above a graph, and it appears only when there is something to say (#88).
+ *
+ * ⚠️ It counted what was drawn directly below it — "3 nodes and 0 relationships you are allowed to
+ * see" — permanently, above every graph. Three nodes are three nodes; the reader sees them. What
+ * they cannot see is what the view stopped short of, and that is what stayed.
+ *
+ * Its own file because `knowledge-graph.tsx` pulls Sigma in at module level, and Sigma needs WebGL:
+ * a case about this line could not render there at all.
+ */
+export function GraphNotice({ data, i18n }: { data: RelationGraph; i18n: I18n }) {
+  if (data.omitted === 0) return null;
+  return (
+    <p className="border-b px-6 py-3 text-sm text-muted-foreground">
+      {i18n.t("view.graphTruncated", { omitted: data.omitted, limit: data.limit })}
+    </p>
+  );
+}

package/src/knowledge-graph/knowledge-graph.tsx

@@ -3,6 +3,7 @@ import { ControlsContainer, SigmaContainer, useCamera, useRegisterEvents } from
 import { LocateFixed, Minus, Plus } from "lucide-react";
 import { useEffect, useMemo } from "react";
 import type { I18n } from "@/i18n/i18n.types.ts";
+import { GraphNotice } from "./graph-notice.tsx";
 import { createRelationGraph, resolveGraphColor } from "./knowledge-graph.ts";
 
 function labelColors() {
@@ -77,16 +78,7 @@ export function RelationGraphView({
   const byId = useMemo(() => new Map(data.nodes.map((node) => [node.id, node])), [data.nodes]);
   return (
     <section aria-label={i18n.t("view.graph")} className="flex min-h-0 flex-1 flex-col">
-      <p className="border-b px-6 py-3 text-sm text-muted-foreground">
-        {i18n.t("view.graphDescription", { nodes: data.nodes.length, edges: data.edges.length })}
-        {/* ⚠️ The cut-off is said out loud. A graph that quietly stopped drawing would read as "this
-            folder holds nothing else", which is worse than a graph that admits it is partial. */}
-        {data.omitted > 0 ? (
-          <span className="ml-2 rounded-md border px-2 py-0.5 text-xs">
-            {i18n.t("view.graphTruncated", { omitted: data.omitted, limit: data.limit })}
-          </span>
-        ) : null}
-      </p>
+      <GraphNotice data={data} i18n={i18n} />
       <div className="min-h-0 flex-1 bg-muted/20">
         {data.nodes.length === 0 ? (
           <div className="grid h-full place-items-center p-8 text-sm text-muted-foreground">