|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="utf-8"> |
|
|
<title>Export Graphe Sigma</title> |
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> |
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"> |
|
|
<script src="https://unpkg.com/graphology@0.25.1/dist/graphology.umd.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/2.4.0/sigma.min.js"></script> |
|
|
<style> |
|
|
body { margin:0; font-family: Arial, sans-serif; } |
|
|
#sigma-container { width: 100%; height: 70vh; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 1rem; } |
|
|
.legend-card { margin-bottom: 1rem; } |
|
|
.legend-card .card-body { max-height: 40vh; overflow-y: auto; } |
|
|
.legend-color { display:inline-block; width:20px; height:20px; border-radius:3px; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container-fluid p-3"> |
|
|
<div class="row mb-2"> |
|
|
<div class="col"> |
|
|
<h3 class="text-center" id="node_name"></h3> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="row"> |
|
|
|
|
|
<div class="col-lg-3"> |
|
|
<div class="card legend-card"> |
|
|
<div class="card-header"><strong>Légende - Nœuds</strong></div> |
|
|
<div class="card-body" id="legend-nodes"></div> |
|
|
</div> |
|
|
<div class="card legend-card"> |
|
|
<div class="card-header"><strong>Légende - Relations</strong></div> |
|
|
<div class="card-body" id="legend-edges"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="col-lg-9"> |
|
|
<div id="sigma-container"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<script> |
|
|
|
|
|
const GRAPH_DATA = `{{GRAPH_DATA}}`; |
|
|
const graphData = JSON.parse(GRAPH_DATA); |
|
|
const LEGEND_HTML_NODES = `{{LEGEND_HTML_NODES}}`; |
|
|
const LEGEND_HTML_EDGES = `{{LEGEND_HTML_EDGES}}`; |
|
|
const NODE_NAME = `{{NODE_NAME}}`; |
|
|
|
|
|
|
|
|
document.getElementById("legend-nodes").innerHTML = LEGEND_HTML_NODES; |
|
|
document.getElementById("legend-edges").innerHTML = LEGEND_HTML_EDGES; |
|
|
document.getElementById("node_name").textContent = NODE_NAME ? ("Composante connexe du noeud : " + NODE_NAME) : ""; |
|
|
|
|
|
const Graph = window.graphology.Graph; |
|
|
const graph = new Graph(); |
|
|
|
|
|
graphData.nodes.forEach(n => graph.addNode(n.id, n)); |
|
|
graphData.edges.forEach(e => graph.addEdge(e.source, e.target, e)); |
|
|
|
|
|
new Sigma(graph, document.getElementById("sigma-container")); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
