Merge branch 'release/0.12.0-beta.5'

esm/components/toolbar/widgets.js

@@ -323,13 +323,13 @@ class Button {
                 const base_max_height = Math.max(this.parent_svg.layout.height - (10 * padding) - menu_height_padding, menu_height_padding);
                 const height = Math.min(total_content_height, base_max_height);
                 this.menu.outer_selector
-                    .style('top', `${top.toString()}px`)
-                    .style('left', `${left.toString()}px`)
-                    .style('max-width', `${container_max_width.toString()}px`)
-                    .style('max-height', `${base_max_height.toString()}px`)
-                    .style('height', `${height.toString()}px`);
+                    .style('top', `${top}px`)
+                    .style('left', `${left}px`)
+                    .style('max-width', `${container_max_width}px`)
+                    .style('max-height', `${base_max_height}px`)
+                    .style('height', `${height}px`);
                 this.menu.inner_selector
-                    .style('max-width', `${content_max_width.toString()}px`);
+                    .style('max-width', `${content_max_width}px`);
                 this.menu.inner_selector.node().scrollTop = this.menu.scroll_position;
                 return this.menu;
             },
@@ -838,7 +838,7 @@ class DownloadSVG extends BaseWidget {
     constructor(layout, parent) {
         super(layout, parent);
         this._filename = this.layout.filename || 'locuszoom.svg';
-        this._button_html = this.layout.button_html || 'Save as SVG';
+        this._button_html = this.layout.button_html || 'Save SVG';
         this._button_title = this.layout.button_title || 'Download hi-res image';
     }
 
@@ -994,7 +994,7 @@ class DownloadPNG extends DownloadSVG {
     constructor(layout, parent) {
         super(...arguments);
         this._filename = this.layout.filename || 'locuszoom.png';
-        this._button_html = this.layout.button_html || 'Save as PNG';
+        this._button_html = this.layout.button_html || 'Save PNG';
         this._button_title = this.layout.button_title || 'Download image';
     }
 

esm/ext/lz-credible-sets.js

@@ -326,7 +326,7 @@ function install (LocusZoom) {
         responsive_resize: true,
         min_region_scale: 20000,
         max_region_scale: 1000000,
-        toolbar: LocusZoom.Layouts.get('toolbar', 'region_nav_plot', { unnamespaced: true }),
+        toolbar: LocusZoom.Layouts.get('toolbar', 'standard_association', { unnamespaced: true }),
         panels: [
             LocusZoom.Layouts.get('panel', 'association_credible_set', { unnamespaced: true }),
             LocusZoom.Layouts.get('panel', 'annotation_credible_set', { unnamespaced: true }),

esm/ext/lz-intervals-track.js

@@ -294,8 +294,12 @@ function install (LocusZoom) {
 
         // Implement the main render function
         render() {
+            // Lay out space first
             this.assignTracks();
 
+            // Apply filters to only render a specified set of points. Hidden fields will still be given space to render, but not shown.
+            const track_data = this._applyFilters();
+
             // Remove any shared highlight nodes and re-render them if we're splitting on tracks
             // At most there will only be dozen or so nodes here (one per track) and each time
             // we render data we may have new tracks, so wiping/redrawing all is reasonable.
@@ -319,7 +323,7 @@ function install (LocusZoom) {
 
             // Render interval groups
             const selection = this.svg.group.selectAll('g.lz-data_layer-intervals')
-                .data(this.data, (d) => {
+                .data(track_data, (d) => {
                     return d[this.layout.id_field];
                 });
 
@@ -382,19 +386,17 @@ function install (LocusZoom) {
                         .attr('width', (d) => d.display_range.width)
                         .attr('height', data_layer.getTrackHeight() - data_layer.layout.track_vertical_spacing)
                         .attr('x', (d) => d.display_range.start)
-                        .attr('y', (d) => ((d.track - 1) * data_layer.getTrackHeight()));
+                        .attr('y', (d) => ((d.track - 1) * data_layer.getTrackHeight()))
+                        // Apply default event emitters to clickareas
+                        .on('click', (element_data) => {
+                            element_data.parent.parent.emit('element_clicked', element_data, true);
+                        })
+                        // Apply mouse behaviors to clickareas
+                        .call(data_layer.applyBehaviors.bind(data_layer));
 
                     // Remove old clickareas as needed
                     clickareas.exit()
                         .remove();
-
-                    // Apply default event emitters to clickareas
-                    clickareas.on('click', (element_data) => {
-                        element_data.parent.parent.emit('element_clicked', element_data, true);
-                    });
-
-                    // Apply mouse behaviors to clickareas
-                    data_layer.applyBehaviors(clickareas);
                 });
 
             // Remove old elements as needed
@@ -642,7 +644,7 @@ function install (LocusZoom) {
         responsive_resize: true,
         min_region_scale: 20000,
         max_region_scale: 1000000,
-        toolbar: LocusZoom.Layouts.get('toolbar', 'region_nav_plot', { unnamespaced: true }),
+        toolbar: LocusZoom.Layouts.get('toolbar', 'standard_association', { unnamespaced: true }),
         panels: [
             LocusZoom.Layouts.get('panel', 'association', {
                 unnamespaced: true,

esm/ext/lz-widget-addons.js

@@ -277,7 +277,7 @@ function install(LocusZoom) {
     }();
 
     const covariates_model_plot = function () {
-        const covariates_model_plot_toolbar = LocusZoom.Layouts.get('toolbar', 'region_nav_plot', { unnamespaced: true });
+        const covariates_model_plot_toolbar = LocusZoom.Layouts.get('toolbar', 'standard_association', { unnamespaced: true });
         covariates_model_plot_toolbar.widgets.push({
             type: 'covariates_model',
             button_html: 'Model',

esm/layouts/index.js

@@ -350,22 +350,6 @@ const genes_layer = {
     id: 'genes',
     type: 'genes',
     fields: ['{{namespace[gene]}}all', '{{namespace[constraint]}}all'],
-    // By default this layer doesn't show everything, but a button is added to set filters to `null`- "show all"
-    filters: [
-        {
-            field: 'gene_type',
-            operator: 'in',
-            // A manually curated subset of Gencode biotypes, based on user suggestions
-            //  See full list: https://www.gencodegenes.org/human/stats.html
-            value: [
-                'protein_coding',
-                'IG_C_gene', 'IG_D_gene', 'IG_J_gene', 'IG_V_gene',
-                'TR_C_gene', 'TR_D_gene', 'TR_J_gene', 'TR_V_gene',
-                'rRNA',
-                'Mt_rRNA', 'Mt_tRNA',
-            ],
-        },
-    ],
     id_field: 'gene_id',
     behaviors: {
         onmouseover: [
@@ -384,6 +368,28 @@ const genes_layer = {
     tooltip: deepCopy(standard_genes_tooltip),
 };
 
+const genes_layer_filtered = merge({
+    // By default this layer doesn't show everything. Often used in tandem with a panel-level toolbar "show all" button.
+    filters: [
+        {
+            field: 'gene_type',
+            operator: 'in',
+            // A manually curated subset of Gencode biotypes, based on user suggestions
+            //  See full list: https://www.gencodegenes.org/human/stats.html
+            // This is approximately intended to cover elements of generally known function, and exclude things
+            //  like pseudogenes.
+            value: [
+                'protein_coding',
+                'IG_C_gene', 'IG_D_gene', 'IG_J_gene', 'IG_V_gene',
+                'TR_C_gene', 'TR_D_gene', 'TR_J_gene', 'TR_V_gene',
+                'rRNA',
+                'Mt_rRNA', 'Mt_tRNA',
+            ],
+        },
+    ],
+}, deepCopy(genes_layer));
+
+
 const annotation_catalog_layer = {
     // Identify GWAS hits that are present in the GWAS catalog
     namespace: { 'assoc': 'assoc', 'catalog': 'catalog' },
@@ -492,7 +498,7 @@ const standard_panel_toolbar = {
 };
 
 const standard_plot_toolbar = {
-    // Suitable for most any type of plot drawn with LZ
+    // Suitable for most any type of plot drawn with LZ. Title and download buttons.
     widgets: [
         {
             type: 'title',
@@ -503,19 +509,27 @@ const standard_plot_toolbar = {
         {
             type: 'download',
             position: 'right',
+            group_position: 'end',
         },
         {
             type: 'download_png',
             position: 'right',
+            group_position: 'start',
         },
     ],
 };
 
+const standard_association_toolbar = function () {
+    // Suitable for association plots (adds a button for LD data)
+    const base = deepCopy(standard_plot_toolbar);
+    base.widgets.push(deepCopy(ldlz2_pop_selector_menu));
+    return base;
+}();
+
 const region_nav_plot_toolbar = function () {
-    // Useful for most region-based plots
-    const region_nav_plot_toolbar = deepCopy(standard_plot_toolbar);
-    region_nav_plot_toolbar.widgets.push(
-        deepCopy(ldlz2_pop_selector_menu),
+    // Generic region nav buttons
+    const base = deepCopy(standard_plot_toolbar);
+    base.widgets.push(
         {
             type: 'shift_region',
             step: 500000,
@@ -556,7 +570,7 @@ const region_nav_plot_toolbar = function () {
             group_position: 'start',
         }
     );
-    return region_nav_plot_toolbar;
+    return base;
 }();
 
 /**
@@ -729,14 +743,14 @@ const genes_panel = {
             {
                 type: 'resize_to_data',
                 position: 'right',
-                button_html: 'Fit all genes',
+                button_html: 'Resize',
             },
             deepCopy(gene_selector_menu)
         );
         return base;
     })(),
     data_layers: [
-        deepCopy(genes_layer),
+        deepCopy(genes_layer_filtered),
     ],
 };
 
@@ -802,7 +816,7 @@ const standard_association_plot = {
     responsive_resize: true,
     min_region_scale: 20000,
     max_region_scale: 1000000,
-    toolbar: deepCopy(region_nav_plot_toolbar),
+    toolbar: deepCopy(standard_association_toolbar),
     panels: [
         merge({ proportional_height: 0.5}, deepCopy(association_panel)),
         merge({ proportional_height: 0.5}, deepCopy(genes_panel)),
@@ -816,7 +830,7 @@ const association_catalog_plot = {
     responsive_resize: true,
     min_region_scale: 20000,
     max_region_scale: 1000000,
-    toolbar: deepCopy(region_nav_plot_toolbar),
+    toolbar: deepCopy(standard_association_toolbar),
     panels: [
         deepCopy(annotation_catalog_panel),
         deepCopy(association_catalog_panel),
@@ -914,6 +928,7 @@ export const toolbar_widgets = {
 export const toolbar = {
     standard_panel: standard_panel_toolbar,
     standard_plot: standard_plot_toolbar,
+    standard_association: standard_association_toolbar,
     region_nav_plot: region_nav_plot_toolbar,
 };
 
@@ -925,6 +940,7 @@ export const data_layer = {
     association_pvalues_catalog: association_pvalues_catalog_layer,
     phewas_pvalues: phewas_pvalues_layer,
     genes: genes_layer,
+    genes_filtered: genes_layer_filtered,
     annotation_catalog: annotation_catalog_layer,
 };