JIDEA-168: component tests for globe

assets/geodata/reverseWindingOrder.js

@@ -0,0 +1,40 @@
+/* eslint-disable no-console */
+/* eslint-disable node/prefer-global/process */
+import * as fs from "node:fs";
+
+// Get the file path from command-line arguments
+const filePath = process.argv[2];
+
+if (!filePath) {
+  console.error("Please provide the file path as a command-line argument.");
+  process.exit(1);
+}
+
+// Load the GeoJSON file
+const fileContent = fs.readFileSync(filePath, "utf8");
+
+// Extract the map object from the file content
+// eslint-disable-next-line no-eval
+const map = eval(fileContent.replace("export default", ""));
+
+// Function to reverse the winding order of coordinates
+function reverseWindingOrder(geometry) {
+  if (geometry.type === "Polygon") {
+    geometry.coordinates = geometry.coordinates.map(ring => ring.reverse());
+  } else if (geometry.type === "MultiPolygon") {
+    geometry.coordinates = geometry.coordinates.map(polygon => polygon.map(ring => ring.reverse()));
+  }
+}
+
+// Process each feature in the map
+map.features.forEach((feature) => {
+  reverseWindingOrder(feature.geometry);
+});
+
+// Convert the map object back to a string
+const updatedFileContent = `const map = ${JSON.stringify(map, null, 2)};\nexport default map;`;
+
+// Save the updated content back to the file
+fs.writeFileSync(`reversed_${filePath}`, updatedFileContent, "utf8");
+
+console.log("Winding order reversed successfully.");

assets/geodata/shapefiles.md

@@ -122,7 +122,14 @@ convert_to_js_map(simplified_who_adm0$disp_area, id_col = "name", name_col = "na
 
 You'll need to add the line `export default map;` to the end of the new js file so it can be imported.
 
-To use this data you need to tell amCharts to reverse the polygons' points, since otherwise the borders will be inside out, and each country will be rendered as covering most of the globe except for itself! That's because the WHO data uses the opposite 'winding order' for polygons, compared to amCharts. Use amCharts' `reverseGeodata: true` option. Note that this operation seems to mutate some variable, since any immediately subsequent call does not require the same option to be passed.
+### Winding order
+
+To use this data we need to reverse the polygons' points, since otherwise the borders will be inside out, and each country will be rendered as covering most of the globe except for itself! That's because the WHO data uses the opposite 'winding order' for polygons, compared to amCharts. Although amCharts provides a `reverseGeodata: true` option, it's more complication than it's worth, since this operation seems to mutate the source geojson, such that any immediately subsequent call would require `reverseGeodata: false`. (This also pollutes the source geodata between unit tests in a test suite.) The simpler way to manage this is to reverse the winding order of the data _ourselves_, which is a pre-processing step you should perform before committing the new geodata files to git, using the script assets/geodata/reverseWindingOrder.js:
+
+```
+cd assets/geodata
+node reverseWindingOrder.js simplified_WHO_adm0_22102024.js
+```
 
 ### Customizations
 

babel.config.js

@@ -0,0 +1,7 @@
+// Required by https://www.amcharts.com/docs/v5/getting-started/integrations/jest/
+module.exports = {
+  presets: [
+    ["@babel/preset-env", { targets: { node: "current" } }],
+    "@babel/preset-typescript",
+  ],
+};

components/Globe.vue

@@ -16,7 +16,7 @@
 import type { MultiPolygon } from "geojson";
 import WHONationalBorders from "@/assets/geodata/2pc_downsampled_WHO_adm0_22102024";
 import WHODisputedAreas from "@/assets/geodata/2pc_downsampled_WHO_disputed_areas_22102024";
-import { animateSeriesColourChange, type Animation, createRotateAnimation, geoPointZoomDuration, getWideGeoBounds, handlePolygonActive, initializeSeries, pauseAnimations, removeSeries, rotateToCentroid, southEastAsiaXCoordinate } from "@/components/utils/globe";
+import { amountToTiltTheEarthUpwardsBy, animateSeriesColourChange, type Animation, createRotateAnimation, geoPointZoomDuration, getWideGeoBounds, handlePolygonActive, initializeSeries, pauseAnimations, removeSeries, rotateToCentroid, southEastAsiaXCoordinate } from "@/components/utils/globe";
 import { rgba2hex } from "@amcharts/amcharts5/.internal/core/util/Color";
 import * as am5 from "@amcharts/amcharts5/index";
 import * as am5map from "@amcharts/amcharts5/map";
@@ -72,10 +72,11 @@
   paddingTop: 20,
   paddingLeft: 20,
   paddingRight: 20,
+  pinchZoom: false,
   wheelX: "none",
   wheelY: "none",
   rotationX: southEastAsiaXCoordinate, // Initialize map on SE Asia
-  rotationY: -20,
+  rotationY: -amountToTiltTheEarthUpwardsBy,
 };
 // Shared settings for countries.
 const countrySeriesSettings: am5map.IMapPolygonSeriesSettings = {
@@ -138,7 +139,6 @@
   return am5map.MapPolygonSeries.new(root, {
     ...highlightedCountrySeriesSettings,
     geoJSON: findFeatureForCountry(appStore.globe.highlightedCountry),
-    reverseGeodata: false,
     fill: startingColor,
   });
 });
@@ -190,17 +190,17 @@
 };
 
 const setUpBackgroundSeries = () => {
-  backgroundSeries = initializeSeries(root, chart, { ...backgroundSeriesSettings, reverseGeodata: true });
+  backgroundSeries = initializeSeries(root, chart, { ...backgroundSeriesSettings });
   backgroundSeries.mapPolygons.template.setAll({ tooltipText: "{name} is not currently available", toggleKey: "active", interactive: true });
   backgroundSeries.mapPolygons.template.on("active", (_active, target) => handlePolygonActive(target, prevBackgroundPolygon));
 };
 
 const setUpAntarcticaSeries = () => {
-  initializeSeries({ ...backgroundSeriesSettings, geoJSON: worldLow, include: ["AQ"] });
+  initializeSeries(root, chart, { ...backgroundSeriesSettings, geoJSON: worldLow, include: ["AQ"] });
 };
 
 const setUpSelectableCountriesSeries = () => {
-  selectableCountriesSeries = initializeSeries(root, chart, { ...selectableCountriesSeriesSettings, reverseGeodata: false });
+  selectableCountriesSeries = initializeSeries(root, chart, { ...selectableCountriesSeriesSettings });
   selectableCountriesSeries.mapPolygons.template.setAll({
     tooltipText: "{name}",
     toggleKey: "active",
@@ -237,13 +237,12 @@
   Object.keys(disputedLands).forEach((disputedArea) => {
     disputedLands[disputedArea].mapSeries = initializeSeries(root, chart, {
       ...disputedLandSeriesSettings,
-      reverseGeodata: true,
       include: [disputedArea],
       fill: disputedLands[disputedArea].colorAsSelectable ? defaultLandColour : unselectableLandColor,
     });
   });
 
-  initializeSeries(root, chart, { ...disputedBodiesOfWaterSeriesSettings, reverseGeodata: true });
+  initializeSeries(root, chart, { ...disputedBodiesOfWaterSeriesSettings });
 };
 
 const setUpChart = () => {
@@ -289,7 +288,11 @@
     rotatedToCountry.value = "";
     // TODO: Make more memory efficient by not re-creating the animations every time
     gentleRotateAnimation = createRotateAnimation(chart);
-    graduallyResetYAxis = chart.animate({ key: "rotationY", to: 0, duration: 20000, easing: am5.ease.inOut(am5.ease.cubic) });
+    if (graduallyResetYAxis) {
+      graduallyResetYAxis.play();
+    } else {
+      graduallyResetYAxis = chart.animate({ key: "rotationY", to: 0, duration: 20000, easing: am5.ease.inOut(am5.ease.cubic) });
+    }
     animations = [gentleRotateAnimation, graduallyResetYAxis];
   }
 };

components/utils/globe.ts

@@ -2,8 +2,8 @@ import * as am5 from "@amcharts/amcharts5/index";
 import * as am5map from "@amcharts/amcharts5/map";
 
 // To place any country of interest on the 'upper-facing' part of the globe. Just looks better.
-const amountToTiltTheEarthUpwardsBy = 25;
 const rotateDuration = 2000;
+export const amountToTiltTheEarthUpwardsBy = 25;
 export const geoPointZoomDuration = 2000;
 export const southEastAsiaXCoordinate = -100;