Spaces:
Running
Running
| <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"> | |
| <!-- Colonne des légendes --> | |
| <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> | |
| <!-- Colonne du graphe --> | |
| <div class="col-lg-9"> | |
| <div id="sigma-container"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Ces variables seront remplacées dynamiquement | |
| 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}}`; | |
| // On injecte les légendes | |
| 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) : ""; | |
| // Reconstruction du graphe Sigma | |
| 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> | |