2b:null 2c:["$","title",null,{"children":"React filtermenu | Selene Blok | Observable"}] 31:T709,function filterMenu({ savedFilters, file, debug = false }) { return render(({ setValue, useSetter }) => { const reactFilterMenu = createRef(); const [state, dispatch] = useReducer(filterReducer, { activeFilters: savedFilters || [], editingType: '', editingIndex: -1 }); // Need this, because otherwise the viewof Generator catches bubbling input events useEffect(() => { reactFilterMenu.current.addEventListener("input", event => { event.preventDefault(); event.stopPropagation(); }); }, []); useSetter(state.activeFilters); return jsx`

${styles}

<${ProfileMenu} state=${state} />

Active filters

<${ActiveFilters} filters=${state.activeFilters} dispatch=${dispatch} /> <${FilterOptions} options=${filterOptions} dispatch=${dispatch} />

<${AddFilterMenu} state=${state} dispatch=${dispatch} file=${file} debug=${debug} />

${ debug ? jsx`

${JSON.stringify({
                  index: state.editingIndex,
                  type: state.editingType,
                  file: file
                })}

${JSON.stringify(state.activeFilters)}

` : '' }

`; }); }32:T561,AddFilterMenu = component(({ state, dispatch, file, debug }) => { const savedProps = state.editingIndex != -1 ? state.activeFilters[state.editingIndex] : {}; const handleSubmit = filter => { if (state.editingIndex != -1) { dispatch({ type: 'EDIT', filter: filter }); } else { dispatch({ type: 'ADD', filter: filter }); } }; switch (state.editingType) { case 'Timeframe': return jsx`<${TimeRangeFilter} applyFilter=${handleSubmit} savedProps=${savedProps}/>`; case 'Variation': return jsx`<${VariantsFilter} applyFilter=${handleSubmit} savedProps=${savedProps}/>`; case 'Performance': return jsx`<${PerformanceFilter} applyFilter=${handleSubmit} savedProps=${savedProps}/>`; case 'Endpoints': return jsx`<${EndpointsFilter} applyFilter=${handleSubmit} savedProps=${savedProps} file=${file}/>`; case 'Attribute': return jsx`<${AttributeFilter} applyFilter=${handleSubmit} savedProps=${savedProps} file=${file} debug=${debug}/>`; case 'Follower': return jsx`<${FollowerFilter} applyFilter=${handleSubmit} savedProps=${savedProps} debug=${debug}/>`; default: return jsx`

Create a filter by clicking one of the filters on the left

`; } })33:T494,ActiveFilters = component(({ filters, dispatch }) => { const handleMoveUp = (e, idx) => { e.stopPropagation(); dispatch({ type: 'MOVE_UP', filterIndex: idx }); }; const handleMoveDown = (e, idx) => { e.stopPropagation(); dispatch({ type: 'MOVE_DOWN', filterIndex: idx }); }; const handleRemove = (e, idx) => { e.stopPropagation(); dispatch({ type: 'REMOVE', filterIndex: idx }); }; const handleEdit = (idx, filterName) => { dispatch({ type: 'SET_EDIT_MODE', editingIndex: idx, editingType: filterName }); }; return jsx`

handleEdit(idx, filter.name)}>
${filter.name}

`; })34:T511,styles = jsx` `35:T4ce,function filterReducer(state, action) { const { activeFilters, editingIndex, editingType } = state; switch (action.type) { case 'ADD': { return { ...state, activeFilters: [...activeFilters, action.filter], editingType: '' }; } case 'REMOVE': { return { filterType: '', editingIndex: -1, activeFilters: activeFilters.filter((_, i) => i !== action.filterIndex) }; } case 'EDIT': { const newFilters = Object.assign([...activeFilters], { [editingIndex]: action.filter }); return { ...state, activeFilters: newFilters, editingIndex: -1 }; } case 'MOVE_UP': { return { ...state, activeFilters: moveUp(activeFilters, action.filterIndex) }; } case 'MOVE_DOWN': { return { ...state, activeFilters: moveDown(activeFilters, action.filterIndex) }; } case 'SET_EDIT_MODE': { return { ...state, editingIndex: action.editingIndex ?? -1, editingType: action.editingType }; } default: { throw new Error('This action type does not exist', action.type); } } }36:T789,TimeRangeFilter = component(({ applyFilter, savedProps = {} }) => { const options = [ 'contain', 'started_in', 'completed_in', 'intersecting', 'trim' ]; const [startTime, setStartTime] = useState( chainingGetter(savedProps, 'value', 'startTime') || "" ); const [endTime, setEndTime] = useState( chainingGetter(savedProps, 'value', 'endTime') || "" ); const [mode, setMode] = useState( chainingGetter(savedProps, 'value', 'mode') || options[0] ); useEffect(() => { setStartTime(chainingGetter(savedProps, 'value', 'startTime') || ""); setEndTime(chainingGetter(savedProps, 'value', 'endTime') || ""); setMode(chainingGetter(savedProps, 'value', 'mode') || options[0]); }, [savedProps]); return jsx`

Start time: setStartTime(e.target.value)}/>

End time: setEndTime(e.target.value)}/>

Select filter mode:

`; })37:T585,PerformanceFilter = component(({ applyFilter, savedProps = {} }) => { const [minCasePerformance, setMinCasePerformance] = useState( chainingGetter(savedProps, 'value', 'minCasePerformance') || 0 ); const [maxCasePerformance, setMaxCasePerformance] = useState( chainingGetter(savedProps, 'value', 'maxCasePerformance') || 0 ); useEffect(() => { setMinCasePerformance( chainingGetter(savedProps, 'value', 'minCasePerformance') || 0 ); setMaxCasePerformance( chainingGetter(savedProps, 'value', 'maxCasePerformance') || 0 ); }, [savedProps]); return jsx`

Lower bound (days): setMinCasePerformance(parseInt(e.target.value))}/>

Upper bound (days): setMaxCasePerformance(parseInt(e.target.value))}/>

`; })38:T7dc,EndpointsFilter = component( ({ applyFilter, file, savedProps = {}, debug = false }) => { // State for values retrieved from HTTP const [startActivityOptions, setStartActivityOptions] = useState([]); const [endActivityOptions, setEndActivityOptions] = useState([]); // Form state const [startActivities, setStartActivities] = useState( chainingGetter(savedProps, 'value', 'startActivities') || [] ); const [endActivities, setEndActivities] = useState( chainingGetter(savedProps, 'value', 'endActivities') || [] ); useEffect(() => { const getOptions = async () => { const response = await fetch(`${apiUrl}/start_end_activities`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ file }) }); const result = await response.json(); if (result.hasOwnProperty('start_activities')) { setStartActivityOptions(result['start_activities']); } if (result.hasOwnProperty('end_activities')) { setEndActivityOptions(result['end_activities']); } }; getOptions(); }, []); return jsx`

Start activities <${MultiSelect} options=${startActivityOptions} onChange=${selection => setStartActivities(selection)} selection=${startActivities} debug=${debug} />

End activities <${MultiSelect} options=${endActivityOptions} onChange=${selection => setEndActivities(selection)} selection=${endActivities} debug=${debug} />

`; } )39:Tb61,AttributeFilter = component( ({ applyFilter, file, savedProps = {}, debug = false }) => { // State for values retrieved from HTTP const [columns, setColumns] = useState([]); const [columnValues, setColumnValues] = useState([]); // Form state const [filterColumn, setFilterColumn] = useState( chainingGetter(savedProps, 'value', 'filterColumn') || "case:concept:name" ); const [inverse, setInverse] = useState( chainingGetter(savedProps, 'value', 'inverse') || false ); const [mode, setMode] = useState( chainingGetter(savedProps, 'value', 'mode') || 'contain' ); const [selected, setSelected] = useState( chainingGetter(savedProps, 'value', 'selected') || [] ); useEffect(() => { const fetchColumns = async () => { const response = await fetch(`${apiUrl}/get_columns`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ file }) }); const columns = await response.json(); setColumns(columns); }; fetchColumns(); }, []); useEffect(() => { const fetchColumnValues = async () => { const response = await fetch(`${apiUrl}/get_column_values`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ file, column: filterColumn }) }); const values = await response.json(); setColumnValues(values); }; fetchColumnValues(); }, [filterColumn]); return jsx`

Select column:

Set filter mode:

Enable inverse filtering: setInverse(e.target.checked)} checked=${inverse} />

<${MultiSelect} options=${columnValues} onChange=${selection => setSelected(selection)} selection=${selected} debug=${debug} />

`; } )3a:[] 2f:{"id":"2c72a3c7742746ab","slug":"react-filter-menu","title":"React filtermenu","thumbnail":"8d11da7c3d2d60abc47d41dd5d10bfa4cb1ff384e0954623fcf2d92aba85cacf","access_level":"public","create_time":"$D2020-12-04T12:29:20.467Z","update_time":"$D2020-12-15T15:11:04.972Z","view_time":null,"first_public_time":"$D2020-12-04T14:54:33.599Z","fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"3cdeccc1ad2f7c8e","login":"selenecodes","name":"Selene Blok","avatar_url":"https://avatars-next.observableusercontent.com/100c4338f6c570d93da1037a8d94a51f2040e227a3480ee2b464abd22afaa553","tier":"starter_2024"},"version":978,"publish_version":978,"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":"React filtermenu","cells":[{"id":0,"value":"md`# React filtermenu`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"filters","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"savedFilters = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"viewof filters = filterMenu({ savedFilters, file: '761.csv', debug: false })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"ProfileMenu = component(({ state }) => {\n if (state.activeFilters && state.activeFilters.length) {\n const data = JSON.stringify(state.activeFilters);\n\n return jsx`\n \n `;\n }\n\n return jsx`

`;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"FilterOptions = component(({ options, dispatch }) => {\n const handleAddFilterComponent = type => {\n dispatch({ type: 'SET_EDIT_MODE', editingType: type });\n };\n\n return jsx`\n

\n handleAddFilterComponent(option.name)}>\n
${option.name}
\n
${option.text}
\n

`;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"md`## State reducer function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"md`## Filter Components`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"VariantsFilter = component(({ applyFilter, savedProps = {} }) => {\n useEffect(() => {}, [savedProps]);\n\n return jsx`\n

\n `;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"FollowerFilter = component(({ applyFilter, savedProps = {} }) => {\n useEffect(() => {}, [savedProps]);\n \n return jsx`\n

\n `;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"md`## Possible filters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"filterOptions = [\n {\n name: 'Timeframe',\n text: 'Filters by timestamp'\n },\n {\n name: 'Variation',\n text: 'Filters variants'\n },\n {\n name: 'Performance',\n text: 'Filters cases by performance'\n },\n {\n name: 'Endpoints',\n text: 'Removes incomplete cases'\n },\n {\n name: 'Attribute',\n text: 'Filters events by attribute'\n },\n {\n name: 'Follower',\n text: 'Filters by subsequences'\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"md`## Functions for shifting elemens in an array immutably`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"moveDown = function(arr, idx) {\n if (idx != arr.length) {\n return move(arr, idx, idx + 1);\n } else {\n return arr;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"moveUp = function(arr, idx) {\n if (idx != 0) {\n return move(arr, idx, idx - 1);\n } else {\n return arr;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"move = (arr, from, to) => {\n const clone = [...arr];\n Array.prototype.splice.call(\n clone,\n to,\n 0,\n Array.prototype.splice.call(clone, from, 1)[0]\n );\n return clone;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"function download(content, fileName, contentType) {\n var a = document.createElement(\"a\");\n var file = new Blob([content], { type: contentType });\n a.href = URL.createObjectURL(file);\n a.download = fileName;\n a.click();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"function usePrevious(value) {\n const ref = useRef();\n useEffect(() => {\n ref.current = value;\n });\n return ref.current;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"function chainingGetter(obj, ...props) {\n const val = obj[props[0]];\n if (props.length === 1 || !val) {\n return val;\n }\n const rest = props.slice(1);\n return chainingGetter.apply(null, [val, ...rest]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"import { MultiSelect } from '@selenecodes/react-multiselect'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"import { apiUrl } from '@selenecodes/pm-constants'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"import {\n render,\n component,\n jsx,\n memo,\n forwardRef,\n React,\n ReactDOM,\n createElement,\n Children,\n createRef,\n createContext,\n lazy,\n Fragment,\n StrictMode,\n Suspense,\n cloneElement,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useMemo,\n useReducer,\n useRef,\n useState,\n useDebugValue,\n createPortal,\n __SECRET_SWITCHER\n} from '@j-f1/react'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 30:"$2f:body"