add

taxonium_component/package.json

@@ -34,6 +34,7 @@
     "classnames": "^2.3.2",
     "deck.gl": "=8.6.6",
     "react-circular-progressbar": "^2.1.0",
+    "react-color": "^2.19.3",
     "react-debounce-input": "^3.3.0",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.8.0",

taxonium_component/src/components/ColorPicker.jsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { SketchPicker } from 'react-color';
+
+const rgbToList = (rgb) => {
+  return [rgb.r, rgb.g, rgb.b];
+};
+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 handleColorChange = (newColor) => {
+        setColor(rgbToList(newColor.rgb));
+        setShowPicker(false);
+    };
+    if(showPicker) return (
+        <div className="block mt-2">
+        <SketchPicker color={rgbColor} onChange={handleColorChange} />
+    </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>
+    );
+}
+
+export default ColorPicker;

taxonium_component/src/components/DeckSettingsModal.jsx

@@ -1,4 +1,5 @@
 import Modal from "react-modal";
+import ColorPicker from "./ColorPicker";
 const settingsModalStyle = {
   content: {
     top: "50%",
@@ -73,6 +74,7 @@ const DeckSettingsModal = ({
           </label>
         </div>
 
+
         <div>
           <label>
             Max density of node label text:{" "}
@@ -107,6 +109,15 @@ const DeckSettingsModal = ({
             />
           </label>
         </div>
+        <div>
+          <label>
+            Color for terminal node labels
+            <ColorPicker
+              color={settings.terminalNodeLabelColor}
+              setColor={settings.setTerminalNodeLabelColor}
+            />
+          </label>
+        </div>
 
         <h3 className="mt-5 font-medium">Mutation types enabled</h3>
         <div className="mt-2">
@@ -129,6 +140,34 @@ const DeckSettingsModal = ({
             </div>
           ))}
         </div>
+        <div className="mt-2">
+        <h3 className="mt-5 font-medium">Search</h3>
+  <label>
+    <input
+      type="checkbox"
+      className="mr-1"
+      checked={settings.displaySearchesAsPoints}
+      onChange={() => settings.setDisplaySearchesAsPoints(!settings.displaySearchesAsPoints)}
+    />{" "}
+    Display searches as points
+  </label>
+</div>
+<div className="mt-2">
+  <label>
+    Point Size:{" "}
+    <input
+      type="number"
+      value={settings.searchPointSize}
+      onChange={(e) => settings.setSearchPointSize(parseInt(e.target.value))}
+      step="1"
+      min="1"
+      max="10"
+      className={`border py-1 px-1 text-grey-darkest text-sm ${!settings.displaySearchesAsPoints ? 'bg-gray-200' : ''}`}
+      disabled={!settings.displaySearchesAsPoints}
+    />
+  </label>
+</div>
+
       </div>
     </Modal>
   );

taxonium_component/src/components/SearchDisplayToggle.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { toast } from 'react-hot-toast';
+import { FaCircle, FaRegCircle } from 'react-icons/fa';
+
+const SearchDisplayToggle = ({ settings }) => {
+    const { displaySearchesAsPoints, setDisplaySearchesAsPoints } = settings;
+    const toggleDisplay = () => {
+        // Toggle the displaySearchesAsPoints value
+        setDisplaySearchesAsPoints(!displaySearchesAsPoints);
+
+        // Show a toast message based on the new value
+        if (!displaySearchesAsPoints) {
+            toast.success('Displaying searches as points');
+        } else {
+            toast.success('Displaying searches as circles');
+        }
+    };
+
+    return (
+        <button onClick={toggleDisplay} aria-label="Toggle Display Mode">
+            {displaySearchesAsPoints ? <FaCircle /> : <FaRegCircle />}
+        </button>
+    );
+};
+
+export default SearchDisplayToggle;

taxonium_component/src/components/SearchPanel.jsx

@@ -16,6 +16,8 @@ import { useState, useMemo, useEffect } from "react";
 
 import classNames from "classnames";
 
+import SearchDisplayToggle from "./SearchDisplayToggle";
+
 const prettify_x_types = { x_dist: "Distance", x_time: "Time" };
 
 const formatNumber = (num) => {
@@ -372,10 +374,13 @@ function SearchPanel({
         )}
       </div>
       <div className="py-3 flex flex-col md:min-h-0">
-        <h2 className="font-bold text-gray-700 flex items-center mb-2">
-          <FaSearch className="ml-1 mr-1.5 text-gray-500 h-4 w-4" />
-          Search
-        </h2>
+        <h2 className="font-bold text-gray-700 flex justify-between items-center mb-2">
+    <div className="flex items-center">
+        <FaSearch className="ml-1 mr-1.5 text-gray-500 h-4 w-4" />
+        Search
+    </div>
+    <SearchDisplayToggle settings={settings} />
+</h2>
         <div className="space-y-2 md:overflow-y-auto -mr-4 pr-4">
           {search.searchSpec.map((item) => (
             <SearchTopLayerItem

taxonium_component/src/hooks/useLayers.jsx

@@ -352,7 +352,7 @@ const useLayers = ({
       getPosition: (d) => [getX(d), d.y],
       getText: (d) => d[config.name_accessor],
 
-      getColor: [180, 180, 180],
+      getColor: settings.terminalNodeLabelColor,
       getAngle: 0,
 
       billboard: true,
@@ -455,16 +455,16 @@ const useLayers = ({
       data: data,
       id: "main-search-scatter-" + spec.key,
       getPosition: (d) => [d[xType], d.y],
-      getLineColor: lineColor,
-      getRadius: 5 + 2 * i,
+      getLineColor: settings.displaySearchesAsPoints ? [0,0,0] : lineColor,
+      getRadius: settings.displaySearchesAsPoints ? settings.searchPointSize : 5 + 2 * i ,
       radiusUnits: "pixels",
       lineWidthUnits: "pixels",
       stroked: true,
       visible: searchesEnabled[spec.key],
       wireframe: true,
       getLineWidth: 1,
       filled: true,
-      getFillColor: [255, 0, 0, 0],
+      getFillColor: settings.displaySearchesAsPoints ? lineColor:[255, 0, 0, 0],
       modelMatrix: modelMatrix,
       updateTriggers: {
         getPosition: [xType],

taxonium_component/src/hooks/useSettings.jsx

@@ -10,6 +10,15 @@ export const useSettings = ({ query, updateQuery }) => {
   const [thresholdForDisplayingText, setThresholdForDisplayingText] =
     useState(2.9);
 
+  const [displaySearchesAsPoints, setDisplaySearchesAsPoints] =
+    useState(false);
+
+    const [searchPointSize, setSearchPointSize] =
+    useState(3);
+
+    const [terminalNodeLabelColor, setTerminalNodeLabelColor] = useState([180,180,180]);
+
+
   const [displayPointsForInternalNodes, setDisplayPointsForInternalNodes] =
     useState(false);
   const toggleMinimapEnabled = () => {
@@ -123,5 +132,11 @@ export const useSettings = ({ query, updateQuery }) => {
     isCov2Tree,
     chromosomeName,
     setChromosomeName,
+    displaySearchesAsPoints,
+    setDisplaySearchesAsPoints,
+    searchPointSize,
+    setSearchPointSize,
+    terminalNodeLabelColor,
+    setTerminalNodeLabelColor
   };
 };

taxonium_component/yarn.lock

@@ -1553,6 +1553,11 @@
   resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c"
   integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==
 
+"@icons/material@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
+  integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -7643,6 +7648,11 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash-es@^4.17.15:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.capitalize@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/lodash.capitalize/-/lodash.capitalize-4.2.1.tgz#f826c9b4e2a8511d84e3aca29db05e1a4f3b72a9"
@@ -7678,7 +7688,7 @@ lodash.uniqby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz#d99c07a669e9e6d24e1362dfe266c67616af1302"
   integrity sha512-e/zcLx6CSbmaEgFHCA7BnoQKyCtKMxnuWrJygbwPs/AIn+IMKl66L8/s+wBUn5LRw2pZx3bUHibiV1b6aTWIww==
 
-[email protected], lodash@^4.17.15, lodash@^4.17.21:
+[email protected], lodash@^4.0.1, lodash@^4.17.15, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -7789,6 +7799,11 @@ markdown-to-jsx@^7.1.8:
   resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.2.0.tgz#e7b46b65955f6a04d48a753acd55874a14bdda4b"
   integrity sha512-3l4/Bigjm4bEqjCR6Xr+d4DtM1X6vvtGsMGSjJYyep8RjjIvcWtrXBS8Wbfe1/P+atKNMccpsraESIaWVplzVg==
 
+material-colors@^1.2.1:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
+
 material-ui-popup-state@^5.0.0:
   version "5.0.8"
   resolved "https://registry.yarnpkg.com/material-ui-popup-state/-/material-ui-popup-state-5.0.8.tgz#b35f7878b994590a55bf1e7a5a1ed4687f75fdc4"
@@ -8884,7 +8899,7 @@ prompts@^2.4.0:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.0.0, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -9126,6 +9141,19 @@ react-circular-progressbar@^2.1.0:
   resolved "https://registry.yarnpkg.com/react-circular-progressbar/-/react-circular-progressbar-2.1.0.tgz#99e5ae499c21de82223b498289e96f66adb8fa3a"
   integrity sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==
 
+react-color@^2.19.3:
+  version "2.19.3"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
+  integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==
+  dependencies:
+    "@icons/material" "^0.2.4"
+    lodash "^4.17.15"
+    lodash-es "^4.17.15"
+    material-colors "^1.2.1"
+    prop-types "^15.5.10"
+    reactcss "^1.2.0"
+    tinycolor2 "^1.4.1"
+
 react-colorful@^5.1.2:
   version "5.6.1"
   resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
@@ -9325,6 +9353,13 @@ react@^17.0.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+reactcss@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
+  integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
+  dependencies:
+    lodash "^4.0.1"
+
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
@@ -10401,6 +10436,11 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+tinycolor2@^1.4.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
+  integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
+
 titleize@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/titleize/-/titleize-3.0.0.tgz#71c12eb7fdd2558aa8a44b0be83b8a76694acd53"