From cfe6510bb31e0a414713e97caba5fe3eea551cc8 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 28 Nov 2023 14:07:47 -0500
Subject: [PATCH] Ensure that no color can be assigned twice (even if regex
 matched)

---
 .../web_client/vue/components/CompositeLayers.vue           | 3 +--
 .../web_client/vue/components/FrameSelector.vue             | 6 ++++--
 girder/girder_large_image/web_client/vue/utils/colors.js    | 5 +++--
 3 files changed, 8 insertions(+), 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
index 7c91c6277..1f2e9c5eb 100644
--- 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
index afebafaa4..bad1c4a60 100644
--- 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
index 91487094a..1d3937251 100644
--- 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;
         }
     }