UmarKhattab09/WebScraping_With_LLM_FineTuning
0
1<html>2 <head>3 <meta charset="utf-8">4 5 <script>function neighbourhoodHighlight(params) {6 // console.log("in nieghbourhoodhighlight");7 allNodes = nodes.get({ returnType: "Object" });8 // originalNodes = JSON.parse(JSON.stringify(allNodes));9 // if something is selected:10 if (params.nodes.length > 0) {11 highlightActive = true;12 var i, j;13 var selectedNode = params.nodes[0];14 var degrees = 2;15 16 // mark all nodes as hard to read.17 for (let nodeId in allNodes) {18 // nodeColors[nodeId] = allNodes[nodeId].color;19 allNodes[nodeId].color = "rgba(200,200,200,0.5)";20 if (allNodes[nodeId].hiddenLabel === undefined) {21 allNodes[nodeId].hiddenLabel = allNodes[nodeId].label;22 allNodes[nodeId].label = undefined;23 }24 }25 var connectedNodes = network.getConnectedNodes(selectedNode);26 var allConnectedNodes = [];27 28 // get the second degree nodes29 for (i = 1; i < degrees; i++) {30 for (j = 0; j < connectedNodes.length; j++) {31 allConnectedNodes = allConnectedNodes.concat(32 network.getConnectedNodes(connectedNodes[j])33 );34 }35 }36 37 // all second degree nodes get a different color and their label back38 for (i = 0; i < allConnectedNodes.length; i++) {39 // allNodes[allConnectedNodes[i]].color = "pink";40 allNodes[allConnectedNodes[i]].color = "rgba(150,150,150,0.75)";41 if (allNodes[allConnectedNodes[i]].hiddenLabel !== undefined) {42 allNodes[allConnectedNodes[i]].label =43 allNodes[allConnectedNodes[i]].hiddenLabel;44 allNodes[allConnectedNodes[i]].hiddenLabel = undefined;45 }46 }47 48 // all first degree nodes get their own color and their label back49 for (i = 0; i < connectedNodes.length; i++) {50 // allNodes[connectedNodes[i]].color = undefined;51 allNodes[connectedNodes[i]].color = nodeColors[connectedNodes[i]];52 if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) {53 allNodes[connectedNodes[i]].label =54 allNodes[connectedNodes[i]].hiddenLabel;55 allNodes[connectedNodes[i]].hiddenLabel = undefined;56 }57 }58 59 // the main node gets its own color and its label back.60 // allNodes[selectedNode].color = undefined;61 allNodes[selectedNode].color = nodeColors[selectedNode];62 if (allNodes[selectedNode].hiddenLabel !== undefined) {63 allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel;64 allNodes[selectedNode].hiddenLabel = undefined;65 }66 } else if (highlightActive === true) {67 // console.log("highlightActive was true");68 // reset all nodes69 for (let nodeId in allNodes) {70 // allNodes[nodeId].color = "purple";71 allNodes[nodeId].color = nodeColors[nodeId];72 // delete allNodes[nodeId].color;73 if (allNodes[nodeId].hiddenLabel !== undefined) {74 allNodes[nodeId].label = allNodes[nodeId].hiddenLabel;75 allNodes[nodeId].hiddenLabel = undefined;76 }77 }78 highlightActive = false;79 }80 81 // transform the object into an array82 var updateArray = [];83 if (params.nodes.length > 0) {84 for (let nodeId in allNodes) {85 if (allNodes.hasOwnProperty(nodeId)) {86 // console.log(allNodes[nodeId]);87 updateArray.push(allNodes[nodeId]);88 }89 }90 nodes.update(updateArray);91 } else {92 // console.log("Nothing was selected");93 for (let nodeId in allNodes) {94 if (allNodes.hasOwnProperty(nodeId)) {95 // console.log(allNodes[nodeId]);96 // allNodes[nodeId].color = {};97 updateArray.push(allNodes[nodeId]);98 }99 }100 nodes.update(updateArray);101 }102}103 104function filterHighlight(params) {105 allNodes = nodes.get({ returnType: "Object" });106 // if something is selected:107 if (params.nodes.length > 0) {108 filterActive = true;109 let selectedNodes = params.nodes;110 111 // hiding all nodes and saving the label112 for (let nodeId in allNodes) {113 allNodes[nodeId].hidden = true;114 if (allNodes[nodeId].savedLabel === undefined) {115 allNodes[nodeId].savedLabel = allNodes[nodeId].label;116 allNodes[nodeId].label = undefined;117 }118 }119 120 for (let i=0; i < selectedNodes.length; i++) {121 allNodes[selectedNodes[i]].hidden = false;122 if (allNodes[selectedNodes[i]].savedLabel !== undefined) {123 allNodes[selectedNodes[i]].label = allNodes[selectedNodes[i]].savedLabel;124 allNodes[selectedNodes[i]].savedLabel = undefined;125 }126 }127 128 } else if (filterActive === true) {129 // reset all nodes130 for (let nodeId in allNodes) {131 allNodes[nodeId].hidden = false;132 if (allNodes[nodeId].savedLabel !== undefined) {133 allNodes[nodeId].label = allNodes[nodeId].savedLabel;134 allNodes[nodeId].savedLabel = undefined;135 }136 }137 filterActive = false;138 }139 140 // transform the object into an array141 var updateArray = [];142 if (params.nodes.length > 0) {143 for (let nodeId in allNodes) {144 if (allNodes.hasOwnProperty(nodeId)) {145 updateArray.push(allNodes[nodeId]);146 }147 }148 nodes.update(updateArray);149 } else {150 for (let nodeId in allNodes) {151 if (allNodes.hasOwnProperty(nodeId)) {152 updateArray.push(allNodes[nodeId]);153 }154 }155 nodes.update(updateArray);156 }157}158 159function selectNode(nodes) {160 network.selectNodes(nodes);161 neighbourhoodHighlight({ nodes: nodes });162 return nodes;163}164 165function selectNodes(nodes) {166 network.selectNodes(nodes);167 filterHighlight({nodes: nodes});168 return nodes;169}170 171function highlightFilter(filter) {172 let selectedNodes = []173 let selectedProp = filter['property']174 if (filter['item'] === 'node') {175 let allNodes = nodes.get({ returnType: "Object" });176 for (let nodeId in allNodes) {177 if (allNodes[nodeId][selectedProp] && filter['value'].includes((allNodes[nodeId][selectedProp]).toString())) {178 selectedNodes.push(nodeId)179 }180 }181 }182 else if (filter['item'] === 'edge'){183 let allEdges = edges.get({returnType: 'object'});184 // check if the selected property exists for selected edge and select the nodes connected to the edge185 for (let edge in allEdges) {186 if (allEdges[edge][selectedProp] && filter['value'].includes((allEdges[edge][selectedProp]).toString())) {187 selectedNodes.push(allEdges[edge]['from'])188 selectedNodes.push(allEdges[edge]['to'])189 }190 }191 }192 selectNodes(selectedNodes)193}</script>194 <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" />195 <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>196 197 198 199 200 201 202 203 204<center>205<h1></h1>206</center>207 208<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />209<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->210 <link211 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"212 rel="stylesheet"213 integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"214 crossorigin="anonymous"215 />216 <script217 src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"218 integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"219 crossorigin="anonymous"220 ></script>221 222 223 <center>224 <h1></h1>225 </center>226 <style type="text/css">227 228 #mynetwork {229 width: 1000px;230 height: 700px;231 background-color: #ffffff;232 border: 1px solid lightgray;233 position: relative;234 float: left;235 }236 237 238 239 240 241 242 </style>243 </head>244 245 246 <body>247 <div class="card" style="width: 100%">248 249 250 <div id="mynetwork" class="card-body"></div>251 </div>252 253 254 255 256 <script type="text/javascript">257 258 // initialize global variables.259 var edges;260 var nodes;261 var allNodes;262 var allEdges;263 var nodeColors;264 var originalNodes;265 var network;266 var container;267 var options, data;268 var filter = {269 item : '',270 property : '',271 value : []272 };273 274 275 276 277 278 // This method is responsible for drawing the graph, returns the drawn network279 function drawGraph() {280 var container = document.getElementById('mynetwork');281 282 283 284 // parsing and collecting nodes and edges from the python285 nodes = new vis.DataSet([{"color": "#97c2fc", "font": {"color": "black"}, "id": 10, "label": 10, "shape": "dot", "size": 10}, {"color": "#97c2fc", "font": {"color": "black"}, "id": "business", "label": "business", "shape": "dot", "size": 10}, {"color": "#97c2fc", "font": {"color": "black"}, "id": "climate", "label": "climate", "shape": "dot", "size": 10}, {"color": "#97c2fc", "font": {"color": "black"}, "id": "health", "label": "health", "shape": "dot", "size": 10}, {"color": "#97c2fc", "font": {"color": "black"}, "id": "politics", "label": "politics", "shape": "dot", "size": 10}, {"color": "#97c2fc", "font": {"color": "black"}, "id": "science", "label": "science", "shape": "dot", "size": 10}]);286 edges = new vis.DataSet([{"from": 10, "to": "business", "width": 1}, {"from": 10, "to": "climate", "width": 1}, {"from": 10, "to": "health", "width": 1}, {"from": 10, "to": "politics", "width": 1}, {"from": 10, "to": "science", "width": 1}]);287 288 nodeColors = {};289 allNodes = nodes.get({ returnType: "Object" });290 for (nodeId in allNodes) {291 nodeColors[nodeId] = allNodes[nodeId].color;292 }293 allEdges = edges.get({ returnType: "Object" });294 // adding nodes and edges to the graph295 data = {nodes: nodes, edges: edges};296 297 var options = {298 "configure": {299 "enabled": false300 },301 "edges": {302 "color": {303 "inherit": true304 },305 "smooth": {306 "enabled": true,307 "type": "dynamic"308 }309 },310 "interaction": {311 "dragNodes": true,312 "hideEdgesOnDrag": false,313 "hideNodesOnDrag": false314 },315 "physics": {316 "enabled": true,317 "stabilization": {318 "enabled": true,319 "fit": true,320 "iterations": 1000,321 "onlyDynamicEdges": false,322 "updateInterval": 50323 }324 }325};326 327 328 329 330 331 332 network = new vis.Network(container, data, options);333 334 335 336 337 338 339 340 341 342 343 return network;344 345 }346 drawGraph();347 </script>348 </body>349</html>