2c:null 2d:["$","title",null,{"children":"Faceted Search | ivan velasco | Observable"}] 32:Ta5b,function FacetedSearch( data, { attribs, value, filterData = filterDataJS } = {} ) { if (!data || data.length < 0) { throw Error("Please provide an array of objects"); } let changed = false; const filtersContainer = html`

`; const target = html` ${filtersContainer} `; const filters = new Map(); // the selected elements target.value = data; target.value.filters = filters; function recreate(value) { debugger; for (let [id, filter] of filters) { if (value.filters.has(id)) { filter.selected = value.filters.get(id).selected; filter.ele.dispatchEvent(new Event("input", {bubbles: true})) } } updateAndRedraw(); } function redraw() { filtersContainer.innerHTML = ""; filtersContainer.appendChild( html`

Selected ${target?.value.length} of ${data.length} ${ changed ? "❌" : "✓" } ${Array.from(filters.values()).map(({ attr, ele }) => { return html`

${ele}

`; })}

` ); filtersContainer .querySelector("#applyButton") .addEventListener("click", () => { changed = false; updateAndRedraw(); filtersContainer.querySelector("#applyButton").disabled = !changed; }); } async function onChange() { changed = true; redraw(); } async function updateAndRedraw() { let before; if (debug) { before = performance.now(); } // Filter the data target.value = await filterData(data, filters); debug && console.log(`Finished filtering ${performance.now() - before}`); target.value.filters = filters; // Trigger an update target.dispatchEvent(new Event("input", { bubbles: true })); redraw(); } attribs = attribs || Object.keys(data[0]); for (let attr of attribs) { // Assumes NaN => categorical if (isNaN(data[0][attr])) { // if (possibleValues.length < 20) { addSearchCheckboxes({ attr, filters, data, updateAndRedraw, target }); // We need a better filter for many values // } // else { // addMultiAutoSelect({ // attr, // filters, // data, // updateAndRedraw, // target, // possibleValues // }); // } } else { // *** Quantitative or date addRange({ attr, filters, data, updateAndRedraw: onChange, target }); } } if (value) { //recreate(value); } redraw(); return target; }33:T4c9,function addRange({ attr, filters, data, updateAndRedraw, target, format, step } = {}) { if (data[0][attr] instanceof Date) { const fmt = (d) => new Date(d).toLocaleString(); format = format || (([s, e]) => html`${fmt(s)} ...
${fmt(e)}`); step = 1; } else if (+data[0][attr] % 1 === 0) { // Integer const fmt = d3.format(",d"); format = format || (([s, e]) => `${fmt(s)} ... ${fmt(e)}`); step = 1; } else { // float const fmt = d3.format(",.2f"); format = format || (([s, e]) => `${fmt(s)} ... ${fmt(e)}`); step = 0.01; } const extent = d3.extent(data, (d) => +d[attr]); const ele = conditionalShow( interval(extent, { label: attr, format, step }), { label: attr } ); ele.addEventListener("input", (evt) => { // Cath input evt.stopPropagation(); }); ele.addEventListener("change", (evt) => { evt.stopPropagation(); // Update the filter const filter = filters.get(attr); filter.selected = ele.value; filters.set(attr, filter); updateAndRedraw(); }); filters.set(attr, { attr, ele, type: "range", selected: extent, allOptions: extent }); }34:[] 30:{"id":"5e5ba0a94bf0631d","slug":"faceted-search","title":"Faceted Search","thumbnail":"246c9cf32ecfa08ac815119ce784080bd92db3808a122f78c63e9924f712cc4e","access_level":"public","create_time":"$D2023-05-23T16:59:39.043Z","update_time":"$D2023-05-26T14:08:08.122Z","view_time":null,"first_public_time":"$D2023-05-23T16:59:39.043Z","has_unpublished_edits":null,"fork":{"id":"529f9a5a4dd1dd5a","slug":"faceted-search","title":"Faceted Search","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"stars":1,"starred":false,"owner":{"type":"team","id":"930819e3d82545cf","login":"ivelascog","name":"ivan velasco","avatar_url":"https://avatars-next.observableusercontent.com/11cb2b20d527ce9932eb883698b460726569e061b766cf88e90af76b7d255d72","tier":"starter_2024","bio":""},"version":523,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"21806eb61954f66f","login":"ivelascog","name":"ivan velasco","avatar_url":"https://avatars-next.observableusercontent.com/11cb2b20d527ce9932eb883698b460726569e061b766cf88e90af76b7d255d72","tier":null,"bio":""}],"members":[{"type":"individual","id":"21806eb61954f66f","login":"ivelascog","name":"ivan velasco","avatar_url":"https://avatars-next.observableusercontent.com/11cb2b20d527ce9932eb883698b460726569e061b766cf88e90af76b7d255d72","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Faceted Search","cells":[{"id":0,"value":"# Faceted Search\n\nA Faceted Search like filter widget that allows the user to filter the data. Uses a basic JS Filtering, but if you want you can pass your own ```filterData(data, filters)``` function to use a different backend. `filters` will be an array of objects with the following structure:\n\n```js\n{\n attr: \"attribute_name\", // Attribute name\n ele: HTMLElement, // The HTML element used for the attribute filter widget\n type: \"categorical\", // [\"categorical\", \"range\"]\n selected: Array, // Attribute values selected\n allOptions: Array // All Attribute values available for categorical or the extent for ranges\n}\n```\n\n## Usage\n\n```js\nimport {FacetedSearch} from \"@john-guerra/faceted-search\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"viewof selected = FacetedSearch(data, {\n // attribs: [\"date_of_birth\",\"nationality\"], // leave blank for using all attributes\n filterData: filterDataJS,\n value: this?.value\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"selected.filters","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"selected","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"viewof data = dataInput({value: olympians, format: \"csv\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"data[0].date_of_birth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"d = new Date()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"d.toLocaleString()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"attr=\"year\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"extent = d3.extent(data, (d) => +new Date(d[attr]));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"interval(extent, {\n label: attr,\n format: ([s, e]) => {\n console.log(s, e, typeof s);\n return `${new Date(s).toLocaleString()} ... ${new Date(e).toLocaleString()}`;\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"function addSearchCheckboxes({ attr, filters, data, updateAndRedraw, target }) {\n const groupCounts = d3.group(data, (d) => d[attr]),\n possibleValues = Array.from(groupCounts.keys());\n const ele = conditionalShow(\n searchCheckbox(possibleValues, {\n value: possibleValues,\n label: attr,\n height: 200,\n format: attr => `${attr} (${groupCounts.get(attr).length})`\n }),\n { label: attr }\n );\n\n ele.addEventListener(\"change\", (evt) => {\n evt.stopPropagation();\n \n // Update the filter\n const filter = filters.get(attr);\n filter.selected = ele.value;\n filters.set(attr, filter);\n\n \n updateAndRedraw();\n });\n\n filters.set(attr, {\n attr,\n ele,\n type: \"categorical\",\n selected: possibleValues,\n allOptions: possibleValues\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"function addMultiAutoSelect({\n attr,\n filters,\n data,\n updateAndRedraw,\n target\n}) {\n const possibleValues = Array.from(d3.group(data, (d) => d[attr]).keys());\n const ele = conditionalShow(\n multiAutoSelect( {options: possibleValues, label: attr }),\n { label: attr, value: possibleValues }\n );\n ele.addEventListener(\"change\", (evt) => {\n evt.stopPropagation();\n \n // Update the filter\n const filter = filters.get(attr);\n filter.selected = ele.value;\n filters.set(attr, filter);\n\n updateAndRedraw();\n });\n\n filters.set(attr, {\n attr,\n ele,\n type: \"categorical\",\n selected: possibleValues,\n allOptions: possibleValues\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"Number(\"1.2\") === 1.2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"d3.format(\",d\")(31234234)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"// A simple JS function to apply the filters on the data\nasync function filterDataJS(data, filters) {\n let res = data;\n\n for (let filter of filters.values()) {\n if (filter.type === \"categorical\") {\n res = res.filter((d) => filter.selected.includes(d[filter.attr]));\n } else if (filter.type === \"range\") {\n res = res.filter(\n (d) =>\n d[filter.attr] >= filter.selected[0] &&\n d[filter.attr] <= filter.selected[1]\n );\n }\n }\n\n return res;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"test","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"{\n (viewof test).value = [0.6,0.7];\n new Event(\"input\", {bubbles: true})\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"viewof test = conditionalShow(interval());","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"viewof test2 = Inputs.range([0, 100], {step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"debug = true","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"import {searchCheckbox} from \"@john-guerra/search-checkbox\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"import {multiAutoSelect} from \"@john-guerra/multi-auto-select\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"import {conditionalShow} from \"@john-guerra/conditional-show\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"import {interval} from '@mootari/range-slider'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"import { dataInput} from \"@john-guerra/data-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"