Merge pull request #654 from Tom-TBT/refresh_btn

Refresh metadata button to reload channel names, pixel sizes

Author: will-moore

src/index.html

@@ -1275,6 +1275,11 @@ <h5>Example Label</h5>
                 <li class="edit-legend">
                   <a class="dropdown-item" href="#">Add Figure Legend...</a>
                 </li>
+                <li class="reload_metadata"
+                    title="Reload metadata such as image names, pixel sizes and channel names from the server, for all panels."
+                >
+                  <a class="dropdown-item" href="#">Reload images...</a>
+                </li>
               </ul>
             </li>
             <li class="nav-item dropdown px-2" id="edit_actions">

src/js/models/figure_model.js

@@ -632,6 +632,101 @@
                 });
         },
 
+        reloadMetadata: function() {
+            // Reload metadata (name, dataset, channels, pixel sizes, ...) for all panels
+            // Fetch each image's data once per id, then apply to all panels with that imageId.
+            // Reload here must not change edits made by the user (channel LUT, contrast, field of view, ...)
+
+            var panels = this.panels;
+            var ids = {};
+            panels.each(function(panel){
+                // Make a set of imageIds
+                ids[panel.get('imageId')] = true;
+            });
+            var imageIds = Object.keys(ids);
+            if (imageIds.length === 0) return;
+
+            let cors_headers = { mode: 'cors', credentials: 'include', headers: {"Content-Type": "application/json"} };
+            var fetches = imageIds.map(function(iid){
+                // singe fetch per imageId
+                var imgDataUrl = BASE_WEBFIGURE_URL + 'imgData/' + iid + '/';
+                return fetch(imgDataUrl, cors_headers)
+                    .then(rsp => rsp.json())
+                    .then(data => {
+
+                        // values returned here are caught below in the Promise.all handler
+                        if (data.Exception || data.ConcurrencyException) {
+                            return {id: iid, error: true, msg: data.Exception || "ConcurrencyException", url: imgDataUrl};
+                        }
+                        return {id: iid, data: data, url: imgDataUrl};
+                    })
+                    .catch(err => ({id: iid, error: true, msg: err && err.message ? err.message : String(err), url: imgDataUrl}));
+            });
+
+            Promise.all(fetches).then(function(results){
+                results.forEach(function(res){
+                    var iid = res.id;
+                    if (res.error) {
+                        // Show an alert but continue updating other images
+                        alert(`Image loading from ${res.url} included an Error: ${res.msg}`);
+                        return;
+                    }
+
+                    var data = res.data;
+                    // Update all panels that share this imageId
+                    panels.each(function(panel){
+                        if (panel.get('imageId') == iid) {
+                            var new_channels = JSON.parse(JSON.stringify(panel.attributes.channels));
+                            for (var i=0; i < data.channels.length; i++) {
+                                new_channels[i].label = data.channels[i].label;
+                            }
+
+                            var newData = {
+                                'name': data.meta.imageName,
+                                'datasetName': data.meta.datasetName,
+                                'datasetId': data.meta.datasetId,
+                                'channels': new_channels,
+                                'parents': data.parents
+                            };
+
+                            // Unset to start afresh
+                            panel.unset('pixel_size_x');
+                            panel.unset('pixel_size_y');
+                            panel.unset('pixel_size_z');
+                            panel.unset('pixel_size_x_symbol');
+                            panel.unset('pixel_size_z_symbol');
+                            panel.unset('pixel_size_x_unit');
+                            panel.unset('pixel_size_z_unit');
+                            newData.pixel_size_x_unit = 'MICROMETER';  // Set back to panel model default
+                            newData.pixel_size_x_symbol = '\xB5m'; // µm
+
+                            if (data.pixel_size) {
+                                if (data.pixel_size.valueX) {
+                                    newData.pixel_size_x = data.pixel_size.valueX;
+                                    newData.pixel_size_x_symbol = data.pixel_size.symbolX;
+                                    newData.pixel_size_x_unit = data.pixel_size.unitX;
+                                }
+                                if (data.pixel_size.valueY) {
+                                    newData.pixel_size_y = data.pixel_size.valueY;
+                                    newData.pixel_size_y_symbol = data.pixel_size.symbolY;
+                                }
+                                if (data.pixel_size.valueZ) {
+                                    newData.pixel_size_z = data.pixel_size.valueZ;
+                                    newData.pixel_size_z_symbol = data.pixel_size.symbolZ;
+                                    newData.pixel_size_z_unit = data.pixel_size.unitZ;
+                                }
+                            }
+
+                            panel.set(newData);
+                            panel.trigger('change:labels', panel);
+                        }
+                    });
+                });
+            });
+            this.set('unsaved', true);
+            alert("Metadata reloaded for " + this.panels.length + " panel" + (this.panels.length > 1 ? 's.' : '.'));
+        },
+
         // Used to position the #figure within canvas and also to coordinate svg layout.
         getFigureSize: function() {
             var pc = this.get('page_count'),
@@ -760,7 +855,7 @@
                 right = this.get_right_panel(sel),
                 bottom = this.get_bottom_panel(sel),
                 left_x = left.get('x'),
-                right_x = right.get('x') + right.get('width'), 
+                right_x = right.get('x') + right.get('width'),
                 top_y = top.get('y'),
                 bottom_y = bottom.get('y') + bottom.get('height'),
                 grid = [],
@@ -797,7 +892,7 @@
                 }else{
                     c = {'x': left_x + left.get('width')/2, 'y': c.y + row[0].get('height')}
                     grid.push(row);
-                }               
+                }
             }
 
             // get the row id of the most left panel
@@ -807,7 +902,7 @@
                     left_panel_row = i;
                 }
             });
-            
+
             // define the spacer between images
             var spacer = left.get('width')/20;
             if (!isNaN(parseFloat(gridGap))) {
@@ -849,7 +944,7 @@
             }
 
             // set the row position (i.e. y coordinate) of each row
-            var ref_y_offset = max_h    
+            var ref_y_offset = max_h
             var rows_position = {}
             max_h = 0
             // for rows above the reference row
@@ -872,15 +967,15 @@
                     max_h = Math.max(max_h,  row[c].get('height'));
                 }
             }
-            
-            // update position of panels 
+
+            // update position of panels
             for (var [r, y] of Object.entries(rows_position)){
                 var row = grid[r];
                 var last_column_id = -1
                 for (var c=0; c<row.length; c++) {
                     let panel = row[c];
                     var closest_column = this.get_closest_column(panel, reference_grid, last_panel_width)
-										
+
                     if(closest_column >= 0){
                         // update closest_column id to take into account spare panel positions
 						if(last_column_id == closest_column){
@@ -920,7 +1015,7 @@
                 if(current_distance < min_x_distance){
                     closest_col = col_id
                     min_x_distance = current_distance
-                } 
+                }
             }
 
             // if the panel is located far away from the last reference column,
@@ -945,7 +1040,7 @@
                     return p;
                 } else {
                     return top_left;
-                }                
+                }
             });
         },
 

src/js/models/panel_model.js

@@ -147,7 +147,7 @@
                                 let txtShape = shape;
                                 // apply any translation and rotation to Text
                                 let newCoords = {x: txtShape.x, y: txtShape.y};
-                                // If the Inset was previously rotated, we need to 'undo' that rotation first 
+                                // If the Inset was previously rotated, we need to 'undo' that rotation first
                                 if (prevCoords.rotation && prevCoords.rotation != 360) {
                                     let prevCx = prevCoords.x + prevCoords.width / 2;
                                     let prevCy = prevCoords.y + prevCoords.height / 2;
@@ -278,6 +278,14 @@
                 'parents': data.parents
             };
 
+            if (data.pixel_size_x == undefined ||
+                data.pixel_size_x_unit == undefined ||
+                data.pixel_size_x_symbol == undefined) {
+                // Set back to panel model default
+                newData.pixel_size_x_unit = 'MICROMETER';
+                newData.pixel_size_x_symbol = '\xB5m'; // µm
+            }
+
             // theT and theZ are not changed unless we have to...
             if (this.get('theT') >= newData.sizeT) {
                 newData.theT = newData.sizeT - 1;
@@ -605,8 +613,17 @@
                 }
             } else {
                 // project, dataset, screen, plate, well, field (name, id, label, index)
-                var parentVal = this.get("parents")?.[property]?.[format];
-                text = parentVal == null ? "undefined" : "" + parentVal;
+                if (this.get("parents") == null && property === "dataset"){
+                    // fallback on old property
+                    if (format === "id") {
+                        text = ""+this.get('datasetId');
+                    } else if (format === "name") {
+                        text = this.get('datasetName') ? this.get('datasetName') : "No/Many Datasets";
+                    }
+                } else {
+                    var parentVal = this.get("parents")?.[property]?.[format];
+                    text = parentVal == null ? "undefined" : "" + parentVal;
+                }
             }
             return text;
         },

src/js/views/figure_view.js

@@ -133,6 +133,7 @@
             "click .upload_omero_script": "upload_omero_script",
             "click .export_options li": "export_options",
             "click .add_panel": "addPanel",
+            "click .reload_metadata": "reloadMetadata",
             "click .delete_panel": "deleteSelectedPanels",
             "click .copy": "copy_selected_panels",
             "click .paste": "paste_panels",
@@ -732,6 +733,12 @@
             this.model.select_all();
         },
 
+        reloadMetadata: function(event) {
+            event.preventDefault();
+            if (this.modal_visible()) return true;
+            this.model.reloadMetadata();
+        },
+
         deleteSelectedPanels: function(event) {
             event.preventDefault();
             if (this.modal_visible()) return true;