Modular Tab panes

[wmoore]

In order to address use cases that involve displaying custom content in the centre (or right-hand) panels E.g:

• display "dataset split view" in center panel
• show main image viewer in center panel
• table view of images with annotations etc...

we need a way for users to add their page to the appropriate panel. Tabs would seem an obvious choice.

This could be configured in SETTINGS using a list of "Tab Name":"url_name" pairs. Django reverse(url_name) with no parameters would define a url to load into that tab, as is currently done with the metadata and preview tabs in the right-hand panel.

E.g. above examples

CENTER_PANEL_TABS = [["Dataset Split View", "webtest_dataset_split_view"], 
 ["Annotation Table", "webapp_ann_table"]]

Clicking the tab loads the defined url. This page can then respond to current status or changes in tree selection, to display currently selected P/D/I etc.

[wmoore]

Links configured in settings.py have been used for main tabs in webclient/webadmin. ​http://github.com/will-moore/openmicroscopy/commit/3b36c46f3a7eefd549a7ef6f98f4aada94dadf62#diff-2

[wmoore]

Key issue when using configurable tabs to 'load' content with jQuery is how to handle any callbacks. E.g. in the current right-hand panel, when the Acquisition metadata (or Preview) is loaded, a method is called equivalent to the document.ready call:

$('#acquisition').click(function() {
    var $tab = $("#metadata_tab");
    var href = $("#acquisition-link").attr('href');
    if (!acquisition_load) {
        $tab.load(href, function() {
            acquisition_loaded();
        });
        acquisition_load = true;
    }
});

Here, the acquisition_loaded() method is defined within a <script> tag in the page that is loaded, and is used to format etc. the panel content.

[wmoore]

Have now used jquery-ui tabs on the left and right panels, configured as links on left and ajax loading on right. Issue of 'callback' above seems to be solved. Just need to use $(document).ready() as the first code in a <script> tag.

[wmoore]

Demo of tabs functionality

[agilo]

Updated status, related task in progress

[wmoore]

This is not yet merged into develop, but there is no further work planned for the branch.

Closing...