Start: ${start / 1000}s – end: ${end / 1000}s

2e:null 2f:["$","title",null,{"children":"Client-Server Concurrency Performance | Oliver Steele | Observable"}] 34:T5ea,md` ## System properties _Drag on the underlined numbers to change them._ The client needs to make a total of ${viewof requestCount.bind( Tangle({ min: 20, max: 100 }) )} requests. The server limits the client to ${viewof serverMaxConcurrentRequests.bind( Tangle({ min: 1, max: 20 }) )} concurrent requests. [This number is based on the AirTable API, which will respond to requests that exceed this number with an error – it will *not* queue them.] The server takes ${viewof serverProcessingTime.bind( Tangle({ min: 1, max: 100 * 1000 }) )} ms to perform a request. [The simulation models the server as processing requests sequentially. We haven't measured whether this is the case for AirTable. It would make sense if they implement client or session affinity, or lock the table or user around each request.] The network latency is ${viewof latency.bind( Tangle({ min: 1, max: 100 * 1000 }) )} ms. [The model assumes this is symmetric: it is the time of flight for a request from the client to the server, _and_ of a response from the server back to the client.] ## Algorithm parameters * The client sends ${viewof concurrentRequests.bind( Tangle({ min: 1, max: serverMaxConcurrentRequests }) )} request(s) at a time. (This is the *request burst size*.) * Once ${serverMaxConcurrentRequests} requests are outstanding, the client waits for ${viewof resolutionCount.bind( Tangle({ min: 1, max: serverMaxConcurrentRequests }) )} response(s) before proceeding. (This is the *resolution count*.) `35:T6fa,svg``36:T55b,function runSimulation(options = {}) { let clientActivations = [], serverActivations = [], pending = [], messages = [], clientClock = 0, serverClock = 0; function waitForPending(all = false) { if (!pending.length) return; let resolving = pending.splice( 0, all ? pending.length : options.resolutionCount || resolutionCount ); clientClock = max(...resolving.map(({ end }) => end)) + latency; let receiver = { start: clientClock, end: clientClock }; clientActivations.push(receiver); messages.push(...resolving.map(sender => [sender, receiver])); } doTimes(requestCount, _ => { let client = { start: clientClock, end: clientClock + clientProcessingTime }; clientActivations.push(client); clientClock = client.end; serverClock = max(serverClock, clientClock + latency); let server = { start: serverClock, end: serverClock + serverProcessingTime }; serverActivations.push(server); serverClock = server.end; messages.push([client, server, true]); pending.push(server); if (pending.length >= (options.concurrentRequests || concurrentRequests)) waitForPending(); }); waitForPending(true); return { clientActivations, serverActivations, messages, duration: max(clientClock, serverClock) }; }37:[] 32:{"id":"c04f289fbd08e860","slug":"concurrency-simulation","title":"Client-Server Concurrency Performance","thumbnail":"335c733879e1fc0dce9f8d314d3a10e657acaad5bf05bcf28e59b9a3cea22bd6","access_level":"public","create_time":"$D2021-01-14T02:24:29.359Z","update_time":"$D2021-01-16T03:45:58.636Z","view_time":null,"first_public_time":"$D2021-01-14T10:31:18.087Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"65287140888f0925","login":"osteele","name":"Oliver Steele","avatar_url":"https://avatars-next.observableusercontent.com/380a9e072924fdaf03d8741574485948468768edaa13895c476cf9ca6ea6bbb2","tier":"starter_2024"},"version":1271,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0f0f7ed81f6a7b3b","login":"osteele","name":"Oliver Steele","avatar_url":"https://avatars-next.observableusercontent.com/380a9e072924fdaf03d8741574485948468768edaa13895c476cf9ca6ea6bbb2","tier":null}],"members":[{"type":"individual","id":"0f0f7ed81f6a7b3b","login":"osteele","name":"Oliver Steele","avatar_url":"https://avatars-next.observableusercontent.com/380a9e072924fdaf03d8741574485948468768edaa13895c476cf9ca6ea6bbb2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Client-Server Concurrency Performance","cells":[{"id":0,"value":"md`# Client-Server Concurrency Performance\n\nThis notebook simulates a client that sends requests to a server over a high-latency connection.\nIt grew out of a (successful) attempt to optimize an AirTable script by removing \\`await\\`\nfrom the inner loop, and replacing it by peridodic calls to \\`Promise.all()\\`.\n\n[It is also my “learning Observable” project.]\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"md`# Results`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"{\n const systemParametersMd = md`\n### System Parameters\n\n* Total requests: ${viewof requestCount.bind(Tangle({ min: 20, max: 100 }))}\n* Allowable concurrent requests: ${viewof serverMaxConcurrentRequests.bind(\n Tangle({ min: 1, max: 20 })\n )}\n* Server processing time: ${viewof serverProcessingTime.bind(\n Tangle({ min: 1, max: 100 * 1000 })\n )} ms\n* Network latency: ${viewof latency.bind(\n Tangle({ min: 1, max: 100 * 1000 })\n )} ms.`;\n const algorithmParametersMd = md`\n### Algorithm Parameters\n\n* Request burst count: ${viewof concurrentRequests.bind(\n Tangle({ min: 1, max: serverMaxConcurrentRequests })\n )}\n* Resolution count: ${viewof resolutionCount.bind(\n Tangle({ min: 1, max: serverMaxConcurrentRequests })\n )}`;\n\n return md`The model parameters from above are repeated here:\n\n${hcat([systemParametersMd, algorithmParametersMd])}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"md`### Style parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"style = ({\n height: 500,\n clientX: 10,\n serverX: width - 30,\n blockWidth: 20,\n headerHeight: 40\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"timeToY = t =>\n style.headerHeight +\n (t * (style.height - style.headerHeight - 10)) / simulation.duration","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"md`## Request Burst Size`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"vl\n .markLine({ point: true })\n .data(\n Array.from(range(1, serverMaxConcurrentRequests + 1)).map(\n concurrentRequests => ({\n concurrentRequests,\n duration: runSimulation({ concurrentRequests }).duration / 1000\n })\n )\n )\n .encode(\n vl\n .x()\n .fieldO(\"concurrentRequests\")\n .title(\"Concurrent Requests\"),\n vl\n .y()\n .fieldQ(\"duration\")\n .title(\"Duration (sec)\"),\n vl.tooltip(\"duration\")\n )\n .autosize(\"fit\")\n .width(width)\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1196,"value":"md`This is affected by the resolution count, which is currently ${viewof resolutionCount.bind(\n Tangle({ min: 1, max: serverMaxConcurrentRequests })\n)}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":992,"value":"md`## Resolution Count`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":983,"value":"vl\n .markLine({ point: true })\n .data(\n Array.from(range(1, serverMaxConcurrentRequests)).map(resolutionCount => ({\n resolutionCount,\n duration: runSimulation({ resolutionCount }).duration / 1000\n }))\n )\n .encode(\n vl\n .x()\n .fieldO(\"resolutionCount\")\n .title(\"Resolution Count\"),\n vl\n .y()\n .fieldQ(\"duration\")\n .title(\"Duration (sec)\"),\n vl.tooltip(\"duration\")\n )\n .width(width)\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1199,"value":"md`This is affected by the request burst size, which is currently ${viewof concurrentRequests.bind(\n Tangle({ min: 1, max: serverMaxConcurrentRequests })\n)}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1213,"value":"md`### Work In Progress`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1000,"value":"vl\n .markCircle()\n .data(\n Array.from(range(1, serverMaxConcurrentRequests + 1)).flatMap(\n concurrentRequests =>\n Array.from(range(1, serverMaxConcurrentRequests + 1)).map(\n resolutionCount => ({\n concurrentRequests,\n resolutionCount,\n duration:\n runSimulation({ concurrentRequests, resolutionCount }).duration /\n 1000\n })\n )\n )\n )\n .encode(\n vl\n .x()\n .fieldQ(\"concurrentRequests\")\n .title(\"Concurrency\"),\n vl\n .y()\n .fieldQ(\"resolutionCount\")\n .title(\"Resolutions\"),\n vl\n .size()\n .fieldQ(\"duration\")\n .title(\"Duration (sec)\"),\n vl.tooltip(\"duration\")\n )\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"md`## Simulation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1098,"value":"md`### Simulation Parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"viewof concurrentRequests = new View(serverMaxConcurrentRequests)\n// viewof concurrentRequests = slider({\n// min: 1,\n// max: serverMaxConcurrentRequests,\n// step: 1,\n// value: serverMaxConcurrentRequests,\n// description: \"Concurrent requests\"\n// })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"viewof latency = new View(5 * 1000)\n\n// slider({\n// min: 0,\n// max: 100 * 1000,\n// step: 1,\n// value: 5 * 1000,\n// format: n => `${withCommas(n)} ms`,\n// description: \"Network latency. (Assumed symmetric.)\"\n// })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"viewof serverProcessingTime = new View(500)\n// slider({\n// min: 0,\n// max: 100 * 1000,\n// step: 1,\n// value: 500,\n// format: n => `${withCommas(n)} ms`,\n// description:\n// \"Server time to process a request\"\n// })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"viewof resolutionCount = new View(1)\n// slider({\n// min: 1,\n// max: serverMaxConcurrentRequests,\n// step: 1,\n// value: serverMaxConcurrentRequests,\n// description:\n// \"Number of responses to await, once the max concurrent requests is reached.\"\n// })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"clientProcessingTime = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"// total number of records to update\nviewof requestCount = new View(20)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"viewof serverMaxConcurrentRequests = new View(10) // max number of concurrent requests that the server will allow","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1102,"value":"md`### Running the Simulation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"simulation = runSimulation()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"md`## Utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"// Applies fn to the integers [0, n)\ndoTimes = (n, fn) =>\n Array(n)\n .fill()\n .forEach((_, i) => fn(i))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"// Returns a string with no more than two digits after the decimal point\n// Actually truncates it; the name is aspirational\nroundDecimal = x => String(x).replace(/(\\.\\d{2}).+/, '$1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"withCommas = d3.format(\",\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"// test withCommas\n[1, 123, 12345, 12345678, 1234.56].map(withCommas)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"// Turn a number of seconds into the format 30s, 1m30s, 1h2m30s, etc.\nformatTime = n =>\n [['s', 60], ['m', 60], ['h', 24], ['d', Infinity]]\n .reduce(\n ([n, a], [unitName, q]) => [\n Math.floor(n / q),\n [':' + (q === 1 ? roundDecimal : Math.floor)(n % q) + unitName, ...a]\n ],\n [n, []]\n )[1]\n .join('')\n .replace(/:0[hmd](?=.)/g, '')\n .replace(/:/g, \"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"// test formatTime\n[0.123, 10, 65, 605, 3610, 24 * 3600 + 10 * 60 + 30].map(formatTime)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"hcat = columns =>\n html`

\n ${columns.map(\n col =>\n html`

${col}

`\n )}\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"import {View} from \"@mbostock/synchronized-views\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":744,"value":"import { Tangle } from \"@mbostock/tangle\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"import { max, range } from \"@osteele/utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"