Use grid-stack frames to position axes

[Don-Isdale]

---

---

Instead of grouping axes in stacks, provide rectangular frames around the axis allowing user to resize width / height and position the axis relative to other axes.

• it is possible to place each axis SVG within the resizing frame, but that impacts SVG download - the download would be in multiple pieces, 1 for each axis and 1 for the paths, which gives the user flexibility in arranging a diagram, but means the diagram does not automatically look like the displayed graph. Instead, it seems better to use the resizing frames simply as grab-handles on the axes size and position.

• the axes are related to a grid instead of to stacks

  • doesn't have the automatic layout : currently each axis in a stack is automatically given equal height
  • to enable a stack to be dragged, could group the frames together, equivalent to a stack

• this addresses the need for diverse axis heights within a stack, e.g. micro-chromosomes

• relevant to genotype and haplotype displays because it gives flexible layout for connecting alignment to genotype / haplotype table

• could be used for other panels, e.g. feature table, left panel, etc

• Could also have a frame around each block-adj, resizing the rectangle containing the alignment paths; probably not needed.

---

• this is closely related to task-:-GUI-panels also discussed in #89 : Make left panel size adjustable by shift-click of arrow and default width to fit longest dataset name comment golden-layout was also used to illustrate this concept, in branch : feature/axisFinishSplit3_testFrames_goldenLayout This showed an issue : there was not apparent way to enclose the golden-layout containers within a given html element - they use the whole screen

Integration with Ember.js is probably possible using Virtual bindings, but not yet done. Virtual bindings have been added to golden-layout to enable integration with JavaScript frameworks, and Angular and Vue and React have been done using virtual via events.

---

---

This library GridStack.js has an ember integration available, is simple to use and sufficient for the requirements. demo github npm

Using that within Pretzel is shown in : branch : feature/axisFinishSplit3_testFrames

---

There are a number of other JavaScript layout libraries which could be considered :

• from https://ourcodeworld.com/articles/read/663/top-5-best-draggable-droppable-and-resizable-grid-layout-designer-jquery-and-javascript-plugins :

• • jquery-gridly
• • muuri
• • layout-grid
• • lobipanel
• • RrQwjO

http://www.fusioncharts.com/blog/comparing-jquery-grid-plugins-masonry-vs-isotope-vs-packery-vs-gridster-vs-shapeshift-vs-shuffle-js/ ... – Nested, Mason.js, Cube Portfolio, Megafolio, Gridalicious, Woomark, Smart content placer, and Freetile.

– Nested, Mason.js, Cube Portfolio, Megafolio, Gridalicious, Woomark, Smart content placer, and Freetile.

• • filterizr
• • masonjs.com/
• • nested
• • jquery.shapeshift
• • jspanel.de
• • interactjs.io
• • resizable

---

[Don-Isdale]

Comments from discussion

• automatic / sensible defaults so far as possible, e.g. axis length ratio can be determined for axes from a single reference.
• for different species, can have a toggle between 1:1 base ratio, and equal-axis-length.
• genetic map : probably equal axis length because users will be relating GM and physical views of a single or related species.

Related :

257 MVP of micro-chromosomes relations display using synteny blocks

262 axes length : toggle 'Show actual length'