Merge pull request #667 from PaulHax/more-seg-colors

feat(segmentGroups): add more default segment colors
Kitware · Oct 24, 2024 · 0c2272d · 0c2272d
2 parents 41a6c37 + c5e5a73
commit 0c2272d
Show file tree

Hide file tree

Showing 2 changed files with 222 additions and 26 deletions.
diff --git a/src/config.ts b/src/config.ts
@@ -179,27 +179,6 @@ export const Layouts: Record<string, Layout> = [
   return { ...layouts, [layout.name]: layout };
 }, {});
 
-export const DEFAULT_SEGMENT_MASKS: SegmentMask[] = [
-  {
-    value: 1,
-    name: 'Tissue',
-    color: [255, 0, 0, 255],
-    visible: true,
-  },
-  {
-    value: 2,
-    name: 'Liver',
-    color: [0, 255, 0, 255],
-    visible: true,
-  },
-  {
-    value: 3,
-    name: 'Heart',
-    color: [0, 0, 255, 255],
-    visible: true,
-  },
-];
-
 export const SAMPLE_DATA: SampleDataset[] = [
   {
     name: 'CTA Head and Neck',
@@ -307,3 +286,220 @@ export const ACTION_TO_KEY = {
 
   showKeyboardShortcuts: '?',
 } satisfies Record<Action, string>;
+
+export const DEFAULT_SEGMENT_MASKS: SegmentMask[] = [
+  {
+    value: 1,
+    name: 'Tissue',
+    color: [255, 0, 0, 255],
+    visible: true,
+  },
+  {
+    value: 2,
+    name: 'Liver',
+    color: [0, 255, 0, 255],
+    visible: true,
+  },
+  {
+    value: 3,
+    name: 'Heart',
+    color: [0, 0, 255, 255],
+    visible: true,
+  },
+];
+
+// from https://github.com/InsightSoftwareConsortium/itk-viewer-color-maps/blob/main/src/CategoricalColors.json
+export const CATEGORICAL_COLORS = [
+  [214, 0, 0],
+  [59, 255, 1],
+  [0, 0, 172],
+  [151, 255, 0],
+  [126, 209, 107],
+  [79, 255, 165],
+  [87, 59, 0],
+  [86, 89, 0],
+  [221, 0, 253],
+  [161, 117, 105],
+  [182, 255, 149],
+  [119, 191, 3],
+  [100, 84, 116],
+  [0, 0, 7],
+  [216, 253, 244],
+  [0, 75, 0],
+  [121, 0, 255],
+  [102, 237, 184],
+  [93, 126, 102],
+  [228, 255, 235],
+  [119, 165, 123],
+  [89, 0, 163],
+  [198, 0, 158],
+  [0, 156, 59],
+  [202, 195, 0],
+  [130, 151, 0],
+  [137, 130, 135],
+  [93, 54, 59],
+  [0, 0, 253],
+  [255, 189, 230],
+  [219, 109, 1],
+  [184, 181, 228],
+  [255, 47, 82],
+  [195, 102, 144],
+  [98, 31, 196],
+  [114, 3, 130],
+  [105, 230, 128],
+  [38, 144, 109],
+  [255, 77, 51],
+  [133, 163, 1],
+  [3, 202, 193],
+  [196, 196, 86],
+  [117, 87, 61],
+  [103, 66, 0],
+  [212, 218, 223],
+  [249, 255, 0],
+  [103, 175, 195],
+  [0, 225, 205],
+  [218, 149, 255],
+  [3, 253, 145],
+  [130, 160, 0],
+  [86, 154, 84],
+  [140, 142, 54],
+  [38, 151, 165],
+  [142, 140, 94],
+  [70, 0, 200],
+  [249, 174, 109],
+  [110, 207, 167],
+  [255, 140, 140],
+  [177, 119, 54],
+  [255, 160, 121],
+  [0, 31, 255],
+  [68, 94, 17],
+  [103, 151, 147],
+  [94, 147, 75],
+  [116, 82, 145],
+  [170, 112, 49],
+  [207, 253, 0],
+  [107, 96, 52],
+  [144, 212, 47],
+  [212, 124, 80],
+  [161, 77, 35],
+  [124, 89, 0],
+  [205, 68, 130],
+  [207, 77, 253],
+  [137, 0, 61],
+  [82, 91, 0],
+  [156, 170, 130],
+  [128, 112, 142],
+  [100, 253, 195],
+  [137, 205, 40],
+  [255, 154, 181],
+  [93, 186, 33],
+  [1, 0, 142],
+  [98, 128, 35],
+  [135, 191, 151],
+  [212, 205, 126],
+  [209, 182, 91],
+  [0, 110, 153],
+  [68, 175, 198],
+  [242, 255, 209],
+  [235, 1, 205],
+  [188, 68, 0],
+  [121, 156, 126],
+  [112, 70, 147],
+  [186, 0, 84],
+  [172, 147, 235],
+  [163, 22, 94],
+  [128, 0, 75],
+  [124, 184, 211],
+  [42, 0, 56],
+  [100, 184, 0],
+  [255, 128, 61],
+  [209, 232, 128],
+  [89, 33, 52],
+  [161, 93, 110],
+  [181, 175, 158],
+  [70, 51, 124],
+  [193, 65, 0],
+  [232, 61, 107],
+  [232, 117, 188],
+  [165, 196, 168],
+  [84, 110, 216],
+  [56, 251, 124],
+  [75, 100, 73],
+  [195, 235, 121],
+  [54, 75, 142],
+  [70, 135, 255],
+  [0, 195, 233],
+  [212, 255, 188],
+  [70, 72, 0],
+  [198, 255, 144],
+  [233, 79, 105],
+  [230, 93, 177],
+  [144, 175, 87],
+  [42, 175, 93],
+  [133, 109, 225],
+  [110, 114, 228],
+  [226, 184, 182],
+  [56, 45, 0],
+  [126, 163, 172],
+  [47, 168, 186],
+  [105, 181, 130],
+  [209, 144, 175],
+  [70, 7, 94],
+  [0, 151, 137],
+  [15, 1, 91],
+  [128, 47, 87],
+  [228, 100, 59],
+  [63, 40, 114],
+  [188, 75, 82],
+  [200, 121, 221],
+  [49, 144, 200],
+  [242, 5, 170],
+  [167, 107, 154],
+  [175, 0, 96],
+  [98, 242, 221],
+  [119, 68, 1],
+  [36, 65, 103],
+  [202, 121, 158],
+  [12, 232, 161],
+  [247, 219, 131],
+  [117, 142, 109],
+  [226, 65, 47],
+  [73, 107, 121],
+  [133, 255, 207],
+  [75, 93, 198],
+  [179, 145, 255],
+  [237, 214, 239],
+  [191, 96, 38],
+  [163, 181, 188],
+  [0, 135, 110],
+  [255, 47, 161],
+  [232, 175, 51],
+  [75, 184, 140],
+  [107, 135, 82],
+  [147, 209, 26],
+  [253, 161, 59],
+  [163, 80, 168],
+  [0, 151, 137],
+  [123, 89, 87],
+  [249, 142, 138],
+  [214, 124, 112],
+  [1, 24, 89],
+  [22, 38, 255],
+  [216, 86, 247],
+  [253, 121, 149],
+  [177, 167, 212],
+  [207, 221, 0],
+  [175, 121, 70],
+  [218, 255, 230],
+  [5, 177, 242],
+  [255, 163, 228],
+  [137, 19, 35],
+  [103, 130, 232],
+  [112, 216, 170],
+  [223, 186, 212],
+  [82, 105, 117],
+  [154, 151, 51],
+  [228, 114, 126],
+  [89, 38, 119],
+  [105, 47, 61],
+];
diff --git a/src/store/segmentGroups.ts b/src/store/segmentGroups.ts
@@ -10,7 +10,7 @@ import { useIdStore } from '@/src/store/id';
 import { onImageDeleted } from '@/src/composables/onImageDeleted';
 import { normalizeForStore, removeFromArray } from '@/src/utils';
 import { SegmentMask } from '@/src/types/segment';
-import { DEFAULT_SEGMENT_MASKS } from '@/src/config';
+import { DEFAULT_SEGMENT_MASKS, CATEGORICAL_COLORS } from '@/src/config';
 import { readImage, writeImage } from '@/src/io/readWriteImage';
 import {
   type DataSelection,
@@ -203,11 +203,11 @@ export const useSegmentGroupStore = defineStore('segmentGroup', () => {
     delete metadataByID[id];
   }
 
-  let lastColorIndex = 0;
+  let nextColorIndex = 0;
   function getNextColor() {
-    const color = DEFAULT_SEGMENT_MASKS[lastColorIndex].color;
-    lastColorIndex = (lastColorIndex + 1) % DEFAULT_SEGMENT_MASKS.length;
-    return [...color];
+    const color = CATEGORICAL_COLORS[nextColorIndex];
+    nextColorIndex = (nextColorIndex + 1) % CATEGORICAL_COLORS.length;
+    return [...color, 255];
   }
 
   async function decodeSegments(imageId: DataSelection, image: vtkLabelMap) {