@webpieces/nx-webpieces-rules 0.4.871 → 0.4.873

package/src/lib/runtime-html-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"runtime-html-page.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/runtime-html-page.ts"],"names":[],"mappings":";;;AAAA,6DAA2E;AAC3E,uDAAmD;AAEnD,yDAAqD;AACrD,qDAAiD;AACjD,yDAAkF;AAClF,uDAAkD;AAClD,2DAAiD;AAEjD;;;;;;;;GAQG;AACH,MAAa,eAAe;IAOH;IAEA;IARJ,YAAY,GAAG,IAAI,sCAAiB,EAAE,CAAC;IACvC,QAAQ,GAAG,IAAI,8BAAa,EAAE,CAAC;IAChD,sGAAsG;IACrF,QAAQ,GAAG,IAAI,+BAAa,EAAE,CAAC;IAEhD,YACqB,WAAyB,GAAW,EAAE,CACnD,IAAA,qCAAkB,EAAC,8BAA8B,CAAC,EACrC,WAAyB,GAAW,EAAE,CACnD,IAAA,qCAAkB,EAAC,wBAAwB,CAAC;QAH/B,aAAQ,GAAR,QAAQ,CAC6B;QACrC,aAAQ,GAAR,QAAQ,CACuB;IACjD,CAAC;IAEJ,MAAM,CACF,KAAuB,EACvB,KAAa,EACb,KAAmB,EACnB,oBAA6B,IAAI;QAEjC,OAAO;;;;;;;aAOF,KAAK;;aAEL,IAAI,CAAC,MAAM,EAAE;;;UAGhB,KAAK;MACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;;;MAGpB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;;MAExB,IAAA,8BAAU,GAAE;cACJ,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;cACtB,IAAI,CAAC,QAAQ,EAAE;cACf,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;cAClB,IAAI,kCAAe,EAAE,CAAC,MAAM,EAAE;cAC9B,IAAI,gCAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,MAAM,EAAE;;QAE3D,CAAC;IACL,CAAC;IAED;;;;;;OAMG;IACK,MAAM,CAAC,KAAuB;QAClC,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,2CAAwB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/F,CAAC;IAED;;;;;;;;OAQG;IACK,MAAM;QACV,OAAO;;;;;;;UAOL,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;UACtB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;UAC1B,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAgCjC,IAAI,kCAAe,EAAE,CAAC,MAAM,EAAE;sFAC8C,CAAC;IACnF,CAAC;CACJ;AAhHD,0CAgHC","sourcesContent":["import { GraphRenderModel, GraphFilterAssets } from './graph-render-model';\nimport { RuntimeDetails } from './runtime-details';\nimport type { RuntimeGraph } from './runtime-graph-model';\nimport { GraphNavigation } from './graph-navigation';\nimport { SavedSnapshot } from './saved-snapshot';\nimport { CLIENT_MODEL_PLACEHOLDER, readCompiledClient } from './graph-visualizer';\nimport { GraphNodeMenu } from './graph-node-menu';\nimport { legendHtml } from './runtime-viz-theme';\n\n/**\n * The runtime-architecture HTML page: its styles, the shared floating node menu, the graph host\n * and the legend.\n *\n * A CLASS rather than a bag of module functions so the client-text seam can be a constructor\n * parameter the way GraphVisualizer's is: the default reads the COMPILED sibling, which exists in\n * dist and in the published tarball but NOT in a source checkout, and a unit test running from\n * source hands in the text itself instead of requiring the package to have been built first.\n */\nexport class RuntimeHtmlPage {\n    private readonly filterAssets = new GraphFilterAssets();\n    private readonly snapshot = new SavedSnapshot();\n    /** The ONE floating-node-menu implementation, shared with dependencies.html and every design.html. */\n    private readonly nodeMenu = new GraphNodeMenu();\n\n    constructor(\n        private readonly clientJs: () => string = (): string =>\n            readCompiledClient('runtime-visualizer.client.js'),\n        private readonly filterJs: () => string = (): string =>\n            readCompiledClient('graph-filter.client.js'),\n    ) {}\n\n    render(\n        model: GraphRenderModel,\n        title: string,\n        graph: RuntimeGraph,\n        showExternalNodes: boolean = true,\n    ): string {\n        return `<!DOCTYPE html>\n<html>\n<head>\n    <!-- REQUIRED: the cron node's label is a literal ⏰, and the DOT is embedded in this file. With\n         no declared charset the browser falls back to a locale guess and renders it as mojibake\n         (\"â °\") whenever the page is served without a charset header. -->\n    <meta charset=\"utf-8\">\n    <title>${title}</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/@viz-js/viz@3.28.0/dist/viz-global.js\"></script>\n    <style>${this.styles()}</style>\n</head>\n<body>\n    <h1>${title}</h1>\n    ${this.snapshot.html()}\n    <p class=\"hint\">💡 <strong>Click any box</strong> for its menu — <strong>Lock</strong> dims every other box and every arrow so one service, queue, datastore or external system stands alone; <strong>Unlock</strong> restores the whole picture.</p>\n    <p class=\"hint\"><strong>Filter Unconnected</strong> keeps incoming and outgoing chains and compacts the picture. <strong>Turn off Filter</strong> restores it.</p>\n    ${this.filterAssets.html()}\n    <div id=\"graph\"></div>\n    ${legendHtml()}\n    <script>${this.nodeMenu.script()}</script>\n    <script>${this.filterJs()}</script>\n    <script>${this.script(model)}</script>\n    <script>${new GraphNavigation().script()}</script>\n    <script>${new RuntimeDetails(graph, showExternalNodes).script()}</script>\n</body>\n</html>`;\n    }\n\n    /**\n     * The browser half lives in runtime-visualizer.client.ts (matching graph-visualizer.client.ts)\n     * rather than in a template literal here: it renders with @viz-js/viz v3, redraws every queue\n     * node as a true horizontal cylinder, and wires the shared node menu onto every box — more\n     * logic than belongs inline in a .ts string. The substitution is a blind split/join, so the\n     * render-model placeholder must appear EXACTLY ONCE in the client.\n     */\n    private script(model: GraphRenderModel): string {\n        return this.clientJs().split(CLIENT_MODEL_PLACEHOLDER).join(this.filterAssets.json(model));\n    }\n\n    /**\n     * Page styles, including the shared menu stylesheet: the clickable cursor + blue glow on every\n     * box, and the dim/undim rules the lock toggles, scoped to this page's `#graph` host. Those two\n     * blocks are shared verbatim with architecture/dependencies.html and every design.html.\n     *\n     * The legend swatches are hand-drawn inline SVG on purpose: the alternative is shelling out to\n     * Graphviz at generate time, which would make writing the HTML depend on a `dot` binary being\n     * installed — a dependency this tool does not otherwise have, since rendering is client-side.\n     */\n    private styles(): string {\n        return `\n        body { margin: 0; padding: 20px; font-family: Arial, sans-serif; background: #f5f5f5; }\n        h1 { text-align: center; color: #333; }\n        .hint { text-align: center; color: #555; margin: 0 0 16px; }\n        /* Every box is clickable and opens the shared floating menu, so the menu's own stylesheet\n         * carries the cursor + blue glow and the dim/undim rules the lock toggles. Shared verbatim\n         * with architecture/dependencies.html and every project's design.html. */\n        ${this.nodeMenu.styles()}\n        ${this.filterAssets.styles()}\n        ${this.nodeMenu.dimStyles('#graph')}\n        #graph { text-align: center; background: white; padding: 20px; border-radius: 8px; overflow-x: auto; }\n        #graph svg { max-width: 100%; height: auto; }\n        .legend {\n            margin: 20px auto;\n            max-width: 1100px;\n            padding: 15px 20px;\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n        .legend h2 { margin-top: 0; color: #333; }\n        .legend-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }\n        .legend-col h3 { margin: 0 0 10px; color: #333; font-size: 15px; border-bottom: 1px solid #eee; padding-bottom: 5px; }\n        .legend-item { margin: 9px 0; display: flex; align-items: center; gap: 10px; line-height: 1.4; color: #444; }\n        /* Prose rows carry no swatch, so they must NOT be flex containers: flex would promote every\n         * inline <strong>/<em>/<code> to a flex item and shred the sentence into columns. */\n        .legend-note { margin: 9px 0; line-height: 1.5; color: #444; }\n        .legend-box-anatomy {\n            margin: 0 0 12px;\n            padding: 8px 10px;\n            background: #f7f7f7;\n            border-radius: 4px;\n            font-family: monospace;\n            font-size: 12px;\n            line-height: 1.5;\n            color: #333;\n            white-space: pre;\n            overflow-x: auto;\n        }\n        .sw { flex: 0 0 auto; display: inline-flex; }\n        code { background: #f2f2f2; padding: 1px 4px; border-radius: 3px; font-family: monospace; }\n        ${new GraphNavigation().styles()}\n        @media (max-width: 900px) { .legend-columns { grid-template-columns: 1fr; } }`;\n    }\n}\n"]}
+{"version":3,"file":"runtime-html-page.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/runtime-html-page.ts"],"names":[],"mappings":";;;AAAA,6DAA2E;AAC3E,uDAAmD;AAEnD,yDAAuE;AACvE,qDAAiD;AACjD,yDAAkF;AAClF,uDAAkD;AAClD,2DAAiD;AAEjD;;;;;;;;GAQG;AACH,MAAa,eAAe;IAOH;IAEA;IARJ,YAAY,GAAG,IAAI,sCAAiB,EAAE,CAAC;IACvC,QAAQ,GAAG,IAAI,8BAAa,EAAE,CAAC;IAChD,sGAAsG;IACrF,QAAQ,GAAG,IAAI,+BAAa,EAAE,CAAC;IAEhD,YACqB,WAAyB,GAAW,EAAE,CACnD,IAAA,qCAAkB,EAAC,8BAA8B,CAAC,EACrC,WAAyB,GAAW,EAAE,CACnD,IAAA,qCAAkB,EAAC,wBAAwB,CAAC;QAH/B,aAAQ,GAAR,QAAQ,CAC6B;QACrC,aAAQ,GAAR,QAAQ,CACuB;IACjD,CAAC;IAEJ,MAAM,CACF,KAAuB,EACvB,KAAa,EACb,KAAmB,EACnB,oBAA6B,IAAI;QAEjC,OAAO;;;;;;;aAOF,KAAK;;aAEL,IAAI,CAAC,MAAM,EAAE;;;UAGhB,KAAK;MACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;;;MAGpB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;;MAExB,IAAA,8BAAU,GAAE;cACJ,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;cACtB,IAAI,CAAC,QAAQ,EAAE;cACf,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;cAClB,IAAI,kCAAe,CAAC,mCAAgB,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE;cACtD,IAAI,gCAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,MAAM,EAAE;;QAE3D,CAAC;IACL,CAAC;IAED;;;;;;OAMG;IACK,MAAM,CAAC,KAAuB;QAClC,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,2CAAwB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/F,CAAC;IAED;;;;;;;;OAQG;IACK,MAAM;QACV,OAAO;;;;;;;UAOL,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;UACtB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;UAC1B,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAgCjC,IAAI,kCAAe,CAAC,mCAAgB,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE;sFACsB,CAAC;IACnF,CAAC;CACJ;AAhHD,0CAgHC","sourcesContent":["import { GraphRenderModel, GraphFilterAssets } from './graph-render-model';\nimport { RuntimeDetails } from './runtime-details';\nimport type { RuntimeGraph } from './runtime-graph-model';\nimport { GraphNavigation, NavigationLayout } from './graph-navigation';\nimport { SavedSnapshot } from './saved-snapshot';\nimport { CLIENT_MODEL_PLACEHOLDER, readCompiledClient } from './graph-visualizer';\nimport { GraphNodeMenu } from './graph-node-menu';\nimport { legendHtml } from './runtime-viz-theme';\n\n/**\n * The runtime-architecture HTML page: its styles, the shared floating node menu, the graph host\n * and the legend.\n *\n * A CLASS rather than a bag of module functions so the client-text seam can be a constructor\n * parameter the way GraphVisualizer's is: the default reads the COMPILED sibling, which exists in\n * dist and in the published tarball but NOT in a source checkout, and a unit test running from\n * source hands in the text itself instead of requiring the package to have been built first.\n */\nexport class RuntimeHtmlPage {\n    private readonly filterAssets = new GraphFilterAssets();\n    private readonly snapshot = new SavedSnapshot();\n    /** The ONE floating-node-menu implementation, shared with dependencies.html and every design.html. */\n    private readonly nodeMenu = new GraphNodeMenu();\n\n    constructor(\n        private readonly clientJs: () => string = (): string =>\n            readCompiledClient('runtime-visualizer.client.js'),\n        private readonly filterJs: () => string = (): string =>\n            readCompiledClient('graph-filter.client.js'),\n    ) {}\n\n    render(\n        model: GraphRenderModel,\n        title: string,\n        graph: RuntimeGraph,\n        showExternalNodes: boolean = true,\n    ): string {\n        return `<!DOCTYPE html>\n<html>\n<head>\n    <!-- REQUIRED: the cron node's label is a literal ⏰, and the DOT is embedded in this file. With\n         no declared charset the browser falls back to a locale guess and renders it as mojibake\n         (\"â °\") whenever the page is served without a charset header. -->\n    <meta charset=\"utf-8\">\n    <title>${title}</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/@viz-js/viz@3.28.0/dist/viz-global.js\"></script>\n    <style>${this.styles()}</style>\n</head>\n<body>\n    <h1>${title}</h1>\n    ${this.snapshot.html()}\n    <p class=\"hint\">💡 <strong>Click any box</strong> for its menu — <strong>Lock</strong> dims every other box and every arrow so one service, queue, datastore or external system stands alone; <strong>Unlock</strong> restores the whole picture.</p>\n    <p class=\"hint\"><strong>Filter Unconnected</strong> keeps incoming and outgoing chains and compacts the picture. <strong>Turn off Filter</strong> restores it.</p>\n    ${this.filterAssets.html()}\n    <div id=\"graph\"></div>\n    ${legendHtml()}\n    <script>${this.nodeMenu.script()}</script>\n    <script>${this.filterJs()}</script>\n    <script>${this.script(model)}</script>\n    <script>${new GraphNavigation(NavigationLayout.TOOLBAR).script()}</script>\n    <script>${new RuntimeDetails(graph, showExternalNodes).script()}</script>\n</body>\n</html>`;\n    }\n\n    /**\n     * The browser half lives in runtime-visualizer.client.ts (matching graph-visualizer.client.ts)\n     * rather than in a template literal here: it renders with @viz-js/viz v3, redraws every queue\n     * node as a true horizontal cylinder, and wires the shared node menu onto every box — more\n     * logic than belongs inline in a .ts string. The substitution is a blind split/join, so the\n     * render-model placeholder must appear EXACTLY ONCE in the client.\n     */\n    private script(model: GraphRenderModel): string {\n        return this.clientJs().split(CLIENT_MODEL_PLACEHOLDER).join(this.filterAssets.json(model));\n    }\n\n    /**\n     * Page styles, including the shared menu stylesheet: the clickable cursor + blue glow on every\n     * box, and the dim/undim rules the lock toggles, scoped to this page's `#graph` host. Those two\n     * blocks are shared verbatim with architecture/dependencies.html and every design.html.\n     *\n     * The legend swatches are hand-drawn inline SVG on purpose: the alternative is shelling out to\n     * Graphviz at generate time, which would make writing the HTML depend on a `dot` binary being\n     * installed — a dependency this tool does not otherwise have, since rendering is client-side.\n     */\n    private styles(): string {\n        return `\n        body { margin: 0; padding: 20px; font-family: Arial, sans-serif; background: #f5f5f5; }\n        h1 { text-align: center; color: #333; }\n        .hint { text-align: center; color: #555; margin: 0 0 16px; }\n        /* Every box is clickable and opens the shared floating menu, so the menu's own stylesheet\n         * carries the cursor + blue glow and the dim/undim rules the lock toggles. Shared verbatim\n         * with architecture/dependencies.html and every project's design.html. */\n        ${this.nodeMenu.styles()}\n        ${this.filterAssets.styles()}\n        ${this.nodeMenu.dimStyles('#graph')}\n        #graph { text-align: center; background: white; padding: 20px; border-radius: 8px; overflow-x: auto; }\n        #graph svg { max-width: 100%; height: auto; }\n        .legend {\n            margin: 20px auto;\n            max-width: 1100px;\n            padding: 15px 20px;\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n        .legend h2 { margin-top: 0; color: #333; }\n        .legend-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }\n        .legend-col h3 { margin: 0 0 10px; color: #333; font-size: 15px; border-bottom: 1px solid #eee; padding-bottom: 5px; }\n        .legend-item { margin: 9px 0; display: flex; align-items: center; gap: 10px; line-height: 1.4; color: #444; }\n        /* Prose rows carry no swatch, so they must NOT be flex containers: flex would promote every\n         * inline <strong>/<em>/<code> to a flex item and shred the sentence into columns. */\n        .legend-note { margin: 9px 0; line-height: 1.5; color: #444; }\n        .legend-box-anatomy {\n            margin: 0 0 12px;\n            padding: 8px 10px;\n            background: #f7f7f7;\n            border-radius: 4px;\n            font-family: monospace;\n            font-size: 12px;\n            line-height: 1.5;\n            color: #333;\n            white-space: pre;\n            overflow-x: auto;\n        }\n        .sw { flex: 0 0 auto; display: inline-flex; }\n        code { background: #f2f2f2; padding: 1px 4px; border-radius: 3px; font-family: monospace; }\n        ${new GraphNavigation(NavigationLayout.TOOLBAR).styles()}\n        @media (max-width: 900px) { .legend-columns { grid-template-columns: 1fr; } }`;\n    }\n}\n"]}