Mercurial > repos > pablocarb > synbiodesign

<!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>
author	pablocarb
date	Thu, 29 Aug 2019 06:59:58 -0400
parents	fe78fd6b315a
children