From 8794cf6b2939be79897299ea54f7a5805ea1ae4a Mon Sep 17 00:00:00 2001 From: Theo Sanderson Date: Fri, 15 Sep 2023 12:11:01 +0100 Subject: [PATCH 1/3] more stylization options --- .../src/components/DeckSettingsModal.jsx | 89 ++++++++++++++++++- taxonium_component/src/hooks/useLayers.jsx | 14 ++- taxonium_component/src/hooks/useSettings.jsx | 15 ++++ .../src/stories/Tax2.stories.jsx | 2 + taxonium_component/src/utils/deckglToSvg.js | 1 - 5 files changed, 115 insertions(+), 6 deletions(-) diff --git a/taxonium_component/src/components/DeckSettingsModal.jsx b/taxonium_component/src/components/DeckSettingsModal.jsx index fd6d4e36..a7bf136c 100644 --- a/taxonium_component/src/components/DeckSettingsModal.jsx +++ b/taxonium_component/src/components/DeckSettingsModal.jsx @@ -158,8 +158,93 @@ const DeckSettingsModal = ({ /> - - +
+ +
+
+ +
+ {/* New checkbox for "pretty stroke" */} +
+ +
+ + {/* Conditionally show pretty stroke settings based on the checkbox state */} + {settings.prettyStroke.enabled && ( +
+
+ +
+
+ +
+
+ )} + + +
diff --git a/taxonium_component/src/hooks/useLayers.jsx b/taxonium_component/src/hooks/useLayers.jsx index 275f16f7..b3e30da0 100644 --- a/taxonium_component/src/hooks/useLayers.jsx +++ b/taxonium_component/src/hooks/useLayers.jsx @@ -48,6 +48,7 @@ const useLayers = ({ setTreenomeReferenceInfo, hoveredKey, }) => { + const lineColor = settings.lineColor; const getNodeColorField = colorBy.getNodeColorField; const colorByField = colorBy.colorByField; @@ -159,13 +160,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 +176,7 @@ const useLayers = ({ modelMatrix: modelMatrix, updateTriggers: { getFillColor: [detailed_data, getNodeColorField, colorHook], - getRadius: [hoveredKey, getNodeColorField], + getRadius: [settings.nodeSize], getPosition: [xType], }, }; @@ -233,6 +234,12 @@ 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 +346,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 index aff52936..ac4d9b1a 100644 --- 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: [0, 0, 0], + 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 index 792d83ee..ea058da2 100644 --- 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 ( +
+
); }; diff --git a/taxonium_component/src/utils/deckglToSvg.js b/taxonium_component/src/utils/deckglToSvg.js index b8d3da3a..e854a502 100644 --- a/taxonium_component/src/utils/deckglToSvg.js +++ b/taxonium_component/src/utils/deckglToSvg.js @@ -140,7 +140,6 @@ const getSVGfunction = (layers, viewState) => { svgContent += ""; return svgContent; }; - console.log(viewState); function triggerSVGdownload(deckSize) { if (!deckSize) { From c3c937af19e6e1181193b6305fcfc6bdd108b713 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Fri, 15 Sep 2023 11:14:39 +0000 Subject: [PATCH 2/3] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- .../src/components/DeckSettingsModal.jsx | 113 +++++++++--------- taxonium_component/src/hooks/useLayers.jsx | 14 ++- .../src/stories/Tax2.stories.jsx | 12 +- 3 files changed, 72 insertions(+), 67 deletions(-) diff --git a/taxonium_component/src/components/DeckSettingsModal.jsx b/taxonium_component/src/components/DeckSettingsModal.jsx index a7bf136c..bba340c7 100644 --- a/taxonium_component/src/components/DeckSettingsModal.jsx +++ b/taxonium_component/src/components/DeckSettingsModal.jsx @@ -160,12 +160,11 @@ const DeckSettingsModal = ({
-
-
+
+
-
- {/* New checkbox for "pretty stroke" */} -
-
- + {/* New checkbox for "pretty stroke" */} +
+ +
+ {/* Conditionally show pretty stroke settings based on the checkbox state */} {settings.prettyStroke.enabled && ( -
-
- -
-
- -
+
+
+
+
+ +
+
)} -
- - + +
diff --git a/taxonium_component/src/hooks/useLayers.jsx b/taxonium_component/src/hooks/useLayers.jsx index b3e30da0..0a25fd82 100644 --- a/taxonium_component/src/hooks/useLayers.jsx +++ b/taxonium_component/src/hooks/useLayers.jsx @@ -48,7 +48,6 @@ const useLayers = ({ setTreenomeReferenceInfo, hoveredKey, }) => { - const lineColor = settings.lineColor; const getNodeColorField = colorBy.getNodeColorField; const colorByField = colorBy.colorByField; @@ -234,11 +233,14 @@ 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 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", diff --git a/taxonium_component/src/stories/Tax2.stories.jsx b/taxonium_component/src/stories/Tax2.stories.jsx index ea058da2..3cb4cb47 100644 --- a/taxonium_component/src/stories/Tax2.stories.jsx +++ b/taxonium_component/src/stories/Tax2.stories.jsx @@ -9,12 +9,12 @@ const WithState = (args) => { }; return (
- +
); }; From 5ca71f07fc58b08f28fc0dbf947fd619a2146e16 Mon Sep 17 00:00:00 2001 From: Theo Sanderson Date: Fri, 15 Sep 2023 12:19:33 +0100 Subject: [PATCH 3/3] update --- taxonium_component/src/components/DeckSettingsModal.jsx | 3 +++ taxonium_component/src/hooks/useSettings.jsx | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/taxonium_component/src/components/DeckSettingsModal.jsx b/taxonium_component/src/components/DeckSettingsModal.jsx index bba340c7..cf0fcf5d 100644 --- a/taxonium_component/src/components/DeckSettingsModal.jsx +++ b/taxonium_component/src/components/DeckSettingsModal.jsx @@ -211,6 +211,9 @@ const DeckSettingsModal = ({ {/* Conditionally show pretty stroke settings based on the checkbox state */} {settings.prettyStroke.enabled && (
+

+ Pretty stroke looks best if you set the node opacity to 1. +