Spaces:
Running
on
Zero
Running
on
Zero
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="lib/bindings/utils.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/dist/vis-network.min.css" integrity="sha512-WgxfT5LWjfszlPHXRmBWHkV2eceiWTOBvrKCNbdgDYTHrT2AeLCGbF4sZlZw3UMN3WtL0tGUoIAKsu8mllg/XA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/vis-network.min.js" integrity="sha512-LnvoEWDFrqGHlHmDD2101OrLcbsfkrzoSpvtSQtxK3RMnRV0eOkhhBN2dXHKRrUU8p2DGRTk35n4O8nWSVe1mQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <center> | |
| <h1></h1> | |
| </center> | |
| <!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" /> | |
| <script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>--> | |
| <link | |
| href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" | |
| rel="stylesheet" | |
| integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" | |
| crossorigin="anonymous" | |
| /> | |
| <script | |
| src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" | |
| integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" | |
| crossorigin="anonymous" | |
| ></script> | |
| <center> | |
| <h1></h1> | |
| </center> | |
| <style type="text/css"> | |
| #mynetwork { | |
| width: 100%; | |
| height: 100vh; | |
| background-color: #f8fafc; | |
| border: 1px solid lightgray; | |
| position: relative; | |
| float: left; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="card" style="width: 100%"> | |
| <div id="mynetwork" class="card-body"></div> | |
| </div> | |
| <script type="text/javascript"> | |
| // initialize global variables. | |
| var edges; | |
| var nodes; | |
| var allNodes; | |
| var allEdges; | |
| var nodeColors; | |
| var originalNodes; | |
| var network; | |
| var container; | |
| var options, data; | |
| var filter = { | |
| item : '', | |
| property : '', | |
| value : [] | |
| }; | |
| // This method is responsible for drawing the graph, returns the drawn network | |
| function drawGraph() { | |
| var container = document.getElementById('mynetwork'); | |
| // parsing and collecting nodes and edges from the python | |
| nodes = new vis.DataSet([{"color": {"background": "#e0e7ff", "border": "#6366f1", "highlight": {"background": "#c7d2fe", "border": "#4f46e5"}}, "created_at": 1756651432, "description": "Aerosmith is a legendary rock band that has announced their retirement from touring after 54 years.", "entity_id": "Aerosmith", "entity_type": "organization", "file_path": "unknown_source", "font": {"color": "#1e293b", "size": 14}, "id": "Aerosmith", "label": "Aerosmith", "shape": "dot", "size": 20, "source_id": "chunk-150cfba3862e116efcee671d872955be", "title": "Aerosmith is a legendary rock band that has announced their retirement from touring after 54 years."}, {"color": {"background": "#e0e7ff", "border": "#6366f1", "highlight": {"background": "#c7d2fe", "border": "#4f46e5"}}, "created_at": 1756651432, "description": "Steven Tyler is the lead singer of Aerosmith who suffered an unrecoverable vocal cord injury leading to the band\u0027s retirement from touring.", "entity_id": "Steven Tyler", "entity_type": "person", "file_path": "unknown_source", "font": {"color": "#1e293b", "size": 14}, "id": "Steven Tyler", "label": "Steven Tyler", "shape": "dot", "size": 20, "source_id": "chunk-150cfba3862e116efcee671d872955be", "title": "Steven Tyler is the lead singer of Aerosmith who suffered an unrecoverable vocal cord injury leading to the band\u0027s retirement from touring."}, {"color": {"background": "#e0e7ff", "border": "#6366f1", "highlight": {"background": "#c7d2fe", "border": "#4f46e5"}}, "created_at": 1756651432, "description": "Vocal cord injury refers to the unrecoverable injury suffered by Steven Tyler that caused Aerosmith to retire from touring.", "entity_id": "Vocal Cord Injury", "entity_type": "category", "file_path": "unknown_source", "font": {"color": "#1e293b", "size": 14}, "id": "Vocal Cord Injury", "label": "Vocal Cord Injury", "shape": "dot", "size": 20, "source_id": "chunk-150cfba3862e116efcee671d872955be", "title": "Vocal cord injury refers to the unrecoverable injury suffered by Steven Tyler that caused Aerosmith to retire from touring."}, {"color": {"background": "#e0e7ff", "border": "#6366f1", "highlight": {"background": "#c7d2fe", "border": "#4f46e5"}}, "created_at": 1756651432, "description": "Touring refers to the activity of performing live concerts in various locations, which Aerosmith has retired from after 54 years.", "entity_id": "Touring", "entity_type": "category", "file_path": "unknown_source", "font": {"color": "#1e293b", "size": 14}, "id": "Touring", "label": "Touring", "shape": "dot", "size": 20, "source_id": "chunk-150cfba3862e116efcee671d872955be", "title": "Touring refers to the activity of performing live concerts in various locations, which Aerosmith has retired from after 54 years."}, {"color": {"background": "#e0e7ff", "border": "#6366f1", "highlight": {"background": "#c7d2fe", "border": "#4f46e5"}}, "created_at": 1756651432, "description": "Fractured larynx is the specific injury Steven Tyler suffered in September 2023, which was unsuccessfully treated.", "entity_id": "Fractured Larynx", "entity_type": "category", "file_path": "unknown_source", "font": {"color": "#1e293b", "size": 14}, "id": "Fractured Larynx", "label": "Fractured Larynx", "shape": "dot", "size": 20, "source_id": "chunk-150cfba3862e116efcee671d872955be", "title": "Fractured larynx is the specific injury Steven Tyler suffered in September 2023, which was unsuccessfully treated."}, {"color": {"background": "#e0e7ff", "border": "#6366f1", "highlight": {"background": "#c7d2fe", "border": "#4f46e5"}}, "created_at": 1756651432, "description": "Unsuccessful treatment refers to the medical efforts to heal Steven Tyler\u0027s fractured larynx that did not result in recovery.", "entity_id": "Unsuccessful Treatment", "entity_type": "category", "file_path": "unknown_source", "font": {"color": "#1e293b", "size": 14}, "id": "Unsuccessful Treatment", "label": "Unsuccessful Treatment", "shape": "dot", "size": 20, "source_id": "chunk-150cfba3862e116efcee671d872955be", "title": "Unsuccessful treatment refers to the medical efforts to heal Steven Tyler\u0027s fractured larynx that did not result in recovery."}, {"color": {"background": "#e0e7ff", "border": "#6366f1", "highlight": {"background": "#c7d2fe", "border": "#4f46e5"}}, "created_at": 1756651432, "description": "September 2023 is the time when Steven Tyler suffered a fractured larynx.", "entity_id": "September 2023", "entity_type": "event", "file_path": "unknown_source", "font": {"color": "#1e293b", "size": 14}, "id": "September 2023", "label": "September 2023", "shape": "dot", "size": 20, "source_id": "chunk-150cfba3862e116efcee671d872955be", "title": "September 2023 is the time when Steven Tyler suffered a fractured larynx."}]); | |
| edges = new vis.DataSet([{"color": {"color": "#6366f1", "highlight": "#4f46e5"}, "created_at": 1756651440, "description": "Steven Tyler is the lead singer of Aerosmith, whose vocal injury led to the band\u0027s retirement from touring.", "file_path": "unknown_source", "font": {"color": "#4b5563", "face": "Arial", "size": 12}, "from": "Aerosmith", "keywords": "band membership,cause of retirement", "source_id": "chunk-150cfba3862e116efcee671d872955be", "title": "Steven Tyler is the lead singer of Aerosmith, whose vocal injury led to the band\u0027s retirement from touring.", "to": "Steven Tyler", "width": 4}, {"color": {"color": "#6366f1", "highlight": "#4f46e5"}, "created_at": 1756651442, "description": "The vocal cord injury to Steven Tyler led to Aerosmith\u0027s retirement from touring.", "file_path": "unknown_source", "font": {"color": "#4b5563", "face": "Arial", "size": 12}, "from": "Aerosmith", "keywords": "band decision,cause and effect", "source_id": "chunk-150cfba3862e116efcee671d872955be", "title": "The vocal cord injury to Steven Tyler led to Aerosmith\u0027s retirement from touring.", "to": "Vocal Cord Injury", "width": 4}, {"color": {"color": "#6366f1", "highlight": "#4f46e5"}, "created_at": 1756651444, "description": "Aerosmith has officially retired from touring after 54 years.", "file_path": "unknown_source", "font": {"color": "#4b5563", "face": "Arial", "size": 12}, "from": "Aerosmith", "keywords": "career activity,retirement", "source_id": "chunk-150cfba3862e116efcee671d872955be", "title": "Aerosmith has officially retired from touring after 54 years.", "to": "Touring", "width": 4}, {"color": {"color": "#6366f1", "highlight": "#4f46e5"}, "created_at": 1756651441, "description": "Steven Tyler suffered an unrecoverable vocal cord injury that affected his ability to perform.", "file_path": "unknown_source", "font": {"color": "#4b5563", "face": "Arial", "size": 12}, "from": "Steven Tyler", "keywords": "career impact,health issue", "source_id": "chunk-150cfba3862e116efcee671d872955be", "title": "Steven Tyler suffered an unrecoverable vocal cord injury that affected his ability to perform.", "to": "Vocal Cord Injury", "width": 4}, {"color": {"color": "#6366f1", "highlight": "#4f46e5"}, "created_at": 1756651442, "description": "Steven Tyler\u0027s fractured larynx in September 2023 was the cause of his vocal cord injury.", "file_path": "unknown_source", "font": {"color": "#4b5563", "face": "Arial", "size": 12}, "from": "Steven Tyler", "keywords": "health event,injury cause", "source_id": "chunk-150cfba3862e116efcee671d872955be", "title": "Steven Tyler\u0027s fractured larynx in September 2023 was the cause of his vocal cord injury.", "to": "Fractured Larynx", "width": 4}, {"color": {"color": "#6366f1", "highlight": "#4f46e5"}, "created_at": 1756651444, "description": "Steven Tyler underwent unsuccessful treatment for his fractured larynx.", "file_path": "unknown_source", "font": {"color": "#4b5563", "face": "Arial", "size": 12}, "from": "Steven Tyler", "keywords": "health outcome,medical treatment", "source_id": "chunk-150cfba3862e116efcee671d872955be", "title": "Steven Tyler underwent unsuccessful treatment for his fractured larynx.", "to": "Unsuccessful Treatment", "width": 4}, {"color": {"color": "#6366f1", "highlight": "#4f46e5"}, "created_at": 1756651444, "description": "The fractured larynx injury occurred in September 2023.", "file_path": "unknown_source", "font": {"color": "#4b5563", "face": "Arial", "size": 12}, "from": "September 2023", "keywords": "injury timing,temporal occurrence", "source_id": "chunk-150cfba3862e116efcee671d872955be", "title": "The fractured larynx injury occurred in September 2023.", "to": "Fractured Larynx", "width": 4}, {"color": {"color": "#6366f1", "highlight": "#4f46e5"}, "created_at": 1756651447, "description": "The unsuccessful treatment was aimed at healing the fractured larynx.", "file_path": "unknown_source", "font": {"color": "#4b5563", "face": "Arial", "size": 12}, "from": "Fractured Larynx", "keywords": "injury management,medical intervention", "source_id": "chunk-150cfba3862e116efcee671d872955be", "title": "The unsuccessful treatment was aimed at healing the fractured larynx.", "to": "Unsuccessful Treatment", "width": 4}]); | |
| nodeColors = {}; | |
| allNodes = nodes.get({ returnType: "Object" }); | |
| for (nodeId in allNodes) { | |
| nodeColors[nodeId] = allNodes[nodeId].color; | |
| } | |
| allEdges = edges.get({ returnType: "Object" }); | |
| // adding nodes and edges to the graph | |
| data = {nodes: nodes, edges: edges}; | |
| var options = { | |
| "configure": { | |
| "enabled": false | |
| }, | |
| "edges": { | |
| "color": { | |
| "inherit": true | |
| }, | |
| "smooth": { | |
| "enabled": true, | |
| "type": "dynamic" | |
| } | |
| }, | |
| "interaction": { | |
| "dragNodes": true, | |
| "hideEdgesOnDrag": false, | |
| "hideNodesOnDrag": false | |
| }, | |
| "physics": { | |
| "enabled": true, | |
| "stabilization": { | |
| "enabled": true, | |
| "fit": true, | |
| "iterations": 1000, | |
| "onlyDynamicEdges": false, | |
| "updateInterval": 50 | |
| } | |
| } | |
| }; | |
| network = new vis.Network(container, data, options); | |
| return network; | |
| } | |
| drawGraph(); | |
| </script> | |
| </body> | |
| </html> |