⚡ Data scientist, I enjoy telling stories with data. I'm currently learning D3.js and working on hobby projects, Mapbox visualizations, and fiddling with Juniper network data.
Published
Edited
Dec 15, 2020
Importers
1 star
filters
savedFilters = []
viewof filters = filterMenu({ savedFilters, file: '761.csv', debug: false })
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`
<div>
<div>
<span>Select column:
<select onChange=${e =>
setFilterColumn(e.target.value)} value=${filterColumn}>
${columns.map(
(column, idx) =>
jsx`<option key=${idx} value=${column}>${column}</option>`
)}
</select>
</span>
</div>
<div>
<span>Set filter mode:
<select onChange=${e => setMode(e.target.value)} value=${mode}>
<option value="trim">Trim</option>
<option value="contain">Contain</option>
</select>
</span>
</div>
<div>
<span>Enable inverse filtering:
<input
type="checkbox"
onChange=${e => setInverse(e.target.checked)}
checked=${inverse}
/>
</span>
</div>
<div>
<${MultiSelect}
options=${columnValues}
onChange=${selection => setSelected(selection)}
selection=${selected}
debug=${debug}
/>
</div>
<div>
<button onClick=${() =>
applyFilter({
name: 'Attribute',
value: { mode, inverse, selected, filterColumn }
})}>Apply filter</button>
</div>
</div>
`;
}
)
filterOptions = [
{
name: 'Timeframe',
text: 'Filters by timestamp'
},
{
name: 'Variation',
text: 'Filters variants'
},
{
name: 'Performance',
text: 'Filters cases by performance'
},
{
name: 'Endpoints',
text: 'Removes incomplete cases'
},
{
name: 'Attribute',
text: 'Filters events by attribute'
},
{
name: 'Follower',
text: 'Filters by subsequences'
}
]
function download(content, fileName, contentType) {
var a = document.createElement("a");
var file = new Blob([content], { type: contentType });
a.href = URL.createObjectURL(file);
a.download = fileName;
a.click();
}
function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
}
function chainingGetter(obj, ...props) {
const val = obj[props[0]];
if (props.length === 1 || !val) {
return val;
}
const rest = props.slice(1);
return chainingGetter.apply(null, [val, ...rest]);
}
import {
render,
component,
jsx,
memo,
forwardRef,
React,
ReactDOM,
createElement,
Children,
createRef,
createContext,
lazy,
Fragment,
StrictMode,
Suspense,
cloneElement,
useCallback,
useContext,
useEffect,
useImperativeHandle,
useLayoutEffect,
useMemo,
useReducer,
useRef,
useState,
useDebugValue,
createPortal,
__SECRET_SWITCHER
} from '@j-f1/react'
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
