CODEWITHSUNDEEP
javascripthtmljsonajaxcytoscape.js
PPillai
PPillai

Reputation: 11

Display JSON file contents with Cytoscape.js by selecting from a dropdown menu

I am trying to write a code where the end user can select a file from a drop down menu and that file would be displayed as a network with Cytoscape.js. My code was fetching a JSON file from the server and displaying the file as a network with Cytoscape but it is not working with a drop down list. I am fairly new to AJAX and Jquery. Any help would be appreciated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>jQuery Test Project</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<body>
<div id="cy"></div>
<style>
  body { 
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 60%;
  width: 60%;
  position: absolute;
  left: 0;
  top: 0;
} 


<select class="sel" id="cy"  name="files">
<option  value="">Select Bait Protein</option>
<option  value="CASP9">CASP9.cyjs</option>

 </select><br>
 <script>
  $(function() 
 {
 file_name = $('select').val();
  $('#cy').load(file_name);

  $.get( 'cy', function( data ) {
      $('#cy').cytoscape({

          style: cytoscape.stylesheet()
              .selector('node')
              .css({
              'content': 'data(name)',
                  'text-valign': 'center',
                  'color': 'white',
                  'text-outline-width': 2,
                  'text-outline-color': '#888'
          })
              .selector('edge')
              .css({
              'target-arrow-shape': 'square',
                  'width': 5,
                  'line-color': '#ddd',
          })
              .selector(':selected')
              .css({
              'background-color': 'black',
                  'line-color': 'black',
                  'target-arrow-color': 'black',
                  'source-arrow-color': 'black'
          })
              .selector('.faded')
              .css({
              'opacity': 0.25,
                  'text-opacity': 0
          }),
          elements : JSON.parse(data),

          ready: function() {
              window.cy = this;
              cy.elements().unselectify();

              cy.on('tap', 'node', function(e) {
                  var node = e.cyTarget;
                  var neighborhood = node.neighborhood().add(node);
                  cy.elements().addClass('faded');
                  neighborhood.removeClass('faded');
              });

              cy.on('tap', 'edge', function(e) {
                  if (e.cyTarget === cy) {
                      cy.elements().removeClass('faded');
                  }
              });
          }

      })
  })
 });

Upvotes: 0

Views: 857

Answers (2)

PPillai
PPillai

Reputation: 11

This is my demo code that takes a specific file from the server and displays it using Cytoscape.js 

  body { 
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  display: block
  position :absolute
  left: 0;
  top: 0;
}


 $(function() { 
  var test;
  $.get( 'CASP9.cyjs', function( data ) {
      $('#cy').cytoscape({

          style: cytoscape.stylesheet()
              .selector('node')
              .css({
              'content': 'data(name)',
                  'text-valign': 'center',
                  'color': 'white',
                  'text-outline-width': 2,
                  'text-outline-color': '#888'
          })
              .selector('edge')
              .css({
              'target-arrow-shape': 'triangle'
          })
              .selector(':selected')
              .css({
              'background-color': 'black',
                  'line-color': 'black',
                  'target-arrow-color': 'black',
                  'source-arrow-color': 'black'
          })
              .selector('.faded')
              .css({
              'opacity': 0.25,
                  'text-opacity': 0
          }),
          elements : JSON.parse(data),


          ready: function() {
              window.cy = this;



              cy.elements().unselectify();

              cy.on('tap', 'node', function(e) {
                  var node = e.cyTarget;
                  var neighborhood = node.neighborhood().add(node);

                  cy.elements().addClass('faded');
                  neighborhood.removeClass('faded');
              });

              cy.on('tap', function(e) {
                  if (e.cyTarget === cy) {
                      cy.elements().removeClass('faded');
                  }
              });
          }

      })
  })
 });

The input file in cyjs format

The output looks like this

Upvotes: 0

Serg Chernata
Serg Chernata

Reputation: 12400

I got this working below. Also, added a change listener because your code was trying to load content once and wouldn't react to select changes.

$('select').on('change', function(){
    // your code
});

https://jsfiddle.net/0uu48aud/2/

Upvotes: 1

Related Questions