diff --git a/assets/js/pages/gwas_region.js b/assets/js/pages/gwas_region.js index 593cbea..a705d4d 100644 --- a/assets/js/pages/gwas_region.js +++ b/assets/js/pages/gwas_region.js @@ -23,7 +23,7 @@ function makePlot(template_vars) { const app_params = Object.assign( { lz_sources: getBasicSources(assoc_sources), - lz_layout: getBasicLayout(state, panels, { responsive_resize: false }), + lz_layout: getBasicLayout(state, panels, { responsive_resize: true }), study_names: [template_vars.label], top_hits_url: template_vars.top_hits_url, }, template_vars, diff --git a/assets/vue/gwas_region.vue b/assets/vue/gwas_region.vue index 09a9c53..0530160 100644 --- a/assets/vue/gwas_region.vue +++ b/assets/vue/gwas_region.vue @@ -39,6 +39,11 @@ // 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); + // FIXME: In tabbed UI, Bootstrap-vue has an issue where the tab panel is not fully initialized when + // content area is rendered. The result is that the plot width is slightly incorrect. Redrawing + // after a small delay helps to ensure that the plot is not truncated off the edge of the screen. + // This can be removed if we move away from the "tab/sidebar" UI design. + setTimeout(() => this.$refs.plotWidget.$refs.assoc_plot.callPlot((plot) => plot.rescaleSVG())); }, activateBatchMode(regions) { this.batch_mode_active = true; diff --git a/locuszoom_plotting_service/templates/gwas/gwas_region.html b/locuszoom_plotting_service/templates/gwas/gwas_region.html index aa4b527..cf35424 100644 --- a/locuszoom_plotting_service/templates/gwas/gwas_region.html +++ b/locuszoom_plotting_service/templates/gwas/gwas_region.html @@ -4,7 +4,7 @@ {% block title %}Region plot- {{ gwas.label }}{% endblock %} {% block content %} -
+
    diff --git a/package-lock.json b/package-lock.json index 5e6ff1e..da3847d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,12 +9,12 @@ "license": "MIT", "dependencies": { "bootstrap": "^4.5.3", - "bootstrap-vue": "^2.18.0", + "bootstrap-vue": "^2.21.2", "d3": "^5.16.0", "d3-tip": "0.9.1", "gwas-credible-sets": "^0.1.0", - "localzoom": "https://github.com/statgen/localzoom#v0.7.2", - "locuszoom": "^0.13.1", + "localzoom": "https://github.com/statgen/localzoom#867247a", + "locuszoom": "^0.13.2", "lodash": "^4.17.20", "pako": "^1.0.11", "tabulator-tables": "^4.1.4", @@ -2022,9 +2022,10 @@ "integrity": "sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ==" }, "node_modules/bootstrap-vue": { - "version": "2.18.0", - "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.18.0.tgz", - "integrity": "sha512-3SfN0362QTTtoq8KL1ZmNGlg5UwszOrWteuX4a1VSbmY86C9FF1ipT5o2AM0GLGLeNEEMIT4YIzbHtqru6XEIQ==", + "version": "2.21.2", + "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.21.2.tgz", + "integrity": "sha512-0Exe+4MZysqhZNXIKf4TzkvXaupxh9EHsoCRez0o5Dc0J7rlafayOEwql63qXv74CgZO8E4U8ugRNJko1vMvNw==", + "hasInstallScript": true, "dependencies": { "@nuxt/opencollective": "^0.3.2", "bootstrap": ">=4.5.3 <5.0.0", @@ -4876,15 +4877,15 @@ } }, "node_modules/localzoom": { - "version": "0.7.2", - "resolved": "git+ssh://git@github.com/statgen/localzoom.git#24911e56ecdb24f305f6056aa1cda1afcf096c34", + "version": "0.7.4", + "resolved": "git+ssh://git@github.com/statgen/localzoom.git#867247a89ce97557c3ec18958ea7d82db8c5d9d1", "license": "MIT", "dependencies": { "@sentry/browser": "^4.5.2", "bootstrap": "^4.4.1", - "bootstrap-vue": "^2.0.0-rc.11", + "bootstrap-vue": "^2.21.2", "gwas-credible-sets": "^0.1.0", - "locuszoom": "^0.13.1", + "locuszoom": "^0.13.2", "lodash": "^4.17.11", "tabix-reader": "^1.0.1", "tabulator-tables": "^4.1.4", @@ -4909,9 +4910,9 @@ } }, "node_modules/locuszoom": { - "version": "0.13.1", - "resolved": "https://registry.npmjs.org/locuszoom/-/locuszoom-0.13.1.tgz", - "integrity": "sha512-zorxHljraidDa8US+hSuma/CUAm29Hdb3C7VdyoCXWhcPLu6IWfbPKW+h8dqVcY3xvn3+oRl8IRy1WMJmQUh2A==", + "version": "0.13.2", + "resolved": "https://registry.npmjs.org/locuszoom/-/locuszoom-0.13.2.tgz", + "integrity": "sha512-CshSuHD+Qs7ue3ts2Itv52iYw7yo5AhYBfBD1mJRy+okPlEczjyOEZqgytJqNG3mVTCmcuoo96YyzspePDIvNA==", "dependencies": { "d3": "^5.16.0" }, @@ -6392,9 +6393,9 @@ "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=" }, "node_modules/rxjs": { - "version": "6.6.6", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.6.tgz", - "integrity": "sha512-/oTwee4N4iWzAMAL9xdGKjkEHmIwupR3oXbQjCKywF1BeFohswF3vZdogbmEF6pZkOsXTzWkrZszrWpQTByYVg==", + "version": "6.6.7", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", + "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==", "dependencies": { "tslib": "^1.9.0" }, @@ -10001,9 +10002,9 @@ "integrity": "sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ==" }, "bootstrap-vue": { - "version": "2.18.0", - "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.18.0.tgz", - "integrity": "sha512-3SfN0362QTTtoq8KL1ZmNGlg5UwszOrWteuX4a1VSbmY86C9FF1ipT5o2AM0GLGLeNEEMIT4YIzbHtqru6XEIQ==", + "version": "2.21.2", + "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.21.2.tgz", + "integrity": "sha512-0Exe+4MZysqhZNXIKf4TzkvXaupxh9EHsoCRez0o5Dc0J7rlafayOEwql63qXv74CgZO8E4U8ugRNJko1vMvNw==", "requires": { "@nuxt/opencollective": "^0.3.2", "bootstrap": ">=4.5.3 <5.0.0", @@ -12336,14 +12337,14 @@ } }, "localzoom": { - "version": "git+ssh://git@github.com/statgen/localzoom.git#24911e56ecdb24f305f6056aa1cda1afcf096c34", - "from": "localzoom@https://github.com/statgen/localzoom#v0.7.2", + "version": "git+ssh://git@github.com/statgen/localzoom.git#867247a89ce97557c3ec18958ea7d82db8c5d9d1", + "from": "localzoom@https://github.com/statgen/localzoom#867247a", "requires": { "@sentry/browser": "^4.5.2", "bootstrap": "^4.4.1", - "bootstrap-vue": "^2.0.0-rc.11", + "bootstrap-vue": "^2.21.2", "gwas-credible-sets": "^0.1.0", - "locuszoom": "^0.13.1", + "locuszoom": "^0.13.2", "lodash": "^4.17.11", "tabix-reader": "^1.0.1", "tabulator-tables": "^4.1.4", @@ -12362,9 +12363,9 @@ } }, "locuszoom": { - "version": "0.13.1", - "resolved": "https://registry.npmjs.org/locuszoom/-/locuszoom-0.13.1.tgz", - "integrity": "sha512-zorxHljraidDa8US+hSuma/CUAm29Hdb3C7VdyoCXWhcPLu6IWfbPKW+h8dqVcY3xvn3+oRl8IRy1WMJmQUh2A==", + "version": "0.13.2", + "resolved": "https://registry.npmjs.org/locuszoom/-/locuszoom-0.13.2.tgz", + "integrity": "sha512-CshSuHD+Qs7ue3ts2Itv52iYw7yo5AhYBfBD1mJRy+okPlEczjyOEZqgytJqNG3mVTCmcuoo96YyzspePDIvNA==", "requires": { "d3": "^5.16.0" } @@ -13534,9 +13535,9 @@ "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=" }, "rxjs": { - "version": "6.6.6", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.6.tgz", - "integrity": "sha512-/oTwee4N4iWzAMAL9xdGKjkEHmIwupR3oXbQjCKywF1BeFohswF3vZdogbmEF6pZkOsXTzWkrZszrWpQTByYVg==", + "version": "6.6.7", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", + "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==", "requires": { "tslib": "^1.9.0" } diff --git a/package.json b/package.json index 1645f47..432bf35 100644 --- a/package.json +++ b/package.json @@ -27,12 +27,12 @@ "homepage": "https://github.com/statgen/locuszoom-hosted#readme", "dependencies": { "bootstrap": "^4.5.3", - "bootstrap-vue": "^2.18.0", + "bootstrap-vue": "^2.21.2", "d3": "^5.16.0", "d3-tip": "0.9.1", "gwas-credible-sets": "^0.1.0", - "localzoom": "https://github.com/statgen/localzoom#v0.7.2", - "locuszoom": "^0.13.1", + "localzoom": "https://github.com/statgen/localzoom#867247a", + "locuszoom": "^0.13.2", "lodash": "^4.17.20", "pako": "^1.0.11", "tabulator-tables": "^4.1.4",