react-network-topology
Version:
230 lines (229 loc) • 7.98 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.HostLink = exports.HostNode = exports.NodeType = void 0;
var React = __importStar(require("react"));
require("./rnt.css");
var d3 = Object.assign({}, require('d3-selection'), require('d3-force'), require('d3-drag'));
var NodeType;
(function (NodeType) {
NodeType["NODE_EDGE"] = "NODE_EDGE";
NodeType["NODE_ROUTER"] = "NODE_ROUTER";
NodeType["NODE_SWITCH"] = "NODE_SWITCH";
NodeType["NODE_UNKNOWN"] = "NODE_UNKNOWN";
})(NodeType = exports.NodeType || (exports.NodeType = {}));
var iconSize = 10;
var HostNode = /** @class */ (function () {
function HostNode(name, idx, type) {
this.nodeName = 'unknown';
this.nodeType = NodeType.NODE_UNKNOWN;
this.nodeName = name;
this.index = idx;
this.nodeType = type;
}
HostNode.prototype.setNodeType = function (type) {
this.nodeType = type;
};
return HostNode;
}());
exports.HostNode = HostNode;
var HostLink = /** @class */ (function () {
function HostLink() {
this.source = 0;
this.target = 0;
this.distance = 100;
}
return HostLink;
}());
exports.HostLink = HostLink;
function tick() {
d3.selectAll(".link")
.attr("x1", function (d) { return d.source.x; })
.attr("y1", function (d) { return d.source.y; })
.attr("x2", function (d) { return d.target.x; })
.attr("y2", function (d) { return d.target.y; });
d3.selectAll(".circle")
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; });
d3.selectAll(".rect")
.attr("x", function (d) { return d.x - iconSize * 1.5; })
.attr("y", function (d) { return d.y - iconSize; });
d3.selectAll(".text")
.attr("x", function (d) { return d.x - 25; })
.attr("y", function (d) { return d.y + 20; });
}
function clamp(x, lo, hi) {
return x < lo ? lo : x > hi ? hi : x;
}
function drawTopology(props) {
var id = props.id, nodes = props.nodes, links = props.links, width = props.width, height = props.height, onClick = props.onClick;
var svg = d3.select("#" + id);
var edges = [];
var routers = [];
var switches = [];
for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
var node = nodes_1[_i];
switch (node.nodeType) {
case NodeType.NODE_EDGE:
edges.push(node);
break;
case NodeType.NODE_ROUTER:
routers.push(node);
break;
case NodeType.NODE_SWITCH:
switches.push(node);
break;
case NodeType.NODE_UNKNOWN:
break;
}
}
svg
.selectAll(".link")
.data(links)
.join("line")
.classed("link", true);
var t1 = svg
.selectAll("g1")
.data(edges).enter()
.append("g");
t1
.append("circle")
.attr("r", iconSize)
.attr("class", "circle")
.classed("node edge", true);
t1
.append('text')
.attr("dx", 12)
.attr("dy", ".35em")
.text(function (d) { return d.nodeName; })
.classed("node text", true);
var t2 = svg
.selectAll("g2")
.data(routers).enter()
.append("g");
t2
.append("rect")
.attr("width", iconSize * 3)
.attr("height", iconSize * 1.5)
.attr("class", "rect")
.classed("node router", true);
t2
.append('text')
.attr("dx", 12)
.attr("dy", ".35em")
.text(function (d) { return d.nodeName; })
.classed("node text", true);
var t3 = svg
.selectAll("g3")
.data(switches).enter()
.append("g");
t3
.append("rect")
.attr("width", iconSize * 3)
.attr("height", iconSize * 1.5)
.attr("class", "rect")
.classed("node switch", true);
t3
.append('text')
.attr("dx", 12)
.attr("dy", ".35em")
.text(function (d) { return d.nodeName; })
.classed("node text", true);
var simulation = d3
.forceSimulation()
.nodes(nodes)
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2))
.force("link", d3.forceLink(links)
.distance(function (d) { return d.distance; }))
.on("tick", tick);
var drag = d3
.drag()
.on("drag", function (event, d) {
d.fx = clamp(event.x, 0, width);
d.fy = clamp(event.y, 0, height);
simulation.alpha(1).restart();
});
t1
.call(drag)
.on("click", function (event, d) {
delete d.fx;
delete d.fy;
simulation.alpha(1).restart();
if (onClick !== undefined)
onClick(d.nodeName);
});
t2
.call(drag)
.on("click", function (event, d) {
delete d.fx;
delete d.fy;
simulation.alpha(1).restart();
if (onClick !== undefined)
onClick(d.nodeName);
});
t3
.call(drag)
.on("click", function (event, d) {
delete d.fx;
delete d.fy;
simulation.alpha(1).restart();
if (onClick !== undefined)
onClick(d.nodeName);
});
}
var ReactNetworkTopology = /** @class */ (function (_super) {
__extends(ReactNetworkTopology, _super);
function ReactNetworkTopology() {
return _super !== null && _super.apply(this, arguments) || this;
}
ReactNetworkTopology.prototype.render = function () {
var _a = this.props, width = _a.width, height = _a.height, id = _a.id;
return (React.createElement("svg", { id: id, width: width, height: height }));
};
ReactNetworkTopology.prototype.componentDidMount = function () {
iconSize = (this.props.size === undefined) ? 10 : this.props.size;
drawTopology(this.props);
};
ReactNetworkTopology.prototype.componentDidUpdate = function (prevProps, prevState, snapshot) {
if (prevProps.size !== this.props.size) {
iconSize = (this.props.size === undefined) ? 10 : this.props.size;
}
drawTopology(this.props);
};
return ReactNetworkTopology;
}(React.Component));
exports.default = ReactNetworkTopology;