2c:null 2d:["$","title",null,{"children":"Utilities | Thijs Vogels | Observable"}] 32:T10b0,table = (data, options) => { options = Object.assign({}, defaultOptions, options); const { sortable, rank, paged } = options; let sortKey = undefined; let sortDirection = true; let page = 0; if (sortable && rank) { throw new Error("A table can either be ranked or sortable, but not both"); } let columns = Object.keys(data[0]).map(key => { const opts = options.columns[key] || {}; return { key: key, type: opts.type || typeof data[0][key], options: opts }; }); function bake() { if (sortKey) { data = data.slice().sort((a, b) => { let as = a[sortKey]; let bs = b[sortKey]; // make this sort stable if (as == bs) return JSON.stringify(a).localeCompare(JSON.stringify(b)); let res = as > bs ? 1 : as < bs ? -1 : 0; if (sortDirection) res = -res; return res; }); } let rows = data.slice(page * paged, page * paged + paged); let pages = Math.ceil(data.length / paged); return html`

${ options.header === false ? `` : html` ${rank ? html`` : ""} ${columns.map(c => { return th(c, sortKey, sortDirection, sortable); })} ` } ${rows.map( (row, i) => html` ${rank ? html`` : ""} ${columns.map(c => { let displayValue = (c.options.formatter || ((i) => i))( row[c.key], i, row ); if ( displayValue instanceof window.HTMLElement && displayValue.tagName == "TD" ) { return displayValue; } return html``; })} ` )}


${i + 1}	${displayValue}

${ (pages > 1) ? html`` : "" }

`; } let dom = bake(); function rerender() { dom.firstChild.remove(); dom.appendChild(bake().firstChild); } dom.addEventListener("click", e => { if (e.target.tagName === "TH" && sortable) { if (sortKey == e.target.dataset.key) { sortDirection = !sortDirection; } sortKey = e.target.dataset.key; rerender(); } if (e.target.tagName === "BUTTON") { if (e.target.dataset.action) { switch (e.target.dataset.action) { case "next": page++, rerender(); break; case "previous": page--, rerender(); break; } } else if (e.target.dataset.page) { (page = parseInt(e.target.dataset.page)), rerender(); } } }); return dom; }33:[] 30:{"id":"52e23248bf87fcd6","slug":"utilities","title":"Utilities","thumbnail":"2d5b84c7039218b88a17c5ed46ae0ea52d8e8df084a569d6aa2ef11ef2bc72bb","access_level":"public","create_time":"$D2019-12-04T09:16:49.116Z","update_time":"$D2019-12-04T12:43:25.128Z","view_time":null,"first_public_time":"$D2019-12-04T09:32:17.778Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"63d4ae9351b957f2","login":"tvogels","name":"Thijs Vogels","avatar_url":"https://avatars-next.observableusercontent.com/caecb0802edbb2531d0d2883357c53d701439f3641bbc772df9d728d289a6905","tier":"starter_2024"},"version":100,"publish_version":100,"role":null,"authored":false,"authors":[{"type":"individual","id":"7ebda7165bbc067e","login":"tvogels","name":"Thijs Vogels","avatar_url":"https://avatars-next.observableusercontent.com/caecb0802edbb2531d0d2883357c53d701439f3641bbc772df9d728d289a6905","tier":null}],"members":[{"type":"individual","id":"7ebda7165bbc067e","login":"tvogels","name":"Thijs Vogels","avatar_url":"https://avatars-next.observableusercontent.com/caecb0802edbb2531d0d2883357c53d701439f3641bbc772df9d728d289a6905","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Utilities","cells":[{"id":0,"value":"md`# Utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`---\n## Tables\n\nThis is a slight modification of the tables by \\`tmcw/tables\\` that does not show page numbers when there is only one page.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"table([\n {name: html`Bob de Bouwer`, age: 22},\n {name: html`Boes Boes`, age: 34},\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`Implementation:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"import {defaultOptions, th} from \"@tmcw/tables@513\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`---\n## Polling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"async function* poll(fnc, interval) {\n while (true) {\n yield fnc();\n await Promises.delay(interval);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`---\n## GraphQL`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"function graphQLConnect(url) {\n async function graphql(query, variables={}) {\n let response = await fetch(url, {\n headers: {'Content-Type': 'application/json', 'Accept': 'application/json'},\n method: 'POST',\n body: JSON.stringify({\n query, \n variables,\n })\n });\n const output = await response.json();\n if ('errors' in output) {\n throw new Error(JSON.stringify(output.errors, null, 1)); \n }\n return output.data;\n }\n return graphql\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"md`An example connection:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"jobmonitor = graphQLConnect(\"https://graphql-sjvtnngdaq-ew.a.run.app/graphql\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`Demo: __Latest experiments__:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"table((await jobmonitor(`\n{\n jobs(limit: 5) {\n experiment\n job\n status\n }\n}`)).jobs)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"