2d:null 2e:["$","title",null,{"children":"List Curator - Craigslist Apartments | Kasi Viswanath | Observable"}] 33:T41e,viewof aptsView = listCurator({ resultsView: ({ filteredData, filter }) => { let target = html`

`; let sortOrder = sorterSelect(filteredData); let table = html`

${Inputs.table( filteredData?.sort(sortOrder.value) )}

`; target.appendChild(sortOrder); target.appendChild(table); function updateTable() { console.log(sortOrder.value); return html`

${Inputs.table( filter.value?.sort(sortOrder.value) )}

`; } //Update based on the filter filter.addEventListener("input", () => { console.log("table updated based on the filter"); target.replaceChild(updateTable(), target.querySelector("#table")); }); sortOrder.addEventListener("input", () => { console.log("table updated based on the sort"); target.replaceChild(updateTable(), target.querySelector("#table")); }); target.appendChild( annotator(filteredData, { renderItem: renderItemTableWithImages }) ); return target; } })34:T4a3,function listCurator({ resultsView = (d) => d }) { let form = html`

`; let filter = recursiveDataFilter({ datafn: () => data, dataattributesfn: () => Object.keys(data[0]), filterDirection: "column", height: "100%", width: "400px" }); let conditionalFilter = conditionalShow(filter, { label: "Filter", checked: true, bindInput: false }); form.appendChild( html`

${conditionalFilter} ${resultsView( { filteredData: filter.value, filter } )}

` ); let fullScreenButton = Inputs.button("Full Screen"); fullScreenButton.addEventListener("click", () => { form.requestFullscreen(); }); // function checkAndUpdateChild(e) { // let newSummary = html`

${conditionalFilter} ${resultsView( // { filter: filter.value, form } // )}

`; // form.replaceChild(newSummary, form.querySelector("#summary")); // } let target = html`

${form} ${fullScreenButton}

`; return target; }35:T4d7,

Do you Know Annotator?

Till now, All the attributes we filtered, we used are all basis on the provided data...
But what if I want to add my Personal Notes to the data or I want to define some Custom Attributes to the data. Can we do it?
Yes, we can use Annotator (different from traditional approach where the user can add his own notes and use these annotates to narrow down his choices)
Features of the Annotator:
1) The user can navigate to each choice and add his observations i.e, either notes or adding custom field to the choice
2) If the user navigates to 100 choices and if he forgets which choice he has seen earlier. This can be resolved by seen flag. Each time the user go through the choice, the seen flag will be updated as true for the choice

36:[{"id":"fc475bd0d0224daeac1ed41ee3c68fd4b2384fe8fa0cdb09000117efc5588a515a03fc6b60311456f3d969bc85e8fd8d45e7a3ab78375dd93d3285523f79f283","href":"https://static.observableusercontent.com/files/fc475bd0d0224daeac1ed41ee3c68fd4b2384fe8fa0cdb09000117efc5588a515a03fc6b60311456f3d969bc85e8fd8d45e7a3ab78375dd93d3285523f79f283","name":"apts_may2022.json","type":"application/json","lastModified":1662872587596.162,"size":436667}] 31:{"id":"f42d862697d7d116","slug":"list-curator-craigslist-apartments","title":"List Curator - Craigslist Apartments","thumbnail":"22bc99576c8117618b2ae2a0966cf0fb298832d37480e05df60fda054fd9cb59","access_level":"public","create_time":"$D2022-09-11T05:01:15.188Z","update_time":"$D2023-12-05T22:04:43.577Z","view_time":null,"first_public_time":"$D2022-09-11T05:05:26.299Z","has_unpublished_edits":null,"fork":{"id":"4a8fb62e52b91959","slug":"list-curator-vis20","title":"List Curator - VIS'20 Dataset","owner":{"id":"b760ea566a896d7d","login":"kasivisu4","name":"Kasi Viswanath"}},"stars":1,"starred":false,"owner":{"type":"team","id":"b760ea566a896d7d","login":"kasivisu4","name":"Kasi Viswanath","avatar_url":"https://avatars-next.observableusercontent.com/48e36723913e7e5b18b906e1d7cde12fad4146715e78bbf74d3db7969a248b56","tier":"starter_2024"},"version":1717,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fcd94e1c1ca12ae9","login":"kasivisu4","name":"Kasi Viswanath","avatar_url":"https://avatars-next.observableusercontent.com/48e36723913e7e5b18b906e1d7cde12fad4146715e78bbf74d3db7969a248b56","tier":null}],"members":[{"type":"individual","id":"fcd94e1c1ca12ae9","login":"kasivisu4","name":"Kasi Viswanath","avatar_url":"https://avatars-next.observableusercontent.com/48e36723913e7e5b18b906e1d7cde12fad4146715e78bbf74d3db7969a248b56","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"b76ab0ab689e9c2b","slug":"list_curator","title":"List Curator","owner":{"id":"b760ea566a896d7d","login":"kasivisu4","name":"Kasi Viswanath"}},"type":"notebook","body":{"title":"List Curator - Craigslist Apartments","cells":[{"id":0,"value":"# List Curator - [Craigslist Apartments](https://sfbay.craigslist.org/search/apa#search=1~gallery~0~0)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1527,"value":"Dataset : [CraigslistApartments](https://observablehq.com/@kasivisu4/craigslist-apt-data?collection=@kasivisu4/list_curator)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1423,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1235,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1591,"value":"viewof aptFilter = recursiveDataFilter({\n datafn: () => data,\n dataattributesfn: () => Object.keys(data[0]),\n filterDirection: \"column\",\n height: \"100%\",\n width: \"300px\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1610,"value":"viewof sort = sorterSelect(aptFilter)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1593,"value":"viewof resData = Inputs.table(aptFilter.sort(sort), {\n columns: [\"house link\", \"price\", \"bhk\", \"address\", \"post date\"]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"$35","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":416,"value":"viewof dataAnnotated = {\n return annotator(resData, {\n mutateData: true,\n renderItem: renderItemTableWithImages,\n selectColumns: [\n \"house link\",\n \"price\",\n \"bhk\",\n \"address\",\n \"post date\",\n \"tags\"\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"//Data Input View\nviewof data = {\n let target = dataInput({\n initialValue: default_data,\n delimiter: delimiter, // Optional\n format: \"auto\" // Optional, one of MongoExport, JSON, CSV, CSVNoAutoType\n });\n\n return target;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"// Delimiter for the file\nviewof delimiter = Inputs.text({\n label: \"Delimiter\",\n value: \",\",\n width: 30,\n required: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"default_data = apts","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"import { sorterSelect } from \"@kasivisu4/sorterer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"import { dataInput } from \"@john-guerra/data-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"import { searchCheckbox } from \"@john-guerra/search-checkbox\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"import { recursiveDataFilter } with { data as data } from \"@kasivisu4/data_filter\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"// A function that returns an element with the info for the datum d\n//\nfunction renderItemTableWithImages(\n d,\n selectColumns,\n additionalAttributes = []\n) {\n let attrs = selectColumns || Object.keys(d);\n\n attrs = attrs.filter((x) => !x.includes(additionalAttributes));\n let maxColumnHeaderLength = attrs.reduce(\n (prev, curr) => Math.max(prev, curr.length),\n -Infinity\n );\n let images = d[\"images-src\"].map((x) => {\n return {\n viewsrc: x.slice(0, x.length - 10) + \"600x450.jpg\",\n gridsrc: x\n };\n });\n\n return html`${photogridwithdetailview(images, {\n width: 0.6 * width,\n height: 0.6 * height,\n detailviewwidth: 0.3 * width,\n detailviewheight: 0.5 * height,\n gridimgpadding: 10\n })}\n\n\n ${attrs.map((a) => {\n return ``;\n })}\n

${a}	${d[a]}

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1558,"value":"height = 650","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1551,"value":"import { photogridwithdetailview } from \"@kasivisu4/photogrid-with-detailed-view\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"import { annotator, renderItem } from \"@kasivisu4/annotator\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"import { SummaryTable } from \"@observablehq/summary-table\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"import { conditionalShow } from \"@john-guerra/conditional-show\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"import { textToSpeech } from \"@kasivisu4/text_to_speech\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1438,"value":"import { AptData as apts } from \"@kasivisu4/craigslist-apt-data\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"import {navio} from \"@john-guerra/navio\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"viewof list_curator = {\n let target = html`Use your input file to try out List Curator!! By default it uses VIS'20 Dataset \n ${viewof data} \n ${viewof delimiter}\n`;\n return target;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1633,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1651,"value":"import { formatTableRow } from \"@kasivisu4/transform-data-with-llm\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"