@ocelescope/filter 0.10.1 → 0.11.0

package/dist/index.js

@@ -1,22 +1,25 @@
-import { AttributesTable, RelationTable, defineModule, defineModuleRoute, useCurrentOcel, useInvalidate } from "@ocelescope/core";
-import { CheckIcon, FilterIcon, PlusIcon, RotateCcwIcon, Trash2Icon, XIcon } from "lucide-react";
-import { ActionIcon, ActionIconGroup, Box, Grid, Group, LoadingOverlay, MultiSelect, NumberInput, Paper, RangeSlider, ScrollArea, Scroller, Stack, Switch, Tabs, Text, TextInput } from "@mantine/core";
+import { ActivityPicker, AttributesTable, BarList, ObjectTypePicker, OptionPicker, defineModule, defineModuleRoute, useCurrentOcel, useInvalidate } from "@ocelescope/core";
+import { ArrowLeftIcon, CheckIcon, FilterIcon, GripVerticalIcon, InfoIcon, PlusIcon, RotateCcwIcon, Trash2Icon, XIcon } from "lucide-react";
+import { ActionIcon, Badge, Box, Button, Center, Divider, Grid, Group, InlineStyles, Loader, LoadingOverlay, Menu, NumberInput, Paper, Popover, RangeSlider, ScrollArea, SegmentedControl, Select, SimpleGrid, Slider, Stack, Switch, Text, TextInput, Title, Tooltip, UnstyledButton, useMantineTheme } from "@mantine/core";
 import hash from "object-hash";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useMutation, useQuery } from "@tanstack/react-query";
 import { customFetch } from "@ocelescope/api-client";
-import { Controller, Watch, useFieldArray, useForm } from "react-hook-form";
-import { useRouter } from "next/router.js";
-import { memo, useMemo, useState } from "react";
-import { DateTimePicker } from "@mantine/dates";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { Controller, useFieldArray, useForm, useWatch } from "react-hook-form";
+import { useAttributeDistribution, useAttributeValues, useE2o, useE2oCountDistribution, useEventAttributes, useEventCounts, useO2o, useO2oCountDistribution, useObjectAttributes, useObjectCounts, useTimeInfo } from "@ocelescope/api-base";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { BarChart } from "@mantine/charts";
-import { useEventCounts, useObjectCounts, useTimeInfo } from "@ocelescope/api-base";
 import dayjs from "dayjs";
 import isBetween from "dayjs/plugin/isBetween.js";
-//#region src/lib/fetcher.ts
+import { DateTimePicker } from "@mantine/dates";
+import EChartsReact from "echarts-for-react";
+import { useDebouncedValue } from "@mantine/hooks";
+import dynamic from "next/dynamic.js";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+// src/lib/fetcher.ts
 const customFetch$1 = async (config, options) => customFetch(config, options);
-//#endregion
-//#region src/api/base.ts
+// src/api/base.ts
 /**
 * Generated by orval 🍺
 * Do not edit manually.
@@ -36,6 +39,47 @@ const withQueryKey = (query, queryKey) => {
 	return result;
 };
 /**
+* @summary Register View
+*/
+const registerView = (ocelId, timeFrameFilterActivityFilterObjectTypeFilterEventAttributeFilterObjectAttributeFilterE2OCountFilterO2OCountFilter, params, options, signal) => {
+	return customFetch$1({
+		url: `/api/external/modules/filter/v1/${ocelId}/views`,
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		data: timeFrameFilterActivityFilterObjectTypeFilterEventAttributeFilterObjectAttributeFilterE2OCountFilterO2OCountFilter,
+		params,
+		signal
+	}, options);
+};
+const getRegisterViewQueryKey = (ocelId, timeFrameFilterActivityFilterObjectTypeFilterEventAttributeFilterObjectAttributeFilterE2OCountFilterO2OCountFilter, params) => {
+	return [
+		"POST",
+		`/api/external/modules/filter/v1/${ocelId}/views`,
+		...params ? [params] : [],
+		timeFrameFilterActivityFilterObjectTypeFilterEventAttributeFilterObjectAttributeFilterE2OCountFilterO2OCountFilter
+	];
+};
+const getRegisterViewQueryOptions = (ocelId, timeFrameFilterActivityFilterObjectTypeFilterEventAttributeFilterObjectAttributeFilterE2OCountFilterO2OCountFilter, params, options) => {
+	const { query: queryOptions, request: requestOptions } = options ?? {};
+	const queryKey = queryOptions?.queryKey ?? getRegisterViewQueryKey(ocelId, timeFrameFilterActivityFilterObjectTypeFilterEventAttributeFilterObjectAttributeFilterE2OCountFilterO2OCountFilter, params);
+	const queryFn = ({ signal }) => registerView(ocelId, timeFrameFilterActivityFilterObjectTypeFilterEventAttributeFilterObjectAttributeFilterE2OCountFilterO2OCountFilter, params, requestOptions, signal);
+	return {
+		queryKey,
+		queryFn,
+		enabled: ocelId !== null && ocelId !== void 0,
+		staleTime: 3e5,
+		...queryOptions
+	};
+};
+/**
+* @summary Register View
+*/
+function useRegisterView(ocelId, timeFrameFilterActivityFilterObjectTypeFilterEventAttributeFilterObjectAttributeFilterE2OCountFilterO2OCountFilter, params, options, queryClient) {
+	const queryOptions = getRegisterViewQueryOptions(ocelId, timeFrameFilterActivityFilterObjectTypeFilterEventAttributeFilterObjectAttributeFilterE2OCountFilterO2OCountFilter, params, options);
+	const query = useQuery(queryOptions, queryClient);
+	return withQueryKey(query, queryOptions.queryKey);
+}
+/**
 * @summary Getfilter
 */
 const getFilter = (ocelId, options, signal) => {
@@ -108,508 +152,1363 @@ const getSetFilterMutationOptions = (options) => {
 const useSetFilter = (options, queryClient) => {
 	return useMutation(getSetFilterMutationOptions(options), queryClient);
 };
-//#endregion
-//#region src/hooks/useSearchParams.tsx
-const useCurrentFilterTab = ({ defaultTab, queryKey = "tab", tabs }) => {
-	const router = useRouter();
-	const currentTab = useMemo(() => {
-		const raw = router.query[queryKey];
-		const tab = typeof raw === "string" ? raw : defaultTab;
-		return tabs.includes(tab) ? tab : defaultTab;
-	}, [
-		router.query,
-		queryKey,
-		defaultTab
-	]);
-	const setCurrentTab = (tab) => {
-		router.replace({
-			pathname: router.pathname,
-			query: {
-				...router.query,
-				[queryKey]: tab
+// src/hooks/useAttributeFilterColumns.tsx
+const getInitialCondition = (attribute) => {
+	switch (attribute.type) {
+		case "int": return { number_range: [Number.parseInt(`${attribute.min}`, 10), Number.parseInt(`${attribute.max}`, 10)] };
+		case "float": return { number_range: [Number.parseFloat(`${attribute.min}`), Number.parseFloat(`${attribute.max}`)] };
+		case "date": return { time_range: [String(attribute.min), String(attribute.max)] };
+		default: return {};
+	}
+};
+const getEntityType = (attribute) => {
+	if (!("entity_type_names" in attribute)) return attribute.entity_type;
+	return attribute.entity_type_names.length === 1 ? attribute.entity_type_names[0] : void 0;
+};
+const useAttributeFilter = ({ filter, onChange }) => {
+	return { filterColumns: useMemo(() => [{
+		accessor: "action",
+		title: "",
+		width: "100px",
+		render: (record) => /* @__PURE__ */ jsx(Button, {
+			size: "compact-sm",
+			variant: "default",
+			onClick: (event) => {
+				event.stopPropagation();
+				onChange({
+					type: filter.type,
+					attribute: record.name,
+					target_type: getEntityType(record),
+					...getInitialCondition(record)
+				});
+			},
+			children: "Use"
+		})
+	}], [filter.type, onChange]) };
+};
+// src/hooks/useView.ts
+const ORIGINAL = { ocel_version: "original" };
+const useView = (ocelId, steps) => {
+	const { data } = useRegisterView(ocelId, steps, void 0, { query: {
+		placeholderData: keepPreviousData,
+		staleTime: Infinity
+	} });
+	if (data === void 0) return;
+	return data === null ? ORIGINAL : { view_id: data };
+};
+const viewProps = (view) => "view_id" in view ? { viewId: view.view_id } : { ocelVersion: "original" };
+// src/util/dayjs.ts
+dayjs.extend(isBetween);
+var dayjs_default = dayjs;
+// src/components/Previewed.tsx
+/** Renders ``children`` with the preview data once it is there. */
+const Previewed = ({ query, children }) => {
+	if (query.data !== void 0) return children(query.data);
+	if (query.error) return /* @__PURE__ */ jsx(Text, {
+		c: "red",
+		size: "sm",
+		children: "Could not load the log as the steps before leave it."
+	});
+	return /* @__PURE__ */ jsx(Center, {
+		flex: 1,
+		mih: 120,
+		children: /* @__PURE__ */ jsx(Loader, { size: "sm" })
+	});
+};
+// src/components/FilterViews/AttributeFilter/util.ts
+const DATE_FORMAT$1 = "YYYY-MM-DD HH:mm";
+const formatValue = (value, type) => {
+	if (type === "date") return dayjs_default(value).format(DATE_FORMAT$1);
+	if (type === "float" && typeof value === "number") return value.toLocaleString(void 0, { maximumFractionDigits: 2 });
+	return `${value}`;
+};
+// src/components/RangeView.tsx
+const Histogram = ({ bins, value: [low, high], format, onSelect, exclude }) => {
+	const theme = useMantineTheme();
+	const option = useMemo(() => ({
+		tooltip: {
+			trigger: "axis",
+			axisPointer: { type: "shadow" },
+			formatter: (params) => {
+				const [param] = Array.isArray(params) ? params : [params];
+				const bin = bins[param?.dataIndex ?? 0];
+				if (!bin) return "";
+				return `${bin.start === bin.end ? format(bin.start) : `${format(bin.start)} – ${format(bin.end)}`}<br/><b>${bin.count.toLocaleString()}</b> values`;
 			}
-		}, void 0, { shallow: true });
-	};
-	return {
-		currentTab,
-		setCurrentTab
+		},
+		grid: {
+			left: 8,
+			right: 8,
+			top: 8,
+			bottom: 24,
+			containLabel: true
+		},
+		xAxis: {
+			type: "category",
+			data: bins.map(({ start }) => format(start)),
+			axisTick: { show: false },
+			axisLabel: { hideOverlap: true }
+		},
+		yAxis: {
+			type: "value",
+			splitNumber: 3
+		},
+		series: [{
+			type: "bar",
+			barCategoryGap: "8%",
+			data: bins.map(({ start, end, count }) => {
+				const isKept = exclude ? start < low || end > high : end >= low && start <= high;
+				return {
+					value: count,
+					itemStyle: {
+						color: theme.colors.blue[6],
+						opacity: isKept ? 1 : .25
+					}
+				};
+			})
+		}]
+	}), [
+		bins,
+		low,
+		high,
+		format,
+		exclude,
+		theme
+	]);
+	return /* @__PURE__ */ jsx(EChartsReact, {
+		option,
+		style: { height: 260 },
+		onEvents: { click: ({ dataIndex }) => {
+			const bin = bins[dataIndex];
+			if (bin) onSelect([bin.start, bin.end]);
+		} }
+	});
+};
+const STEPS = 1e3;
+const RangeSelector = ({ min, max, value: [low, high], onChange, format, snap = (value) => value, exclude }) => {
+	const span = max - min;
+	const toPosition = (value) => Math.round((value - min) / span * STEPS);
+	const toValue = (position) => {
+		if (position <= 0) return min;
+		if (position >= STEPS) return max;
+		return snap(min + position / STEPS * span);
 	};
+	return /* @__PURE__ */ jsx(RangeSlider, {
+		px: "xs",
+		min: 0,
+		max: STEPS,
+		minRange: 0,
+		inverted: exclude,
+		value: [toPosition(low), toPosition(high)],
+		label: (position) => format(toValue(position)),
+		onChange: ([start, end]) => onChange([toValue(start), toValue(end)])
+	});
 };
-//#endregion
-//#region src/components/inputs/AttributeInputField.tsx
-const StringFilterField = memo(function StringFilterField({ control, name }) {
-	return /* @__PURE__ */ jsx(Controller, {
-		name,
-		control,
-		render: ({ field }) => /* @__PURE__ */ jsx(TextInput, {
-			value: field.value ?? "",
-			onChange: field.onChange,
-			placeholder: "Enter regex"
+const RangeView = ({ bins, min, max, value, onChange, format, snap, exclude = false, inputs }) => {
+	const [low, high] = value;
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: "sm",
+		children: [
+			/* @__PURE__ */ jsx(Histogram, {
+				bins,
+				value,
+				format,
+				onSelect: onChange,
+				exclude
+			}),
+			max > min && /* @__PURE__ */ jsx(RangeSelector, {
+				min,
+				max,
+				value,
+				onChange,
+				format,
+				snap,
+				exclude
+			}),
+			/* @__PURE__ */ jsxs(Group, {
+				align: "end",
+				wrap: "nowrap",
+				children: [/* @__PURE__ */ jsx(Box, {
+					flex: 1,
+					children: inputs
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "default",
+					onClick: () => onChange([min, max]),
+					disabled: low <= min && high >= max,
+					children: "Reset"
+				})]
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				size: "xs",
+				c: "dimmed",
+				children: "Click a bar to set the range to it."
+			})
+		]
+	});
+};
+// src/components/FilterViews/AttributeFilter/views/RangeView/DateRangeView.tsx
+const PICKER_FORMAT = "YYYY-MM-DD HH:mm:ss";
+const toTime = (value) => dayjs_default(value).valueOf();
+const toDate = (value) => dayjs_default(value).format(PICKER_FORMAT);
+const formatTime = (value) => dayjs_default(value).format("YYYY-MM-DD HH:mm");
+const DateRangeView = ({ data, filter, onChange }) => {
+	const min = toTime(data.min);
+	const max = toTime(data.max);
+	const bins = useMemo(() => (data.bins ?? []).map(({ start, end, count }) => ({
+		start: toTime(start),
+		end: toTime(end),
+		count
+	})), [data.bins]);
+	const [start, end] = filter.time_range ?? [null, null];
+	const value = [start != null ? toTime(start) : min, end != null ? toTime(end) : max];
+	const setRange = ([low, high]) => onChange({
+		...filter,
+		time_range: [toDate(low), toDate(high)]
+	});
+	return /* @__PURE__ */ jsx(RangeView, {
+		bins,
+		min,
+		max,
+		value,
+		onChange: setRange,
+		exclude: filter.mode === "exclude",
+		format: formatTime,
+		inputs: /* @__PURE__ */ jsxs(Group, {
+			wrap: "nowrap",
+			align: "end",
+			gap: "xs",
+			children: [
+				/* @__PURE__ */ jsx(DateTimePicker, {
+					flex: 1,
+					withSeconds: true,
+					value: toDate(value[0]),
+					minDate: toDate(min),
+					maxDate: toDate(value[1]),
+					onChange: (next) => setRange([next ? toTime(next) : min, value[1]])
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					c: "dimmed",
+					size: "sm",
+					pb: 8,
+					children: "-"
+				}),
+				/* @__PURE__ */ jsx(DateTimePicker, {
+					flex: 1,
+					withSeconds: true,
+					value: toDate(value[1]),
+					minDate: toDate(value[0]),
+					maxDate: toDate(max),
+					onChange: (next) => setRange([value[0], next ? toTime(next) : max])
+				})
+			]
 		})
 	});
-});
-const NumberFilterField = memo(function NumberFilterField({ control, name, min, max, allowDecimals }) {
-	return /* @__PURE__ */ jsx(Controller, {
-		name,
-		control,
-		render: ({ field }) => {
-			const currentMin = typeof field.value?.[0] === "number" ? field.value[0] : void 0;
-			const currentMax = typeof field.value?.[1] === "number" ? field.value[1] : void 0;
-			return /* @__PURE__ */ jsxs(Group, {
-				wrap: "nowrap",
-				align: "end",
-				gap: "xs",
+};
+// src/components/FilterViews/AttributeFilter/views/RangeView/NumberRangeView.tsx
+const formatInt = (value) => value.toLocaleString();
+const formatFloat = (value) => value.toLocaleString(void 0, { maximumFractionDigits: 2 });
+const NumberRangeView = ({ data, filter, onChange }) => {
+	const isInt = data.type === "int";
+	const min = Number(data.min);
+	const max = Number(data.max);
+	const bins = useMemo(() => (data.bins ?? []).map(({ start, end, count }, index, all) => ({
+		start: Number(start),
+		end: isInt && index < all.length - 1 ? Number(end) - 1 : Number(end),
+		count
+	})), [data.bins, isInt]);
+	const [low, high] = filter.number_range ?? [null, null];
+	const value = [low ?? min, high ?? max];
+	const setRange = (number_range) => onChange({
+		...filter,
+		number_range
+	});
+	const toNumber = (next) => typeof next === "number" ? next : void 0;
+	return /* @__PURE__ */ jsx(RangeView, {
+		bins,
+		min,
+		max,
+		value,
+		onChange: setRange,
+		exclude: filter.mode === "exclude",
+		format: isInt ? formatInt : formatFloat,
+		snap: isInt ? Math.round : void 0,
+		inputs: /* @__PURE__ */ jsxs(Group, {
+			wrap: "nowrap",
+			align: "end",
+			gap: "xs",
+			children: [
+				/* @__PURE__ */ jsx(NumberInput, {
+					flex: 1,
+					value: value[0],
+					min,
+					max: value[1],
+					allowDecimal: !isInt,
+					onChange: (next) => setRange([toNumber(next) ?? min, value[1]])
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					c: "dimmed",
+					size: "sm",
+					pb: 8,
+					children: "-"
+				}),
+				/* @__PURE__ */ jsx(NumberInput, {
+					flex: 1,
+					value: value[1],
+					min: value[0],
+					max,
+					allowDecimal: !isInt,
+					onChange: (next) => setRange([value[0], toNumber(next) ?? max])
+				})
+			]
+		})
+	});
+};
+// src/components/FilterViews/AttributeFilter/views/ValuesView/PatternView.tsx
+const PatternView = ({ data, filter, onChange, ocelId, entityType, before }) => {
+	const [pattern] = useDebouncedValue(filter.regex ?? "", 300);
+	const exclude = filter.mode === "exclude";
+	const view = useView(ocelId, before);
+	const matches = useAttributeValues(ocelId, {
+		...view,
+		attribute: filter.attribute,
+		regex: pattern,
+		entity_type: entityType,
+		entity_names: filter.target_type ? [filter.target_type] : void 0
+	}, { query: {
+		enabled: view !== void 0 && pattern !== "",
+		placeholderData: keepPreviousData,
+		retry: false
+	} });
+	const isEmpty = pattern === "";
+	const matched = isEmpty ? data.count : matches.data?.count ?? 0;
+	const values = isEmpty ? data.values ?? [] : matches.data?.values ?? [];
+	const distinct = isEmpty ? data.distinct_values : matches.data?.distinct_values ?? 0;
+	const kept = exclude ? data.count - matched : matched;
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: "sm",
+		flex: 1,
+		mih: 0,
+		children: [
+			/* @__PURE__ */ jsx(TextInput, {
+				label: "Regular expression",
+				placeholder: "e.g. ^Warehouse",
+				value: filter.regex ?? "",
+				error: !isEmpty && matches.error ? "Invalid pattern" : void 0,
+				rightSection: matches.isFetching ? /* @__PURE__ */ jsx(Loader, { size: "xs" }) : void 0,
+				onChange: (event) => onChange({
+					...filter,
+					regex: event.currentTarget.value
+				})
+			}),
+			/* @__PURE__ */ jsxs(Group, {
+				justify: "space-between",
+				children: [/* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					fw: 500,
+					children: isEmpty ? "Most frequent values" : `${matched.toLocaleString()} values match (${distinct.toLocaleString()} distinct)`
+				}), /* @__PURE__ */ jsxs(Text, {
+					size: "sm",
+					c: "dimmed",
+					children: [
+						"Keeping ",
+						kept.toLocaleString(),
+						" of ",
+						data.count.toLocaleString(),
+						" ",
+						"values"
+					]
+				})]
+			}),
+			values.length > 0 ? /* @__PURE__ */ jsx(BarList, {
+				data: Object.fromEntries(values.map(({ value, count }) => [value, count])),
+				labelHeader: isEmpty ? "Value" : "Match",
+				maxVisibleItems: values.length,
+				style: {
+					flex: 1,
+					minHeight: 0
+				}
+			}) : !isEmpty && !matches.isFetching && /* @__PURE__ */ jsx(Text, {
+				size: "sm",
+				c: "dimmed",
+				ta: "center",
+				py: "md",
+				children: "No value matches the pattern."
+			}),
+			values.length < distinct && /* @__PURE__ */ jsxs(Text, {
+				size: "xs",
+				c: "dimmed",
 				children: [
-					/* @__PURE__ */ jsx(NumberInput, {
-						value: currentMin,
-						min,
-						max: currentMax ?? max,
-						onChange: (nextMin) => {
-							field.onChange([nextMin, currentMax]);
-						},
-						allowDecimal: allowDecimals,
-						style: { flex: 1 }
-					}),
-					/* @__PURE__ */ jsx(Text, {
-						c: "dimmed",
-						size: "sm",
-						pb: 8,
-						children: "-"
-					}),
-					/* @__PURE__ */ jsx(NumberInput, {
-						value: currentMax,
-						min: currentMin ?? min,
-						max,
-						allowDecimal: allowDecimals,
-						onChange: (nextMax) => {
-							field.onChange([currentMin, nextMax]);
-						},
-						style: { flex: 1 }
-					})
+					"Showing the ",
+					values.length,
+					" most frequent of",
+					" ",
+					distinct.toLocaleString(),
+					" distinct values."
 				]
-			});
-		}
+			})
+		]
 	});
+};
+// src/components/FilterViews/AttributeFilter/views/ValuesView/ValuePicker.tsx
+const ValuePicker = ({ data, filter, onChange, ocelId, entityType, before }) => {
+	const theme = useMantineTheme();
+	const [search, setSearch] = useState("");
+	const [debounced] = useDebouncedValue(search.trim(), 300);
+	const view = useView(ocelId, before);
+	const found = useAttributeValues(ocelId, {
+		...view,
+		attribute: filter.attribute,
+		search: debounced,
+		entity_type: entityType,
+		entity_names: filter.target_type ? [filter.target_type] : void 0
+	}, { query: {
+		enabled: view !== void 0 && debounced !== "",
+		placeholderData: keepPreviousData
+	} });
+	const isSearching = debounced !== "";
+	const values = isSearching ? found.data?.values ?? [] : data.values ?? [];
+	const total = isSearching ? found.data?.distinct_values ?? 0 : data.distinct_values;
+	const options = useMemo(() => values.map(({ value, count }) => ({
+		value,
+		label: value,
+		count,
+		color: theme.colors.blue[6]
+	})), [values, theme]);
+	const selected = (filter.values ?? []).map(String);
+	const exclude = filter.mode === "exclude";
+	const matched = useAttributeValues(ocelId, {
+		...view,
+		attribute: filter.attribute,
+		values: selected,
+		entity_type: entityType,
+		entity_names: filter.target_type ? [filter.target_type] : void 0
+	}, { query: {
+		enabled: view !== void 0 && selected.length > 0,
+		placeholderData: keepPreviousData
+	} }).data?.count ?? 0;
+	const kept = selected.length === 0 ? exclude ? 0 : data.count : exclude ? data.count - matched : matched;
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: "sm",
+		children: [
+			/* @__PURE__ */ jsxs(Text, {
+				size: "sm",
+				c: "dimmed",
+				children: [
+					"Keeping ",
+					kept.toLocaleString(),
+					" of ",
+					data.count.toLocaleString(),
+					" values"
+				]
+			}),
+			/* @__PURE__ */ jsx(OptionPicker, {
+				variant: "list",
+				multiple: true,
+				counts: true,
+				bars: true,
+				cutoff: true,
+				sort: "count",
+				options,
+				loading: found.isFetching,
+				search,
+				onSearch: setSearch,
+				total,
+				value: selected,
+				onChange: (next) => onChange({
+					...filter,
+					values: next.length ? next : null
+				})
+			}),
+			values.length < total && /* @__PURE__ */ jsxs(Text, {
+				size: "xs",
+				c: "dimmed",
+				children: [
+					"Showing the ",
+					values.length,
+					" most frequent of ",
+					total.toLocaleString(),
+					" ",
+					"values. Search to find the others."
+				]
+			}),
+			selected.length === 0 && /* @__PURE__ */ jsxs(Text, {
+				size: "xs",
+				c: "dimmed",
+				children: [
+					"No value picked: every value is ",
+					exclude ? "removed" : "kept",
+					"."
+				]
+			})
+		]
+	});
+};
+// src/components/FilterViews/AttributeFilter/views/ValuesView/ValuesView.tsx
+const PICKER_OPTIONS = [{
+	label: "Pick values",
+	value: "values"
+}, {
+	label: "Pattern",
+	value: "pattern"
+}];
+const ValuesView = (props) => {
+	const { filter, onChange } = props;
+	const picker = filter.regex != null ? "pattern" : "values";
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: "sm",
+		flex: 1,
+		mih: 0,
+		children: [/* @__PURE__ */ jsx(SegmentedControl, {
+			size: "xs",
+			w: "fit-content",
+			value: picker,
+			data: PICKER_OPTIONS,
+			onChange: (next) => onChange({
+				...filter,
+				values: null,
+				regex: next === "pattern" ? "" : null
+			})
+		}), picker === "pattern" ? /* @__PURE__ */ jsx(PatternView, { ...props }) : /* @__PURE__ */ jsx(ValuePicker, { ...props })]
+	});
+};
+// src/components/FilterViews/AttributeFilter/AttributeDetail.tsx
+const ALL_TYPES = "__all__";
+const MODE_OPTIONS$1 = [{
+	label: "Include",
+	value: "include"
+}, {
+	label: "Exclude",
+	value: "exclude"
+}];
+const BINS$1 = 40;
+const Stat$1 = ({ label, value }) => /* @__PURE__ */ jsxs(Stack, {
+	gap: 0,
+	miw: 0,
+	children: [/* @__PURE__ */ jsx(Text, {
+		size: "xs",
+		c: "dimmed",
+		tt: "uppercase",
+		fw: 600,
+		children: label
+	}), /* @__PURE__ */ jsx(Text, {
+		size: "sm",
+		fw: 500,
+		truncate: true,
+		children: typeof value === "number" ? value.toLocaleString() : value
+	})]
 });
-const DateFilterField = memo(function DateFilterField({ control, name, min, max }) {
-	return /* @__PURE__ */ jsx(Controller, {
-		name,
-		control,
-		render: ({ field }) => {
-			return /* @__PURE__ */ jsxs(Group, {
+const AttributeDetail = memo(({ ocelId, entityType, filter, onChange, before, scopes, onClear }) => {
+	const view = useView(ocelId, before);
+	const distribution = useAttributeDistribution(ocelId, {
+		...view,
+		attribute: filter.attribute,
+		entity_type: entityType,
+		entity_names: filter.target_type ? [filter.target_type] : void 0,
+		bins: BINS$1
+	}, { query: {
+		enabled: view !== void 0,
+		placeholderData: keepPreviousData
+	} });
+	const typeNoun = entityType === "events" ? "activities" : "object types";
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: "md",
+		flex: 1,
+		mih: 0,
+		children: [/* @__PURE__ */ jsxs(Group, {
+			justify: "space-between",
+			wrap: "nowrap",
+			children: [/* @__PURE__ */ jsxs(Group, {
+				gap: "sm",
 				wrap: "nowrap",
-				align: "end",
-				gap: "xs",
+				miw: 0,
 				children: [
-					/* @__PURE__ */ jsx(DateTimePicker, {
-						value: field.value?.[0] ?? void 0,
-						minDate: min,
-						maxDate: field.value?.[1] ?? max,
-						withSeconds: true,
-						onChange: (nextMin) => {
-							field.onChange([nextMin, field.value?.[1] ?? max]);
-						},
-						style: { flex: 1 }
+					/* @__PURE__ */ jsx(Button, {
+						variant: "subtle",
+						size: "compact-sm",
+						leftSection: /* @__PURE__ */ jsx(ArrowLeftIcon, { size: 14 }),
+						onClick: onClear,
+						children: "Change attribute"
 					}),
-					/* @__PURE__ */ jsx(Text, {
-						c: "dimmed",
-						size: "sm",
-						pb: 8,
-						children: "-"
+					/* @__PURE__ */ jsx(Title, {
+						order: 5,
+						style: { overflowWrap: "anywhere" },
+						children: filter.attribute
 					}),
-					/* @__PURE__ */ jsx(DateTimePicker, {
-						value: field.value?.[1] ?? void 0,
-						minDate: field.value?.[0] ?? min,
-						maxDate: max,
-						withSeconds: true,
-						onChange: (nextMax) => {
-							field.onChange([field.value?.[0] ?? min, nextMax]);
-						},
-						style: { flex: 1 }
+					distribution.data && /* @__PURE__ */ jsx(Badge, {
+						variant: "light",
+						children: distribution.data.type
 					})
 				]
-			});
-		}
+			}), /* @__PURE__ */ jsxs(Group, {
+				gap: "sm",
+				wrap: "nowrap",
+				children: [/* @__PURE__ */ jsx(SegmentedControl, {
+					size: "xs",
+					data: MODE_OPTIONS$1,
+					value: filter.mode ?? "include",
+					onChange: (next) => onChange({
+						...filter,
+						mode: next
+					})
+				}), scopes.length > 1 ? /* @__PURE__ */ jsx(Select, {
+					size: "xs",
+					w: 220,
+					allowDeselect: false,
+					value: filter.target_type ?? ALL_TYPES,
+					data: [{
+						value: ALL_TYPES,
+						label: `All ${typeNoun}`
+					}, ...scopes.map((scope) => ({
+						value: scope,
+						label: scope
+					}))],
+					onChange: (next) => onChange({
+						...filter,
+						target_type: next === ALL_TYPES ? null : next
+					})
+				}) : scopes[0] && /* @__PURE__ */ jsx(Badge, {
+					variant: "outline",
+					color: "gray",
+					children: scopes[0]
+				})]
+			})]
+		}), /* @__PURE__ */ jsx(Previewed, {
+			query: distribution,
+			children: (data) => data ? /* @__PURE__ */ jsxs(Stack, {
+				gap: "md",
+				flex: 1,
+				mih: 0,
+				children: [/* @__PURE__ */ jsxs(SimpleGrid, {
+					cols: 4,
+					children: [
+						/* @__PURE__ */ jsx(Stat$1, {
+							label: "Values",
+							value: data.count
+						}),
+						/* @__PURE__ */ jsx(Stat$1, {
+							label: "Distinct",
+							value: data.distinct_values
+						}),
+						/* @__PURE__ */ jsx(Stat$1, {
+							label: "Min",
+							value: formatValue(data.min, data.type)
+						}),
+						/* @__PURE__ */ jsx(Stat$1, {
+							label: "Max",
+							value: formatValue(data.max, data.type)
+						})
+					]
+				}), data.type === "int" || data.type === "float" ? /* @__PURE__ */ jsx(NumberRangeView, {
+					data,
+					filter,
+					onChange
+				}) : data.type === "date" ? /* @__PURE__ */ jsx(DateRangeView, {
+					data,
+					filter,
+					onChange
+				}) : /* @__PURE__ */ jsx(ValuesView, {
+					data,
+					filter,
+					onChange,
+					ocelId,
+					entityType,
+					before
+				})]
+			}) : /* @__PURE__ */ jsx(Text, {
+				size: "sm",
+				c: "dimmed",
+				children: "The attribute has no values in the log as the steps before leave it."
+			})
+		})]
 	});
 });
-const AttributeInputField = memo(function AttributeInputField({ control, record, path }) {
-	switch (record.type) {
-		case "string": return /* @__PURE__ */ jsx(StringFilterField, {
-			control,
-			name: `${path}.regex`
+// src/components/FilterViews/AttributeFilter/AttributeFilter.tsx
+const AttributePanel = (entityType) => {
+	const useTypedAttributes = entityType === "events" ? useEventAttributes : useObjectAttributes;
+	return ({ ocelId, filter, onChange, before }) => {
+		const { filterColumns } = useAttributeFilter({
+			filter,
+			onChange
 		});
-		case "int": return /* @__PURE__ */ jsx(NumberFilterField, {
-			control,
-			name: `${path}.number_range`,
-			min: Number.parseInt(`${record.min}`, 10),
-			max: Number.parseInt(`${record.max}`, 10),
-			allowDecimals: false
-		});
-		case "float": return /* @__PURE__ */ jsx(NumberFilterField, {
-			control,
-			name: `${path}.number_range`,
-			min: Number.parseFloat(`${record.min}`),
-			max: Number.parseFloat(`${record.max}`)
-		});
-		case "date": return /* @__PURE__ */ jsx(DateFilterField, {
-			control,
-			name: `${path}.time_range`,
-			min: record.min.toString(),
-			max: record.max.toString()
+		const view = useView(ocelId, before);
+		const typed = useTypedAttributes(ocelId, view, { query: {
+			enabled: view !== void 0,
+			placeholderData: keepPreviousData
+		} });
+		const scopes = useMemo(() => (typed.data ?? []).filter(({ name }) => name === filter.attribute).map(({ entity_type }) => entity_type), [typed.data, filter.attribute]);
+		if (filter.attribute) return /* @__PURE__ */ jsx(AttributeDetail, {
+			ocelId,
+			entityType,
+			filter,
+			onChange,
+			before,
+			scopes,
+			onClear: () => onChange({
+				type: filter.type,
+				attribute: ""
+			})
 		});
-		default: return /* @__PURE__ */ jsx(Text, {
-			size: "sm",
-			children: "Not Implemented"
+		return /* @__PURE__ */ jsx(Previewed, {
+			query: {
+				data: view,
+				isPending: true,
+				error: null
+			},
+			children: (view) => /* @__PURE__ */ jsx(AttributesTable, {
+				ocelId,
+				entityType,
+				...viewProps(view),
+				extraColumns: filterColumns,
+				subTableExtraColumns: filterColumns,
+				hideRange: true,
+				hideValues: true
+			})
 		});
+	};
+};
+const condition = (filter) => {
+	if (filter.regex) return `matches /${filter.regex}/`;
+	if (filter.number_range) {
+		const [low, high] = filter.number_range;
+		return `${low ?? "-∞"} – ${high ?? "∞"}`;
 	}
-});
-//#endregion
-//#region src/hooks/useAttributeFilterColumns.tsx
-const getInitialFilter = (attribute) => {
-	switch (attribute.type) {
-		case "string": return { regex: "" };
-		case "int": return { number_range: [Number.parseInt(`${attribute.min}`, 10), Number.parseInt(`${attribute.max}`, 10)] };
-		case "float": return { number_range: [Number.parseFloat(`${attribute.min}`), Number.parseFloat(`${attribute.max}`)] };
-		case "date": return { time_range: [String(attribute.min), String(attribute.max)] };
-		default: return {};
+	if (filter.time_range) {
+		const [start, end] = filter.time_range;
+		const format = (value, open) => value ? dayjs_default(value).format("YYYY-MM-DD") : open;
+		return `${format(start, "start")} – ${format(end, "end")}`;
+	}
+	if (filter.values) {
+		const shown = filter.values.slice(0, 3).join(", ");
+		const more = filter.values.length - 3;
+		return `in ${shown}${more > 0 ? ` +${more} more` : ""}`;
 	}
+	return "any value";
 };
-const getEntityType = (attribute) => {
-	if (!("entity_type_names" in attribute)) return attribute.entity_type;
-	return attribute.entity_type_names.length === 1 ? attribute.entity_type_names[0] : void 0;
+const summary$1 = (filter) => {
+	if (!filter.attribute) return "No attribute selected";
+	const scope = filter.target_type ? ` (${filter.target_type})` : "";
+	const negation = filter.mode === "exclude" ? "not " : "";
+	return `${filter.attribute}${scope}: ${negation}${condition(filter)}`;
 };
-const generateRecordId = (attribute) => {
-	const entityName = getEntityType(attribute);
-	return `${attribute.name}::${entityName ?? ""}`;
+const EventAttributeFilter = {
+	title: "Event Attribute",
+	description: "Keeps the events whose value of one attribute satisfies a condition, such as a value range or a pattern. Pick the attribute with Use, then set the condition on its value distribution: a range for numbers and dates, chosen values or a pattern otherwise. With Exclude, the matching events are removed instead. Activities without the attribute are left untouched.",
+	Panel: AttributePanel("events"),
+	create: () => ({
+		type: "event_attribute",
+		attribute: ""
+	}),
+	summary: summary$1,
+	isComplete: (filter) => filter.attribute !== ""
+};
+const ObjectAttributeFilter = {
+	title: "Object Attribute",
+	description: "Keeps the objects whose value of one attribute satisfies a condition, such as a value range or a pattern. Pick the attribute with Use, then set the condition on its value distribution: a range for numbers and dates, chosen values or a pattern otherwise. With Exclude, the matching objects are removed instead. Object types without the attribute are left untouched.",
+	Panel: AttributePanel("objects"),
+	create: () => ({
+		type: "object_attribute",
+		attribute: ""
+	}),
+	summary: summary$1,
+	isComplete: (filter) => filter.attribute !== ""
+};
+// src/components/FilterViews/RelationCountFilter/RelationDetail.tsx
+const ANY_QUALIFIER = "__any__";
+const BINS = 40;
+const formatCount = (value) => value.toLocaleString();
+const Stat = ({ label, value }) => /* @__PURE__ */ jsxs(Stack, {
+	gap: 0,
+	miw: 0,
+	children: [/* @__PURE__ */ jsx(Text, {
+		size: "xs",
+		c: "dimmed",
+		tt: "uppercase",
+		fw: 600,
+		children: label
+	}), /* @__PURE__ */ jsx(Text, {
+		size: "sm",
+		fw: 500,
+		children: value.toLocaleString()
+	})]
+});
+const RelationDetail = ({ ocelId, kind, hooks, filter, onChange, before, onClear }) => {
+	const direction = filter.direction ?? "source";
+	const view = useView(ocelId, before);
+	const options = { query: {
+		enabled: view !== void 0,
+		placeholderData: keepPreviousData
+	} };
+	const qualifiers = hooks.useRelations(ocelId, {
+		...view,
+		with_qualifier: false,
+		source_types: [filter.source],
+		target_types: [filter.target]
+	}, options).data?.response[0]?.qualifiers ?? [];
+	const distribution = hooks.useDistribution(ocelId, {
+		...view,
+		source: filter.source,
+		target: filter.target,
+		direction,
+		qualifier: filter.qualifier ?? void 0,
+		bins: BINS
+	}, options);
+	const sides = kind === "e2o" ? {
+		source: "event",
+		target: "object"
+	} : {
+		source: filter.source,
+		target: filter.target
+	};
+	const isSource = direction === "source";
+	const countedNoun = kind === "e2o" && isSource ? "event" : "object";
+	const relatedNoun = kind === "e2o" && !isSource ? "events" : "objects";
+	const caption = `How many ${isSource ? filter.target : filter.source} ${relatedNoun} each ${isSource ? filter.source : filter.target} ${countedNoun} is related to`;
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: "md",
+		flex: 1,
+		mih: 0,
+		children: [/* @__PURE__ */ jsxs(Group, {
+			justify: "space-between",
+			wrap: "nowrap",
+			children: [/* @__PURE__ */ jsxs(Group, {
+				gap: "sm",
+				wrap: "nowrap",
+				miw: 0,
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "subtle",
+					size: "compact-sm",
+					leftSection: /* @__PURE__ */ jsx(ArrowLeftIcon, { size: 14 }),
+					onClick: onClear,
+					children: "Change relation"
+				}), /* @__PURE__ */ jsxs(Title, {
+					order: 5,
+					style: { overflowWrap: "anywhere" },
+					children: [
+						filter.source,
+						" → ",
+						filter.target
+					]
+				})]
+			}), /* @__PURE__ */ jsxs(Group, {
+				gap: "sm",
+				wrap: "nowrap",
+				children: [/* @__PURE__ */ jsx(SegmentedControl, {
+					size: "xs",
+					value: direction,
+					data: [{
+						label: `Per ${sides.source}`,
+						value: "source"
+					}, {
+						label: `Per ${sides.target}`,
+						value: "target"
+					}],
+					onChange: (next) => onChange({
+						...filter,
+						direction: next,
+						range: [null, null]
+					})
+				}), qualifiers.length > 0 && /* @__PURE__ */ jsx(Select, {
+					size: "xs",
+					w: 200,
+					allowDeselect: false,
+					value: filter.qualifier ?? ANY_QUALIFIER,
+					data: [{
+						value: ANY_QUALIFIER,
+						label: "Any qualifier"
+					}, ...qualifiers.map((qualifier) => ({
+						value: qualifier,
+						label: qualifier
+					}))],
+					onChange: (next) => onChange({
+						...filter,
+						qualifier: next === ANY_QUALIFIER ? null : next
+					})
+				})]
+			})]
+		}), /* @__PURE__ */ jsx(Previewed, {
+			query: distribution,
+			children: (data) => /* @__PURE__ */ jsx(CountRange, {
+				data,
+				filter,
+				onChange,
+				countedLabel: countedNoun === "event" ? "Events" : "Objects",
+				caption
+			})
+		})]
+	});
 };
-const useAttributeFilter = ({ path, control }) => {
-	const { fields, append, remove } = useFieldArray({
-		name: path,
-		control
+const CountRange = ({ data, filter, onChange, countedLabel, caption }) => {
+	const bins = useMemo(() => data.bins.map(({ start, end, count }, index, all) => ({
+		start: Number(start),
+		end: index < all.length - 1 ? Number(end) - 1 : Number(end),
+		count
+	})), [data.bins]);
+	const [low, high] = filter.range;
+	const value = [low ?? data.min, high ?? data.max];
+	const setRange = (range) => onChange({
+		...filter,
+		range
 	});
-	const filterIndexMap = useMemo(() => {
-		const map = /* @__PURE__ */ new Map();
-		fields.forEach(({ attribute, target_type }, index) => {
-			map.set(`${attribute}::${target_type ?? ""}`, index);
-		});
-		return map;
-	}, [fields]);
-	const [showOnlyFiltered, setShowOnlyFiltered] = useState(false);
-	const filteredAttributeNames = useMemo(() => Array.from(new Set(fields.map(({ attribute }) => attribute))), [fields]);
-	return {
-		filterColumns: useMemo(() => [{
-			accessor: "filter",
-			title: "Filter",
-			filter: () => /* @__PURE__ */ jsx(Switch, {
-				label: "Show only filtered attributes",
-				checked: showOnlyFiltered,
-				onChange: (event) => setShowOnlyFiltered(event.currentTarget.checked)
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: "md",
+		children: [
+			/* @__PURE__ */ jsxs(SimpleGrid, {
+				cols: 4,
+				children: [
+					/* @__PURE__ */ jsx(Stat, {
+						label: countedLabel,
+						value: data.entities
+					}),
+					/* @__PURE__ */ jsx(Stat, {
+						label: "Relations",
+						value: data.relations
+					}),
+					/* @__PURE__ */ jsx(Stat, {
+						label: "Min",
+						value: data.min
+					}),
+					/* @__PURE__ */ jsx(Stat, {
+						label: "Max",
+						value: data.max
+					})
+				]
 			}),
-			filtering: showOnlyFiltered,
-			render: (record) => {
-				const filterIndex = filterIndexMap.get(generateRecordId(record)) ?? -1;
-				return filterIndex < 0 ? /* @__PURE__ */ jsxs(Text, {
-					size: "sm",
-					c: "dimmed",
+			/* @__PURE__ */ jsx(Text, {
+				size: "sm",
+				c: "dimmed",
+				children: caption
+			}),
+			/* @__PURE__ */ jsx(RangeView, {
+				bins,
+				min: data.min,
+				max: data.max,
+				value,
+				onChange: setRange,
+				format: formatCount,
+				snap: Math.round,
+				inputs: /* @__PURE__ */ jsxs(Group, {
+					wrap: "nowrap",
+					align: "end",
+					gap: "xs",
 					children: [
-						record.min,
-						" - ",
-						record.max
+						/* @__PURE__ */ jsx(NumberInput, {
+							flex: 1,
+							value: value[0],
+							min: data.min,
+							max: value[1],
+							allowDecimal: false,
+							onChange: (next) => setRange([typeof next === "number" ? next : data.min, value[1]])
+						}),
+						/* @__PURE__ */ jsx(Text, {
+							c: "dimmed",
+							size: "sm",
+							pb: 8,
+							children: "-"
+						}),
+						/* @__PURE__ */ jsx(NumberInput, {
+							flex: 1,
+							value: value[1],
+							min: value[0],
+							max: data.max,
+							allowDecimal: false,
+							onChange: (next) => setRange([value[0], typeof next === "number" ? next : data.max])
+						})
 					]
-				}) : /* @__PURE__ */ jsx(AttributeInputField, {
-					record,
-					control,
-					path: `${path}.${filterIndex}`
-				});
-			}
-		}, {
-			accessor: "action",
-			title: "",
-			width: "50px",
-			render: (record) => {
-				const key = generateRecordId(record);
-				const filterIndex = filterIndexMap.get(key) ?? -1;
-				return filterIndex < 0 ? /* @__PURE__ */ jsx(ActionIcon, {
-					color: "green",
-					variant: "light",
-					onClick: (event) => {
-						event.stopPropagation();
-						append({
-							attribute: record.name,
-							type: path,
-							target_type: getEntityType(record),
-							...getInitialFilter(record)
-						});
-					},
-					children: /* @__PURE__ */ jsx(PlusIcon, { size: 16 })
-				}) : /* @__PURE__ */ jsx(ActionIcon, {
-					color: "red",
-					variant: "light",
-					onClick: (event) => {
-						event.stopPropagation();
-						remove(filterIndex);
+				})
+			})
+		]
+	});
+};
+// src/components/FilterViews/RelationCountFilter/RelationGraph.tsx
+const OcelTypeGraph = dynamic(() => import("@r4pm/components").then((m) => m.OcelTypeGraph), { ssr: false });
+const eventId = (activity) => `event:${activity}`;
+const objectId = (objectType) => `object:${objectType}`;
+const EDGE_LIMIT = 10;
+const countOptions = (counts) => Object.entries(counts).map(([name, count]) => ({
+	value: name,
+	label: name,
+	count
+}));
+const MIN_WIDTH = 1;
+const ScopePicker = ({ label, count, total, children }) => /* @__PURE__ */ jsxs(Group, {
+	gap: 4,
+	children: [/* @__PURE__ */ jsxs(Text, {
+		size: "xs",
+		c: "dimmed",
+		children: [
+			label,
+			": ",
+			count,
+			" / ",
+			total
+		]
+	}), /* @__PURE__ */ jsxs(Popover, {
+		width: 260,
+		position: "bottom",
+		withArrow: true,
+		shadow: "md",
+		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(ActionIcon, {
+			size: "md",
+			variant: "transparent",
+			children: /* @__PURE__ */ jsx(FilterIcon, { size: 16 })
+		}) }), /* @__PURE__ */ jsx(Popover.Dropdown, { children })]
+	})]
+});
+const RelationGraph = ({ ocelId, kind, hooks, filter, onChange, before }) => {
+	const theme = useMantineTheme();
+	const [showQualifiers, setShowQualifiers] = useState(true);
+	const [pickedActivities, setActivities] = useState(null);
+	const [pickedObjectTypes, setObjectTypes] = useState(null);
+	const [pending, setPending] = useState(null);
+	const [edgeLimit, setEdgeLimit] = useState(EDGE_LIMIT);
+	const view = useView(ocelId, before);
+	const options = { query: {
+		enabled: view !== void 0,
+		placeholderData: keepPreviousData
+	} };
+	const relations = hooks.useRelations(ocelId, {
+		...view,
+		with_qualifier: false
+	}, options);
+	const qualified = hooks.useRelations(ocelId, {
+		...view,
+		with_qualifier: true
+	}, options);
+	const events = useEventCounts(ocelId, view, { query: {
+		enabled: view !== void 0,
+		placeholderData: keepPreviousData
+	} });
+	const objects = useObjectCounts(ocelId, view, { query: {
+		enabled: view !== void 0,
+		placeholderData: keepPreviousData
+	} });
+	const query = {
+		data: useMemo(() => {
+			if (!relations.data || !qualified.data || !events.data || !objects.data) return;
+			const summaries = relations.data.response;
+			const sourceId = kind === "e2o" ? eventId : objectId;
+			const edges = summaries.flatMap(({ source, target, sum: pairSum, qualifiers }) => {
+				return (showQualifiers && (qualifiers?.length ?? 0) > 0 ? qualified.data.response.filter((row) => row.source === source && row.target === target) : [{
+					qualifier: null,
+					sum: pairSum
+				}]).map(({ qualifier, sum }) => ({
+					id: `${kind}:${source}->${target}:${qualifier ?? ""}`,
+					source: sourceId(source),
+					target: objectId(target),
+					qualifier: qualifier ?? void 0,
+					kind,
+					relation: {
+						source,
+						target,
+						qualifier
 					},
-					children: /* @__PURE__ */ jsx(XIcon, { size: 16 })
-				});
-			}
-		}], [
-			append,
-			remove,
-			filterIndexMap,
-			path,
-			control,
-			showOnlyFiltered
+					sum,
+					pair: `${source}->${target}`,
+					pairSum
+				}));
+			});
+			const activityCounts = Object.fromEntries([...new Set(kind === "e2o" ? summaries.map(({ source }) => source) : [])].map((activity) => [activity, events.data[activity] ?? 0]));
+			const objectTypeCounts = Object.fromEntries([...new Set(summaries.flatMap(({ source, target }) => kind === "e2o" ? [target] : [source, target]))].map((objectType) => [objectType, objects.data[objectType] ?? 0]));
+			return {
+				nodes: [...Object.entries(activityCounts).map(([activity, count]) => ({
+					id: eventId(activity),
+					label: activity,
+					kind: "event",
+					count
+				})), ...Object.entries(objectTypeCounts).map(([objectType, count]) => ({
+					id: objectId(objectType),
+					label: objectType,
+					kind: "object",
+					count
+				}))],
+				edges,
+				activityCounts,
+				objectTypeCounts
+			};
+		}, [
+			relations.data,
+			qualified.data,
+			events.data,
+			objects.data,
+			kind,
+			showQualifiers
 		]),
-		visibleAttributes: showOnlyFiltered ? filteredAttributeNames : void 0
+		isPending: relations.isPending || qualified.isPending || events.isPending || objects.isPending,
+		error: relations.error ?? qualified.error ?? events.error ?? objects.error
 	};
-};
-//#endregion
-//#region src/components/FilterViews/AttributeFilter.tsx
-const AttributeFilter = (entityType) => ({ ocelId, control }) => {
-	const { filterColumns, visibleAttributes } = useAttributeFilter({
-		control,
-		path: entityType === "events" ? "event_attribute" : "object_attribute"
-	});
-	return /* @__PURE__ */ jsx(AttributesTable, {
-		ocelId,
-		entityType,
-		ocelVersion: "original",
-		extraColumns: filterColumns,
-		subTableExtraColumns: filterColumns,
-		visibleAttributes,
-		hideRange: true,
-		hideValues: true
+	const select = (relation) => onChange({
+		...filter,
+		...relation,
+		direction: "source",
+		range: [null, null]
 	});
-};
-const EventAttributeFilter = {
-	title: "Event Attribute",
-	description: "Filters events by the values of their attributes. For each attribute you can define a condition (e.g. a value range or an allowed set of values), and only events whose attribute values satisfy every condition are kept. Attributes without a condition are ignored.",
-	ViewComponent: AttributeFilter("events"),
-	generateDefault: () => []
-};
-const ObjectAttributeFilter = {
-	title: "Object Attribute",
-	description: "Filters objects by the values of their attributes. For each attribute you can define a condition (e.g. a value range or an allowed set of values), and only objects whose attribute values satisfy every condition are kept. Attributes without a condition are ignored.",
-	ViewComponent: AttributeFilter("objects"),
-	generateDefault: () => []
-};
-//#endregion
-//#region src/hooks/useRelationFilterColumns.tsx
-const filterKey = ({ source, target, qualifier }) => `${source}-${qualifier ?? ""}-${target}`;
-const resolveQualifier = (record) => record.qualifiers?.length === 1 ? record.qualifiers[0] : void 0;
-const useRelationCountFilter = ({ path, control }) => {
-	const { fields, append, remove } = useFieldArray({
-		name: path,
-		control
-	});
-	const filterIndexMap = useMemo(() => {
-		const map = /* @__PURE__ */ new Map();
-		fields.forEach((field, index) => {
-			map.set(filterKey(field), index);
-		});
-		return map;
-	}, [fields]);
-	const [showOnlyFiltered, setShowOnlyFiltered] = useState(false);
-	const visibleRelations = useMemo(() => {
-		const seen = /* @__PURE__ */ new Set();
-		const relations = [];
-		fields.forEach((field) => {
-			const { source, target } = field;
-			const key = `${source}-${target}`;
-			if (!seen.has(key)) {
-				seen.add(key);
-				relations.push({
-					source,
-					target
+	return /* @__PURE__ */ jsx(Previewed, {
+		query,
+		children: ({ nodes, edges: allEdges, activityCounts, objectTypeCounts }) => {
+			const activities = pickedActivities ?? Object.keys(activityCounts);
+			const objectTypes = pickedObjectTypes ?? Object.keys(objectTypeCounts);
+			const picked = /* @__PURE__ */ new Set([...activities.map(eventId), ...objectTypes.map(objectId)]);
+			const candidates = allEdges.filter(({ source, target }) => picked.has(source) && picked.has(target));
+			const pairs = new Map(candidates.map(({ pair, pairSum }) => [pair, pairSum]));
+			const shownPairs = new Set([...pairs].sort(([, a], [, b]) => b - a).slice(0, edgeLimit).map(([pair]) => pair));
+			const edges = candidates.filter(({ pair }) => shownPairs.has(pair));
+			const visibleNodeIds = new Set(edges.flatMap(({ source, target }) => [source, target]));
+			const shownNodes = nodes.filter(({ id }) => visibleNodeIds.has(id));
+			const structure = edges.map(({ id }) => id).sort().join("|");
+			const largest = Math.max(1, ...edges.map(({ sum }) => sum));
+			const byId = new Map(edges.map((edge) => [edge.id, edge]));
+			const neighbours = (id) => new Set(edges.flatMap(({ source, target }) => source === id ? [target] : target === id ? [source] : []));
+			const connected = pending ? neighbours(pending) : void 0;
+			const clickNode = (id) => {
+				if (!pending || pending === id) {
+					setPending(pending === id ? null : id);
+					return;
+				}
+				const candidates = edges.filter(({ source, target }) => source === pending && target === id || source === id && target === pending);
+				const [first] = candidates;
+				if (!first) {
+					setPending(id);
+					return;
+				}
+				setPending(null);
+				select({
+					...first.relation,
+					qualifier: candidates.length === 1 ? first.relation.qualifier : null
 				});
-			}
-		});
-		return relations;
-	}, [fields]);
-	return {
-		filterColumns: useMemo(() => [{
-			accessor: "filter",
-			title: "Filter",
-			filter: () => /* @__PURE__ */ jsx(Switch, {
-				label: "Show only filtered relations",
-				checked: showOnlyFiltered,
-				onChange: (event) => setShowOnlyFiltered(event.currentTarget.checked)
-			}),
-			filtering: showOnlyFiltered,
-			render: (record) => {
-				const qualifier = resolveQualifier(record);
-				const filterIndex = filterIndexMap.get(filterKey({
-					...record,
-					qualifier
-				})) ?? -1;
-				if (filterIndex < 0) return /* @__PURE__ */ jsx(Text, {
-					size: "sm",
-					c: "dimmed",
-					children: "No filter applied"
-				});
-				return /* @__PURE__ */ jsx(Controller, {
-					control,
-					name: `${path}.${filterIndex}.range`,
-					render: ({ field }) => {
-						const currentMin = typeof field.value?.[0] === "number" ? field.value[0] : void 0;
-						const currentMax = typeof field.value?.[1] === "number" ? field.value[1] : void 0;
-						return /* @__PURE__ */ jsxs(Group, {
-							wrap: "nowrap",
-							align: "end",
-							gap: "xs",
-							children: [
-								/* @__PURE__ */ jsx(NumberInput, {
-									value: currentMin,
-									min: record.min_count,
-									max: currentMax ?? record.max_count,
-									clampBehavior: "strict",
-									allowDecimal: false,
-									onChange: (nextMin) => {
-										field.onChange([nextMin, currentMax]);
-									},
-									style: { flex: 1 }
-								}),
-								/* @__PURE__ */ jsx(Text, {
+			};
+			return /* @__PURE__ */ jsxs(Stack, {
+				gap: "xs",
+				flex: 1,
+				mih: 0,
+				children: [/* @__PURE__ */ jsxs(Group, {
+					justify: "space-between",
+					children: [/* @__PURE__ */ jsxs(Group, {
+						gap: "md",
+						children: [
+							kind === "e2o" && /* @__PURE__ */ jsx(ScopePicker, {
+								label: "Activities",
+								count: activities.length,
+								total: Object.keys(activityCounts).length,
+								children: /* @__PURE__ */ jsx(OptionPicker, {
+									options: countOptions(activityCounts),
+									variant: "list",
+									multiple: true,
+									cutoff: true,
+									value: activities,
+									onChange: (next) => setActivities([...next])
+								})
+							}),
+							/* @__PURE__ */ jsx(ScopePicker, {
+								label: "Object types",
+								count: objectTypes.length,
+								total: Object.keys(objectTypeCounts).length,
+								children: /* @__PURE__ */ jsx(OptionPicker, {
+									options: countOptions(objectTypeCounts),
+									variant: "list",
+									multiple: true,
+									cutoff: true,
+									value: objectTypes,
+									onChange: (next) => setObjectTypes([...next])
+								})
+							}),
+							/* @__PURE__ */ jsxs(Group, {
+								gap: "xs",
+								children: [/* @__PURE__ */ jsxs(Text, {
+									size: "xs",
 									c: "dimmed",
+									children: [
+										"Relations: top ",
+										Math.min(edgeLimit, pairs.size),
+										" of",
+										" ",
+										pairs.size
+									]
+								}), /* @__PURE__ */ jsx(Slider, {
+									w: 140,
 									size: "sm",
-									pb: 8,
-									children: "-"
-								}),
-								/* @__PURE__ */ jsx(NumberInput, {
-									value: currentMax,
-									min: currentMin ?? record.min_count,
-									max: record.max_count,
-									clampBehavior: "strict",
-									allowDecimal: false,
-									onChange: (nextMax) => {
-										field.onChange([currentMin, nextMax]);
-									},
-									style: { flex: 1 }
-								})
-							]
-						});
-					}
-				});
-			}
-		}, {
-			accessor: "action",
-			title: "",
-			width: "50px",
-			render: (record) => {
-				const qualifier = resolveQualifier(record);
-				const filterIndex = filterIndexMap.get(filterKey({
-					...record,
-					qualifier
-				})) ?? -1;
-				return filterIndex < 0 ? /* @__PURE__ */ jsx(ActionIcon, {
-					color: "green",
-					variant: "light",
-					onClick: (event) => {
-						event.stopPropagation();
-						append({
-							type: path,
-							source: record.source,
-							target: record.target,
-							qualifier,
-							range: [record.min_count, record.max_count]
-						});
-					},
-					children: /* @__PURE__ */ jsx(PlusIcon, { size: 16 })
-				}) : /* @__PURE__ */ jsx(ActionIcon, {
-					color: "red",
-					variant: "light",
-					onClick: (event) => {
-						event.stopPropagation();
-						remove(filterIndex);
-					},
-					children: /* @__PURE__ */ jsx(XIcon, { size: 16 })
-				});
-			}
-		}], [
-			append,
-			remove,
-			filterIndexMap,
-			path,
-			control,
-			showOnlyFiltered
-		]),
-		visibleRelations: showOnlyFiltered ? visibleRelations : void 0
-	};
-};
-//#endregion
-//#region src/components/FilterViews/RelationCountFilter.tsx
-const RelationCountFilter = (relationType) => ({ ocelId, control }) => {
-	const { filterColumns, visibleRelations } = useRelationCountFilter({
-		control,
-		path: relationType === "e2o" ? "e2o_count" : "o2o_count"
+									min: 1,
+									max: Math.max(1, pairs.size),
+									value: Math.min(edgeLimit, Math.max(1, pairs.size)),
+									onChange: setEdgeLimit
+								})]
+							}),
+							/* @__PURE__ */ jsx(Switch, {
+								size: "xs",
+								label: "Qualifiers",
+								checked: showQualifiers,
+								onChange: (event) => setShowQualifiers(event.currentTarget.checked)
+							})
+						]
+					}), pending ? /* @__PURE__ */ jsxs(Button, {
+						size: "compact-xs",
+						variant: "light",
+						rightSection: /* @__PURE__ */ jsx(XIcon, { size: 12 }),
+						onClick: () => setPending(null),
+						children: [pending.slice(pending.indexOf(":") + 1), ": pick the second node"]
+					}) : /* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						children: "Click an edge, or two nodes, to pick a relation"
+					})]
+				}), /* @__PURE__ */ jsx(Box, {
+					flex: 1,
+					mih: 420,
+					pos: "relative",
+					children: /* @__PURE__ */ jsx(OcelTypeGraph, {
+						nodes: shownNodes,
+						edges,
+						nodeRingColor: (id) => id === pending ? theme.colors.blue[6] : void 0,
+						nodeDimmed: (id) => connected !== void 0 && id !== pending && !connected.has(id),
+						edgeStyle: (id) => {
+							const edge = byId.get(id);
+							return edge ? { width: MIN_WIDTH + 5 * (edge.sum / largest) } : void 0;
+						},
+						onNodeClick: clickNode,
+						onEdgeClick: (id) => {
+							const edge = byId.get(id);
+							if (edge) select(edge.relation);
+						}
+					}, structure)
+				})]
+			});
+		}
 	});
-	return /* @__PURE__ */ jsx(RelationTable, {
+};
+// src/components/FilterViews/RelationCountFilter/util.ts
+const RELATION_HOOKS = {
+	e2o: {
+		useRelations: useE2o,
+		useDistribution: useE2oCountDistribution
+	},
+	o2o: {
+		useRelations: useO2o,
+		useDistribution: useO2oCountDistribution
+	}
+};
+// src/components/FilterViews/RelationCountFilter/RelationCountFilter.tsx
+const RelationCountPanel = (kind) => {
+	const hooks = RELATION_HOOKS[kind];
+	return ({ ocelId, filter, onChange, before }) => filter.source ? /* @__PURE__ */ jsx(RelationDetail, {
+		ocelId,
+		kind,
+		hooks,
+		filter,
+		onChange,
+		before,
+		onClear: () => onChange({
+			type: filter.type,
+			source: "",
+			target: "",
+			range: [null, null]
+		})
+	}) : /* @__PURE__ */ jsx(RelationGraph, {
 		ocelId,
-		ocelVersion: "original",
-		relationType,
-		extraColumns: filterColumns,
-		subTableExtraColumns: filterColumns,
-		visibleRelations,
-		hideRange: true,
-		hideTotal: true
+		kind,
+		hooks,
+		filter,
+		onChange,
+		before
 	});
 };
+const summary = (filter) => {
+	if (!filter.source) return "No relation selected";
+	const [low, high] = filter.range;
+	const qualifier = filter.qualifier ? ` (${filter.qualifier})` : "";
+	return `${filter.source} → ${filter.target}${qualifier}: ${low ?? 0} – ${high ?? "∞"}`;
+};
 const E2OCountFilter = {
 	title: "E2O Count",
-	description: "Filters events of the source type by the number of objects they are related to (event-to-object relations). For each relation, you can set a minimum and/or maximum count. Events of the source type whose number of related objects does not fall within the specified range are filtered out. Relations without a range are ignored.",
-	ViewComponent: RelationCountFilter("e2o"),
-	generateDefault: () => []
+	description: "Keeps the events of the source activity whose number of related objects of the target type (event-to-object relations) falls within a range. Pick the relation by clicking its edge in the graph, then set a minimum and/or maximum count on its distribution. Events of other activities are left untouched.",
+	Panel: RelationCountPanel("e2o"),
+	create: () => ({
+		type: "e2o_count",
+		source: "",
+		target: "",
+		range: [null, null]
+	}),
+	summary,
+	isComplete: (filter) => filter.source !== "" && filter.target !== ""
 };
 const O2OCountFilter = {
 	title: "O2O Count",
-	description: "Filters objects of the source type by the number of other objects they are related to (object-to-object relations). For each relation, you can set a minimum and/or maximum count. Objects of the source type whose number of related objects does not fall within the specified range are filtered out. Relations without a range are ignored.",
-	ViewComponent: RelationCountFilter("o2o"),
-	generateDefault: () => []
+	description: "Keeps the objects of the source type whose number of related objects of the target type (object-to-object relations) falls within a range. Pick the relation by clicking its edge in the graph, then set a minimum and/or maximum count on its distribution. Objects of other types are left untouched.",
+	Panel: RelationCountPanel("o2o"),
+	create: () => ({
+		type: "o2o_count",
+		source: "",
+		target: "",
+		range: [null, null]
+	}),
+	summary,
+	isComplete: (filter) => filter.source !== "" && filter.target !== ""
 };
-//#endregion
-//#region src/util/dayjs.ts
-dayjs.extend(isBetween);
-var dayjs_default = dayjs;
-//#endregion
-//#region src/components/FilterViews/TimeFrameFilter.tsx
-const TimeGraph = memo(({ timeInfo, startDate, endDate }) => {
-	const data = useMemo(() => {
-		return timeInfo.date_distribution.map(({ start_timestamp, end_timestamp, entity_count }) => {
-			const isInRange = (!startDate || dayjs_default(end_timestamp).isAfter(dayjs_default(startDate))) && (!endDate || dayjs_default(start_timestamp).isBefore(dayjs_default(endDate)));
+// src/components/FilterViews/TimeFrameFilter.tsx
+const DATE_FORMAT = "YYYY-MM-DD HH:mm";
+const MODE_OPTIONS = [{
+	label: "Include",
+	value: "include"
+}, {
+	label: "Exclude",
+	value: "exclude"
+}];
+const TimeGraph = memo(({ timeInfo, startDate, endDate, mode }) => {
+	const theme = useMantineTheme();
+	const option = useMemo(() => {
+		const buckets = timeInfo.date_distribution.map(({ start_timestamp, end_timestamp, entity_count }) => {
+			const overlapsRange = (!startDate || dayjs_default(end_timestamp).isAfter(dayjs_default(startDate))) && (!endDate || dayjs_default(start_timestamp).isBefore(dayjs_default(endDate)));
+			const insideRange = (!startDate || !dayjs_default(start_timestamp).isBefore(dayjs_default(startDate))) && (!endDate || !dayjs_default(end_timestamp).isAfter(dayjs_default(endDate)));
 			return {
-				date: `${dayjs_default(start_timestamp).format("YYYY-MM-DD HH:mm")}-${dayjs_default(end_timestamp).format("YYYY-MM-DD HH:mm")} `,
-				...isInRange ? { value: Object.values(entity_count).reduce((acc, curr) => acc + curr, 0) } : { disabledValue: Object.values(entity_count).reduce((acc, curr) => acc + curr, 0) }
+				label: `${dayjs_default(start_timestamp).format(DATE_FORMAT)} - ${dayjs_default(end_timestamp).format(DATE_FORMAT)}`,
+				count: Object.values(entity_count).reduce((acc, curr) => acc + curr, 0),
+				isKept: mode === "exclude" ? !insideRange : overlapsRange
 			};
 		});
+		return {
+			tooltip: {
+				trigger: "axis",
+				axisPointer: { type: "shadow" }
+			},
+			grid: {
+				left: 0,
+				right: 0,
+				top: 8,
+				bottom: 0
+			},
+			xAxis: {
+				type: "category",
+				data: buckets.map(({ label }) => label),
+				show: false
+			},
+			yAxis: {
+				type: "value",
+				show: false
+			},
+			series: [{
+				type: "bar",
+				name: "count",
+				barCategoryGap: 0,
+				data: buckets.map(({ count, isKept }) => ({
+					value: count,
+					itemStyle: {
+						color: theme.colors.blue[6],
+						opacity: isKept ? 1 : .25
+					}
+				}))
+			}]
+		};
 	}, [
 		timeInfo,
 		startDate,
-		endDate
+		endDate,
+		mode,
+		theme
 	]);
-	return /* @__PURE__ */ jsx(BarChart, {
-		h: 300,
-		w: "100%",
-		data,
-		dataKey: "date",
-		type: "stacked",
-		series: [{
-			name: "value",
-			color: "blue",
-			label: "count"
-		}, {
-			name: "disabledValue",
-			color: "red",
-			label: "count"
-		}],
-		withYAxis: false,
-		withXAxis: false,
-		barChartProps: {
-			barCategoryGap: 0,
-			barGap: 0
-		}
+	return /* @__PURE__ */ jsx(EChartsReact, {
+		option,
+		style: { height: 300 }
 	});
 });
-const TimeFrameSlider = ({ timeInfo, startTime, endTime, onChange }) => {
+const TimeFrameSlider = ({ timeInfo, startTime, endTime, mode, onChange }) => {
 	const distribution = timeInfo.date_distribution;
 	const lastIndex = distribution.length - 1;
 	const startIndex = useMemo(() => {
@@ -629,281 +1528,213 @@ const TimeFrameSlider = ({ timeInfo, startTime, endTime, onChange }) => {
 		min: 0,
 		max: lastIndex,
 		minRange: 0,
+		inverted: mode === "exclude",
 		value: [startIndex, endIndex],
 		label: (value) => {
 			const bucket = distribution[value];
-			return bucket ? dayjs_default(bucket.start_timestamp).format("YYYY-MM-DD HH:mm") : null;
+			return bucket ? dayjs_default(bucket.start_timestamp).format(DATE_FORMAT) : null;
 		},
 		onChange: ([start, end]) => {
 			onChange([start === startIndex ? startTime : distribution[start]?.start_timestamp ?? startTime, distribution[end]?.end_timestamp ?? endTime]);
 		}
 	});
 };
-const TimeFrameFilter = {
-	title: "Timeframe",
-	description: "Filters events by their timestamp, keeping only those that occur within the selected time range. Use the date pickers or drag the range slider to set the start and end; the bar chart shows the event distribution over time, with events inside the range highlighted and events outside it dimmed.",
-	ViewComponent: memo(({ ocelId, control }) => {
-		const { data: timeInfo, isLoading } = useTimeInfo(ocelId, {
-			periods: 100,
-			ocel_version: "original"
-		});
-		return /* @__PURE__ */ jsxs(Box, {
-			pos: "relative",
-			w: "100%",
-			h: "100%",
-			children: [/* @__PURE__ */ jsx(LoadingOverlay, { visible: isLoading }), timeInfo && /* @__PURE__ */ jsxs(Grid, {
-				justify: "center",
-				align: "center",
-				children: [/* @__PURE__ */ jsx(Grid.Col, {
+const TimeFramePanel = memo(({ ocelId, filter, onChange, before }) => {
+	const view = useView(ocelId, before);
+	const { data: timeInfo, isLoading } = useTimeInfo(ocelId, {
+		...view,
+		periods: 100
+	}, { query: {
+		enabled: view !== void 0,
+		placeholderData: keepPreviousData
+	} });
+	const [start, end] = filter.time_range;
+	const mode = filter.mode ?? "include";
+	const setRange = (time_range) => onChange({
+		...filter,
+		time_range
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		pos: "relative",
+		w: "100%",
+		h: "100%",
+		children: [/* @__PURE__ */ jsx(LoadingOverlay, { visible: isLoading }), timeInfo && /* @__PURE__ */ jsxs(Grid, {
+			justify: "center",
+			align: "center",
+			children: [
+				/* @__PURE__ */ jsx(Grid.Col, {
 					span: 12,
-					children: /* @__PURE__ */ jsx(Watch, {
-						control,
-						name: ["time_frame.0.time_range.0", "time_frame.0.time_range.1"],
-						render: ([startTime, endTime]) => {
-							return /* @__PURE__ */ jsx(TimeGraph, {
-								timeInfo,
-								startDate: startTime ?? void 0,
-								endDate: endTime ?? void 0
-							});
-						}
-					})
-				}), /* @__PURE__ */ jsx(Controller, {
-					control,
-					name: "time_frame.0.time_range",
-					defaultValue: [timeInfo.start_time, timeInfo.end_time],
-					render: ({ field }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-						/* @__PURE__ */ jsx(Grid.Col, {
-							span: 3,
-							children: /* @__PURE__ */ jsx(DateTimePicker, {
-								minDate: timeInfo.start_time,
-								maxDate: field.value?.[1] ?? timeInfo.end_time,
-								onChange: (newStart) => {
-									field.onChange([newStart, field.value?.[1]]);
-								},
-								value: field.value?.[0] ?? timeInfo.start_time
-							})
-						}),
-						/* @__PURE__ */ jsx(Grid.Col, {
-							span: 6,
-							children: /* @__PURE__ */ jsx(TimeFrameSlider, {
-								onChange: field.onChange,
-								timeInfo,
-								startTime: field.value?.[0] ?? timeInfo.start_time,
-								endTime: field.value?.[1] ?? timeInfo.end_time
-							})
-						}),
-						/* @__PURE__ */ jsx(Grid.Col, {
-							span: 3,
-							children: /* @__PURE__ */ jsx(DateTimePicker, {
-								minDate: field.value?.[0] ?? timeInfo.start_time,
-								maxDate: timeInfo.end_time,
-								onChange: (newEnd) => {
-									field.onChange([field.value?.[0], newEnd]);
-								},
-								value: field.value?.[1] ?? timeInfo.end_time
+					children: /* @__PURE__ */ jsx(Group, {
+						justify: "flex-end",
+						children: /* @__PURE__ */ jsx(SegmentedControl, {
+							size: "xs",
+							data: MODE_OPTIONS,
+							value: mode,
+							onChange: (next) => onChange({
+								...filter,
+								mode: next
 							})
 						})
-					] })
-				})]
-			})]
-		});
-	}),
-	generateDefault: () => [{
+					})
+				}),
+				/* @__PURE__ */ jsx(Grid.Col, {
+					span: 12,
+					children: /* @__PURE__ */ jsx(TimeGraph, {
+						timeInfo,
+						startDate: start ?? void 0,
+						endDate: end ?? void 0,
+						mode
+					})
+				}),
+				/* @__PURE__ */ jsx(Grid.Col, {
+					span: 3,
+					children: /* @__PURE__ */ jsx(DateTimePicker, {
+						minDate: timeInfo.start_time,
+						maxDate: end ?? timeInfo.end_time,
+						onChange: (newStart) => setRange([newStart, end]),
+						value: start ?? timeInfo.start_time
+					})
+				}),
+				/* @__PURE__ */ jsx(Grid.Col, {
+					span: 6,
+					children: /* @__PURE__ */ jsx(TimeFrameSlider, {
+						onChange: setRange,
+						timeInfo,
+						startTime: start ?? timeInfo.start_time,
+						endTime: end ?? timeInfo.end_time,
+						mode
+					})
+				}),
+				/* @__PURE__ */ jsx(Grid.Col, {
+					span: 3,
+					children: /* @__PURE__ */ jsx(DateTimePicker, {
+						minDate: start ?? timeInfo.start_time,
+						maxDate: timeInfo.end_time,
+						onChange: (newEnd) => setRange([start, newEnd]),
+						value: end ?? timeInfo.end_time
+					})
+				})
+			]
+		})]
+	});
+});
+const bound = (value, open) => value ? dayjs_default(value).format(DATE_FORMAT) : open;
+const TimeFrameFilter = {
+	title: "Timeframe",
+	description: "Keeps only the events that occur within the selected time range, or with Exclude, removes them and keeps everything outside it. Use the date pickers or drag the range slider to set the start and end; the bar chart shows the event distribution over time, with kept events highlighted and removed events dimmed.",
+	Panel: TimeFramePanel,
+	create: () => ({
 		type: "time_frame",
-		time_range: [null, null]
-	}],
-	cleanUpFilters: (currentFilter) => {
-		if (!currentFilter[0] || currentFilter[0].time_range[0] == null && currentFilter[0].time_range[1] == null) return [];
-		return [currentFilter[0]];
-	}
+		time_range: [null, null],
+		mode: "include"
+	}),
+	summary: ({ time_range: [start, end], mode }) => start || end ? `${mode === "exclude" ? "Excluding " : ""}${bound(start, "start")} – ${bound(end, "end")}` : "No range set",
+	isComplete: ({ time_range: [start, end] }) => start != null || end != null
 };
-//#endregion
-//#region src/util/color.ts
-const assignUniqueColors = (strings) => {
-	const numStrings = strings.length;
-	const uniqueStrings = Array.from(new Set(strings));
-	const colorMap = {};
-	uniqueStrings.forEach((str, index) => {
-		const hsl = `hsl(${index * 360 / numStrings}, 70%, 50%)`;
-		colorMap[str] = hsl;
-	});
-	return colorMap;
+// src/components/FilterViews/TypeForm.tsx
+const PICKER_CLASS = "ocelescope-type-filter-picker";
+const FillHeightStyles = () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(InlineStyles, {
+	deduplicate: true,
+	selector: `.${PICKER_CLASS} :has([role="listbox"])`,
+	styles: {
+		flex: 1,
+		minHeight: 0
+	}
+}), /* @__PURE__ */ jsx(InlineStyles, {
+	deduplicate: true,
+	selector: `.${PICKER_CLASS} [role="listbox"]`,
+	styles: {
+		flex: 1,
+		minHeight: 0,
+		maxHeight: "none !important"
+	}
+})] });
+const listed = (names, noun) => {
+	if (names.length === 0) return `No ${noun} selected`;
+	const shown = names.slice(0, 2).join(", ");
+	return names.length > 2 ? `${shown} +${names.length - 2} more` : shown;
 };
-const BarChartSelect = memo(({ values, selected, onSelect }) => {
-	const colorMap = useMemo(() => {
-		return assignUniqueColors(Array.from(new Set(values.map(({ key }) => key))));
-	}, [values]);
-	const data = useMemo(() => [...values].sort((a, b) => b.value - a.value).map(({ value, key }) => ({
-		key,
-		value,
-		color: selected.includes(key) ? colorMap[key] : "rgba(128, 128, 128, 0.3)"
-	})), [
-		values,
-		selected,
-		colorMap
-	]);
-	return /* @__PURE__ */ jsx(BarChart, {
-		h: 30 * values.length,
-		data,
-		minBarSize: 30,
-		tooltipProps: { content: ({ label }) => /* @__PURE__ */ jsx(Paper, {
-			px: "md",
-			py: "sm",
-			withBorder: true,
-			shadow: "md",
-			radius: "md",
-			children: /* @__PURE__ */ jsx(Text, { children: label })
-		}) },
-		dataKey: "key",
-		orientation: "vertical",
-		yAxisProps: { width: 130 },
-		series: [{
-			name: "value",
-			color: "gray.6"
-		}],
-		gridAxis: "none",
-		barChartProps: { onClick: ({ activeLabel }) => {
-			if (!activeLabel) return;
-			onSelect(String(activeLabel));
-		} }
-	});
-});
-//#endregion
-//#region src/components/inputs/EntityTypeFilter.tsx
-const EntityTypeFilterInput = ({ entityTypes, onChange, showGraph = false, selectedEntityTypes, label, mode, onModeChange }) => {
-	const isExclude = mode === "exclude";
-	const maxCount = useMemo(() => entityTypes.reduce((max, { value }) => Math.max(max, value), 0), [entityTypes]);
-	const [range, setRange] = useState([0, 100]);
-	const frequencyMarks = useMemo(() => {
-		if (maxCount === 0) return [];
-		const percentages = new Set(entityTypes.map(({ value }) => Math.round(value / maxCount * 100)));
-		return Array.from(percentages).map((value) => ({ value }));
-	}, [entityTypes, maxCount]);
-	const applyRange = ([low, high]) => {
-		setRange([low, high]);
-		const minCount = low / 100 * maxCount;
-		const maxCountInBand = high / 100 * maxCount;
-		const inBand = (count) => count >= minCount && count <= maxCountInBand;
-		onChange(entityTypes.filter(({ value: count }) => isExclude ? !inBand(count) : inBand(count)).map(({ key }) => key));
-	};
-	const highlighted = isExclude ? entityTypes.map(({ key }) => key).filter((key) => !selectedEntityTypes.includes(key)) : selectedEntityTypes;
-	const toggle = (key) => onChange(selectedEntityTypes.includes(key) ? selectedEntityTypes.filter((v) => v !== key) : [...selectedEntityTypes, key]);
-	return /* @__PURE__ */ jsxs(Stack, {
-		gap: "md",
-		children: [showGraph && /* @__PURE__ */ jsxs(Stack, {
-			gap: "xs",
-			style: { minHeight: 0 },
-			children: [/* @__PURE__ */ jsx(ScrollArea.Autosize, {
-				mah: "60vh",
-				type: "auto",
-				children: /* @__PURE__ */ jsx(BarChartSelect, {
-					selected: highlighted,
-					values: entityTypes ?? [],
-					onSelect: toggle
+const ActivityPanel = ({ ocelId, filter, onChange, before }) => {
+	const view = useView(ocelId, before);
+	return /* @__PURE__ */ jsx(Previewed, {
+		query: {
+			data: view,
+			isPending: true,
+			error: null
+		},
+		children: (view) => /* @__PURE__ */ jsxs(Stack, {
+			gap: 4,
+			flex: 1,
+			mih: 0,
+			className: PICKER_CLASS,
+			children: [/* @__PURE__ */ jsx(FillHeightStyles, {}), /* @__PURE__ */ jsx(ActivityPicker, {
+				variant: "list",
+				multiple: true,
+				cutoff: true,
+				ocelId,
+				...viewProps(view),
+				value: filter.event_types,
+				onChange: (next) => onChange({
+					...filter,
+					event_types: next
 				})
-			}), /* @__PURE__ */ jsxs(Stack, {
-				gap: 2,
-				children: [/* @__PURE__ */ jsx(Text, {
-					size: "sm",
-					fw: 500,
-					children: "Frequency range (% of most frequent)"
-				}), /* @__PURE__ */ jsx(RangeSlider, {
-					min: 0,
-					max: 100,
-					value: range,
-					onChange: applyRange,
-					disabled: maxCount === 0,
-					label: (value) => `${value}%`,
-					minRange: 0,
-					marks: frequencyMarks,
-					inverted: mode === "include",
-					mb: "sm"
-				})]
 			})]
-		}), /* @__PURE__ */ jsxs(Group, {
-			align: "flex-end",
-			gap: "sm",
-			wrap: "nowrap",
-			children: [/* @__PURE__ */ jsx(MultiSelect, {
-				flex: 1,
-				label: isExclude ? `Excluded ${label}` : label,
-				data: entityTypes.map(({ key }) => key),
-				value: selectedEntityTypes,
-				searchable: true,
-				hidePickedOptions: true,
-				nothingFoundMessage: "No event type found",
-				onChange: (newValues) => onChange(newValues),
-				clearable: true,
-				styles: { input: {
-					flexWrap: "nowrap",
-					overflowX: "auto",
-					overflowY: "hidden"
-				} }
-			}), /* @__PURE__ */ jsx(Switch, {
-				mb: 8,
-				label: "Exclude",
-				checked: isExclude,
-				onChange: (event) => onModeChange(event.currentTarget.checked ? "exclude" : "include")
-			})]
-		})]
+		})
 	});
 };
-//#endregion
-//#region src/components/FilterViews/TypeForm.tsx
-const EntityFilter = (entityType) => ({ ocelId, control }) => {
-	const isEvents = entityType === "events";
-	const { data: entityCounts } = (isEvents ? useEventCounts : useObjectCounts)(ocelId, { ocel_version: "original" });
-	return /* @__PURE__ */ jsx("form", { children: /* @__PURE__ */ jsx(Controller, {
-		name: isEvents ? `activity.0.mode` : `object_type.0.mode`,
-		control,
-		render: ({ field: modeField }) => /* @__PURE__ */ jsx(Controller, {
-			name: isEvents ? `activity.0.event_types` : `object_type.0.object_types`,
-			control,
-			render: ({ field }) => /* @__PURE__ */ jsx(EntityTypeFilterInput, {
-				entityTypes: Object.entries(entityCounts ?? {}).map(([activity, count]) => ({
-					key: activity,
-					value: count
-				})),
-				selectedEntityTypes: field.value ?? [],
-				mode: modeField.value ?? "exclude",
-				onModeChange: modeField.onChange,
-				showGraph: true,
-				label: isEvents ? "Activities" : "Object Types",
-				onChange: field.onChange
-			})
+const ObjectTypePanel = ({ ocelId, filter, onChange, before }) => {
+	const view = useView(ocelId, before);
+	return /* @__PURE__ */ jsx(Previewed, {
+		query: {
+			data: view,
+			isPending: true,
+			error: null
+		},
+		children: (view) => /* @__PURE__ */ jsxs(Stack, {
+			gap: 4,
+			flex: 1,
+			mih: 0,
+			className: PICKER_CLASS,
+			children: [/* @__PURE__ */ jsx(FillHeightStyles, {}), /* @__PURE__ */ jsx(ObjectTypePicker, {
+				variant: "list",
+				multiple: true,
+				cutoff: true,
+				ocelId,
+				...viewProps(view),
+				value: filter.object_types,
+				onChange: (next) => onChange({
+					...filter,
+					object_types: next
+				})
+			})]
 		})
-	}) });
+	});
 };
-//#endregion
-//#region src/components/FilterViews/index.tsx
-const FILTER_MAP = {
+// src/components/FilterViews/index.tsx
+const FILTER_KINDS = {
 	activity: {
 		title: "Activity",
-		description: "Filters the event log by activity (the event type). In include mode only events of the selected activities are kept; in exclude mode the selected activities are dropped and everything else is kept. The bar chart shows how many events exist per activity to help you decide what to keep.",
-		ViewComponent: EntityFilter("events"),
-		generateDefault: () => [{
+		description: "Keeps only the events of the selected activities (the event types). The list shows how many events exist per activity to help you decide what to keep.",
+		Panel: ActivityPanel,
+		create: () => ({
 			type: "activity",
 			event_types: [],
-			mode: "exclude"
-		}],
-		cleanUpFilters: (filter) => {
-			if (!filter[0] || filter[0].event_types.length === 0) return [];
-			return [filter[0]];
-		}
+			mode: "include"
+		}),
+		summary: (filter) => listed(filter.event_types, "activities"),
+		isComplete: (filter) => filter.event_types.length > 0
 	},
 	object_type: {
 		title: "Object Type",
-		description: "Filters the log by object type. In include mode only objects of the selected types are kept; in exclude mode the selected types are dropped and everything else is kept. The bar chart shows how many objects exist per type to help you decide what to keep.",
-		ViewComponent: EntityFilter("objects"),
-		generateDefault: () => [{
+		description: "Keeps only the objects of the selected types. The list shows how many objects exist per type to help you decide what to keep.",
+		Panel: ObjectTypePanel,
+		create: () => ({
 			type: "object_type",
 			object_types: [],
-			mode: "exclude"
-		}],
-		cleanUpFilters: (filter) => {
-			if (!filter[0] || filter[0].object_types.length === 0) return [];
-			return [filter[0]];
-		}
+			mode: "include"
+		}),
+		summary: (filter) => listed(filter.object_types, "object types"),
+		isComplete: (filter) => filter.object_types.length > 0
 	},
 	time_frame: TimeFrameFilter,
 	event_attribute: EventAttributeFilter,
@@ -911,103 +1742,327 @@ const FILTER_MAP = {
 	e2o_count: E2OCountFilter,
 	o2o_count: O2OCountFilter
 };
-const generateDefaultFilter = (currentFilters) => {
-	const groupedFilter = currentFilters.reduce((acc, curr) => {
-		return {
-			...acc,
-			[curr.type]: acc[curr.type] ? [...acc[curr.type] ?? [], curr] : [curr]
-		};
-	}, {});
-	const missingFilterKeys = Object.keys(FILTER_MAP).filter((key) => !(key in groupedFilter));
-	return {
-		...groupedFilter,
-		...Object.fromEntries(missingFilterKeys.map((key) => [key, FILTER_MAP[key].generateDefault()]))
-	};
-};
-const defaultFilter = (filters) => {
-	if (!filters || filters.length === 0) return [];
-	return filters;
-};
-const cleanUpFilterByKey = (key, filters) => {
-	return (FILTER_MAP[key].cleanUpFilters ?? defaultFilter)(filters);
-};
-const cleanUpFilters = (filter) => {
-	return Object.keys(filter).flatMap((key) => {
-		const filters = filter[key];
-		if (!filters) return [];
-		return cleanUpFilterByKey(key, filters);
-	}).filter((filter) => !!filter);
-};
-//#endregion
-//#region src/components/FilterForm.tsx
-const FilterForm = ({ ocelId, currentFilter, onSubmit }) => {
-	const { control, handleSubmit, reset, formState } = useForm({ defaultValues: generateDefaultFilter(currentFilter) });
-	const { currentTab, setCurrentTab } = useCurrentFilterTab({
-		tabs: Object.keys(FILTER_MAP),
-		defaultTab: "activity",
-		queryKey: "tab"
-	});
-	return /* @__PURE__ */ jsxs(Tabs, {
-		value: currentTab,
-		onChange: (newTab) => setCurrentTab(newTab),
-		keepMounted: false,
+const kindOf = (filter) => FILTER_KINDS[filter.type];
+const completeSteps = (steps) => steps.filter((step) => kindOf(step).isComplete(step));
+// src/components/Pipeline/PipelineStep.tsx
+const PipelineStep = ({ id, index, step, selected, onSelect, onRemove }) => {
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+	const kind = kindOf(step);
+	const complete = kind.isComplete(step);
+	return /* @__PURE__ */ jsx(Paper, {
+		ref: setNodeRef,
+		withBorder: true,
+		onClick: onSelect,
+		bg: selected ? "var(--mantine-primary-color-light)" : void 0,
 		style: {
-			display: "flex",
-			flexDirection: "column"
+			cursor: "pointer",
+			overflow: "hidden",
+			transform: CSS.Transform.toString(transform),
+			transition,
+			opacity: isDragging ? .6 : 1,
+			zIndex: isDragging ? 1 : void 0,
+			position: "relative"
 		},
-		h: "100%",
-		children: [/* @__PURE__ */ jsxs(Group, {
-			py: "xs",
+		children: /* @__PURE__ */ jsxs(Group, {
 			gap: 0,
 			wrap: "nowrap",
-			children: [/* @__PURE__ */ jsx(Tabs.List, {
+			align: "stretch",
+			children: [/* @__PURE__ */ jsx(UnstyledButton, {
+				"aria-label": "Drag to reorder",
+				w: 24,
+				display: "flex",
+				bg: "var(--mantine-color-default-hover)",
+				c: "dimmed",
+				style: {
+					alignItems: "center",
+					justifyContent: "center",
+					cursor: isDragging ? "grabbing" : "grab",
+					touchAction: "none",
+					borderRight: "1px solid var(--mantine-color-default-border)"
+				},
+				onClick: (event) => event.stopPropagation(),
+				...attributes,
+				...listeners,
+				children: /* @__PURE__ */ jsx(GripVerticalIcon, { size: 14 })
+			}), /* @__PURE__ */ jsxs(Group, {
+				gap: "xs",
+				wrap: "nowrap",
+				align: "start",
 				flex: 1,
 				miw: 0,
-				children: /* @__PURE__ */ jsx(Scroller, { children: Object.entries(FILTER_MAP).map(([key, { title }]) => /* @__PURE__ */ jsx(Tabs.Tab, {
-					value: key,
-					children: title
-				}, key)) })
-			}), /* @__PURE__ */ jsxs(ActionIconGroup, { children: [formState.isDirty && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ActionIcon, {
-				onClick: handleSubmit((data) => {
-					onSubmit?.(cleanUpFilters(data));
-				}),
-				size: "lg",
-				color: "green",
-				children: /* @__PURE__ */ jsx(CheckIcon, { size: 24 })
-			}), /* @__PURE__ */ jsx(ActionIcon, {
-				size: "lg",
-				color: "yellow",
-				onClick: () => reset(generateDefaultFilter(currentFilter)),
-				children: /* @__PURE__ */ jsx(RotateCcwIcon, { size: 24 })
-			})] }), currentFilter.length > 0 && /* @__PURE__ */ jsx(ActionIcon, {
-				size: "lg",
-				color: "red",
-				onClick: () => onSubmit?.([]),
-				children: /* @__PURE__ */ jsx(Trash2Icon, { size: 24 })
-			})] })]
-		}), Object.entries(FILTER_MAP).map(([key, { ViewComponent, description }]) => /* @__PURE__ */ jsx(Tabs.Panel, {
-			value: key,
-			p: "md",
+				p: "xs",
+				children: [/* @__PURE__ */ jsxs(Stack, {
+					gap: 2,
+					flex: 1,
+					miw: 0,
+					children: [/* @__PURE__ */ jsxs(Group, {
+						gap: 6,
+						wrap: "nowrap",
+						children: [
+							/* @__PURE__ */ jsx(Text, {
+								size: "xs",
+								c: "dimmed",
+								children: index + 1
+							}),
+							/* @__PURE__ */ jsx(Text, {
+								size: "sm",
+								fw: 500,
+								truncate: true,
+								children: kind.title
+							}),
+							!complete && /* @__PURE__ */ jsx(Badge, {
+								size: "xs",
+								color: "yellow",
+								variant: "light",
+								children: "incomplete"
+							})
+						]
+					}), /* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						truncate: true,
+						children: kind.summary(step)
+					})]
+				}), /* @__PURE__ */ jsx(ActionIcon, {
+					variant: "subtle",
+					color: "red",
+					size: "sm",
+					"aria-label": "Remove step",
+					onClick: (event) => {
+						event.stopPropagation();
+						onRemove();
+					},
+					children: /* @__PURE__ */ jsx(XIcon, { size: 14 })
+				})]
+			})]
+		})
+	});
+};
+// src/components/Pipeline/PipelineList.tsx
+const KEYS = Object.keys(FILTER_KINDS);
+const PipelineList = ({ ids, steps, selectedId, onSelect, onRemove, onMove, onAdd, ...stackProps }) => {
+	const [search, setSearch] = useState("");
+	const shown = KEYS.filter((key) => FILTER_KINDS[key].title.toLowerCase().includes(search.trim().toLowerCase()));
+	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const onDragEnd = ({ active, over }) => {
+		if (!over || active.id === over.id) return;
+		onMove(ids.indexOf(String(active.id)), ids.indexOf(String(over.id)));
+	};
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: "xs",
+		...stackProps,
+		children: [/* @__PURE__ */ jsx(ScrollArea, {
 			flex: 1,
 			mih: 0,
-			style: { overflow: "auto" },
+			type: "auto",
+			scrollbarSize: 6,
 			children: /* @__PURE__ */ jsxs(Stack, {
-				gap: "md",
-				h: "100%",
-				children: [/* @__PURE__ */ jsxs(Text, {
+				gap: "xs",
+				children: [ids.length === 0 && /* @__PURE__ */ jsx(Text, {
 					size: "sm",
 					c: "dimmed",
-					children: [description, " Afterwards the log is cleaned up automatically: relations whose source or target is missing are removed, events without at least one E2O relation are filtered out, and objects without any E2O or O2O relation are filtered out too."]
-				}), /* @__PURE__ */ jsx(ViewComponent, {
-					control,
-					ocelId
+					children: "No filters yet. Add one to start the pipeline."
+				}), /* @__PURE__ */ jsx(DndContext, {
+					sensors,
+					collisionDetection: closestCenter,
+					onDragEnd,
+					children: /* @__PURE__ */ jsx(SortableContext, {
+						items: ids,
+						strategy: verticalListSortingStrategy,
+						children: ids.map((id, index) => {
+							const step = steps[index];
+							return step && /* @__PURE__ */ jsx(PipelineStep, {
+								id,
+								index,
+								step,
+								selected: id === selectedId,
+								onSelect: () => onSelect(id),
+								onRemove: () => onRemove(index)
+							}, id);
+						})
+					})
 				})]
 			})
-		}, key))]
+		}), /* @__PURE__ */ jsxs(Menu, {
+			position: "bottom-start",
+			width: "target",
+			children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Button, {
+				variant: "light",
+				leftSection: /* @__PURE__ */ jsx(PlusIcon, { size: 16 }),
+				fullWidth: true,
+				children: "Add filter"
+			}) }), /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [
+				/* @__PURE__ */ jsx(Menu.Search, {
+					value: search,
+					onChange: (event) => setSearch(event.currentTarget.value),
+					placeholder: "Search filters"
+				}),
+				shown.map((key) => /* @__PURE__ */ jsx(Menu.Item, {
+					onClick: () => onAdd(key),
+					children: FILTER_KINDS[key].title
+				}, key)),
+				shown.length === 0 && /* @__PURE__ */ jsx(Menu.Label, { children: "No filter matches" })
+			] })]
+		})]
+	});
+};
+// src/components/FilterForm.tsx
+const CLEANUP_NOTE = "The steps run from top to bottom. After the last step the log is cleaned up: relations whose event or object is gone are removed, events without at least one E2O relation are filtered out, and objects without any E2O or O2O relation are filtered out too.";
+const FilterForm = ({ ocelId, currentFilter, onSubmit }) => {
+	const { control, handleSubmit, reset, formState } = useForm({ defaultValues: { steps: currentFilter } });
+	const { fields, append, remove, move } = useFieldArray({
+		control,
+		name: "steps"
+	});
+	const steps = useWatch({
+		control,
+		name: "steps"
+	});
+	const [selectedId, setSelectedId] = useState(fields[0]?.id);
+	const ids = fields.map(({ id }) => id);
+	const selectedIndex = fields.findIndex(({ id }) => id === selectedId);
+	const selectedStep = steps[selectedIndex];
+	const before = completeSteps(steps.slice(0, Math.max(selectedIndex, 0)));
+	const selectAdded = useRef(false);
+	useEffect(() => {
+		if (selectAdded.current) {
+			selectAdded.current = false;
+			setSelectedId(fields[fields.length - 1]?.id);
+		}
+	}, [fields]);
+	const addStep = (key) => {
+		selectAdded.current = true;
+		append(FILTER_KINDS[key].create());
+	};
+	return /* @__PURE__ */ jsxs(Group, {
+		h: "100%",
+		gap: 0,
+		wrap: "nowrap",
+		align: "stretch",
+		children: [/* @__PURE__ */ jsx(Box, {
+			flex: 1,
+			miw: 0,
+			p: "md",
+			style: { overflow: "auto" },
+			children: selectedStep ? /* @__PURE__ */ jsxs(Stack, {
+				gap: "md",
+				h: "100%",
+				children: [/* @__PURE__ */ jsxs(Stack, {
+					gap: 4,
+					children: [/* @__PURE__ */ jsxs(Title, {
+						order: 4,
+						children: [
+							selectedIndex + 1,
+							". ",
+							kindOf(selectedStep).title
+						]
+					}), /* @__PURE__ */ jsx(Text, {
+						size: "sm",
+						c: "dimmed",
+						children: kindOf(selectedStep).description
+					})]
+				}), /* @__PURE__ */ jsx(Controller, {
+					control,
+					name: `steps.${selectedIndex}`,
+					render: ({ field }) => {
+						const { Panel } = kindOf(field.value);
+						return /* @__PURE__ */ jsx(Panel, {
+							ocelId,
+							filter: field.value,
+							before,
+							onChange: (step) => field.onChange({ target: { value: step } })
+						});
+					}
+				}, selectedId)]
+			}) : /* @__PURE__ */ jsx(Center, {
+				h: "100%",
+				children: /* @__PURE__ */ jsx(Text, {
+					c: "dimmed",
+					size: "sm",
+					maw: 360,
+					ta: "center",
+					children: fields.length === 0 ? "Add a filter to the pipeline on the right to start filtering." : "Select a step on the right to edit it."
+				})
+			})
+		}), /* @__PURE__ */ jsxs(Stack, {
+			w: 320,
+			gap: "sm",
+			py: "md",
+			style: { borderLeft: "1px solid var(--mantine-color-default-border)" },
+			children: [
+				/* @__PURE__ */ jsxs(Group, {
+					justify: "space-between",
+					wrap: "nowrap",
+					h: 28,
+					px: "md",
+					children: [/* @__PURE__ */ jsxs(Group, {
+						gap: 6,
+						wrap: "nowrap",
+						children: [/* @__PURE__ */ jsx(Title, {
+							order: 5,
+							lh: 1,
+							children: "Pipeline"
+						}), /* @__PURE__ */ jsx(Tooltip, {
+							label: CLEANUP_NOTE,
+							multiline: true,
+							w: 280,
+							withArrow: true,
+							children: /* @__PURE__ */ jsx(InfoIcon, {
+								size: 16,
+								color: "var(--mantine-color-dimmed)",
+								"aria-label": "How the pipeline is applied"
+							})
+						})]
+					}), /* @__PURE__ */ jsxs(Group, {
+						justify: "flex-end",
+						gap: 4,
+						wrap: "nowrap",
+						ml: "auto",
+						children: [formState.isDirty && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Tooltip, {
+							label: "Apply",
+							children: /* @__PURE__ */ jsx(ActionIcon, {
+								variant: "subtle",
+								onClick: handleSubmit((data) => onSubmit?.(completeSteps(data.steps))),
+								color: "green",
+								children: /* @__PURE__ */ jsx(CheckIcon, { size: 20 })
+							})
+						}), /* @__PURE__ */ jsx(Tooltip, {
+							label: "Discard changes",
+							children: /* @__PURE__ */ jsx(ActionIcon, {
+								variant: "subtle",
+								color: "yellow",
+								onClick: () => reset({ steps: currentFilter }),
+								children: /* @__PURE__ */ jsx(RotateCcwIcon, { size: 20 })
+							})
+						})] }), currentFilter.length > 0 && /* @__PURE__ */ jsx(Tooltip, {
+							label: "Remove all filters",
+							children: /* @__PURE__ */ jsx(ActionIcon, {
+								variant: "subtle",
+								color: "red",
+								onClick: () => onSubmit?.([]),
+								children: /* @__PURE__ */ jsx(Trash2Icon, { size: 20 })
+							})
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx(Divider, {}),
+				/* @__PURE__ */ jsx(PipelineList, {
+					flex: 1,
+					mih: 0,
+					px: "md",
+					ids,
+					steps,
+					selectedId,
+					onSelect: setSelectedId,
+					onRemove: remove,
+					onMove: move,
+					onAdd: addStep
+				})
+			]
+		})]
 	});
 };
-//#endregion
-//#region src/components/FilterPage.tsx
+// src/components/FilterPage.tsx
 const FilterPage = () => {
 	const { id: ocelId } = useCurrentOcel();
 	const { data: filterPipeline, refetch } = useGetFilter(ocelId ?? "", { query: { enabled: !!ocelId } });
@@ -1031,8 +2086,7 @@ var FilterPage_default = defineModuleRoute({
 	name: "filter",
 	requiresOcel: true
 });
-//#endregion
-//#region src/index.ts
+// src/index.ts
 var src_default = defineModule({
 	name: "filter",
 	description: "Filter functionality provided by the ocelescope package",
@@ -1041,5 +2095,4 @@ var src_default = defineModule({
 	routes: [FilterPage_default],
 	icon: FilterIcon
 });
-//#endregion
 export { src_default as default };