Updated so 3D works, all vis's are redrawing properly.

gnvweb/eneg/src/main/java/com/gnv/eneg/GNV.java

@@ -110,18 +110,35 @@ public class GNV {
     /**
      * An Ajax call performed when the user uploads the BED file.
      * Only returns once the file has fully loaded.
-     * @param id
      * @param request
-     * @param response
      * @param model
      * @return
      */
+
     @RequestMapping(value = "/", method = RequestMethod.GET, params = {"request"})
-    public @ResponseBody String showStatus(@RequestParam("request") String request, Model model) throws IOException {
+    public @ResponseBody String getNetworksInUploadedBedFile(@RequestParam("request") String request, Model model) {
 
         return pairAPI.getNetworksInUploadedBedFile().toString();
     }
 
+
+    /**
+     * An Ajax call performed when the user clicks on a network.
+     *
+     * Returns the interactions involved in that network.
+     *
+     * @param request
+     * @param model
+     * @return
+     * @throws IOException
+     */
+    @RequestMapping(value = "/", method = RequestMethod.GET, params = {"chrom", "start", "end"})
+    public @ResponseBody String getNetwork(@RequestParam("chrom") String chrom, @RequestParam("start") String start,  @RequestParam("end") String end, Model model) {
+
+        return pairAPI.getNetwork(chrom, Integer.parseInt(start), Integer.parseInt(end)).toString();
+    }
+
+
     @ExceptionHandler(StorageFileNotFoundException.class)
     public ResponseEntity<?> handleStorageFileNotFound(StorageFileNotFoundException exc) {
         return ResponseEntity.notFound().build();

gnvweb/eneg/src/main/java/com/gnv/eneg/PairAPI.java

@@ -72,7 +72,6 @@ public class PairAPI {
     public static JSONArray getNetworksInUploadedBedFile() {
         bpf.getNetworksAsJSONAccrossBedFile(bedPairFilePath, maxPairSize, padding);
         JSONArray networks = bpf.jsonNetworksInBedFile;
-        System.out.println(bpf.jsonNetworksInBedFile);
         return networks;
     }
 }
\ No newline at end of file

gnvweb/eneg/src/main/resources/public/js/vis/ajaxCalls.js

+
+/**
+ * A function that is called when the user uploads a BED file.
+ *
+ * Returns the networks (start, end, chromosone) within the file.
+ */
+function getNetworksFromBedFile() {
+    var url = window.location.pathname.split("?")[0];
+
+	$.ajax({
+		type : "GET",
+		url : url,
+		timeout : 100000,
+		data : {request: "status"},
+		success : function(data) {
+			   run_networks_in_bed(data);
+               data['threeD_attr'] = set_up_3D_attr();
+		},
+		error : function(e) {
+			console.log("ERROR: ", e);
+		},
+		done : function(e) {
+			console.log("DONE");
+		}
+	});
+}
+
+/**
+ * A function that is called when the user clicks on a network
+ * in the visualisation.
+ *
+ * Returns the detailed networks (edges, interactions).
+ */
+function getNetworkByChromAndPosition(chrom, start, end) {
+	var data = {'chrom': chrom, 'start': start, 'end': end};
+    var url = window.location.pathname.split("?")[0];
+
+	$.ajax({
+		type : "GET",
+		url : url,
+		timeout : 100000,
+		data : data,
+		success : function(data) {
+		        // Run the two D version
+                parse_json_file(JSON.parse(data)[0]);
+                // Run the 3D version
+                // Clear the inner HTML first
+                threeD_attr = set_up_3D_attr();
+
+		},
+		error : function(e) {
+			console.log("ERROR: ", e);
+		},
+		done : function(e) {
+			console.log("DONE");
+		}
+	});
+}
\ No newline at end of file

gnvweb/eneg/src/main/resources/public/js/vis/ajaxData.js

-function getNetworksFromBedFile() {
-	var data = {}
-    var url = window.location.pathname.split("?")[0];
-
-	$.ajax({
-		type : "GET",
-		url : url,
-		timeout : 100000,
-		data : {request: "status"},
-		success : function(data) {
-			console.log("SUCCESS: ", data);
-			            run_networks_in_bed(data);
-                        data['threeD_attr'] = set_up_3D_attr();
-		},
-		error : function(e) {
-			console.log("ERROR: ", e);
-		},
-		done : function(e) {
-			console.log("DONE");
-		}
-	});
-}
\ No newline at end of file

gnvweb/eneg/src/main/resources/public/js/vis/genome.js

@@ -122,6 +122,11 @@ var draw_rects_on_genome_large = function (elements, network, y_pos) {
                 network_tooltip.transition()
                         .duration(500)
                         .style("opacity", 0);
+            })
+            .on("click", function (d) {
+                // Here we want to start a detailed network visualisation
+                // Need to make an AJAX call to back end to get this.
+                getNetworkByChromAndPosition(d.chrom, d.start, d.end);
             });
 
 }
@@ -151,10 +156,7 @@ var draw_rects_on_genome_small = function (elements) {
                 return genome_attr.vis.scale.y2(d.y);
             })
             .attr("width", genome_attr.vis.rect.width)
-            .attr("height", genome_attr.vis.rect.height)
-            .on("click", function (d) {
-                console.log(d);
-            });
+            .attr("height", genome_attr.vis.rect.height);
 }
 
 

gnvweb/eneg/src/main/resources/public/js/vis/main.js → gnvweb/eneg/src/main/resources/public/js/vis/network.js

@@ -45,7 +45,7 @@ var dna_attr = {
  * regarding the nodes and edges of the file.
  */
 var parse_json_file = function (data_input) {
-
+    dna_attr.node_points = [];
     var nodes = data_input['nodes'];
     var edges = data_input['edges'];
     nodes = clean_json(nodes);
@@ -273,9 +273,11 @@ var run_fdg = function (graph) {
     var svg = d3.select("svg#interactionvis"),
             width = +svg.attr("width"),
             height = +svg.attr("height")
-    
-    
-      svg =  svg.append("g")
+
+    // Remove all existing content
+    svg.selectAll("*").remove();
+
+    svg =  svg.append("g")
              .attr("transform", "translate(" + margin.left +
                     "," + margin.top + ")");
 
@@ -286,9 +288,9 @@ var run_fdg = function (graph) {
             .force("charge", d3.forceManyBody())
             .force("center", d3.forceCenter(width / 2, height / 2))
             .on('end', function () {
-                // Update the threed vis
-                draw_3D_nodes(data['placed_nodes'], data['threeD_attr']);
-            })
+                // Update the thread vis
+                draw_3D_nodes(data['placed_nodes'], threeD_attr);
+            });
 
 
     var link = svg.append("g")
@@ -398,16 +400,19 @@ var run_fdg = function (graph) {
  * Setup svg
  */
 var setup_strand_svg = function () {
-      var       margin = {top: 0, right: 100, bottom: 50, left: 20};
+    var margin = {top: 0, right: 100, bottom: 50, left: 20};
 
     var svg = d3.select("svg#strandvis"),
             width = +svg.attr("width"),
             height = +svg.attr("height"),
             angles = d3.range(0, 2 * Math.PI, Math.PI / 200);
-    
-          svg =  svg.append("g")
-             .attr("transform", "translate(" + margin.left +
-                    "," + margin.top + ")");
+
+    // Remove all existing content
+    svg.selectAll("*").remove();
+
+    svg = svg.append("g")
+        .attr("transform", "translate(" + margin.left +
+              "," + margin.top + ")");
             
     dna_attr.svg = svg;
     dna_attr.width = width;
@@ -516,6 +521,8 @@ var draw_nodes_accurate = function (nodes) {
 //            .attr("transform", "translate(" + dna_attr.width / 2 + "," + dna_attr.height + ")rotate(-90)")
 //
 //}
+
+
 var draw_gene_rect = function(x, y, node) {
         dna_attr.svg.append("rect")
             .attr('class', 'geneContext')
@@ -575,6 +582,7 @@ var draw_strand = function (nodes) {
 
 var draw_dna_len = function (nodes) {
     var line_data = [];
+    dna_attr.rect.node_points = new Array();
     for (var n = 0; n < nodes.length - 1; n++) {
         var node1 = nodes[n];
         var node2 = nodes[n + 1];
@@ -593,7 +601,6 @@ var draw_dna_len = function (nodes) {
  * Calculates the interpolation point for the join between two nodes.
  */
 var calc_loop_interpolation_points = function (angle1, angle2, inner_rad, mid_rad, outer_rad, line_data, node_num) {
-
     var top_rad = (mid_rad + outer_rad) / 2;
     var small_rad = (mid_rad + inner_rad) / 2;
     var mid_angle = (angle2 + angle1) / 2;

gnvweb/eneg/src/main/resources/public/js/vis/threeDVis.js

@@ -4,38 +4,39 @@
  * http://bl.ocks.org/phil-pedruco/9852362.
  */
 
-
-function createTextCanvas(text, color, font, size) {
-    size = size || 16;
-    var canvas = document.createElement('canvas');
-    var ctx = canvas.getContext('2d');
-    var fontStr = (size + 'px ') + (font || 'Arial');
-    ctx.font = fontStr;
-    var w = ctx.measureText(text).width;
-    var h = Math.ceil(size);
-    canvas.width = w;
-    canvas.height = h;
-    ctx.font = fontStr;
-    ctx.fillStyle = color || 'black';
-    ctx.fillText(text, 0, Math.ceil(size * 0.8));
-    return canvas;
-}
-
-function createText2D(text, color, font, size, segW, segH) {
-    var canvas = createTextCanvas(text, color, font, size);
-    var plane = new THREE.PlaneGeometry(canvas.width, canvas.height, segW, segH);
-    var tex = new THREE.Texture(canvas);
-    tex.needsUpdate = true;
-    var planeMat = new THREE.MeshBasicMaterial({
-        map: tex,
-        color: 0xffffff,
-        transparent: true
-    });
-    var mesh = new THREE.Mesh(plane, planeMat);
-    mesh.scale.set(0.5, 0.5, 0.5);
-    mesh.doubleSided = true;
-    return mesh;
-}
+//
+//function createTextCanvas(text, color, font, size) {
+//    size = size || 16;
+//    var canvas = document.getElementById('threeDcanvas');
+//    var ctx = canvas.getContext('2d');
+//    var fontStr = (size + 'px ') + (font || 'Arial');
+//    ctx.font = fontStr;
+//    var w = ctx.measureText(text).width;
+//    var h = Math.ceil(size);
+//    canvas.width = 400;
+//    canvas.height = 200;
+//    context.clearRect(0, 0, canvas.width, canvas.height);
+//    ctx.font = fontStr;
+//    ctx.fillStyle = color || 'black';
+//    ctx.fillText(text, 0, Math.ceil(size * 0.8));
+//    return canvas;
+//}
+//
+//function createText2D(text, color, font, size, segW, segH) {
+//    var canvas = createTextCanvas(text, color, font, size);
+//    var plane = new THREE.PlaneGeometry(canvas.width, canvas.height, segW, segH);
+//    var tex = new THREE.Texture(canvas);
+//    tex.needsUpdate = true;
+//    var planeMat = new THREE.MeshBasicMaterial({
+//        map: tex,
+//        color: 0xffffff,
+//        transparent: true
+//    });
+//    var mesh = new THREE.Mesh(plane, planeMat);
+//    mesh.scale.set(0.5, 0.5, 0.5);
+//    mesh.doubleSided = true;
+//    return mesh;
+//}
 
 // from http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
 function hexToRgb(hex) { //TODO rewrite with vector output
@@ -48,6 +49,7 @@ function hexToRgb(hex) { //TODO rewrite with vector output
 }
 
 var set_up_3D_attr = function () {
+    document.getElementById('threeDvis').innerHTML = "";
     var renderer = new THREE.WebGLRenderer({
         antialias: true,
         alpha: true
@@ -58,7 +60,7 @@ var set_up_3D_attr = function () {
     renderer.setSize(w, h);
     renderer.setClearColor(0xffffff, 0);
 
-    document.body.appendChild(renderer.domElement);
+    document.getElementById('threeDvis').appendChild(renderer.domElement);
 
 
 

gnvweb/eneg/src/main/resources/templates/fragments/results.html

@@ -34,7 +34,9 @@
                 </div>
 
                 <!--   Contains the 3D network vis.   -->
-                <div id="container"></div>
+                <div id="threeDvis">
+
+                </div>
 
 
                 <div style="display: none;">
@@ -43,12 +45,7 @@
                         /*<![CDATA[*/
                             $(document).ready(function () {
                                 if (/*[[${networksInBedFile}]]*/ != "None") {
-                                    // Define the JSON (either get from a file in paste in).
-                                    var json = /*[[${networksInBedFile}]]*/;
-                                    // Draw the smaller version of the nodes that is in two D.
-                                    //parse_json_file(json);
                                     getNetworksFromBedFile();
-
                                     }
                                 });
                         /*]]>*/

gnvweb/eneg/src/main/resources/templates/index.html

@@ -39,10 +39,10 @@
     <script type="text/javascript" th:src="@{/js/vis/lib/crossfilter.min.js}"></script>
     <script type="text/javascript" th:src="@{/js/vis/lib/d3.min.js}"></script>
 
-    <script type="text/javascript" th:src="@{/js/vis/ajaxData.js}"> </script>
-    <script type="text/javascript" th:src="@{/js/vis/genome.js}"> </script>
-    <script type="text/javascript" th:src="@{/js/vis/main.js}"> </script>
     <script type="text/javascript" th:src="@{/js/vis/threeDVis.js}"> </script>
+    <script type="text/javascript" th:src="@{/js/vis/ajaxCalls.js}"> </script>
+    <script type="text/javascript" th:src="@{/js/vis/genome.js}"> </script>
+    <script type="text/javascript" th:src="@{/js/vis/network.js}"> </script>
 
 </head>
 <body class="container-fluid">