From 8814367cd5e7d651e20c886249ffca55406cb3c2 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Wed, 4 Oct 2023 20:59:09 -0400 Subject: [PATCH 01/18] Add script to generate samples --- .gitignore | 1 + package-lock.json | 46 ++++++++++++++++++++ package.json | 1 + scripts/generate_samples.ts | 85 +++++++++++++++++++++++++++++++++++++ src/js/shield_defs.js | 2 +- test/sample_locations.json | 44 +++++++++++++++++++ 6 files changed, 178 insertions(+), 1 deletion(-) create mode 100644 scripts/generate_samples.ts create mode 100644 test/sample_locations.json diff --git a/.gitignore b/.gitignore index 3c0c0b15a..48c6367be 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,4 @@ dist download local.config.js shieldlib/docs +samples diff --git a/package-lock.json b/package-lock.json index 6220c67ff..aab615aa1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "@basemaps/sprites": "^6.41.0", "@mapbox/vector-tile": "^1.3.1", "@maplibre/maplibre-gl-style-spec": "^17.0.1", + "@playwright/test": "^1.38.1", "@types/chai": "^4.3.4", "@types/color-namer": "^1.3.0", "@types/mocha": "^10.0.1", @@ -569,6 +570,21 @@ "gl-style-validate": "bin/gl-style-validate.js" } }, + "node_modules/@playwright/test": { + "version": "1.38.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.1.tgz", + "integrity": "sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==", + "dev": true, + "dependencies": { + "playwright": "1.38.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + } + }, "node_modules/@trysound/sax": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", @@ -3789,6 +3805,36 @@ "integrity": "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==", "dev": true }, + "node_modules/playwright": { + "version": "1.38.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz", + "integrity": "sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==", + "dev": true, + "dependencies": { + "playwright-core": "1.38.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.38.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz", + "integrity": "sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==", + "dev": true, + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=16" + } + }, "node_modules/potpack": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz", diff --git a/package.json b/package.json index dfa558db8..e21963aa6 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "@basemaps/sprites": "^6.41.0", "@mapbox/vector-tile": "^1.3.1", "@maplibre/maplibre-gl-style-spec": "^17.0.1", + "@playwright/test": "^1.38.1", "@types/chai": "^4.3.4", "@types/color-namer": "^1.3.0", "@types/mocha": "^10.0.1", diff --git a/scripts/generate_samples.ts b/scripts/generate_samples.ts new file mode 100644 index 000000000..0d47d0b73 --- /dev/null +++ b/scripts/generate_samples.ts @@ -0,0 +1,85 @@ +import fs from "fs"; +import { chromium } from "@playwright/test"; + +// Declare a global augmentation for the Window interface +declare global { + interface Window { + map: { + loaded: () => boolean; + }; + } +} + +type LocationClip = { + x: number; + y: number; + width: number; + height: number; +}; + +type SampleSpecification = { + location: string; + name: string; + viewport: { + width: number; + height: number; + }; + clip: LocationClip; +}; + +// Load list of locations to take map screenshots +const loadSampleLocations = (filePath: string): SampleSpecification[] => { + const rawData = fs.readFileSync(filePath, "utf8"); + return JSON.parse(rawData); +}; + +const sampleFolder = "./samples"; + +const screenshots: SampleSpecification[] = loadSampleLocations( + "test/sample_locations.json" +); + +fs.mkdirSync(sampleFolder, { recursive: true }); + +const browser = await chromium.launch({ headless: true }); +const context = await browser.newContext(); + +const page = await context.newPage(); + +for (const screenshot of screenshots) { + // Set viewport and double deviceScaleFactor to get a closer shot of the map + await page.setViewportSize(screenshot.viewport); + + await createImage(screenshot); +} + +async function createImage(screenshot: SampleSpecification) { + await page.goto(`http://localhost:1776/#map=${screenshot.location}`); + + // Wait for map to load, then wait two more seconds for images, etc. to load. + try { + await page.waitForFunction(() => window.map && window.map.loaded(), { + timeout: 3000, + }); + + // Wait for 1.5 seconds on 3D model examples, since this takes longer to load. + const waitTime = 1500; + console.log(`waiting for ${waitTime} ms`); + await page.waitForTimeout(waitTime); + } catch (e) { + console.log(`Timed out waiting for map load`); + } + + try { + await page.screenshot({ + path: `${sampleFolder}/${screenshot.name}.png`, + type: "png", + clip: screenshot.clip, + }); + console.log(`Created ${sampleFolder}/${screenshot.name}.png`); + } catch (err) { + console.log(err); + } +} + +await browser.close(); diff --git a/src/js/shield_defs.js b/src/js/shield_defs.js index 54b34f5e8..45d61b376 100644 --- a/src/js/shield_defs.js +++ b/src/js/shield_defs.js @@ -509,7 +509,7 @@ export function loadShields() { textColor: Color.shields.brown, colorLighten: Color.shields.brown, }, - ["HIST"] + ["HI$T"] ); // Federal Agencies diff --git a/test/sample_locations.json b/test/sample_locations.json new file mode 100644 index 000000000..81272a54e --- /dev/null +++ b/test/sample_locations.json @@ -0,0 +1,44 @@ +[ + { + "location": "4/40.5/-94", + "name": "full_window", + "viewport": { + "width": 600, + "height": 250 + }, + "clip": { + "x": 0, + "y": 0, + "width": 600, + "height": 250 + } + }, + { + "location": "13/40.01264/-75.70446", + "name": "downingtown_alt_trk_bus", + "viewport": { + "width": 600, + "height": 600 + }, + "clip": { + "x": 100, + "y": 100, + "width": 400, + "height": 400 + } + }, + { + "location": "13/35.22439/-99.99495", + "name": "historic_us66_oklahoma", + "viewport": { + "width": 600, + "height": 600 + }, + "clip": { + "x": 100, + "y": 100, + "width": 400, + "height": 400 + } + } +] From 2b76f2ec2d410019da5e21e8637f209794773449 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Wed, 4 Oct 2023 21:17:54 -0400 Subject: [PATCH 02/18] Add run script --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index e21963aa6..3d6d81467 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "code_format:prettier": "prettier --write --list-different .", "code_format:svgo": "svgo -q -f icons/", "extract_layer": "node scripts/extract_layer", + "generate_samples": "npx playwright install && ts-node scripts/generate_samples.ts", "presprites": "shx rm -rf dist/sprites", "serve": "ts-node scripts/serve", "shields": "node scripts/generate_shield_defs.js -o dist/shields.json", From 232f42a307b79d9d44c6d1d18a540e87ad7d33cf Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Wed, 4 Oct 2023 21:18:24 -0400 Subject: [PATCH 03/18] Add example diff for CI --- src/js/shield_defs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/shield_defs.js b/src/js/shield_defs.js index 45d61b376..e4484904f 100644 --- a/src/js/shield_defs.js +++ b/src/js/shield_defs.js @@ -509,7 +509,7 @@ export function loadShields() { textColor: Color.shields.brown, colorLighten: Color.shields.brown, }, - ["HI$T"] + ["XXXX"] //FOR TESTING - RESTORE TO HIST BEFORE COMMITTING PR ); // Federal Agencies From bad9eec43c0bed602b95f9ce59938293289aca5a Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Wed, 4 Oct 2023 21:28:30 -0400 Subject: [PATCH 04/18] Add sample generation --- .github/workflows/build-preview.yml | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/.github/workflows/build-preview.yml b/.github/workflows/build-preview.yml index 78cded610..ea9bb89fa 100644 --- a/.github/workflows/build-preview.yml +++ b/.github/workflows/build-preview.yml @@ -29,6 +29,12 @@ jobs: npm run style npm run shields cp src/configs/config.aws.js src/config.js + npm start & + BACKGROUND_PID=$! + sleep 5 + npm run generate_samples + kill $BACKGROUND_PID + mv samples samples-main - name: Capture main branch usage statistics id: main-stats run: | @@ -52,6 +58,12 @@ jobs: cp src/configs/config.aws.js src/config.js mkdir -p dist/shield-docs cp -r shieldlib/docs/* dist/shield-docs + npm start & + BACKGROUND_PID=$! + sleep 5 + npm run generate_samples + kill $BACKGROUND_PID + mv samples samples-pr - name: Upload Build artifact uses: actions/upload-artifact@v3 with: From 08d443c2dba442e6ab92c04db861eb5c20782126 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Wed, 4 Oct 2023 21:49:24 -0400 Subject: [PATCH 05/18] Restore CI --- .github/workflows/build-preview.yml | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/.github/workflows/build-preview.yml b/.github/workflows/build-preview.yml index ea9bb89fa..78cded610 100644 --- a/.github/workflows/build-preview.yml +++ b/.github/workflows/build-preview.yml @@ -29,12 +29,6 @@ jobs: npm run style npm run shields cp src/configs/config.aws.js src/config.js - npm start & - BACKGROUND_PID=$! - sleep 5 - npm run generate_samples - kill $BACKGROUND_PID - mv samples samples-main - name: Capture main branch usage statistics id: main-stats run: | @@ -58,12 +52,6 @@ jobs: cp src/configs/config.aws.js src/config.js mkdir -p dist/shield-docs cp -r shieldlib/docs/* dist/shield-docs - npm start & - BACKGROUND_PID=$! - sleep 5 - npm run generate_samples - kill $BACKGROUND_PID - mv samples samples-pr - name: Upload Build artifact uses: actions/upload-artifact@v3 with: From 175317a5bc2b6bbeb498173d3cac964eeaaa7374 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Wed, 4 Oct 2023 21:49:45 -0400 Subject: [PATCH 06/18] Restore shield deltas --- src/js/shield_defs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/shield_defs.js b/src/js/shield_defs.js index e4484904f..54b34f5e8 100644 --- a/src/js/shield_defs.js +++ b/src/js/shield_defs.js @@ -509,7 +509,7 @@ export function loadShields() { textColor: Color.shields.brown, colorLighten: Color.shields.brown, }, - ["XXXX"] //FOR TESTING - RESTORE TO HIST BEFORE COMMITTING PR + ["HIST"] ); // Federal Agencies From 5c3fb07850cbbdb5637d827952f86927fc95bb5f Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Wed, 4 Oct 2023 22:00:57 -0400 Subject: [PATCH 07/18] Update scripts and docs --- dev/README.md | 7 +++++++ scripts/generate_samples.ts | 9 ++++++--- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/dev/README.md b/dev/README.md index 2ec39e467..2ea16c39e 100644 --- a/dev/README.md +++ b/dev/README.md @@ -11,3 +11,10 @@ The highway shield [color palette](americana.gpl) can be imported into Inkscape 3. Import [americana.gpl](americana.gpl). 4. Restart Inkscape. 5. Click the ◀ button to the right of the color palette strip at the bottom of the window (or in the top-right corner of the Color Palette panel), then choose americana.gpl from the menu. + +## Map sample images + +Map sample images can be generated with a script. See [sample_locations.json](test/sample_locations.json) for the format. + +1. Create a JSON file with the map location and clipping rectangles +2. Run the generate_samples script and pass the JSON file location: `npm run generate_samples -- test/sample_locations.json`` diff --git a/scripts/generate_samples.ts b/scripts/generate_samples.ts index 0d47d0b73..f9b920dc0 100644 --- a/scripts/generate_samples.ts +++ b/scripts/generate_samples.ts @@ -35,9 +35,12 @@ const loadSampleLocations = (filePath: string): SampleSpecification[] => { const sampleFolder = "./samples"; -const screenshots: SampleSpecification[] = loadSampleLocations( - "test/sample_locations.json" -); +const jsonSampleLocations = process.argv[2] || "test/sample_locations.json"; + +console.log(`Loading sample locations from ${jsonSampleLocations}`); + +const screenshots: SampleSpecification[] = + loadSampleLocations(jsonSampleLocations); fs.mkdirSync(sampleFolder, { recursive: true }); From e27302c366f6dea08dc64cf722146172e420f8c4 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Wed, 4 Oct 2023 22:16:48 -0400 Subject: [PATCH 08/18] Add server start step --- dev/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/dev/README.md b/dev/README.md index 2ea16c39e..2c76ccc82 100644 --- a/dev/README.md +++ b/dev/README.md @@ -17,4 +17,5 @@ The highway shield [color palette](americana.gpl) can be imported into Inkscape Map sample images can be generated with a script. See [sample_locations.json](test/sample_locations.json) for the format. 1. Create a JSON file with the map location and clipping rectangles -2. Run the generate_samples script and pass the JSON file location: `npm run generate_samples -- test/sample_locations.json`` +2. Start the server in the background with `npm start &` +3. Run the generate_samples script and pass the JSON file location: `npm run generate_samples -- test/sample_locations.json`` From b2397dea113f2a2f6ae8e8e541deb060639d08a9 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Thu, 5 Oct 2023 07:38:14 -0400 Subject: [PATCH 09/18] Update scripts/generate_samples.ts Co-authored-by: Josh Lee --- scripts/generate_samples.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/generate_samples.ts b/scripts/generate_samples.ts index f9b920dc0..df85af549 100644 --- a/scripts/generate_samples.ts +++ b/scripts/generate_samples.ts @@ -1,4 +1,4 @@ -import fs from "fs"; +import fs from "node:fs"; import { chromium } from "@playwright/test"; // Declare a global augmentation for the Window interface From f9ed7dfc68cddcd109ba73d69d297b06305a05f9 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Thu, 5 Oct 2023 07:38:23 -0400 Subject: [PATCH 10/18] Update .gitignore Co-authored-by: Josh Lee --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 48c6367be..7fc8e9cf5 100644 --- a/.gitignore +++ b/.gitignore @@ -8,4 +8,4 @@ dist download local.config.js shieldlib/docs -samples +samples/ From a0c17feadf4f31891646c1332a5c4b6d6fabd84b Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Thu, 5 Oct 2023 07:40:11 -0400 Subject: [PATCH 11/18] Update scripts/generate_samples.ts Co-authored-by: Josh Lee --- scripts/generate_samples.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/generate_samples.ts b/scripts/generate_samples.ts index df85af549..45bf3103a 100644 --- a/scripts/generate_samples.ts +++ b/scripts/generate_samples.ts @@ -35,7 +35,7 @@ const loadSampleLocations = (filePath: string): SampleSpecification[] => { const sampleFolder = "./samples"; -const jsonSampleLocations = process.argv[2] || "test/sample_locations.json"; +const jsonSampleLocations = process.argv[2] ?? "test/sample_locations.json"; console.log(`Loading sample locations from ${jsonSampleLocations}`); From a561508158b48b493275627fd6af688fd3b34c05 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Thu, 5 Oct 2023 07:41:13 -0400 Subject: [PATCH 12/18] Update scripts/generate_samples.ts Co-authored-by: Josh Lee --- scripts/generate_samples.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/generate_samples.ts b/scripts/generate_samples.ts index 45bf3103a..170e61846 100644 --- a/scripts/generate_samples.ts +++ b/scripts/generate_samples.ts @@ -61,7 +61,7 @@ async function createImage(screenshot: SampleSpecification) { // Wait for map to load, then wait two more seconds for images, etc. to load. try { - await page.waitForFunction(() => window.map && window.map.loaded(), { + await page.waitForFunction(() => window.map?.loaded(), { timeout: 3000, }); From c8103ce3c1a1dbe32b922c320b7bbea1a1f9c631 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Thu, 5 Oct 2023 07:41:29 -0400 Subject: [PATCH 13/18] Update scripts/generate_samples.ts Co-authored-by: Josh Lee --- scripts/generate_samples.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/generate_samples.ts b/scripts/generate_samples.ts index 170e61846..4cabe46e9 100644 --- a/scripts/generate_samples.ts +++ b/scripts/generate_samples.ts @@ -4,7 +4,7 @@ import { chromium } from "@playwright/test"; // Declare a global augmentation for the Window interface declare global { interface Window { - map: { + map?: { loaded: () => boolean; }; } From 4a932d230a6d055b82213e5450e6adc411f01bb1 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Thu, 5 Oct 2023 09:39:29 -0400 Subject: [PATCH 14/18] Update scripts/generate_samples.ts Co-authored-by: Josh Lee --- scripts/generate_samples.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/generate_samples.ts b/scripts/generate_samples.ts index 4cabe46e9..d93708786 100644 --- a/scripts/generate_samples.ts +++ b/scripts/generate_samples.ts @@ -81,7 +81,7 @@ async function createImage(screenshot: SampleSpecification) { }); console.log(`Created ${sampleFolder}/${screenshot.name}.png`); } catch (err) { - console.log(err); + console.error(err); } } From 4b5d72b904c30a0d3778eefa1b01e337abc2a583 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Thu, 5 Oct 2023 12:29:49 -0400 Subject: [PATCH 15/18] Update package.json Co-authored-by: Josh Lee --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3d6d81467..a38ab372e 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "code_format:prettier": "prettier --write --list-different .", "code_format:svgo": "svgo -q -f icons/", "extract_layer": "node scripts/extract_layer", - "generate_samples": "npx playwright install && ts-node scripts/generate_samples.ts", + "generate_samples": "ts-node scripts/generate_samples.ts", "presprites": "shx rm -rf dist/sprites", "serve": "ts-node scripts/serve", "shields": "node scripts/generate_shield_defs.js -o dist/shields.json", From 6a1883564ff59fbb08d701cc8ab100f5bd3b842b Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Thu, 5 Oct 2023 12:30:28 -0400 Subject: [PATCH 16/18] Update dev/README.md Co-authored-by: Josh Lee --- dev/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/dev/README.md b/dev/README.md index 2c76ccc82..1b7c23781 100644 --- a/dev/README.md +++ b/dev/README.md @@ -18,4 +18,5 @@ Map sample images can be generated with a script. See [sample_locations.json](te 1. Create a JSON file with the map location and clipping rectangles 2. Start the server in the background with `npm start &` -3. Run the generate_samples script and pass the JSON file location: `npm run generate_samples -- test/sample_locations.json`` +3. Configure playwright: either `npx playwright install chromium` or `export CHROME_BIN=/usr/bin/chromium` +4. Run the generate_samples script and pass the JSON file location: `npm run generate_samples -- test/sample_locations.json`` From 7e3ce2d2b02f65a3240adde5650d8fae538d1e21 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Thu, 5 Oct 2023 12:58:53 -0400 Subject: [PATCH 17/18] Update scripts/generate_samples.ts Co-authored-by: Josh Lee --- scripts/generate_samples.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/scripts/generate_samples.ts b/scripts/generate_samples.ts index d93708786..be14b1fec 100644 --- a/scripts/generate_samples.ts +++ b/scripts/generate_samples.ts @@ -44,7 +44,10 @@ const screenshots: SampleSpecification[] = fs.mkdirSync(sampleFolder, { recursive: true }); -const browser = await chromium.launch({ headless: true }); +const browser = await chromium.launch({ + headless: true, + executablePath: process.env.CHROME_BIN, +}); const context = await browser.newContext(); const page = await context.newPage(); From 02d1124eac3bd877d32d2cb907c304b5af374720 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Thu, 5 Oct 2023 21:36:24 -0400 Subject: [PATCH 18/18] Remove wrong comments --- scripts/generate_samples.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/scripts/generate_samples.ts b/scripts/generate_samples.ts index be14b1fec..07a059276 100644 --- a/scripts/generate_samples.ts +++ b/scripts/generate_samples.ts @@ -53,9 +53,7 @@ const context = await browser.newContext(); const page = await context.newPage(); for (const screenshot of screenshots) { - // Set viewport and double deviceScaleFactor to get a closer shot of the map await page.setViewportSize(screenshot.viewport); - await createImage(screenshot); }