4 * Copyright 2016 RIFT.IO Inc
6 * Licensed under the Apache License, Version 2.0 (the "License");
7 * you may not use this file except in compliance with the License.
8 * You may obtain a copy of the License at
10 * http://www.apache.org/licenses/LICENSE-2.0
12 * Unless required by applicable law or agreed to in writing, software
13 * distributed under the License is distributed on an "AS IS" BASIS,
14 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 * See the License for the specific language governing permissions and
16 * limitations under the License.
19 import React from 'react';
20 import ReactDOM from 'react-dom';
22 import DashboardCard from '../dashboard_card/dashboard_card.jsx';
23 import _cloneDeep from 'lodash/cloneDeep';
24 import $ from 'jquery';
25 import './topologyTree.scss';
27 export default class TopologyTree extends React.Component {
30 this.data = props.data;
33 this.size = this.wrapperSize();
34 this.tree = d3.layout.tree()
35 .size([this.props.treeHeight, this.props.treeWidth]);
36 this.diagonal = d3.svg.diagonal()
37 .projection(function(d) { return [d.y, d.x]; });
40 componentWillReceiveProps(props) {
43 let zoom = d3.behavior.zoom()
44 .translate([this.props.maxLabel, 0])
45 .scaleExtent([this.props.minScale, this.props.maxScale])
46 .on("zoom", self.zoom);
47 let svg = this.selectParent().append("svg")
48 .attr("width", this.size.width)
49 .attr("height", this.size.height)
53 .attr("transform", "translate(" + this.props.maxLabel + ",0)");
56 .attr("class", "overlay")
57 .attr("width", this.size.width)
58 .attr("height", this.size.height);
59 // this.svg = d3.select()
61 this.props.selectNode(props.data);
63 if(props.data.hasOwnProperty('type') && !this.props.hasSelected) {
64 this.selectedID = props.data.id;
65 //Commenting out to prevent transmitter push error
66 //this.props.selectNode(props.data);
69 this.update(_cloneDeep(props.data));
70 // this.selectedID = props.data.id;
75 if (this.props.useDynamicWrapperSize) {
77 let wrapper = $(".topologyTreeGraph-body");
80 width: wrapper.width(),
81 height: wrapper.height()
84 console.log("ERROR: cannot get width and/or height from element."+
85 " Using props for width and height. e=", e);
87 width: this.props.width,
88 height: this.props.height
93 width: this.props.width,
94 height: this.props.height
99 return d3.select(document.querySelector('#topology'));
102 // if(d.parameters && d.parameters.vcpu) {
103 // return this.props.radius + d.parameters.vcpu.total;
105 return this.props.radius;
109 this.props.selectNode(d);
110 this.selectedID = d.id;
112 // d._children = d.children;
113 // d.children = null;
116 // d.children = d._children;
117 // d._children = null;
122 this.svg.attr("transform", "translate(" + d3.event.translate +
123 ")scale(" + d3.event.scale + ")");
125 update = (source) => {
126 // Compute the new tree layout.
128 var nodes = this.tree.nodes(source).reverse();
129 var links = this.tree.links(nodes);
132 // Normalize for fixed-depth.
133 nodes.forEach(function(d) { d.y = d.depth * self.props.maxLabel; });
134 // Update the nodes…
135 var node = svg.selectAll("g.node")
136 .data(nodes, function(d){
137 return d.id || (d.id = ++self.nodeCount);
139 // Enter any new nodes at the parent's previous position.
140 var nodeEnter = node.enter()
142 .attr("class", "node")
143 .attr("transform", function(d){
144 return "translate(" + source.y0 + "," + source.x0 + ")"; })
145 .on("click", this.click);
147 nodeEnter.append("circle")
149 .style("fill", function(d){
150 return d._children ? "lightsteelblue" : "white";
153 nodeEnter.append("text")
154 .attr("x", function(d){
155 var spacing = self.computeRadius(d) + 5;
156 return d.children || d._children ? -spacing : spacing; })
157 .attr("transform", function(d, i) {
158 return "translate(0," + ((i%2) ? 15 : -15) + ")"; })
160 .attr("text-anchor", function(d){
161 return d.children || d._children ? "end" : "start";
163 .text(function(d){ return d.name; })
164 .style("fill-opacity", 0);
166 // Transition nodes to their new position.
167 var nodeUpdate = node
169 .duration(this.props.duration)
170 .attr("transform", function(d) {
171 return "translate(" + d.y + "," + d.x + ")"; });
173 nodeUpdate.select("circle")
174 .attr("r", function(d){ return self.computeRadius(d); })
175 .style("fill", function(d) {
176 return d.id == self.selectedID ? "green" : "lightsteelblue"; });
178 nodeUpdate.select("text")
179 .style("fill-opacity", 1)
180 .style("font-weight", function(d) {
181 return d.id == self.selectedID ? "900" : "inherit";
183 .attr("transform", function(d, i) {
184 return "translate(0," + ((i%2) ? 15 : -15) + ")" +
185 (d.id == self.selectedID ? "scale(1.125)" : "scale(1)");
188 // Transition exiting nodes to the parent's new position.
189 var nodeExit = node.exit()
191 .duration(this.props.duration)
192 .attr("transform", function(d) {
193 return "translate(" + source.y + "," + source.x + ")"; })
196 nodeExit.select("circle").attr("r", 0);
197 nodeExit.select("text").style("fill-opacity", 0);
199 // Update the links…
200 var link = svg.selectAll("path.link")
201 .data(links, function(d){ return d.target.id; });
203 // Enter any new links at the parent's previous position.
204 link.enter().insert("path", "g")
205 .attr("class", "link")
206 .attr("d", function(d){
207 var o = {x: source.x0, y: source.y0};
208 return self.diagonal({source: o, target: o});
211 // Transition links to their new position.
214 .duration(this.props.duration)
215 .attr("d", self.diagonal);
217 // Transition exiting nodes to the parent's new position.
220 .duration(this.props.duration)
221 .attr("d", function(d){
222 var o = {x: source.x, y: source.y};
223 return self.diagonal({source: o, target: o});
227 // Stash the old positions for transition.
228 nodes.forEach(function(d){
235 <DashboardCard className="topologyTreeGraph" showHeader={true} title="Topology Tree"
236 headerExtras={this.props.headerExtras} >
237 <div id="topology"></div>
244 TopologyTree.defaultProps = {
254 useDynamicWrapperSize: false,