blob: 215fd6e2e6dc3045a793287d02dea3273d26dbe8 [file] [log] [blame]
Thomas Vachuska750ab042015-06-17 10:42:15 -07001/*
2 * Copyright 2015 Open Networking Laboratory
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16(function () {
17
Thomas Vachuskab51b8bc2015-07-27 08:37:12 -070018 var ws, flow,
19 nodes = [],
20 links = [],
21 nodeIndexes = {};
22
23 var width = 2400,
24 height = 2400;
25
26 var color = d3.scale.category20();
27
28 var force = d3.layout.force()
29 .charge(-820)
30 .linkDistance(50)
31 .size([width, height]);
32
33 // Process flow graph layout
34 function createNode(n) {
35 nodeIndexes[n.name] = nodes.push(n) - 1;
36 }
37
38 function createLink(e) {
39 e.source = nodeIndexes[e.src];
40 e.target = nodeIndexes[e.dst];
41 links.push(e);
42 }
43
44 // Returns the newly computed bounding box of the rectangle
45 function adjustRectToFitText(n) {
46 var text = n.select('text'),
47 box = text.node().getBBox();
48
49 text.attr('text-anchor', 'left')
50 .attr('y', 2)
51 .attr('x', 4);
52
53 // add padding
54 box.x -= 4;
55 box.width += 8;
56 box.y -= 2;
57 box.height += 4;
58
59 n.select("rect").attr(box);
60 }
61
62 function processFlow() {
63 var svg = d3.select("body").append("svg")
64 .attr("width", width)
65 .attr("height", height);
66
67 flow.steps.forEach(createNode);
68 flow.requirements.forEach(createLink);
69
70 force
71 .nodes(nodes)
72 .links(links)
73 .start();
74
75 var link = svg.selectAll(".link")
76 .data(links)
77 .enter().append("line")
78 .attr("class", "link")
79 .style("stroke-width", function(d) { return d.isSoft ? 1 : 2; });
80
81 var node = svg.selectAll(".node")
82 .data(nodes)
83 .enter().append("g")
84 .attr("class", "node")
85 .call(force.drag);
86
87 node.append("rect")
88 .attr({ rx: 5, ry:5, width:180, height:18 })
89 .style("fill", function(d) { return color(d.group); });
90
91 node.append("text").text( function(d) { return d.name; })
92 .attr({ dy:"1.1em", width:100, height:16, x:4, y:2 });
93
94 node.append("title")
95 .text(function(d) { return d.name; });
96
97 force.on("tick", function() {
98 link.attr("x1", function(d) { return d.source.x; })
99 .attr("y1", function(d) { return d.source.y; })
100 .attr("x2", function(d) { return d.target.x; })
101 .attr("y2", function(d) { return d.target.y; });
102
103 node.attr("transform", function(d) { return "translate(" + (d.x - 180/2) + "," + (d.y - 18/2) + ")"; });
104 });
105 }
106
107
108 // Web socket callbacks
109
110 function handleOpen() {
111 console.log('WebSocket open');
112 }
113
114 // Handles the specified (incoming) message using handler bindings.
115 function handleMessage(msg) {
116 console.log('rx: ', msg);
117 evt = JSON.parse(msg.data);
118 if (evt.event === 'progress') {
119
120 } else if (evt.event === 'log') {
121
122 } else if (evt.event === 'flow') {
123 flow = evt.payload;
124 processFlow();
125 }
126 }
127
128 function handleClose() {
129 console.log('WebSocket closed');
130 }
131
132 if (false) {
133 d3.json("data.json", function (error, data) {
134 flow = data;
135 processFlow();
136 });
137 return;
138 }
139
140 // Open the web-socket
141 ws = new WebSocket(document.location.href.replace('http:', 'ws:'));
142 if (ws) {
143 ws.onopen = handleOpen;
144 ws.onmessage = handleMessage;
145 ws.onclose = handleClose;
146 }
147
Thomas Vachuska750ab042015-06-17 10:42:15 -0700148})();