From 078260d8e7603c8d68a71429e7d4367abdaf06a8 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Mon, 20 Nov 2023 21:25:23 +1000
Subject: [PATCH] Fix Geo Map visualization (#8311)

- Fixes #8300
- Fixes Geo Map visualization being completely broken
- Fixes Mapbox attribution icon in bottom right being invisible
- Fixes Mapbox attribution button being unclickable

# Important Notes
None
---
 app/gui2/index.html                           | 11 ----------
 .../visualizations/GeoMapVisualization.vue    | 20 ++++++++++++++-----
 app/gui2/src/stores/visualization/index.ts    |  5 ++++-
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/app/gui2/index.html b/app/gui2/index.html
index f2bb9d7e56f..4fd63b22a3e 100644
--- a/app/gui2/index.html
+++ b/app/gui2/index.html
@@ -24,16 +24,5 @@
     <div id="app"></div>
     <div id="enso-dashboard" class="enso-dashboard"></div>
     <script type="module" src="/src/main.ts"></script>
-    <script>
-      // Workaround for Amplify issue:
-      // https://ui.docs.amplify.aws/vue/getting-started/troubleshooting
-      // Using a `define` to replace `global` with `globalThis` triggers a bug in Vite:
-      // https://github.com/vitejs/vite/blob/cb3ab5f465e0de340c4d8b82603e7ee1489b5b62/packages/vite/src/node/plugins/define.ts#L154-L159
-      window.global = window
-      window.process = {
-        env: { DEBUG: undefined },
-      }
-      var exports = {}
-    </script>
   </body>
 </html>
diff --git a/app/gui2/src/components/visualizations/GeoMapVisualization.vue b/app/gui2/src/components/visualizations/GeoMapVisualization.vue
index 9b79f7caccb..6740d3f23f4 100644
--- a/app/gui2/src/components/visualizations/GeoMapVisualization.vue
+++ b/app/gui2/src/components/visualizations/GeoMapVisualization.vue
@@ -404,7 +404,7 @@ function pushPoints(newPoints: Location[]) {
       <button class="image-button"><SvgIcon name="geo_map_distance" /></button>
       <button class="image-button"><SvgIcon name="geo_map_pin" /></button>
     </template>
-    <div ref="mapNode" class="GeoMapVisualization" @wheel.stop></div>
+    <div ref="mapNode" class="GeoMapVisualization" @pointerdown.stop @wheel.stop></div>
   </VisualizationContainer>
 </template>
 
@@ -412,10 +412,20 @@ function pushPoints(newPoints: Location[]) {
 .GeoMapVisualization {
   height: 100%;
 }
-</style>
 
-<style>
-.GeoMapVisualization > .mapboxgl-map {
-  border-radius: 16px;
+:deep(.mapboxgl-map) {
+  border-radius: var(--radius-default);
+}
+
+:deep(.mapboxgl-ctrl-attrib.mapboxgl-compact) {
+  min-height: 24px;
+}
+
+/* Copied from mapbox-gl CSS. This is required because Tailwind's global CSS reset resets
+ * `background-color` and `background-image` to default values for buttons, and Mapbox's
+ * selector has lower specificity. */
+:deep(.mapboxgl-ctrl-attrib-button.mapboxgl-ctrl-attrib-button) {
+  background-color: hsla(0, 0%, 100%, 0.5);
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E%3Cpath d='M4 10a6 6 0 1012 0 6 6 0 10-12 0m5-3a1 1 0 102 0 1 1 0 10-2 0m0 3a1 1 0 112 0v3a1 1 0 11-2 0'/%3E%3C/svg%3E");
 }
 </style>
diff --git a/app/gui2/src/stores/visualization/index.ts b/app/gui2/src/stores/visualization/index.ts
index 8b080f53212..48c9ee6720a 100644
--- a/app/gui2/src/stores/visualization/index.ts
+++ b/app/gui2/src/stores/visualization/index.ts
@@ -166,7 +166,10 @@ export const useVisualizationStore = defineStore('visualization', () => {
             currentProjectProtocol + pathString,
             await projectRoot,
             await proj.dataConnection,
-          )
+          ).then(async (viz) => {
+            await loadScripts(viz)
+            return viz
+          })
           if (key) cache.set(key, vizPromise)
           const viz = await vizPromise
           if (abortController.signal.aborted) break