chore: Use graphlib from dagre-d3-es

This commit is contained in:
Sidharth Vinod 2022-11-20 23:13:55 +05:30
parent 931661ed67
commit f687abb165
No known key found for this signature in database
GPG Key ID: FB5CCD378D3907CD
11 changed files with 37 additions and 35 deletions

View File

@ -1,5 +1,5 @@
import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import graphlib from 'graphlib';
import * as graphlibJson from 'dagre-d3-es/src/graphlib/json';
import insertMarkers from './markers';
import { updateNodeBounds } from './shapes/util';
import {
@ -15,7 +15,7 @@ import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } f
import { log } from '../logger';
const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
log.info('Graph in recursive render: XXX', graphlib.json.write(graph), parentCluster);
log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
const dir = graph.graph().rankdir;
log.trace('Dir in recursive render - dir:', dir);
@ -96,7 +96,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
log.info('#############################################');
log.info(graph);
dagreLayout(graph);
log.info('Graph after layout:', graphlib.json.write(graph));
log.info('Graph after layout:', graphlibJson.write(graph));
// Move the nodes to the correct place
let diff = 0;
sortNodesByHierarchy(graph).forEach(function (v) {
@ -153,10 +153,10 @@ export const render = (elem, graph, markers, diagramtype, id) => {
clearClusters();
clearGraphlib();
log.warn('Graph at first:', graphlib.json.write(graph));
log.warn('Graph at first:', graphlibJson.write(graph));
adjustClustersAndEdges(graph);
log.warn('Graph after:', graphlib.json.write(graph));
// log.warn('Graph ever after:', graphlib.json.write(graph.node('A').graph));
log.warn('Graph after:', graphlibJson.write(graph));
// log.warn('Graph ever after:', graphlibJson.write(graph.node('A').graph));
recursiveRender(elem, graph, diagramtype);
};

View File

@ -1,6 +1,7 @@
/** Decorates with functions required by mermaids dagre-wrapper. */
import { log } from '../logger';
import graphlib from 'graphlib';
import * as graphlibJson from 'dagre-d3-es/src/graphlib/json';
import * as graphlib from 'dagre-d3-es/src/graphlib';
export let clusterDb = {};
let decendants = {};
@ -322,7 +323,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
graph.setEdge(v, w, edge, e.name);
}
});
log.warn('Adjusted Graph', graphlib.json.write(graph));
log.warn('Adjusted Graph', graphlibJson.write(graph));
extractor(graph, 0);
log.trace(clusterDb);
@ -336,7 +337,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
};
export const extractor = (graph, depth) => {
log.warn('extractor - ', depth, graphlib.json.write(graph), graph.children('D'));
log.warn('extractor - ', depth, graphlibJson.write(graph), graph.children('D'));
if (depth > 10) {
log.error('Bailing out');
return;
@ -415,7 +416,7 @@ export const extractor = (graph, depth) => {
return {};
});
log.warn('Old graph before copy', graphlib.json.write(graph));
log.warn('Old graph before copy', graphlibJson.write(graph));
copy(node, graph, clusterGraph, node);
graph.setNode(node, {
clusterNode: true,
@ -424,8 +425,8 @@ export const extractor = (graph, depth) => {
labelText: clusterDb[node].labelText,
graph: clusterGraph,
});
log.warn('New graph after copy node: (', node, ')', graphlib.json.write(clusterGraph));
log.debug('Old graph after copy', graphlib.json.write(graph));
log.warn('New graph after copy node: (', node, ')', graphlibJson.write(clusterGraph));
log.debug('Old graph after copy', graphlibJson.write(graph));
} else {
log.warn(
'Cluster ** ',

View File

@ -1,4 +1,5 @@
import graphlib from 'graphlib';
import * as graphlibJson from 'dagre-d3-es/src/graphlib/json';
import * as graphlib from 'dagre-d3-es/src/graphlib';
import {
validate,
adjustClustersAndEdges,
@ -232,9 +233,9 @@ describe('Graphlib decorations', () => {
g.setParent('D', 'C');
// log.info('Graph before', g.node('D'))
// log.info('Graph before', graphlib.json.write(g))
// log.info('Graph before', graphlibJson.write(g))
adjustClustersAndEdges(g);
// log.info('Graph after', graphlib.json.write(g), g.node('C').graph)
// log.info('Graph after', graphlibJson.write(g), g.node('C').graph)
const CGraph = g.node('C').graph;
const DGraph = CGraph.node('D').graph;
@ -278,9 +279,9 @@ describe('Graphlib decorations', () => {
g.setEdge('A', 'C', { data: 'link2' }, '2');
log.info('Graph before', g.node('D'));
log.info('Graph before', graphlib.json.write(g));
log.info('Graph before', graphlibJson.write(g));
adjustClustersAndEdges(g);
log.trace('Graph after', graphlib.json.write(g));
log.trace('Graph after', graphlibJson.write(g));
expect(g.nodes()).toEqual(['C', 'B', 'A']);
expect(g.nodes().length).toBe(3);
expect(g.edges().length).toBe(2);
@ -333,11 +334,11 @@ describe('Graphlib decorations', () => {
g.setEdge('c', 'd', { data: 'link2' }, '2');
g.setEdge('d', 'e', { data: 'link2' }, '2');
log.info('Graph before', graphlib.json.write(g));
log.info('Graph before', graphlibJson.write(g));
adjustClustersAndEdges(g);
const bGraph = g.node('b').graph;
// log.trace('Graph after', graphlib.json.write(g))
log.info('Graph after', graphlib.json.write(bGraph));
// log.trace('Graph after', graphlibJson.write(g))
log.info('Graph after', graphlibJson.write(bGraph));
expect(bGraph.nodes().length).toBe(3);
expect(bGraph.edges().length).toBe(2);
});
@ -359,13 +360,13 @@ describe('Graphlib decorations', () => {
g.setParent('c', 'b');
g.setParent('e', 'c');
log.info('Graph before', graphlib.json.write(g));
log.info('Graph before', graphlibJson.write(g));
adjustClustersAndEdges(g);
const aGraph = g.node('a').graph;
const bGraph = aGraph.node('b').graph;
log.info('Graph after', graphlib.json.write(aGraph));
log.info('Graph after', graphlibJson.write(aGraph));
const cGraph = bGraph.node('c').graph;
// log.trace('Graph after', graphlib.json.write(g))
// log.trace('Graph after', graphlibJson.write(g))
expect(aGraph.nodes().length).toBe(1);
expect(bGraph.nodes().length).toBe(1);
expect(cGraph.nodes().length).toBe(1);
@ -387,14 +388,14 @@ flowchart TB
const exportedGraph = JSON.parse(
'{"options":{"directed":true,"multigraph":true,"compound":true},"nodes":[{"v":"A","value":{"labelStyle":"","shape":"rect","labelText":"A","rx":0,"ry":0,"class":"default","style":"","id":"A","width":500,"type":"group","padding":15}},{"v":"B","value":{"labelStyle":"","shape":"rect","labelText":"B","rx":0,"ry":0,"class":"default","style":"","id":"B","width":500,"type":"group","padding":15},"parent":"A"},{"v":"b","value":{"labelStyle":"","shape":"rect","labelText":"b","rx":0,"ry":0,"class":"default","style":"","id":"b","padding":15},"parent":"A"},{"v":"c","value":{"labelStyle":"","shape":"rect","labelText":"c","rx":0,"ry":0,"class":"default","style":"","id":"c","padding":15},"parent":"B"},{"v":"a","value":{"labelStyle":"","shape":"rect","labelText":"a","rx":0,"ry":0,"class":"default","style":"","id":"a","padding":15},"parent":"A"}],"edges":[{"v":"b","w":"B","name":"1","value":{"minlen":1,"arrowhead":"normal","arrowTypeStart":"arrow_open","arrowTypeEnd":"arrow_point","thickness":"normal","pattern":"solid","style":"fill:none","labelStyle":"","arrowheadStyle":"fill: #333","labelpos":"c","labelType":"text","label":"","id":"L-b-B","classes":"flowchart-link LS-b LE-B"}},{"v":"a","w":"c","name":"2","value":{"minlen":1,"arrowhead":"normal","arrowTypeStart":"arrow_open","arrowTypeEnd":"arrow_point","thickness":"normal","pattern":"solid","style":"fill:none","labelStyle":"","arrowheadStyle":"fill: #333","labelpos":"c","labelType":"text","label":"","id":"L-a-c","classes":"flowchart-link LS-a LE-c"}}],"value":{"rankdir":"TB","nodesep":50,"ranksep":50,"marginx":8,"marginy":8}}'
);
const gr = graphlib.json.read(exportedGraph);
const gr = graphlibJson.read(exportedGraph);
log.info('Graph before', graphlib.json.write(gr));
log.info('Graph before', graphlibJson.write(gr));
adjustClustersAndEdges(gr);
const aGraph = gr.node('A').graph;
const bGraph = aGraph.node('B').graph;
log.info('Graph after', graphlib.json.write(aGraph));
// log.trace('Graph after', graphlib.json.write(g))
log.info('Graph after', graphlibJson.write(aGraph));
// log.trace('Graph after', graphlibJson.write(g))
expect(aGraph.parent('c')).toBe('B');
expect(aGraph.parent('B')).toBe(undefined);
});

View File

@ -1,5 +1,5 @@
import { select } from 'd3';
import graphlib from 'graphlib';
import * as graphlib from 'dagre-d3-es/src/graphlib';
import { log } from '../../logger';
import { getConfig } from '../../config';
import { render } from '../../dagre-wrapper/index.js';

View File

@ -1,6 +1,6 @@
import { select } from 'd3';
import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import graphlib from 'graphlib';
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import { log } from '../../logger';
import svgDraw from './svgDraw';
import { configureSvgSize } from '../../setupGraphViewbox';

View File

@ -1,4 +1,4 @@
import graphlib from 'graphlib';
import * as graphlib from 'dagre-d3-es/src/graphlib';
import { line, curveBasis, select } from 'd3';
import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import { getConfig } from '../../config';

View File

@ -1,4 +1,4 @@
import graphlib from 'graphlib';
import * as graphlib from 'dagre-d3-es/src/graphlib';
import { select, curveLinear, selectAll } from 'd3';
import flowDb from './flowDb';

View File

@ -1,4 +1,4 @@
import graphlib from 'graphlib';
import * as graphlib from 'dagre-d3-es/src/graphlib';
import { select, curveLinear, selectAll } from 'd3';
import { getConfig } from '../../config';
import { render as Render } from 'dagre-d3-es';

View File

@ -1,6 +1,6 @@
import { line, select } from 'd3';
import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import graphlib from 'graphlib';
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import { log } from '../../logger';
import { configureSvgSize } from '../../setupGraphViewbox';
import common from '../common/common';

View File

@ -1,4 +1,4 @@
import graphlib from 'graphlib';
import * as graphlib from 'dagre-d3-es/src/graphlib';
import { select } from 'd3';
import { getConfig } from '../../config';
import { render } from '../../dagre-wrapper/index.js';

View File

@ -1,6 +1,6 @@
import { select } from 'd3';
import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import graphlib from 'graphlib';
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import { log } from '../../logger';
import common from '../common/common';
import { drawState, addTitleAndBox, drawEdge } from './shapes';