Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add JSON output to stats script and use layer source #882

Merged
merged 15 commits into from
Jun 23, 2023
14 changes: 10 additions & 4 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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_layers -pl <layer>` - JSON contents of a specified layer
- `npm run -s extract_layers -pg <source>` - list of layers from a specified source
- `npm run -s extract_layers -h` - list all options
ZeLonewolf marked this conversation as resolved.
Show resolved Hide resolved

## 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).

Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
56 changes: 56 additions & 0 deletions scripts/extract_layer.js
Original file line number Diff line number Diff line change
@@ -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));
121 changes: 61 additions & 60 deletions scripts/stats.js
Original file line number Diff line number Diff line change
@@ -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)));
}
}