task : GUI panels

Expect to progressively add many display elements, large and small; the following proposal has a small number of mechanisms which we can implement using jquery-ui / bootstrap, leverages the browser's layout ability, and provides a mix of automatic re/sizing and flexible layout - user can adjust to suit.

• vertical partitions, resizeable, toggleable (already implemented, just add .resizable)
• drag containers from one partition to another
• container may be tabbed : drag container into a tabbed container
• if a container is not resizeable then it fills the width of the partition (maybe maximise-width icon, switches off when resize icon is used)
• small containers like hover text flow into available space; drag to re-arrange (simple requirement : drag one to end, others flow up).
• interaction between containers in different partitions, e.g. hover text live updates from hover over path, also the selected main application guides which control panels are applicable. Sufficient for empanelled components to listen to show event, and show a related panel. other functions : find a panel by name. For most panels 1 instance will be appropriate.

Have an initial default layout which enables easy first-use; users can adjust to suit their screen / data / work-flow, and save the layout configuration in browser local storage or backend db via an API.

Recommended module

This module fits the above requirements : http://github.com/golden-layout/golden-layout https://github.com/ming-codes/ember-golden-layout

some related features in jquery-ui

http://jqueryui.com/resizable/ http://jqueryui.com/droppable/

http://codepen.io/rstrahl/pen/eJZQej jquery-resizable - A simple splitter panel

http://www.tjvantoll.com/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/ ... http://jqueryui.com/tabs/#vertical (panel tabs arranged vertically)

other modules

various other modules which encompass some parts of this design; none is a close match, and (if golden-layout was not a viable option) since the requirements are probably simple to implement using jquery-ui resizable and draggable/droppable, they may not be a net benefit.

https://lobianijs.com/site/lobipanel

overview / comparison : http://www.fusioncharts.com/blog/2014/09/comparing-jquery-grid-plugins-masonry-vs-isotope-vs-packery-vs-gridster-vs-shapeshift-vs-shuffle-js/

https://github.com/McPants/jquery.shapeshift

http://gridifier.io/