React centre panel

components/tests/ui/resources/web/tree.txt

@@ -299,7 +299,7 @@ Wait Until Right Panel Loads Everything
 Wait Until Center Panel Loads
     [Arguments]                     ${containerType}
     Run Keyword If                  '${containerType}' == 'Dataset'        Wait Until Element Is Visible      //*[@id="content_details"]/div[1]
-    Run Keyword If                  '${containerType}' == 'Dataset'        Wait Until Element Is Visible      xpath=//*[@id="filtersearch"]/div/label[contains(text(),'Filter Images')]
+    Run Keyword If                  '${containerType}' == 'Dataset'        Wait Until Element Is Visible      xpath=//*[@id="filtersearch"]
     Run Keyword If                  '${containerType}' == 'Dataset'        Wait Until Element Is Visible      xpath=//*[@id="icon_layout"][contains(@title,"View as Thumbnails")][contains(@class,"checked")]
     Run Keyword If                  '${containerType}' == 'Dataset'        Wait Until Element Is Visible      //*[@id="table_layout"][contains(@title,"View as List")]    
 
@@ -512,9 +512,10 @@ Shift Click Node
     [Arguments]                     ${nodeId}
     Shift Click Element             "#${nodeId}>a"
 
-Shift Click Thumbnail
-    [Arguments]                     ${iid}
-    Shift Click Element             "#image_icon-${iid}"
+# Conflicts with similar jQuery events in IconTable.jsx
+# Shift Click Thumbnail
+#     [Arguments]                     ${iid}
+#     Shift Click Element             "#image_icon-${iid}"
 
 Shift Click Element
     [Arguments]                     ${elementSelector}
@@ -524,9 +525,10 @@ Meta Click Node
     [Arguments]                     ${nodeId}
     Meta Click Element              "#${nodeId}>a"
 
-Meta Click Thumbnail                
-    [Arguments]                     ${iid}
-    Meta Click Element              "#image_icon-${iid}"
+# Conflicts with similar jQuery events in IconTable.jsx
+# Meta Click Thumbnail
+#     [Arguments]                     ${iid}
+#     Meta Click Element              "#image_icon-${iid}"
 
 Meta Click Element
     [Arguments]                     ${elementSelector}

components/tests/ui/testcases/web/center_right_panel_tests.txt

@@ -94,10 +94,16 @@ Check Multi Selections
 	${imageId}						Select First Orphaned Image
 	Click Next Thumbnail
 	${imageId1}						Get Id From Selected Thumbnail
-	Meta Click Thumbnail 			${imageId}
+	Should Not Be Equal             ${imageId}    		${imageId1}
+
+	# Meta Click Thumbnail uses jQuery - conflicts with similar events in IconTable.jsx
+	# Meta Click on Node instead 
+	${nodeId}= 						Wait For Image Node  ${imageId}
+	Meta Click Node  				${nodeId}
 
 	${numOfObjects}					Get Number Of Selected Objects From Tree
 	${numOfObjects1}				Get Number Of Selected Objects From Center Panel
 
+	Should Be Equal 				${numOfObjects}     2
 	Should Be Equal 				${numOfObjects}		${numOfObjects1}
 	Wait Until Right Panel Loads For MultiSelection 	${numOfObjects}

components/tests/ui/testcases/web/spw_test.txt

@@ -13,10 +13,8 @@ Suite Teardown      Close all browsers
 
 Click Well By Name
     [Arguments]    ${name}
-    Wait Until Page Contains Element    xpath=//td[contains(@class,'well')]/img[@name='${name}']
-    # Have to be sure that thumbnail itself has loaded before image is clickable!
-    Sleep                               1
-    Click Element                       xpath=//td[contains(@class,'well')]/img[@name='${name}']
+    Wait Until Page Contains Element    xpath=//td[contains(@class,'well')][@title='${name}']
+    Click Element                       xpath=//td[contains(@class,'well')][@title='${name}']
 
 Bulk Annotation Should Contain Row
     [Arguments]    ${key}   ${value}

components/tools/OmeroWeb/omeroweb/.gitignore

@@ -1,2 +1,3 @@
 db.sqlite3
 django
+node_modules/

components/tools/OmeroWeb/omeroweb/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "omeroweb",
+  "version": "1.0.0",
+  "description": "'OMERO.web application'",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "GPL-3.0",
+  "devDependencies": {
+    "babel-core": "^6.4.5",
+    "babel-loader": "^6.2.2",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "jsx-loader": "^0.13.2",
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "webpack": "^1.12.13"
+  }
+}

components/tools/OmeroWeb/omeroweb/webclient/decorators.py

@@ -183,3 +183,5 @@ def load_settings(self, request, context, conn):
             c_plugins.append({
                 "label": label, "include": include, "plugin_id": plugin_id})
         context['ome']['center_plugins'] = c_plugins
+
+        context['ome']['page_size'] = settings.PAGE

components/tools/OmeroWeb/omeroweb/webclient/static/webclient/css/dusty.css

@@ -930,8 +930,42 @@ button::-moz-focus-inner {
 
 
 
+	.iconTableHeader, .iconTableFooter, .iconTable, .plateContainer, .centrePanel {
+		position: absolute;
+		left: 0;
+		right: 0;
+		border-right: 0;
+	}
+
+	.centrePanel {
+		top: 0;
+		bottom: 0;
+	}
+
+	.iconTableHeader {
+		top: 0;
+		height: 29px;
+	}
+
+	.iconTableFooter {
+		bottom: 0;
+		height: 25px;
+	}
 
+	.iconTable, .plateContainer {
+		bottom:0;
+		overflow:auto;
+		margin-top:0px;
+	}
+
+	.iconTable {
+		top:29px;
+	}
 
+	.plateContainer {
+		top: 0;
+
+	}
 
 
 
@@ -993,6 +1027,14 @@ button::-moz-focus-inner {
 		        transition:   opacity .2s linear; 
 
 	}
+
+	.filterCounter {
+		padding: 8px 10px;
+		position: absolute;
+		left: 170px;
+		color: #555;
+		font-size: 13px
+	}
 
 
 

components/tools/OmeroWeb/omeroweb/webclient/static/webclient/css/layout.css

@@ -1493,6 +1493,7 @@
 
     .iconLayout li {
         display: inline-block;
+        outline: none;
         background-color:hsl(0,0%,95%);
         margin:5px;
         padding:5px;
@@ -2136,11 +2137,19 @@ div.paging {
     margin: 0;
     padding: 10px 0px 30px 0px;
 }
+/* prev/next buttons */
+div.paging button {
+	margin-left: 5px;
+}
+/* page numbers <input> */
 div.paging input.button_pagination {
     border: 0;
     background-color: transparent;
     color: #1b7bc7;
-    padding: 0;
+    padding: 2px;
+}
+div.paging input.button_pagination:disabled {
+    color: black;
 }
 
 #spw {
@@ -2156,7 +2165,7 @@ div.paging input.button_pagination {
     vertical-align: middle;
 }
 #spw table td {
-    padding: 1px;
+    padding: 2px;
     border: 1px solid #ccc;
     width: 25px;
 }
@@ -2167,8 +2176,8 @@ div.paging input.button_pagination {
     vertical-align: top;
 }
 
-#spw table td.ui-selecting { border: 1px dashed #555; padding: 1px; background-color:#87ABD2;}
-#spw table td.ui-selected { border: 1px dashed #555; padding: 1px; background-color:#87ABD2;}
+#spw table td.ui-selecting { border: 1px dashed #555; background-color:#87ABD2;}
+#spw table td.ui-selected { border: 1px dashed #555; background-color:#87ABD2;}
 
 
 

components/tools/OmeroWeb/omeroweb/webclient/static/webclient/javascript/jquery.jstree.filter_plugin.js

@@ -0,0 +1,49 @@
+
+
+(function ($, undefined) {
+    "use strict";
+
+    $.jstree.plugins.filter = function (options, parent) {
+
+        this.filter = function(obj, filterString) {
+            // we are filtering images within a single parent obj (Dataset)
+            if (!obj || !obj.id || obj.id === "#") {return false;}
+            obj = this.get_node(obj);
+
+            var selectedNodeIds = [],
+                inst = this;
+
+            // If parent node not selected,
+            // get IDs of currently selected nodes
+            if (!this.is_selected(obj)) {
+                this.get_selected(true).forEach(function(n){
+                    selectedNodeIds.push(n.type + "-" + n.data.obj.id);
+                });
+                this.deselect_all(true);
+            }
+
+            // One-time callback when refresh completes (triggers 'load_node')
+            $("#dataTree").one("load_node.jstree", function reselectNodes() {
+                // Try to reselect images that have not been filtered
+                selectedNodeIds.forEach(function(id){
+                    var n = inst.locate_node(id, obj)[0];
+                    if (n) {
+                        inst.select_node(n);
+                    }
+                });
+                // if nothing was re-selected, need to trigger refresh
+                if (inst.get_selected().length === 0) {
+                    inst.select_node(obj, true);      // silent
+                    inst.deselect_all();
+                }
+            });
+
+            // add this to the data object...
+            obj.data.obj.filter = filterString;
+
+            // refresh parent node (will re-load filtered data)
+            this.refresh_node(obj);
+        };
+    };
+
+})(jQuery);

components/tools/OmeroWeb/omeroweb/webclient/static/webclient/javascript/jquery.jstree.pagination_plugin.js

@@ -16,6 +16,11 @@
 
     $.jstree.plugins.pagination = function (options, parent) {
 
+        this.get_page_size = function(node) {
+            // nicer way to acces this global variable
+            return WEBCLIENT.PAGE;
+        };
+
         this.change_page = function(node, page) {
             this._set_page(node, page);
             this.refresh_node(node);