github.com/cayleygraph/cayley@v0.7.7/static/js/cayley_visualize.js (about)

     1  // Copyright 2014 The Cayley Authors. All rights reserved.
     2  //
     3  // Licensed under the Apache License, Version 2.0 (the "License");
     4  // you may not use this file except in compliance with the License.
     5  // You may obtain a copy of the License at
     6  //
     7  //     http://www.apache.org/licenses/LICENSE-2.0
     8  //
     9  // Unless required by applicable law or agreed to in writing, software
    10  // distributed under the License is distributed on an "AS IS" BASIS,
    11  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    12  // See the License for the specific language governing permissions and
    13  // limitations under the License.
    14  
    15  $(function() {
    16    $("#sbVisualize").addClass("active");
    17  // make sure the user sees javascript errors
    18    window.onerror = function(msg){alert(msg);};
    19  	
    20    var createGraphVisualization = function(results) {
    21      if (window.sigmaGraph !== undefined) {
    22        sigmaGraph.stopForceAtlas2()
    23        sigmaGraph.kill()
    24        $("#visualize").text("")
    25      }
    26      var nodeMap = {}
    27      var g = {nodes: [], edges: []}
    28      for (var i = 0; i < results.length; i++) {
    29        result = results[i];
    30        source = result["source"]
    31        target = result["target"]
    32  			var source_color
    33  			var target_color
    34  			if (result["source_color"] != undefined) {
    35  				source_color = result["source_color"]
    36  			} else {
    37  				//source_color = "#2c3e50"
    38  				source_color = "#001B8A"
    39  			}
    40  			if (result["target_color"] != undefined) {
    41  				target_color = result["target_color"]
    42  			} else {
    43  				target_color = "#F09300"
    44  			}
    45        if (nodeMap[source] !== true) {
    46          var data = {
    47            id: source,
    48            x: Math.random(),
    49            y: Math.random(),
    50            size: 10,
    51            color: source_color
    52  
    53          }
    54          if (result["source_label"] != undefined) {
    55            data.label = result["source_label"]
    56          } else {
    57            data.label = source
    58          }
    59          g.nodes.push(data)
    60          nodeMap[source] = true
    61        }
    62        if (nodeMap[target] !== true) {
    63          var data = {
    64            id: target,
    65            x: Math.random(),
    66            y: Math.random(),
    67            size: 10,
    68            color: target_color
    69          }
    70          if (result["target_label"] != undefined) {
    71            data.label = result["target_label"]
    72          } else {
    73            data.label = target
    74          }
    75          g.nodes.push(data)
    76          nodeMap[target] = true
    77        }
    78        g.edges.push({
    79          id: "e" + i,
    80          source: source,
    81          target: target,
    82          size: 5,
    83          color: '#ccc'
    84        })
    85  
    86      }
    87      sigmaGraph = new sigma({
    88        graph: g,
    89        container: 'visualize',
    90        settings: {
    91          defaultNodeColor: '#ec5148'
    92        }
    93  
    94      });
    95      sigmaGraph.startForceAtlas2();
    96  		sigmaGraph.forceatlas2.p.linLogMode = true;
    97    }
    98  
    99    $("#run_button").click(function() {
   100      var data = editor.getValue()
   101      if (data.indexOf("target") == -1 || data.indexOf("source") == -1){
   102        alert('Query should have Tag("source") and Tag("target") to be able to visualize')
   103        return;
   104      }
   105      animate();
   106      $.post("/api/v1/query/" + selectedQueryLanguage, data)
   107        .done(function(return_data) {
   108          stopAndReset();
   109          if (typeof(Storage) !== "undefined") {
   110            localStorage.setItem("cayleySavedQueries" + selectedQueryLanguage, data)
   111          }
   112          links = $.parseJSON(return_data)
   113          createGraphVisualization(links.result)
   114        })
   115       .fail(function() {
   116           stopAndReset();
   117       });
   118    });
   119  })