diff --git a/dev/generic-test-harness.html b/dev/generic-test-harness.html
index b709181a5..829270af7 100644
--- a/dev/generic-test-harness.html
+++ b/dev/generic-test-harness.html
@@ -259,7 +259,7 @@
             ]
         };
 
-    igv.createBrowser(document.getElementById("igv-container"), config_offscreen_scroll).then(browser => {
+    igv.createBrowser(document.getElementById("igv-container"), config).then(browser => {
         console.log(`browser ${ browser.guid } is good to go`)
     });
 
diff --git a/dev/ui/example.html b/dev/ui/example.html
index 88c824557..c1eab32e6 100644
--- a/dev/ui/example.html
+++ b/dev/ui/example.html
@@ -23,14 +23,12 @@ <h1>UI classes demo</h1>
 </div>
 
 <script type="module">
-    import $ from "../../js/vendor/jquery-3.3.1.slim.js"
-
     import AlertDialog from "../../js/ui/components/alertDialog.js"
     import InputDialog from "../../js/ui/components/inputDialog.js"
     import SliderDialog from "../../js/ui/components/sliderDialog.js"
     import Popover from "../../js/ui/popover.js"
     import Dropdown from "../../js/ui/dropdown.js"
-    import ColorPicker from "../../js/ui/components/colorPicker.js"
+    import GenericColorPicker from "../../js/ui/components/genericColorPicker.js"
     import Panel from "../../js/ui/components/panel.js"
     import Textbox from "../../js/ui/components/textbox.js"
     import Dialog from "../../js/ui/components/dialog.js"
@@ -48,6 +46,8 @@ <h1>UI classes demo</h1>
 
     let popover
 
+    const dropdown = new Dropdown(parent, {top: 48, left: -48})
+
     const menuItems = [
         {
             label: "foo",
@@ -64,25 +64,34 @@ <h1>UI classes demo</h1>
         }
     ]
 
-    const dropdown = new Dropdown(parent, {top: 48, left: -48})
     dropdown.configure(menuItems)
 
+    const colorPickerConfig =
+        {
+            parent,
+            width: 364,
+        };
+
+    const colorPicker = new GenericColorPicker(colorPickerConfig)
 
-    const colorPicker = new ColorPicker({
-        parent: parent,
-        width: 364,
-        //defaultColor: 'aqua',
-        colorHandler: (color) => alertDialog.present("Color selected: " + color)
-    })
+    const colorHandlers =
+        {
+            color: rgbString => {
+                console.log(`color ${ rgbString }`)
+            },
+            altColor: rgbString => {
+                console.log(`altColor ${ rgbString }`)
+            },
+        };
+
+    colorPicker.configure('rgb(150,150,150)', colorHandlers['color'], 'rgb(150,150,150)')
+
+    document.getElementById("color-id").addEventListener("click", event => colorPicker.present(event))
 
     document.getElementById("alert-id").addEventListener("click", (ev => alertDialog.present("Alert")))
 
     document.getElementById("slider-id").addEventListener("click", (ev => {
 
-        const callback = value => {
-            console.log(`slider value ${value}`)
-        }
-
         const config =
             {
                 label: "Slider Label",
@@ -90,7 +99,7 @@ <h1>UI classes demo</h1>
                 min: 0,
                 max: 1,
                 scaleFactor: 1000,
-                callback
+                callback: value => console.log(`slider value ${value}`)
             }
 
         sliderDialog.present(config, ev)
@@ -100,9 +109,7 @@ <h1>UI classes demo</h1>
         inputDialog.present({
             label: "Enter a value",
             value: "foo",
-            callback: function (value) {
-                alertDialog.present("Value entered: " + value)
-            }
+            callback: value => alertDialog.present("Value entered: " + value)
         }, ev)
     }))
 
@@ -132,11 +139,7 @@ <h1>UI classes demo</h1>
         popover.present(event)
     })
 
-    document.getElementById("dropdown-id").addEventListener("click", event => {
-        dropdown.present(event)
-    })
-
-    document.getElementById("color-id").addEventListener("click", (ev) => colorPicker.show())
+    document.getElementById("dropdown-id").addEventListener("click", event => dropdown.present(event))
 
     let colorScale = new DivergingGradientScale({
         "type": "doubleGradient",
@@ -148,13 +151,7 @@ <h1>UI classes demo</h1>
         "highColor": "rgb(164,0,30)"
     })
 
-    document.getElementById("form-id").addEventListener("click", e => {
-
-
-        ColorScaleEditor.open(colorScale, parent, (cs) => colorScale = cs)
-
-    })
-
+    document.getElementById("form-id").addEventListener("click", e => ColorScaleEditor.open(colorScale, parent, (cs) => colorScale = cs))
 
 </script>
 
diff --git a/js/ui/components/colorPicker.js b/js/ui/components/colorPicker.js
deleted file mode 100644
index 5c0b4ef1f..000000000
--- a/js/ui/components/colorPicker.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import {appleCrayonPalette} from '../utils/colorPalettes.js'
-import * as DOMUtils from "../utils/dom-utils.js"
-import GenericContainer from "../genericContainer.js"
-
-
-class ColorPicker extends GenericContainer {
-
-    constructor({parent, top, left, width, height, defaultColors, colorHandler}) {
-
-        super({ parent, top, left, width, height, border: '1px solid gray'})
-
-        createColorSwatchSelector(this.container, colorHandler, defaultColors);
-    }
-
-}
-
-const createColorSwatchSelector = (container, colorHandler, defaultColors) => {
-
-    const hexColorStrings = Object.values(appleCrayonPalette);
-
-    for (let hexColorString of hexColorStrings) {
-        const swatch = DOMUtils.div({ class: 'igv-ui-color-swatch' });
-        container.appendChild(swatch);
-        decorateSwatch(swatch, hexColorString, colorHandler)
-    }
-
-    if (defaultColors) {
-        for (let hexColorString of defaultColors) {
-            const swatch = DOMUtils.div({ class: 'igv-ui-color-swatch' });
-            container.appendChild(swatch);
-            decorateSwatch(swatch, hexColorString, colorHandler)
-        }
-    }
-
-}
-
-const decorateSwatch = (swatch, hexColorString, colorHandler) => {
-
-    swatch.style.backgroundColor = hexColorString;
-
-    swatch.addEventListener('mouseenter', e => swatch.style.borderColor = hexColorString)
-
-    swatch.addEventListener('mouseleave', e => swatch.style.borderColor = 'white')
-
-    swatch.addEventListener('click', event => {
-        event.stopPropagation();
-        colorHandler(hexColorString);
-    })
-
-    swatch.addEventListener('touchend', event => {
-        event.stopPropagation();
-        colorHandler(hexColorString);
-    })
-
-}
-
-export { createColorSwatchSelector }
-export default ColorPicker
diff --git a/js/ui/components/genericColorPicker.js b/js/ui/components/genericColorPicker.js
index 73dc2e5fe..ccd68d378 100644
--- a/js/ui/components/genericColorPicker.js
+++ b/js/ui/components/genericColorPicker.js
@@ -1,6 +1,6 @@
 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 GenericContainer from './genericContainer.js'
 import {genericColorPickerPalette} from "../../util/colorPalletes.js"
 
 class GenericColorPicker extends GenericContainer {
diff --git a/js/ui/genericContainer.js b/js/ui/components/genericContainer.js
similarity index 89%
rename from js/ui/genericContainer.js
rename to js/ui/components/genericContainer.js
index fb0c0167f..42d4052a9 100644
--- a/js/ui/genericContainer.js
+++ b/js/ui/components/genericContainer.js
@@ -1,6 +1,6 @@
-import * as UIUtils from "./utils/ui-utils.js"
-import * as DOMUtils from "./utils/dom-utils.js"
-import makeDraggable from "./utils/draggable.js"
+import * as UIUtils from "../utils/ui-utils.js"
+import * as DOMUtils from "../utils/dom-utils.js"
+import makeDraggable from "../utils/draggable.js"
 
 
 class GenericContainer {
diff --git a/js/ui/popover.js b/js/ui/popover.js
index 50b291708..f38cea7af 100644
--- a/js/ui/popover.js
+++ b/js/ui/popover.js
@@ -1,7 +1,6 @@
 import * as Icon from './utils/icons.js'
 import * as DOMUtils from "./utils/dom-utils.js"
 import makeDraggable from "./utils/draggable.js"
-import ColorPicker from "./components/colorPicker.js"
 import {createIcon} from "./utils/icons.js"
 
 class Popover {