Skip to content

feat: Add Extra Tooltip Columns configuration to the d3Map block. Thi… #151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ralvarez-dg merged 10 commits into from
Sep 3, 2026
Merged

feat: Add Extra Tooltip Columns configuration to the d3Map block. Thi… #151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e935a7d
feat: Add Extra Tooltip Columns configuration to the d3Map block. Thi…
timothygachengo Sep 1, 2026
0310a9b
Fix inline styles syntax in Data.jsx
timothygachengo Sep 3, 2026
df1b4c4
Refactor tooltip styles to object notation
timothygachengo Sep 3, 2026
db20764
Fix JSX style syntax for tooltip paragraph
timothygachengo Sep 3, 2026
f3735e1
Add key prop to PanelRow in Flow.jsx
timothygachengo Sep 3, 2026
3ec1570
Fix JSX syntax in LatLong.jsx
timothygachengo Sep 3, 2026
47318fe
Add key prop to PanelRow in Data.jsx
timothygachengo Sep 3, 2026
134526d
Fix formatting and update tooltip variable text
timothygachengo Sep 3, 2026
91d31bc
Update tooltip variable description in LatLong.jsx
timothygachengo Sep 3, 2026
5afe7cc
Update tooltip variable description in Data.jsx
timothygachengo Sep 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 45 additions & 1 deletion plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const CategoricalFilter = ({ value, index, items, onUpdateFilterValue }) => {
*/
return a.position - b.position
});
return sortedItems.map(v => <PanelRow> <ToggleControl label={v.value} checked={value.indexOf(v.id) > -1}
return sortedItems.map(v => <PanelRow key={v.id} style={{ alignItems: 'flex-start' }}> <ToggleControl label={<span style={{ whiteSpace: 'normal', wordBreak: 'break-word' }}>{v.value}</span>} checked={value.indexOf(v.id) > -1}
onChange={e => {
onUpdateFilterValue(v.id, index)
}} /></PanelRow>)
Expand Down Expand Up @@ -230,6 +230,7 @@ export class DataLayerSetting extends Component {
filters,
featureJoinAttribute,
apiJoinAttribute,
extraTooltipColumns = [],
type,
useCentroidPoint,
useBreaks,
Expand Down Expand Up @@ -343,6 +344,38 @@ export class DataLayerSetting extends Component {
options={allDimensions}
/>
</PanelRow>}
<PanelRow>
<React.Fragment>
{app !== 'csv' && <PanelBody initialOpen={false} title={__("Extra Tooltip Columns")}>
<PanelRow>
<p style={{
fontSize: "12px",
fontStyle: "italic",
color: "#666",
margin: "0",
}}>
{__("Additional fields to expose as tooltip variables, without adding them as dimensions.")}
</p>
</PanelRow>
Comment thread
Copilot marked this conversation as resolved.
{allDimensions && allDimensions.filter(d => d.value !== 'none'
&& d.value !== apiJoinAttribute && d.value !== patternDiscriminator).map(d => (
<PanelRow key={d.value} style={{ alignItems: 'flex-start' }}>
<CheckboxControl
label={<span style={{ whiteSpace: 'normal', wordBreak: 'break-word' }}>{d.label}</span>}
checked={extraTooltipColumns.indexOf(d.value) > -1}
onChange={(checked) => {
const newValue = checked
? [...extraTooltipColumns, d.value]
: extraTooltipColumns.filter(v => v !== d.value);
onChangeProperty("extraTooltipColumns", newValue)
}}
/>
</PanelRow>
))}

</PanelBody>}
</React.Fragment>
</PanelRow>
<PanelRow>
<TextareaControl
label={__("Tooltip")}
Expand All @@ -360,7 +393,18 @@ export class DataLayerSetting extends Component {
"font-style": "normal",
"color": "rgb(117, 117, 117)"
}}>{"{" + m.value + "}"}</p></PanelRow>)}
{extraTooltipColumns && extraTooltipColumns.length > 0 && extraTooltipColumns.map(col => {
const dim = allDimensions ? allDimensions.find(d => d.value === col) : null
return (<PanelRow key={col}><p
style={{
"margin-top": "calc(8px)",
"font-size": "12px",
"font-style": "normal",
"color": "rgb(117, 117, 117)"
}}>{(dim ? dim.label : col) + ": " + "{" + col + "}"}</p></PanelRow>)
})}
</PanelBody>,

<React.Fragment>
{app != 'csv' && <Measures
onFormatChange={this.onFormatChange}
Expand Down
42 changes: 41 additions & 1 deletion plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Flow.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const CategoricalFilter = ({ value, index, items, onUpdateFilterValue }) => {
*/
return a.position - b.position
});
return sortedItems.map(v => <PanelRow> <ToggleControl label={v.value} checked={value.indexOf(v.id) > -1}
return sortedItems.map(v => <PanelRow key={v.id} style={{ alignItems: 'flex-start' }}> <ToggleControl label={<span style={{ whiteSpace: 'normal', wordBreak: 'break-word' }}>{v.value}</span>} checked={value.indexOf(v.id) > -1}
onChange={e => {
onUpdateFilterValue(v.id, index)
}} /></PanelRow>)
Expand Down Expand Up @@ -214,6 +214,7 @@ export class DataLayerSetting extends Component {
filters,
featureJoinAttribute,
apiJoinAttribute,
extraTooltipColumns = [],
type,
useCentroidPoint,
useBreaks,
Expand Down Expand Up @@ -363,6 +364,45 @@ export class DataLayerSetting extends Component {
</div>
</PanelRow>
</PanelBody>,
<React.Fragment>
{app != 'csv' && <PanelBody initialOpen={false} title={__("Extra Tooltip Columns")}>
<PanelRow>
<p style={{
fontSize: "12px",
fontStyle: "italic",
color: "#666",
margin: "0",
}}>
{__("Additional fields to expose as tooltip variables, without adding them as dimensions.")}
</p>
</PanelRow>
Comment thread
Copilot marked this conversation as resolved.
{allDimensions && allDimensions.filter(d => d.value !== 'none'
&& d.value !== flowOrigin && d.value !== flowDestination).map(d => (
<PanelRow key={d.value} style={{ alignItems: 'flex-start' }}>
<CheckboxControl
label={<span style={{ whiteSpace: 'normal', wordBreak: 'break-word' }}>{d.label}</span>}
checked={extraTooltipColumns.indexOf(d.value) > -1}
onChange={(checked) => {
const newValue = checked
? [...extraTooltipColumns, d.value]
: extraTooltipColumns.filter(v => v !== d.value);
onChangeProperty("extraTooltipColumns", newValue)
}}
/>
</PanelRow>
))}
{extraTooltipColumns && extraTooltipColumns.length > 0 && extraTooltipColumns.map(col => {
const dim = allDimensions ? allDimensions.find(d => d.value === col) : null
return (<PanelRow key={col}><p
style={{
"margin-top": "calc(8px)",
"font-size": "12px",
"font-style": "normal",
"color": "rgb(117, 117, 117)"
}}>{(dim ? dim.label : col) + ": " + "{" + col + "}"}</p></PanelRow>)
})}
</PanelBody>}
</React.Fragment>,
<React.Fragment>
{app != 'csv' && <Measures
onFormatChange={this.onFormatChange}
Expand Down
45 changes: 45 additions & 0 deletions plugins/wp-react-blocks-plugin/blocks/d3Map/layers/LatLong.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,7 @@ export class DataLayerSetting extends Component {
format,
featureJoinAttribute,
apiJoinAttribute,
extraTooltipColumns = [],
dimension1,
type,
useCentroidPoint,
Expand Down Expand Up @@ -288,6 +289,39 @@ export class DataLayerSetting extends Component {
</>
}

<PanelRow>
<React.Fragment>
{app != 'csv' && <PanelBody initialOpen={false} title={__("Extra Tooltip Columns")}>
<PanelRow>
<p style={{
fontSize: "12px",
fontStyle: "italic",
color: "#666",
margin: "0",
}}>
{__("Additional fields to expose as tooltip variables, without adding them as dimensions.")}
</p>
</PanelRow>
Comment thread
Copilot marked this conversation as resolved.
{allDimensions && allDimensions.filter(d => d.value !== 'none'
&& d.value !== apiJoinAttribute && d.value !== dimension2).map(d => (
<PanelRow key={d.value} style={{ alignItems: 'flex-start' }}>
<CheckboxControl
label={<span style={{ whiteSpace: 'normal', wordBreak: 'break-word' }}>{d.label}</span>}
checked={extraTooltipColumns.indexOf(d.value) > -1}
onChange={(checked) => {
const newValue = checked
? [...extraTooltipColumns, d.value]
: extraTooltipColumns.filter(v => v !== d.value);
onChangeProperty("extraTooltipColumns", newValue)
}}
/>
</PanelRow>
))}

</PanelBody>}
</React.Fragment>
</PanelRow>

<PanelRow>
<TextareaControl
label={__("Tooltip")}
Expand All @@ -314,6 +348,17 @@ export class DataLayerSetting extends Component {
"color": "rgb(117, 117, 117)"
}}>{"{" + dimension2 + "}"}</p></PanelRow>
}

{extraTooltipColumns && extraTooltipColumns.length > 0 && extraTooltipColumns.map(col => {
const dim = allDimensions ? allDimensions.find(d => d.value === col) : null
return (<PanelRow key={col}><p
style={{
"margin-top": "calc(8px)",
"font-size": "12px",
"font-style": "normal",
"color": "rgb(117, 117, 117)"
}}>{(dim ? dim.label : col) + ": " + "{" + col + "}"}</p></PanelRow>)
})}
</PanelBody>,
<React.Fragment>
{app != 'csv' && <PanelBody initialOpen={false} title={__("Filters")}>
Expand Down
1 change: 1 addition & 0 deletions plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Model.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export const Model = {
},
featureJoinAttribute: 'none',
apiJoinAttribute: 'none',
extraTooltipColumns: [],
useCentroidPoint: true,
patternDiscriminator: 'none',
patternDiscriminatorLabel: null,
Expand Down
7 changes: 4 additions & 3 deletions plugins/wp-react-blocks-plugin/blocks/map/Tooltips.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,10 +293,11 @@ export default class Tooltips extends Component {
)}
</p>
</PanelRow>
{allDimensions && allDimensions.filter(d => d.value !== 'none').map((d) => (
<PanelRow key={d.value}>
{allDimensions && allDimensions.filter(d => d.value !== 'none'
&& d.value !== dimension1 && d.value !== dimension2 && d.value !== dimension3).map((d) => (
<PanelRow key={d.value} style={{ alignItems: 'flex-start' }}>
<CheckboxControl
label={d.label}
label={<span style={{ whiteSpace: 'normal', wordBreak: 'break-word' }}>{d.label}</span>}
checked={extraTooltipColumns.indexOf(d.value) > -1}
onChange={(checked) => {
const newValue = checked
Expand Down
Loading