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

[timothygachengo]

…s is used for the tooltip variables

Description

Add Extra Tooltip Columns configuration to the d3Map block for single dimension selections
Related UI PR: devgateway/data-viz-ui#293

Type of change

• Bug fix (fix:)
• New feature (feat:)
• Breaking change (BREAKING CHANGE:)
• Refactor / chore (refactor: / chore:)
• Documentation update (docs:)

Affected package(s)

• @devgateway/dvz-wp-commons
• @devgateway/create-wp-customizer
• @devgateway/upgrade-wp-customizer
• plugins/wp-react-blocks-plugin
• plugins/wp-react-custom-api
• plugins/wp-react-custom-rest-menu
• Other plugin / theme / Docker (no changeset needed)

Checklist

• PR title follows Conventional Commits format
• pnpm build passes locally
• No hardcoded credentials, internal URLs, client names, or PII introduced
• Any new dependency has a GPL-2.0-or-later-compatible license (MIT, BSD, Apache-2.0, ISC are all compatible)

[Copilot]

🟡 Changes recommended

The d3Map layer UI introduces a JSX stray comma that will render in the inspector and multiple React style objects using kebab-case properties that will be ignored, plus missing React keys in updated list rendering.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

This PR adds an “Extra Tooltip Columns” configuration to the d3Map block layer settings so users can expose additional dataset fields as tooltip variables without selecting them as dimensions, and it tightens the equivalent selection UI in the existing map tooltip editor.

Changes:

• Added extraTooltipColumns to the d3Map layer model defaults and surfaced it in the Data / Flow / LatLong layer inspectors.
• Rendered selected extra tooltip columns as available {column} variables in the tooltip variable hints.
• Updated the map block tooltip UI to avoid offering already-selected dimensions as “extra” columns and improved long-label wrapping.

File summaries

File	Description
plugins/wp-react-blocks-plugin/blocks/map/Tooltips.js	Filters extra-tooltip options to avoid selected dimensions and improves checkbox label wrapping.
plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Model.js	Adds extraTooltipColumns default to layer model.
plugins/wp-react-blocks-plugin/blocks/d3Map/layers/LatLong.jsx	Adds “Extra Tooltip Columns” selector + variable hints for LatLong layers.
plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Flow.jsx	Adds “Extra Tooltip Columns” selector + variable hints and improves filter label wrapping.
plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx	Adds “Extra Tooltip Columns” selector + variable hints and improves filter label wrapping.

Review details

Suppressed comments (3)

plugins/wp-react-blocks-plugin/blocks/d3Map/layers/LatLong.jsx:360

• React style objects should use camelCased property names; "margin-top"/"font-size"/"font-style" will be ignored. Use marginTop/fontSize/fontStyle/etc. here.

                        "margin-top": "calc(8px)",
                        "font-size": "12px",
                        "font-style": "normal",
                        "color": "rgb(117, 117, 117)"
                    }}>{(dim ? dim.label : col) + ": " + "{" + col + "}"}</p></PanelRow>)

plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx:404

• React style objects should use camelCased property names; "margin-top"/"font-size"/"font-style" will be ignored. Use marginTop/fontSize/fontStyle/etc. here.

                        "margin-top": "calc(8px)",
                        "font-size": "12px",
                        "font-style": "normal",
                        "color": "rgb(117, 117, 117)"
                    }}>{(dim ? dim.label : col) + ": " + "{" + col + "}"}</p></PanelRow>)

plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Flow.jsx:402

• React style objects should use camelCased property names; "margin-top"/"font-size"/"font-style" will be ignored. Use marginTop/fontSize/fontStyle/etc. here.

                            "margin-top": "calc(8px)",
                            "font-size": "12px",
                            "font-style": "normal",
                            "color": "rgb(117, 117, 117)"
                        }}>{(dim ? dim.label : col) + ": " + "{" + col + "}"}</p></PanelRow>)

• Files reviewed: 5/5 changed files
• Comments generated: 6
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

🟡 Changes recommended

The new “Extra Tooltip Columns” <p> blocks in multiple d3Map layer components contain invalid JSX (will not compile), and there are also minor React list-key issues in the updated filter mappings.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Review details

Suppressed comments (3)

plugins/wp-react-blocks-plugin/blocks/d3Map/layers/LatLong.jsx:322

• There is a stray comma after </React.Fragment> inside <PanelRow>, which will render as a literal comma in the UI. It should be removed.

                </React.Fragment>

plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Flow.jsx:44

• sortedItems.map(...) returns a list of <PanelRow> elements without a key, which triggers React warnings and can cause unstable list reconciliation. Add a stable key (e.g. v.id) to the <PanelRow>.

        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}

plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx:46

• sortedItems.map(...) returns a list of <PanelRow> elements without a key, which triggers React warnings and can cause unstable list reconciliation. Add a stable key (e.g. v.id) to the <PanelRow>.

        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}

• Files reviewed: 5/5 changed files
• Comments generated: 3
• Review effort level: Lite

[Copilot]

🔵 Needs a closer look

The newly added “Extra Tooltip Columns” panels in multiple D3 Map layer settings contain JSX syntax errors that will break compilation.

Review details

Suppressed comments (3)

plugins/wp-react-blocks-plugin/blocks/d3Map/layers/LatLong.jsx:303

• The i18n text is accidentally placed inside the style={{...}} object, which makes this JSX invalid and will break the build. The translated string should be rendered as the <p> contents (after the >), not as part of the style object.

                                color: "#666",
                                margin: "0",
                            
                                {__("Additional fields to expose as tooltip variables, without adding them as dimensions.")}
                            </p>

plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx:358

• The __() call is embedded inside the style object, producing invalid JSX (and a syntax error). Move the translated text out of the style object and into the <p> contents.

                                color: "#666",
                                margin: "0",
                            
                                {__("Additional fields to expose as tooltip variables, without adding them as dimensions.")}
                            </p>

plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Flow.jsx:377

• This <p> has a syntax error: the translated text is inside the style={{...}} object. The __() output needs to be rendered as children of the <p> element, not part of the style object.

                        color: "#666",
                        margin: "0",
                    
                        {__("Additional fields to expose as tooltip variables, without adding them as dimensions.")}
                    </p>

• Files reviewed: 5/5 changed files
• Comments generated: 0 new
• Review effort level: Lite

[Copilot]

🔵 Needs a closer look

Two of the newly added “Extra Tooltip Columns” panels contain invalid JSX (unclosed style={{...}} blocks), which will break the editor build/runtime.

Review details

Suppressed comments (2)

plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx:355

• JSX is currently invalid here: the

  tag's style={{ ... }} object never closes before rendering the translated string, which will break the editor build/runtime.

                            <p style={{
                                fontSize: "12px",
                                fontStyle: "italic",
                                color: "#666",
                                margin: "0",

plugins/wp-react-blocks-plugin/blocks/d3Map/layers/LatLong.jsx:300

• JSX is currently invalid here: the

  tag's style={{ ... }} object never closes before rendering the translated string, which will break the editor build/runtime.

                            <p style={{
                                fontSize: "12px",
                                fontStyle: "italic",
                                color: "#666",
                                margin: "0",

• Files reviewed: 5/5 changed files
• Comments generated: 0 new
• Review effort level: Lite

[Copilot]

🔵 Needs a closer look

There are confirmed React UI issues in the new code (invalid inline-style keys and a questionable PanelBody-in-PanelRow hierarchy) that should be corrected to avoid broken styling/layout in the editor.

Review details

Suppressed comments (5)

Previously missed (2) — in code that hasn't changed since the last review.

plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx:349

• PanelBody (Extra Tooltip Columns) is wrapped by a PanelRow/React.Fragment wrapper. PanelRow is intended for laying out individual controls within a PanelBody; using it to wrap a PanelBody is an unusual component hierarchy and can lead to layout/accordion issues. Consider rendering this PanelBody directly (or as a separate sibling panel like in Flow.jsx) instead of nesting it under PanelRow.
  plugins/wp-react-blocks-plugin/blocks/d3Map/layers/LatLong.jsx:294
• PanelBody (Extra Tooltip Columns) is nested inside a PanelRow/React.Fragment wrapper. PanelRow is intended to wrap controls within a PanelBody, and wrapping a PanelBody with PanelRow is inconsistent with other panels here (e.g., Flow.jsx) and can cause unexpected spacing/accordion behavior. Render this PanelBody directly (or as a sibling panel in the returned array) without the surrounding PanelRow/fragment wrapper.

plugins/wp-react-blocks-plugin/blocks/d3Map/layers/LatLong.jsx:359

• React style objects should use camelCase property names. Using hyphenated keys like "margin-top" / "font-size" / "font-style" will be ignored by React (and may log warnings), so these styles likely won’t apply.

                    style={{
                        "margin-top": "calc(8px)",
                        "font-size": "12px",
                        "font-style": "normal",
                        "color": "rgb(117, 117, 117)"

plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx:403

• React style objects should use camelCase property names. Hyphenated keys like "margin-top" / "font-size" / "font-style" are not valid in React inline styles and will be ignored.

                    style={{
                        "margin-top": "calc(8px)",
                        "font-size": "12px",
                        "font-style": "normal",
                        "color": "rgb(117, 117, 117)"

plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Flow.jsx:401

• React style objects should use camelCase property names. Hyphenated keys like "margin-top" / "font-size" / "font-style" won’t apply in React inline styles.

                        style={{
                            "margin-top": "calc(8px)",
                            "font-size": "12px",
                            "font-style": "normal",
                            "color": "rgb(117, 117, 117)"

• Files reviewed: 5/5 changed files
• Comments generated: 0 new
• Review effort level: Lite