Search by gene, chrom, position and updating network on the fly

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

-/*circle {
-  fill-opacity: 0.2;
-  transition: fill-opacity 250ms linear;
+input {border: 1px dotted #ccc;
+       background: white;
+       font-family: monospace;
+       padding: 10px 20px;
+       font-size: 12px;
+       margin: 5px 5px 10px 0;
+       color: black;}
+
+input:focus { background-color:#c1fdf8; outline: none;}
+
+.genome-label {
+    font-size: 12px;
+    font-family: monospace;
+    fill: #111;
+    padding: 5px;
 }
 
-circle.active {
-  stroke: #f00;
-}*/
+.chrom-label {
+    font-size: 12px;
+    font-family: monospace;
+    fill: #111;
+    padding: 5px;
+    text-align: center;
+}
 
 .area {
-  fill: steelblue;
-/*   fill: none; */
-  clip-path: url(#clip);
+    fill: steelblue;
+    /*   fill: none; */
+    clip-path: url(#clip);
 }
-  
- .overlay {
-  fill: none;
-  pointer-events: all;
+
+.overlay {
+    fill: none;
+    pointer-events: all;
 }
-  
-  .focus .area{
+
+.focus .area{
     fill: none;
-  }
-  
+}
+
 /*   .circ circle {
   fill: none;
   stroke: steelblue;
 } */
-  
+
 .line {
-  fill: none;
-  clip-path: url(#clip);
-}  
+    fill: none;
+    clip-path: url(#clip);
+}
 
+#genome-container {
+  width: 1200px;
+  height: 100px;
+  position: relative;
+}
+
+#genomevis-div {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+#interactionvis-div {
+  z-index: 10;
+  position: absolute;
+  width: 200px;
+  right: 0;
+  max-height: 300px;
+  top: 0;
+}
 
 div.tooltip {
-position: absolute;
-text-align: left;
-width: 100px;
-height: 45px;
-padding: 5px;
-font: 12px sans-serif;
-background: lightsteelblue;
-border: 0px;
-border-radius: 8px;
-pointer-events: none;
+    position: absolute;
+    text-align: left;
+    font-family: monospace;
+    width: 100px;
+    height: 45px;
+    padding-top: 5px;
+    padding-left: 10px;
+    font: 12px sans-serif;
+    background: white;
+    border: 0px;
+    border-radius: 8px;
+    pointer-events: none;
 }

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

@@ -13,7 +13,7 @@ function getNetworksFromBedFile() {
 		timeout : 100000,
 		data : {request: "status"},
 		success : function(data) {
-			   run_networks_in_bed(data);
+			   run_networks_in_bed(JSON.parse(data));
                data['threeD_attr'] = set_up_3D_attr();
 		},
 		error : function(e) {
@@ -42,7 +42,8 @@ function getNetworkByChromAndPosition(chrom, start, end) {
 		data : data,
 		success : function(data) {
 		        // Run the two D version
-                parse_json_file(JSON.parse(data)[0]);
+                dna_attr.data = JSON.parse(data)[0];
+                run_dna_visualisation();
                 // Run the 3D version
                 // Clear the inner HTML first
                 threeD_attr = set_up_3D_attr();

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

@@ -46,6 +46,7 @@ function get_filter(filter) {
 
 var processed_data = {
     curr_chrom: 'chr1', // keep track of the current chromosone.
+    curr_gene: 'gene',
 };
 
 
@@ -168,6 +169,8 @@ var filter_on_chrom = function(chrom) {
     return get_filter(processed_data.genome_facts);
 }
 
+
+
 var filter_on_networks = function() {
     // Clear associated filter
     processed_data.type_dimension.filterAll();
@@ -179,6 +182,8 @@ var filter_on_networks = function() {
     return get_filter(processed_data.genome_facts);
 }
 
+
+
 var filter_on_gene = function(gene) {
     // Clear associated filter.
     processed_data.type_dimension.filterAll();

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

@@ -21,32 +21,43 @@
             <div class="form-group row col-sm-offset-1 col-sm-6">
 
 
-                <div style="width:1200; height:100">
-                    <!--   Contains the D3 genome vis.   -->
-                    <svg id="genomevis" width="1200" height="100"></svg>
 
-                </div>
-                <div style="width:1200; height:500; float: left">
-                    <!--   Contains the D3 strand vis.   -->
-                    <svg id="strandvis" width="600" height="400"></svg>
-                    <svg id="interactionvis" width="400" height="400"></svg>
+                <button id="input-update" onclick="update_vis();" >Update</button>
+                <input type="text" id="input-chr" placeholder="chr"></input>
+                <input type="text" id="input-start" placeholder="start"></input>
+                <input type="text" id="input-end" placeholder="end"></input>
+                <input type="text" id="input-gene" placeholder="gene"></input>
 
-                </div>
+                <div>
+                    <div style="width:1800; height:100; float: none;">
+                        <svg id="genomevis" width="1800" height="100"></svg>
 
-                <!--   Contains the 3D network vis.   -->
-                <div id="threeDvis">
+                    </div>
+                </div>
+                <div style="width:400; height:100; float: left; margin-left: 1200; maragin-top:-50;" id="threeDvis"> </div>
 
+                <div id="genome-container">
+                    <!--   Contains the D3 genome vis.   -->
+                    <div id="genomevis-div">
+                        <button id="diff-dna-view" onclick="diff_dna_view();" >change stand view</button>
+                        <!--   Contains the D3 strand vis.   -->
+                        <svg id="strandvis" width="1200" height="400"></svg>
+                    </div>
+                    <div id="interactionvis-div">
+                        <svg id="interactionvis" width="200" height="300"></svg>
+                    </div>
                 </div>
 
 
+
                 <div style="display: none;">
                     <script type="text/javascript" th:inline="javascript">
 
                         /*<![CDATA[*/
                             $(document).ready(function () {
-                                if (/*[[${networksInBedFile}]]*/ != "None") {
+
                                     getNetworksFromBedFile();
-                                    }
+
                                 });
                         /*]]>*/
 

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

+
+
+
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head>
@@ -35,17 +38,8 @@
     <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
     <script type="text/javascript" th:src="@{/js/bootstrap-switch.min.js}"></script>
 
-    <script type="text/javascript" th:src="@{/js/vis/lib/three.js}"></script>
-    <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/dataProcessing.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">
     <div th:replace="fragments/nav :: nav"></div>
@@ -73,6 +67,16 @@
     <!-- Footer -->
     <div th:replace="fragments/footer :: footer"></div>
 
+    <script type="text/javascript" th:src="@{/js/vis/lib/three.js}"></script>
+    <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/dataProcessing.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>
 </body>
 
 </html>