Merge pull request #180 from broadinstitute/integration

Integration
broadinstitute · Nov 7, 2018 · 5fad5a3 · 5fad5a3
2 parents c35ed2c + 6ff04fa
commit 5fad5a3
Show file tree

Hide file tree

Showing 23 changed files with 17,905 additions and 11,252 deletions.
diff --git a/build/js/eqtl-dashboard.bundle.dev.js b/build/js/eqtl-dashboard.bundle.dev.js
diff --git a/build/js/gev.bundle.dev.js b/build/js/gev.bundle.dev.js
diff --git a/build/js/gtex-viz.bundle.dev.js b/build/js/gtex-viz.bundle.dev.js
diff --git a/css/boxplot.css b/css/boxplot.css
@@ -0,0 +1,12 @@
+div.boxplot-tooltip {
+   min-width: 100px;
+   display: none;
+   background-color : rgba(32, 53, 73, 0.95);
+   padding: 10px;
+   text-align:left;
+   color: #ffffff;
+   position:absolute;
+   font-size:12px;
+   z-index:4000;
+   border-radius:5px;
+}
diff --git a/css/bubbleMap.css b/css/bubbleMap.css
@@ -9,41 +9,48 @@ text.color-legend {
 
 text.bubble-map-xlabel {
     font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
-    font-size: 10px;
+    /*font-size: 10px;*/
 }
 text.bubble-map-xlabel.highlighted {
     font-weight: 400;
-    font-size: 12px;
+    /*font-size: 12px;*/
     text-decoration: underline;
 }
 text.bubble-map-xlabel.query {
     font-weight: 600;
-    font-size:11px;
+    /*font-size:11px;*/
     fill: #d2111b;
 }
 
-
 text.bubble-map-ylabel {
     font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
-    font-size: 10px;
+    /*font-size: 10px;*/
 }
 text.bubble-map-ylabel.highlighted {
     font-weight: 400;
-    font-size: 12px;
+    /*font-size: 12px;*/
     text-decoration: underline;
 }
 text.bubble-map-ylabel.clicked, text.bubble-map-xlabel.clicked {
     fill: #D25C43;
 }
 
-rect.bubble-map-cell {
+circle.bubble-map-cell {
     stroke-width:0px;
 }
-rect.bubble-map-cell.highlighted {
+circle.bubble-map-cell.highlighted {
     stroke: #D25C43;
     stroke-width:2px;
 }
 
+rect.mini-marker {
+    fill: none;
+}
+
+rect.mini-marker.highlighted {
+    fill: #D25C43;
+}
+
 div.bubblemap-tooltip {
    min-width: 100px;
    display: none;
@@ -57,5 +64,65 @@ div.bubblemap-tooltip {
    border-radius:5px;
 }
 
+rect.track.highlighted {
+    stroke: #D25C43;
+}
+
+/* eQTL box plot stuff */
+.closePlot {
+   cursor:pointer;
+   float:right;
+}
+
+.bbMap-canvas {
+    margin-top: 30px;
+    margin-left: 250px;
+}
+
+.bbMap-dialog .title {
+   text-anchor: middle;
+   font-size: 12px;
+
+}
+
+/*#bbMap-dialog text.plotviz-label {*/
+   /*font-size: 12px;*/
+/*}*/
+
+/*#bbMap-dialog .plotviz-left-axis g.tick text {*/
+   /*font-size: 11px;*/
+/*}*/
+
+#bbMap-dialog {
+   font-size: 11px;
+}
+
+.violin-axis-label {
+    font-size: 10px;
+}
+
+.bbMap-clear {
+   color: #999;
+   font-size: 10px;
+   text-decoration: underline;
+   cursor: pointer;
+}
+
+/* jquery UI customization */
+.ui-dialog .ui-dialog-titlebar {
+   padding: 0.1em 0.2em;
+}
+
+.ui-dialog-content {
+   width: 100% !important; /* this is an important overwrite that ensures that the ui-dialog-content's width remains 100% of the ui-dialog after a resizing event */
+}
+
+.ui-widget-header {
+   border: 0px;
+}
+.ui-dialog {
+    z-index:2000;
+}
+
 
 
diff --git a/demo/GTExViz.bubbleMap.html b/demo/GTExViz.bubbleMap.html
diff --git a/demo/geneEqtlVisualizer.html b/demo/geneEqtlVisualizer.html
@@ -8,11 +8,13 @@
               crossorigin="anonymous">
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Franklin:300,400" >
         <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css">
+        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
         <link rel="stylesheet" type="text/css" href="/css/bubbleMap.css">
+        <link rel="stylesheet" type="text/css" href="/css/halfMap.css">
+        <link rel="stylesheet" type="text/css" href="/css/violin.css">
     </head>
-
     <body class="container-fluid" style="margin-top:20px; margin-left: 20px;">
-    <h3>GTEx Gene-Eqtl Visualizer</h3>
+    <h3>GTEx Gene-EQTL Visualizer</h3>
     <hr>
         <div class="row">
             <div class="col-xs-12 col-sm-2">
@@ -23,18 +25,37 @@ <h3>GTEx Gene-Eqtl Visualizer</h3>
                      </div>
                 </form>
             </div>
-            <div id="InfoBox" class="col-xs-12 col-sm-10">
-                <div><i id="spinner" class="fas fa-sync fa-spin" style="display:none;"></i></div>
-                <div style="font-size:12px;">
+            <div id="bmap-info-box" class="col-xs-12 col-sm-10">
+                <div><i id="spinner" class="fas fa-sync fa-spin" style="display:none; "></i></div>
+                <div id="bmap-gene-info" style="font-size:12px;">
                     <p>
-                        GTEx Transcript Browser is for exploring genetic variations associated with tissue-specific gene expression.
+                        GTEx Gene-eQTL Visualizer (GEV) is for exploring genetic variations associated with tissue-specific gene expression.
                     </p>
                 </div>
+                <div id="bmap-filter-info"></div>
             </div>
         </div>
-        <div id="searchResult" class="col-xs-12">
+        <div id="bmap-dashboard" class="row" style="border-bottom: 2px solid #e2e2e2; border-top: 1px solid #e2e2e2;">
+        </div>
+        <div id="bmap-root">
             <div id="messageBox" style="color: #CB181D;"></div> <!-- for displaying message of input errors-->
-            <div id="vizRoot" style="width:80%;"></div> <!-- the bubble map root div -->
+            <div id="bmap"></div>
+            <div id="ldMap"></div>
+        </div>
+
+        <!-- bbMap tissue modal -->
+        <div id="bmap-modal" class="modal fade" aria-hidden='true' role='dialog'>
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <span class="modal-title" id="myModalLabel">GTEx Gene EQTL Visualizer Tissue Filter</span>
+                        <i class="close fa fa-window-close" data-dismiss="modal" aria-label="Close"></i>
+
+                    </div>
+                    <div class="modal-body"></div>
+                    <div class="modal-footer"></div>
+                </div>
+            </div>
         </div>
 
     </body>
@@ -46,27 +67,79 @@ <h3>GTEx Gene-Eqtl Visualizer</h3>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.full.min.js"></script>
-
+    <script
+      src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
+      integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
+      crossorigin="anonymous">
+    </script>
     <script src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script>
     <script src="/build/js/gev.bundle.dev.js"></script>
     <script>
         $(document).ready(function(){
-            let geneId = "actn1";
-            GeneEqtlVisualizer.render(geneId, "vizRoot", "spinner");
 
-            // $('#gene').keypress(function(e){
-            //     if(e.keyCode == 13){
-            //         // bind the enter key
-            //         e.preventDefault(); // Note: prevent the default behavior of the enter key, which is refreshing the page
-            //         const geneId = $('#gene').val();
-            //         reset();
-            //         $('#spinner').show();
-            //         GeneEqtlVisualizer.render(geneId, "vizRoot", "spinner");
-            //     }
-            // });
+            let svgConfig = {
+                id: 'bmap',
+                width: 1800,
+                height: 500,
+                marginTop: 40,
+                marginRight: 20,
+                marginBottom: 20,
+                marginLeft: 50,
+                legendHeight: 100, // assuming the color legends appear at the top of the focus panel
+
+                miniPanelHeight: 100,
+
+                focusPanelLabels: {
+                    column: {
+                        show: true,
+                        height: 100,
+                        angle: 90,
+                        adjust: 30,
+                        location: 'bottom',
+                        textAlign: 'left'
+                    },
+                    row: {
+                        show: true,
+                        width: 100,
+                        angle: 0,
+                        adjust: 30,
+                        location: 'left',
+                        textAlign: 'right'
+                    }
+                },
+
+                ldId: "ldMap",
+                ldCutoff: 0.0,
+                ldColorScheme: "Greys",
+                ldLegendSpace: 50,
+
+                colorScheme: "RdBu",
+                colorScaleDomain: [-0.75, 0.75],
+
+                useLog: false,
+                logBase: undefined,
+
+                // div IDs
+                divSpinner: "spinner",
+                divDashboard: "bmap-dashboard",
+                divInfo: "bmap-filter-info",
+                divModal: 'bmap-modal'
+            };
+
+            $('#gene').keypress(function(e){
+                if(e.keyCode == 13){
+                    // bind the enter key
+                    e.preventDefault(); // Note: prevent the default behavior of the enter key, which is refreshing the page
+                    const geneId = $('#gene').val();
+                    reset(svgConfig.id);
+                    reset(svgConfig.ldId);
+                    $('#spinner').show();
+                    GeneEqtlVisualizer.render(svgConfig, geneId);
+                }
+            });
         });
-        function reset(){
-            $("#vizRoot").empty();
+        function reset(id){
+            $(`#${id}`).empty();
         }
     </script>
 

diff --git a/demo/geneExpressionBoxplot.html b/demo/geneExpressionBoxplot.html
@@ -0,0 +1,54 @@
+
+<html>
+    <head>
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
+        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
+        <script
+          src="https://code.jquery.com/jquery-3.2.1.min.js"
+          integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+          crossorigin="anonymous">
+        </script>
+
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
+        <script src="/build/js/gene-expression-boxplot.bundle.dev.js"></script>
+
+        <link rel="stylesheet" type="text/css" href="/css/boxplot.css">
+        <style>
+            .test-gene {
+                font-size: 12px;
+                color: #007bff;
+            }
+
+            .test-gene:hover {
+                cursor: pointer;
+                text-decoration: underline;
+                color: #0056b3;
+            }
+        </style>
+
+    </head>
+    <body class="container-fluid" style="margin-top:20px;">
+        <h3>GTEx Expression Boxplot</h3>
+        <hr>
+        <span>
+            <span class="test-gene" id="ENSG00000248746.1">ACTN3</span> |
+            <span class="test-gene" id="ENSG00000171862.5">PTEN</span> |
+            <span class="test-gene" id="ENSG00000137675.4">MMP27</span>
+        </span>
+
+        <!-- expression boxplot div -->
+        <div class="row" id="boxplot-root">
+        </div>
+    </body>
+    <script>
+        $(document).ready(function(){
+          GeneExpressionBoxplot.launch('boxplot-root', 'ENSG00000248746.1');
+        });
+        $('.test-gene').click(function(e) {
+            $('#boxplot-root').empty();
+            GeneExpressionBoxplot.launch('boxplot-root', e.target.id);
+        })
+
+    </script>
+</html>
diff --git a/gev/js/bubbleMapUtil.js b/gev/js/bubbleMapUtil.js
@@ -345,7 +345,6 @@ var bubbleMapUtil = (function(){
        $('.bbMap-clear').click(function(){
             $('.bbMap-content').empty();
         });
-
     };
 
     var createCanvas = function(div, width, height, margin, className){

diff --git a/index.html b/index.html
@@ -21,13 +21,14 @@ <h3>GTEx Visualization Demos</h3>
         <li><a href="demo/topExpressed.html">GTEx Expression Heatmap for top expressed genes</a></li>
         <li><a href="demo/batchGeneExpressionQuery.html">GTEx Expression Heatmap for a query gene list</a></li>
         <li><a href="demo/transcriptBrowser.html">GTEx Transcript Browser</a></li>
+        <li><a href="demo/geneExpressionBoxplot.html">GTEx Expression Boxplots</a></li>
     </ul>
     <hr>
     Gene Regulation and eQTLs
     <ul>
         <li><a href="demo/eqtlDashboard.html">GTEx eQTL Dashboard</a></li>
         <li><a href="gev/">GTEx Gene-eQTL Visualizer</a></li>
-        <li><a href="demo/geneEqtlVisualizer.html">GTEx Gene-eQTL Visualizer V2(ES6)</a></li>
+        <li><a href="demo/geneEqtlVisualizer.html">GTEx Gene-eQTL Visualizer V2(ES6) WIP</a></li>
     </ul>
     <hr>
     Rendering Random Data using the GTExViz library
-Original file line number
+Diff line change
@@ Expand Up / @@ -345,7 +345,6 @@ var bubbleMapUtil = (function(){ @@
            $('.bbMap-clear').click(function(){
                 $('.bbMap-content').empty();
             });
         };
         var createCanvas = function(div, width, height, margin, className){
@@ Expand Down @@