@green-on-grey/ui-kit 1.13.0 → 1.15.0

package/dist/components/Graph.d.ts

@@ -11,13 +11,19 @@ export type GraphNode = {
     muted?: boolean;
     /** The label shows only on hover, focus or highlight. */
     hideLabel?: boolean;
+    /** With `rows` on the graph: the id of the row of the node and its place in it, ascending left to right. */
+    row?: string;
+    order?: number;
 };
+/** A link; `double` draws it as a double line — another layer of links, told apart without colour
+ * (FTR.HMR.DEV-0003 R15); it combines with `dashed`. */
 export type GraphEdge = {
     source: string;
     target: string;
     weight?: number;
     directed?: boolean;
     dashed?: boolean;
+    double?: boolean;
     title?: string;
 };
 export type GraphSelection = {
@@ -28,6 +34,11 @@ export type GraphSelection = {
     source: string;
     target: string;
 } | null;
+/** A row of the row layout, top to bottom in the order given; the label is drawn at its left. */
+export type GraphRow = {
+    id: string;
+    label: string;
+};
 /** A node with its place; the fields of d3-force are spelled out, so the types of the kit need no d3 types. */
 type Placed = GraphNode & {
     r: number;
@@ -39,18 +50,52 @@ type Placed = GraphNode & {
     fx?: number | null;
     fy?: number | null;
 };
+type Field = {
+    w: number;
+    h: number;
+};
+/** The places of the nodes, the size of the field and, in the row layout, the rows with their middle line. */
+type Placement = {
+    placed: Placed[];
+    field: Field;
+    rows?: {
+        id: string;
+        label: string;
+        y: number;
+        x: number;
+        x2: number;
+    }[];
+};
 /** Ids within `depth` steps of `from`, edges taken both ways. */
 export declare function neighbours(edges: GraphEdge[], from: string, depth: number): Set<string>;
 /** Positions of the nodes (exported for the tests): a force layout computed once per data. The start of
  * d3-force is deterministic, so the same data gives the same picture. */
 export declare function layout(nodes: GraphNode[], edges: GraphEdge[]): Placed[];
+/** The row layout (FTR.HMR.DEV-0002 R15, exported for the tests): a row per `rows` entry that has nodes, top to
+ * bottom in the given order; in a row the nodes by `order`, then id, left to right. A node whose row is not
+ * among `rows` goes to a last row without a label. The block is centred in a field at least as big as that of
+ * the force layout. */
+export declare function rowLayout(nodes: GraphNode[], rows: GraphRow[]): Placement;
+/** The line of an edge: straight, or in the row layout an arc between two nodes of one row — above when it goes
+ * right, below when it goes left, so links both ways do not cover each other. A directed line ends at the
+ * circle of the target. */
+export declare function edgeLine(a: Placed, b: Placed, directed: boolean, arcs: boolean): {
+    d?: string;
+    hit?: string;
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+};
 /** A graph of nodes and links (FTR.NAB.CMN-0003 R19, FTR.HMR.DEV-0002 R15, R16).
  * Hovering highlights the neighbours, a click pins the selection; the wheel zooms,
- * dragging moves. `focus` highlights a node and its neighbours within `depth`
- * steps; `onOpen` is called on a double click or Enter on a node. The kit knows
- * nothing of what the nodes are: labels and the legend come from the product.
- * The layout runs when `nodes` or `edges` change identity: keep them stable (useMemo). */
-export declare function Graph({ nodes, edges, ariaLabel, selected, onSelect, focus, depth, onOpen, legend, nodeLabel }: {
+ * dragging the field moves it. `focus` highlights a node and its neighbours within `depth`
+ * steps; `onOpen` is called on a double click or Enter on a node. With `rows` the nodes stand in
+ * rows (`GraphNode.row`, `order`) instead of the force layout; with `draggable` a node can be moved
+ * and a button puts the moved nodes back. The kit knows nothing of what the nodes are: labels,
+ * rows and the legend come from the product.
+ * The layout runs when `nodes`, `edges` or `rows` change identity: keep them stable (useMemo). */
+export declare function Graph({ nodes, edges, ariaLabel, selected, onSelect, focus, depth, onOpen, legend, nodeLabel, rows, draggable }: {
     nodes: GraphNode[];
     edges: GraphEdge[];
     ariaLabel: string;
@@ -64,5 +109,7 @@ export declare function Graph({ nodes, edges, ariaLabel, selected, onSelect, foc
         label: string;
     }[];
     nodeLabel?: (n: GraphNode) => string;
+    rows?: GraphRow[];
+    draggable?: boolean;
 }): import("react").JSX.Element;
 export {};

package/dist/index.d.ts

@@ -4,6 +4,6 @@ export { Button, IconButton } from "./components/Button";
 export { Tabs } from "./components/Tabs";
 export { Menu } from "./components/Menu";
 export { TopBar, type LinkComponent, type TopBarSection } from "./components/TopBar";
-export { Graph, neighbours, type GraphNode, type GraphEdge, type GraphSelection } from "./components/Graph";
+export { Graph, neighbours, type GraphNode, type GraphEdge, type GraphSelection, type GraphRow } from "./components/Graph";
 export { Modal, ToastProvider, useToast, Avatar, Switch, Empty, Loading, useOutside, type ToastSpec } from "./components/ui";
 export { UIKIT_NS } from "./i18n";