yvachot/DataLineageVisualizer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial commit

Browse source
This commit is contained in:
Yûki VACHOT 2024-05-12 17:24:49 +02:00
commit 282eb4c547
5 changed files with 142 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

0
README.md Normal file
View file

0
assets/data_lineage_json.json Normal file
View file

14
index.html Normal file
View file

@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Data Lineage Visualizer</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div id="container">
<div id="graphTitle" class="graph-title">Data Lineage - Network Graph Visualization</div>
</div>
<script type="module" src="script.js"></script>
</body>
</html>

99
script.js Normal file
View file

@ -0,0 +1,99 @@
import graphology from 'https://cdn.jsdelivr.net/npm/graphology/+esm';
import Sigma from 'https://cdn.jsdelivr.net/npm/sigma/+esm';
import forceAtlas2 from 'https://cdn.jsdelivr.net/npm/graphology-layout-forceatlas2/+esm';
document.addEventListener('DOMContentLoaded', function() {
main();
});
async function main(){
try {
const network_graph_json = await getNetworkGraphJson();
let graph = createGraph(network_graph_json);
graph = addLayout(graph);
console.log("Graph data:", network_graph_json);
console.log("Graph object:", graph);
const sigmaInstance = new Sigma(graph, document.getElementById('container'));
add_drawer(sigmaInstance, graph);
} catch (error) {
console.error('Failed to load or create the graph:', error);
}
}
function createGraph(network_graph_json){
let graph = new graphology.Graph();
for (const node of network_graph_json.nodes) {
graph.addNode(
node.key,
{
label: node.label,
tag: node.tag,
URL: node.URL,
cluster: node.cluster,
size: network_graph_json.tags.find((el) => el.key === node.tag).size,
color: network_graph_json.tags.find((el) => el.key === node.tag).color,
}
);
}
for (const edge of network_graph_json.edges) {
graph.addEdge(edge.source, edge.target);
}
return graph;
}
function addLayout(graph){
graph.forEachNode((node) => {
if (!graph.getNodeAttribute(node, 'x') && !graph.getNodeAttribute(node, 'y')) {
graph.setNodeAttribute(node, 'x', Math.random());
graph.setNodeAttribute(node, 'y', Math.random());
}
});
forceAtlas2.assign(graph, {
iterations: 100,
settings: {
gravity: 0.5,
scalingRatio: 2.0
}
});
return graph;
}
async function getNetworkGraphJson(){
const response = await fetch('./assets/network_graph_json.json');
if (!response.ok) {
throw new Error('Network response was not ok');
}
return await response.json();
}
function add_drawer(sigmaInstance, graph){
sigmaInstance.on('clickNode', ({node}) => {
const attributes = graph.getNodeAttributes(node);
const drawer = document.getElementById('nodeDrawer');
const drawerText = document.getElementById('drawerText');
drawerText.innerHTML = `Node Label: ${attributes.label}<br>Node Type: ${attributes.tag}<br>More info: <a href="${attributes.URL}">Click here</a>`;
drawer.style.width = "30%";
drawer.style.display = "block";
});
const close = document.getElementsByClassName("close")[0];
close.onclick = function() {
const drawer = document.getElementById('nodeDrawer');
drawer.style.display = "none";
}
window.onclick = function(event) {
const drawer = document.getElementById('nodeDrawer');
if (event.target === drawer) {
drawer.style.display = "none";
}
}
}

29
styles.css Normal file
View file

@ -0,0 +1,29 @@
html, body {
height: 100vh;
margin: 0;
padding: 0;
background: lightgrey;
overflow: hidden;
}
#container {
position: relative;
width: 100vw;
height: 100vh;
background: white;
border: 1px solid #ccc;
overflow: hidden;
}
.graph-title {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
font-size: 32px;
color: #333;
z-index: 5;
background-color: rgba(255, 255, 255, 0.8);
padding: 5px 10px;
border-radius: 5px;
}