search

statgen / locuszoom

A Javascript/d3 embeddable plugin for interactively visualizing statistical genetic data from customizable sources.
https://statgen.github.io/locuszoom/
MIT License
156 stars 29 forks source link

Responsive Resizing #42

Closed Frencil closed 8 years ago

Frencil commented 8 years ago

Overview

This branch is built to address #41. In a nutshell, a layout should support making a plot discretely sized with no ability to resize, manually resizable (by way of a UI element), or responsively resizable (in that it expands to fill its available space).

New layout parameters

resizable

The resizable parameter is defined at the instance/plot level. This can be "manual", "responsive", or null/false.

aspect_ratio

For resizable plots, since container width is typically bounded by window width but height is theoretically infinite, an aspect_ratio value can be defined to keep a specific aspect ratio for the plot as it resizes. This is a numerical value defined as width / height. So, for example, a square aspect ratio would be 1 and a 16:9 aspect ratio would be 1.7777777 (16/9).

proportional_origin

Another other major change is that panels now have proportional_origin in addition to proportional_width and proportional_height. In general the proportional geometry values are used whenever a layout is resizable by either method, because at that point predefined discrete dimensions and origins may only be valid when the plot is first loaded (and in the case of a responsive plot, may immediately be overwritten during initialization). The proportional_origin is similar to the origin in that has x and y parameters, but these are expressed as multipliers applied to the dimensions of the plot. So, for example, this:

proportional_origin: { x: 0.25, y: 0.5 }

Would position a panel 1/4 of the plot width from the left edge of the plot and 1/2 of the plot height from the top of the plot. As the plot is resized (by either method) the proportional origin would stay constant while the discrete origin would likely change.

CSS

Responsive plots really only make sense inside a containing element that has the right CSS to expand to fill space. A new namespaced class has been added to make this easier for implementers: lz-container-responsive.

Demo Responsive

Finally, I reworked the existing demo.html into a new demo_responsive.html (this exists in addition to the original). This demo page demonstrates how to build a responsive LocusZoom plot and applies some conventions that ultimately would be good to apply to the original demo as well (for example: clear separation of LocusZoom config code from demo-specific logic, illustration of applying a partial layout, etc.)

Frencil commented 8 years ago

UPDATE: this just got some tests added and is essentially complete. A quick review pass would be most helpful but isn't necessary. I'll merge it in later today to make way for Tool Tips (#40) to be on deck for final testing/review/merge early Friday.