Remove APP_SERVED_BY_OMERO and Luts display logic

will-moore · will-moore · commit 3d98353ec68c · 2026-01-22T11:09:41.000Z
diff --git a/omero_figure/views.py b/omero_figure/views.py
@@ -113,8 +113,6 @@ def index(request, file_id=None, conn=None, **kwargs):
     # Load the template html and replace OMEROWEB_INDEX
     template = loader.get_template("omero_figure/index.html")
     html = template.render({}, request)
-    html = html.replace('const APP_SERVED_BY_OMERO = false;',
-                        'const APP_SERVED_BY_OMERO = true;')
     omeroweb_index = reverse("index")
     figure_index = reverse("figure_index")
     ping_url = reverse("keepalive_ping")
diff --git a/src/css/figure.css b/src/css/figure.css
@@ -1037,7 +1037,7 @@
         text-align: left;
     }
 
-    .lutOption span, .lutOption img {
+    .lutOption span {
         width: 85px;
         display: inline-block;
     }
@@ -1052,7 +1052,6 @@
         /* NB: when updating png, consider using different name to avoid cache */
         background-size: 100% var(--pngHeight);
         background-image: var(--lutPng);
-        background-position: var(--bgPos);
         background-repeat: no-repeat;
         image-rendering: pixelated;  /* Universal support since 2021 */
     }
diff --git a/src/index.html b/src/index.html
@@ -8,8 +8,6 @@
       // For dev, use this server to load/save figures (needs CORS enabled)
       const dev_omeroweb_url = "http://localhost:4080/";
       // These are updated by views.py when serving this page...
-      // Flag for knowing if app is served from OMERO (or standalone)
-      const APP_SERVED_BY_OMERO = false;
       const BASE_OMEROWEB_URL = dev_omeroweb_url;
       const EXPORT_ENABLED = false;
       const SCRIPT_VERSION = "";
diff --git a/src/js/views/channel_slider_view.js b/src/js/views/channel_slider_view.js
@@ -401,17 +401,10 @@ var ChannelSliderView = Backbone.View.extend({
                 var active = actives.reduce(allEqualFn, actives[0]);
                 var style = {'background-position': '0 0'}
                 var lutBgPos = FigureLutPicker.getLutBackgroundPosition(color);
-                var lutPng = FigureLutPicker.getLutPng(color);
-                console.log("lutPng", lutPng);
-                var lutBgCss = '--bgPos: 0 0;';
-                if (color.endsWith('.lut') && lutPng) {
-                    // lutPng means we have LUT from ome-zarr.js. Apply without offset
-                    lutBgCss = `--bgPos: 0 0; --lutPng: url('${lutPng}'); --pngHeight: 100%;`;
+                if (color.endsWith('.lut')) {
+                    style['background-position'] = lutBgPos;
                     color = "ccc";
-                } else {
-                    lutBgCss = `--bgPos: ${lutBgPos};`
-                }
-                if (color.toUpperCase() === "FFFFFF") {
+                } else if (color.toUpperCase() === "FFFFFF") {
                     color = "ccc";  // white slider would be invisible
                 }
                 if (color == "FFFFFF") color = "ccc";  // white slider would be invisible
@@ -430,7 +423,7 @@ var ChannelSliderView = Backbone.View.extend({
                                                 'max': max,
                                                 'step': (max - min > SLIDER_INCR_CUTOFF) ? 1 : 0.01,
                                                 'active': active,
-                                                'lutBgCss': lutBgCss,
+                                                'lutBgPos': lutBgPos,
                                                 'reverse': reverse,
                                                 'color': color,
                                                 'isDark': this.isDark(color)
diff --git a/src/js/views/lutpicker.js b/src/js/views/lutpicker.js
@@ -21,7 +21,6 @@ import Backbone from "backbone";
 import $ from "jquery";
 import _ from 'underscore';
 import * as bootstrap from "bootstrap"
-import * as omezarr from "ome-zarr.js";
 
 import lut_picker_template from '../../templates/lut_picker.template.html?raw';
 import { showModal, getJson } from "./util";
@@ -39,10 +38,6 @@ var LutPickerView = Backbone.View.extend({
     initialize:function () {
         this.lutModal = new bootstrap.Modal('#lutpickerModal');
         this.lut_names = [];
-    
-        // These will be overwritten with LUTs from OMERO if served by OMERO
-        this.luts = omezarr.getLuts();
-
         this.loadLuts();
     },
 
@@ -63,24 +58,13 @@ var LutPickerView = Backbone.View.extend({
         this.pickedLut = lutName;
 
         // Update preview to show LUT
-        var lut = this.luts.find(lut => lut.name == lutName);
-        if (lut.png) {
-            $(".lutPreview", this.el).css({'background-position': '0 0', 'background-image': "url('" + lut.png + "')", 'background-size': '100% 100%'});
-        } else {
-            var bgPos = this.getLutBackgroundPosition(lutName);
-            $(".lutPreview", this.el).css({'background-position': bgPos, 'background-image': `url(${this.lutsPngUrl})`});
-        }
+        var bgPos = this.getLutBackgroundPosition(lutName);
+        $(".lutPreview", this.el).css({'background-position': bgPos, 'background-image': `url(${this.lutsPngUrl})`});
         // Enable OK button
         $("button[type='submit']", this.el).removeAttr('disabled');
     },
 
     loadLuts: async function(force_reload = false) {
-        if (!APP_SERVED_BY_OMERO) {
-            $(":root").css({
-                "--pngHeight": "100%"
-            });
-            return;
-        }
         var url = WEBGATEWAYINDEX + 'luts/';
         let cors_headers = { mode: 'cors', credentials: 'include' };
         if (force_reload || this.lut_names === undefined || this.lutsPngUrl === undefined || this.luts === undefined) {
@@ -116,14 +100,6 @@ var LutPickerView = Backbone.View.extend({
         return this.lutsPngUrl
     },
 
-    getLutPng(lutName) {
-        // This will return undefined if the LUTs are loaded from OMERO
-        var lut = this.luts.find(lut => lut.name == lutName);
-        if (lut && lut.png) {
-            return lut.png;
-        }
-    },
-
     getLutBackgroundPosition: function(lutName) {
         var lutIndex = this.lut_names.indexOf(lutName);
         if (lutIndex > -1) {
@@ -149,7 +125,8 @@ var LutPickerView = Backbone.View.extend({
         if (options.success) {
             this.success = options.success;
         }
-        this.render();
+
+        this.loadLuts().then(() => this.render());
     },
 
     render:function() {
@@ -163,7 +140,6 @@ var LutPickerView = Backbone.View.extend({
                 // Add css background-position to each lut to offset luts_10.png
                 return {'bgPos': this.getLutBackgroundPosition(lut.name),
                         'name': lut.name,
-                        'png': lut.png,    // if LUT is from omezarr.js, we have png in hand
                         'displayName': this.formatLutName(lut.name)};
             }.bind(this));
 
@@ -175,4 +151,4 @@ var LutPickerView = Backbone.View.extend({
 
 const FigureLutPicker = new LutPickerView();
 
-export default FigureLutPicker;
+export default FigureLutPicker
diff --git a/src/templates/channel_slider.template.html b/src/templates/channel_slider.template.html
@@ -7,7 +7,7 @@
             title="<%= _.escape(label) %>"
                     class="btn btn-default channel-btn lutBg <% if (isDark) { print('font-white') } %>"
                     data-index="<%= idx %>"
-                    style="background-color:#<%= color %>; <%= lutBgCss %>">
+                    style="background-color:#<%= color %>; background-position: <%= lutBgPos %>;">
 
                     <%= _.escape(label) %>
                     <div class="<% if(active) { %>ch-btn-down<% } else if (typeof active == 'boolean') { %>ch-btn-up<% } else { %>ch-btn-flat<% }%>">&nbsp</div>
@@ -72,7 +72,7 @@
             min="<%= min %>" max="<%= max %>" step="<%= step %>"
             type="range" value="<%= startAvg %>"
             style="background-color:#<%=color%>;
-                <%= lutBgCss %>
+                --bgPos: <%= lutBgPos %>;
                 --scaleX: <%= reverse ? -1 : 1 %>"/>
         <!-- data-slidemin and data-slidemax used to prevent sliding start > end etc -->
         <input class="ch_end_slider" data-idx="<%=idx%>" data-slidemin="<%= startAvg %>"
diff --git a/src/templates/lut_picker.template.html b/src/templates/lut_picker.template.html
@@ -5,11 +5,7 @@
 	<% _.each(luts, function(lut, i) { %>
 
 		<button type="button" class="btn btn-default lutOption" data-lut="<%= lut.name %>">
-			<% if (lut.png) { %>
-				<img height="24px" src="<%= lut.png %>" />
-			<% } else { %>
-				<span class="lutBg" style="background-position: <%= lut.bgPos %>;">&nbsp</span>
-			<% } %>
+			<span class="lutBg" style="background-position: <%= lut.bgPos %>;">&nbsp</span>
 			<%= lut.displayName %> </button>
 
 		<% if (i === parseInt(luts.length/2)) { %>

Original file line number	Diff line number	Diff line change
`@@ -1037,7 +1037,7 @@`
`1037`	`1037`	`text-align: left;`
`1038`	`1038`	`}`
`1039`	`1039`
`1040`		`- .lutOption span, .lutOption img {`
	`1040`	`+ .lutOption span {`
`1041`	`1041`	`width: 85px;`
`1042`	`1042`	`display: inline-block;`
`1043`	`1043`	`}`
`@@ -1052,7 +1052,6 @@`
`1052`	`1052`	`/* NB: when updating png, consider using different name to avoid cache */`
`1053`	`1053`	`background-size: 100% var(--pngHeight);`
`1054`	`1054`	`background-image: var(--lutPng);`
`1055`		`- background-position: var(--bgPos);`
`1056`	`1055`	`background-repeat: no-repeat;`
`1057`	`1056`	`image-rendering: pixelated; /* Universal support since 2021 */`
`1058`	`1057`	`}`