Add statistics check

.github/workflows/build-preview.yml

@@ -12,12 +12,31 @@ permissions:
   pages: write
   pull-requests: write
   id-token: write
+  checks: write
 concurrency: preview-${{ github.ref }}
 jobs:
   deploy-preview:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout 🛎️
+      - name: Checkout Main Branch 🛎️
+        uses: actions/checkout@v3
+        with:
+          ref: main
+      - name: Install and Build Main Branch 🔧
+        run: |
+          npm ci --include=dev
+          npm run build
+          npm run style
+          npm run shields
+          cp src/configs/config.aws.js src/config.js
+      - name: Capture main branch usage statistics
+        id: main-stats
+        run: |
+          MAIN_STATS=$(node scripts/stats.js -j)
+          echo "MAIN_STATS<<EOF" >> $GITHUB_ENV
+          echo -e "$MAIN_STATS" >> $GITHUB_ENV
+          echo "EOF" >> $GITHUB_ENV
+      - name: Checkout PR Branch 🛎️
         uses: actions/checkout@v3
       - name: Use Node.js 18.x
         uses: actions/setup-node@v3
@@ -42,6 +61,30 @@ jobs:
           npm run style
           npm run shields
           cp src/configs/config.aws.js src/config.js
+      - name: Capture PR branch usage statistics
+        id: pr-stats
+        run: |
+          PR_STATS=$(node scripts/stats.js -j)
+          echo "PR_STATS<<EOF" >> $GITHUB_ENV
+          echo -e "$PR_STATS" >> $GITHUB_ENV
+          echo "EOF" >> $GITHUB_ENV
+      - name: Compare Stats
+        id: compare-stats
+        run: |
+          mkdir stats
+          echo '${{ env.MAIN_STATS }}'
+          echo '${{ env.PR_STATS }}'
+          node scripts/stats_compare '${{ env.MAIN_STATS }}' '${{ env.PR_STATS }}' > stats/stats-difference.md
+      - name: Print Stats to GitHub Checks
+        uses: LouisBrunner/[email protected]
+        if: always()
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          name: Performance Metrics
+          conclusion: neutral
+          output: |
+            {"summary":"Style size changes introduced by this PR"}
+          output_text_description_file: stats/stats-difference.md
       - name: Upload Build artifact
         uses: actions/upload-artifact@v3
         with:

CONTRIBUTING.md

@@ -190,13 +190,19 @@ When adding or changing style layer code, it can be helpful to assess the change
 
 There is a "stats" script that will generate various statistics about layer composition and complexity:
 
-- `npm run stats -- -a -s` - overall size and breakdown of layers
-- `npm run stats -- -c` - total layer count
-- `npm run stats -- -h` - list all options
+- `npm run -s stats -- -a -s` - overall size and breakdown of layers
+- `npm run -s stats -- -c` - total layer count
+- `npm run -s stats -- -h` - list all options
+
+There is an "extract_layers" script that will extract layer style data:
+
+- `npm run -s extract_layer -pl <layer>` - JSON contents of a specified layer
+- `npm run -s extract_layer -pg <source>` - list of layers from a specified source
+- `npm run -s extract_layer -h` - list all options
 
 ## Layers
 
-1. Layers should be named as followed: `<group>_<layer-name>`, wher the "group" should match the file name that the layer is contained in. This naming convention is needed by the layer statistic script.
+1. Layers must be uniquely named.
 2. For performance reasons, it is better to have fewer layers with filters than multiple, simpler layers.
 3. Layers are drawn in the order specified in `layer/index.js` using the [Painter's Algorithm](https://en.wikipedia.org/wiki/Painter%27s_algorithm).
 

package.json

@@ -23,6 +23,7 @@
     "code_format": "run-s code_format:prettier code_format:svgo",
     "code_format:prettier": "prettier --write --list-different .",
     "code_format:svgo": "svgo -q -f icons/",
+    "extract_layer": "node scripts/extract_layer",
     "presprites": "shx rm -rf dist/sprites",
     "serve": "ts-node scripts/serve",
     "shields": "node scripts/generate_shield_defs.js -o dist/shields.json",

scripts/extract_layer.js

@@ -0,0 +1,56 @@
+import * as Style from "../src/js/style.js";
+import config from "../src/config.js";
+import { Command, Option } from "commander";
+
+const program = new Command();
+program
+  .option("-pp, --pretty", "pretty-print JSON output")
+  .addOption(
+    new Option(
+      "-pg, --print-group <group prefix>",
+      "print a list of the layers in a group"
+    ).conflicts("printLayer")
+  )
+  .option("-pl, --print-layer <layer id>", "print the JSON of a layer")
+  .option("-loc, --locales <locale1 locale2...>", "language codes", ["mul"]);
+program.parse(process.argv);
+
+const opts = program.opts();
+
+if (Object.keys(opts).length === 1) program.help();
+
+const locales = opts.locales[0].split(",");
+
+const style = Style.build(
+  config.OPENMAPTILES_URL,
+  "https://zelonewolf.github.io/openstreetmap-americana/sprites/sprite",
+  "https://osm-americana.github.io/fontstack66/{fontstack}/{range}.pbf",
+  locales
+);
+
+const layers = style.layers;
+const layerMap = new Map();
+const layerGroupMap = new Map();
+
+for (let i = 0; i < layers.length; i++) {
+  const layer = layers[i];
+  layerMap.set(layer.id, layers[i]);
+  const layerGroup = layer["source-layer"] || layer.source || layer.type;
+  if (!layerGroupMap.has(layerGroup)) {
+    layerGroupMap.set(layerGroup, [layer.id]);
+  } else {
+    layerGroupMap.get(layerGroup).push(layer.id);
+  }
+}
+
+let outputObj;
+
+if (opts.printGroup) {
+  outputObj = layerGroupMap.get(opts.printGroup);
+}
+
+if (opts.printLayer) {
+  outputObj = layerMap.get(opts.printLayer) ?? {};
+}
+
+process.stdout.write(JSON.stringify(outputObj, null, opts.pretty ? 2 : null));

scripts/stats.js

@@ -1,93 +1,94 @@
 import * as Style from "../src/js/style.js";
 import config from "../src/config.js";
-import { Command } from "commander";
+import { Command, Option } from "commander";
 
 const program = new Command();
 program
-  .option("-a, --all-layers", "summary layer stats")
-  .option("-c, --layer-count", "count number of layers")
-  .option("-s, --layer-size", "size of all layers")
-  .option("-l, --layer <layer id>", "stats about one layer")
-  .option("-loc, --locales <locale1 locale2...>", "language codes", ["mul"])
-  .option("-pp, --pretty", "pretty-print JSON output")
-  .option(
-    "-pg, --print-group <group prefix>",
-    "print a list of the layers in a group"
+  .addOption(
+    new Option("-a, --all-layers", "summary layer stats")
+      .conflicts("layerCount")
+      .conflicts("layerSize")
+      .conflicts("allJson")
+  )
+  .addOption(
+    new Option("-c, --layer-count", "count number of layers")
+      .conflicts("layerSize")
+      .conflicts("allJson")
   )
-  .option("-pl, --print-layer <layer id>", "print the JSON of a layer");
+  .addOption(
+    new Option("-s, --layer-size", "size of all layers").conflicts("allJson")
+  )
+  .option("-loc, --locales <locale1 locale2...>", "language codes", ["mul"])
+  .option("-j, --all-json", "output all stats in JSON")
+  .option("-pp, --pretty", "pretty-print JSON output");
+
 program.parse(process.argv);
 
-let opts = program.opts();
+const opts = program.opts();
 
 if (Object.keys(opts).length === 1) program.help();
 
-let style = Style.build(
+const locales = opts.locales[0].split(",");
+
+const style = Style.build(
   config.OPENMAPTILES_URL,
   "https://zelonewolf.github.io/openstreetmap-americana/sprites/sprite",
   "https://osm-americana.github.io/fontstack66/{fontstack}/{range}.pbf",
-  opts.locales
+  locales
 );
 
 const layers = style.layers;
 const layerCount = layers.length;
-const layerSize = JSON.stringify(layers).length;
+
+if (opts.layerCount) {
+  console.log(layerCount);
+  process.exit();
+}
+
+const styleSize = JSON.stringify(layers).length;
+
+if (opts.layerSize) {
+  console.log(styleSize);
+  process.exit();
+}
 
 const layerMap = new Map();
-const layerGroupMap = new Map();
-const layerSizeStats = new Map();
-const layerGroupSizeStats = new Map();
-const layerGroupCountStats = new Map();
 
-for (let i = 0; i < layers.length; i++) {
-  let layer = layers[i];
+const stats = {
+  layerCount,
+  styleSize,
+  layerGroup: {},
+};
+
+for (let i = 0; i < layerCount; i++) {
+  const layer = layers[i];
   layerMap.set(layer.id, layers[i]);
-  let layerSize = JSON.stringify(layer).length;
-  let layerGroup = layer.id.split("_", 1)[0];
-  layerSizeStats.set(layer.id, JSON.stringify(layer).length);
-  if (!layerGroupSizeStats.has(layerGroup)) {
-    layerGroupSizeStats.set(layerGroup, layerSize);
-    layerGroupCountStats.set(layerGroup, 1);
-    layerGroupMap.set(layerGroup, [layer.id]);
+  const layerSize = JSON.stringify(layer).length;
+  const layerGroup = layer["source-layer"] || layer.source || layer.type;
+  if (stats.layerGroup[layerGroup]) {
+    stats.layerGroup[layerGroup].size += layerSize;
+    stats.layerGroup[layerGroup].layerCount++;
   } else {
-    layerGroupSizeStats.set(
-      layerGroup,
-      layerGroupSizeStats.get(layerGroup) + layerSize
-    );
-    layerGroupCountStats.set(
-      layerGroup,
-      layerGroupCountStats.get(layerGroup) + 1
-    );
-    layerGroupMap.get(layerGroup).push(layer.id);
+    stats.layerGroup[layerGroup] = {
+      size: layerSize,
+      layerCount: 1,
+    };
   }
 }
 
-if (opts.layerCount) {
-  console.log(`${layerCount} layers`);
-}
-
-if (opts.layerSize) {
-  console.log(`Total layer size ${layerSize.toLocaleString("en-US")} bytes`);
+if (opts.allJson) {
+  process.stdout.write(JSON.stringify(stats, null, opts.pretty ? 2 : null));
+  process.exit();
 }
 
 if (opts.allLayers) {
-  console.log(`${layerCount} layers, grouped as follows:`);
-  layerGroupSizeStats.forEach((v, k) => {
-    let layerCount = layerGroupCountStats.get(k);
-    let layerString = `${k}(${layerCount})`.padEnd(30, ".");
+  for (const layerGroup in stats.layerGroup) {
+    let layerStats = stats.layerGroup[layerGroup];
+    let layerString = `${layerGroup}(${layerStats.layerCount})`.padEnd(30, ".");
     console.log(
-      `${layerString}${v.toLocaleString("en-US").padStart(10, ".")} bytes`
+      `${layerString}${layerStats.size
+        .toLocaleString("en-US")
+        .padStart(10, ".")} bytes`
     );
-  });
-}
-
-if (opts.printGroup) {
-  layerGroupMap.get(opts.printGroup).forEach((lyr) => console.log(lyr));
-}
-
-if (opts.printLayer) {
-  if (opts.pretty) {
-    console.log(JSON.stringify(layerMap.get(opts.printLayer), null, 2));
-  } else {
-    console.log(JSON.stringify(layerMap.get(opts.printLayer)));
   }
 }