-
Notifications
You must be signed in to change notification settings - Fork 0
/
sample.html
1 lines (1 loc) · 14.7 KB
/
sample.html
1
<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <title>Visualize JSON-LD EvidenceGraph</title>\n <!--link rel="stylesheet" href="/static/css/style.css"-->\n <link rel="stylesheet" href=../static/css/style.css>\n <!-- Bootstrap CSS -->\n <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"\n integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">\n\n <!-- cytoscape-->\n <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.15.1/cytoscape.min.js"></script>\n <!-- cola -->\n <script src="https://cdn.jsdelivr.net/npm/[email protected]/WebCola/cola.min.js"></script>\n <script src="https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-cola.js"></script>\n <!-- dagre layout -->\n <script src="https://unpkg.com/[email protected]/dist/dagre.js"></script>\n <script src="https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-dagre.min.js"></script>\n <!-- klay layout -->\n <script src="https://unpkg.com/[email protected]/klay.js"></script>\n <script src="https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-klay.min.js"></script>\n <!-- context menu -->\n <script src="https://cdn.jsdelivr.net/npm/@lsvih/[email protected]/cytoscape-cxtmenu.min.js"></script>\n <!-- cytoscape-popper -->\n <script src="https://unpkg.com/[email protected]/dist/umd/popper.js"></script>\n <script src="https://cytoscape.org/cytoscape.js-popper/cytoscape-popper.js"></script>\n <!--script src="https://unpkg.com/[email protected]/dist/tippy-bundle.iife.min.js"></script-->\n <script src="https://unpkg.com/tippy.js@5"></script>\n\n <!-- bootstrap libraries -->\n <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"\n integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"\n crossorigin="anonymous"></script>\n <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"\n integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"\n crossorigin="anonymous"></script>\n <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"\n integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"\n crossorigin="anonymous"></script>\n\n</head>\n<body>\n<div id="cy"></div>\n<script>\n let cytoscape_elements = fetch(\'/graph\')\n .then(response => response.json())\n .then((data) => {\n return data\n });\n //console.log("nodes and edges: \\n", cytoscape_elements);\n\n\n var cy = cytoscape({\n container: document.getElementById(\'cy\'),\n autounselectify: true,\n boxSelectionEnabled: false,\n layout: {\n name: \'dagre\' // other layouts: cola, klay\n },\n elements: cytoscape_elements,\n style: [\n {\n selector: \'node\',\n style: {\n width: \'label\', // label uses auto width of the attribute label: data(NODE_ATTRIBUTE)\n height: \'label\', // same as width above\n shape: \'round-rectangle\',\n \'background-color\': \'#45b39d\',\n //\'background-blacken\': \'-0.5\', // -ve value whitens the background\n //\'background-opacity\': \'0.8\',\n //\'background-fill\': \'linear-gradient\',\n \'border-width\': 2,\n \'border-style\': \'double\',\n \'border-color\': \'#563f46\',\n \'border-opacity\': 0.9,\n \'padding\': \'2px\',\n \'text-wrap\': \'wrap\',\n \'text-max-width\': \'50\', // cutoff width for lengthy content, works with text-overflow-wrap\n \'text-overflow-wrap\': \'anywhere\', // needs\'whitespace\' will wrap around whitespace\n \'text-halign\': \'center\', // placement of content relative to shape\n \'text-valign\': \'center\', // placement of content relative to shape\n \'font-family\': \'sans-serif\',\n \'font-size\': \'4px\',\n label: \'data(name)\', // data(name)\n //content: \'data(href)\' // alternative to label: data(NODE_ATTRIBUTE)\n }\n },\n {\n selector: \'edge\',\n style: {\n width: 2,\n \'line-color\': \'#baaaaa\',\n \'curve-style\': \'bezier\',\n \'target-arrow-color\': \'#032d2d\',\n \'target-arrow-shape\': \'triangle\',\n \'text-opacity\': 0.9,\n \'font-family\': \'sans-serif\',\n \'font-size\': \'14px\',\n \'font-style\': \'normal\',\n \'font-weight\': \'normal\',\n //\'text-rotation\': \'autorotate\', // not working, sits on top of the edge\n //label: \'data(label)\'\n }\n },\n { // assign node color based on their type\n selector: \'node[type = "http://schema.org/Dataset"]\',\n style: {\n \'background-color\': \'#5ec9c9\'\n }\n },\n {\n selector: \'node[type = "http://purl.org/evi/Computation"]\',\n style: {\n \'background-color\': \'#e1a4c2\'\n }\n },\n {\n selector: \'edge.hover\',\n css: {\n \'z-compound-depth\': \'top\',\n \'line-color\': \'#FF0000\',\n \'font-weight\': \'normal\',\n \'font-size\': \'18px\',\n label: \'data(label)\'\n }\n },\n {\n selector: \'node.hover\',\n css: {\n \'z-compound-depth\': \'top\', // overlaps surrounding node when hovered over\n \'border-width\': 2,\n \'border-style\': \'double\',\n \'border-color\': \'#c64c71\',\n \'border-opacity\': 1.0,\n \'padding\': \'5px\',\n \'text-wrap\': \'wrap\',\n \'text-max-width\': \'180\', // cutoff width for lengthy content, works with text-overflow-wrap\n \'text-overflow-wrap\': \'anywhere\', // needs\'whitespace\' will wrap around whitespace\n \'text-halign\': \'center\', // placement of content relative to shape\n \'text-valign\': \'center\', // placement of content relative to shape\n \'font-family\': \'sans-serif\',\n \'font-size\': \'18px\',\n //\'background-color\': \'#fff\',\n //label: \'data(type)\'\n //label: \'data(info)\'\n }\n }\n ]\n });\n // expand-collapse of successor nodes when tapped [courtesy stackoverflow]\n cy.on(\'tap\', \'node\', function () {\n if (this.scratch().restData == null) {\n // Save node data and remove\n this.scratch({\n restData: this.successors().targets().remove()\n });\n } else {\n // Restore the removed nodes from saved data\n this.scratch().restData.restore();\n this.scratch({\n restData: null\n });\n }\n });\n /*\n // Open SOME_URI from \'href\': \'SOME_URI\' when a node is tapped\n cy.on(\'tap\', \'node\', function () {\n try {\n // browser may block popup\n window.open(this.data(\'href\'));\n } catch (e) {\n window.location.href = this.data(\'href\');\n }\n })\n */\n // open context-menu on right-click on nodes\n cy.cxtmenu({\n selector: \'node, edge\',\n\n commands: [\n /* {\n content: \'<span class="fa fa-flash fa-2x"></span>\',\n select: function (ele) {\n console.log(ele.id());\n }\n },\n\n {\n content: \'<span class="fa fa-star fa-2x"></span>\',\n select: function (ele) {\n console.log(ele.data(\'name\'));\n },\n enabled: false\n },\n*/\n {\n content: \'isA\',\n select: function (ele) {\n console.log(ele.position());\n try {\n // browser may block popup\n window.open(ele.data(\'href\'));\n } catch (e) {\n window.location.href = ele.data(\'href\');\n }\n }\n },\n {\n content: \'PID\',\n select: function (ele) {\n console.log(ele.position());\n try {\n // browser may block popup\n window.open(ele.data(\'href\'));\n } catch (e) {\n window.location.href = ele.data(\'href\');\n }\n }\n }\n ]\n });\n\n // mouseover events for edges\n cy.on(\'mouseover\', \'edge\', function (e) {\n e.target.addClass(\'hover\');\n });\n cy.on(\'mouseout\', \'edge\', function (e) {\n e.target.removeClass(\'hover\');\n });\n\n // mouseover events nodes\n let div; // element to bind the popup\n let div2;\n let tip;\n let tippyInstance;\n cy.on(\'mouseover\', \'node\', function (e) {\n let targetNode = e.target;\n targetNode.addClass(\'hover\');\n //showPopup(targetNode); // working only as a html\n //makePopper(targetNode); // working as a popper, close enough to tippy but not perfect\n //a = targetNode.data(\'id\'); get id of the node\n\n let type = targetNode.data(\'type\');\n let typeSuffix = targetNode.data(\'type\').substring(targetNode.data(\'type\').lastIndexOf(\'/\') + 1);\n let nodeContent = \'<h6>\' + \'<span class="badge badge-info">\' + \'isA: \' + \'<a class="text-warning" href="\' + type + \'">\' + type + \'</a>\' + \'</span>\' + \'<br>\'\n + \'<span class="badge badge-info">\' + \'PID: \' + \'<a class="text-warning" href="\' + targetNode.data(\'href\') + \'">\' + targetNode.data(\'href\') + \'</a>\' + \'</span>\' + \'</h6>\';\n tippyInstance = makeTippy(targetNode, nodeContent);\n\n\n console.log(tippyInstance);\n tippyInstance.show();\n });\n\n cy.on(\'mouseout\', \'node\', function (e) {\n e.target.removeClass(\'hover\');\n div2.remove();\n div.remove();\n tippyInstance.hide(); // or tip.hide();\n });\n\n // does not use the cytoscape-popper, just html representation on the page\n function showPopup(targetNode) {\n\n let type = targetNode.data(\'type\');\n let typeSuffix = targetNode.data(\'type\').substring(targetNode.data(\'type\').lastIndexOf(\'/\') + 1);\n\n div = document.createElement(\'div\');\n //div.className = "badge badge-secondary";\n div.innerHTML = \'<h5>\' + \'<span class="badge badge-info">\' + \'type: \' + \'<a class="nav-link active" href="\' + type + \'">\' + type + \'</a>\' + \'</span>\' + \'<br>\'\n + \'<span class="badge badge-info">\' + \'PID: \' + targetNode.data(\'href\') + \'</span>\' + \'</h5>\';\n //div.innerHTML += \'<h5>\' + \'<span class="badge badge-info">\' + \'DOI: \' + targetNode.data(\'href\') + \'</span>\' + \'</h5>\';\n //div.innerHTML += \'<button data-tippy-content="Tooltip">\' + \'Type: \' + type + \'</button>\' + \'<br>\';\n //div.innerHTML += \'<button data-tippy-content="Tooltip">\' + \'@id: \' + targetNode.data(\'href\') + \'</button>\';\n //div.id = "currentnode";\n document.body.appendChild(div);\n }\n\n\n function makePopper(targetNode) {\n let type = targetNode.data(\'type\');\n let typeSuffix = targetNode.data(\'type\').substring(targetNode.data(\'type\').lastIndexOf(\'/\') + 1);\n let popper1 = targetNode.popper({\n content: () => {\n div = document.createElement(\'div\');\n div.className = "card";\n div.innerHTML = \'<h6>\' + \'<span class="badge badge-info">\' + \'type: \' + \'<a class="text-warning" href="\' + type + \'">\' + type + \'</a>\' + \'</span>\' + \'<br>\'\n + \'<span class="badge badge-info">\' + \'PID: \' + \'<a class="text-warning" href="\' + targetNode.data(\'href\') + \'">\' + targetNode.data(\'href\') + \'</a>\' + \'</span>\' + \'</h6>\';\n document.body.appendChild(div);\n return div;\n },\n popper: {}\n });\n let update = () => {\n popper1.scheduleUpdate();\n }\n targetNode.on(\'position\', update);\n cy.on(\'pan zoom resize\', update);\n }\n\n var makeTippy = function (targetNode, text) {\n var ref = targetNode.popperRef();\n\n // unfortunately, a dummy element must be passed\n // as tippy only accepts a dom element as the target\n // https://github.com/atomiks/tippyjs/issues/661\n div = document.createElement(\'div\'); // dummyDomEle\n\n tip = tippy(div, {\n onCreate: function (instance) { // mandatory\n // patch the tippy\'s popper reference so positioning works\n // https://atomiks.github.io/tippyjs/misc/#custom-position\n instance.popperInstance.reference = ref;\n },\n lazy: false, // mandatory\n trigger: \'manual\', // mandatory\n // dom element inside the tippy:\n content: function () { // function can be better for performance\n div2 = document.createElement(\'div\'); // holds content for diaplay\n div2.innerHTML = text;\n return div2;\n },\n // your own preferences:\n arrow: true,\n //placement: \'bottom\',\n hideOnClick: true,\n multiple: true,\n sticky: true,\n //interactiveBorder: 10,\n //interactiveDebounce: 3000,\n // if interactive:\n interactive: true,\n appendTo: document.body // or append dummyDomEle to document.body\n });\n return tip;\n };\n\n\n</script>\n\n</body>\n</html>