Clean up default track color implementation

igvteam · Nov 21, 2024 · 45591c1 · 45591c1
1 parent 3737306
commit 45591c1
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 29 deletions.
diff --git a/js/feature/featureTrack.js b/js/feature/featureTrack.js
@@ -13,11 +13,10 @@ import {isSecureContext, expandRegion} from "../util/igvUtils.js"
 import {IGVColor} from "../../node_modules/igv-utils/src/index.js"
 import {findFeatureAfterCenter} from "./featureUtils.js"
 
-const DEFAULT_COLOR = 'rgb(0, 0, 150)'
-
-
 class FeatureTrack extends TrackBase {
 
+    static defaultColor = 'rgb(0,0,150)'
+
     static defaults = {
         type: "annotation",
         maxRows: 1000, // protects against pathological feature packing cases (# of rows of overlapping feaures)
@@ -509,7 +508,7 @@ class FeatureTrack extends TrackBase {
 
         // If no explicit setting use the default
         if (!color) {
-            color = DEFAULT_COLOR   // Track default
+            color = FeatureTrack.defaultColor   // Track default
         }
 
         if (feature.alpha && feature.alpha !== 1) {

diff --git a/js/feature/wigTrack.js b/js/feature/wigTrack.js
@@ -10,11 +10,10 @@ import {createCheckbox} from "../igv-icons.js"
 import {ColorScaleFactory} from "../util/colorScale.js"
 import ColorScaleEditor from "../ui/components/colorScaleEditor.js"
 
-const DEFAULT_COLOR = 'rgb(150, 150, 150)'
-
-
 class WigTrack extends TrackBase {
 
+    static defaultColor = 'rgb(150, 150, 150)'
+
     static defaults = {
         height: 50,
         flipAxis: false,
@@ -408,7 +407,7 @@ class WigTrack extends TrackBase {
      */
 
     getColorForFeature(f) {
-        let c = (f.value < 0 && this.altColor) ? this.altColor : this.color || DEFAULT_COLOR
+        let c = (f.value < 0 && this.altColor) ? this.altColor : this.color || WigTrack.defaultColor
         return (typeof c === "function") ? c(f.value) : c
     }
 

diff --git a/js/trackBase.js b/js/trackBase.js
@@ -28,9 +28,6 @@ import {FeatureUtils, FileUtils, StringUtils} from "../node_modules/igv-utils/sr
 import $ from "./vendor/jquery-3.3.1.slim.js"
 import {createCheckbox} from "./igv-icons.js"
 import {findFeatureAfterCenter} from "./feature/featureUtils.js"
-import ColorScaleEditor from "./ui/components/colorScaleEditor.js"
-
-const DEFAULT_COLOR = 'rgb(150,150,150)'
 
 const fixColor = (colorString) => {
     if (StringUtils.isString(colorString)) {

diff --git a/js/trackView.js b/js/trackView.js
@@ -274,7 +274,8 @@ class TrackView {
                     };
             }
 
-            this.browser.genericColorPicker.configure(initialTrackColor, this.browser.previousTrackColors, colorHandlers[colorSelection])
+            const moreColorsPresentationColor = 'color' === colorSelection ? (this.track.color || this.track.constructor.defaultColor) : this.track.altColor
+            this.browser.genericColorPicker.configure(initialTrackColor, this.browser.previousTrackColors, colorHandlers[colorSelection], moreColorsPresentationColor)
             this.browser.genericColorPicker.show()
 
         }

diff --git a/js/ui/components/genericColorPicker.js b/js/ui/components/genericColorPicker.js
@@ -33,7 +33,7 @@ class GenericColorPicker extends GenericContainer {
 
     }
 
-    configure(initialTrackColor, previousTrackColors, colorHandler) {
+    configure(initialTrackColor, previousTrackColors, colorHandler, moreColorsPresentationColor) {
 
         this.colorSwatchContainer.innerHTML = ''
 
@@ -61,7 +61,7 @@ class GenericColorPicker extends GenericContainer {
         }
 
         // Present MoreColors picker
-        this.decorateMoreColorsButton(this.moreColorsContainer, previousTrackColors, colorHandler)
+        this.decorateMoreColorsButton(this.moreColorsContainer, previousTrackColors, colorHandler, moreColorsPresentationColor)
 
     }
 
@@ -81,13 +81,13 @@ class GenericColorPicker extends GenericContainer {
 
     }
 
-    decorateMoreColorsButton(moreColorsContainer, previousTrackColors, colorHandler) {
+    decorateMoreColorsButton(moreColorsContainer, previousTrackColors, colorHandler, moreColorsPresentationColor) {
 
         moreColorsContainer.innerText = 'More Colors ...'
 
         moreColorsContainer.addEventListener('click', event => {
             event.stopPropagation()
-            this.createAndPresentMoreColorsPicker(moreColorsContainer, previousTrackColors, hexColorString => {
+            this.createAndPresentMoreColorsPicker(moreColorsContainer, previousTrackColors, moreColorsPresentationColor, hexColorString => {
                 colorHandler(hexColorString)
             })
         })
@@ -105,7 +105,7 @@ class GenericColorPicker extends GenericContainer {
         this.decorateSwatch(swatch, hexColorString, colorHandler)
     }
 
-    createAndPresentMoreColorsPicker(moreColorsContainer, previousTrackColors, colorHandler) {
+    createAndPresentMoreColorsPicker(moreColorsContainer, previousTrackColors, moreColorsPresentationColor, colorHandler) {
 
         let picker
 
@@ -133,21 +133,15 @@ class GenericColorPicker extends GenericContainer {
                 editor: false,
                 editorFormat: 'rgb',
                 alpha: false,
-                color: moreColorsContainer.style.backgroundColor,
+                // color: moreColorsContainer.style.backgroundColor,
+                color: moreColorsPresentationColor,
             }
 
         picker = new Picker(config)
 
-        picker.onChange = (color) => {
-            moreColorsContainer.style.backgroundColor = color.rgba
+        picker.onChange = color => moreColorsContainer.style.backgroundColor = color.rgba
 
-            // Remove alpha from hex color string
-            const hexColorString = color.hex.substring(0,7)
-
-            colorHandler(hexColorString)
-        };
-
-        picker.onDone = (color) => {
+        picker.onDone = color => {
 
             // Remove alpha from hex color string
             const hexColorString = color.hex.substring(0,7)

diff --git a/js/variant/variantTrack.js b/js/variant/variantTrack.js
@@ -38,12 +38,13 @@ import {doSortByAttributes} from "../sample/sampleUtils.js"
 
 const isString = StringUtils.isString
 
-const DEFAULT_COLOR = "rgb(0,0,150)"
 const DEFAULT_VISIBILITY_WINDOW = 1000000
 const TOP_MARGIN = 10
 
 class VariantTrack extends TrackBase {
 
+    static defaultColor = 'rgb(0,0,150)'
+
     static defaults = {
         displayMode: "EXPANDED",
         sortDirection: "ASC",
@@ -175,7 +176,7 @@ class VariantTrack extends TrackBase {
     }
 
     get color() {
-        return this._color || DEFAULT_COLOR
+        return this._color || VariantTrack.defaultColor
     }
 
     set color(c) {