From babddd768dd779d68b40d039c3dce2e0499eb79b Mon Sep 17 00:00:00 2001
From: James Dunkerley <jdunkerley@users.noreply.github.com>
Date: Tue, 3 Sep 2024 22:17:08 +0200
Subject: [PATCH] Couple of small fixes for vizzes. (#10963)

- Improve logic for white space rendering (render leading/trailing in partial, change the tab rendering).
- Escape HTML characters.
- Fix for the geo viz starting zoom and center.

![image](https://github.com/user-attachments/assets/ac8c8893-14b5-4242-ba82-b821797546a1)

![image](https://github.com/user-attachments/assets/a179b4ad-d295-4783-97d9-803b6958cb95)

![image](https://github.com/user-attachments/assets/e4be7a81-28ff-4e79-b6e0-9aadae059270)

(cherry picked from commit 26678f3e717bdb9add4e4f0d2aa006e693a9e7f7)
---
 .../visualizations/GeoMapVisualization.vue    | 24 +++++++++++++++----
 .../visualizations/TableVisualization.vue     | 22 ++++++++++++-----
 2 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/app/gui2/src/components/visualizations/GeoMapVisualization.vue b/app/gui2/src/components/visualizations/GeoMapVisualization.vue
index 876c45eacedd..26a6f81bf751 100644
--- a/app/gui2/src/components/visualizations/GeoMapVisualization.vue
+++ b/app/gui2/src/components/visualizations/GeoMapVisualization.vue
@@ -119,6 +119,7 @@ const LABEL_COLOR = `rgba(0, 0, 0, 0.8)`
 const DEFAULT_MAP_STYLE = 'mapbox://styles/mapbox/light-v9'
 
 const DEFAULT_MAP_ZOOM = 11
+const DEFAULT_MAX_MAP_ZOOM = 18
 const ACCENT_COLOR: Color = [78, 165, 253]
 
 const dataPoints = ref<LocationWithPosition[]>([])
@@ -166,9 +167,24 @@ function updateState(data: Data) {
   }
   const center = centerPoint()
 
+  const viewPort = new deck.WebMercatorViewport({
+    width: mapNode.value?.clientWidth ?? 600,
+    height: mapNode.value?.clientHeight ?? 400,
+    longitude: center.longitude,
+    latitude: center.latitude,
+    zoom: DEFAULT_MAP_ZOOM,
+    pitch: 0,
+  }).fitBounds(
+    [
+      [center.minX, center.minY],
+      [center.maxX, center.maxY],
+    ],
+    { padding: 10, maxZoom: DEFAULT_MAX_MAP_ZOOM },
+  )
+
   latitude.value = center.latitude
   longitude.value = center.longitude
-  zoom.value = DEFAULT_MAP_ZOOM
+  zoom.value = viewPort.zoom
   mapStyle.value = DEFAULT_MAP_STYLE
   pitch.value = 0
   controller.value = true
@@ -303,16 +319,16 @@ function centerPoint() {
   {
     const xs = dataPoints.value.map((p) => p.position[0])
     minX = Math.min(...xs)
-    maxX = Math.min(...xs)
+    maxX = Math.max(...xs)
   }
   {
     const ys = dataPoints.value.map((p) => p.position[1])
     minY = Math.min(...ys)
-    maxY = Math.min(...ys)
+    maxY = Math.max(...ys)
   }
   let longitude = (minX + maxX) / 2
   let latitude = (minY + maxY) / 2
-  return { latitude, longitude }
+  return { latitude, longitude, minX, maxX, minY, maxY }
 }
 
 /**
diff --git a/app/gui2/src/components/visualizations/TableVisualization.vue b/app/gui2/src/components/visualizations/TableVisualization.vue
index 3f4fd86fc91b..c16a3c129916 100644
--- a/app/gui2/src/components/visualizations/TableVisualization.vue
+++ b/app/gui2/src/components/visualizations/TableVisualization.vue
@@ -210,25 +210,35 @@ function formatNumber(params: ICellRendererParams) {
 }
 
 function formatText(params: ICellRendererParams) {
+  const htmlEscaped = params.value
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replace(
+      /https?:\/\/([-()_.!~*';/?:@&=+$,A-Za-z0-9])+/g,
+      (url: string) => `<a href="${url}" target="_blank" class="link">${url}</a>`,
+    )
+
   if (textFormatterSelected.value === TextFormatOptions.Off) {
-    return params.value
+    return htmlEscaped.replace(/^\s+|\s+$/g, '&nbsp;')
   }
+
   const partialMappings = {
     '\r': '<span style="color: #df8800">␍</span> <br>',
     '\n': '<span style="color: #df8800;">␊</span> <br>',
-    '\t': '<span style="white-space: break-spaces;">    </span>',
+    '\t': '<span style="color: #df8800; white-space: break-spaces;">&#8594;  |</span>',
   }
   const fullMappings = {
     '\r': '<span style="color: #df8800">␍</span> <br>',
     '\n': '<span style="color: #df8800">␊</span> <br>',
-    '\t': '<span style="color: #df8800; white-space: break-spaces;">&#8594;   </span>',
+    '\t': '<span style="color: #df8800; white-space: break-spaces;">&#8594;  |</span>',
   }
 
   const replaceSpaces =
     textFormatterSelected.value === TextFormatOptions.On ?
-      params.value.replaceAll(' ', '<span style="color: #df8800">&#183;</span>')
-    : params.value.replace(/ {2,}/g, function (match: string) {
-        return `<span style="color: #df8800">${'&#183;'.repeat(match.length)}</span>`
+      htmlEscaped.replaceAll(' ', '<span style="color: #df8800">&#183;</span>')
+    : htmlEscaped.replace(/ \s+|^ +| +$/g, function (match: string) {
+        return `<span style="color: #df8800">${match.replaceAll(' ', '&#183;')}</span>`
       })
 
   const replaceReturns = replaceSpaces.replace(