⚡ 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'
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.