From 13e29893a280b2c0e6043d8f317d9193913e16d3 Mon Sep 17 00:00:00 2001 From: Andy Boughton Date: Mon, 6 Dec 2021 09:20:39 -0500 Subject: [PATCH 1/4] Update pages to work with newest LocalZoom version- basic feature parity + update docs --- assets/js/pages/gwas_region.js | 16 +-- assets/js/pages/gwas_upload.js | 8 +- assets/js/util/lz-helpers.js | 17 +-- assets/vue/gwas_region.vue | 103 +++++++++--------- assets/vue/gwas_upload.vue | 8 +- .../templates/pages/about.html | 22 +++- package-lock.json | 73 ++++++++++--- package.json | 4 +- 8 files changed, 157 insertions(+), 94 deletions(-) diff --git a/assets/js/pages/gwas_region.js b/assets/js/pages/gwas_region.js index a705d4d..b1f5020 100644 --- a/assets/js/pages/gwas_region.js +++ b/assets/js/pages/gwas_region.js @@ -1,10 +1,12 @@ import Vue from 'vue'; +import 'bootstrap-vue/dist/bootstrap-vue.css'; + import App from '../../vue/gwas_region.vue'; import { paramsFromUrl } from 'locuszoom/esm/ext/lz-dynamic-urls'; -import { stateUrlMapping, getBasicSources, createStudyLayout, getBasicLayout } from 'localzoom/src/util/lz-helpers'; -import count_region_view from 'localzoom/src/util/metrics'; +import { stateUrlMapping, getBasicSources, createStudyLayouts, getBasicLayout } from 'localzoom/src/util/lz-helpers'; +import { count_region_view } from 'localzoom/src/util/metrics'; import { createStudyAssocSources } from '../util/lz-helpers'; function makePlot(template_vars) { @@ -16,19 +18,19 @@ function makePlot(template_vars) { state ); const assoc_sources = createStudyAssocSources(template_vars.label, template_vars.assoc_base_url); - const panels = createStudyLayout(template_vars.label, { - credible_sets: true, - gwas_catalog: true + const panels = createStudyLayouts('gwas', template_vars.label, template_vars.label, { + has_credible_sets: true, + has_gwas_catalog: true }, template_vars.build); const app_params = Object.assign( { lz_sources: getBasicSources(assoc_sources), lz_layout: getBasicLayout(state, panels, { responsive_resize: true }), - study_names: [template_vars.label], + init_tracks: [{ data_type: 'gwas', filename: template_vars.label, display_name: template_vars.label}], top_hits_url: template_vars.top_hits_url, }, template_vars, { - genome_build: template_vars.build, + genome_build: template_vars.genome_build, chr: state.chr, start: +state.start , end: +state.end diff --git a/assets/js/pages/gwas_upload.js b/assets/js/pages/gwas_upload.js index 4c9a667..5769c35 100644 --- a/assets/js/pages/gwas_upload.js +++ b/assets/js/pages/gwas_upload.js @@ -9,8 +9,8 @@ import pako from 'pako'; import App from '../../vue/gwas_upload.vue'; -import { isHeader } from 'localzoom/src/gwas/sniffers'; -import { makeParser } from 'localzoom/src/gwas/parsers'; +import { _isHeader } from 'locuszoom/esm/ext/lz-parsers/gwas/sniffers'; +import { makeGWASParser } from 'locuszoom/esm/ext/lz-parsers'; const PREVIEW_BYTES = 5000; // enough for 50-100 lines const MAX_UPLOAD_SIZE = 1048576 * 1000; // 1000 MiB # FIXME: Currently upload limit is only implemented in the frontend @@ -157,9 +157,9 @@ modal.$on('has_options', function (parser_options) { // Close with options selec fileField.setCustomValidity(''); // Once we know how to parse the file, do some quick validation to decide if the rows are sorted - const parser = makeParser(parser_options); + const parser = makeGWASParser(parser_options); modal.file_reader.getRows().then((rows) => { - const first_data_index = rows.findIndex(text => !isHeader(text)); + const first_data_index = rows.findIndex(text => !_isHeader(text)); let is_valid; try { diff --git a/assets/js/util/lz-helpers.js b/assets/js/util/lz-helpers.js index d2151dd..0ffbb6b 100644 --- a/assets/js/util/lz-helpers.js +++ b/assets/js/util/lz-helpers.js @@ -10,11 +10,12 @@ import {AssociationLZ} from 'locuszoom/esm/data/adapters'; class AssociationApi extends AssociationLZ { - getURL(state, chain,fields) { - const base = new URL(this.url, window.location.origin); - base.searchParams.set('chrom', state.chr); - base.searchParams.set('start', state.start); - base.searchParams.set('end', state.end); + _getURL(request_options) { + const { chr, start, end } = request_options; + const base = new URL(this._url, window.location.origin); + base.searchParams.set('chrom', chr); + base.searchParams.set('start', start); + base.searchParams.set('end', end); return base; } @@ -40,11 +41,11 @@ LocusZoom.Adapters.add('AssociationApi', AssociationApi); function createStudyAssocSources(label, url) { const name = sourceName(label); return [ - [`assoc_${name}`, ['AssociationApi', { url, params: { id_field: 'variant' } }]], + [`assoc_gwas_${name}`, ['AssociationApi', { url }]], [ - `credset_${name}`, [ + `credset_gwas_${name}`, [ 'CredibleSetLZ', - { params: { fields: { log_pvalue: `assoc_${name}:log_pvalue` }, threshold: 0.95 } }, + { threshold: 0.95 }, ], ], ]; diff --git a/assets/vue/gwas_region.vue b/assets/vue/gwas_region.vue index 0530160..dca8812 100644 --- a/assets/vue/gwas_region.vue +++ b/assets/vue/gwas_region.vue @@ -1,9 +1,13 @@