Merge branch 'release/0.8.1'

statgen · Oct 22, 2021 · 42f86ad · 42f86ad
2 parents b25494a + 4c6e3e3
commit 42f86ad
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 26 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -48,7 +48,17 @@ module.exports = {
             'always'
         ],
         'space-before-blocks': 'error',
-        'space-infix-ops': 'error'
+        'space-infix-ops': 'error',
+        'vue/max-attributes-per-line': ['warning', {
+            'singleline': {
+              'max': 3,
+              'allowFirstLine': true
+            },
+            'multiline': {
+              'max': 1,
+              'allowFirstLine': false
+            }
+          }]
     },
     parserOptions: {
         parser: 'babel-eslint',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "localzoom",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "license": "MIT",
   "engines": {
     "node": ">=10.13.0"
@@ -20,7 +20,7 @@
     "@sentry/browser": "^4.5.2",
     "bootstrap": "^4.4.1",
     "bootstrap-vue": "^2.21.2",
-    "locuszoom": "git+https://github.com/statgen/locuszoom.git#773eb87",
+    "locuszoom": "git+https://github.com/statgen/locuszoom.git#780cfd8",
     "lodash": "^4.17.11",
     "tabulator-tables": "^4.9.0",
     "vue": "^2.6.14",

diff --git a/src/App.vue b/src/App.vue
@@ -90,6 +90,12 @@ export default {
           class="mt-2">
           <b-card>
             <div class="card-text">
+              <p>
+                If you have found this tool useful, please cite our paper,
+                <a href="https://doi.org/10.1093/bioinformatics/btab186" target="_blank">LocusZoom.js:
+                interactive and embeddable visualization of genetic association study results</a> (Bioinformatics 2021).
+              </p>
+
               LocalZoom is a tool for generating region association plots via the web browser.
               It can be used on any Tabix-indexed file (including those stored on your hard drive), which
               makes it useful for sensitive or confidential data. If you are comfortable uploading
@@ -147,8 +153,7 @@ export default {
           :max_studies="6"
           :known_tracks="known_tracks"
           @add-tabix-track="receiveTrackOptions"
-          @select-range="updateRegion"
-        />
+          @select-range="updateRegion"/>
       </div>
     </div>
 

diff --git a/src/components/GwasToolbar.vue b/src/components/GwasToolbar.vue
@@ -22,11 +22,12 @@ export default {
         TabixAdder,
     },
     props: {
-        genome_build: { // now now, use live binding in parent
+        // These two fields are sync bindings (this component notifies its parent of changes)
+        genome_build: {
             type: String,
             default: 'GRCh37',
         },
-        has_credible_sets: {   // for now, use sync binding to parent (to avoid single-property update events)
+        has_credible_sets: {
             type: Boolean,
             default: true,
         },
@@ -51,7 +52,7 @@ export default {
             message: '',
             message_class: '',
 
-            // Allow the user to customize the plot and select featured annotations. (credsets is a live binding to parent for now)
+            // Allow the user to customize the plot and select featured annotations.
             has_gwas_catalog: true,
 
             // Controls for "batch view" mode
@@ -63,6 +64,24 @@ export default {
         study_count() {
             return this.known_tracks.length;
         },
+        // Certain props are passed in with sync bindings (this component is intended to modify its parent).
+        //   Allow form to mirror parent state without weird errors.
+        i_genome_build: {
+            get: function() {
+                return this.genome_build;
+            },
+            set: function(newValue) {
+                this.$emit('update:genome_build', newValue);
+            },
+        },
+        i_has_credible_sets: {
+            get: function() {
+                return this.has_credible_sets;
+            },
+            set: function(newValue) {
+                this.$emit('update:has_credible_sets', newValue);
+            },
+        },
     },
     methods: {
         reset() {
@@ -168,7 +187,7 @@ export default {
             <div class="form-check form-check-inline">
               <input
                 id="show-credible-set"
-                v-model="has_credible_sets"
+                v-model="i_has_credible_sets"
                 class="form-check-input"
                 type="checkbox">
               <label
@@ -179,7 +198,7 @@ export default {
             <div class="form-check">
               <input
                 id="build-37"
-                v-model="genome_build"
+                v-model="i_genome_build"
                 class="form-check-input"
                 type="radio"
                 name="genome_build"
@@ -191,10 +210,10 @@ export default {
             <div class="form-check">
               <input
                 id="build-38"
-                v-model="genome_build"
+                v-model="i_genome_build"
                 class="form-check-input"
                 type="radio"
-                name="build"
+                name="genome_build"
                 value="GRCh38">
               <label
                 class="form-check-label"

diff --git a/src/components/PhewasMaker.vue b/src/components/PhewasMaker.vue
@@ -93,7 +93,7 @@ export default {
 
             // Use listeners to warn when no variant data is available
             this.$refs.phewas_plot.callPlot((plot) => {
-                plot.subscribeToData(['phewas:id'], (data, plot) => {
+                plot.subscribeToData({ from_layer: 'phewas.phewaspvalues' }, (data, plot) => {
                     if (!data || !data.length) {
                         plot.curtain.show('There is no PheWAS data available for the requested variant. Please try another variant.');
                     }

diff --git a/src/components/TabixAdder.vue b/src/components/TabixAdder.vue
@@ -182,6 +182,9 @@ export default {
                     let parser;
                     if (data_type === 'bed') {
                         parser = makeBed12Parser({normalize: true});
+                        if (!filename.includes('.bed')) {
+                            throw new Error('BED interval file names must include extension .bed');
+                        }
                     } else if (data_type === 'plink_ld') {
                         parser = makePlinkLdParser({normalize: true});
                     } else {
@@ -266,7 +269,7 @@ export default {
               name="data-type"
               value="gwas"
             >
-              GWAS (<small><a
+              GWAS scatter plot (<small><a
                 href="https://my.locuszoom.org/about/#prepare-data"
                 target="_blank"
               >suggested fields</a></small>)
@@ -276,7 +279,7 @@ export default {
               name="data-type"
               value="bed"
             >
-              BED 4+ <small>(<a
+              BED 4+ intervals <small>(<a
                 href="https://genome.ucsc.edu/FAQ/FAQformat.html#format1"
                 target="_blank"
               >file format</a>)</small>

diff --git a/src/util/lz-helpers.js b/src/util/lz-helpers.js
@@ -54,8 +54,6 @@ function createGwasStudyLayout(
     // Other namespaces won't be overridden; they will be reused as is.
     const namespace = {
         assoc: `assoc_${track_id}`,
-        credset: `credset_${track_id}`,
-        catalog: 'catalog',
     };
 
     const assoc_panel = LocusZoom.Layouts.get('panel', 'association', {
@@ -74,7 +72,7 @@ function createGwasStudyLayout(
         ],
         style: { 'font-weight': 'bold' },
     };
-    assoc_layer.tooltip = LocusZoom.Layouts.get('tooltip', 'standard_association_with_label', { namespace });
+    assoc_layer.tooltip = LocusZoom.Layouts.get('tooltip', 'standard_association_with_label');
     const assoc_tooltip = assoc_layer.tooltip;
 
     assoc_tooltip.html += `{{#if assoc:beta|is_numeric}}<br>&beta;: <strong>{{assoc:beta|scinotation|htmlescape}}</strong>{{/if}}
@@ -102,19 +100,31 @@ function createGwasStudyLayout(
         const basis = LocusZoom.Layouts.get('panel', 'association_credible_set', { namespace });
         dash_extra[0].options.push(...basis.toolbar.widgets.pop().options);
         assoc_tooltip.html += '{{#if credset:posterior_prob}}<br>Posterior probability: <strong>{{credset:posterior_prob|scinotation}}{{/if}}</strong><br>';
+        // Tell the layer to fetch the extra data
+        assoc_layer.namespace.credset = `credset_${track_id}`;
+        LocusZoom.Layouts.mutate_attrs(assoc_layer, '$..data_operations[?(@.type === "fetch")].from', (old) => old.concat('credset(assoc)'));
     }
     if (annotations.has_gwas_catalog) {
-        // Grab the options object from a pre-existing layout
-        const basis = LocusZoom.Layouts.get('panel', 'association_catalog', { namespace });
-        // TODO Clarify this; make small registry pieces more reusable
+        assoc_layer.data_operations.push({
+            type: 'assoc_to_gwas_catalog',
+            name: 'assoc_catalog',
+            requires: ['assoc_plus_ld', 'catalog'],
+            params: ['assoc:position', 'catalog:pos', 'catalog:log_pvalue'],
+        });
+
+        // Grab the options object from a pre-existing layout, and add it to the dropdown menu
+        const basis = LocusZoom.Layouts.get('panel', 'association_catalog');
         dash_extra[0].options.push(...basis.toolbar.widgets.pop().options);
         assoc_tooltip.html += '{{#if catalog:rsid}}<br><a href="https://www.ebi.ac.uk/gwas/search?query={{catalog:rsid}}" target="_new">See hits in GWAS catalog</a>{{/if}}';
+
+        // Tell this layer how to fetch the extra data required
+        assoc_layer.namespace.catalog = 'catalog';
+        LocusZoom.Layouts.mutate_attrs(assoc_layer, '$..data_operations[?(@.type === "fetch")].from', (old) => old.concat('catalog'));
     }
     assoc_panel.toolbar.widgets.push(...dash_extra);
 
     // After all custom options added, run mods through Layouts.get once more to apply namespacing
-    // TODO: rewrite this
-    new_panels.push(LocusZoom.Layouts.get('panel', 'association', assoc_panel));
+    new_panels.push(assoc_panel);
     if (annotations.has_gwas_catalog) {
         new_panels.push(LocusZoom.Layouts.get('panel', 'annotation_catalog', {
             id: `catalog_${track_id}`,