Mercurial > repos > pablocarb > synbiodesign

diff rpviz/new_html/template2.html @ 16:fe78fd6b315a draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
planemo upload commit 87db86a34f2d92eb2c9756bf9ee53ae2970554d5
author pablocarb
date Tue, 11 Jun 2019 11:42:40 -0400
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/rpviz/new_html/template2.html	Tue Jun 11 11:42:40 2019 -0400
@@ -0,0 +1,106 @@
+<!doctype html>
+
+<html>
+
+<head>
+    <meta charset='utf-8'></meta>
+    <title>Viewer</title>
+    <script id="elements"></script>
+    <script id="svg"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.7.0/cytoscape.min.js"></script>
+    <script>
+    function displaynet(network){
+      var cy = cytoscape({
+        container: $('#cy'),
+
+        elements:network
+      ,
+
+      layout: {
+            name: 'breadthfirst',
+            //roots: "node[category = 'reactant']"
+          },
+
+        style: [
+          {
+          selector: "node",
+          style: {
+              "background-color": '#80D0D0',
+              "label": "data(name)",
+              "font-size": "7px"
+              }
+          },
+          {selector: "node[category='reactions']",
+          style: {
+            'background-color': '#FA8072',
+            'shape': 'roundrectangle'
+             }},
+         {selector: "node[category='reactant']",
+         style: {
+           'background-color': '#52be80',
+            }},
+         {
+          selector: 'edge',
+          style: {
+            'curve-style': 'bezier',
+            'width': '3px',
+            'target-arrow-shape': 'triangle',
+          }
+        }]
+      });
+
+      cy.on('mouseover','node',function(e){
+        var node_select=e.target;
+        molecule=node_select.data("image");
+        if(molecule){
+        $("#molecule").attr('src',molecule);
+        $("#molecule").css(
+          {"width":"200px",
+           "height":"200px"});}
+      });
+      cy.on('mouseout','node',function(e){
+        $("#molecule").attr('src',"");
+        $("#molecule").css({
+          "width":"",
+          "height":""});
+      });
+
+      cy.on('tap','node',function(e){
+        var node_select=e.target;
+        console.log(node_select.data("name"));
+        link=node_select.data("link");
+        if(link){
+          window.open(link)
+        };
+      });
+      };
+
+    $(function() {
+    });
+    </script>
+</head>
+
+<style>
+    #cy {
+        width: 80%;
+        height: 100%;
+        position: absolute;
+        left : 20%;
+    }
+
+
+#molecule{
+  position : absolute;
+}
+
+</style>
+
+<body>
+  <div id="cy"></div>
+  <img id="molecule" src="" />
+  <form>
+    Choose a pathway :
+  </form>
+</body>
+</html>