kinda there

taxonium_component/src/Deck.jsx

@@ -20,6 +20,7 @@ import { TreenomeButtons } from "./components/TreenomeButtons";
 import TreenomeModal from "./components/TreenomeModal";
 import FirefoxWarning from "./components/FirefoxWarning";
 import { JBrowseErrorBoundary } from "./components/JBrowseErrorBoundary";
+import ColorSettingModal from "./components/ColorSettingModal";
 import Key from "./components/Key";
 
 const MemoizedKey = React.memo(Key);
@@ -42,10 +43,13 @@ function Deck({
   isCurrentlyOutsideBounds,
   deckRef,
   jbrowseRef,
+  setAdditionalColorMapping
 }) {
   const zoomReset = view.zoomReset;
   const snapshot = useSnapshot(deckRef);
   const [deckSettingsOpen, setDeckSettingsOpen] = useState(false);
+  const [colorSettingOpen, setColorSettingOpen] = useState(false);
+  const [currentColorSettingKey, setCurrentColorSettingKey] = useState("a");
   const [treenomeSettingsOpen, setTreenomeSettingsOpen] = useState(false);
 
   //console.log("DATA is ", data);
@@ -74,6 +78,8 @@ function Deck({
 
   const mouseDownPos = useRef();
 
+
+
   const onClickOrMouseMove = useCallback(
     (event) => {
       if (event.buttons === 0 && event._reactName === "onPointerMove") {
@@ -255,6 +261,24 @@ function Deck({
         setDeckSettingsOpen={setDeckSettingsOpen}
         settings={settings}
       />
+      <ColorSettingModal
+        isOpen={colorSettingOpen}
+        setIsOpen={setColorSettingOpen}
+        color = {colorHook.toRGB(currentColorSettingKey)}
+        setColor = { 
+
+          (color) => {
+            setAdditionalColorMapping(x => {
+              return {...x, [currentColorSettingKey]: color};
+            });
+          }
+
+        }
+        title = {currentColorSettingKey}
+      />
+
+
+
       <DeckGL
         pickingRadius={10}
         //getCursor={() => hoverInfo && hoverInfo.object ? "default" : "pointer"}
@@ -338,6 +362,9 @@ function Deck({
             colorByGene={colorBy.colorByGene}
             colorByPosition={colorBy.colorByPosition}
             config={config}
+            setCurrentColorSettingKey={setCurrentColorSettingKey}
+            setColorSettingOpen={setColorSettingOpen}
+
           />
           <DeckButtons
             zoomReset={zoomReset}

taxonium_component/src/Taxonium.jsx

@@ -96,9 +96,11 @@ function Taxonium({
     configUrl
   );
   const colorBy = useColorBy(config, query, updateQuery);
+  const [additionalColorMapping, setAdditionalColorMapping] = useState({});
   const colorMapping = useMemo(() => {
-    return config.colorMapping ? config.colorMapping : {};
-  }, [config.colorMapping]);
+    const initial =  config.colorMapping ? config.colorMapping : {};
+    return { ...initial, ...additionalColorMapping };
+  }, [config.colorMapping, additionalColorMapping]);
   const colorHook = useColor(colorMapping);
 
   //TODO: this is always true for now
@@ -193,6 +195,7 @@ function Taxonium({
             treenomeState={treenomeState}
             deckRef={deckRef}
             jbrowseRef={jbrowseRef}
+            setAdditionalColorMapping={setAdditionalColorMapping}
           />
         </div>
 

taxonium_component/src/components/ColorSettingModal.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import Modal from "react-modal";
+import ColorPicker from "./ColorPicker";
+
+const modalStyle = {
+  content: {
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    backgroundColor: "#fafafa",
+    border: '1px solid #e2e8f0',
+    borderRadius: '8px',
+    padding: '20px',
+    maxWidth: '400px',
+  },
+};
+
+const ColorSettingModal = ({ isOpen, setIsOpen, color, setColor, title }) => {
+  return (
+    <Modal
+      isOpen={isOpen}
+      style={modalStyle}
+      onRequestClose={() => setIsOpen(false)}
+      contentLabel={title}
+    >
+      <h2 className="font-medium mb-5 text-lg">{title}</h2>
+
+      <div className="space-y-3">
+        <div>
+          <label>
+            Select Color: 
+            <ColorPicker
+              color={color}
+              setColor={setColor}
+            />
+          </label>
+        </div>
+      </div>
+
+    </Modal>
+  );
+};
+
+export default ColorSettingModal;

taxonium_component/src/components/Key.jsx

@@ -7,6 +7,10 @@ const Key = ({
   colorByGene,
   colorByPosition,
   config,
+  setCurrentColorSettingKey,
+  setColorSettingOpen
+
+
 }) => {
   const numLegendEntries = 10;
   const [collapsed, setCollapsed] = useState(window.innerWidth < 800);
@@ -51,19 +55,27 @@ const Key = ({
             const rgb = item.color;
             const color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
             return (
-              // small dot with color
               <div
-                className="key-text text-xs text-gray-700 mt-0.5  break-all"
+                className="key-text text-xs text-gray-700 mt-0.5 break-all cursor-pointer"
                 key={index}
+                onClick={() => 
+                  {
+                    setCurrentColorSettingKey(item.value);
+                    setColorSettingOpen(true);
+                  }
+
+                }
+                title="Edit color"
               >
                 <div
                   style={{ backgroundColor: color }}
-                  className="w-2 h-2 mr-2 rounded-full inline-block"
+                  className="circle w-2 h-2 mr-2 rounded-full inline-block transform transition-transform hover:scale-150"
                 />
                 {item.value}
               </div>
             );
           })}
+
           {isTruncated && <div className="text-xs text-gray-700">...</div>}
         </>
       )}

taxonium_component/src/hooks/useColor.jsx

@@ -140,7 +140,7 @@ const useColor = (colorMapping) => {
 
   const toRGB = useCallback(
     (string) => {
-      if (rgb_cache[string]) {
+      if (rgb_cache[string]&& !colorMapping[string]) {
         return rgb_cache[string];
       } else {
         const result = toRGB_uncached(string);