30:T70a,# Longbox A component for rendering an "infinite" list of items using Tim Branyen's [Hyperlist](https://github.com/tbranyen/hyperlist). If you need a purely tabular system, use Observable's built-in [`Inputs.table`](https://observablehq.com/@observablehq/input-table). If you want to render complex cards of potentially variable height, try this. Longbox is the successor to the [Hypergrid](https://observablehq.com/@chicagoreporter/hypergrid) tool produced by Tracking COVID-19 In Illinois. [`Inputs.table`](https://observablehq.com/@observablehq/input-table) is now the better option for spreadsheet-like tables, but isn't built to handle complex rendering of a whole row of data. Import it: ```javascript import { Longbox } from "@eads/longbox" ``` Pass it an array or iterable of Javascript objects (any iterable should work, including Arquero datatables and ES6 sets) and, at minimum, a `render` function in the options: ```javascript data = [{key: "A", value: 10}, {key: "B", value: 20}]; Longbox(data, { render: item => html`The value of $\{item.key} is $\{item.value}` }); ``` The options object also supports setting the height of each row (`itemHeight`) and the height of the container (`height`). ```javascript Longbox(data, { render: item => item.name, itemHeight: 40, height: 400 })``` By default, rows are fixed-height. You can create variable height rows by returning the height along with an an element in your render function: ```javascript Longbox(data, { render: item => ({el: item.name, height: item.rows * 5}), height: 400 })``` See [Hyperlist's documentation](https://github.com/tbranyen/hyperlist#variable-height-items) for more. This project is named after the silliest [music packaging](https://en.wikipedia.org/wiki/Longbox) in history.31:[] 2e:{"title":"Longbox","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"## Example: FDA recall enforcement reports API\n\nThis example ingests ${reports.length.toLocaleString()} [recall enforcement reports](https://open.fda.gov/apis/food/enforcement/) from 2015 to 2021 (year-to-date) using the FDA's open data API to write some robot text about each event. \n\n_This is only for demo purposes and does not constitute a reviewed data analysis._\n\nFilter by status below, or just browse the items.","pinned":false,"hidden":false,"mode":"md"},{"id":354,"value":"viewof stateFilter = Inputs.select([\"All states\", ...reportStates], {\n label: \"Select state\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"viewof statusFilter = Inputs.select(\n [\"All\", \"Ongoing\", \"Terminated\", \"Completed\"],\n {\n label: \"Select status\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"Longbox(filteredReportsTable, {\n height: demoItemHeight * 3,\n itemHeight: demoItemHeight,\n render: renderCard\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":397,"value":"// Render robotext about recalls\nrenderCard = (item) => {\n const reportDate = item.report_dateobj.toLocaleString(undefined, {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\"\n });\n\n return html`\n

\n ${item.recalling_firm}, ${item.city}, ${item.state}: ${\n item.classification\n }, ${item.status}\n

\n As reported on ${reportDate}, \"${item.reason_for_recall}\" ${\n item.recalling_firm\n } notified direct accounts by \"${item.initial_firm_notification.toLowerCase()}.\"\n

${\n item.product_quantity\n } of this ${item.product_type.toLowerCase()} item were recalled.

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"reports = {\n const rootUrl =\n \"https://api.fda.gov/food/enforcement.json?search=report_date:[20150101+TO+20211231]\";\n const limit = 1000;\n const metaResponse = await fetch(`${rootUrl}&limit=0`).then((response) =>\n response.json()\n );\n\n const urls = Array(\n Math.ceil(parseInt(metaResponse.meta.results.total) / limit)\n )\n .fill(null)\n .map((d, i) => `${rootUrl}&limit=${limit}&skip=${i * limit}`);\n\n return Promise.all(\n urls.map((url) => fetch(url).then((response) => response.json()))\n ).then((data) => data.map((d) => d.results).flat());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"reportStates = reportsTable\n .orderby(\"state\")\n .rollup({ state: op.array_agg_distinct(\"state\") })\n .get(\"state\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"reportsTable = aq\n .from(reports)\n .derive({\n report_dateobj: (d) =>\n op.utcdatetime(\n op.slice(d.report_date, 0, 4),\n op.slice(d.report_date, 4, 6) - 1,\n op.slice(d.report_date, 6, 8)\n ),\n recall_initiation_dateobj: (d) =>\n op.utcdatetime(\n op.slice(d.recall_initiation_date, 0, 4),\n op.slice(d.recall_initiation_date, 4, 6) - 1,\n op.slice(d.recall_initiation_date, 6, 8)\n )\n })\n .orderby(aq.desc(\"report_dateobj\"), \"state\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"filteredReportsTable = reportsTable\n .params({ stateFilter, statusFilter })\n .filter((d) =>\n stateFilter !== \"All states\" ? d.state === stateFilter : true\n )\n .filter((d) => (statusFilter !== \"All\" ? d.status === statusFilter : true))","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"demoItemHeight = 180","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":289,"value":"import { aq, op } from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"# Source\n\nThe component code.","pinned":false,"hidden":false,"mode":"md"},{"id":109,"value":"function Longbox(data, options = {}) {\n const defaults = {\n height: 200,\n itemHeight: 40,\n render: () => html`

Not implemented

`\n };\n const config = Object.assign({}, defaults, options);\n\n const root = html`

`;\n const pane = html`

`;\n root.append(pane);\n\n // Handle promises (from https://github.com/observablehq/inputs/blob/main/src/table.js)\n if (data && typeof data.then === \"function\") {\n Object.defineProperty(root, \"value\", {\n set() {\n throw new Error(\"cannot set value while data is unresolved\");\n }\n });\n Promise.resolve(data).then((data) =>\n initializeList(root, pane, data, config)\n );\n } else {\n initializeList(root, pane, data, config);\n }\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"function initializeList(root, el, data, config) {\n root.style.height = config.height + \"px\";\n const array = arrayify(data);\n const list = HyperList.create(el, {\n width,\n itemHeight: config.itemHeight,\n total: lengthof(data),\n scrollerElement: \"div\",\n generate(index) {\n // Wrap in an HTML element just in case\n return html`

${config.render(array[index])}

`;\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"function arrayify(array) {\n return Array.isArray(array) ? array : Array.from(array);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"function lengthof(data) {\n if (typeof data.length === \"number\") return data.length; // array or array-like\n if (typeof data.size === \"number\") return data.size; // map, set\n if (typeof data.numRows === \"function\") return data.numRows(); // arquero\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"HyperList = require(\"hyperlist\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}