@nu-art/ts-dependency-viewer-frontend 0.401.9 → 0.500.0

package/_ats/ATS_DependencyGraph/ATS_DependencyGraph.d.ts

@@ -1,5 +1,6 @@
-import { AppToolsScreen, ComponentSync } from '@nu-art/thunderstorm-frontend/index';
-type State = {};
+import { AppToolsScreen } from '@nu-art/thunder-ui-modules';
+import { ComponentSync } from '@nu-art/thunder-widgets';
+type State = Record<string, never>;
 export declare class ATS_DependencyViewer extends ComponentSync<{}, State> {
     static defaultProps: {};
     static screen: AppToolsScreen;

package/_ats/ATS_DependencyGraph/ATS_DependencyGraph.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ATS_Frontend, ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import { ATS_Frontend } from '@nu-art/thunder-ui-modules';
+import { ComponentSync } from '@nu-art/thunder-widgets';
 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,
+        renderer: ATS_DependencyViewer,
         group: ATS_Frontend
     };
     deriveStateFromProps(nextProps, state) {

package/dependency-viewer/Component_DependencyViewer.d.ts

@@ -1,6 +1,16 @@
-import { ComponentSync, ModuleFE_BaseApi } from '@nu-art/thunderstorm-frontend/index';
+import { ComponentSync } from '@nu-art/thunder-widgets';
+/** Module shape used for dependency graph: config with dbKey and optional entityName/dependencies (v2 / db-api style). */
+export type DependencyGraphModule = {
+    config: {
+        dbKey: string;
+        entityName?: string;
+        dependencies?: Record<string, {
+            dbKey: string;
+        }>;
+    };
+};
 type State = {
-    protoModules: ModuleFE_BaseApi<any>[];
+    protoModules: DependencyGraphModule[];
 };
 export declare class Component_DependencyViewer extends ComponentSync<{}, State> {
     private readonly graphContainerRef;

package/dependency-viewer/Component_DependencyViewer.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import { ComponentSync } from '@nu-art/thunder-widgets';
 import { _keys, filterDuplicates, RuntimeModules } from '@nu-art/ts-common';
 import { graphviz } from 'd3-graphviz';
 import { Digraph, Edge, Node, Subgraph, toDot } from 'ts-graphviz';
@@ -16,7 +16,7 @@ export class Component_DependencyViewer extends ComponentSync {
     }
     deriveStateFromProps(nextProps, state) {
         state = super.deriveStateFromProps(nextProps, state);
-        state.protoModules = RuntimeModules().filter((module) => !!module.dbDef?.dbKey);
+        state.protoModules = RuntimeModules().filter((m) => !!m.config?.dbKey);
         return state;
     }
     getMidNode = (startNode, endNode, property) => {
@@ -32,12 +32,12 @@ export class Component_DependencyViewer extends ComponentSync {
         });
     };
     getModuleNode = (module) => {
-        const id = module.dbDef.dbKey;
+        const id = module.config.dbKey;
         return new Node(id, {
             id: id,
             shape: 'rect',
             style: 'filled',
-            label: module.dbDef.entityName,
+            label: module.config.entityName ?? module.config.dbKey,
             fillcolor: '#ffffff',
             fontsize: 13,
             fontcolor: '#333333',
@@ -53,16 +53,17 @@ export class Component_DependencyViewer extends ComponentSync {
         const subgraph = new Subgraph('Container');
         graph.addSubgraph(subgraph);
         const moduleNodes = {};
-        this.state.protoModules.forEach(module => {
+        this.state.protoModules.forEach((module) => {
             const moduleNode = this.getModuleNode(module);
-            moduleNodes[module.dbDef.dbKey] = moduleNode;
+            moduleNodes[module.config.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];
+        this.state.protoModules.forEach((module) => {
+            const startNode = moduleNodes[module.config.dbKey];
+            const deps = module.config.dependencies;
+            if (deps)
+                filterDuplicates(_keys(deps), item => deps[item].dbKey).map(key => {
+                    const endNode = moduleNodes[deps[key].dbKey];
                     const midNode = this.getMidNode(startNode, endNode, key);
                     const edge = this.getDependencyNode(startNode, endNode, midNode);
                     subgraph.addNode(midNode);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nu-art/ts-dependency-viewer-frontend",
-  "version": "0.401.9",
+  "version": "0.500.0",
   "description": "ts-dependency-viewer - Express & Typescript based backend framework Frontend",
   "keywords": [
     "TacB0sS",
@@ -31,10 +31,8 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@nu-art/ts-dependency-viewer-shared": "0.401.9",
-    "@nu-art/thunderstorm-frontend": "0.401.9",
-    "@nu-art/thunderstorm-shared": "0.401.9",
-    "@nu-art/ts-common": "0.401.9",
+    "@nu-art/ts-dependency-viewer-shared": "0.500.0",
+    "@nu-art/ts-common": "0.500.0",
     "compression": "^1.7.4",
     "d3": "7.8.2",
     "d3-graphviz": "5.0.2",
@@ -43,7 +41,9 @@
     "firebase-admin": "13.4.0",
     "firebase-functions": "6.3.2",
     "react": "^18.0.0",
-    "ts-graphviz": "1.5.3"
+    "ts-graphviz": "1.5.3",
+    "@nu-art/thunder-widgets": "{{THUNDERSTORM_VERSION}}",
+    "@nu-art/thunder-ui-modules": "{{THUNDERSTORM_VERSION}}"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",