2b:null 2c:["$","title",null,{"children":"Filter functionality | Selene Blok | Observable"}] 31:T81e,function filtersForm(savedFilters) { const activeFilters = savedFilters || []; let newForm; const removeAddFilterMenu = () => { const selectedFilter = finalForm.querySelector('.pm-filter-selected'); selectedFilter.innerHTML = ''; newForm = null; return selectedFilter; }; const removeFilter = () => {}; const addFilter = filterName => { // Clear the selected filter and prepare for a new one to be set. const selectedFilter = removeAddFilterMenu(); newForm = filters[filterName].function; selectedFilter.appendChild(newForm); const submitFilter = e => { if (newForm && newForm.value) { activeFilters.push({ name: filterName, value: newForm.value }); } console.debug(activeFilters); removeAddFilterMenu(); }; // Submit the options for the form. newForm.addEventListener('submit', submitFilter, { once: true, passive: true }); }; const create_filter_html = (filterName, properties) => { return html.fragment` `; }; const finalForm = html` `; return finalForm; }32:[] 2f:{"id":"a7e47d3245c7266d","slug":"filter-functionality","title":"Filter functionality","thumbnail":"92aacd3ceaca6e58c1597f9ea457876cbdf750777e76be7a767e4d4112669cc5","access_level":"public","create_time":"$D2020-11-30T13:53:36.488Z","update_time":"$D2020-12-04T12:26:36.050Z","view_time":null,"first_public_time":"$D2020-12-01T13:35:39.410Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3cdeccc1ad2f7c8e","login":"selenecodes","name":"Selene Blok","avatar_url":"https://avatars-next.observableusercontent.com/100c4338f6c570d93da1037a8d94a51f2040e227a3480ee2b464abd22afaa553","tier":"starter_2024"},"version":418,"publish_version":418,"role":null,"authored":false,"authors":[{"type":"individual","id":"7fe63d183a47404d","login":"selenecodes","name":"Selene Blok","avatar_url":"https://avatars-next.observableusercontent.com/25a7c960cccc8fbc811dfa2c0c4a56f86a2f798f0c0ab2995624797232075f8f","tier":null}],"members":[{"type":"individual","id":"7fe63d183a47404d","login":"selenecodes","name":"Selene Blok","avatar_url":"https://avatars-next.observableusercontent.com/25a7c960cccc8fbc811dfa2c0c4a56f86a2f798f0c0ab2995624797232075f8f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Filter functionality","cells":[{"id":286,"value":"md`# Filter functionality`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"filtersForm()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"md`# Possible filters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"filters = ({\n Timeframe: {\n text: 'Filters by timestamp',\n function: timeRangeFilter()\n },\n Variation: {\n text: 'Filters variants',\n function: variantsFilter()\n },\n Performance: {\n text: 'Filters cases by performance',\n function: performanceFilter()\n },\n Endpoints: {\n text: 'Removes incomplete cases',\n function: endpointsFilter()\n },\n Attribute: {\n text: 'Filters events by attribute',\n function: attributeFilter()\n },\n Follower: {\n text: 'Filters by subsequences',\n function: followerFilter()\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"md`# Filter HTML functions\n\nThe following functions create the forms that are shown when adding a new filter.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"function timeRangeFilter() {\n const options = [\n 'contain',\n 'started_in',\n 'completed_in',\n 'intersecting',\n 'trim'\n ];\n\n return formWithSubmit(html``);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"function performanceFilter() {\n return formWithSubmit(html``);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"function variantsFilter() {\n return formWithSubmit(html``);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"function followerFilter() {\n return formWithSubmit(html``);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"function endpointsFilter() {\n return formWithSubmit(html``);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"function attributeFilter() {\n return formWithSubmit(html``);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"md`# Helper functions\n\nThese functions are for creating small HTML Fragments from for example an array or a list of active filters.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"function create_active_filter_html(activeFilter) {\n return html.fragment`\n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"function arr_to_options(arr) {\n return arr.map(\n element => html.fragment``\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"import { html } from '@observablehq/htl'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"import { form, formValue } from '@mbostock/form-input'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"function formWithSubmit(form) {\n const container = html`

${form}`;\n form.addEventListener(\"submit\", event => {\n event.preventDefault();\n container.value = formValue(form);\n container.dispatchEvent(new CustomEvent(\"input\"));\n });\n form.addEventListener(\"input\", event => {\n event.preventDefault();\n // Need this, because otherwise the viewof Generator catches bubbling input events\n event.stopPropagation();\n });\n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"

Start time:
End time:
Select time filter mode:	\n \n

Lower bound (days):
Upper bound (days):