You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In this view, we have abstracted away all the details of what is plotted, and we can just see the basic pieces: this
86
85
plot has two panels (association data and genes data) that are displayed separately on the same screen. At the plot level,
87
-
we control how the total space is allocated between two panels (`proportional_height`). The actual details of what to
88
-
render are defined as nested layouts (association and genes panels), and the registry also contains predefined options
89
-
for this piece- `LocusZoom.Layouts.get(...)` returns a JSON object.
86
+
each panel is 225px high, so the total plot height will be the sum of panels (450 px); if more panels are added,
87
+
the plot height will increase to match. The actual details of what to render are defined as nested layouts
88
+
(association and genes panels), and the registry also contains predefined options for this piece-
89
+
`LocusZoom.Layouts.get(...)` returns a JSON object.
90
90
91
91
Although the layout could be defined as a single giant object (top-down view of everything at once), defining it in
92
92
terms of reusable building blocks (bottom up) makes it much easier to read and see boundaries.
@@ -309,23 +309,22 @@ data_sources
309
309
// This outer call to Layouts.get() will ensure that namespaces are applied, and the returned result is a concrete
310
310
// layout ready for use in drawing a plot with specific data sets.
311
311
const plot_layout = LocusZoom.Layouts.get('plot', 'standard_association', { // Override select fields of a pre-made layout
312
-
height: 1200, // The default plot was sized for two panels. Make sure to allocate enough room for the extra panel.
313
-
responsive_resize: 'width_only', // This makes height calculations more reliable. Will become the default in the future.
312
+
responsive_resize: true,
314
313
panels: [
315
314
LocusZoom.Layouts.get('panel', 'association', {
316
315
namespace: { assoc: 'assoc_study1' }, // This is the key piece. It says "for this panel, and its child data layers, look for the association data in a datasource called "assoc_study1".
317
-
proportional_height: 0.33,
316
+
height: 400,
318
317
id: 'assoc_study1', // Give each panel a unique ID
319
318
title: { text: 'Study 1' },
320
319
}),
321
320
LocusZoom.Layouts.get('panel', 'association', {
322
321
namespace: { assoc: 'assoc_study2' },
323
-
proportional_height: 0.33, // Modifies the default so that all three panels get enough space
322
+
height: 400,
324
323
id: 'assoc_study2',
325
324
title: { text: 'Study 2' },
326
325
}),
327
326
// Even though genes are part of the original "standard association plot" layout, overriding the panels array means replacing *all* of the panels.
328
-
LocusZoom.Layouts.get('panel', 'genes', { unnamespaced: true, proportional_height: 0.33 }) // "unnamespaced" when using as a generic building block
327
+
LocusZoom.Layouts.get('panel', 'genes', { unnamespaced: true, height: 400 }) // "unnamespaced" when using as a generic building block
329
328
]
330
329
});
331
330
```
@@ -347,8 +346,7 @@ Object.keys(layer_data[0]); // See the field names used by the data for a single
347
346
### Adding panels
348
347
The above example demonstrates how to add multiple studies at the time of plot creation. However, sites like the T2D
349
348
Portal have many datasets, and it can be helpful to let the user interactively choose which other panels to show after
350
-
first render. New panels can be added dynamically! When doing so, the plot will grow to accommodate the newpanel;
351
-
dynamic panels do not require specifying `proportional_height` etc.
349
+
first render. New panels can be added dynamically! When doing so, the plot will grow to accommodate the newpanel.
0 commit comments