2b:null 2c:["$","title",null,{"children":"feat(exit-slow-start): libp2p Performance Dashboard | libp2p | Observable"}] 31:T608,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.timeSeconds; }), 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; }); } 32:T75a,throughputBoxPlot = function(implementations) { 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 === `throughput/${name}`); const results = implementations.flatMap(implementation => { const regex = new RegExp(implementation); return benchmark.results.filter(result =>{ return 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 => { // TODO: parameters still needed? // const totalBytes = benchmark.parameters.downloadBytes + benchmark.parameters.uploadBytes; // TODO Math.max is a hack. const throughput = result.result.map(res => (Math.max(res.uploadBytes, res.downloadBytes) * 8) / res.timeSeconds); 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: `${name} (20s per iteration, 10 iterations)`, 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}`; } 33:[] 2f:{"id":"682dcea9fe2505c4","slug":null,"title":"feat(exit-slow-start): libp2p Performance Dashboard","thumbnail":"e574ec8dbc33632b7ff5fea5a703ac31355d63891af424a701f7bdcf6786426e","access_level":"public","create_time":"$D2023-08-25T14:55:11.901Z","update_time":"$D2023-09-21T09:21:50.375Z","view_time":null,"first_public_time":"$D2023-08-25T14:55:11.901Z","has_unpublished_edits":null,"fork":{"id":"e760326a2e8bc0c4","slug":"performance-dashboard","title":"libp2p Performance Dashboard","owner":{"id":"e44e38c5cad4f544","login":"libp2p-workspace","name":"libp2p"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e44e38c5cad4f544","login":"libp2p-workspace","name":"libp2p","avatar_url":"https://avatars-next.observableusercontent.com/df0dddc14551e19aacd810a947ba0823cae6226927247d2fad2ac8d32bdd8120","tier":"starter_2024"},"version":1283,"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":"team","id":"e44e38c5cad4f544","login":"libp2p-workspace","name":"libp2p","avatar_url":"https://avatars-next.observableusercontent.com/df0dddc14551e19aacd810a947ba0823cae6226927247d2fad2ac8d32bdd8120","tier":"starter_2024","role":"editor"},{"type":"individual","id":"3136c9b24d8fa3a9","login":"mxinden","name":"Max Inden","avatar_url":"https://avatars-next.observableusercontent.com/07c2b70c5368f2813f9c993b46e5b51856f6d7dee115eb6b1fb7f4ec799d01d8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"feat(exit-slow-start): libp2p Performance Dashboard","cells":[{"id":122,"value":"# feat(exit-slow-start): libp2p Performance Dashboard\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({selector: \"h2,h3,h4,h5,h6\"})","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.bind(\n Inputs.text({\n label: \"Repository\",\n submit: true,\n placeholder: \"libp2p/test-plans\",\n }),\n urlQueryFieldView(\"repository\", { write: true, hash: \"repository\" })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"viewof branch = Inputs.bind(\n Inputs.text({\n label: \"Branch\",\n submit: true,\n placeholder: \"master\",\n }),\n urlQueryFieldView(\"branch\", { write: true, hash: \"branch\" })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"{\n const [owner, repo] = (repository || \"libp2p/test-plans\").split(\"/\");\n const response = await fetch(`https://api.github.com/repos/${owner}/${repo}/commits/${branch || \"master\"}`);\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 || \"libp2p/test-plans\"}/${branch || \"master\"}/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":1114,"value":"viewof showBaseline = Inputs.checkbox([\"show baseline - whether to display the baseline measurement, that is ping for latency and iperf for throughput:\"], {value: [\"show baseline - whether to display the baseline measurement, that is ping for latency and iperf for throughput:\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"viewof zeroBased = Inputs.checkbox([\"zero-based y-axis - whether to zero-based the y-axis\"], {value: [\"zero-based y-axis - whether to zero-based the 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":1214,"value":"##### FAQ\n\n- Why does `go-libp2p/v0.xx/tcp` have two additional round-trips compared to `https/v0.x/tcp` and `rust-libp2p/v0.xx/tcp`?\n\n - go-libp2p has one additional round-trip negotiating the security multiplexer, even if only one is offered. See https://github.com/libp2p/go-libp2p/issues/2330.\n - go-libp2p waits for the identify handshake to finish before executing any other protocol (here the perf protocol).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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":1216,"value":"##### FAQ\n\n- Why does `rust-libp2p/v0.xx/tcp` have low throughput?\n - Because it configures a small Yamux receive window by default https://github.com/libp2p/rust-yamux.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1227,"value":"import {urlQueryFieldView} from '@tomlarkworthy/url-query-field-view'\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"