diff --git a/taxonium_component/src/Deck.jsx b/taxonium_component/src/Deck.jsx
index b7ad9529..a9c6f1cf 100644
--- a/taxonium_component/src/Deck.jsx
+++ b/taxonium_component/src/Deck.jsx
@@ -193,7 +193,6 @@ function Deck({
     treenomeReferenceInfo,
     setTreenomeReferenceInfo,
     hoveredKey,
-    
   });
   // console.log("deck refresh");
 
diff --git a/taxonium_component/src/components/Key.jsx b/taxonium_component/src/components/Key.jsx
index 2b54486c..26f1f448 100644
--- a/taxonium_component/src/components/Key.jsx
+++ b/taxonium_component/src/components/Key.jsx
@@ -34,9 +34,11 @@ const Key = ({
         collapsed ? "w-20" : "w-32"
       )}
       // z index big
-      style={{ zIndex: 10 ,
-      
-    cursor:'default'}}
+      style={{
+        zIndex: 10,
+
+        cursor: "default",
+      }}
     >
       <h3
         className="font-bold text-gray-600 text-xs cursor-pointer"
@@ -63,25 +65,23 @@ const Key = ({
                 className="key-text text-xs text-gray-700 mt-0.5 break-all cursor-pointer"
                 key={index}
                 style={{
-                  pointerEvents: 'auto'
-                }
-              }
+                  pointerEvents: "auto",
+                }}
                 onClick={() => {
                   setCurrentColorSettingKey(item.value);
                   setColorSettingOpen(true);
                 }}
-                onMouseEnter={() =>{
-                  setHoveredKey(item.value)
-                  
-                }
-                }
+                onMouseEnter={() => {
+                  setHoveredKey(item.value);
+                }}
                 onMouseLeave={() => setHoveredKey(null)}
-
                 title="Edit color"
               >
                 <div
                   style={{ backgroundColor: color }}
-                  className={`circle w-2 h-2 mr-2 rounded-full inline-block transform transition-transform ${hoveredKey === item.value ? "scale-150" : "scale-100" }`}
+                  className={`circle w-2 h-2 mr-2 rounded-full inline-block transform transition-transform ${
+                    hoveredKey === item.value ? "scale-150" : "scale-100"
+                  }`}
                 />
                 {item.value}
               </div>
diff --git a/taxonium_component/src/hooks/useLayers.jsx b/taxonium_component/src/hooks/useLayers.jsx
index 8980786e..b3367c84 100644
--- a/taxonium_component/src/hooks/useLayers.jsx
+++ b/taxonium_component/src/hooks/useLayers.jsx
@@ -44,7 +44,7 @@ const useLayers = ({
   treenomeState,
   treenomeReferenceInfo,
   setTreenomeReferenceInfo,
-  hoveredKey
+  hoveredKey,
 }) => {
   const lineColor = settings.lineColor;
   const getNodeColorField = colorBy.getNodeColorField;
@@ -159,7 +159,8 @@ const useLayers = ({
     getFillColor: (d) => toRGB(getNodeColorField(d, detailed_data)),
 
     // radius in pixels
-    getRadius: (d) => getNodeColorField(d, detailed_data) === hoveredKey ? 4 : 3,
+    getRadius: (d) =>
+      getNodeColorField(d, detailed_data) === hoveredKey ? 4 : 3,
     getLineColor: [100, 100, 100],
     opacity: 0.6,
     stroked: data.data.nodes && data.data.nodes.length < 3000,
@@ -171,7 +172,7 @@ const useLayers = ({
     modelMatrix: modelMatrix,
     updateTriggers: {
       getFillColor: [detailed_data, getNodeColorField, colorHook],
-      getRadius:[hoveredKey,getNodeColorField],
+      getRadius: [hoveredKey, getNodeColorField],
       getPosition: [xType],
     },
   };