Merge pull request #528 from theosanderson/morestyle

more stylization options
theosanderson · Sep 15, 2023 · f73ebe2 · f73ebe2 · vercel · Sep 15, 2023
2 parents 3d99253 + 5ca71f0
commit f73ebe2
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 10 deletions.
diff --git a/taxonium_component/src/components/DeckSettingsModal.jsx b/taxonium_component/src/components/DeckSettingsModal.jsx
@@ -158,6 +158,97 @@ const DeckSettingsModal = ({
                 />
               </label>
             </div>
+            <div>
+              <label>
+                Node size:{" "}
+                <input
+                  type="number"
+                  value={settings.nodeSize}
+                  onChange={(e) =>
+                    settings.setNodeSize(parseFloat(e.target.value))
+                  }
+                  step="0.1"
+                  min="1"
+                  max="10"
+                  className="border py-1 px-1 text-grey-darkest text-sm"
+                />
+              </label>
+            </div>
+            <div>
+              <label>
+                Node opacity:{" "}
+                <input
+                  type="number"
+                  value={settings.opacity}
+                  onChange={(e) =>
+                    settings.setOpacity(parseFloat(e.target.value))
+                  }
+                  step="0.1"
+                  min="0"
+                  max="1"
+                  className="border py-1 px-1 text-grey-darkest text-sm"
+                />
+              </label>
+            </div>
+            {/* New checkbox for "pretty stroke" */}
+            <div className="mt-3">
+              <label>
+                <input
+                  type="checkbox"
+                  className="mr-1"
+                  checked={settings.prettyStroke.enabled}
+                  onChange={() =>
+                    settings.setPrettyStroke({
+                      ...settings.prettyStroke,
+                      enabled: !settings.prettyStroke.enabled,
+                    })
+                  }
+                />
+                Enable pretty stroke
+              </label>
+            </div>
+
+            {/* Conditionally show pretty stroke settings based on the checkbox state */}
+            {settings.prettyStroke.enabled && (
+              <div className="mt-3 space-y-2">
+                <p className="text-sm">
+                  Pretty stroke looks best if you set the node opacity to 1.
+                </p>
+                <div>
+                  <label>
+                    Pretty stroke color:
+                    {/* Note: You might need to modify the ColorPicker component or its props to accommodate this */}
+                    <ColorPicker
+                      color={settings.prettyStroke.color}
+                      setColor={(color) =>
+                        settings.setPrettyStroke({
+                          ...settings.prettyStroke,
+                          color,
+                        })
+                      }
+                    />
+                  </label>
+                </div>
+                <div>
+                  <label>
+                    Pretty stroke width:
+                    <input
+                      type="number"
+                      value={settings.prettyStroke.width}
+                      onChange={(e) =>
+                        settings.setPrettyStroke({
+                          ...settings.prettyStroke,
+                          width: parseFloat(e.target.value),
+                        })
+                      }
+                      step="0.1"
+                      min="0.1"
+                      className="border py-1 px-1 text-grey-darkest text-sm"
+                    />
+                  </label>
+                </div>
+              </div>
+            )}
           </div>
         </TabPanel>
 

diff --git a/taxonium_component/src/hooks/useLayers.jsx b/taxonium_component/src/hooks/useLayers.jsx
@@ -159,13 +159,13 @@ const useLayers = ({
   const scatter_layer_common_props = {
     getPosition: (d) => [getX(d), d.y],
     getFillColor: (d) => toRGB(getNodeColorField(d, detailed_data)),
-    getRadius: 3,
+    getRadius: settings.nodeSize,
     // radius in pixels
     // we had to get rid of the below because it was messing up the genotype colours
     // getRadius: (d) =>
     //  getNodeColorField(d, detailed_data) === hoveredKey ? 4 : 3,
     getLineColor: [100, 100, 100],
-    opacity: 0.6,
+    opacity: settings.opacity,
     stroked: data.data.nodes && data.data.nodes.length < 3000,
     lineWidthUnits: "pixels",
     lineWidthScale: 1,
@@ -175,7 +175,7 @@ const useLayers = ({
     modelMatrix: modelMatrix,
     updateTriggers: {
       getFillColor: [detailed_data, getNodeColorField, colorHook],
-      getRadius: [hoveredKey, getNodeColorField],
+      getRadius: [settings.nodeSize],
       getPosition: [xType],
     },
   };
@@ -233,6 +233,15 @@ const useLayers = ({
       data: detailed_scatter_data,
     };
 
+    const pretty_stroke_background_layer = settings.prettyStroke.enabled
+      ? {
+          ...main_scatter_layer,
+          getFillColor: settings.prettyStroke.color,
+          getLineWidth: 0,
+          getRadius: main_scatter_layer.getRadius + settings.prettyStroke.width,
+        }
+      : {};
+
     const fillin_scatter_layer = {
       layerType: "ScatterplotLayer",
       ...scatter_layer_common_props,
@@ -339,6 +348,7 @@ const useLayers = ({
       main_line_layer2,
       fillin_line_layer,
       fillin_line_layer2,
+      pretty_stroke_background_layer,
       main_scatter_layer,
       fillin_scatter_layer,
       clade_label_layer,

diff --git a/taxonium_component/src/hooks/useSettings.jsx b/taxonium_component/src/hooks/useSettings.jsx
@@ -14,11 +14,20 @@ export const useSettings = ({ query, updateQuery }) => {
 
   const [searchPointSize, setSearchPointSize] = useState(3);
 
+  const [opacity, setOpacity] = useState(0.6);
+
+  const [prettyStroke, setPrettyStroke] = useState({
+    enabled: false,
+    color: [76, 87, 106],
+    width: 1,
+  });
+
   const [terminalNodeLabelColor, setTerminalNodeLabelColor] = useState([
     180, 180, 180,
   ]);
 
   const [lineColor, setLineColor] = useState([150, 150, 150]);
+  const [nodeSize, setNodeSize] = useState(3);
   const [cladeLabelColor, setCladeLabelColor] = useState([100, 100, 100]);
 
   const [displayPointsForInternalNodes, setDisplayPointsForInternalNodes] =
@@ -144,5 +153,11 @@ export const useSettings = ({ query, updateQuery }) => {
     setLineColor,
     cladeLabelColor,
     setCladeLabelColor,
+    nodeSize,
+    setNodeSize,
+    prettyStroke,
+    setPrettyStroke,
+    opacity,
+    setOpacity,
   };
 };
diff --git a/taxonium_component/src/stories/Tax2.stories.jsx b/taxonium_component/src/stories/Tax2.stories.jsx
@@ -8,12 +8,14 @@ const WithState = (args) => {
     setState({ ...state, ...newState });
   };
   return (
-    <Taxonium
-      {...args}
-      query={state}
-      updateQuery={updateQuery}
-      backendUrl={"https://api.cov2tree.org"}
-    />
+    <div style={{ width: "100%", height: "500px" }}>
+      <Taxonium
+        {...args}
+        query={state}
+        updateQuery={updateQuery}
+        backendUrl={"https://api.cov2tree.org"}
+      />
+    </div>
   );
 };
 

diff --git a/taxonium_component/src/utils/deckglToSvg.js b/taxonium_component/src/utils/deckglToSvg.js
@@ -140,7 +140,6 @@ const getSVGfunction = (layers, viewState) => {
     svgContent += "</svg>";
     return svgContent;
   };
-  console.log(viewState);
 
   function triggerSVGdownload(deckSize) {
     if (!deckSize) {