2c:null 2d:["$","title",null,{"children":"Our World In Data Datasette search UI | Daniel Bachler | Observable"}] 32:[] 30:{"id":"bbb52d0b287b1140","slug":"our-world-in-data-datasette-search-ui","title":"Our World In Data Datasette search UI","thumbnail":"864a915d7ae3852b08e63544ffa0d9d5ba3ca3b409a373bf0ad7dc5ec4245243","access_level":"public","create_time":"$D2022-01-01T19:37:25.248Z","update_time":"$D2022-01-05T14:12:55.718Z","view_time":null,"first_public_time":"$D2022-01-05T02:24:03.965Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"06e54191865d69b8","login":"danyx","name":"Daniel Bachler","avatar_url":"https://avatars-next.observableusercontent.com/872b63ff84951b97aaf3e8a0ee3bacbeaed9371a037583c8df3968bc81211304","tier":"starter_2024"},"version":190,"publish_version":190,"role":null,"authored":false,"authors":[{"type":"individual","id":"439eeaf56f71bbf5","login":"danyx","name":"Daniel Bachler","avatar_url":"https://avatars-next.observableusercontent.com/872b63ff84951b97aaf3e8a0ee3bacbeaed9371a037583c8df3968bc81211304","tier":null}],"members":[{"type":"individual","id":"439eeaf56f71bbf5","login":"danyx","name":"Daniel Bachler","avatar_url":"https://avatars-next.observableusercontent.com/872b63ff84951b97aaf3e8a0ee3bacbeaed9371a037583c8df3968bc81211304","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"383ea3cc28ca9976","slug":"owid-datasette","title":"OWID Datasette","owner":{"id":"06e54191865d69b8","login":"danyx","name":"Daniel Bachler"}},"type":"notebook","body":{"titling":"auto","title":"Our World In Data Datasette search UI","cells":[{"id":0,"value":"# Our World In Data Datasette search UI\n\nThis is an example notebook that shows how to query the Datasette instance containing the text of all OWID posts, the metadata of all the variables and the configurations of all charts. It demonstrates how a given search text can be queried simultaneously in variables, posts and charts.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"viewof searchText = Inputs.text({label: \"Search text\", placeholder: \"e.g. Poverty share\"}) //html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"html`

Posts\n

${Posts.length} posts found

${tag}

Charts\n

${Charts.length} charts found

${tag}

Variables\n

${Variables.length} charts found

${variable.name}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"select id, name \nfrom variables \nwhere name LIKE ${debouncedLikeText}\norder by id desc","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"Variables","database":"var:owid"},{"id":105,"value":"select id, \n printf(\"https://ourworldindata.org/grapher/%s\", JSON_EXTRACT(config, '$.slug')) as url,\n JSON_EXTRACT(config, '$.type') as type,\n JSON_EXTRACT(config, '$.title') as title,\n JSON_EXTRACT(config, '$.subtitle') as subtitle,\n JSON_EXTRACT(config, '$.note') as footnote\nfrom charts \nwhere JSON_EXTRACT(config, '$.subtitle') LIKE ${debouncedLikeText} \n OR JSON_EXTRACT(config, '$.title') LIKE ${debouncedLikeText} \n OR JSON_EXTRACT(config, '$.note') LIKE ${debouncedLikeText}\norder by id desc","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"Charts","database":"var:owid"},{"id":124,"value":"select id, \n printf(\"https://ourworldindata.org/%s\", slug) as url, \n title, \n content \nfrom posts\nwhere title like ${debouncedLikeText}\norder by id desc","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"Posts","database":"var:owid"},{"id":136,"value":"## Internals below","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"### Shortcomings of the current solution\nThe search currently works by doing full phrase queries which are of limited usefullness. It would be nice to switch to a breakdown by word and then AND combine a like query per word but this is a bit invovled. SQL cells can not be used for fully dynamic SQL statements (variable replacement is transpiled into SQL parameters and so can be used only for individual values, not arbitrary fragments of the SQL query). \nWe might want to go away from SQL cells anyhow though because while they have paging they are missing a few features - e.g. they can't render URLs","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"firstTenCharts = Charts.slice(0, 10).map(\n (row) => html`${row.title}`\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"firstTenPosts = Posts.slice(0, 10).map(\n (row) => html`${row.title}`\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"debouncedSearchText = debounce(viewof searchText)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"debouncedLikeText = `%${debouncedSearchText}%`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"owid = new DatasetteClient(\n \"https://owid-datasette-y43qr.ondigitalocean.app/owid\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"//Inputs.table(variables.query(`SELECT * from variables ${whereClause}`))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"whereClause = { \n const whereClause = debouncedSearchText.split(\" \").filter(s => s !== \"\").map(s => `name LIKE '%${s}%'`).join(\" AND \") \n if (whereClause === \"\") return \"\"\n else return `WHERE ${whereClause}`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"import {DatasetteClient} from \"@ambassadors/datasette-client\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {debounce} from \"@mbostock/debouncing-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"