ce38993399b057110157e89c793cad4097401c9b-PR-1356

Build # ce38993399b057110157e89c793cad4097401c9b-PR-1356

Build Type

github

Committed by GitHub

Commit Message

Merge e8e7b419b into 955fc5877

Pull Request Pull Request #1356: Feature/1295 generic rendering engine

Run Details

1743 of 3532 branches covered (49.35%)

Branch coverage included in aggregate %.

157 of 284 new or added lines in 10 files covered. (55.28%)

11 existing lines in 4 files now uncovered.

3842 of 7683 relevant lines covered (50.01%)

7268.24 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

2.3

/src/dagre-wrapper/index.js

import dagre from 'dagre';
import graphlib from 'graphlib';
import insertMarkers from './markers';
import { updateNodeBounds } from './shapes/util';
import {
  clear as clearGraphlib,
  clusterDb,
  adjustClustersAndEdges,
  findNonClusterChild
} from './mermaid-graphlib';
import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './nodes';
import { insertCluster, clear as clearClusters } from './clusters';
import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges';
import { logger as log } from '../logger';

const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
  log.trace('Graph in recursive render:', graphlib.json.write(graph), parentCluster);
  const elem = _elem.insert('g').attr('class', 'root'); // eslint-disable-line
  if (!graph.nodes()) {
    log.trace('No nodes found for', graph);
  } else {
    log.trace('Recursive render', graph.nodes());
  }
  if (graph.edges().length > 0) {
    log.trace('Recursive edges', graph.edge(graph.edges()[0]));
  }
  const clusters = elem.insert('g').attr('class', 'clusters'); // eslint-disable-line
  const edgePaths = elem.insert('g').attr('class', 'edgePaths');
  const edgeLabels = elem.insert('g').attr('class', 'edgeLabels');
  const nodes = elem.insert('g').attr('class', 'nodes');

  // Insert nodes, this will insert them into the dom and each node will get a size. The size is updated
  // to the abstract node and is later used by dagre for the layout
  graph.nodes().forEach(function(v) {
    const node = graph.node(v);
    if (typeof parentCluster !== 'undefined') {
      const data = JSON.parse(JSON.stringify(parentCluster.clusterData));
      // data.clusterPositioning = true;
      log.trace('Setting data for cluster', data);
      graph.setNode(parentCluster.id, data);
      graph.setParent(v, parentCluster.id, data);
    }
    log.trace('(Insert) Node ' + v + ': ' + JSON.stringify(graph.node(v)));
    if (node.clusterNode) {
      // const children = graph.children(v);
      log.trace('Cluster identified', v, node, graph.node(v));
      const newEl = recursiveRender(nodes, node.graph, diagramtype, graph.node(v));
      updateNodeBounds(node, newEl);
      setNodeElem(newEl, node);

      log.warn('Recursive render complete', newEl, node);
    } else {
      if (graph.children(v).length > 0) {
        // This is a cluster but not to be rendered recusively
        // Render as before
        log.trace('Cluster - the non recursive path', v, node.id, node, graph);
        log.trace(findNonClusterChild(node.id, graph));
        clusterDb[node.id] = { id: findNonClusterChild(node.id, graph), node };
        // insertCluster(clusters, graph.node(v));
      } else {
        log.trace('Node - the non recursive path', v, node.id, node);
        insertNode(nodes, graph.node(v));
      }
    }
  });

  // Insert labels, this will insert them into the dom so that the width can be calculated
  // Also figure out which edges point to/from clusters and adjust them accordingly
  // Edges from/to clusters really points to the first child in the cluster.
  // TODO: pick optimal child in the cluster to us as link anchor
  graph.edges().forEach(function(e) {
    const edge = graph.edge(e.v, e.w, e.name);
    log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
    log.trace('Edge ' + e.v + ' -> ' + e.w + ': ', e, ' ', JSON.stringify(graph.edge(e)));

    // Check if link is either from or to a cluster
    log.trace('Fix', clusterDb, 'ids:', e.v, e.w, 'Translateing: ', clusterDb[e.v], clusterDb[e.w]);
    insertEdgeLabel(edgeLabels, edge);
  });

  graph.edges().forEach(function(e) {
    log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
  });
  log.trace('#############################################');
  log.trace('###                Layout                 ###');
  log.trace('#############################################');
  log.trace(graph);
  dagre.layout(graph);
  log.warn('Graph after layout:', graphlib.json.write(graph));
  // Move the nodes to the correct place
  graph.nodes().forEach(function(v) {
    const node = graph.node(v);
    // log.trace('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
    log.trace(
      'Position ' + v + ': (' + node.x,
      ',' + node.y,
      ') width: ',
      node.width,
      ' height: ',
      node.height
    );
    if (node && node.clusterNode) {
      // clusterDb[node.id].node = node;

      positionNode(node);
    } else {
      // Non cluster node
      if (graph.children(v).length > 0) {
        // A cluster in the non-recurive way
        // positionCluster(node);
        insertCluster(clusters, node);
        clusterDb[node.id].node = node;
      } else {
        positionNode(node);
      }
    }
  });

  // Move the edge labels to the correct place after layout
  graph.edges().forEach(function(e) {
    const edge = graph.edge(e);
    log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);

    insertEdge(edgePaths, edge, clusterDb, diagramtype);
    positionEdgeLabel(edge);
  });

  return elem;
};

export const render = (elem, graph, markers, diagramtype, id) => {
  insertMarkers(elem, markers, diagramtype, id);
  clearNodes();
  clearEdges();
  clearClusters();
  clearGraphlib();

  log.warn('Graph before:', graphlib.json.write(graph));
  adjustClustersAndEdges(graph);
  log.warn('Graph after:', graphlib.json.write(graph));

  recursiveRender(elem, graph, diagramtype);
};

// const shapeDefinitions = {};
// export const addShape = ({ shapeType: fun }) => {
//   shapeDefinitions[shapeType] = fun;
// };

// const arrowDefinitions = {};
// export const addArrow = ({ arrowType: fun }) => {
//   arrowDefinitions[arrowType] = fun;
// };

1	import dagre from 'dagre';
2	import graphlib from 'graphlib';
3	import insertMarkers from './markers';
4	import { updateNodeBounds } from './shapes/util';
5	import {
6	clear as clearGraphlib,
7	clusterDb,
8	adjustClustersAndEdges,
9	findNonClusterChild
10	} from './mermaid-graphlib';
11	import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './nodes';
12	import { insertCluster, clear as clearClusters } from './clusters';
13	import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges';
14	import { logger as log } from '../logger';
15
16	const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {	2✔
NEW 17	log.trace('Graph in recursive render:', graphlib.json.write(graph), parentCluster);	×
NEW 18	const elem = _elem.insert('g').attr('class', 'root'); // eslint-disable-line	×
NEW 19	if (!graph.nodes()) {	×
NEW 20	log.trace('No nodes found for', graph);	×
21	} else {
NEW 22	log.trace('Recursive render', graph.nodes());	×
23	}
NEW 24	if (graph.edges().length > 0) {	×
NEW 25	log.trace('Recursive edges', graph.edge(graph.edges()[0]));	×
26	}
27	const clusters = elem.insert('g').attr('class', 'clusters'); // eslint-disable-line	×
28	const edgePaths = elem.insert('g').attr('class', 'edgePaths');	×
29	const edgeLabels = elem.insert('g').attr('class', 'edgeLabels');	×
30	const nodes = elem.insert('g').attr('class', 'nodes');	×
31
32	// Insert nodes, this will insert them into the dom and each node will get a size. The size is updated
33	// to the abstract node and is later used by dagre for the layout
34	graph.nodes().forEach(function(v) {	×
35	const node = graph.node(v);	×
NEW 36	if (typeof parentCluster !== 'undefined') {	×
NEW 37	const data = JSON.parse(JSON.stringify(parentCluster.clusterData));	×
38	// data.clusterPositioning = true;
NEW 39	log.trace('Setting data for cluster', data);	×
NEW 40	graph.setNode(parentCluster.id, data);	×
NEW 41	graph.setParent(v, parentCluster.id, data);	×
42	}
NEW 43	log.trace('(Insert) Node ' + v + ': ' + JSON.stringify(graph.node(v)));	×
NEW 44	if (node.clusterNode) {	×
45	// const children = graph.children(v);
NEW 46	log.trace('Cluster identified', v, node, graph.node(v));	×
NEW 47	const newEl = recursiveRender(nodes, node.graph, diagramtype, graph.node(v));	×
NEW 48	updateNodeBounds(node, newEl);	×
NEW 49	setNodeElem(newEl, node);	×
50
NEW 51	log.warn('Recursive render complete', newEl, node);	×
52	} else {
NEW 53	if (graph.children(v).length > 0) {	×
54	// This is a cluster but not to be rendered recusively
55	// Render as before
NEW 56	log.trace('Cluster - the non recursive path', v, node.id, node, graph);	×
NEW 57	log.trace(findNonClusterChild(node.id, graph));	×
NEW 58	clusterDb[node.id] = { id: findNonClusterChild(node.id, graph), node };	×
59	// insertCluster(clusters, graph.node(v));
60	} else {
NEW 61	log.trace('Node - the non recursive path', v, node.id, node);	×
NEW 62	insertNode(nodes, graph.node(v));	×
63	}
64	}
65	});
66
67	// Insert labels, this will insert them into the dom so that the width can be calculated
68	// Also figure out which edges point to/from clusters and adjust them accordingly
69	// Edges from/to clusters really points to the first child in the cluster.
70	// TODO: pick optimal child in the cluster to us as link anchor
71	graph.edges().forEach(function(e) {	×
NEW 72	const edge = graph.edge(e.v, e.w, e.name);	×
NEW 73	log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));	×
NEW 74	log.trace('Edge ' + e.v + ' -> ' + e.w + ': ', e, ' ', JSON.stringify(graph.edge(e)));	×
75
76	// Check if link is either from or to a cluster
NEW 77	log.trace('Fix', clusterDb, 'ids:', e.v, e.w, 'Translateing: ', clusterDb[e.v], clusterDb[e.w]);	×
UNCOV 78	insertEdgeLabel(edgeLabels, edge);	×
79	});
80
81	graph.edges().forEach(function(e) {	×
NEW 82	log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));	×
83	});
NEW 84	log.trace('#############################################');	×
NEW 85	log.trace('### Layout ###');	×
NEW 86	log.trace('#############################################');	×
NEW 87	log.trace(graph);	×
UNCOV 88	dagre.layout(graph);	×
NEW 89	log.warn('Graph after layout:', graphlib.json.write(graph));	×
90	// Move the nodes to the correct place
91	graph.nodes().forEach(function(v) {	×
92	const node = graph.node(v);	×
93	// log.trace('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
NEW 94	log.trace(	×
95	'Position ' + v + ': (' + node.x,
96	',' + node.y,
97	') width: ',
98	node.width,
99	' height: ',
100	node.height
101	);
NEW 102	if (node && node.clusterNode) {	×
103	// clusterDb[node.id].node = node;
104
UNCOV 105	positionNode(node);	×
106	} else {
107	// Non cluster node
NEW 108	if (graph.children(v).length > 0) {	×
109	// A cluster in the non-recurive way
110	// positionCluster(node);
NEW 111	insertCluster(clusters, node);	×
NEW 112	clusterDb[node.id].node = node;	×
113	} else {
NEW 114	positionNode(node);	×
115	}
116	}
117	});
118
119	// Move the edge labels to the correct place after layout
120	graph.edges().forEach(function(e) {	×
121	const edge = graph.edge(e);	×
NEW 122	log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);	×
123
124	insertEdge(edgePaths, edge, clusterDb, diagramtype);	×
125	positionEdgeLabel(edge);	×
126	});
127
NEW 128	return elem;	×
129	};
130
131	export const render = (elem, graph, markers, diagramtype, id) => {	2✔
NEW 132	insertMarkers(elem, markers, diagramtype, id);	×
NEW 133	clearNodes();	×
NEW 134	clearEdges();	×
NEW 135	clearClusters();	×
NEW 136	clearGraphlib();	×
137
NEW 138	log.warn('Graph before:', graphlib.json.write(graph));	×
NEW 139	adjustClustersAndEdges(graph);	×
NEW 140	log.warn('Graph after:', graphlib.json.write(graph));	×
141
NEW 142	recursiveRender(elem, graph, diagramtype);	×
143	};
144
145	// const shapeDefinitions = {};
146	// export const addShape = ({ shapeType: fun }) => {
147	// shapeDefinitions[shapeType] = fun;
148	// };
149
150	// const arrowDefinitions = {};
151	// export const addArrow = ({ arrowType: fun }) => {
152	// arrowDefinitions[arrowType] = fun;
153	// };

mermaid-js / mermaid / ce38993399b057110157e89c793cad4097401c9b-PR-1356

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous