From e935a7dcc9c5a127eecdb6e6127b33416b636fc2 Mon Sep 17 00:00:00 2001 From: Timothy Mugo Date: Tue, 1 Sep 2026 22:00:24 +0300 Subject: [PATCH 01/10] feat: Add Extra Tooltip Columns configuration to the d3Map block. This is used for the tooltip variables --- .../blocks/d3Map/layers/Data.jsx | 46 ++++++++++++++++++- .../blocks/d3Map/layers/Flow.jsx | 42 ++++++++++++++++- .../blocks/d3Map/layers/LatLong.jsx | 45 ++++++++++++++++++ .../blocks/d3Map/layers/Model.js | 1 + .../blocks/map/Tooltips.js | 7 +-- 5 files changed, 136 insertions(+), 5 deletions(-) diff --git a/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx b/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx index 5e75da487..aaa5b0743 100644 --- a/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx +++ b/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx @@ -43,7 +43,7 @@ const CategoricalFilter = ({ value, index, items, onUpdateFilterValue }) => { */ return a.position - b.position }); - return sortedItems.map(v => -1} + return sortedItems.map(v => {v.value}} checked={value.indexOf(v.id) > -1} onChange={e => { onUpdateFilterValue(v.id, index) }} />) @@ -230,6 +230,7 @@ export class DataLayerSetting extends Component { filters, featureJoinAttribute, apiJoinAttribute, + extraTooltipColumns = [], type, useCentroidPoint, useBreaks, @@ -343,6 +344,38 @@ export class DataLayerSetting extends Component { options={allDimensions} /> } + + + {app !== 'csv' && + +

+ {__("Additional fields to expose as tooltip variables, without adding them as dimensions.")} +

+ + {allDimensions && allDimensions.filter(d => d.value !== 'none' + && d.value !== apiJoinAttribute && d.value !== patternDiscriminator).map(d => ( + + {d.label}} + checked={extraTooltipColumns.indexOf(d.value) > -1} + onChange={(checked) => { + const newValue = checked + ? [...extraTooltipColumns, d.value] + : extraTooltipColumns.filter(v => v !== d.value); + onChangeProperty("extraTooltipColumns", newValue) + }} + /> + + ))} + + } + + {"{" + m.value + "}"}

)} + {extraTooltipColumns && extraTooltipColumns.length > 0 && extraTooltipColumns.map(col => { + const dim = allDimensions ? allDimensions.find(d => d.value === col) : null + return (

{(dim ? dim.label : col) + ": " + "{" + col + "}"}

) + })} , + {app != 'csv' && { */ return a.position - b.position }); - return sortedItems.map(v => -1} + return sortedItems.map(v => {v.value}} checked={value.indexOf(v.id) > -1} onChange={e => { onUpdateFilterValue(v.id, index) }} />) @@ -214,6 +214,7 @@ export class DataLayerSetting extends Component { filters, featureJoinAttribute, apiJoinAttribute, + extraTooltipColumns = [], type, useCentroidPoint, useBreaks, @@ -363,6 +364,45 @@ export class DataLayerSetting extends Component { , + + {app != 'csv' && + +

+ {__("Additional fields to expose as tooltip variables, without adding them as dimensions.")} +

+ + {allDimensions && allDimensions.filter(d => d.value !== 'none' + && d.value !== flowOrigin && d.value !== flowDestination).map(d => ( + + {d.label}} + checked={extraTooltipColumns.indexOf(d.value) > -1} + onChange={(checked) => { + const newValue = checked + ? [...extraTooltipColumns, d.value] + : extraTooltipColumns.filter(v => v !== d.value); + onChangeProperty("extraTooltipColumns", newValue) + }} + /> + + ))} + {extraTooltipColumns && extraTooltipColumns.length > 0 && extraTooltipColumns.map(col => { + const dim = allDimensions ? allDimensions.find(d => d.value === col) : null + return (

{(dim ? dim.label : col) + ": " + "{" + col + "}"}

) + })} + } + , {app != 'csv' && } + + + {app != 'csv' && + +

+ {__("Additional fields to expose as tooltip variables, without adding them as dimensions.")} +

+ + {allDimensions && allDimensions.filter(d => d.value !== 'none' + && d.value !== apiJoinAttribute && d.value !== dimension2).map(d => ( + + {d.label}} + checked={extraTooltipColumns.indexOf(d.value) > -1} + onChange={(checked) => { + const newValue = checked + ? [...extraTooltipColumns, d.value] + : extraTooltipColumns.filter(v => v !== d.value); + onChangeProperty("extraTooltipColumns", newValue) + }} + /> + + ))} + + } + , + + {"{" + dimension2 + "}"}

 } + + {extraTooltipColumns && extraTooltipColumns.length > 0 && extraTooltipColumns.map(col => { + const dim = allDimensions ? allDimensions.find(d => d.value === col) : null + return (

{(dim ? dim.label : col) + ": " + "{" + col + "}"}

) + })} , {app != 'csv' && diff --git a/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Model.js b/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Model.js index a89e57bad..aa12e6d3c 100644 --- a/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Model.js +++ b/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Model.js @@ -54,6 +54,7 @@ export const Model = { }, featureJoinAttribute: 'none', apiJoinAttribute: 'none', + extraTooltipColumns: [], useCentroidPoint: true, patternDiscriminator: 'none', patternDiscriminatorLabel: null, diff --git a/plugins/wp-react-blocks-plugin/blocks/map/Tooltips.js b/plugins/wp-react-blocks-plugin/blocks/map/Tooltips.js index 8ff4a5205..6e58cc49c 100644 --- a/plugins/wp-react-blocks-plugin/blocks/map/Tooltips.js +++ b/plugins/wp-react-blocks-plugin/blocks/map/Tooltips.js @@ -293,10 +293,11 @@ export default class Tooltips extends Component { )}

- {allDimensions && allDimensions.filter(d => d.value !== 'none').map((d) => ( - + {allDimensions && allDimensions.filter(d => d.value !== 'none' + && d.value !== dimension1 && d.value !== dimension2 && d.value !== dimension3).map((d) => ( + {d.label}} checked={extraTooltipColumns.indexOf(d.value) > -1} onChange={(checked) => { const newValue = checked From 0310a9b2530f51185b5de5223cf0aa5aadefe0f9 Mon Sep 17 00:00:00 2001 From: Timothy Mugo Gachengo <55899373+timothygachengo@users.noreply.github.com> Date: Thu, 3 Sep 2026 12:23:56 +0300 Subject: [PATCH 02/10] Fix inline styles syntax in Data.jsx Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- .../blocks/d3Map/layers/Data.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx b/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx index aaa5b0743..c2aa1dac5 100644 --- a/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx +++ b/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx @@ -349,11 +349,11 @@ export class DataLayerSetting extends Component { {app !== 'csv' &&

+ fontSize: "12px", + fontStyle: "italic", + color: "#666", + margin: "0", + {__("Additional fields to expose as tooltip variables, without adding them as dimensions.")}

From df1b4c4d77675133adde41e4d47c0f365a974cf0 Mon Sep 17 00:00:00 2001 From: Timothy Mugo Gachengo <55899373+timothygachengo@users.noreply.github.com> Date: Thu, 3 Sep 2026 12:24:14 +0300 Subject: [PATCH 03/10] Refactor tooltip styles to object notation Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- .../blocks/d3Map/layers/Flow.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Flow.jsx b/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Flow.jsx index d4f92bc37..054746aa1 100644 --- a/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Flow.jsx +++ b/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Flow.jsx @@ -368,11 +368,11 @@ export class DataLayerSetting extends Component { {app != 'csv' &&

+ fontSize: "12px", + fontStyle: "italic", + color: "#666", + margin: "0", + {__("Additional fields to expose as tooltip variables, without adding them as dimensions.")}

From db2076465c55b6e7bee2aa5789eadd47a4c5cb34 Mon Sep 17 00:00:00 2001 From: Timothy Mugo Gachengo <55899373+timothygachengo@users.noreply.github.com> Date: Thu, 3 Sep 2026 12:24:33 +0300 Subject: [PATCH 04/10] Fix JSX style syntax for tooltip paragraph Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- .../blocks/d3Map/layers/LatLong.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/LatLong.jsx b/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/LatLong.jsx index 1ce9c360b..d95c35b1c 100644 --- a/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/LatLong.jsx +++ b/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/LatLong.jsx @@ -294,11 +294,11 @@ export class DataLayerSetting extends Component { {app != 'csv' &&

+ fontSize: "12px", + fontStyle: "italic", + color: "#666", + margin: "0", + {__("Additional fields to expose as tooltip variables, without adding them as dimensions.")}

From f3735e19c504dc038be2b47d89d37e836a77e91c Mon Sep 17 00:00:00 2001 From: Timothy Mugo Gachengo <55899373+timothygachengo@users.noreply.github.com> Date: Thu, 3 Sep 2026 12:24:47 +0300 Subject: [PATCH 05/10] Add key prop to PanelRow in Flow.jsx Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Flow.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Flow.jsx b/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Flow.jsx index 054746aa1..6c8016c32 100644 --- a/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Flow.jsx +++ b/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Flow.jsx @@ -41,7 +41,7 @@ const CategoricalFilter = ({ value, index, items, onUpdateFilterValue }) => { */ return a.position - b.position }); - return sortedItems.map(v => {v.value}} checked={value.indexOf(v.id) > -1} + return sortedItems.map(v => {v.value}} checked={value.indexOf(v.id) > -1} onChange={e => { onUpdateFilterValue(v.id, index) }} />) From 3ec1570fcf535aba814097b6af065a75f95fc7f1 Mon Sep 17 00:00:00 2001 From: Timothy Mugo Gachengo <55899373+timothygachengo@users.noreply.github.com> Date: Thu, 3 Sep 2026 12:25:00 +0300 Subject: [PATCH 06/10] Fix JSX syntax in LatLong.jsx Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- plugins/wp-react-blocks-plugin/blocks/d3Map/layers/LatLong.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/LatLong.jsx b/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/LatLong.jsx index d95c35b1c..d352907e1 100644 --- a/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/LatLong.jsx +++ b/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/LatLong.jsx @@ -319,7 +319,7 @@ export class DataLayerSetting extends Component { ))} } - , + From 47318fea0499523248cdb575715b7ab945e8d484 Mon Sep 17 00:00:00 2001 From: Timothy Mugo Gachengo <55899373+timothygachengo@users.noreply.github.com> Date: Thu, 3 Sep 2026 12:25:15 +0300 Subject: [PATCH 07/10] Add key prop to PanelRow in Data.jsx Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx b/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx index c2aa1dac5..f392bc0d6 100644 --- a/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx +++ b/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx @@ -43,7 +43,7 @@ const CategoricalFilter = ({ value, index, items, onUpdateFilterValue }) => { */ return a.position - b.position }); - return sortedItems.map(v => {v.value}} checked={value.indexOf(v.id) > -1} + return sortedItems.map(v => {v.value}} checked={value.indexOf(v.id) > -1} onChange={e => { onUpdateFilterValue(v.id, index) }} />) From 134526d7888ba92e588d046264e7a1e3dc26d977 Mon Sep 17 00:00:00 2001 From: Timothy Mugo Gachengo <55899373+timothygachengo@users.noreply.github.com> Date: Thu, 3 Sep 2026 12:44:32 +0300 Subject: [PATCH 08/10] Fix formatting and update tooltip variable text Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Flow.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Flow.jsx b/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Flow.jsx index 6c8016c32..f0f07eb63 100644 --- a/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Flow.jsx +++ b/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Flow.jsx @@ -372,7 +372,7 @@ export class DataLayerSetting extends Component { fontStyle: "italic", color: "#666", margin: "0", - + }}> {__("Additional fields to expose as tooltip variables, without adding them as dimensions.")}

From 91d31bc0414662393675f9b6928ec2f1a3f2cffb Mon Sep 17 00:00:00 2001 From: Timothy Mugo Gachengo <55899373+timothygachengo@users.noreply.github.com> Date: Thu, 3 Sep 2026 12:45:28 +0300 Subject: [PATCH 09/10] Update tooltip variable description in LatLong.jsx Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- plugins/wp-react-blocks-plugin/blocks/d3Map/layers/LatLong.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/LatLong.jsx b/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/LatLong.jsx index d352907e1..7cdf51fa0 100644 --- a/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/LatLong.jsx +++ b/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/LatLong.jsx @@ -298,7 +298,7 @@ export class DataLayerSetting extends Component { fontStyle: "italic", color: "#666", margin: "0", - + }}> {__("Additional fields to expose as tooltip variables, without adding them as dimensions.")}

From 5afe7cce535d65292b0d82e3d9d97b08674774f2 Mon Sep 17 00:00:00 2001 From: Timothy Mugo Gachengo <55899373+timothygachengo@users.noreply.github.com> Date: Thu, 3 Sep 2026 12:45:45 +0300 Subject: [PATCH 10/10] Update tooltip variable description in Data.jsx Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx b/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx index f392bc0d6..f4bd8580c 100644 --- a/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx +++ b/plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx @@ -353,7 +353,7 @@ export class DataLayerSetting extends Component { fontStyle: "italic", color: "#666", margin: "0", - + }}> {__("Additional fields to expose as tooltip variables, without adding them as dimensions.")}