Add Hilo Checkbox for LUT Toggling in Channel Slider View

src/js/models/panel_model.js

@@ -457,7 +457,7 @@
         // labels_map is {labelKey: {size:s, text:t, position:p, color:c}} or {labelKey: false} to delete
         // where labelKey specifies the label to edit. "l.text + '_' + l.size + '_' + l.color + '_' + l.position"
         edit_labels: function(labels_map) {
-            
+
             var oldLabs = this.get('labels');
             // Need to clone the list of labels...
             var labs = [],
@@ -483,7 +483,7 @@
             // Extract all the keys (even duplicates)
             var keys = labs.map(lbl => this.get_label_key(lbl));
 
-            // get all unique labels based on filtering keys 
+            // get all unique labels based on filtering keys
             //(i.e removing duplicate keys based on the index of the first occurrence of the value)
             var filtered_lbls = labs.filter((lbl, index) => index == keys.indexOf(this.get_label_key(lbl)));
 
@@ -505,12 +505,29 @@
             this.save('channels', chs);
         },
 
-        toggle_channel: function(cIndex, active ) {
+        save_channels: function(channels) {
+            // channels should be a list of objects [{key:value}, {}..]
+            var oldChs = this.get('channels');
+            // Clone channels, applying changes
+            var chs = this.get('channels').map((oldCh, idx) => {
+                return $.extend(true, {}, oldCh, channels[idx]);
+            });
+            this.save('channels', chs);
+        },
 
+        toggle_channel: function(cIndex, active) {
             if (typeof active == "undefined") {
                 active = !this.get('channels')[cIndex].active;
             }
-            this.save_channel(cIndex, 'active', active);
+
+            if (this.get("hilo_enabled") && active) {
+                let newChs = this.get('channels').map(function(channel, idx) {
+                    return {'active': idx == cIndex};
+                });
+                this.save_channels(newChs);
+            } else {
+                this.save_channel(cIndex, 'active', active);
+            }
         },
 
         save_channel_window: function(cIndex, new_w) {

src/js/models/undo.js

@@ -193,7 +193,8 @@ export const UndoManager = Backbone.Model.extend({
         // into undo / redo operations to go into our Edit below
         var createUndo = function(callList) {
             var undos = [];
-            for (var u=0; u<callList.length; u++) {
+            // add in reverse order
+            for (var u=(callList.length - 1); u>=0; u--) {
                 undos.push(callList[u]);
             }
             // get the currently selected panels

src/js/views/channel_slider_view.js

@@ -7,6 +7,7 @@ import FigureLutPicker from "../views/lutpicker";
 import FigureColorPicker from "../views/colorpicker";
 
 import channel_slider_template from '../../templates/channel_slider.template.html?raw';
+import checkbox_template from '../../templates/checkbox_template.html?raw';
 
 import lutsPng from "../../images/luts_10.png";
 // Need to handle dev vv built (omero-web) paths
@@ -18,6 +19,7 @@ const SLIDER_INCR_CUTOFF = 100;
 var ChannelSliderView = Backbone.View.extend({
 
     template: _.template(channel_slider_template),
+    checkboxTemplate: _.template(checkbox_template),
 
     initialize: function(opts) {
         // This View may apply to a single PanelModel or a list
@@ -37,6 +39,7 @@ var ChannelSliderView = Backbone.View.extend({
         "change .ch_slider input": "channel_slider_stop",
         "mousemove .ch_start_slider": "start_slider_mousemove",
         "mousemove .ch_end_slider": "end_slider_mousemove",
+        "change #hiloCheckbox": "handle_hilo_checkbox",
     },
 
     start_slider_mousemove: function(event) {
@@ -268,6 +271,48 @@ var ChannelSliderView = Backbone.View.extend({
         return this;
     },
 
+    handle_hilo_checkbox: function(event) {
+        var checkboxState = event.target.checked;
+        this.models.forEach(function(m) {
+            if (checkboxState && !m.get("hilo_enabled")){
+                m.save({
+                    "hilo_enabled": true,
+                    "hilo_channels_state": m.get('channels').map(function(channel) {
+                        return {
+                            "color": channel.color,
+                            "active": channel.active
+                        };
+                    })
+                });
+                let foundActive = false;
+                let newChs = m.get('channels').map(function(channel, idx) {
+                    // Switch LUT to HiLo for all channels
+                    // Keep only the first active channel active
+                    let new_state = {
+                        'color': 'hilo.lut',
+                        'active': (!foundActive && channel.active)
+                    }
+                    foundActive = (foundActive || channel.active);
+                    return new_state;
+                });
+                m.save_channels(newChs);
+            } else if (!checkboxState && m.get("hilo_enabled")){
+                m.save("hilo_enabled", false);
+                let newChs = m.get('channels').map(function(channel, idx) {
+                    return m.get("hilo_channels_state")[idx];
+                });
+                m.save_channels(newChs);
+            }
+        })
+    },
+
+    loadCheckboxState: function() {
+        var checkbox = this.$("#hiloCheckbox")[0];
+        this.models.forEach(function(m) {
+            checkbox.checked = m.get('hilo_enabled') || checkbox.checked;
+        });
+    },
+
     render: function() {
         var json,
             self = this;
@@ -310,7 +355,6 @@ var ChannelSliderView = Backbone.View.extend({
                     return fn(prev, curr);
                 }
             }
-
             // Comare channels from each Panel Model to see if they are
             // compatible, and compile a summary json.
             var chData = this.models.map(function(m){
@@ -320,13 +364,11 @@ var ChannelSliderView = Backbone.View.extend({
             var allSameCount = chData.reduce(function(prev, channels){
                 return channels.length === prev ? prev : false;
             }, chData[0].length);
-
             if (!allSameCount) {
                 return this;
             }
             // $(".ch_slider").slider("destroy");
             this.$el.empty();
-
             chData[0].forEach(function(d, chIdx) {
                 // For each channel, summarise all selected images:
                 // Make list of various channel attributes:
@@ -391,6 +433,11 @@ var ChannelSliderView = Backbone.View.extend({
                 $(sliderHtml).appendTo(this.$el);
 
             }.bind(this));
+            // Append the checkbox template
+            var checkboxHtml = this.checkboxTemplate();
+            this.$el.append(checkboxHtml);
+            // Load checkbox state after rendering
+            this.loadCheckboxState();
         return this;
     }
 });

src/templates/checkbox_template.html

@@ -0,0 +1,4 @@
+<div class="checkbox-container" title="Toggle Hilo LUT mode on channels">
+    <input type="checkbox" id="hiloCheckbox" name="hiloCheckbox">
+    <label for="hiloCheckbox">  Hilo LUT</label>
+</div>