Merge branch 'release/0.8.0'

README.md

@@ -1,9 +1,8 @@
 # LocalZoom
 
-This is a demonstration of loading GWAS results via the web browser, fetching only the data 
-required for that region. It works with Tabixed GWAS data files in a variety of formats.
+This is a tool for creating interactive [LocusZoom.js](https://github.com/statgen/locuszoom/) GWAS plots via the web browser, without uploading sensitive data to a remote web server. It works with Tabix-indexed data files in a variety of formats, and supports adding companion tracks (such as BED files).
 
-A live [demonstration](https://statgen.github.io/localzoom/) is available. 
+Try it for yourself at [https://statgen.github.io/localzoom/](https://statgen.github.io/localzoom/) 
 
 
 ## Getting help
@@ -26,7 +25,7 @@ npm run serve
 ### Building for production
 The production build is a minified, concatenated bundle suitable for distribution on a server.
 
-In order to use the Sentry error logging and Google Analytics feature, you will need to create a 
+In order to use the Sentry error logging and Google Analytics features, you will need to create a 
 file named *.env.production.local* (ignored by git) with the following contents 
 (both values are optional if you don't want to use these features): 
 ```dotenv
@@ -47,7 +46,7 @@ npm run deploy
 
 When ready, verify the built app and push to production.
 
-### Lints and fixes files
+### Lint and fixes files
 This project uses a style and syntax checker for code quality. The following command can help to 
 identify (and automatically fix) common issues.
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "localzoom",
-  "version": "0.7.5",
+  "version": "0.8.0",
   "license": "MIT",
   "engines": {
     "node": ">=10.13.0"
@@ -20,12 +20,10 @@
     "@sentry/browser": "^4.5.2",
     "bootstrap": "^4.4.1",
     "bootstrap-vue": "^2.21.2",
-    "gwas-credible-sets": "^0.1.0",
-    "locuszoom": "https://github.com/statgen/locuszoom#ea3894e",
+    "locuszoom": "git+https://github.com/statgen/locuszoom.git#773eb87",
     "lodash": "^4.17.11",
-    "tabix-reader": "^1.0.1",
-    "tabulator-tables": "^4.1.4",
-    "vue": "^2.6.10",
+    "tabulator-tables": "^4.9.0",
+    "vue": "^2.6.14",
     "vue-bootstrap-typeahead": "^0.2.6"
   },
   "devDependencies": {
@@ -34,12 +32,12 @@
     "@vue/cli-plugin-unit-mocha": "^3.0.0",
     "@vue/cli-service": "^3.0.0",
     "@vue/eslint-config-airbnb": "^4.0.0",
-    "@vue/test-utils": "^1.0.0-beta.20",
-    "autoprefixer": "^9.8.4",
-    "chai": "^4.3.0",
+    "@vue/test-utils": "^1.2.2",
+    "autoprefixer": "^9.8.8",
+    "chai": "^4.3.4",
     "node-sass": "^4.9.0",
     "sass-loader": "^7.0.1",
     "source-map-loader": "^0.2.4",
-    "vue-template-compiler": "^2.5.17"
+    "vue-template-compiler": "^2.6.14"
   }
 }

public/index.html

@@ -17,7 +17,12 @@
     }
   </style>
 
-  <!--  Build enhancement: configure google analytics key if environment provides one -->
+  <!--
+  Build enhancement: configure google analytics key if environment provides one
+
+  Because of how this is implemented, gtag will be only be defined if an analytics key is present,
+  AND if this is being built for production.
+  -->
   <% if (process.env.NODE_ENV === 'production' && process.env.VUE_APP_GOOGLE_ANALYTICS_KEY) { %>
       <script async src="https://www.googletagmanager.com/gtag/js?id=<%= VUE_APP_GOOGLE_ANALYTICS_KEY %>"></script>
       <script>

src/App.vue

@@ -1,13 +1,12 @@
 <script>
 
 import 'locuszoom/dist/locuszoom.css';
-import { BCard, BCollapse, VBToggle } from 'bootstrap-vue/esm/';
+import { BCard, BCollapse, VBToggle } from 'bootstrap-vue/src/';
 
 import {
     getBasicSources, getBasicLayout,
-    createStudyTabixSources, createStudyLayout,
 } from './util/lz-helpers';
-import count_region_view, {setup_feature_metrics} from './util/metrics';
+import { count_add_track, count_region_view, setup_feature_metrics } from './util/metrics';
 
 import PlotPanes from './components/PlotPanes.vue';
 import GwasToolbar from './components/GwasToolbar.vue';
@@ -25,63 +24,53 @@ export default {
     data() {
         return {
             // Used to trigger the initial drawing of the plot
-            base_assoc_layout: null,
-            base_assoc_sources: null,
+            base_layout: null,
+            base_sources: null,
 
             // Current position/ shared state
             chr: null,
             start: null,
             end: null,
 
             // State to be tracked across all components
-            build: null,
-            study_names: [],
-            // Control specific display options TODO improve
-            has_credible_sets: false,
+            genome_build: 'GRCh37',
+            known_tracks: [],
+            // Control specific display options
+            has_credible_sets: true,
         };
     },
     methods: {
-        receiveAssocOptions(source_options, plot_options) {
-            const { label, reader, parser_config } = source_options;
-            const sources = createStudyTabixSources(label, reader, parser_config);
-            const { annotations, build, state } = plot_options;
-            const panels = createStudyLayout(label, annotations, build);
-
-            if (annotations.credible_sets) {
-                // Tell the "export" feature that relevant plot options were used.
-                this.has_credible_sets = true;
-            }
+        receiveTrackOptions(data_type, filename, display_name, source_configs, panel_configs, extra_plot_state) {
+            if (!this.known_tracks.length) {
+                // If this is the first track added, allow the new track to suggest a region of interest and navigate there if relevant (mostly just GWAS)
+                this.updateRegion(extra_plot_state);
+
+                this.base_sources = getBasicSources(source_configs);
+                this.base_layout = getBasicLayout(extra_plot_state, panel_configs);
 
-            this.updateRegion(state);
-
-            if (!this.study_names.length) {
-                // Creating the initial plot can be done by simply passing props directly
-                this.base_assoc_sources = getBasicSources(sources);
-                // Prevent weird resize behavior when switching tabs
-                this.base_assoc_layout = getBasicLayout(
-                    state,
-                    panels,
-                    { responsive_resize: true },
-                );
                 // Collect metrics for first plot loaded
                 count_region_view();
             } else {
-                // Adding subsequent panels is a more advanced usage; manipulate the child widget
-                this.$refs.plotWidget.addStudy(panels, sources);
+                // TODO: We presently ignore extra plot state (like region) when adding new tracks. Revisit for future data types.
+                this.$refs.plotWidget.addStudy(panel_configs, source_configs);
             }
-            this.study_names.push(label);
-            this.build = build;
+
+            count_add_track(data_type);
+            this.known_tracks.push({data_type, filename, display_name});
         },
         activateMetrics() {
             // After plot is created, initiate metrics capture
             // TODO: This is a mite finicky; consider further refactoring in the future?
             this.$refs.plotWidget.$refs.assoc_plot.callPlot(setup_feature_metrics);
         },
-        updateRegion(region) {
+        updateRegion({ chr, start, end }) {
             // Receive new region config from toolbar
-            this.chr = region.chr;
-            this.start = region.start;
-            this.end = region.end;
+            if (!chr || !start || !end) {
+                return;
+            }
+            this.chr = chr;
+            this.start = start;
+            this.end = end;
         },
     },
 };
@@ -95,7 +84,7 @@ export default {
         <hr>
         <button
           v-v-b-toggle.instructions
-          class="btn-link">Instructions</button>
+          class="btn btn-link">Instructions</button>
         <b-collapse
           id="instructions"
           class="mt-2">
@@ -120,9 +109,9 @@ export default {
                   to check</a>)
                 </li>
                 <li>Your file contains all of the information required to draw a plot. Chromosome, position,
-                ref, and alt alleles can be specified as either individual columns, or a SNP
-                marker (eg <code>chr:pos_ref/alt</code>); there must also be a p-value
-                (or -log10 pvalue) for each SNP as a separate column. Beta, SE, and alt allele
+                ref, and alt alleles can be specified as either individual columns, or a variant
+                marker string (eg <code>chr:pos_ref/alt</code>); there must also be a p-value
+                (or -log10 pvalue) for each variant as a separate column. Beta, SE, and alt allele
                 frequency information are optional, but will be used on the plot if provided.
                 <em>Client-side plots cannot be generated from rsIDs.</em></li>
               </ol>
@@ -133,7 +122,7 @@ export default {
               </p>
 
               <p>
-                LD and overlay information is based on a specific build (<strong>build GRCh37</strong>
+                LD and overlay information is based on a specific human genome build (<strong>build GRCh37</strong>
                 or <strong>build GRCh38</strong> are supported). Exercise caution when interpreting
                 plots based on a GWAS with positions from a different build.
               </p>
@@ -153,9 +142,11 @@ export default {
     <div class="row">
       <div class="col-md-12">
         <gwas-toolbar
-          :study_names="study_names"
-          :max_studies="4"
-          @config-ready="receiveAssocOptions"
+          :has_credible_sets.sync="has_credible_sets"
+          :genome_build.sync="genome_build"
+          :max_studies="6"
+          :known_tracks="known_tracks"
+          @add-tabix-track="receiveTrackOptions"
           @select-range="updateRegion"
         />
       </div>
@@ -165,12 +156,12 @@ export default {
       <div class="col-md-12">
         <plot-panes
           ref="plotWidget"
+          :base_layout="base_layout"
+          :base_sources="base_sources"
           :dynamic_urls="true"
-          :assoc_layout="base_assoc_layout"
-          :assoc_sources="base_assoc_sources"
-          :study_names="study_names"
+          :genome_build="genome_build"
           :has_credible_sets="has_credible_sets"
-          :build="build"
+          :known_tracks="known_tracks"
           :chr="chr"
           :start="start"
           :end="end"

src/components/BatchSpec.vue

@@ -4,7 +4,7 @@
  *  which will then be consumed by another widget that handles cycling between those choices.
  */
 
-import { BDropdown } from 'bootstrap-vue/esm/';
+import { BDropdown } from 'bootstrap-vue/src/';
 import { parseRegion } from '../util/entity-helpers';
 
 export default {