2d:null 2e:["$","title",null,{"children":"Faceted Search Filter | Kasi Viswanath | Observable"}] 33:T414,# Faceted Search Filter A Generic Data Filterer helps users to narrow the records based on filter criteria that have features like Cross Filter, Filter with Data T ransformation, Dynamic Filter selection ```js Usage : import {recursiveDataFilter} from "@kasivisu4/data_filterer" viewof RDF = recursiveDataFilter({ datafn: () => data, // data functions dataattributesfn: () => Object.keys(data[0]), //attributes function addFullScreen: true, //full screen mode filterDirection: "row", //flex direction width: "100%", height: "100%" }); } RDF.value //It contains the filter data ``` Filter - Recursively update the filters based on the filtered data Data Transformation - The user can transform the complex data into simpler form using arrow function expression and filter the data.
Dynamic Filter Selection - The user can choose CHECK-BOX or DROP-DOWN filter Examples on [VIS'20](https://virtual.ieeevis.org/year/2020/papers.html?filter=titles) Dataset:34:T96a,//To stop infinite loop just off the recursive filter viewof recursiveFilter = { let target = recursiveDataFilter({ datafn: () => data, dataattributesfn: () => Object.keys(data[0]) }); // S1: click the add filter button target.querySelector("#add_filter_div").childNodes[0].childNodes[0].click(); target.querySelector("#add_filter_div").childNodes[0].childNodes[0].click(); // S2: Turn on Recursive Filter target.childNodes[0].childNodes[4].childNodes[0].click(); // S3: Select the event_id attribute target.childNodes[0].childNodes[5].childNodes[0].childNodes[0].childNodes[0].childNodes[2].value = "event_id"; target.childNodes[0].childNodes[5].childNodes[0].childNodes[0].childNodes[0].childNodes[2].dispatchEvent( new Event("input", { bubbles: true }) ); return target; // S4: Select the event_title attribute target.childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[2].value = "event_title"; //trigger the event for S2 target.childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[2].dispatchEvent( new Event("input", { bubbles: true }) ); //trigger the event for S3 target.childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[2].dispatchEvent( new Event("input", { bubbles: true }) ); // Removed as the user confuses by the automation // //For demo get the elements of the 1st filter all options // let values = [ // ...target.childNodes[0].childNodes[0].childNodes[2].childNodes[0] // .childNodes[8].childNodes[1].childNodes // ] // .map((d) => d.textContent) // .slice(1, -1); // function loop() { // setTimeout(function () { // // S5 Randomly select the value for the filter // target.childNodes[0].childNodes[0].childNodes[2].childNodes[0].childNodes[8].value = [ // values[Math.floor(Math.random() * values.length)], // values[Math.floor(Math.random() * values.length)], // values[Math.floor(Math.random() * values.length)] // ]; // //trigger the event for S5 // target.childNodes[0].childNodes[0].childNodes[2].childNodes[0].childNodes[8].dispatchEvent( // new Event("input", { bubbles: true }) // ); // target.counter -= 1; // if (target.counter > 0) { // loop(); // } // }, 3000); // } // loop(); // target.loop = loop; return target; }35:T710,viewof dataTransfomation = { function loop() { function s1() { // S2: Select the event_id attribute target.childNodes[0].childNodes[0].childNodes[0].value = "time_stamp"; //trigger the event for S2 target.childNodes[0].childNodes[0].childNodes[0].dispatchEvent( new Event("input", { bubbles: true }) ); setTimeout(s2, 5000); } function s2() { target.childNodes[0].childNodes[0].childNodes[2].value = "ADVANCED-FILTER"; //trigger the event for S2 target.childNodes[0].childNodes[0].childNodes[2].dispatchEvent( new Event("input", { bubbles: true }) ); target.childNodes[0].childNodes[5].querySelector( "#custom_text_box" ).value = "new Date(d['time_stamp']).getDate()"; target.childNodes[0].childNodes[5] .querySelector("#custom_text_box") .dispatchEvent(new Event("input", { bubbles: true })); setTimeout(s3, 5000); } function s3() { target.childNodes[0].childNodes[0].childNodes[2].value = "CHECK-BOX"; //trigger the event for S2 target.childNodes[0].childNodes[0].childNodes[2].dispatchEvent( new Event("input", { bubbles: true }) ); target.childNodes[0].childNodes[5].childNodes[0].childNodes[8].value = [ 26 ]; target.childNodes[0].childNodes[5].childNodes[0].childNodes[8].dispatchEvent( new Event("input", { bubbles: true }) ); } setTimeout(s1, 5000); return target; } let temp_data = JSON.parse(JSON.stringify(data)); let target = recursiveDataFilter({ datafn: () => data, dataattributesfn: () => Object.keys(data[0]) }); target.loop = loop; target.querySelector("#add_filter_div").childNodes[0].childNodes[0].click(); return target; }36:T442b,function recursiveDataFilter({ datafn, dataattributesfn, addFullScreen = false, filterDirection = "row", width = "1152px", height = "100%" }) { // Initialize let data = datafn(); let rf = toogleTextButton(["OFF", "ON"], { label: "Cross Filter:" }); let fullScreenButton = Inputs.button(html`Full screen ⛶`); let addButton = Inputs.button("Add Filter ➕"); fullScreenButton["id"] = "fullScreenButton"; buttonHiglighter(addButton.childNodes[0]); buttonHiglighter(fullScreenButton.childNodes[0]); let recordCount = html`

Selected ${data.length} out of ${data.length}

`; let targetAddFilterButton = html`

${addButton} ${recordCount}

${rf}

`; let filtersPresent = false; // let targetAddFilterButton = html`

${addButton} ${recordCount}

${rf}

`; if (addFullScreen) { targetAddFilterButton.childNodes[4].appendChild(fullScreenButton); } let form = html`

`; form.value = data; form.appendChild(targetAddFilterButton); form.selectedFilters = {}; fullScreenButton.addEventListener("click", (e) => { form?.requestFullscreen(); e?.stopPropagation(); }); // Check if the Recursive Filter is active function recursiveFiltersButton() { return rf.value === "ON"; } addButton.addEventListener("click", () => { createOrReplaceFilter({ data, attributes: Object.keys(data[0]), form, recursiveFlag: recursiveFiltersButton() }); if (!filtersPresent) { targetAddFilterButton.childNodes[4].style[ "border-bottom" ] = `solid 1px ${colorPalette["border"]}`; filtersPresent = true; } }); //Initialize the filters by searchURL { let entries = new URLSearchParams(location.hash.slice(1)).entries(); for (let entry of entries) { console.log("entry", entry, eval(entry[1])); createOrReplaceFilter({ data, attributes: dataattributesfn(), form, recursiveFlag: recursiveFiltersButton(), replaceAttr: entry[0].split("::")[0], newAttr: entry[0].split("::")[0], initialValues: eval(entry[1]), newFilter: entry[0].split("::")[1] }); } } function createOrReplaceFilter({ data, attributes, form, replaceAttr, newAttr, newFilter, initialValues = [], flatArray = false, recursiveFlag, tdFocusFlag = false }) { console.log({ replaceAttr, newAttr, newFilter, initialValues, flatArray, tdFocusFlag }); // Get only the unselected filtered columns in the choice let unSelectedAttributes = attributes.filter( (x) => !Object.keys(form.selectedFilters).includes(x) ); // Get the random attribute or the new attribute provided let randomAttr = newAttr || unSelectedAttributes[Math.floor(Math.random() * attributes.length)]; // Stop If all the columns are already selected if (!randomAttr) { return; } if (recursiveFlag) { replaceAttr = randomAttr; data = form.value; } // Attribute DROP-DOWN let selectAttribute = Inputs.select( // Condition to make sure only one filter for each column replaceAttr === newAttr ? attributes : unSelectedAttributes, { value: randomAttr, sort: "ascending", width: 10, format: (x) => x.toUpperCase() } ); let selectedAttribute = selectAttribute.value; //Button CSS selectAttribute.childNodes[0].style = "background-color:transparent;border:solid 2px #3182BD"; // Get the filter based on the filter name got from the previous step and initialize the selection if there is any change in the filter. // Also generate the hashcode on the column which helps us to update this filter based on other filters' selection let { filter, filterView, hashCode, dataType, possibleValues } = fetchFilter({ filter: newFilter, attr: selectedAttribute, data, form, initialValues, flatArray, tdFlag: form.selectedFilters.hasOwnProperty(selectedAttribute) && form.selectedFilters[selectedAttribute]["Advanced Filter"] && form.selectedFilters[selectedAttribute]["Advanced Filter"] != "" }); let filterer = html`

${filterView}

`; if (filterDirection === "row") { filterer.style["max-height"] = "300px"; filterer.style["width"] = "400px"; filterer.style["overflow-x"] = "scroll"; } else { filterer.style["width"] = "300px"; filterer.style["max-height"] = "300px"; filterer.style["overflow-y"] = "scroll"; } let summarize = SummarizeColumn(data, selectedAttribute).childNodes[3] .childNodes[0]; // console.log("Summarize", data, selectedAttribute); // Create the temp data with the flatten column for summarize if (flatArray) { let flattenData = Array.from( d3.group(data, (d) => d[selectedAttribute]).keys() ) .flat(Infinity) .map((d) => { return { [selectedAttribute]: d }; }); summarize = SummarizeColumn(flattenData, selectedAttribute).childNodes[3] .childNodes[0]; } summarize.childNodes[0].style["background-color"] = `${colorPalette["bg"]}`; summarize.childNodes[0].style["min-width"] = "250px"; // Removing the hand Cursor for the summarizer // TO DO: update the filter selection based on summarize selection // summarize.childNodes[0].childNodes[4].innerHTML = ""; //Get the prev Custom value if present if (filter === "Advanced Filter") { if (form.selectedFilters[selectedAttribute]) { filterer.childNodes[0].value = form.selectedFilters[selectedAttribute]["Advanced Filter"]; } } (""); //Create the summarize column of the transformed data if (filter === "Advanced Filter") { // Add label summarize.appendChild(html`
Transformed Data`); let transform = form.selectedFilters[selectedAttribute]["Advanced Filter"]; let transformFlag = false; let transformedData = JSON.parse(JSON.stringify(data)); try { if (transform) { transformedData = transformedData.map((d) => { if (eval(transform)) { transformFlag = true; } return { [selectedAttribute]: eval(transform) }; }); } } catch { console.log("expression invalid", transform); } finally { transformedData = transformFlag ? transformedData : data; console.log({ data, transformedData }); let transformedAttribute = transformFlag ? selectedAttribute : null; let transformedTarget = SummarizeColumn( transformedData, transformedAttribute ).childNodes[3].childNodes[0]; transformedTarget.childNodes[0].style["background-color"] = colorPalette["bg"]; transformedTarget.childNodes[0].style["min-width"] = "250px"; //Removing the hand Cursor for the summarizer // TO DO: update the filter selection based on summarize selection transformedTarget.childNodes[0].childNodes[4].innerHTML = ""; summarize.appendChild(html`${transformedTarget}`); } } // update the summarize column based on the eval expression in the transform if ( filter != "Advanced Filter" && form.selectedFilters.hasOwnProperty(selectedAttribute) && form.selectedFilters[selectedAttribute]["Advanced Filter"] && form.selectedFilters[selectedAttribute]["Advanced Filter"] != "" ) { let transformExpression = form.selectedFilters[selectedAttribute]["Advanced Filter"]; let transformedData = JSON.parse(JSON.stringify(data)); transformedData.map((d) => { return { [selectedAttribute]: eval(transformExpression) }; }); // console.log("transform Expression", transformedData); summarize = SummarizeColumn(transformedData, selectedAttribute) .childNodes[3].childNodes[0]; summarize.childNodes[0].style["background-color"] = "#F2ECEC"; summarize.childNodes[0].style["min-width"] = "250px"; } let filtersArray = default_filters[dataType]; let filterSelection = Inputs.select(filtersArray, { value: filter, sort: "descending", width: 10 }); //Filter DROP-DOWN CSS filterSelection.childNodes[0].style = "background-color:transparent;border:solid 2px #3182BD"; //Event handle when the column/filterName/filter updated selectAttribute.addEventListener("input", () => { createOrReplaceFilter({ data, attributes, form, replaceAttr: selectedAttribute, newAttr: selectAttribute.value }); }); console.log({ flatArray, dataType }); // Add the Flat Array feature for the object datatype let flatArrayButton = html``; if (dataType === "object" || flatArray) { if (flatArray) { flatArrayButton = Inputs.checkbox(["Flat Array"], { value: ["Flat Array"] }); } else { flatArrayButton = Inputs.checkbox(["Flat Array"]); } flatArrayButton.addEventListener("input", () => { createOrReplaceFilter({ data, attributes, form, replaceAttr: selectedAttribute, newAttr: selectAttribute.value, flatArray: flatArrayButton.value?.length != 0, newFilter: filterSelection.value }); }); } filterSelection.addEventListener("input", () => createOrReplaceFilter({ data, attributes, form, replaceAttr: selectedAttribute, newAttr: selectAttribute.value, newFilter: filterSelection.value, initialValues: newFilter != "Advanced Filter" ? filterView.value : initialValues, flatArray: flatArrayButton.childNodes.length != 0 && flatArrayButton?.value?.length != 0, tdFocusFlag: filterSelection.value === "Advanced Filter" }) ); filterView.addEventListener("input", (e) => { form.selectedFilters[selectedAttribute] = { filter, hashCode, currSelected: filterView.value, "Advanced Filter": prevCustomCode, flatArray }; if (filterSelection.value === "Advanced Filter") { console.log( "storing in filter for advanced filter", filterView, filterView.childNodes[0].value ); form.selectedFilters[selectedAttribute]["Advanced Filter"] = filterView.childNodes[0].value; filterSelection.dispatchEvent(new Event("input", { bubbles: true })); } recursiveFilter(selectedAttribute, document.activeElement); }); // Remove Button // let removeButton = html``; let removeButton = Inputs.button("Remove❌"); buttonHiglighter(removeButton.childNodes[0]); removeButton.addEventListener("click", () => { form.querySelector(`#filter_${selectedAttribute}`).remove(); delete form.selectedFilters[selectedAttribute]; updateForm(); form.dispatchEvent(new Event("input", { bubbles: true })); }); let filterProperties = Inputs.form({ attribute: html`

Filter${selectAttribute}

`, filter: html`

Type${filterSelection}

`, flatArray: flatArrayButton }); let target = html`

${Inputs.form( { filterProperties, summarize: summarize, filterer, removeButton }, { template: (d) => objectColumnTemplate({ inputs: d, filterDirection }) } )}`; // // Create the Filter Div // let target = html`

${selectAttribute} ${filterSelection}

${summarize} ${removeButton}

${filterView}

`; //Update the color of the div if the suggested values changes. This can be triggered if the hashcode changes if (recursiveFiltersButton() === true && replaceAttr) { target.style["background-color"] = "#FFECCB"; setTimeout(() => { target.style["background-color"] = colorPalette["bg"]; }, 5000); } let child_div = form.querySelector(`#add_filter_div`); let parent_div = child_div.parentNode; let prevCustomCode = null; if ( replaceAttr && replaceAttr === newAttr && replaceAttr in form.selectedFilters ) { prevCustomCode = form.selectedFilters?.[replaceAttr]["Advanced Filter"]; } if (replaceAttr && !recursiveFlag && replaceAttr in form.selectedFilters) { // Replace the old div id with the new div id child_div.replaceChild( target, child_div.querySelector("#filter_" + replaceAttr.replace(" ", "")) ); delete form.selectedFilters[replaceAttr]; if (newAttr === replaceAttr && !tdFocusFlag && !flatArray) { filterSelection.childNodes[0].focus(); } else if (flatArray) { console.log(flatArrayButton); flatArrayButton.childNodes[1].childNodes[1].childNodes[0].focus(); } else if (!tdFocusFlag) { selectAttribute.childNodes[0].focus(); } else { filterView.childNodes[0].focus(); } } else { // Add the target dev before the add filter button // parent_div.insertBefore(target, child_div); child_div.appendChild(target); selectAttribute.childNodes[0].focus(); // If the filter is first time initialize the currselected values based on the filter if (filter === "RANGE-SLIDER" && initialValues.length === 0) { initialValues = [ d3.min(data, (d) => d[selectedAttribute]), d3.max(data, (d) => d[selectedAttribute]) ]; } } form.selectedFilters[selectedAttribute] = { filter, hashCode, currSelected: initialValues, "Advanced Filter": prevCustomCode, flatArray }; form.dispatchEvent(new Event("input", { bubbles: true })); } form.addEventListener("input", (e) => { //skip full screen event if (e.srcElement.id === "fullScreenButton") { return; } let filteredData = filterData(data, form); console.log(filteredData); if (JSON.stringify(form.value) != JSON.stringify(filteredData)) { form.value = filteredData; updateForm(); } }); form.dispatchEvent(new Event("input", { bubbles: true })); function updateForm() { recordCount.innerHTML = `Selected ${form.value.length} out of ${data.length}

`; } function recursiveFilter(key, focusElement) { // Run only when the recursive filter flag is ON if (!recursiveFiltersButton()) { return; } console.log("recursive"); let elements = Object.entries(form.selectedFilters); elements.forEach((ele) => { if (key === ele[0]) { return; } let col = ele[0]; let hash_ = ele[1]["hashCode"]; let { possibleValues } = fetchDataProperties({ attr: col, data: form.value }); // Compare the curr hash with filtered data hash for every column if (hash({ [col]: possibleValues }) != hash_) { createOrReplaceFilter({ data: form.value, attributes: dataattributesfn(), form, replaceAttr: col, newAttr: col, newFilter: ele[1]["filter"], initialValues: ele[1]["currSelected"] }); } }); focusElement.focus(); } // Jump to next div when event is triggered // form.addEventListener("keydown", (evt) => { // if (evt.key === "~" && evt.shiftKey) { // let currActiveElement = document.activeElement; // let head = currActiveElement; // while (head && !head.id?.includes("filter_")) { // head = head.parentNode; // } // console.log("prev head", head); // head = head.nextElementSibling; // console.log("curr head", head); // while ( // head && // head.childNodes.length > 0 && // head.tagName != "BUTTON" && // head.tagName != "FORM" // ) { // head = head.childNodes[0]; // } // if (head.tagName === "FORM") { // head.childNodes[0].focus; // return; // } // console.log("focused element", head); // head.focus(); // } // }); return form; }37:T608,function filterData(data, form) { let filters = Object.entries(form.selectedFilters).map((x) => { return { key: x[0], value: form.querySelector("#filter_" + x[0].replace(" ", "")) ?.childNodes[0]?.childNodes[2]?.childNodes[0]?.value, filter: x[1]["filter"], flatArray: x[1]["flatArray"] }; }); // update the data based on the eval expression for each column let res = JSON.parse(JSON.stringify(data)); for (let filter of filters) { console.log({ filter }); if (!form.selectedFilters[filter["key"]]["ADVANCED-FILTER"]) { continue; } res = res.map((d) => { d[filter["key"]] = eval( form.selectedFilters[filter["key"]]["ADVANCED-FILTER"] ); return d; }); } for (let filter of filters) { filter = Object.values(filter); console.log(filter); if ( filter[1]?.length === 0 || filter[2] === " " || filter[1] === undefined ) { continue; } if (filter[2] === "RANGE-SLIDER") { res = res.filter( (d) => d[filter[0]] <= filter[1][1] && d[filter[0]] >= filter[1][0] ); } else if (filter[2] === "ADVANCED-FILTER") { console.log("Advanced filter", { filter }); res = res.filter(eval(filter[1])); } else { if (filter[3]) { res = res.filter((d) => d[filter[0]].flat(Infinity).some((x) => filter[1].includes(x)) ); } else { res = res.filter((d) => filter[1]?.includes(d[filter[0]])); } } } return res; }38:T4b8,function fetchDataProperties({ attr, data, form, flatArray = false, tdFlag = false }) { //Get attribute specs based on type of attribute let counter = {}; counter["string"] = 0; counter["boolean"] = 0; counter["number"] = 0; counter["object"] = 0; if (tdFlag) { try { data = JSON.parse(JSON.stringify(data)); data = data.map((d) => { return { [attr]: eval(form.selectedFilters[attr]["ADVANCED-FILTER"]) }; }); } catch { data = data; } } // Get Unique Values let possibleValues = Array.from(d3.group(data, (d) => d[attr]).keys()); if (flatArray) { possibleValues = [...new Set(possibleValues.flat(Infinity))]; } console.log(possibleValues); possibleValues.forEach((x) => { if (x) { counter[typeof x] += 1; } }); console.log({ counter }); // // Prioritize the data type // let dataType = // counter["string"] > 0 // ? "string" // : counter["number"] > 0 // ? "number" // : "object"; let dataType = Object.entries(counter).sort((a, b) => b[1] - a[1])[0][0]; let uniqueCount = possibleValues.length; return { dataType, possibleValues, uniqueCount }; }39:T76a,function fetchFilter({ filter, attr, data, form, initialValues = [], flatArray, tdFlag = false }) { // Fetch Properties let { dataType, uniqueCount, possibleValues } = fetchDataProperties({ attr, data, form, flatArray, tdFlag }); if (!filter) { //Get datatype, unique values from the random data switch (dataType) { case "string": filter = uniqueCount > 30 ? "DROP-DOWN" : "CHECK-BOX"; break; case "number": filter = "RANGE-SLIDER"; break; default: filter = "DROP-DOWN"; } } let filterView = html`

Default Filter not found.Please transform the data

`; // Fetch Filter View switch (filter) { case "DROP-DOWN": filterView = PersistInput( attr + "::DROP-DOWN", multiAutoSelect({ options: possibleValues, value: initialValues, placeholder: "Search" }) ); filterView[0].style = " "; console.log(filterView); break; case "CHECK-BOX": filterView = PersistInput( attr + "::CHECK-BOX", searchCheckbox(possibleValues, { value: initialValues }) ); break; case "RANGE-SLIDER": let min = d3.min(data, (d) => d[attr]), max = d3.max(data, (d) => d[attr]); // If the number is integer then step = 1 else default step let step = Number.isInteger(min) && Number.isInteger(max) ? 1 : null; filterView = PersistInput( attr + "::RANGE-SLIDER", rangeSlider({ min, max, step }) ); break; default: //Resolve the bug due to duplicate url values filterView = PersistInput( attr + "::ADVANCED-FILTER", html`

`
      );
  }

return {
    filter,
    filterView,
    hashCode: 1,
    dataType,
    possibleValues
  };
}3a:[{"id":"819f9307d5f4d7de2a321bd3b1232d4fde9b6f92ad304747c40c8cddd87041be5d81abddc4859d856a9f75177417d5b9ed2b278d2520b00b928007a71046c050","href":"https://static.observableusercontent.com/files/819f9307d5f4d7de2a321bd3b1232d4fde9b6f92ad304747c40c8cddd87041be5d81abddc4859d856a9f75177417d5b9ed2b278d2520b00b928007a71046c050","name":"papers.json","type":"application/json","lastModified":1659007988598.505,"size":720294},{"id":"fc475bd0d0224daeac1ed41ee3c68fd4b2384fe8fa0cdb09000117efc5588a515a03fc6b60311456f3d969bc85e8fd8d45e7a3ab78375dd93d3285523f79f283","href":"https://static.observableusercontent.com/files/fc475bd0d0224daeac1ed41ee3c68fd4b2384fe8fa0cdb09000117efc5588a515a03fc6b60311456f3d969bc85e8fd8d45e7a3ab78375dd93d3285523f79f283","name":"apts_may2022.json","type":"application/json","lastModified":1659440777323.293,"size":436667}]
31:{"id":"191f0487cad34446","slug":"data_filter","title":"Faceted Search Filter","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2022-07-28T11:33:08.598Z","update_time":"$D2023-12-06T01:00:11.978Z","view_time":null,"first_public_time":"$D2022-07-28T11:33:38.620Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"b760ea566a896d7d","login":"kasivisu4","name":"Kasi Viswanath","avatar_url":"https://avatars-next.observableusercontent.com/48e36723913e7e5b18b906e1d7cde12fad4146715e78bbf74d3db7969a248b56","tier":"starter_2024"},"version":6008,"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":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"},{"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":"Faceted Search Filter","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3791,"value":"<details style=\" background: #fffced; box-sizing: border-box; padding: 10px 5px;\"><summary style=\"font-weight: bold; cursor: pointer; outline: none;\">General Case </summary> Filter the paper having event_id as <b><i>a-ldav</i></b> or <b><i>a-beliv</i></b> <br>${viewof gereralCase}</details>","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3803,"value":"{\n  let target = html`<details style=\" background: #fffced; box-sizing: border-box; padding: 10px 5px;\"><summary style=\"font-weight: bold; cursor: pointer; outline: none;\" >Recursive Filter</summary>\nIn the data, the event_id is correlated with event_title. Just try to click on some event id's where the corresponding event titles will be shown\n<br>\n<b>Note : Recursive Filter is turned on</b>\n ${viewof recursiveFilter}</details>`;\n  return target;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3940,"value":"{\n  let target = html`<details style=\" background: #fffced; box-sizing: border-box; padding: 10px 5px;\"><summary style=\"font-weight: bold; cursor: pointer; outline: none;\"> Data Transformation </summary> Selecting the paper published on 26th is difficult as the date in timestamp format. We can perform data transformation by providing the arrow expression to fetch only date from timestamp and filter the data as follows  ${viewof dataTransfomation} </details> `;\n  target.addEventListener(\"click\", viewof dataTransfomation.loop);\n  return target;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5902,"value":"d1 = {\n  let res = [\n    { c1: \"x\", c2: \"a\", c3: \"b\" },\n    { c1: \"x\", c2: \"y\", c3: \"c\" },\n    { c1: \"d\", c2: \"y\", c3: \"z\" }\n  ];\n  return res;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5906,"value":"Inputs.table(d1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5911,"value":"viewof x_temp = {\n  return recursiveDataFilter({\n    datafn: () => d1,\n    dataattributesfn: () => Object.keys(d1[0]),\n    addFullScreen: true,\n    filterDirection: \"column\",\n    width: \"100%\",\n    height: \"100%\"\n  });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6003,"value":"Inputs.table(penguins)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6005,"value":"recur","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2857,"value":"Try Recursive Filter:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5761,"value":"viewof data = dataInput({\n  initialValue: FileAttachment(\"papers.json\").json({\n    typed: true\n  }),\n  format: \"auto\" // Optional, one of MongoExport, JSON, CSV, CSVNoAutoType\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2061,"value":"viewof x = {\n  return recursiveDataFilter({\n    datafn: () => data,\n    dataattributesfn: () => Object.keys(data[0]),\n    addFullScreen: true,\n    filterDirection: \"column\",\n    width: \"322px\",\n    height: \"100%\"\n  });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6007,"value":"recursiveDataFilter({ datafn: () => penguins })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5997,"value":"viewof x.selectedFilters[\"time_stamp\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4425,"value":"filtered_data = {\n  x;\n  return Inputs.table(x);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5899,"value":"data[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5915,"value":"recursiveDataFilter({\n  datafn: () => cars,\n  addFullScreen: true,\n  dataattributesfn: () => Object.keys(cars[0])\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5995,"value":"cars","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5784,"value":"viewof x.selectedFilters","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3700,"value":"viewof gereralCase = {\n  let target = recursiveDataFilter({\n    datafn: () => data,\n    dataattributesfn: () => Object.keys(data[0])\n  });\n  // S1: Click the add filter button\n  target.querySelector(\"#add_filter_div\").childNodes[0].childNodes[0].click();\n\n  // S2: Select the event_id attribute\n  target.childNodes[0].childNodes[5].childNodes[0].childNodes[0].childNodes[0].childNodes[2].value =\n    \"event_id\";\n\n  //trigger the event for S2\n  target.childNodes[0].childNodes[5].childNodes[0].childNodes[0].childNodes[0].childNodes[2].dispatchEvent(\n    new Event(\"input\", { bubbles: true })\n  );\n\n  return target;\n  // S3: select the CHECK-BOX of a-ldav or a-beliv\n  target.childNodes[0].childNodes[5].childNodes[2].childNodes[0].childNodes[0].childNodes[8].value =\n    [\"a-ldav\", \"a-beliv\"];\n\n  //trigger the event for S3\n  target.childNodes[0].childNodes[5].childNodes[2].childNodes[0].childNodes[0].childNodes[8].dispatchEvent(\n    new Event(\"input\", { bubbles: true })\n  );\n  return target;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3812,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3944,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3307,"value":"{\n  x;\n  return viewof x.selectedFilters;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4126,"value":"function objectColumnTemplate({ inputs, filterDirection }) {\n  if (filterDirection == \"row\") {\n    return html`<div style='display:flex;flex-direction:${filterDirection};padding:10px;justify-content: space-around;column-gap:2%;border-bottom:solid 1px ${\n      colorPalette[\"border\"]\n    };border-left:solid 1px ${colorPalette[\"border\"]};border-right:solid 1px ${\n      colorPalette[\"border\"]\n    }'>${Object.values(inputs)}`;\n  } else {\n    return html`<div style='display:flex;flex-direction:${filterDirection};padding:10px;border-bottom:solid 1px ${\n      colorPalette[\"border\"]\n    };border-left:solid 1px ${colorPalette[\"border\"]};border-right:solid 1px ${\n      colorPalette[\"border\"]\n    };width:300px'>${Object.values(inputs)}`;\n  }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1466,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1055,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5827,"value":"import { PersistInput } from \"@john-guerra/persist-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1574,"value":"hash = require(\"object-hash\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2581,"value":"function toogleTextButton(options, config) {\n  let target = Inputs.button(options[0], config);\n  let counter = 1;\n  target.value = options[0];\n  target.childNodes[0].style = \"color:#3182BD;font-weight: bold\";\n  buttonHiglighter(target.childNodes[1]);\n  target.addEventListener(\"click\", () => {\n    target.value = options[counter];\n    target[0].childNodes[0].data = options[counter];\n    counter = (counter + 1) % options.length;\n  });\n  return target;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2738,"value":"function buttonHiglighter(button) {\n  // button.style = `background-color:${colorPalette[\"buttontext\"]};color:${colorPalette[\"buttonbg\"]};font-size: 0.97em;letter-spacing: 0.097em;border:1`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5565,"value":"{\n  let b = Inputs.button(\"Add Filter\");\n  buttonHiglighter(b.childNodes[0]);\n  return b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"default_filters = {\n  return {\n    number: [\n      \"DROP-DOWN\",\n      \"CHECK-BOX\",\n      \"RANGE-SLIDER\",\n      \"ADVANCED-FILTER\"\n    ],\n    string: [\"DROP-DOWN\", \"CHECK-BOX\", \"ADVANCED-FILTER\"],\n    object: [\n      \"DROP-DOWN\",\n      \"CHECK-BOX\",\n      \"RANGE-SLIDER\",\n      \"ADVANCED-FILTER\"\n    ],\n    default: [\n      \"DROP-DOWN\",\n      \"CHECK-BOX\",\n      \"RANGE-SLIDER\",\n      \"ADVANCED-FILTER\"\n    ]\n  };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import { searchCheckbox } from \"@john-guerra/search-checkbox\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"import { rangeSlider } from \"@mootari/range-slider@1781\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"import { multiAutoSelect } from \"@john-guerra/multi-auto-select\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2235,"value":"import { SummarizeColumn } from \"@observablehq/summary-table\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5126,"value":"colorPalette = {\n  return {\n    bg: \"#ffffff\",\n    buttonbg: \"#3b5fc0\",\n    buttontext: \"#ffffff\",\n    text: \"#000000\", // text\n    border: \"#e6eaee\"\n  };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5399,"value":"import { data as apts } from \"@kasivisu4/craigslist-apt-data\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5766,"value":"import { dataInput } from \"@john-guerra/data-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5802,"value":"import { localStorage } from \"@mbostock/safe-local-storage\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5924,"value":"function test(data) {\n  let data_ = data;\n  function getColumns() {\n    console.log(Object.keys(data_[0]));\n  }\n  return getColumns;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5926,"value":"{\n  let data = [{ key: \"value\" }];\n  let f = test(data);\n  f();\n  data[0][\"test\"] = \"v\";\n  f();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5968,"value":"{\n  let target = SummarizeColumn(cars, \"year\").childNodes[3].childNodes[0];\n\n  return htl.html`${target}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5979,"value":"1 + 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5982,"value":"select 1 + 1","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"","database":"var:apts"}],"files":"$W3a","stdlib":"1","titling":"auto"}}
32:"$31:body"
</article></body></html>