@kumologica/builder
Version:
Kumologica build and deploy module
230 lines (194 loc) • 7.27 kB
HTML
<html>
<head>
<script src="assets/jquery-3.6.0.slim.min.js"></script>
<script src="assets/d3.v5.min.js" charset="utf-8"></script>
<script src="assets/dagre-d3.min.js"></script>
<script src="assets/dagre.min.js"></script>
<link rel="stylesheet" href="assets/kdocs.css">
<script>
$(document).ready(function(){
main();
});
let initialScale = 0.75;
let currentScale;
function main() {
// Create a new directed graph
var g = new dagreD3.graphlib.Graph().setGraph({});
g.setGraph({rankdir: "LR", nodesep: 100, marginx: 0, marginy: 200 });
// Default to assigning a new object as a label for each new edge.
g.setDefaultEdgeLabel(function() { return {}; });
let nodes = flow.filter(n => n.z === 'main.flow');
// Add nodes to the graph
nodes.forEach(n => {
let id = n.id;
let type = n.type;
let name = n.name;
// Prepare the content of the node
let html = `
<div class="knode">
<span class="knodetype">${type}</span>
<span class="knodename">${name}</span>
</div>
`
g.setNode(id, {
labelType: 'html',
label: html,
rx: 5,
ry: 5,
padding: 10,
class: 'node'
});
});
// Adding the edges
nodes.forEach(n => {
let source = n.id;
let target;
n.wires.forEach(t => {
target = t[0];
g.setEdge(source, target);
})
});
dagre.layout(g); // TODO - not working
// Create the renderer
var render = new dagreD3.render();
// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("svg"),
inner = svg.append("g");
// Set up zoom support
var zoom = d3.zoom()
.on("zoom", function() {
inner.attr("transform", d3.event.transform);
});
svg.call(zoom);
// Run the renderer. This is what draws the final graph.
render(inner, g);
inner
.selectAll("g.node")
.each(function(nodeId) {
$(this).click( (e) => {
resetSelections()
$(this).toggleClass('nodeSelected');
showPropertiesSection();
let props = getNodeProperties(nodeId);
if (props){
attachNodeProperties(props);
//$('#tabBody').text(getInfo(v));
}
e.stopImmediatePropagation();
return false;
})
});
// Center the graph
currentScale = initialScale;
svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * currentScale) / 5, 20).scale(currentScale));
svg.attr('height', g.graph().height * currentScale + 50);
// $('#zoomIn').click(()=> {
// currentScale = currentScale * (1 + factor);
// zoom.scaleBy(svg.transition().duration(550), currentScale);
// });
// $('#zoomOut').click(()=> {
// currentScale = currentScale * (1 + factor * -1);
// zoom.scaleBy(svg.transition().duration(550), currentScale);
// })
// Deselect when user clicks on graph
$('#graph').click((e)=> {
e.preventDefault();
resetSelections();
hidePropertiesSection();
})
hidePropertiesSection();
}
function showPropertiesSection() {
$('#emptyProps').hide();
$('#props').show();
}
function hidePropertiesSection() {
$('#emptyProps').show();
$('#props').hide();
}
function resetSelections() {
$('#props').empty();
$('g.node').removeClass('nodeSelected')
}
function attachNodeProperties(props) {
console.log('[attachNodeProperties] props=', props)
let { type, name, info } = props;
let propsHtml = `
<div class="prop">
<div class="propLabel">
Type
</div>
<div class="propValue">
${type}
</div>
</div>
<div class="prop">
<div class="propLabel">
Name
</div>
<div class="propValue">
${name}
</div>
</div>
<div class="prop">
<div class="propLabel">
Notes
</div>
<div class="propValue">
${info}
</div>
</div>
`;
$('#props').empty();
$(propsHtml).appendTo($('#props'))
}
function getNodeProperties(nodeId) {
let node = flow.find(n => n.id === nodeId);
if (node){
return { type: node.type, name: node.name, info: node.info || 'Not available' } ;
} else {
return undefined;
}
}
const flow =
REPLACE_FLOW_HERE;
</script>
</head>
<body>
<div id="main">
<div id="header">
<div id="logoContainer">
<a href="https://kumologica.com">
<img id="logo" src="assets/kumologica-logo-white.png" />
</a>
</div>
<div id="flowTitle">Vendor-pull-information</div>
<div id="action"></div>
</div>
<div id="graph">
<svg width=1960 height=100></svg>
</div>
<!-- <div id="zoomControlContainer">
<div id="zoomIn" class="zoomControl">
+
</div>
<div id="zoomOut" class="zoomControl">
–
</div>
</div> -->
<div id="nodeInfo">
<div id="tablist">
<div id="tabDescription">Properties</div>
</div>
<div id="tabBody">
<div id="emptyProps">
<div id="explanationTitle">Click on any node from the graph...</div>
</div>
<div id="props">
</div>
</div>
</div>
</div>
</body>
</html>