@nu-art/ts-dependency-viewer-frontend 0.400.7

package/_ats/ATS_DependencyGraph/ATS_DependencyGraph.d.ts

@@ -0,0 +1,9 @@
+import { AppToolsScreen, ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+type State = {};
+export declare class ATS_DependencyViewer extends ComponentSync<{}, State> {
+    static defaultProps: {};
+    static screen: AppToolsScreen;
+    protected deriveStateFromProps(nextProps: {}, state: State): State;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/_ats/ATS_DependencyGraph/ATS_DependencyGraph.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ATS_Frontend, ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import { Component_DependencyViewer } from '../../dependency-viewer/Component_DependencyViewer.js';
+export class ATS_DependencyViewer extends ComponentSync {
+    static defaultProps = {};
+    static screen = {
+        name: 'Dependency Graph',
+        key: 'dependency-graph',
+        renderer: this,
+        group: ATS_Frontend
+    };
+    deriveStateFromProps(nextProps, state) {
+        return state;
+    }
+    render() {
+        return _jsx(Component_DependencyViewer, {});
+    }
+}

package/_ats/index.d.ts

@@ -0,0 +1 @@
+export * from './ATS_DependencyGraph/ATS_DependencyGraph.js';

package/_ats/index.js

@@ -0,0 +1 @@
+export * from './ATS_DependencyGraph/ATS_DependencyGraph.js';

package/dependency-viewer/Component_DependencyViewer.d.ts

@@ -0,0 +1,16 @@
+import { ComponentSync, ModuleFE_BaseApi } from '@nu-art/thunderstorm-frontend/index';
+type State = {
+    protoModules: ModuleFE_BaseApi<any>[];
+};
+export declare class Component_DependencyViewer extends ComponentSync<{}, State> {
+    private readonly graphContainerRef;
+    componentDidMount(): void;
+    protected deriveStateFromProps(nextProps: {}, state: State): State;
+    private getMidNode;
+    private getModuleNode;
+    private getDependencyNode;
+    private getGraphString;
+    private renderGraph;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/dependency-viewer/Component_DependencyViewer.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import { _keys, filterDuplicates, RuntimeModules } from '@nu-art/ts-common';
+import { graphviz } from 'd3-graphviz';
+import { Digraph, Edge, Node, Subgraph, toDot } from 'ts-graphviz';
+export class Component_DependencyViewer extends ComponentSync {
+    graphContainerRef = React.createRef();
+    componentDidMount() {
+        if (!this.graphContainerRef.current) {
+            this.logWarning('Finished mounting but no ref to container');
+            return;
+        }
+        this.renderGraph();
+        this.forceUpdate();
+    }
+    deriveStateFromProps(nextProps, state) {
+        state = super.deriveStateFromProps(nextProps, state);
+        state.protoModules = RuntimeModules().filter((module) => !!module.dbDef?.dbKey);
+        return state;
+    }
+    getMidNode = (startNode, endNode, property) => {
+        const id = `${startNode.id} => ${endNode.id} \n\nDependency property: ${property}`;
+        return new Node(id, {
+            id: id,
+            shape: 'circle',
+            width: 0.2,
+            label: '',
+            style: 'filled',
+            fillcolor: '#ffffff',
+            tooltip: id
+        });
+    };
+    getModuleNode = (module) => {
+        const id = module.dbDef.dbKey;
+        return new Node(id, {
+            id: id,
+            shape: 'rect',
+            style: 'filled',
+            label: module.dbDef.entityName,
+            fillcolor: '#ffffff',
+            fontsize: 13,
+            fontcolor: '#333333',
+            width: 3
+        });
+    };
+    getDependencyNode = (startNode, endNode, midNode) => {
+        const id = `${startNode.id} => ${endNode.id}`;
+        return [new Edge([startNode, midNode], { id: id, arrowhead: 'none' }), new Edge([midNode, endNode], { id: id })];
+    };
+    getGraphString = () => {
+        const graph = new Digraph('', { bgcolor: 'transparent' });
+        const subgraph = new Subgraph('Container');
+        graph.addSubgraph(subgraph);
+        const moduleNodes = {};
+        this.state.protoModules.forEach(module => {
+            const moduleNode = this.getModuleNode(module);
+            moduleNodes[module.dbDef.dbKey] = moduleNode;
+            subgraph.addNode(moduleNode);
+        });
+        this.state.protoModules.forEach(module => {
+            const startNode = moduleNodes[module.dbDef.dbKey];
+            if (module.dbDef.dependencies)
+                filterDuplicates(_keys(module.dbDef.dependencies), item => module.dbDef.dependencies[item].dbKey).map(key => {
+                    const endNode = moduleNodes[module.dbDef.dependencies[key].dbKey];
+                    const midNode = this.getMidNode(startNode, endNode, key);
+                    const edge = this.getDependencyNode(startNode, endNode, midNode);
+                    subgraph.addNode(midNode);
+                    subgraph.addEdge(edge[0]);
+                    subgraph.addEdge(edge[1]);
+                });
+        });
+        return toDot(graph);
+    };
+    renderGraph = () => {
+        const graphString = this.getGraphString();
+        const rect = this.graphContainerRef.current.getBoundingClientRect();
+        graphviz(this.graphContainerRef.current, {
+            useWorker: false,
+            width: rect.width,
+            height: rect.height
+        }).renderDot(graphString);
+    };
+    render() {
+        return _jsx("div", { className: 'match_parent', ref: this.graphContainerRef });
+    }
+}

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './_ats/index.js';
+export * from './dependency-viewer/Component_DependencyViewer.js';

package/index.js

@@ -0,0 +1,2 @@
+export * from './_ats/index.js';
+export * from './dependency-viewer/Component_DependencyViewer.js';

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@nu-art/ts-dependency-viewer-frontend",
+  "version": "0.400.7",
+  "description": "ts-dependency-viewer - Express & Typescript based backend framework Frontend",
+  "keywords": [
+    "TacB0sS",
+    "infra",
+    "nu-art",
+    "thunderstorm",
+    "typescript",
+    "ts-dependency-viewer"
+  ],
+  "homepage": "https://github.com/nu-art-js/thunderstorm",
+  "bugs": {
+    "url": "https://github.com/nu-art-js/thunderstorm/issues"
+  },
+  "publishConfig": {
+    "directory": "dist",
+    "linkDirectory": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com:nu-art-js/thunderstorm.git"
+  },
+  "license": "Apache-2.0",
+  "author": "TacB0sS",
+  "files": [
+    "**/*"
+  ],
+  "scripts": {
+    "build": "tsc"
+  },
+  "dependencies": {
+    "@nu-art/ts-dependency-viewer-shared": "0.400.7",
+    "@nu-art/thunderstorm-frontend": "0.400.7",
+    "@nu-art/thunderstorm-shared": "0.400.7",
+    "@nu-art/ts-common": "0.400.7",
+    "compression": "^1.7.4",
+    "d3": "7.8.2",
+    "d3-graphviz": "5.0.2",
+    "d3-selection": "3.0.0",
+    "firebase": "^11.9.0",
+    "firebase-admin": "13.4.0",
+    "firebase-functions": "6.3.2",
+    "react": "^18.0.0",
+    "ts-graphviz": "1.5.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/chai": "^4.3.4",
+    "@types/mocha": "^10.0.1",
+    "@types/d3": "^7.4.0",
+    "@types/d3-graphviz": "^2.6.7"
+  },
+  "unitConfig": {
+    "type": "typescript-lib"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./*": {
+      "types": "./*.d.ts",
+      "import": "./*.js"
+    }
+  }
+}