2d:null 2e:["$","title",null,{"children":"libp2p Performance Dashboard | mxinden-workspace | Observable"}] 33:T604,latencyBoxPlot = function(implementations) { // Create a trace for the pings data const baseline = { y: data.pings.results, type: 'box', name: 'Ping Results', }; const name = "Connection establishment + 1 byte round trip latencies"; const benchmark = data.benchmarks.filter(benchmark => benchmark.name === name)[0]; // Filter and map over the implementations to get all matching results const allResults = implementations.flatMap(implementation => { const regex = new RegExp(implementation); return benchmark.results.filter(result => regex.test(`${result.implementation}/${result.version}/${result.transportStack}`) ); }); const sampleSize = allResults[0].result.length; // Now create an array of traces for each valid result const traces = allResults.map(result => { return { y: result.result.map(timeObj => { return timeObj.latency; }), type: 'box', name: `${result.implementation}/${result.version}/${result.transportStack}`, }; }); if (showBaseline.length > 0) { traces.unshift(baseline); } // Create the layout for the plot const layout = { title: name + ` (n=${sampleSize})`, yaxis: { title: `Latency (${benchmark.unit})`, rangemode: zeroBased.length > 0 ? 'tozero' : 'normal' }, }; // Create a container element for the plot const container = DOM.element('div'); // Render the plot return Plotly.newPlot(container, traces, layout).then(() => { return container; }); } 34:T72f,throughputBoxPlot = function(implementations) { // Define the benchmark names const benchmarkNames = ["Upload", "Download"]; const plots = benchmarkNames.map(name => { // Filter and map over the implementations to get all matching results for the current benchmark const benchmark = data.benchmarks.find(benchmark => benchmark.name === `Single Connection throughput – ${name} 100 MiB`); const results = implementations.flatMap(implementation => { const regex = new RegExp(implementation); return benchmark.results.filter(result => regex.test(`${result.implementation}/${result.version}/${result.transportStack}`) ); }); const sampleSize = results[0].result.length; // Create an array of traces for the benchmark results const traces = results.map(result => { const totalBytes = benchmark.parameters.downloadBytes + benchmark.parameters.uploadBytes; const throughput = result.result.map(res => (totalBytes * 8) / res.latency); return { y: throughput, type: 'box', name: `${result.implementation}/${result.version}/${result.transportStack}`, }; }); const baseline = { y: data.iperf.results, type: 'box', name: 'iPerf Results', }; if (showBaseline.length > 0) { traces.unshift(baseline); } const layout = { title: `Single Connection throughput – ${name} 100 MiB (n=${sampleSize})`, yaxis: { title: `Total Throughput (bit/s)`, tickformat: ".4s", rangemode: zeroBased.length > 0 ? 'tozero' : 'normal' }, }; // Create a container element for the plot const container = DOM.element('div'); // Render the plot Plotly.newPlot(container, traces, layout); return container; }); return html`${plots}`; } 35:[{"id":"1ec3edc43ba66c0db419744c479d1b5118bb405587189f3ad739a10853f6f933d86824e809f4b4ad18053ab33fb5dc7c5f3d6bc601654c8ea976afd5b321f517","href":"https://static.observableusercontent.com/files/1ec3edc43ba66c0db419744c479d1b5118bb405587189f3ad739a10853f6f933d86824e809f4b4ad18053ab33fb5dc7c5f3d6bc601654c8ea976afd5b321f517","name":"counties-albers-10m.json","type":"application/json","lastModified":1685339739254.081,"size":795407}] 31:{"id":"8b5d5803a4d44e32","slug":"libp2p-performance-dashboard","title":"libp2p Performance Dashboard","thumbnail":"4a935743e5a2bb414aa91c7f42c8fab1f58978a05f3023b7591e4f5c0d3c514c","access_level":"public","create_time":"$D2023-05-29T05:55:39.254Z","update_time":"$D2023-06-28T11:24:26.524Z","view_time":null,"first_public_time":"$D2023-05-29T05:55:39.254Z","has_unpublished_edits":null,"fork":{"id":"e059bcffb455f2a9","slug":"libp2p-perf-blog-post-1","title":"libp2p Performance","owner":{"id":"e44e38c5cad4f544","login":"libp2p-workspace","name":"libp2p"}},"stars":0,"starred":false,"owner":{"type":"team","id":"587c2fa6f2aa1691","login":"mxinden-workspace","name":"mxinden-workspace","avatar_url":"https://avatars-next.observableusercontent.com/07cb9a51a5b67399f28c17e1f83607ba19cc85d3b0186068658093222c372cfa","tier":"starter_2024"},"version":1215,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3136c9b24d8fa3a9","login":"mxinden","name":"Max Inden","avatar_url":"https://avatars-next.observableusercontent.com/07c2b70c5368f2813f9c993b46e5b51856f6d7dee115eb6b1fb7f4ec799d01d8","tier":null}],"members":[{"type":"individual","id":"3136c9b24d8fa3a9","login":"mxinden","name":"Max Inden","avatar_url":"https://avatars-next.observableusercontent.com/07c2b70c5368f2813f9c993b46e5b51856f6d7dee115eb6b1fb7f4ec799d01d8","tier":null,"role":"editor"},{"type":"team","id":"587c2fa6f2aa1691","login":"mxinden-workspace","name":"mxinden-workspace","avatar_url":"https://avatars-next.observableusercontent.com/07cb9a51a5b67399f28c17e1f83607ba19cc85d3b0186068658093222c372cfa","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"libp2p Performance Dashboard","cells":[{"id":122,"value":"\n\n\n\n# libp2p Performance Dashboard\n\n# MOVED TO https://observablehq.com/@libp2p-workspace/performance-dashboard\n\n\n_or how fast is libp2p?_\n\nExploring the results of our [libp2p performance tooling](https://github.com/libp2p/test-plans/tree/master/perf).\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":946,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"## Fetching benchmark data\n\nFirst off, let's fetch the performance benchmark results from the latest run more specifically the `benchmark-results.json` file.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":881,"value":"viewof repository = Inputs.text({label: \"Repository\", placeholder: \"libp2p/test-plans\", value: \"libp2p/test-plans\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"viewof branch = Inputs.text({label: \"Branch\", placeholder: \"master\", value: \"master\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"{\n const [owner, repo] = repository.split(\"/\");\n const response = await fetch(`https://api.github.com/repos/${owner}/${repo}/commits/${branch}`);\n var commit;\n if (response.ok) {\n const data = await response.json();\n commit = data.commit; // { message, author { name, email, date } }\n } else {\n throw new Error(await response.text());\n }\n\nreturn html`\n
\n

Latest commit on selected repository and branch:

${commit.message.split(\"\\n\")[0]}

${commit.message.split(\"\\n\").slice(1).join(\"\\n\")}

\n
`\n\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"data = {\n const data = await fetch(`https://raw.githubusercontent.com/${repository}/${branch}/perf/runner/benchmark-results.json`).then((response) => response.json());\n\n data.benchmarks.forEach(benchmark => {\n benchmark.results.sort((a, b) => {\n if (a.version < b.version) {\n return -1;\n } else if (a.version > b.version) {\n return 1;\n } else {\n return 0;\n }\n });\n});\n \n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"## Visualizing the data\n\nNote that the graphs below are interactive. Try e.g. toggling the checkboxes below or clicking items in the legend of a graph.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1134,"value":"Whether to display the baseline measurement, that is ping for latency and iperf for throughput:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1114,"value":"viewof showBaseline = Inputs.checkbox([\"show baseline\"], {value: [\"show baseline\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1138,"value":"Whether to zero-based the y-axis:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1123,"value":"viewof zeroBased = Inputs.checkbox([\"zero-based y-axis\"], {value: [\"zero-based y-axis\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"### Across implementations (latest version only)\n\nNote that the graphs below only display the latest version of each implementation. For a comparison across versions see next section.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1095,"value":"latestVersions = {\n let latestImplementations = {};\n \n data.benchmarks.forEach(benchmark => {\n benchmark.results.forEach(result => {\n // If the implementation is not in the map yet, or if the new version is greater than the existing one, store it.\n if (!latestImplementations[result.implementation] || result.version > latestImplementations[result.implementation]) {\n latestImplementations[result.implementation] = result.version;\n }\n });\n });\n\nreturn Object.entries(latestImplementations).map(([key, value]) => `${key}/${value}/.*`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1098,"value":"#### Latency","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":621,"value":"latencyBoxPlot(latestVersions)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"#### Throughput\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":765,"value":"throughputBoxPlot(latestVersions)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"### Across releases\n\nNote that only implementations with multiple versions are displayed. For a comparison across implementations, see section above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1032,"value":"implementationsWithMultipleVersions = {\n let allImplementations = {};\n\n data.benchmarks.forEach(benchmark => {\n data.benchmarks[0].results.forEach(result => {\n if (!allImplementations[result.implementation]) {\n allImplementations[result.implementation] = new Set();\n }\n allImplementations[result.implementation].add(result.version);\n });\n });\n\n let multipleOccurrencesImplementations = new Set(\n Object.keys(allImplementations).filter(\n implementation => allImplementations[implementation].size > 1\n )\n );\n\n return multipleOccurrencesImplementations;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"{\n\nreturn Promise.all(\n Array.from(implementationsWithMultipleVersions).map(async (name, i) => {\n let div = md`\n#### ${name}\n##### Latency\n${await latencyBoxPlot([name])}\n##### Throughput\n${await throughputBoxPlot([name])}\n`;\n return div;\n })\n).then(divs => {\n let container = html`

${divs}

`;\n return container;\n});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"**Supporting Code and Libraries for this Notebook**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":393,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"import {toc} from \"@harrystevens/toc@126\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"