From ccf7b1f38886431a9e3282a63fcf43a6b7605ba0 Mon Sep 17 00:00:00 2001
From: Yushan Mu <93682606+yushan-mu@users.noreply.github.com>
Date: Fri, 6 Dec 2024 14:32:48 -0500
Subject: [PATCH] Fixes issue #992: Allow pasting GeoJSON links (#996)

Edited description, strict equality, and test timeouts

allow pasting of links ending in json or geojson which may have different content type

Added tests for files with (geo)json extensions

Cleaned up and synched tests
---
 src/mapml/utils/Util.js                      |  61 ++--
 test/e2e/data/geojson/geojsonFeature.geojson | 276 +++++++++++++++++++
 test/e2e/data/geojson/geojsonPoint.json      |  54 ++++
 test/e2e/mapml-viewer/mapml-viewer.html      |   4 +
 test/e2e/mapml-viewer/mapml-viewer.test.js   |  61 ++++
 test/e2e/web-map/map.html                    |   4 +
 test/e2e/web-map/map.test.js                 |  61 ++++
 test/server.js                               |  44 +++
 8 files changed, 547 insertions(+), 18 deletions(-)
 create mode 100644 test/e2e/data/geojson/geojsonFeature.geojson
 create mode 100644 test/e2e/data/geojson/geojsonPoint.json

diff --git a/src/mapml/utils/Util.js b/src/mapml/utils/Util.js
index 34ac1352a..9e18790a9 100644
--- a/src/mapml/utils/Util.js
+++ b/src/mapml/utils/Util.js
@@ -646,29 +646,54 @@ export const Util = {
     return [column, row];
   },
 
-  // Pastes text to a mapml-viewer/map element(mapEl), text can be a mapml link, geojson, or a map-layer
-  //    used for pasting layers through ctrl+v, drag/drop, and pasting through the contextmenu
+  // Pastes text to a mapml-viewer/map element(mapEl), text can be a mapml link, GeoJSON link, GeoJSON,
+  //    or a map-layer used for pasting layers through ctrl+v, drag/drop, and pasting through the contextmenu
   // _pasteLayer: HTMLElement Str -> None
   // Effects: append a map-layer element to mapEl, if it is valid
-  _pasteLayer: function (mapEl, text) {
+  _pasteLayer: async function (mapEl, text) {
     try {
+      // try to process text as a link
       new URL(text);
-      // create a new <map-layer> child of the <mapml-viewer> element
-      let l =
-        '<map-layer src="' +
-        text +
-        '" label="' +
-        mapEl.locale.dfLayer +
-        '" checked=""></map-layer>';
-      mapEl.insertAdjacentHTML('beforeend', l);
-      mapEl.lastElementChild.whenReady().catch(() => {
-        if (mapEl) {
-          // should invoke lifecyle callbacks automatically by removing it from DOM
-          mapEl.removeChild(mapEl.lastChild);
+      // get the content type of the link
+      const response = await fetch(text);
+      const contentType = response.headers.get('Content-Type');
+      // get the file extension by removing any query strings that may exist
+      let ext = response.url
+        .split('?')[0]
+        .split('#')[0]
+        .split('.')
+        .pop()
+        .toLowerCase();
+      if (
+        contentType === 'application/json' ||
+        contentType === 'application/geo+json' ||
+        ext === 'geojson' ||
+        ext === 'json'
+      ) {
+        // try to process as GeoJSON
+        const textContent = await response.text();
+        try {
+          mapEl.geojson2mapml(JSON.parse(textContent));
+        } catch {
+          console.log('Error parsing GeoJSON from: ' + text);
         }
-        // garbage collect it
-        l = null;
-      });
+      } else {
+        // try to process as a mapml file
+        // create a new <map-layer> child of the <mapml-viewer> element
+        let l =
+          '<map-layer src="' +
+          text +
+          '" label="' +
+          mapEl.locale.dfLayer +
+          '" checked=""></map-layer>';
+        mapEl.insertAdjacentHTML('beforeend', l);
+        mapEl.lastElementChild.whenReady().catch(() => {
+          if (mapEl) {
+            // should invoke lifecyle callbacks automatically by removing it from DOM
+            mapEl.removeChild(mapEl.lastChild);
+          }
+        });
+      }
     } catch (err) {
       text = text
         .replace(/(<!--.*?-->)|(<!--[\S\s]+?-->)|(<!--[\S\s]*?$)/g, '')
diff --git a/test/e2e/data/geojson/geojsonFeature.geojson b/test/e2e/data/geojson/geojsonFeature.geojson
new file mode 100644
index 000000000..e3d01eaf8
--- /dev/null
+++ b/test/e2e/data/geojson/geojsonFeature.geojson
@@ -0,0 +1,276 @@
+{
+    "type": "FeatureCollection",
+    "features": [
+        {
+            "type": "Feature",
+            "properties": {},
+            "geometry": {
+                "type": "Polygon",
+                "coordinates": [
+                    [
+                        [
+                            -75.70780569986765,
+                            45.5920359149936
+                        ],
+                        [
+                            -75.73525628546578,
+                            45.59108894489039
+                        ],
+                        [
+                            -75.76243975673378,
+                            45.58825724974241
+                        ],
+                        [
+                            -75.7890916789868,
+                            45.58356838256187
+                        ],
+                        [
+                            -75.81495294677363,
+                            45.57706795783245
+                        ],
+                        [
+                            -75.83977237381661,
+                            45.568819194325386
+                        ],
+                        [
+                            -75.86330919462635,
+                            45.558902282226015
+                        ],
+                        [
+                            -75.8853354504608,
+                            45.547413581621775
+                        ],
+                        [
+                            -75.90563823403548,
+                            45.534464661229705
+                        ],
+                        [
+                            -75.92402176947941,
+                            45.520181187936664
+                        ],
+                        [
+                            -75.94030930641726,
+                            45.504701679264016
+                        ],
+                        [
+                            -75.95434480968453,
+                            45.488176132233605
+                        ],
+                        [
+                            -75.96599442899006,
+                            45.470764543288006
+                        ],
+                        [
+                            -75.97514773576597,
+                            45.45263533489585
+                        ],
+                        [
+                            -75.98171871743018,
+                            45.433963705246484
+                        ],
+                        [
+                            -75.98564652227138,
+                            45.414929918005164
+                        ],
+                        [
+                            -75.98689595109964,
+                            45.39571754946352
+                        ],
+                        [
+                            -75.98545769463844,
+                            45.37651171058487
+                        ],
+                        [
+                            -75.98134831832753,
+                            45.35749726141881
+                        ],
+                        [
+                            -75.97460999872716,
+                            45.33885703515545
+                        ],
+                        [
+                            -75.9653100180382,
+                            45.320770088720245
+                        ],
+                        [
+                            -75.95354002536402,
+                            45.3034099962873
+                        ],
+                        [
+                            -75.93941507522847,
+                            45.28694320143128
+                        ],
+                        [
+                            -75.92307245552915,
+                            45.271527442856325
+                        ],
+                        [
+                            -75.90467031854962,
+                            45.25731026775368
+                        ],
+                        [
+                            -75.88438612988863,
+                            45.24442764585996
+                        ],
+                        [
+                            -75.86241495120186,
+                            45.23300269623039
+                        ],
+                        [
+                            -75.8389675735094,
+                            45.22314453761789
+                        ],
+                        [
+                            -75.81426851851788,
+                            45.21494727217167
+                        ],
+                        [
+                            -75.78855392596125,
+                            45.2084891109474
+                        ],
+                        [
+                            -75.76206934539545,
+                            45.203831648465346
+                        ],
+                        [
+                            -75.73506745121092,
+                            45.2010192922696
+                        ],
+                        [
+                            -75.70780569986765,
+                            45.20007885213734
+                        ],
+                        [
+                            -75.68054394852436,
+                            45.2010192922696
+                        ],
+                        [
+                            -75.65354205433984,
+                            45.203831648465346
+                        ],
+                        [
+                            -75.62705747377403,
+                            45.2084891109474
+                        ],
+                        [
+                            -75.6013428812174,
+                            45.21494727217167
+                        ],
+                        [
+                            -75.5766438262259,
+                            45.22314453761789
+                        ],
+                        [
+                            -75.55319644853343,
+                            45.23300269623039
+                        ],
+                        [
+                            -75.53122526984666,
+                            45.24442764585996
+                        ],
+                        [
+                            -75.51094108118566,
+                            45.25731026775368
+                        ],
+                        [
+                            -75.49253894420613,
+                            45.271527442856325
+                        ],
+                        [
+                            -75.47619632450683,
+                            45.28694320143128
+                        ],
+                        [
+                            -75.46207137437128,
+                            45.3034099962873
+                        ],
+                        [
+                            -75.45030138169709,
+                            45.320770088720245
+                        ],
+                        [
+                            -75.44100140100812,
+                            45.33885703515545
+                        ],
+                        [
+                            -75.43426308140776,
+                            45.35749726141881
+                        ],
+                        [
+                            -75.43015370509684,
+                            45.37651171058487
+                        ],
+                        [
+                            -75.42871544863564,
+                            45.39571754946352
+                        ],
+                        [
+                            -75.4299648774639,
+                            45.414929918005164
+                        ],
+                        [
+                            -75.4338926823051,
+                            45.433963705246484
+                        ],
+                        [
+                            -75.44046366396931,
+                            45.45263533489585
+                        ],
+                        [
+                            -75.44961697074523,
+                            45.470764543288006
+                        ],
+                        [
+                            -75.46126659005076,
+                            45.488176132233605
+                        ],
+                        [
+                            -75.47530209331804,
+                            45.504701679264016
+                        ],
+                        [
+                            -75.49158963025587,
+                            45.520181187936664
+                        ],
+                        [
+                            -75.5099731656998,
+                            45.534464661229705
+                        ],
+                        [
+                            -75.53027594927448,
+                            45.547413581621775
+                        ],
+                        [
+                            -75.55230220510894,
+                            45.558902282226015
+                        ],
+                        [
+                            -75.57583902591867,
+                            45.568819194325386
+                        ],
+                        [
+                            -75.60065845296165,
+                            45.57706795783245
+                        ],
+                        [
+                            -75.6265197207485,
+                            45.58356838256187
+                        ],
+                        [
+                            -75.6531716430015,
+                            45.58825724974241
+                        ],
+                        [
+                            -75.6803551142695,
+                            45.59108894489039
+                        ],
+                        [
+                            -75.70780569986765,
+                            45.5920359149936
+                        ]
+                    ]
+                ]
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/test/e2e/data/geojson/geojsonPoint.json b/test/e2e/data/geojson/geojsonPoint.json
new file mode 100644
index 000000000..1ec19c57b
--- /dev/null
+++ b/test/e2e/data/geojson/geojsonPoint.json
@@ -0,0 +1,54 @@
+{
+    "type": "FeatureCollection",
+    "features": [
+        {
+            "id": "1535.115.1",
+            "type": "Feature",
+            "geometry": {
+                "coordinates": [
+                    -139.12777777777777,
+                    64.04305555555555
+                ],
+                "type": "Point"
+            },
+            "properties": {
+                "CURRENT_FLAG": "Y"
+            }
+        }
+    ],
+    "numberMatched": 592926,
+    "numberReturned": 1,
+    "links": [
+        {
+            "type": "application/geo+json",
+            "rel": "self",
+            "title": "This document as GeoJSON",
+            "href": "https://api.weather.gc.ca/collections/climate-normals/items?f=json&limit=10&lang=en"
+        },
+        {
+            "rel": "alternate",
+            "type": "application/ld+json",
+            "title": "This document as RDF (JSON-LD)",
+            "href": "https://api.weather.gc.ca/collections/climate-normals/items?f=jsonld&limit=10&lang=en"
+        },
+        {
+            "type": "text/html",
+            "rel": "alternate",
+            "title": "This document as HTML",
+            "href": "https://api.weather.gc.ca/collections/climate-normals/items?f=html&limit=10&lang=en"
+        },
+        {
+            "type": "application/geo+json",
+            "rel": "next",
+            "title": "items (next)",
+            "href": "https://api.weather.gc.ca/collections/climate-normals/items?offset=10&limit=10&lang=en"
+        },
+        {
+            "type": "application/json",
+            "title": "1981-2010 Climate Normals",
+            "rel": "collection",
+            "href": "https://api.weather.gc.ca/collections/climate-normals/items"
+        }
+    ],
+    "timeStamp": "2024-10-09T17:03:07.763201Z"
+}
\ No newline at end of file
diff --git a/test/e2e/mapml-viewer/mapml-viewer.html b/test/e2e/mapml-viewer/mapml-viewer.html
index 03a7a3101..d2243bbad 100644
--- a/test/e2e/mapml-viewer/mapml-viewer.html
+++ b/test/e2e/mapml-viewer/mapml-viewer.html
@@ -43,6 +43,10 @@
   <textarea id="invalidLink" name="message" rows="10" cols="100">https://example.com</textarea>
   <textarea id="invalidText" name="message" rows="10" cols="100">asdasdasdadsasd</textarea>
   <textarea id="copyLink" name="message" rows="10" cols="100">http://localhost:30001/data/query/DouglasFir</textarea>
+  <textarea id="linkGeoJSONContentType" name="message" rows="10" cols="100">http://localhost:30001/data/query/geojsonFeature</textarea>
+  <textarea id="linkJSONContentType" name="message" rows="10" cols="100">http://localhost:30001/data/query/geojsonPoint</textarea>
+  <textarea id="linkGeoJSONExt" name="message" rows="10" cols="100">http://localhost:30001/data/query/geojsonFeature.geojson</textarea>
+  <textarea id="linkJSONExt" name="message" rows="10" cols="100">http://localhost:30001/data/query/geojsonPoint.json</textarea>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/test/e2e/mapml-viewer/mapml-viewer.test.js b/test/e2e/mapml-viewer/mapml-viewer.test.js
index 56663c639..1911cfede 100644
--- a/test/e2e/mapml-viewer/mapml-viewer.test.js
+++ b/test/e2e/mapml-viewer/mapml-viewer.test.js
@@ -156,6 +156,7 @@ test.describe('Playwright mapml-viewer Element Tests', () => {
 
     await page.click('body > mapml-viewer');
     await page.keyboard.press('Control+v');
+    await page.waitForTimeout(1000);
     const layerCount = await page.$eval(
       'body > mapml-viewer',
       (map) => map.layers.length
@@ -193,6 +194,66 @@ test.describe('Playwright mapml-viewer Element Tests', () => {
     expect(layerCount).toEqual(3);
   });
 
+  test('Paste links with GeoJSON content-type to map using ctrl+v', async () => {
+    await page.click('body > textarea#linkGeoJSONContentType');
+    await page.keyboard.press('Control+a');
+    await page.keyboard.press('Control+c');
+
+    await page.click('body > mapml-viewer');
+    await page.keyboard.press('Control+v');
+    await page.waitForTimeout(1000);
+    const layerCount = await page.$eval(
+      'body > mapml-viewer',
+      (map) => map.layers.length
+    );
+    expect(layerCount).toEqual(4);
+  });
+
+  test('Paste links with JSON content-type to map using ctrl+v', async () => {
+    await page.click('body > textarea#linkJSONContentType');
+    await page.keyboard.press('Control+a');
+    await page.keyboard.press('Control+c');
+
+    await page.click('body > mapml-viewer');
+    await page.keyboard.press('Control+v');
+    await page.waitForTimeout(1000);
+    const layerCount = await page.$eval(
+      'body > mapml-viewer',
+      (map) => map.layers.length
+    );
+    expect(layerCount).toEqual(5);
+  });
+
+  test('Paste links with GeoJSON extension to map using ctrl+v', async () => {
+    await page.click('body > textarea#linkGeoJSONExt');
+    await page.keyboard.press('Control+a');
+    await page.keyboard.press('Control+c');
+
+    await page.click('body > mapml-viewer');
+    await page.keyboard.press('Control+v');
+    await page.waitForTimeout(1000);
+    const layerCount = await page.$eval(
+      'body > mapml-viewer',
+      (map) => map.layers.length
+    );
+    expect(layerCount).toEqual(6);
+  });
+
+  test('Paste links with JSON extension to map using ctrl+v', async () => {
+    await page.click('body > textarea#linkJSONExt');
+    await page.keyboard.press('Control+a');
+    await page.keyboard.press('Control+c');
+
+    await page.click('body > mapml-viewer');
+    await page.keyboard.press('Control+v');
+    await page.waitForTimeout(1000);
+    const layerCount = await page.$eval(
+      'body > mapml-viewer',
+      (map) => map.layers.length
+    );
+    expect(layerCount).toEqual(7);
+  });
+
   test('Press spacebar when focus is on map', async () => {
     // scroll to the top
     await page.mouse.wheel(0, -1000);
diff --git a/test/e2e/web-map/map.html b/test/e2e/web-map/map.html
index 36b311d5f..b6306876d 100644
--- a/test/e2e/web-map/map.html
+++ b/test/e2e/web-map/map.html
@@ -43,6 +43,10 @@
   <textarea id="invalidLink" name="message" rows="10" cols="100">https://example.com</textarea>
   <textarea id="invalidText" name="message" rows="10" cols="100">asdasdasdadsasd</textarea>
   <textarea id="copyLink" name="message" rows="10" cols="100">http://localhost:30001/data/query/DouglasFir</textarea>
+  <textarea id="linkGeoJSONContentType" name="message" rows="10" cols="100">http://localhost:30001/data/query/geojsonFeature</textarea>
+  <textarea id="linkJSONContentType" name="message" rows="10" cols="100">http://localhost:30001/data/query/geojsonPoint</textarea>
+  <textarea id="linkGeoJSONExt" name="message" rows="10" cols="100">http://localhost:30001/data/query/geojsonFeature.geojson</textarea>
+  <textarea id="linkJSONExt" name="message" rows="10" cols="100">http://localhost:30001/data/query/geojsonPoint.json</textarea>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/test/e2e/web-map/map.test.js b/test/e2e/web-map/map.test.js
index a23de6635..9bd91394c 100644
--- a/test/e2e/web-map/map.test.js
+++ b/test/e2e/web-map/map.test.js
@@ -38,6 +38,7 @@ test.describe('Playwright web-map Element Tests', () => {
 
     await page.click('body > map');
     await page.keyboard.press('Control+v');
+    await page.waitForTimeout(1000);
     const layerCount = await page.$eval(
       'body > map',
       (map) => map.layers.length
@@ -74,6 +75,66 @@ test.describe('Playwright web-map Element Tests', () => {
     expect(layerCount).toEqual(3);
   });
 
+  test('Paste links with GeoJSON content-type to map using ctrl+v', async () => {
+    await page.click('body > textarea#linkGeoJSONContentType');
+    await page.keyboard.press('Control+a');
+    await page.keyboard.press('Control+c');
+
+    await page.click('body > map');
+    await page.keyboard.press('Control+v');
+    await page.waitForTimeout(1000);
+    const layerCount = await page.$eval(
+      'body > map',
+      (map) => map.layers.length
+    );
+    expect(layerCount).toEqual(4);
+  });
+
+  test('Paste links with JSON content-type to map using ctrl+v', async () => {
+    await page.click('body > textarea#linkJSONContentType');
+    await page.keyboard.press('Control+a');
+    await page.keyboard.press('Control+c');
+
+    await page.click('body > map');
+    await page.keyboard.press('Control+v');
+    await page.waitForTimeout(1000);
+    const layerCount = await page.$eval(
+      'body > map',
+      (map) => map.layers.length
+    );
+    expect(layerCount).toEqual(5);
+  });
+
+  test('Paste links with GeoJSON extension to map using ctrl+v', async () => {
+    await page.click('body > textarea#linkGeoJSONExt');
+    await page.keyboard.press('Control+a');
+    await page.keyboard.press('Control+c');
+
+    await page.click('body > map');
+    await page.keyboard.press('Control+v');
+    await page.waitForTimeout(1000);
+    const layerCount = await page.$eval(
+      'body > map',
+      (map) => map.layers.length
+    );
+    expect(layerCount).toEqual(6);
+  });
+
+  test('Paste links with JSON extension to map using ctrl+v', async () => {
+    await page.click('body > textarea#linkJSONExt');
+    await page.keyboard.press('Control+a');
+    await page.keyboard.press('Control+c');
+
+    await page.click('body > map');
+    await page.keyboard.press('Control+v');
+    await page.waitForTimeout(1000);
+    const layerCount = await page.$eval(
+      'body > map',
+      (map) => map.layers.length
+    );
+    expect(layerCount).toEqual(7);
+  });
+
   test('Press spacebar when focus is on map', async () => {
     //  scroll to the top
     await page.mouse.wheel(0, -1000);
diff --git a/test/server.js b/test/server.js
index b48500698..908875223 100644
--- a/test/server.js
+++ b/test/server.js
@@ -114,6 +114,50 @@ app.get('/data/noMapMeta', (req, res, next) => {
     }
   );
 });
+app.get('/data/query/geojsonFeature', (req, res, next) => {
+  res.sendFile(
+    __dirname + '/e2e/data/geojson/geojsonFeature.geojson',
+    { headers: { 'Content-Type': 'application/geo+json' } },
+    (err) => {
+      if (err) {
+        res.status(403).send('Error.');
+      }
+    }
+  );
+});
+app.get('/data/query/geojsonPoint', (req, res, next) => {
+  res.sendFile(
+    __dirname + '/e2e/data/geojson/geojsonPoint.json',
+    { headers: { 'Content-Type': 'application/json' } },
+    (err) => {
+      if (err) {
+        res.status(403).send('Error.');
+      }
+    }
+  );
+});
+app.get('/data/query/geojsonFeature.geojson', (req, res, next) => {
+  res.sendFile(
+    __dirname + '/e2e/data/geojson/geojsonFeature.geojson',
+    { headers: { 'Content-Type': 'text/html' } },
+    (err) => {
+      if (err) {
+        res.status(403).send('Error.');
+      }
+    }
+  );
+});
+app.get('/data/query/geojsonPoint.json', (req, res, next) => {
+  res.sendFile(
+    __dirname + '/e2e/data/geojson/geojsonPoint.json',
+    { headers: { 'Content-Type': 'text/html' } },
+    (err) => {
+      if (err) {
+        res.status(403).send('Error.');
+      }
+    }
+  );
+});
 
 app.use('/data', express.static(path.join(__dirname, 'e2e/data/tiles/cbmt')));
 app.use('/data', express.static(path.join(__dirname, 'e2e/data/tiles/wgs84')));