2a:null 2b:["$","title",null,{"children":"Tree Input | Toph Tucker | Observable"}] 30:[{"id":"cd7473c8d22df421e1d13814d93aec5294e72dd53726b0fe3f3e3cbf2cc76069f8ccd3a69f0728774c97f5e34941bc5a8f8a0cea8ed1165f7bea9ca00e54cabd","href":"https://static.observableusercontent.com/files/cd7473c8d22df421e1d13814d93aec5294e72dd53726b0fe3f3e3cbf2cc76069f8ccd3a69f0728774c97f5e34941bc5a8f8a0cea8ed1165f7bea9ca00e54cabd","name":"flare.json","type":"application/json","lastModified":1626278236113.278,"size":11634}] 2e:{"id":"53471f216da23348","slug":"tree-input","title":"Tree Input","thumbnail":"12db56e2a50ce7c786b88a219c2c2833097e7fe2d48ee37b97c1a74a887e9466","access_level":"public","create_time":"$D2021-07-14T15:55:45.395Z","update_time":"$D2021-07-21T16:17:16.815Z","view_time":null,"first_public_time":"$D2021-07-14T16:39:00.361Z","fork":false,"stars":22,"starred":false,"owner":{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2024"},"version":196,"publish_version":196,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}],"members":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"}],"comments":[{"id":"b0fa774b3a44719c","reply_to_id":null,"content":"ooh! maybe checkboxes instead of radio buttons? or maybe that's configurable via some \"multiple: true\" option?","create_time":"$D2021-07-14T17:01:20.721Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"dbf69c13a14d2f62","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":null}},{"id":"f350c36da118ea9f","reply_to_id":"b0fa774b3a44719c","content":"also thinking this could be generalized somehow to graphs / circular graphs… 🤔","create_time":"$D2021-07-14T17:02:47.695Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"dbf69c13a14d2f62","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":null}},{"id":"09d3402f7ba6e75a","reply_to_id":"b0fa774b3a44719c","content":"ya i started to add a multiple option hang on …","create_time":"$D2021-07-14T17:02:57.127Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}},{"id":"e5cc9935a1b3f242","reply_to_id":"b0fa774b3a44719c","content":"mm multiple's gonna be a lil trickier bc w/ radio i can just brute set the value on the root node onInput but w/ checkbox i gotta maintain state in form-land and translate it back to the native javascript objects a la https://github.com/observablehq/inputs/blob/main/src/checkbox.js","create_time":"$D2021-07-14T17:09:30.873Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}},{"id":"fdc0344fa7fd31dc","reply_to_id":"b0fa774b3a44719c","content":"circular! yeah ha like if it were a generator it could just keep next-ing the children or something so they wouldnt have to be finite?","create_time":"$D2021-07-14T17:10:17.557Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}},{"id":"3a52481646036bc8","reply_to_id":"b0fa774b3a44719c","content":"I would recommend to wrap each radio+label label in a (so that clicking will select it), and to limit subtree toggling to the arrow.","create_time":"$D2021-07-17T14:18:53.150Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"5a413ea6624f5250","reply_to_id":"b0fa774b3a44719c","content":"I see now that you're using

- in that case ignore the suggestion regarding the toggle.","create_time":"$D2021-07-17T14:21:20.823Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"258c38c9491dca96","reply_to_id":"b0fa774b3a44719c","content":"Yes, this times out on large hierarchies. A lazy generator approach might be nice.","create_time":"$D2021-07-22T05:46:38.053Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"be3e6e81af18a319","login":"thadk","name":"Thad Kerosky","avatar_url":"https://avatars-next.observableusercontent.com/2f2413891eb0ff4669b49685946f849544a1e49e7047923d158638bc30666281","tier":null}},{"id":"fc3fd3a508ec052b","reply_to_id":"b0fa774b3a44719c","content":"@thadk Can you provide an example? The right solution depends on wether it needs to handle many elements in a single branch, or many elements fairly evenly distributed across all branches.","create_time":"$D2021-07-22T10:09:06.535Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"91a16273829d0f1c","reply_to_id":"b0fa774b3a44719c","content":"good point @thadk! i could try to rip off the standard inspector https://github.com/observablehq/inspector/search?q=yield","create_time":"$D2021-08-06T01:42:02.326Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}},{"id":"15ca3bdd77de2885","reply_to_id":"b0fa774b3a44719c","content":"I finally put together an example. It's big 😅 https://observablehq.com/@thadk/phylogenic-tree-hierarchy-data","create_time":"$D2021-08-06T16:08:50.212Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"be3e6e81af18a319","login":"thadk","name":"Thad Kerosky","avatar_url":"https://avatars-next.observableusercontent.com/2f2413891eb0ff4669b49685946f849544a1e49e7047923d158638bc30666281","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":12,"collection":{"id":"d6d8f3dc44d16858","slug":"utilities","title":"Utilities","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"type":"notebook","body":{"title":"Tree Input","cells":[{"id":0,"value":"# Tree Input\nObservable has a lovely default tree inspector for hierarchical data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":10,"value":"data = FileAttachment(\"flare.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"But you can’t select a child and refer to it in code. With this you can:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":27,"value":"viewof selection = treeInput(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"selection","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"Options: \n- _children_: accessor; defaults to `d => d.children`\n- _name_: function returning string or DOM node; defaults to `d => d.name`\n- _open_: number of levels to default to open; defaults to 0\n- _value_: initial value; defaults to root","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":98,"value":"viewof selection2 = treeInput(data, {\n children: (d) => d.children,\n name: (d) =>\n htl.html`${d.name}`,\n open: 1,\n value: data.children[3]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"selection2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"---\n## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"function treeInput(tree, { name = getName, children = getChildren, open = 0, value = tree } = {}) {\n const id = DOM.uid().id;\n \n const form = htl.html``;\n \n set(value)();\n \n return form;\n\n function set(value) {\n return function () {\n form.value = value;\n form.dispatchEvent(new Event(\"input\", { bubbles: true }));\n };\n }\n \n function inner(node, { checked = false, open } = {}) {\n const item = htl.html`\n \n ${name(node)}`;\n return node.children?.length\n ? htl.html`

${item}

\n ${children(node).map(d => inner(d, {open: open - 1}))}\n

`\n : htl.html`

${item}

`;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"getName = (d) => d.name","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"getChildren = (d) => d.children","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2f:"$2e:body"