up

theosanderson · Sep 12, 2023 · 65ec682 · 65ec682
1 parent ee15a66
commit 65ec682
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 21 deletions.
diff --git a/taxonium_component/src/components/ColorPicker.jsx b/taxonium_component/src/components/ColorPicker.jsx
@@ -6,42 +6,75 @@ const rgbToList = (rgb) => {
 };
 const listToRgb = (list) => {
   const color = { r: list[0], g: list[1], b: list[2] };
-  console.log("COLOR", color);
   return color;
 };
 
 function ColorPicker({ color, setColor }) {
   const rgbColor = listToRgb(color);
-
   const [showPicker, setShowPicker] = useState(false);
 
   const togglePicker = () => {
     setShowPicker(!showPicker);
   };
 
+  const handleClose = () => {
+    setShowPicker(false);
+  };
+
   const handleColorChange = (newColor) => {
     setColor(rgbToList(newColor.rgb));
-    setShowPicker(false);
   };
-  if (showPicker)
+
+  if(!showPicker) {
     return (
-      <div className="block mt-2">
-        <SketchPicker color={rgbColor} onChange={handleColorChange} />
-      </div>
+        <div className="inline-block">
+          <div
+            style={{
+              padding: '5px',
+              background: '#fff',
+              borderRadius: '1px',
+              boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
+              display: 'inline-block',
+              cursor: 'pointer',
+            }}
+            onClick={togglePicker}
+          >
+            <div
+              style={{
+                width: '36px',
+                height: '14px',
+                borderRadius: '2px',
+                background: `rgba(${rgbColor.r},${rgbColor.g},${rgbColor.b},${rgbColor.a || 1})`,
+              }}
+            />
+          </div>
+        </div>
     );
+
+  }
+
   return (
-    <div className="inline-block mt-2 ml-2">
-      <div
-        className="w-4 h-4 cursor-pointer"
-        style={{
-          backgroundColor: `rgba(${rgbColor.r},${rgbColor.g},${rgbColor.b},${
-            rgbColor.a || 1
-          })`,
-        }}
-        onClick={togglePicker}
-      ></div>
-    </div>
-  );
+
+        <div style={{
+          position: 'absolute',
+          zIndex: '2',
+        }}>
+          <div
+            style={{
+              position: 'fixed',
+              top: '0px',
+              right: '0px',
+              bottom: '0px',
+              left: '0px',
+            }}
+            onClick={handleClose}
+          />
+          <SketchPicker color={rgbColor} onChange={handleColorChange} 
+          presetColors={[]}
+          />
+        </div>
+      )
 }
 
+
 export default ColorPicker;
diff --git a/taxonium_component/src/components/DeckSettingsModal.jsx b/taxonium_component/src/components/DeckSettingsModal.jsx
@@ -117,7 +117,25 @@ const DeckSettingsModal = ({
             />
           </label>
         </div>
+        <div>
+          <label>
+            Color for tree lines
+            <ColorPicker
+              color={settings.lineColor}
+              setColor={settings.setLineColor}
+            />
+          </label>
+        </div>
 
+        <div>
+          <label>
+            Color for clade labels
+            <ColorPicker
+              color={settings.cladeLabelColor}
+              setColor={settings.setCladeLabelColor}
+            />
+          </label>
+        </div>
         <h3 className="mt-5 font-medium">Mutation types enabled</h3>
         <div className="mt-2">
           {Object.keys(settings.mutationTypesEnabled).map((key) => (

diff --git a/taxonium_component/src/hooks/useLayers.jsx b/taxonium_component/src/hooks/useLayers.jsx
@@ -45,7 +45,7 @@ const useLayers = ({
   treenomeReferenceInfo,
   setTreenomeReferenceInfo,
 }) => {
-  const lineColor = [150, 150, 150];
+  const lineColor = settings.lineColor;
   const getNodeColorField = colorBy.getNodeColorField;
   const colorByField = colorBy.colorByField;
 
@@ -304,7 +304,7 @@ const useLayers = ({
       getPosition: (d) => [getX(d), d.y],
       getText: (d) => d.clades[clade_accessor],
 
-      getColor: [100, 100, 100],
+      getColor: settings.cladeLabelColor,
       getAngle: 0,
       fontFamily: "Roboto, sans-serif",
       fontWeight: 700,

diff --git a/taxonium_component/src/hooks/useSettings.jsx b/taxonium_component/src/hooks/useSettings.jsx
@@ -18,6 +18,9 @@ export const useSettings = ({ query, updateQuery }) => {
     180, 180, 180,
   ]);
 
+  const [lineColor, setLineColor] = useState([150, 150, 150]);
+  const [cladeLabelColor, setCladeLabelColor] = useState([100, 100, 100]);
+
   const [displayPointsForInternalNodes, setDisplayPointsForInternalNodes] =
     useState(false);
   const toggleMinimapEnabled = () => {
@@ -137,5 +140,9 @@ export const useSettings = ({ query, updateQuery }) => {
     setSearchPointSize,
     terminalNodeLabelColor,
     setTerminalNodeLabelColor,
+    lineColor,
+    setLineColor,
+    cladeLabelColor,
+    setCladeLabelColor,
   };
 };