Map: add tooltip and popup templating (#4443)

client/app/assets/less/inc/visualizations/map.less

@@ -7,3 +7,8 @@
     z-index: 0;
   }
 }
+
+.leaflet-popup-content img {
+  max-width: 100%;
+  height: auto;
+}

client/app/visualizations/map/Editor/FormatSettings.jsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { Section, Input, Checkbox, TextArea, ContextHelp } from "@/components/visualizations/editor";
+import { EditorPropTypes } from "@/visualizations";
+
+function TemplateFormatHint() {
+  // eslint-disable-line react/prop-types
+  return (
+    <ContextHelp placement="topLeft" arrowPointAtCenter>
+      <div className="p-b-5">
+        All query result columns can be referenced using <code>{"{{ column_name }}"}</code> syntax.
+      </div>
+      <div className="p-b-5">Leave this field empty to use default template.</div>
+    </ContextHelp>
+  );
+}
+
+export default function FormatSettings({ options, onOptionsChange }) {
+  const [onOptionsChangeDebounced] = useDebouncedCallback(onOptionsChange, 200);
+
+  const templateFormatHint = <TemplateFormatHint />;
+
+  return (
+    <div className="map-visualization-editor-format-settings">
+      <Section>
+        <Checkbox
+          data-test="Map.Editor.TooltipEnabled"
+          checked={options.tooltip.enabled}
+          onChange={event => onOptionsChange({ tooltip: { enabled: event.target.checked } })}>
+          Show tooltip
+        </Checkbox>
+      </Section>
+
+      <Section>
+        <Input
+          label={<React.Fragment>Tooltip template {templateFormatHint}</React.Fragment>}
+          className="w-100"
+          data-test="Map.Editor.TooltipTemplate"
+          disabled={!options.tooltip.enabled}
+          placeholder="Default template"
+          defaultValue={options.tooltip.template}
+          onChange={event => onOptionsChangeDebounced({ tooltip: { template: event.target.value } })}
+        />
+      </Section>
+
+      <Section>
+        <Checkbox
+          data-test="Map.Editor.PopupEnabled"
+          checked={options.popup.enabled}
+          onChange={event => onOptionsChange({ popup: { enabled: event.target.checked } })}>
+          Show popup
+        </Checkbox>
+      </Section>
+
+      <Section>
+        <TextArea
+          label={<React.Fragment>Popup template {templateFormatHint}</React.Fragment>}
+          className="w-100"
+          data-test="Map.Editor.PopupTemplate"
+          disabled={!options.popup.enabled}
+          rows={4}
+          placeholder="Default template"
+          defaultValue={options.popup.template}
+          onChange={event => onOptionsChangeDebounced({ popup: { template: event.target.value } })}
+        />
+      </Section>
+    </div>
+  );
+}
+
+FormatSettings.propTypes = EditorPropTypes;

client/app/visualizations/map/Editor/index.js

@@ -2,10 +2,12 @@ import createTabbedEditor from "@/components/visualizations/editor/createTabbedE
 
 import GeneralSettings from "./GeneralSettings";
 import GroupsSettings from "./GroupsSettings";
+import FormatSettings from "./FormatSettings";
 import StyleSettings from "./StyleSettings";
 
 export default createTabbedEditor([
   { key: "General", title: "General", component: GeneralSettings },
   { key: "Groups", title: "Groups", component: GroupsSettings },
+  { key: "Format", title: "Format", component: FormatSettings },
   { key: "Style", title: "Style", component: StyleSettings },
 ]);

client/app/visualizations/map/getOptions.js

@@ -14,6 +14,14 @@ const DEFAULT_OPTIONS = {
   backgroundColor: "#356AFF",
   borderColor: "#356AFF",
   bounds: null,
+  tooltip: {
+    enabled: false,
+    template: "",
+  },
+  popup: {
+    enabled: true,
+    template: "",
+  },
 };
 
 export default function getOptions(options) {

client/app/visualizations/map/initMap.js

@@ -1,4 +1,4 @@
-import { isFunction, each, map, toString } from "lodash";
+import { isFunction, each, map, toString, clone } from "lodash";
 import chroma from "chroma-js";
 import L from "leaflet";
 import "leaflet.markercluster";
@@ -12,6 +12,8 @@ import markerIconRetina from "leaflet/dist/images/marker-icon-2x.png";
 import markerShadow from "leaflet/dist/images/marker-shadow.png";
 import "leaflet-fullscreen";
 import "leaflet-fullscreen/dist/leaflet.fullscreen.css";
+import { formatSimpleTemplate } from "@/lib/value-format";
+import { $sanitize } from "@/services/ng";
 import resizeObserver from "@/services/resizeObserver";
 import chooseTextColorForBackground from "@/lib/chooseTextColorForBackground";
 
@@ -96,6 +98,10 @@ function createMarkersLayer(options, { color, points }) {
 
   // create markers
   each(points, ({ lat, lon, row }) => {
+    const rowCopy = clone(row);
+    rowCopy[options.latColName] = lat;
+    rowCopy[options.lonColName] = lon;
+
     let marker;
     if (classify) {
       marker = createHeatpointMarker(lat, lon, color);
@@ -107,12 +113,28 @@ function createMarkersLayer(options, { color, points }) {
       }
     }
 
-    marker.bindPopup(`
-      <ul style="list-style-type: none; padding-left: 0">
-        <li><strong>${lat}, ${lon}</strong>
-        ${map(row, (v, k) => `<li>${k}: ${v}</li>`).join("")}
-      </ul>
-    `);
+    if (options.tooltip.enabled) {
+      if (options.tooltip.template !== "") {
+        marker.bindTooltip($sanitize(formatSimpleTemplate(options.tooltip.template, rowCopy)));
+      } else {
+        marker.bindTooltip(`
+          <strong>${lat}, ${lon}</strong>
+        `);
+      }
+    }
+
+    if (options.popup.enabled) {
+      if (options.popup.template !== "") {
+        marker.bindPopup($sanitize(formatSimpleTemplate(options.popup.template, rowCopy)));
+      } else {
+        marker.bindPopup(`
+          <ul style="list-style-type: none; padding-left: 0">
+            <li><strong>${lat}, ${lon}</strong>
+            ${map(row, (v, k) => `<li>${k}: ${v}</li>`).join("")}
+          </ul>
+        `);
+      }
+    }
     result.addLayer(marker);
   });