[pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
theosanderson · Sep 12, 2023 · ee15a66 · ee15a66
1 parent a20f794
commit ee15a66
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 92 deletions.
diff --git a/taxonium_component/src/components/ColorPicker.jsx b/taxonium_component/src/components/ColorPicker.jsx
@@ -1,46 +1,47 @@
-import React, { useState } from 'react';
-import { SketchPicker } from 'react-color';
+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]};
+  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);
+function ColorPicker({ color, setColor }) {
+  const rgbColor = listToRgb(color);
 
-
-    const [showPicker, setShowPicker] = useState(false);
+  const [showPicker, setShowPicker] = useState(false);
 
-    const togglePicker = () => {
-        setShowPicker(!showPicker);
-    };
+  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>
-    )
+  const handleColorChange = (newColor) => {
+    setColor(rgbToList(newColor.rgb));
+    setShowPicker(false);
+  };
+  if (showPicker)
     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 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;
diff --git a/taxonium_component/src/components/DeckSettingsModal.jsx b/taxonium_component/src/components/DeckSettingsModal.jsx
@@ -74,7 +74,6 @@ const DeckSettingsModal = ({
           </label>
         </div>
 
-
         <div>
           <label>
             Max density of node label text:{" "}
@@ -141,33 +140,40 @@ const DeckSettingsModal = ({
           ))}
         </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>
-
+          <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>
   );

diff --git a/taxonium_component/src/components/SearchDisplayToggle.jsx b/taxonium_component/src/components/SearchDisplayToggle.jsx
@@ -1,26 +1,26 @@
-import React from 'react';
-import { toast } from 'react-hot-toast';
-import { FaCircle, FaRegCircle } from 'react-icons/fa';
+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);
+  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');
-        }
-    };
+    // 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>
-    );
+  return (
+    <button onClick={toggleDisplay} aria-label="Toggle Display Mode">
+      {displaySearchesAsPoints ? <FaCircle /> : <FaRegCircle />}
+    </button>
+  );
 };
 
 export default SearchDisplayToggle;
diff --git a/taxonium_component/src/components/SearchPanel.jsx b/taxonium_component/src/components/SearchPanel.jsx
@@ -375,12 +375,12 @@ function SearchPanel({
       </div>
       <div className="py-3 flex flex-col md:min-h-0">
         <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="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

diff --git a/taxonium_component/src/hooks/useLayers.jsx b/taxonium_component/src/hooks/useLayers.jsx
@@ -455,16 +455,20 @@ const useLayers = ({
       data: data,
       id: "main-search-scatter-" + spec.key,
       getPosition: (d) => [d[xType], d.y],
-      getLineColor: settings.displaySearchesAsPoints ? [0,0,0] : lineColor,
-      getRadius: settings.displaySearchesAsPoints ? settings.searchPointSize : 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: settings.displaySearchesAsPoints ? lineColor:[255, 0, 0, 0],
+      getFillColor: settings.displaySearchesAsPoints
+        ? lineColor
+        : [255, 0, 0, 0],
       modelMatrix: modelMatrix,
       updateTriggers: {
         getPosition: [xType],

diff --git a/taxonium_component/src/hooks/useSettings.jsx b/taxonium_component/src/hooks/useSettings.jsx
@@ -10,14 +10,13 @@ export const useSettings = ({ query, updateQuery }) => {
   const [thresholdForDisplayingText, setThresholdForDisplayingText] =
     useState(2.9);
 
-  const [displaySearchesAsPoints, setDisplaySearchesAsPoints] =
-    useState(false);
-
-    const [searchPointSize, setSearchPointSize] =
-    useState(3);
+  const [displaySearchesAsPoints, setDisplaySearchesAsPoints] = useState(false);
 
-    const [terminalNodeLabelColor, setTerminalNodeLabelColor] = useState([180,180,180]);
+  const [searchPointSize, setSearchPointSize] = useState(3);
 
+  const [terminalNodeLabelColor, setTerminalNodeLabelColor] = useState([
+    180, 180, 180,
+  ]);
 
   const [displayPointsForInternalNodes, setDisplayPointsForInternalNodes] =
     useState(false);
@@ -137,6 +136,6 @@ export const useSettings = ({ query, updateQuery }) => {
     searchPointSize,
     setSearchPointSize,
     terminalNodeLabelColor,
-    setTerminalNodeLabelColor
+    setTerminalNodeLabelColor,
   };
 };