diff options
Diffstat (limited to 'src/generic-components/OutputVisualization.jsx')
| -rw-r--r-- | src/generic-components/OutputVisualization.jsx | 331 |
1 files changed, 331 insertions, 0 deletions
diff --git a/src/generic-components/OutputVisualization.jsx b/src/generic-components/OutputVisualization.jsx new file mode 100644 index 0000000..734887d --- /dev/null +++ b/src/generic-components/OutputVisualization.jsx @@ -0,0 +1,331 @@ +/* + * ============LICENSE_START======================================================= + * org.onap.aai + * ================================================================================ + * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import React from 'react'; +import * as d3 from "d3"; +import 'd3-selection-multi'; +import {GlobalExtConstants} from 'utils/GlobalExtConstants.js'; + +let INVLIST = GlobalExtConstants.INVLIST; +let PAGINATION_CONSTANT = GlobalExtConstants.PAGINATION_CONSTANT; + +/** + * This function will create a visualization from query outputs + * @param props + * @returns {*} + */ +var populateGraphObject = (nodes, links, data) => { + for(var i = 0; i < data.results.length; i++){ + nodes[data.results[i].url] = data.results[i]; + let nodeType = data.results[i]['node-type']; + nodes[data.results[i].url].weight = 1/((((data.results[i].url).split('\/')).length) - 3); + let splitUrl = (data.results[i].url).split(nodeType + '\/'); + nodes[data.results[i].url].nodeTypeLabel = nodeType; + nodes[data.results[i].url].nodeKeyLabel = splitUrl.pop(); + let tempIconString = ((splitUrl.pop()).split('\/')); + tempIconString.pop(); //pop last off, not needed + let iconString = tempIconString.pop(); + let iconKey = (iconString.replace(/-/g, '')).toUpperCase(); + if(INVLIST.INVENTORYLIST[iconKey] && INVLIST.INVENTORYLIST[iconKey].icon){ + nodes[data.results[i].url].icon = INVLIST.INVENTORYLIST[iconKey].icon; + }else{ + nodes[data.results[i].url].icon = 'icon-datanetwork-serverL'; + } + console.log("icon string: " + nodes[data.results[i].url].icon); + nodes[data.results[i].url].id = data.results[i].url; + for(var j = 0; j < data.results[i]['related-to'].length; j++){ + let linkKey = data.results[i].url + '|' + data.results[i]['related-to'][j].url; + let inverseLinkKey = data.results[i]['related-to'][j].url + '|' + data.results[i].url; + if(!links[linkKey] && !links[inverseLinkKey]){ + links[linkKey] = data.results[i]['related-to'][j]; + links[linkKey].source = data.results[i].url; + links[linkKey].target = data.results[i]['related-to'][j].url; + links[linkKey].weight = 1/((((data.results[i].url).split('\/')).length) - 3); + let subset = (data.results[i]['related-to'][j]['relationship-label']).split(/[\.]+/); + links[linkKey].type = subset[subset.length - 1]; + } + } + } + + for (var key in links) { + if (links.hasOwnProperty(key)) { + console.log(key + " -> " + links[key]); + if(!nodes[links[key].source] || !nodes[links[key].target]){ + delete links[key]; + } + } + } +} +var chart = (chartId, nodesObj, linksObj, rawData, classContext) => { + if(rawData.results.length <= PAGINATION_CONSTANT.RESULTS_PER_PAGE){ + populateGraphObject( nodesObj, linksObj, rawData); + let links = Object.values(linksObj).map(d => Object.create(d)); + let nodes = Object.values(nodesObj).map(d => Object.create(d)); + let colors = d3.scaleOrdinal(d3.schemeCategory10); + + let svg = d3.select('#'+chartId), + width = +svg.attr("width"), + height = +svg.attr("height"), + node, + link, + edgepaths, + edgelabels; + + svg.html(null); + var g = svg.append("g") + .attr("class", "everything"); + g.append("rect") + .attr("width", "100%") + .attr("height", "100%") + .attr("fill", "white"); + + var forceLink = d3 + .forceLink().id(function (d) { + return d.id; + }) + .distance(function (d) { + return 1000 * d.weight; + }) + .strength(1.5); + + var collisionForce = d3.forceCollide(100).strength(1.5).iterations(100); + + var simulation = d3.forceSimulation() + .force("link", forceLink) + .force("charge", d3.forceManyBody().strength(function (d, i) { + var a = i == 0 ? -2000 : -1000; + return a; + }).distanceMin(200).distanceMax(1000)) + .force("center", d3.forceCenter(width / 2, height / 2)) + .force("collisionForce",collisionForce); + + //Zoom functions + function zoom_actions(){ + g.attr("transform", d3.event.transform) + } + //add zoom capabilities + var zoom_handler = d3.zoom() + .on("zoom", zoom_actions); + + zoom_handler(svg); + + update(links, nodes); + + function zoomFit() { + var bounds = g.node().getBBox(); + var parent = g.node().parentElement; + var fullWidth = parent.clientWidth || parent.parentNode.clientWidth, + fullHeight = parent.clientHeight || parent.parentNode.clientHeight; + var width = bounds.width, + height = bounds.height; + var midX = bounds.x + width / 2, + midY = bounds.y + height / 2; + if (width == 0 || height == 0) return; // nothing to fit + var scale = 0.95 / Math.max(width / fullWidth, height / fullHeight); + var translate = [fullWidth / 2 - scale * midX, fullHeight / 2 - scale * midY]; + + console.trace("zoomFit", translate, scale); + + /*zoom_handler.translateTo(g, translate[0], translate[1]) + .scaleTo(g, scale);*/ + } + + function update(links, nodes) { + link = g.selectAll(".link") + .data(links) + .enter() + .append("line") + .attrs({ + 'stroke': '#999', + 'stroke-opacity': .6, + 'stroke-width': '1px', + 'id': function (d, i) {return 'line' + chartId + d.id} + }); + + link.append("title") + .text(function (d) {return d.type;}); + + edgepaths = g.selectAll(".edgepath") + .data(links) + .enter() + .append('path') + .attrs({ + 'class': 'edgepath', + 'fill-opacity': 0, + 'stroke-opacity': 0, + 'id': function (d, i) {return 'edgepath' + chartId + d.id} + }) + .style("pointer-events", "none"); + + /*edgelabels = g.selectAll(".edgelabel") + .data(links) + .enter() + .append('text') + .style("pointer-events", "none") + .attrs({ + 'class': 'edgelabel', + 'id': function (d, i) {return 'edgelabel' + chartId + d.id}, + 'font-size': 8, + 'fill': '#aaa' + }); + + edgelabels.append('textPath') + .attr('xlink:href', function (d, i) {return '#edgepath' + chartId + d.id}) + .style("text-anchor", "middle") + .style("pointer-events", "none") + .attr("startOffset", "50%") + .text(function (d) {return d.type});*/ + + node = g.selectAll(".node") + .data(nodes) + .enter() + .append("g") + .attr("class", "node") + .attr("id", function (d) {return "node" + chartId + (((decodeURIComponent(d.url)).replace(new RegExp('\/', 'g'),'-')).replace(new RegExp(':', 'g'),'-')).replace(new RegExp('\\.', 'g'),'-')}) + .call(d3.drag() + .on("start", dragstarted) + .on("drag", dragged) + .on("end", dragended) + ); + + node.append("svg:foreignObject") + .attr("width", 70) + .attr("height", 70) + .attr("x", -45) + .attr("dy", function (d) {return -1 * (Math.max((Math.round(d.weight * 250)/10), 2));}) + .append("xhtml:span") + .attr("class", function (d) {return d.icon;}) + .style("padding", "10px") + .style("font-size", function (d) {return Math.max(Math.round(d.weight * 250), 20) + "px";}) + .attr("id", function (d) {return "nodeIcon" + chartId + (((decodeURIComponent(d.url)).replace(new RegExp('\/', 'g'),'-')).replace(new RegExp(':', 'g'),'-')).replace(new RegExp('\\.', 'g'),'-')}) + .style("color", '#387dff') + .style("display", "block"); + + + node.append("title") + .text(function (d) {return decodeURIComponent(d.id);}); + + node.append("text") + .attr("dy", 0) + .attr("dx", -10) + .attr('font-size', 10) + .text(function (d) {return d.nodeTypeLabel;}) + .style("text-anchor", "middle"); + + node.append("text") + .attr("dy", function (d) {return (Math.max(Math.round(d.weight * 250) + 15, 55));}) + .attr("dx", -10) + .attr('font-size', 8) + .text(function (d) {return decodeURIComponent(d.nodeKeyLabel);}) + .style("text-anchor", "middle"); + + node.on("dblclick",function(d){ classContext.openNodeModal("test", d.url, d['node-type']) }); + + simulation + .nodes(nodes) + .on("tick", ticked) + .on("end", zoomFit); + + simulation.force("link") + .links(links); + + svg.on("dblclick.zoom", null); + } + + function ticked() { + 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;}); + + node + .attr("transform", function (d) {return "translate(" + d.x + ", " + d.y + ")";}); + + edgepaths.attr('d', function (d) { + return 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y; + }); + + /*edgelabels.attr('transform', function (d) { + if (d.target.x < d.source.x) { + let bbox = this.getBBox(); + let rx = bbox.x + bbox.width / 2; + let ry = bbox.y + bbox.height / 2; + return 'rotate(180 ' + rx + ' ' + ry + ')'; + } + else { + return 'rotate(0)'; + } + });*/ + } + + function dragstarted(d) { + simulation.stop(); + } + + function dragged(d) { + d.fx = d3.event.x; + d.fy = d3.event.y; + d.x = d3.event.x; + d.y = d3.event.y; + ticked(); + } + + function dragended(d) { + d.fixed = true; + ticked(); + } + }else{ + let svg = d3.select('#'+chartId), + width = +svg.attr("width"), + height = +svg.attr("height"), + node, + link, + edgepaths, + edgelabels; + let svgHtml = "<foreignObject x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">" + + "<body xmlns=\"http://www.w3.org/1999/xhtml\">" + + "<div class=\"svgbody\">" + + "<h1>Graphical output is limited to " + PAGINATION_CONSTANT.RESULTS_PER_PAGE + + " nodes. Your query returned " + rawData.results.length + + " nodes, which the GUI does not support, please limit your query or if this data" + + " is needed access it through our externally supported APIs." + + "</h1>" + + "</div>"+ + "</body>"+ + "</foreignObject>"; + svg.html(svgHtml); + } +} +const OutputVisualization = (props) => { + if (props.identifier && props.width && props.height && props.overflow) { + return ( + <svg id={props.identifier} width={props.width} height={props.height} overflow={props.overflow}></svg> + ); + + }else{ + return (<p>Graph Configuration Error</p>); + } +}; + +export default OutputVisualization; +export const Visualization = { + chart: chart +} |