app/views/climate/recommend.scala.html

@*******************************************************************************
 * Licensed to the Apache Software Foundation (ASF) under one or more		   *
 * contributor license agreements.  See the NOTICE file distributed with	   *
 * this work for additional information regarding copyright ownership.         *
 * The ASF licenses this file to You under the Apache License, Version 2.0     *
 * (the "License"); you may not use this file except in compliance with        *
 * the License.  You may obtain a copy of the License at                       *
 *                                                                             *
 *    http://www.apache.org/licenses/LICENSE-2.0                               *
 *																			   *
 * Unless required by applicable law or agreed to in writing, software         *
 * distributed under the License is distributed on an "AS IS" BASIS,           *
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.    *
 * See the License for the specific language governing permissions and         *
 * limitations under the License.											   *
 *******************************************************************************@ 

@(jsonData: String)
@import helper._

<link rel="stylesheet"
	href='@routes.Assets.at("stylesheets/custom_recommend.css")'>

<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/vis/3.11.0/vis.min.css"
>

<link rel="stylesheet"
	href='@routes.Assets.at("stylesheets/livefitler.css")'>
	
@scripts = {
	<script src='@routes.Assets.at("javascripts/edit_button.js")'></script>
	<script src='@routes.Assets.at("javascripts/livefilter.js")'></script>
	<script type="text/javascript" src='@routes.Assets.at("javascripts/jquery-1.9.0.min.js")'></script>
}

@main("Service Logs", scripts){
	
	@flash_message()   

  <div id="jsonData" style="display: none;">@jsonData</div>
  <div id="graphText">
    <div class="row">
      <div class="col-lg-6" id="testGraph">
      </div>
      <div class="col-lg-6" id="testText">
      </div>
    </div>
  </div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/3.11.0/vis.min.js"></script>
  <script type="text/javascript">
  	  var jsonString = $('#jsonData').text();
  	 	var data = JSON.parse(jsonString);
      var container = document.getElementById('testGraph');
      var options = {
        stabilize:false,
        edges: {
          color: {
            color: "gray",
            highlight: "gray",
          },
        },
        nodes: {
          shape: 'dot',
          radiusMin: 10,
          radiusMax: 30,
        },
        groups: {
          user: {
            color:"#F2545A",
            shape:"star",
          },
          feature: {
            shape:"triangle",
            color:"#EC8F93",
          },
          service: {
            color:"#EF777C",
            shape:"dot",
          },
          /*data: {
            color:"#F46369",
            shape:"square",
          }*/
        },
        tooltip: {
          delay: 300,
          fontColor: "black",
          fontSize: 14, // px
          fontFace: "verdana",
          color: {
            border: "#666",
            background: "#FFFFC6"
          }
        }
      };

      var network = new vis.Network(container, data, options);
      //focus on serviceid 19
      network.focusOnNode(19);
      network.on('select', function(properties) {
        var select_node = $.grep(data.nodes, function(e){
          return e["id"] == properties.nodes[0];
        })[0];
        if(select_node["group"] == "service"){
          var select_edges = $.grep(data.edges, function(e) { 
            return e["from"] == select_node["id"] });
          var textVal = "";
          textVal += "<h3>"+select_node["label"]+"</h3>";
          textVal += "<div><h4>Keywords:</h4><h4>"
          for (var i = select_edges.length - 1; i >= 0; i--) {
            textVal += "<span class=\"label label-primary\">"+select_edges[i]["to"]+"</span>\n";
          };
          textVal += "</h4></div>";
          textVal += "<div><img src=\""+select_node["image"]+"\" class=\"img-responsive\"></div>";
          $("#testText").html(textVal);
        }
      });
  </script>
  
  
	
}