From 13a1bd623a82de86066bfac75df0723f99391676 Mon Sep 17 00:00:00 2001
From: Timothy Mugo <tmugo@developmentgateway.org>
Date: Wed, 26 Aug 2026 12:42:20 +0300
Subject: [PATCH] feat: implement ability to select extra columns for tooltips

---
 .../blocks/map/BlockSave.js                   |  2 +
 .../blocks/map/Tooltips.js                    | 69 +++++++++++++++----
 .../blocks/map/index.js                       |  4 ++
 3 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/plugins/wp-react-blocks-plugin/blocks/map/BlockSave.js b/plugins/wp-react-blocks-plugin/blocks/map/BlockSave.js
index d85842c7..ce3a0542 100644
--- a/plugins/wp-react-blocks-plugin/blocks/map/BlockSave.js
+++ b/plugins/wp-react-blocks-plugin/blocks/map/BlockSave.js
@@ -11,6 +11,7 @@ const SaveComponent = (props) => {
             dimension1,
             dimension2,
             dimension3,
+            extraTooltipColumns,
             measures,
             filters,
             app,
@@ -154,6 +155,7 @@ const SaveComponent = (props) => {
              data-dimension1={dimension1}
              data-dimension2={dimension2}
              data-dimension3={dimension3}
+             data-extra-tooltip-columns={encodeURIComponent(JSON.stringify(extraTooltipColumns))}
              data-enabled-layers={encodeURIComponent(JSON.stringify(enabledLayers))}
              data-point-label-color={pointLabelColor}
              data-point-label-format={pointLabelFormat}
diff --git a/plugins/wp-react-blocks-plugin/blocks/map/Tooltips.js b/plugins/wp-react-blocks-plugin/blocks/map/Tooltips.js
index 66ba432a..8ff4a520 100644
--- a/plugins/wp-react-blocks-plugin/blocks/map/Tooltips.js
+++ b/plugins/wp-react-blocks-plugin/blocks/map/Tooltips.js
@@ -2,6 +2,7 @@ import { Component } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 import {
   Button,
+  CheckboxControl,
   PanelBody,
   PanelRow,
   SelectControl,
@@ -18,6 +19,7 @@ function APITooltipGuide({
   dimension1 = "none",
   dimension2 = "none",
   dimension3 = "none",
+  extraTooltipColumns = [],
   filters = [],
 }) {
   return (
@@ -90,32 +92,30 @@ function APITooltipGuide({
         </PanelRow>
       )}
 
-      <Divider height={8}/>
-
-      <Text size="xSmall" style={{ fontSize: '12px', marginTop: '4px'}}>MEASURES</Text> 
-      {allMeasures &&
-        allMeasures.map((m) => (
-          <PanelRow key={m}>
+      {extraTooltipColumns && extraTooltipColumns.length > 0 && extraTooltipColumns.map((col) => {
+        const dim = allDimensions.find((d) => d.value === col);
+        return (
+          <PanelRow key={col}>
             <p
               style={{
                 "margin-top": "4px",
-                "font-size": "11px",
+                "font-size": "12px",
                 "font-style": "normal",
                 color: "rgb(117, 117, 117)",
               }}
             >
-              {m.label} -&gt; {"{" + m.value + "}"}
+              {(dim ? dim.label : col)}: {"{" + col + "}"}
             </p>
           </PanelRow>
-        ))}
+        );
+      })}
 
       <Divider height={8}/>
-      
-      <Text size="xSmall" style={{ fontSize: '12px', marginTop: '4px'}}>DIMENSIONS</Text>
 
-      {allDimensions &&
-        allDimensions.map((d) => (
-          <PanelRow key={d}>
+      <Text size="xSmall" style={{ fontSize: '12px', marginTop: '4px'}}>MEASURES</Text> 
+      {allMeasures &&
+        allMeasures.map((m) => (
+          <PanelRow key={m}>
             <p
               style={{
                 "margin-top": "4px",
@@ -124,7 +124,7 @@ function APITooltipGuide({
                 color: "rgb(117, 117, 117)",
               }}
             >
-              {d.label} -&gt; {"{" + d.value + "}"}
+              {m.label} -&gt; {"{" + m.value + "}"}
             </p>
           </PanelRow>
         ))}
@@ -219,6 +219,7 @@ export default class Tooltips extends Component {
         dimension1,
         dimension2,
         dimension3,
+        extraTooltipColumns,
         measures,
         filters,
       },
@@ -273,16 +274,54 @@ export default class Tooltips extends Component {
             <div style={{ marginTop: "4px", marginBottom: "4px" }}/>
             {app === "csv" && <CSVTooltipGuide />}
 
+            {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>
+                {allDimensions && allDimensions.filter(d => d.value !== 'none').map((d) => (
+                  <PanelRow key={d.value}>
+                    <CheckboxControl
+                      label={d.label}
+                      checked={extraTooltipColumns.indexOf(d.value) > -1}
+                      onChange={(checked) => {
+                        const newValue = checked
+                          ? [...extraTooltipColumns, d.value]
+                          : extraTooltipColumns.filter((v) => v !== d.value);
+                        setAttributes({ extraTooltipColumns: newValue });
+                      }}
+                    />
+                  </PanelRow>
+                ))}
+              </PanelBody>
+            )}
+
             {app !== "csv" && (
               <APITooltipGuide
                 allMeasures={allMeasures}
                 dimension1={dimension1}
                 dimension2={dimension2}
                 dimension3={dimension3}
+                extraTooltipColumns={extraTooltipColumns}
                 filters={filters}
                 allDimensions={allDimensions}
               />
             )}
+            
             <PanelRow>
               <TextareaControl
                 label={__("Tooltip Format")}
diff --git a/plugins/wp-react-blocks-plugin/blocks/map/index.js b/plugins/wp-react-blocks-plugin/blocks/map/index.js
index 7de80470..79cd7827 100644
--- a/plugins/wp-react-blocks-plugin/blocks/map/index.js
+++ b/plugins/wp-react-blocks-plugin/blocks/map/index.js
@@ -39,6 +39,10 @@ registerBlockType(BLOCKS_NS + '/map',
                 type: 'String',
                 default: 'none'
             },
+            extraTooltipColumns: {
+                type: 'Array',
+                default: []
+            },
             app: {
                 type: 'String',
                 default: "csv"