Merge pull request #1387 from girder/frame-selector-color-assignment

Frame Selector component: ensure that no color can be assigned twice
girder · Nov 29, 2023 · 9a43c4e · 9a43c4e
2 parents 57a42f8 + 2bba897
commit 9a43c4e
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -121,10 +121,9 @@ export default {
             // Assign colors
             this.layers.forEach((layerName) => {
                 if (!this.compositeLayerInfo[layerName].palette) {
-                    const channelColor = getChannelColor(layerName);
+                    const channelColor = getChannelColor(layerName, usedColors);
                     if (channelColor) {
                         this.compositeLayerInfo[layerName].palette = channelColor;
-                        usedColors.push(channelColor);
                     }
                 }
             });

diff --git a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
@@ -1,7 +1,7 @@
 <script>
 import Vue from 'vue';
 
-import {getChannelColor} from '../utils/colors';
+import {getChannelColor, OTHER_COLORS} from '../utils/colors';
 
 import CompositeLayers from './CompositeLayers.vue';
 import DualInput from './DualInput.vue';
@@ -158,8 +158,10 @@ export default Vue.extend({
                 } else {
                     // no style applied yet, create new permutations list
                     const {bands} = this.metadata;
+                    const usedColors = [];
                     bands.forEach((b, i) => {
-                        const bandPalette = getChannelColor(b);
+                        let bandPalette = getChannelColor(b, usedColors);
+                        if (!bandPalette) bandPalette = OTHER_COLORS.find((c) => !usedColors.includes(c));
                         frameDeltas.forEach((framedelta) => {
                             newBandsArray.push({
                                 band: i + 1,

diff --git a/girder/girder_large_image/web_client/vue/utils/colors.js b/girder/girder_large_image/web_client/vue/utils/colors.js
@@ -12,10 +12,11 @@ export const CHANNEL_COLORS = {
     '^gr[ae]y(|scale)$': '#FFFFFF'
 };
 
-export function getChannelColor(name) {
+export function getChannelColor(name, usedColors) {
     // Search for case-insensitive regex match among known channel-colors
     for (const [channelPattern, color] of Object.entries(CHANNEL_COLORS)) {
-        if (name.match(new RegExp(channelPattern, 'i'))) {
+        if (!usedColors.includes(color) && name.match(new RegExp(channelPattern, 'i'))) {
+            usedColors.push(color);
             return color;
         }
     }