@webpieces/nx-webpieces-rules 0.3.333 → 0.3.334

package/src/lib/graph-visualizer.d.ts

@@ -5,34 +5,84 @@
  * - DOT format (for Graphviz)
  * - Interactive HTML (using viz.js)
  *
- * Output files go to tmp/webpieces/ for easy viewing without committing.
+ * All behavior lives on the injectable GraphVisualizer class so webpieces DI +
+ * @DocumentDesign can wire it — module-scope functions are a dead end the DI
+ * graph can't reach.
  */
 import type { EnhancedGraph } from './graph-sorter';
-/**
- * Generate Graphviz DOT format from the graph
- */
-export declare function generateDot(graph: EnhancedGraph, title?: string): string;
-/**
- * Generate interactive HTML with embedded SVG using viz.js
- */
-export declare function generateHTML(dot: string, title?: string): string;
-interface VisualizationPaths {
+export declare class VisualizationPaths {
     htmlPath: string;
+    constructor(htmlPath: string);
+}
+export declare class GraphVisualizer {
+    private readonly names;
+    private readonly responsibilities;
+    /**
+     * Fill color for an env set — the color of the first env in the set that has
+     * a known color, else the default.
+     */
+    private frameworkColor;
+    /**
+     * Role border styling — fill stays keyed on framework; the border shows a
+     * project's ROLE at a glance. Server and client are the top-level runnable
+     * nodes, so they get bold, colored borders to stand out:
+     *   server       → thick GREEN border (a runnable server app)
+     *   client       → thick RED border   (a client app, e.g. angular)
+     *   designed-lib → bold border        (a library with a generated @DocumentDesign design)
+     *   lib / other  → plain thin border
+     */
+    private roleBorderAttrs;
+    /**
+     * Click-through href for a node: the project's committed design.html, made
+     * relative to architecture/dependencies.html. Returns null when the project
+     * has no generated DI design (no design.json → no clickable design page).
+     */
+    private designHtmlHref;
+    /**
+     * Generate Graphviz DOT format from the graph
+     */
+    generateDot(graph: EnhancedGraph, title?: string): string;
+    private dotNodes;
+    private dotEdges;
+    /**
+     * Generate interactive HTML with embedded SVG using viz.js
+     */
+    generateHTML(dot: string, title?: string, lockControl?: string, responsibilitiesHtml?: string): string;
+    /**
+     * The lock control (a single-select dropdown, rendered above the legend).
+     * Picking a module LOCKS the graph into that box's hover view — its full
+     * ancestor + descendant chain stays lit while everything else stays dimmed —
+     * and narrows the responsibilities list below the graph to just that chain.
+     * The first option, "All", is the default and clears the lock. Hover still
+     * works on top of a lock; leaving a box returns to the locked view.
+     *
+     * Options are ordered by level DESCENDING to match the responsibilities cards.
+     */
+    lockControl(graph: EnhancedGraph): string;
+    private styles;
+    private componentStyles;
+    private legend;
+    /**
+     * The page script. The browser code lives in graph-visualizer.client.js (a
+     * plain .js asset, NOT a TS template literal) so its dim/highlight/lock
+     * functions can be ordinary browser functions — the TS lint rules that scan
+     * .ts template strings would otherwise forbid them, and browser JS cannot
+     * carry TS return annotations. We inline it and substitute the DOT.
+     */
+    private script;
+    /**
+     * Write the committed architecture visualization to
+     * architecture/dependencies.html, next to dependencies.json.
+     *
+     * This is a checked-in artifact, regenerated deterministically by
+     * architecture:generate so the boxes stay clickable into each project's
+     * design.html. The DOT is embedded in the HTML (rendered client-side by
+     * viz.js). Output is deterministic (sorted graph in → same bytes out) so git
+     * only shows a diff when the architecture actually changed.
+     */
+    writeVisualization(graph: EnhancedGraph, workspaceRoot: string, title?: string): VisualizationPaths;
+    /**
+     * Open the HTML visualization in the default browser
+     */
+    openVisualization(htmlPath: string): boolean;
 }
-/**
- * Write the committed architecture visualization to architecture/dependencies.html,
- * next to dependencies.json.
- *
- * This is a checked-in artifact, regenerated deterministically by
- * architecture:generate so the boxes stay clickable into each project's
- * design.html. The DOT is embedded in the HTML (rendered client-side by
- * viz.js), so no separate .dot file is committed — same as design.html. Output
- * is deterministic (sorted graph in → same bytes out) so git only shows a diff
- * when the architecture actually changed.
- */
-export declare function writeVisualization(graph: EnhancedGraph, workspaceRoot: string, title?: string): VisualizationPaths;
-/**
- * Open the HTML visualization in the default browser
- */
-export declare function openVisualization(htmlPath: string): boolean;
-export {};