Added a couple options for network graph - Focus Trait, Layout, and a correlation slider. The first only displays the edges for the specified trait/node, the second changes layout, and the third hides nodes/edges with abs(correlation) less than the slider's value

Changed/added a couple node/edge attributes for network graph

Updated dataset menu structure json file to include the human RETINA data set

Added css file for network graph page (specifically to make the appearance of the options resemble the RETINA website's)

2 files changed, 194 insertions, 109 deletions

diff --git a/wqflask/wqflask/static/new/javascript/dataset_menu_structure.json b/wqflask/wqflask/static/new/javascript/dataset_menu_structure.json
index 4ff90ca8..750a9118 100644
--- a/wqflask/wqflask/static/new/javascript/dataset_menu_structure.json
+++ b/wqflask/wqflask/static/new/javascript/dataset_menu_structure.json
@@ -1492,6 +1492,22 @@
                   "Human Ventrolateral Prefrontal Cortex Affy Hu-Exon 1.0 ST (Jul11) Quantile"
                ]
             ]
+         },
+         "TIGEM-Retina-RNA-Seq": {
+            "Phenotypes": [
+               [
+                  "None",
+                  "TIGEM-Retina-RNA-SeqPublish",
+                  "TIGEM-Retina-RNA-Seq Published Phenotypes"
+               ]
+            ],
+            "Retina mRNA": [
+               [
+                  "802",
+                  "TIGEM_hg38_ret_rna-seq_0916",
+                  "TIGEM Human Retina RNA-Seq (Sep16) RPKM log2"
+               ]
+            ]
          }
       },
       "mouse": {
@@ -1596,6 +1612,11 @@
          "B6D2F2": {
             "Brain mRNA": [
                [
+                  "77",
+                  "BRF2_M_0805_R",
+                  "OHSU/VA B6D2F2 Brain mRNA M430 (Aug05) RMA"
+               ],
+               [
                   "76",
                   "BRF2_M_0805_M",
                   "OHSU/VA B6D2F2 Brain mRNA M430 (Aug05) MAS5"
@@ -1606,11 +1627,6 @@
                   "OHSU/VA B6D2F2 Brain mRNA M430 (Aug05) PDNN"
                ],
                [
-                  "77",
-                  "BRF2_M_0805_R",
-                  "OHSU/VA B6D2F2 Brain mRNA M430 (Aug05) RMA"
-               ],
-               [
                   "33",
                   "BRF2_M_0304_P",
                   "OHSU/VA B6D2F2 Brain mRNA M430A (Mar04) PDNN"
@@ -1933,16 +1949,16 @@
             ],
             "Brain mRNA": [
                [
-                  "590",
-                  "UTHSC_BXD_WB_RNASeqtrim1_1112",
-                  "UTHSC Mouse BXD Whole Brain RNA Sequence (Nov12) RPKM Trimmed 1.0"
-               ],
-               [
                   "164",
                   "UTHSC_BXD_WB_RNASeq1112",
                   "UTHSC Mouse BXD Whole Brain RNA Sequence (Nov12) RPKM Untrimmed"
                ],
                [
+                  "590",
+                  "UTHSC_BXD_WB_RNASeqtrim1_1112",
+                  "UTHSC Mouse BXD Whole Brain RNA Sequence (Nov12) RPKM Trimmed 1.0"
+               ],
+               [
                   "394",
                   "UTHSC_BXD_WB_RNASeqEx1112",
                   "UTHSC Mouse BXD Whole Brain RNA Sequence Exon Level (Nov12) RPKM"
@@ -1958,11 +1974,6 @@
                   "UTHSC Brain mRNA U74Av2 (Nov05) PDNN"
                ],
                [
-                  "82",
-                  "BR_U_0805_R",
-                  "UTHSC Brain mRNA U74Av2 (Aug05) RMA"
-               ],
-               [
                   "81",
                   "BR_U_0805_P",
                   "UTHSC Brain mRNA U74Av2 (Aug05) PDNN"
@@ -1973,6 +1984,11 @@
                   "UTHSC Brain mRNA U74Av2 (Aug05) MAS5"
                ],
                [
+                  "82",
+                  "BR_U_0805_R",
+                  "UTHSC Brain mRNA U74Av2 (Aug05) RMA"
+               ],
+               [
                   "42",
                   "CB_M_0204_P",
                   "INIA Brain mRNA M430 (Feb04) PDNN"
@@ -2039,11 +2055,6 @@
                   "Eye M430v2 WT Gpnmb (Sep08) RMA"
                ],
                [
-                  "278",
-                  "Eye_M2_0908_R_MT",
-                  "Eye M430v2 Mutant Tyrp1 (Sep08) RMA"
-               ],
-               [
                   "382",
                   "Eye_M2_0908_WTWT",
                   "Eye M430v2 WT WT (Sep08) RMA"
@@ -2054,6 +2065,11 @@
                   "Eye M430v2 WT Tyrp1 (Sep08) RMA"
                ],
                [
+                  "278",
+                  "Eye_M2_0908_R_MT",
+                  "Eye M430v2 Mutant Tyrp1 (Sep08) RMA"
+               ],
+               [
                   "400",
                   "DBA2J-ONH-1212",
                   "Howell et al. 2011, DBA/2J Glaucoma Optic Nerve Head M430 2.0 (Dec12) RMA"
@@ -2290,16 +2306,16 @@
             ],
             "Kidney mRNA": [
                [
-                  "240",
-                  "MA_M2M_0706_R",
-                  "Mouse kidney M430v2 Male (Aug06) RMA"
-               ],
-               [
                   "239",
                   "MA_M2F_0706_R",
                   "Mouse kidney M430v2 Female (Aug06) RMA"
                ],
                [
+                  "240",
+                  "MA_M2M_0706_R",
+                  "Mouse kidney M430v2 Male (Aug06) RMA"
+               ],
+               [
                   "118",
                   "MA_M2_0806_R",
                   "Mouse kidney M430v2 Sex Balanced (Aug06) RMA"
@@ -2479,16 +2495,16 @@
             ],
             "Neocortex mRNA": [
                [
-                  "374",
-                  "DevNeocortex_ILM6.2P3RInv_1111",
-                  "BIDMC/UTHSC Dev Neocortex P3 ILMv6.2 (Nov11) RankInv"
-               ],
-               [
                   "375",
                   "DevNeocortex_ILM6.2P14RInv_1111",
                   "BIDMC/UTHSC Dev Neocortex P14 ILMv6.2 (Nov11) RankInv"
                ],
                [
+                  "374",
+                  "DevNeocortex_ILM6.2P3RInv_1111",
+                  "BIDMC/UTHSC Dev Neocortex P3 ILMv6.2 (Nov11) RankInv"
+               ],
+               [
                   "284",
                   "HQFNeoc_1210v2_RankInv",
                   "HQF BXD Neocortex ILM6v1.1 (Dec10v2) RankInv"
@@ -3001,16 +3017,6 @@
             ],
             "Hippocampus mRNA": [
                [
-                  "212",
-                  "Illum_LXS_Hipp_RSE_1008",
-                  "Hippocampus Illumina RSE (Oct08) RankInv beta"
-               ],
-               [
-                  "214",
-                  "Illum_LXS_Hipp_NOE_1008",
-                  "Hippocampus Illumina NOE (Oct08) RankInv beta"
-               ],
-               [
                   "211",
                   "Illum_LXS_Hipp_RSS_1008",
                   "Hippocampus Illumina RSS (Oct08) RankInv beta"
@@ -3026,6 +3032,16 @@
                   "Hippocampus Illumina NON (Oct08) RankInv beta"
                ],
                [
+                  "212",
+                  "Illum_LXS_Hipp_RSE_1008",
+                  "Hippocampus Illumina RSE (Oct08) RankInv beta"
+               ],
+               [
+                  "214",
+                  "Illum_LXS_Hipp_NOE_1008",
+                  "Hippocampus Illumina NOE (Oct08) RankInv beta"
+               ],
+               [
                   "143",
                   "Illum_LXS_Hipp_loess0807",
                   "Hippocampus Illumina (Aug07) LOESS"
@@ -3159,6 +3175,13 @@
                   "MDPPublish",
                   "Mouse Phenome Database"
                ]
+            ],
+            "Spleen mRNA": [
+               [
+                  "801",
+                  "HMS_mm8_MDP_Spl_CD4_1116",
+                  "HMS Spleen CD4+ T cells MDP Affy Mouse Gene 1.0 ST (Jul16) Gene Level"
+               ]
             ]
          },
          "NZBXFVB-N2": {
@@ -3404,11 +3427,11 @@
          ],
          [
             "GTEx",
-            "GTEx v3 All Tissues, RNA-Seq"
+            "GTEx v3 All Tissues, RNA-Seq with Genotypes"
          ],
          [
             "GTEx_v5",
-            "GTEx v5 All Tissues, RNA-Seq"
+            "GTEx v5 All Tissues, RNA-Seq with Genotypes"
          ],
          [
             "HB",
@@ -3429,6 +3452,10 @@
          [
             "HSB",
             "Brain, Development: Normal Gene Expression (Yale/Sestan)"
+         ],
+         [
+            "TIGEM-Retina-RNA-Seq",
+            "Retina: Normal Adult Gene Expression, RNA-Seq (TIGEM)"
          ]
       ],
       "mouse": [
@@ -4273,6 +4300,16 @@
                "Ventrolateral Prefrontal Cortex mRNA",
                "Ventrolateral Prefrontal Cortex mRNA"
             ]
+         ],
+         "TIGEM-Retina-RNA-Seq": [
+            [
+               "Phenotypes",
+               "Phenotypes"
+            ],
+            [
+               "Retina mRNA",
+               "Retina mRNA"
+            ]
          ]
       },
       "mouse": {
@@ -4722,6 +4759,10 @@
             [
                "Liver mRNA",
                "Liver mRNA"
+            ],
+            [
+               "Spleen mRNA",
+               "Spleen mRNA"
             ]
          ],
          "NZBXFVB-N2": [
@@ -4827,4 +4868,4 @@
          ]
       }
    }
-}
+}
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/javascript/network_graph.js b/wqflask/wqflask/static/new/javascript/network_graph.js
index c41e36aa..da90ae26 100644
--- a/wqflask/wqflask/static/new/javascript/network_graph.js
+++ b/wqflask/wqflask/static/new/javascript/network_graph.js
@@ -13,7 +13,7 @@ window.onload=function() {
             style: {
               'background-color': '#666',
               'label': 'data(id)',
-              'font-size': 8
+              'font-size': 10
             }
           },
 
@@ -30,10 +30,10 @@ window.onload=function() {
       ],
       
       zoom: 12,
-      layout: { name: 'cose',
+      layout: { name: 'circle',
                 fit: true, // whether to fit the viewport to the graph
-                padding: 100, // the padding on fit
-                idealEdgeLength: function( edge ){ return edge.data['correlation']*10; },                
+                padding: 30 // the padding on fit
+                //idealEdgeLength: function( edge ){ return edge.data['correlation']*10; },                
               }, 
 
       
@@ -48,6 +48,8 @@ window.onload=function() {
       styleEnabled: true
     });
 
+    var eles = cy.$() // var containing all elements, so elements can be restored after being removed
+    
     var defaults = {
       zoomFactor: 0.05, // zoom factor per zoom tick
       zoomDelay: 45, // how many ms between zoom ticks
@@ -76,71 +78,113 @@ window.onload=function() {
 
     cy.panzoom( defaults );
     
-    cy.nodes().qtip({
-                        content: function(){
-                            gn_link = '<b>'+'<a href="http://gn2.genenetwork.org/show_trait?trait_id=' + this.data().id + '&dataset=' + this.data().dataset + '" >'+this.data().id +'</a>'+'</b><br>'
-                            ncbi_link = '<a href="http://www.ncbi.nlm.nih.gov/entrez/query.fcgi?db=gene&cmd=Retrieve&dopt=Graphics&list_uids=' + this.data().geneid + '" >NCBI<a>'+'<br>' 
-                            omim_link = '<a href="http://www.ncbi.nlm.nih.gov/omim/' + this.data().omim + '" >OMIM<a>'+'<br>' 
-                            qtip_content = gn_link + ncbi_link + omim_link
-                            return qtip_content
-                            //return '<b>'+'<a href="http://gn2.genenetwork.org/show_trait?trait_id=' + this.data().id + '&dataset=' + this.data().dataset + '" >'+this.data().id +'<a>'+'</b>' 
-                        },
-                        // content: {
-                            // title: '<b>'+'<a href="http://gn2.genenetwork.org/show_trait?trait_id=' + this.target() + '&dataset=' + this.dataset() + '" >'+this.target() +'<a>'+'</b>',
-                            // text: this.target,
-                            // button: true
-                        // },
-                        position: {
-                            my: 'top center',
-                            at: 'bottom center'
-                        },
-                        style: {
-                            classes: 'qtip-bootstrap',
-                            tip: {
-                                width: 16,
-                                height: 8
+    function create_qtips(cy){
+        cy.nodes().qtip({
+                            content: function(){
+                                gn_link = '<b>'+'<a href="http://gn2.genenetwork.org/show_trait?trait_id=' + this.data().id + '&dataset=' + this.data().dataset + '" >'+this.data().id +'</a>'+'</b><br>'
+                                ncbi_link = '<a href="http://www.ncbi.nlm.nih.gov/entrez/query.fcgi?db=gene&cmd=Retrieve&dopt=Graphics&list_uids=' + this.data().geneid + '" >NCBI<a>'+'<br>' 
+                                omim_link = '<a href="http://www.ncbi.nlm.nih.gov/omim/' + this.data().omim + '" >OMIM<a>'+'<br>' 
+                                qtip_content = gn_link + ncbi_link + omim_link
+                                return qtip_content
+                                //return '<b>'+'<a href="http://gn2.genenetwork.org/show_trait?trait_id=' + this.data().id + '&dataset=' + this.data().dataset + '" >'+this.data().id +'<a>'+'</b>' 
+                            },
+                            // content: {
+                                // title: '<b>'+'<a href="http://gn2.genenetwork.org/show_trait?trait_id=' + this.target() + '&dataset=' + this.dataset() + '" >'+this.target() +'<a>'+'</b>',
+                                // text: this.target,
+                                // button: true
+                            // },
+                            position: {
+                                my: 'top center',
+                                at: 'bottom center'
+                            },
+                            style: {
+                                classes: 'qtip-bootstrap',
+                                tip: {
+                                    width: 16,
+                                    height: 8
+                                }
                             }
-                        }
-                    });
-                    
-    cy.edges().qtip({
-                        content: function(){
-                            scatter_plot = '<b>'+'<a href="http://gn2-zach.genenetwork.org/corr_scatter_plot?dataset_1=' + this.data().source_dataset + '&dataset_2=' + this.data().target_dataset + '&trait_1=' + this.data().source + '&trait_2=' + this.data().target + '" >View Scatterplot</a>'+'</b>'
-                            return scatter_plot
-                        },
-                        position: {
-                            my: 'top center',
-                            at: 'bottom center'
-                        },
-                        style: {
-                            classes: 'qtip-bootstrap',
-                            tip: {
-                                width: 16,
-                                height: 8
+                        });
+                        
+        cy.edges().qtip({
+                            content: function(){
+                                correlation_line = '<b>Sample r: ' + this.data().correlation + '</b><br>'
+                                p_value_line = 'Sample p(r): ' + this.data().p_value + '<br>'
+                                overlap_line = 'Overlap: ' + this.data().overlap + '<br>'
+                                scatter_plot = '<a href="http://gn2-zach.genenetwork.org/corr_scatter_plot?dataset_1=' + this.data().source_dataset + '&dataset_2=' + this.data().target_dataset + '&trait_1=' + this.data().source + '&trait_2=' + this.data().target + '" >View Scatterplot</a>'
+                                return correlation_line + p_value_line + overlap_line + scatter_plot
+                            },
+                            position: {
+                                my: 'top center',
+                                at: 'bottom center'
+                            },
+                            style: {
+                                classes: 'qtip-bootstrap',
+                                tip: {
+                                    width: 16,
+                                    height: 8
+                                }
                             }
-                        }
-                    });
+                        });    
+    }
+    
+    create_qtips(cy)
     
-    // var options = {
-      // name: 'breadthfirst',
-
-      // fit: true, // whether to fit the viewport to the graph
-      // directed: false, // whether the tree is directed downwards (or edges can point in any direction if false)
-      // padding: 30, // padding on fit
-      // circle: false, // put depths in concentric circles if true, put depths top down if false
-      // spacingFactor: 1.75, // positive spacing factor, larger => more space between nodes (N.B. n/a if causes overlap)
-      // boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
-      // avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space
-      // roots: undefined, // the roots of the trees
-      // maximalAdjustments: 0, // how many times to try to position the nodes in a maximal way (i.e. no backtracking)
-      // animate: false, // whether to transition the node positions
-      // animationDuration: 500, // duration of animation in ms if enabled
-      // animationEasing: undefined, // easing of animation if enabled
-      // ready: undefined, // callback on layoutready
-      // stop: undefined // callback on layoutstop
-    // };
-
-    // cy.layout( options );
+    $('#slide').change(function() {
+        eles.restore()
+        
+        console.log(eles)
+        
+        // nodes_to_restore = eles.filter("node[max_corr >= " + $(this).val() + "], edge[correlation >= " + $(this).val() + "][correlation <= -" + $(this).val() + "]")
+        // nodes_to_restore.restore()
+        
+        // edges_to_restore = eles.filter("edge[correlation >= " + $(this).val() + "][correlation <= -" + $(this).val() + "]")
+        // edges_to_restore.restore()
+        
+        //cy.$("node[max_corr >= " + $(this).val() + "]").restore();
+        //cy.$("edge[correlation >= " + $(this).val() + "][correlation <= -" + $(this).val() + "]").restore();
+        
+        cy.$("node[max_corr < " + $(this).val() + "]").remove(); 
+        cy.$("edge[correlation < " + $(this).val() + "][correlation > -" + $(this).val() + "]").remove();
+
+        cy.layout({ name: $('select[name=layout_select]').val(),
+                    fit: true, // whether to fit the viewport to the graph
+                    padding: 25 // the padding on fit              
+                  });
+        
+    });
+    
+    $('select[name=focus_select]').change(function() {
+        focus_trait = $(this).val()
+
+        eles.restore()
+        cy.$('edge[source != "' + focus_trait + '"][target != "' + focus_trait + '"]').remove()
+
+        cy.layout({ name: $('select[name=layout_select]').val(),
+                    fit: true, // whether to fit the viewport to the graph
+                    padding: 25 // the padding on fit              
+                  });
+    });
+    
+    $('select[name=layout_select]').change(function() {
+        layout_type = $(this).val()
+        console.log("LAYOUT:", layout_type)
+        cy.layout({ name: layout_type,
+                    fit: true, // whether to fit the viewport to the graph
+                    padding: 25 // the padding on fit              
+                  });
+    });
+    
+    $("a#image_link").click(function(e) {
+      var pngData = cy.png();
+
+      image_link.href = 'data:image/png;base64,' + pngData;
+      image_link.download = 'network_graph.png';
+      
+      console.log("TESTING:", image_link)
+      
+    });
+
     
 };