} List of rendered nodes.
+ * @internal
+ */
+ dangerouslyRenderMarkup: function (markupList) {
+ !ExecutionEnvironment.canUseDOM ? process.env.NODE_ENV !== 'production' ? invariant(false, 'dangerouslyRenderMarkup(...): Cannot render markup in a worker ' + 'thread. Make sure `window` and `document` are available globally ' + 'before requiring React when unit testing or use ' + 'ReactDOMServer.renderToString for server rendering.') : invariant(false) : undefined;
+ var nodeName;
+ var markupByNodeName = {};
+ // Group markup by `nodeName` if a wrap is necessary, else by '*'.
+ for (var i = 0; i < markupList.length; i++) {
+ !markupList[i] ? process.env.NODE_ENV !== 'production' ? invariant(false, 'dangerouslyRenderMarkup(...): Missing markup.') : invariant(false) : undefined;
+ nodeName = getNodeName(markupList[i]);
+ nodeName = getMarkupWrap(nodeName) ? nodeName : '*';
+ markupByNodeName[nodeName] = markupByNodeName[nodeName] || [];
+ markupByNodeName[nodeName][i] = markupList[i];
+ }
+ var resultList = [];
+ var resultListAssignmentCount = 0;
+ for (nodeName in markupByNodeName) {
+ if (!markupByNodeName.hasOwnProperty(nodeName)) {
+ continue;
+ }
+ var markupListByNodeName = markupByNodeName[nodeName];
+
+ // This for-in loop skips the holes of the sparse array. The order of
+ // iteration should follow the order of assignment, which happens to match
+ // numerical index order, but we don't rely on that.
+ var resultIndex;
+ for (resultIndex in markupListByNodeName) {
+ if (markupListByNodeName.hasOwnProperty(resultIndex)) {
+ var markup = markupListByNodeName[resultIndex];
+
+ // Push the requested markup with an additional RESULT_INDEX_ATTR
+ // attribute. If the markup does not start with a < character, it
+ // will be discarded below (with an appropriate console.error).
+ markupListByNodeName[resultIndex] = markup.replace(OPEN_TAG_NAME_EXP,
+ // This index will be parsed back out below.
+ '$1 ' + RESULT_INDEX_ATTR + '="' + resultIndex + '" ');
+ }
+ }
+
+ // Render each group of markup with similar wrapping `nodeName`.
+ var renderNodes = createNodesFromMarkup(markupListByNodeName.join(''), emptyFunction // Do nothing special with
-
-
-
-
-
-
diff --git a/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/container_paging.html b/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/container_paging.html
deleted file mode 100644
index 1a65481e647..00000000000
--- a/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/container_paging.html
+++ /dev/null
@@ -1,48 +0,0 @@
-{% load i18n %}
-
-{% comment %}
-
-{% endcomment %}
-
-
-
-{% if manager.paging %}
-
- {% if manager.paging.prev %}
-
- {% endif %} {% trans "Page" %}:
-
- {% for p in manager.paging.total %}
- {% ifequal manager.paging.page p %}
- {{ p }}
- {% else %}
- {% ifequal p -1 %}
- ...
- {% else %}
-
- {% endifequal %}
- {% endifequal %}
- {% endfor %}
- {% if manager.paging.next %}
-
- {% endif %}
-
-
-
-{% endif %}
\ No newline at end of file
diff --git a/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers.html b/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers.html
index 680383608a6..4fdbee0872a 100644
--- a/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers.html
+++ b/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers.html
@@ -37,6 +37,8 @@
{% block script %}
{{ block.super }}
+
+
@@ -44,6 +46,7 @@
+
@@ -63,6 +66,7 @@
WEBCLIENT.URLS = {};
WEBCLIENT.URLS.webindex = "{% url 'webindex' %}";
+ WEBCLIENT.URLS.webgateway = "{% url 'webgateway' %}";
WEBCLIENT.URLS.api_paths_to_object = "{% url 'api_paths_to_object' %}";
WEBCLIENT.URLS.api_containers = "{% url 'api_containers' %}";
WEBCLIENT.URLS.api_datasets = "{% url 'api_datasets' %}";
@@ -76,6 +80,7 @@
WEBCLIENT.URLS.copy_image_rdef_json = "{% url 'webgateway.views.copy_image_rdef_json' %}";
WEBCLIENT.URLS.reset_owners_rdef_json = "{% url 'reset_owners_rdef_json' %}";
WEBCLIENT.URLS.reset_rdef_json = "{% url 'reset_rdef_json' %}";
+ WEBCLIENT.PAGE = "{{ ome.page_size }}";
{% ifequal menu 'usertags' %}
WEBCLIENT.URLS.tree_top_level = WEBCLIENT.URLS.api_tags_and_tagged;
@@ -633,7 +638,6 @@
}
}
});
-
});
diff --git a/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers_icon.html b/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers_icon.html
deleted file mode 100644
index 7d3c79136cd..00000000000
--- a/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers_icon.html
+++ /dev/null
@@ -1,506 +0,0 @@
-{% load i18n %}
-{% load common_filters %}
-
-{% comment %}
-
-{% endcomment %}
-
-
-
-
-
-
-
-
-
-
-
-{% if manager.containers.images %}
-
-
-
-
- {% include "webclient/data/container_paging.html" %}
-
-{% else %}
-
{% trans "No images in Dataset" %}
-{% endif %}
-
- -
-
-
-
Name
- Date
- Size X
- Size Y
- Size Z
-
-
- <% _.each(images, function(img) { %>
- - data-share="<%= img.shareId %>" <% }%>
- data-owned="">
-
-
-
 {print( img.shareId + '/')} %><% if (img.thumbVersion) { print ('?version=' + img.thumbVersion)}%> "<%= img.name %>")
-
- <%= img.name %>
- <%= img.name %>
-
- <%= img.date %>
- <%= img.data.obj.sizeX %>
- <%= img.data.obj.sizeY %>
- <%= img.data.obj.sizeZ %>
-
- <% }) %>
-
-
-<% if (paging) { %>
-
-
- <% if (page-1 > 0) { %>
-
- <% } %>
-
- <% for (var p=1; p<=pageCount; p++) { %>
- <% if (page === p) { print (p) }
- else { %>
-
- <% } %>
- <% } %>
-
- <% if (page < pageCount) { %>
-
- <% } %>
-
-
-
-<% } %>
\ No newline at end of file
diff --git a/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/includes/center_plugin.thumbs.js.html b/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/includes/center_plugin.thumbs.js.html
index ad226c19a07..83ea95b8232 100644
--- a/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/includes/center_plugin.thumbs.js.html
+++ b/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/includes/center_plugin.thumbs.js.html
@@ -1,6 +1,6 @@
{% comment %}
/**
- Copyright (C) 2012-2015 University of Dundee & Open Microscopy Environment.
+ Copyright (C) 2012-2016 University of Dundee & Open Microscopy Environment.
All rights reserved.
This program is free software: you can redistribute it and/or modify
@@ -28,44 +28,19 @@
$(document).ready(function() {
- // Revamp of thumbnail update
+ // Update of centre panel
/*
-
When should the panel update
1) The image selection has changed (update)
2) The container selection has changed (refresh)
3) Something has been deleted or moved out (remove)
4) Something has been added (refresh)
-
- Problems
-
- An image is moved to another dataset while selected.
- This causes the view to shift to the new view
- There will also be a remove attempt (this must do nothing)
-
*/
var inst = $.jstree.reference('#dataTree');
var parentNode; // the currently selected node
- // We compile the underscore templates, ready for rendering
- var tmplText = $('#icon_thumbnails_template').html();
- var iconTmpl = _.template(tmplText);
- var headerText = $('#icon_header_template').html();
- var headerTmpl = _.template(headerText);
- // Variables for layout and thumbnail zooming
- var layout = "icon";
- var icon_styles = [];
- var li_styles = [];
- var aspect_ratios = [];
- var iconSize = 65;
- var parentId; // E.g. dataset-1
-
- var dateFormatOptions = {
- weekday: "short", year: "numeric", month: "short",
- day: "numeric", hour: "2-digit", minute: "2-digit"
- };
// Start listening for Node Loading events on the tree...
// If a node loads and it's selected, update_thumbs...
@@ -75,64 +50,6 @@
}
});
- $("#content_details").on("click", "input.button_pagination", function(){
- var page = $(this).attr('data-page');
- page = parseInt(page, 10);
- inst.deselect_all(true);
- inst.change_page(parentNode, page);
- // and then reselect the same node again to trigger update
- inst.select_node(parentNode);
- });
-
- // double-click handler on image - launches image viewer
- $("#content_details").on("dblclick", "li.row", function(event) {
- var $this = $(this),
- iid = $this.attr('id').split("-")[1],
- url;
- // Image only has share ID if user doesn't own the share.
- if ($this.attr('data-share')) {
- url = "{% url 'web_image_viewer' 99 0 %}".replace('/99/', "/" + $this.attr('data-share') + "/" );
- } else {
- url = "{% url 'web_image_viewer' 0 %}";
- }
- url = url.replace('/0/', "/" + iid + "/" );
- OME.openPopup(url);
- });
-
- // Set up the centre panel header.
- var setupDatasetHeader = function() {
- var html = headerTmpl({'layout': layout});
- $("#content_details").html(html);
-
- // single click handler on image (container). Selection then update toolbar & metadata pane
- $( "#icon_table" ).on( "click", "li.row", function(event) {
- handleClickSelection(event);
- });
-
- $("#filtersearch label").inFieldLabels();
-
- $("#thumb_size_slider").slider({
- max: 200,
- min: 30,
- value: iconSize,
- slide: function(event, ui) {
- iconSize = ui.value;
- setIconSize();
- }
- });
- // handle Radio buttons
- $("#layout_chooser button").click(function(event) {
- if ($(event.target).attr('id') == 'table_layout') {
- layout = 'table';
- } else {
- layout = 'icon';
- }
- setLayout();
- $("#layout_chooser button").removeClass("checked");
- $(event.target).addClass("checked");
- });
- }
-
// This is called directly by various jstree plugins
// E.g. omecut_plugin.js as well as the jstree in containers.html
window.update_thumbnails_panel = function(event, data) {
@@ -140,709 +57,36 @@
// Get the current selection
var selected = inst.get_selected(true);
- if (selected.length === 0) {
- $("#content_details").html("");
- parentId = undefined;
- clearThumbnailsPanel();
- return;
- }
- var dtype = selected[0].type;
- if (selected.length > 1 && dtype !== "image") {
- $("#content_details").html("");
- parentId = undefined;
- clearThumbnailsPanel();
- return;
- }
-
- // parent node could be dataset, orphaned, share or tag
- var parentTypes = ["dataset", "orphaned", "tag", "share"],
- imgNodes = [];
- if (parentTypes.indexOf(dtype) > -1) {
- parentNode = selected[0];
- } else if (dtype === "image") {
- parentNode = inst.get_node(inst.get_parent(selected[0]));
- } else if (dtype === "plate" || dtype === "acquisition") {
- parentId = undefined;
- load_spw(event, data);
- return;
- // All other types have blank centre panel
- } else {
- parentId = undefined;
- clearThumbnailsPanel();
- return;
- }
-
- if (!parentNode) {
- // need this for pagination etc
- parentNode = inst.get_node(data.node);
- }
-
- var newParentId = parentNode.type + "-" + parentNode.data.obj.id;
- if (parentId === newParentId
- && event.type !== "copy_node"
- && event.type !== "create_node"
- && event.type !== "load_node"
- && event.type !== "delete_node"
- && event.type !== "refreshThumb"
- && event.type !== "refreshThumbnails") {
-
- highlightSelectedThumbs(selected);
-
- return;
- }
-
- parentId = newParentId;
-
- // clear html and stored data before adding back html
- clearThumbnailsPanel();
-
- imgNodes = [];
- parentNode.children.forEach(function(ch){
- var childNode = inst.get_node(ch);
- // Ignore non-images under tags or 'deleted' under shares
- if (childNode.type == "image") {
- imgNodes.push(childNode);
- }
- });
-
- var imgJson = [],
- selFileSets = [];
- // Convert jsTree nodes into json for template
- imgNodes.forEach(function(node){
- var d = node.data.obj.date || node.data.obj.acqDate;
- var date = new Date(d);
- date = date.toLocaleTimeString(undefined, dateFormatOptions);
- var iData = {'id': node.data.obj.id,
- 'name': node.text,
- 'data': JSON.parse(JSON.stringify(node.data)),
- 'selected': node.state.selected,
- 'date': date,
- };
- // Note fileset IDs for selected images
- if (iData.selected) {
- var fsId = node.data.obj.filesetId;
- if (fsId) {
- selFileSets.push(fsId);
- }
- }
- // Thumb version: random to break cache if thumbnails are -1 'in progress'
- // or we're refresing 1 or all thumbnails
- if (node.data.obj.thumbVersion != undefined ||
- event.type === "refreshThumbnails" ||
- event.type === "refreshThumb") {
- var thumbVersion = node.data.obj.thumbVersion;
- if (thumbVersion === -1 || event.type === "refreshThumbnails" || (
- event.type === "refreshThumb" && data.imageId === iData.id)) {
- thumbVersion = getRandom();
- // We cache this to prevent new thumbnails requested on every
- // selection change. Refreshing of tree will reset thumbVersion.
- node.data.obj.thumbVersion = thumbVersion;
- }
- iData.thumbVersion = thumbVersion;
- }
- // If image is in share and share is not owned by user...
- if (node.data.obj.shareId && !parentNode.data.obj.isOwned) {
- // share ID will be needed to open image viewer
- iData.shareId = node.data.obj.shareId;
+ // if we're refreshing thumbnail(s) then update thumbVersion in tree first...
+ if ((event.type === "refreshThumbnails" || event.type === "refreshThumb")
+ && selected.length > 0) {
+ var parentNode
+ if (selected[0].type === "image") {
+ parentNode = inst.get_node(inst.get_parent(selected[0]));
+ } else {
+ parentNode = inst.get_node(selected[0]);
}
- imgJson.push(iData);
- });
-
- // Now we know which filesets are selected, we can
- // go through all images, adding fs-selection flag if in
- if (selFileSets.length > 0) {
- imgJson.forEach(function(img){
- if (selFileSets.indexOf(img.data.obj.filesetId) > -1) {
- img.fsSelected = true;
+ parentNode.children.forEach(function(ch){
+ ch = inst.get_node(ch);
+ if (event.type === "refreshThumbnails" ||
+ (event.type === "refreshThumb" && ch.data.obj.id === data.imageId)) {
+ ch.data.obj.thumbVersion = getRandom();
}
- });
+ })
}
- if ($("#icon_table").length == 0) {
- setupDatasetHeader();
- }
-
- var json = {'images': imgJson,
- 'webindex': '{% url "webindex" %}',
- 'layout': layout,
- 'paging': false}
-
- var childCount = parentNode.data.obj.childCount;
- if (PAGE_SIZE < childCount) {
- json.pageCount = parseInt(childCount / PAGE_SIZE, 10) + 1;
- json.paging = true;
- json.page = inst.get_page(parentNode);
- }
-
- var html = iconTmpl(json);
- $("#icon_table").html(html);
-
- // populate arrays etc for speedy icon zooming
- setupIconZooming();
-
- // setup quicksearch filtering of images
- setupFiltering();
-
- // init the elementsorter plugin
- setupSorting();
-
- // plugin to handle drag-select of images (share is single-select only)
- if (parentNode.type !== "share") {
- setupSelectable();
- }
-
- // scroll to selected thumbnail (if any)
- focusThumbnail();
-
+ // React entry point exported from bundle.js, built with webpack
+ renderCentrePanel.default(inst, selected);
return;
}
// Update thumbnails when we switch between plugins
$('#center_panel_chooser').on('center_plugin_changed.ome', update_thumbnails_panel);
- // Use selected nodes from tree to indicate thumbnails
- var highlightSelectedThumbs = function(selected) {
- $("#dataIcons li.row").removeClass("ui-selected").removeClass("fs-selected");
- var selFileSets = [];
- selected.forEach(function(node){
- if (node.type == "image") {
- $("#image_icon-" + node.data.obj.id).addClass("ui-selected");
- }
- var fsId = node.data.obj.filesetId;
- if (fsId) {
- selFileSets.push(fsId);
- }
- });
- selFileSets.forEach(function(fsId){
- $("#dataIcons li[data-fileset='" + fsId + "']").addClass("fs-selected");
- });
- focusThumbnail();
- }
-
- var focusThumbnail = function() {
- // We focus the thumbnail to make sure it's scrolled into view
- var $focused = $(':focus');
- $("#dataIcons li.ui-selected").first().focus();
- // Then re-focus the jstree node, so that hot-keys work etc
- $focused.focus();
- }
-
var getRandom = function() {
return (Math.random() + "").slice(2);
}
- var setupSelectable = function() {
- $("#dataIcons").selectable({
- filter: 'li.row',
- distance: 2,
- stop: function() {
- // Make the same selection in the jstree etc
- syncTreeSelection();
- },
- start: function() {
- // Remove any fileset selection markings
- $("#dataIcons li.row:visible")
- .removeClass("fs-selected")
- .removeClass("lastSelected");
- }
- });
- }
-
- var setupSorting = function() {
- // simple emulation of table-sorter for other elements...
- // performs sort when intialised on 'sort-init' column
- $(".element_sorter").elementsorter({
- head: '.thead div', // Selector for the equivalent of 'table head'
- body: 'li.row', // Selector for the equivalent of 'table rows'
- sort_key: '.hidden_sort_text' // optional - how to find the text within each child of a 'row'.
- });
- }
-
- var setupFiltering = function() {
- var $filter_input = $('#id_search');
- var filter_txt = $filter_input.val();
- $filter_input.quicksearch('#dataIcons li.row', {
- 'delay': 300,
- 'bind': 'keyup',
- 'loader': 'span.loading',
- onAfter: function(){
- // onAfter can get triggered without text change, E.g. by tree selection!
- var new_txt = $filter_input.val();
- if (filter_txt != new_txt){ // test text has changed
- filter_txt = new_txt;
- deselectFiltered();
- }
- }
- });
- }
-
- // When we filter, unselect the hidden icons and update
- // selections in the jstree
- var deselectFiltered = function(e, a){
- // check if any selection change is needed
- var $filtered = $("#dataIcons li.ui-selected:hidden");
- if ($filtered.length == 0) return;
-
- // If we've filtered any selected images, de-select icon
- $filtered.removeClass("ui-selected");
-
- var imageId = $filtered.first().data('id');
- syncTreeSelection(imageId);
- };
-
- // handles selection for 'clicks' (not drags)
- var handleClickSelection = function(event) {
-
- // It is possible to select the image itself or its individual container
- // Handle that here
- var $targetIcon;
- if (event.target.nodeName.toLowerCase() == 'li') {
- $targetIcon = $(event.target);
- } else if (event.target.nodeName.toLowerCase() == 'img') {
- $targetIcon = $(event.target).parent().parent();
- } else {
- $targetIcon = $(event.target).parent();
- }
-
- var imageId = $targetIcon.attr('data-id');
-
- // Add ui-selected class to range of icons etc
- highlightClickedIcons(event, $targetIcon);
-
- syncTreeSelection();
-
- }
-
-
- var highlightClickedIcons = function(event, $targetIcon) {
- /***
- * Based on the icon that was selected and any modifier keys
- * update the thumbnail selections
- */
-
- // Get the visible icons that might need selecting
- var $visibleIcons = $("#dataIcons li.row:visible");
-
- // Get the start point for a range select if there is one
- // and it is visible
- var $lastSelected = $('#dataIcons .lastSelected:visible');
- if ($lastSelected.length === 0) {
- // possible after drag select - just pick selected
- $lastSelected = $('#dataIcons .ui-selected:visible');
- }
-
- // Calculate the index of the last selected item if there was one
- var lastSelectedIndex = -1;
- $lastSelected.each(function(index, el) {
- lastSelectedIndex = $visibleIcons.index(el);
- });
-
- // Get the index of the target item
- var targetIndex = $visibleIcons.index($targetIcon);
-
- // Remove the starting point as a new one is about to be applied
- $lastSelected.removeClass('lastSelected');
-
- // Get the platform specific multi-select key
- var multiSelectKey = OME.multi_key() + "Key";
-
- var selectedIcons = [];
- var unselectedIcons = [];
-
- // If this is a range select
- if (event.shiftKey && lastSelectedIndex != -1) {
- // Find the start and end of the range
- var start = Math.min(lastSelectedIndex, targetIndex);
- var end = Math.max(lastSelectedIndex, targetIndex);
-
- // Mark the icons for selection
- $visibleIcons.slice(start, end+1).each(function(index, el) {
- $(el).addClass('ui-selected');
- });
-
-
- // If this is a multi-select
- } else if (event[multiSelectKey] && lastSelectedIndex != -1) {
- if ($targetIcon.hasClass('ui-selected')) {
- $targetIcon.removeClass('ui-selected');
- } else {
- $targetIcon.addClass('ui-selected');
- }
-
- // This is a single selection or there was no other selection for the range/multi select
- } else {
- // Remove all selections
- $visibleIcons.removeClass("ui-selected fs-selected");
- // Add selection for this one item
- $targetIcon.addClass("ui-selected lastSelected");
- }
-
- // Mark the most recent selection
- $targetIcon.addClass('lastSelected');
- }
-
-
- // use IDs of the selected visible thumbnails to sync tree selection
- var syncTreeSelection = function() {
-
- var $selectedIcons = $('#dataIcons li.ui-selected');
- if (parentNode.type == 'share') {
- // We don't support multi-selection of images in share
- $selectedIcons.removeClass('ui-selected');
- $selectedIcons = $selectedIcons.first().addClass('ui-selected');
- }
- var imageId = $selectedIcons.first().data('id');
-
- // Get the node that seems to be the current container
- // Images only, all that is required for now as center panel only shows images
- var containerNode;
- if (imageId) {
- // don't lookup container if no images selected
- containerNode = OME.getTreeImageContainerBestGuess(imageId);
- }
-
- // Deselect all to begin (supress jstree event)
- inst.deselect_all(true);
-
- var fsIds = {};
- if (containerNode) {
-
- // Select the selected icons in the tree (supress jstree event)
- $selectedIcons.each(function(index, el) {
- var $el = $(el),
- fsId = $el.data('fileset');
- if (fsId != undefined && fsId != '') {
- fsIds[fsId] = true;
- }
- var selectedNode = inst.locate_node($el.data('type') + '-' + $el.data('id'), containerNode)[0];
- inst.select_node(selectedNode, true);
- // we also focus the node, so that hotkey events come from the node
- if (selectedNode) {
- $("#" + selectedNode.id).children('.jstree-anchor').focus();
- }
- });
- } else {
- console.log('jstree may need to be refreshed');
- }
- // Update thumbnail highlighting of filesets
- highlightFilesets(fsIds);
-
- // Since we've suppressed jstree events, we need to manually handle selection change...
- OME.writeSelectedObjs(undefined, $selectedIcons);
- // Update the buttons in the jstree
- if (buttonsShowHide) {
- buttonsShowHide(inst.get_selected(true), inst);
- }
- // Trigger the selection changed event
- $("body").trigger('selection_change.ome');
-
- return false;
- }
-
- // When an image(s) are selected, also indicate others with the same fileset(s).
- var highlightFilesets = function(fsIds) {
- var $selectee = $("#dataIcons").find("li.row");
- $selectee.removeClass('fs-selected');
- for (var fsid in fsIds) {
- $selectee.filter("[data-fileset='"+ fsid + "']").addClass('fs-selected');
- }
- }
-
- // Handle zooming of thumbnails with jQuery slider
- var setupIconZooming = function() {
- icon_styles = [];
- li_styles = [];
- aspect_ratios = [];
- // manipulate thumbnail styles directly (approx 2x faster than using jQuery)
- $("#dataIcons img").each(function(){
- icon_styles.push(this.style);
- });
-
- var sizeX, sizeY;
- $("#dataIcons li").each(function(){
- if (! $(this).hasClass('thead')) {
- li_styles.push(this.style);
- sizeX = $(".sizeX", $(this)).text();
- sizeY = $(".sizeY", $(this)).text();
- aspect_ratios.push(parseFloat(sizeX) / parseFloat(sizeY));
- }
- });
-
- setIconSize();
- }
-
- var setIconSize = function(icon_size) {
- var icon_size = iconSize;
- for (var s=0; s 1) {
- icon_styles[s].height = Math.round(icon_size / aspect_ratios[s]) + 1 + "px";
- icon_styles[s].width = icon_size + "px";
- } else {
- icon_styles[s].width = icon_size + "px";
- icon_styles[s].height = icon_size + "px";
- }
- li_styles[s].width = icon_size + "px";
- li_styles[s].height = icon_size + "px";
- }
- }
-
- // switch between 'icon' or 'table' layout by switching CSS
- var setLayout = function() {
- if (layout == "icon"){
- $("#dataIcons").removeClass("tableLayout");
- $("#dataIcons").addClass("iconLayout");
- }
- else {
- $("#dataIcons").removeClass("iconLayout");
- $("#dataIcons").addClass("tableLayout");
- }
- // on larger pages, may need to scroll to show selected thumbnail again
- focusThumbnail();
- }
-
-
- // This is called for plates or acquisitions (runs) only.
- // Was previously used for loading ALL data types but now
- // images are retrieved from jsTree directly so we only need to
- // load plates.
- // TODO: More cleanup needed to remove all non-SPW code
- var load_spw = function(event, data) {
- // Get the container that is currently rendered
- // If any of these are not defined then nothing was selected
- var $contentDetails = $("div#content_details");
-
- // Get details about the currently displayed container
- var currentType = $contentDetails.data('type');
- var currentId = $contentDetails.data('id');
- var currentPath = $contentDetails.data('path')
- var currentNode = false;
- var currentPage = $("div#page").data('page');
- var currentField = $contentDetails.data('field');
-
- if (currentPage === undefined) {
- currentPage = 1;
- }
-
- if (currentField === undefined) {
- currentField = 0;
- }
-
- // Retrieve current container node
- if (currentType != undefined &&
- currentId != undefined &&
- currentPath != undefined) {
-
- currentPath = JSON.parse(currentPath);
- currentNode = inst.find_omepath(currentPath);
- }
-
- // Get the current selection
- var selected = inst.get_selected(true);
-
- // If there are selections then determine if the currently
- // rendered container is one of them.
- var containerNode = false;
- if (currentNode) {
- $.each(selected, function(index, node) {
- if (node === currentNode) {
- containerNode = node;
- // Break out of each
- return false;
- }
-
- });
- }
-
- if (event.type === 'changed' || event.type === 'center_plugin_changed.ome') {
- // If the containerNode is the current container then this is
- // a selection change within the container or a pagination/field
- // change
- if (containerNode) {
- // This is a page change
- if (getPageOr1(inst, containerNode) !== currentPage) {
- loadThumbnailsPanel(containerNode, getPageOr1(inst, containerNode), undefined);
-
- // Fields are only applicable for acquisitions
- } else if (containerNode.type === 'acquisition' &&
- getfieldOr0(inst, containerNode) !== currentField) {
- loadThumbnailsPanel(containerNode, undefined, getfieldOr0(inst, containerNode));
- }
-
- // Return as this was either a page/field change or image
- // selection only
- return;
- }
-
- // There was no current node or it was not selected
- // Load the first of the selected nodes
- containerNode = selected[0];
-
- // While the new selection may not be the same path as the old one
- // if it is an equivalent node, we can save a reload and simply update
- // the recorded path, but only if it is the same page/field
- if (currentNode &&
- inst.omecompare(containerNode, currentNode) &&
- (currentPage === inst.get_page(containerNode || (containerNode.type === 'acquisition' && currentField === inst.get_field(containerNode))))) {
- $contentDetails.data('path', JSON.stringify(inst.get_omepath(containerNode)));
- return;
- }
-
- // Load the thumbnails for this container with the appropriate page/field
- // E.g. public.html tree doesn't support pages/fields
- var nodePage = inst.get_page ? inst.get_page(containerNode) : 1;
- var nodeField = inst.get_field ? inst.get_field(containerNode) : 0;
- loadThumbnailsPanel(containerNode, nodePage, nodeField);
- return;
-
- } else if (event.type === 'move_node') {
- // The only relevant update is if a node has been added or removed
- // from the currently displayed container, however, if this was a
- // move of a selected image, the containerNode will be wrong as it
- // points to the old location of the node
-
- var node = inst.get_node(data.node);
- var parent = inst.get_node(data.parent);
- var old_parent = inst.get_node(data.old_parent);
-
- // It is also possible that the moved node was the displayed container itself,
- // but not an image
- if (inst.is_selected(node)) {
- // Update the contentDetails with this node
- setThumbnailsPanel(node.type, node.data.obj.id, inst.get_omepath(node));
- // And make the containerNode this node straight away
- containerNode = node;
- }
-
- // Is the moved node in the displayed container?
- if (containerNode === parent && containerNode === old_parent) {
- // Do nothing as it was reordered only
- } else if (containerNode === parent) {
- // Reload thumbnails
- loadThumbnailsPanel(containerNode, getPageOr1(inst, containerNode), getfieldOr0(inst, containerNode));
- }
-
- }
- };
-
- // Load the thumbnails (Will wait until there are no new requests
- // for 200ms)
- var loadThumbnailsPanelTimeout = false;
- var loadThumbnailsPanel = function(node, newPage, newField) {
- // Reset timeout if within 200ms of the last request
- if (loadThumbnailsPanelTimeout) {
- window.clearTimeout(loadThumbnailsPanelTimeout);
- }
-
- loadThumbnailsPanelTimeout = window.setTimeout(function() {
- // Clear the timeout
- loadThumbnailsPanelTimeout = false;
-
- // Update the central panel
- var inst = $.jstree.reference('#dataTree');
- var url = "{% url 'webindex' %}";
- node = inst.get_node(node);
- var nodeType = node.type;
- var nodeId = node.data.obj.id;
- var show = OME.getURLParameter('show');
-
- switch(nodeType) {
- // case 'dataset':
- // url += 'load_data/' + nodeType + '/' + nodeId + '/?view=icon' + "&page="+newPage;
- // break;
- // case 'orphaned':
- // url += 'load_data/' + nodeType + '/?view=icon' + "&page="+newPage;
- // break;
- case 'plate':
- // Only load plates if it does not have child acquisitions
- if (!inst.is_parent(node)) {
- url += 'load_data/' + nodeType + '/' + nodeId + '/';
- if (show) {
- url += "?show=" + show;
- }
- } else {
- url = undefined;
- }
- break;
- case 'acquisition':
- url += 'load_data/' + nodeType + '/' + nodeId + '/?index=' + newField;
- if (show) {
- url += "&show=" + show;
- }
- break;
- // case 'tag':
- // url += 'load_data_by_tag/?o_id=' + nodeId;
- // break;
- // case 'share':
- // url += 'load_public/' + nodeId + '/?view=icon'
- // break;
- default:
- url = undefined;
- }
-
- if (url != undefined) {
- // Loading screen
- $("div#content_details").html('Loading... please wait. 
');
-
- // Load html from url
- $("div#content_details").load(url);
- setThumbnailsPanel(nodeType, nodeId, inst.get_omepath(node), newPage, newField);
-
- // Or if it's not a container that can be loaded, sometimes display a message
- } else {
- // If there are no children of a project node, display a message
- if (nodeType === 'project' && !inst.is_parent(node)) {
- var msg = "No Datasets in Project
![image]({"/webgateway/render_thumbnail/")
+ {image.name}
+ {image.name}
+