Reduce ColorPicker palette.

css/_igv-ui-colorpicker.scss

@@ -74,7 +74,8 @@ $igv-color-swatch-border-width: 2px;
   justify-content: center;
   align-items: center;
 
-  width: calc(3 * #{$igv-color-swatch-size});
+  //width: calc(3 * #{$igv-color-swatch-size});
+  width: 104px;
   height: $igv-color-swatch-size;
 
   font-family: $igv-default-font-face;

css/igv.scss

@@ -91,9 +91,9 @@ $igv-trackgear-default-font-face: 'Open Sans', sans-serif;
 @import "igv-ui-dropdown";
 @import "igv-ui-popover";
 @import "igv-ui-alert-dialog";
-@import "igv-ui-colorpicker";
 @import "igv-ui-generic-dialog-container";
 @import "igv-ui-generic-container";
+@import "igv-ui-colorpicker";
 @import "igv-ui-dialog";
 @import "igv-ui-panel";
 @import "igv-ui-textbox";

js/browser.js

@@ -233,7 +233,7 @@ class Browser {
         this.dataRangeDialog = new DataRangeDialog(this, $(this.root))
         this.dataRangeDialog.$container.get(0).id = `igv-data-range-dialog-${DOMUtils.guid()}`
 
-        this.genericColorPicker = new GenericColorPicker({parent: this.columnContainer, width: 432})
+        this.genericColorPicker = new GenericColorPicker({ parent: this.columnContainer, width: 180 })
         this.genericColorPicker.container.id = `igv-track-color-picker-${DOMUtils.guid()}`
 
         this.sliderDialog = new SliderDialog(this.root)

js/ui/components/genericColorPicker.js

@@ -1,7 +1,7 @@
 import * as DOMUtils from "../utils/dom-utils.js"
 import Picker from "../../../node_modules/vanilla-picker/dist/vanilla-picker.csp.mjs"
 import GenericContainer from '../genericContainer.js'
-import {appleCrayonPalette} from "../utils/colorPalettes.js"
+import {genericColorPickerPalette} from "../../util/colorPalletes.js"
 
 class GenericColorPicker extends GenericContainer {
 
@@ -28,17 +28,16 @@ class GenericColorPicker extends GenericContainer {
 
         this.container.querySelectorAll('.igv-ui-color-swatch, .igv-ui-color-more-colors').forEach(swatch => swatch.remove())
 
-        const entries = Object.entries(appleCrayonPalette).filter(([ key, value ]) => key !== 'snow')
-        const hexColorStrings = entries.map(([ key, value ]) => value)
+        const hexColorStrings = Object.values(genericColorPickerPalette)
 
-        for (let hexColorString of hexColorStrings) {
+        for (const hexColorString of hexColorStrings) {
             const swatch = DOMUtils.div({class: 'igv-ui-color-swatch'})
             this.container.appendChild(swatch)
             this.decorateSwatch(swatch, hexColorString)
         }
 
         if (defaultColors) {
-            for (let hexColorString of defaultColors) {
+            for (const hexColorString of defaultColors) {
                 const swatch = DOMUtils.div({class: 'igv-ui-color-swatch'})
                 this.container.appendChild(swatch)
                 this.decorateSwatch(swatch, hexColorString)

js/util/colorPalletes.js

@@ -22,6 +22,35 @@ function hexToRGB(hex) {
     return `rgb(${r}, ${g}, ${b})`;
 }
 
+const genericColorPickerPalette =
+    {
+        licorice: "#000000",
+        steel: "#6e6e6e",
+        magnesium: "#b8b8b8",
+        mercury: "#e8e8e8",
+        cayenne: "#891100",
+        mocha: "#894800",
+        aspargus: "#888501",
+        fern: "#458401",
+        teal: "#008688",
+        salmon: "#ff726e",
+        tangerine: "#ff8802",
+        cantaloupe: "#ffce6e",
+        lemon: "#fffa03",
+        lime: "#83f902",
+        honeydew: "#cefa6e",
+        ice: "#68fdff",
+        aqua: "#008cff",
+        blueberry: "#002eff",
+        midnight: "#001888",
+        grape: "#8931ff",
+        lavender: "#d278ff",
+        orchid: "#6e76ff",
+        strawberry: "#ff2987",
+        magenta: "#ff39ff",
+        carnation: "#ff7fd3"
+    }
+
 const appleCrayonPalette =
     {
         licorice: "#000000",
@@ -526,6 +555,7 @@ export {
     colorPalettes,
     appleCrayonRGB,
     appleCrayonRGBA,
+    genericColorPickerPalette,
     appleCrayonPalette,
     isValidColorName,
     getColorNameRGBString,