@ocelescope/filter 0.1.0

package/dist/index.js

@@ -0,0 +1,995 @@
+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, Stack, Switch, Tabs, Text, TextInput } from "@mantine/core";
+import hash from "object-hash";
+import { 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 { 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
+const customFetch$1 = async (config, options) => customFetch(config, options);
+//#endregion
+//#region src/api/base.ts
+/**
+* Generated by orval v8.5.2 🍺
+* Do not edit manually.
+* Filter
+* OpenAPI spec version: 1.0
+*/
+/**
+* @summary Getfilter
+*/
+const getFilter = (ocelId, options, signal) => {
+	return customFetch$1({
+		url: `/api/external/modules/filter/v1/${ocelId}/filter`,
+		method: "GET",
+		signal
+	}, options);
+};
+const getGetFilterQueryKey = (ocelId) => {
+	return [`/api/external/modules/filter/v1/${ocelId}/filter`];
+};
+const getGetFilterQueryOptions = (ocelId, options) => {
+	const { query: queryOptions, request: requestOptions } = options ?? {};
+	const queryKey = queryOptions?.queryKey ?? getGetFilterQueryKey(ocelId);
+	const queryFn = ({ signal }) => getFilter(ocelId, requestOptions, signal);
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!ocelId,
+		staleTime: 3e5,
+		...queryOptions
+	};
+};
+/**
+* @summary Getfilter
+*/
+function useGetFilter(ocelId, options, queryClient) {
+	const queryOptions = getGetFilterQueryOptions(ocelId, options);
+	return {
+		...useQuery(queryOptions, queryClient),
+		queryKey: queryOptions.queryKey
+	};
+}
+/**
+* @summary Setfilter
+*/
+const setFilter = (ocelId, nativeActivityFilterNativeObjectTypeFilterNativeTimeFrameFilterNativeEventAttributeFilterNativeObjectAttributeFilterNativeE2OCountFilterNativeO2OCountFilter, options, signal) => {
+	return customFetch$1({
+		url: `/api/external/modules/filter/v1/${ocelId}/filter`,
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		data: nativeActivityFilterNativeObjectTypeFilterNativeTimeFrameFilterNativeEventAttributeFilterNativeObjectAttributeFilterNativeE2OCountFilterNativeO2OCountFilter,
+		signal
+	}, options);
+};
+const getSetFilterMutationOptions = (options) => {
+	const mutationKey = ["setFilter"];
+	const { mutation: mutationOptions, request: requestOptions } = options ? options.mutation && "mutationKey" in options.mutation && options.mutation.mutationKey ? options : {
+		...options,
+		mutation: {
+			...options.mutation,
+			mutationKey
+		}
+	} : {
+		mutation: { mutationKey },
+		request: void 0
+	};
+	const mutationFn = (props) => {
+		const { ocelId, data } = props ?? {};
+		return setFilter(ocelId, data, requestOptions);
+	};
+	return {
+		mutationFn,
+		...mutationOptions
+	};
+};
+/**
+* @summary Setfilter
+*/
+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
+			}
+		}, void 0, { shallow: true });
+	};
+	return {
+		currentTab,
+		setCurrentTab
+	};
+};
+//#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 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",
+				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 }
+					})
+				]
+			});
+		}
+	});
+});
+const DateFilterField = memo(function DateFilterField({ control, name, min, max }) {
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field }) => {
+			return /* @__PURE__ */ jsxs(Group, {
+				wrap: "nowrap",
+				align: "end",
+				gap: "xs",
+				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(Text, {
+						c: "dimmed",
+						size: "sm",
+						pb: 8,
+						children: "-"
+					}),
+					/* @__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 }
+					})
+				]
+			});
+		}
+	});
+});
+const AttributeInputField = memo(function AttributeInputField({ control, record, path }) {
+	switch (record.type) {
+		case "string": return /* @__PURE__ */ jsx(StringFilterField, {
+			control,
+			name: `${path}.regex`
+		});
+		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()
+		});
+		default: return /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: "Not Implemented"
+		});
+	}
+});
+//#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 {};
+	}
+};
+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 generateRecordId = (attribute) => {
+	const entityName = getEntityType(attribute);
+	return `${attribute.name}::${entityName ?? ""}`;
+};
+const useAttributeFilter = ({ path, control }) => {
+	const { fields, append, remove } = useFieldArray({
+		name: path,
+		control
+	});
+	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)
+			}),
+			filtering: showOnlyFiltered,
+			render: (record) => {
+				const filterIndex = filterIndexMap.get(generateRecordId(record)) ?? -1;
+				return filterIndex < 0 ? /* @__PURE__ */ jsxs(Text, {
+					size: "sm",
+					c: "dimmed",
+					children: [
+						record.min,
+						" - ",
+						record.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);
+					},
+					children: /* @__PURE__ */ jsx(XIcon, { size: 16 })
+				});
+			}
+		}], [
+			append,
+			remove,
+			filterIndexMap,
+			path,
+			control,
+			showOnlyFiltered
+		]),
+		visibleAttributes: showOnlyFiltered ? filteredAttributeNames : void 0
+	};
+};
+//#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 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 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, {
+									c: "dimmed",
+									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"
+	});
+	return /* @__PURE__ */ jsx(RelationTable, {
+		ocelId,
+		ocelVersion: "original",
+		relationType,
+		extraColumns: filterColumns,
+		subTableExtraColumns: filterColumns,
+		visibleRelations,
+		hideRange: true,
+		hideTotal: true
+	});
+};
+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: () => []
+};
+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: () => []
+};
+//#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 }) => {
+	return /* @__PURE__ */ jsx(BarChart, {
+		h: 300,
+		w: "100%",
+		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)));
+				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) }
+				};
+			});
+		}, [
+			timeInfo,
+			startDate,
+			endDate
+		]),
+		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
+		}
+	});
+});
+const TimeFrameSlider = ({ timeInfo, startTime, endTime, onChange }) => {
+	const startIndex = useMemo(() => timeInfo.date_distribution.findIndex(({ start_timestamp, end_timestamp }) => dayjs_default(startTime).isBetween(start_timestamp, end_timestamp, null, "[)")), [startTime, timeInfo.date_distribution]);
+	const endIndex = useMemo(() => timeInfo.date_distribution.findLastIndex(({ start_timestamp, end_timestamp }) => dayjs_default(endTime).isBetween(start_timestamp, end_timestamp, null, "(]")), [endTime, timeInfo.date_distribution]);
+	return /* @__PURE__ */ jsx(RangeSlider, {
+		min: 0,
+		max: timeInfo.date_distribution.length - 1,
+		minRange: 0,
+		value: [startIndex, endIndex],
+		label: (value) => dayjs_default(timeInfo.date_distribution[value].start_timestamp).format("YYYY-MM-DD HH:mm"),
+		onChange: ([start, end]) => {
+			onChange([start === startIndex ? startTime : timeInfo.date_distribution[start].start_timestamp, timeInfo.date_distribution[end].end_timestamp]);
+		}
+	});
+};
+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, {
+					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
+							})
+						})
+					] })
+				})]
+			})]
+		});
+	}),
+	generateDefault: () => [{
+		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]];
+	}
+};
+//#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) => {
+		colorMap[str] = `hsl(${index * 360 / numStrings}, 70%, 50%)`;
+	});
+	return colorMap;
+};
+const BarChartSelect = memo(({ values, selected, onSelect }) => {
+	const colorMap = useMemo(() => {
+		return assignUniqueColors(Array.from(new Set(values.map(({ key }) => key))));
+	}, [values]);
+	return /* @__PURE__ */ jsx(BarChart, {
+		h: 30 * values.length,
+		data: values.map(({ value, key }) => ({
+			key,
+			value,
+			color: selected.includes(key) ? colorMap[key] : "rgba(128, 128, 128, 0.3)"
+		})),
+		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
+				})
+			}), /* @__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
+			})
+		})
+	}) });
+};
+//#endregion
+//#region src/components/FilterViews/index.tsx
+const FILTER_MAP = {
+	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: () => [{
+			type: "activity",
+			event_types: [],
+			mode: "exclude"
+		}],
+		cleanUpFilters: (filter) => {
+			if (!filter[0] || filter[0].event_types.length === 0) return [];
+			return [filter[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: () => [{
+			type: "object_type",
+			object_types: [],
+			mode: "exclude"
+		}],
+		cleanUpFilters: (filter) => {
+			if (!filter[0] || filter[0].object_types.length === 0) return [];
+			return [filter[0]];
+		}
+	},
+	time_frame: TimeFrameFilter,
+	event_attribute: EventAttributeFilter,
+	object_attribute: ObjectAttributeFilter,
+	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,
+		children: [/* @__PURE__ */ jsxs(Group, { children: [/* @__PURE__ */ jsx(Tabs.List, {
+			flex: 1,
+			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",
+			children: /* @__PURE__ */ jsxs(Stack, {
+				gap: "md",
+				children: [/* @__PURE__ */ jsxs(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
+				})]
+			})
+		}, key))]
+	});
+};
+//#endregion
+//#region src/components/FilterPage.tsx
+const FilterPage = () => {
+	const { id: ocelId } = useCurrentOcel();
+	const { data: filterPipeline, refetch } = useGetFilter(ocelId ?? "", { query: { enabled: !!ocelId } });
+	const invalidate = useInvalidate();
+	const { mutate, status } = useSetFilter({ mutation: { onSuccess: async () => {
+		refetch();
+		await invalidate(["ocels"]);
+	} } });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [filterPipeline && ocelId && /* @__PURE__ */ jsx(FilterForm, {
+		ocelId,
+		currentFilter: filterPipeline,
+		onSubmit: (filter) => mutate({
+			ocelId,
+			data: filter
+		})
+	}, hash(filterPipeline)), /* @__PURE__ */ jsx(LoadingOverlay, { visible: status === "pending" })] });
+};
+//#endregion
+//#region src/index.ts
+var src_default = defineModule({
+	name: "filter",
+	description: "Filter functionality provided by the ocelescope package",
+	label: "Log Filter",
+	authors: [{ name: "Öztürk, Görkem-Emre" }],
+	routes: [defineModuleRoute({
+		component: FilterPage,
+		label: "Filter",
+		name: "filter",
+		requiresOcel: true
+	})],
+	icon: FilterIcon
+});
+//#endregion
+export { src_default as default };