| <!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> |
|
|
