Code refactoring after #1196

This commit is contained in:
Alex X
2024-06-16 22:12:52 +03:00
parent 5b481a27c6
commit e6fa97c738

View File

@@ -28,69 +28,52 @@
<div id="network"></div> <div id="network"></div>
<script src="main.js"></script> <script src="main.js"></script>
<script> <script>
let network;
let nodes = new vis.DataSet();
let edges = new vis.DataSet();
let seed = "";
/* global vis */ /* global vis */
window.addEventListener('load', () => { window.addEventListener('load', () => {
const url = new URL('api/streams.dot' + location.search, location.href); const url = new URL('api/streams.dot' + location.search, location.href);
const container = document.getElementById('network');
const options = { const options = {
edges: { edges: {
font: {align: 'middle'}, font: {align: 'middle'},
smooth: false, smooth: false,
}, },
nodes: {shape: 'box'}, nodes: {shape: 'box'},
physics: { physics: false,
enabled: false,
stabilization: {
enabled: false,
}
},
autoResize: true,
locale: navigator.language.toLowerCase().split('-').slice(0, 2).join('-'),
}; };
const container = document.getElementById('network');
let network;
async function fetchDataAndUpdateNetwork() { async function update() {
try { try {
const response = await fetch(url, {cache: 'no-cache'}); const response = await fetch(url, {cache: 'no-cache'});
const dotData = await response.text(); const dotData = await response.text();
const data = vis.parseDOTNetwork(dotData); const data = vis.parseDOTNetwork(dotData);
if (!network) { if (!network) {
nodes = new vis.DataSet(data.nodes); network = new vis.Network(container, data, options);
edges = new vis.DataSet(data.edges);
network = new vis.Network(container, { nodes, edges }, options);
network.storePositions(); network.storePositions();
seed = network.getSeed();
} else { } else {
const positions = network.getPositions(); const positions = network.getPositions();
const viewState = network.getViewPosition(); const viewPosition = network.getViewPosition();
const scale = network.getScale(); const scale = network.getScale();
network.setOptions({layout: {
randomSeed: seed
}})
network.setData(data); network.setData(data);
for (const nodeId in positions) { for (const nodeId in positions) {
if (positions.hasOwnProperty(nodeId)) { network.moveNode(nodeId, positions[nodeId].x, positions[nodeId].y);
network.moveNode(nodeId, Math.floor(positions[nodeId].x), Math.floor(positions[nodeId].y));
}
} }
network.moveTo({ position: viewState, scale: scale }); network.moveTo({position: viewPosition, scale: scale});
} }
} catch (error) { } catch (error) {
console.error('Error fetching or updating network data:', error); console.error('Error fetching or updating network data:', error);
} }
setTimeout(update, 5000);
} }
fetchDataAndUpdateNetwork(); update();
setInterval(fetchDataAndUpdateNetwork, 5000);
}); });
</script> </script>
</body> </body>