@ocelescope/filter 0.10.0 → 0.10.2

package/README.md

@@ -31,14 +31,12 @@ export default {
 } satisfies OcelescopeConfig;
 ```
 
-This module's charts and date filters rely on two Mantine stylesheets. Add
-`@mantine/dates` and `@mantine/charts` to your app's `dependencies` and import
-their styles once in your app entry point (`pages/_app.tsx`), after
-`@mantine/core/styles.css`:
+This module's date filters rely on the Mantine dates stylesheet. Add
+`@mantine/dates` to your app's `dependencies` and import its styles once in
+your app entry point (`pages/_app.tsx`), after `@mantine/core/styles.css`:
 
 ```tsx
 import "@mantine/dates/styles.css";
-import "@mantine/charts/styles.css";
 ```
 
 ## About

package/dist/index.js

@@ -1,6 +1,6 @@
-import { AttributesTable, RelationTable, defineModule, defineModuleRoute, useCurrentOcel, useInvalidate } from "@ocelescope/core";
+import { ActivityPicker, AttributesTable, ObjectTypePicker, 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 { ActionIcon, ActionIconGroup, Box, Grid, Group, InlineStyles, LoadingOverlay, NumberInput, RangeSlider, Scroller, Stack, Switch, Tabs, Text, TextInput, useMantineTheme } from "@mantine/core";
 import hash from "object-hash";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { customFetch } from "@ocelescope/api-client";
@@ -9,8 +9,8 @@ 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 { useTimeInfo } from "@ocelescope/api-base";
+import EChartsReact from "echarts-for-react";
 import dayjs from "dayjs";
 import isBetween from "dayjs/plugin/isBetween.js";
 //#region src/lib/fetcher.ts
@@ -572,41 +572,57 @@ dayjs.extend(isBetween);
 var dayjs_default = dayjs;
 //#endregion
 //#region src/components/FilterViews/TimeFrameFilter.tsx
+const DATE_FORMAT = "YYYY-MM-DD HH:mm";
 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)));
-			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) }
-			};
-		});
+	const theme = useMantineTheme();
+	const option = useMemo(() => {
+		const buckets = timeInfo.date_distribution.map(({ start_timestamp, end_timestamp, entity_count }) => ({
+			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),
+			isInRange: (!startDate || dayjs_default(end_timestamp).isAfter(dayjs_default(startDate))) && (!endDate || dayjs_default(start_timestamp).isBefore(dayjs_default(endDate)))
+		}));
+		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, isInRange }) => ({
+					value: count,
+					itemStyle: {
+						color: theme.colors.blue[6],
+						opacity: isInRange ? 1 : .25
+					}
+				}))
+			}]
+		};
 	}, [
 		timeInfo,
 		startDate,
-		endDate
+		endDate,
+		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 }) => {
@@ -632,7 +648,7 @@ const TimeFrameSlider = ({ timeInfo, startTime, endTime, onChange }) => {
 		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]);
@@ -659,13 +675,11 @@ const TimeFrameFilter = {
 					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
-							});
-						}
+						render: ([startTime, endTime]) => /* @__PURE__ */ jsx(TimeGraph, {
+							timeInfo,
+							startDate: startTime ?? void 0,
+							endDate: endTime ?? void 0
+						})
 					})
 				}), /* @__PURE__ */ jsx(Controller, {
 					control,
@@ -718,173 +732,70 @@ const TimeFrameFilter = {
 	}
 };
 //#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;
-};
-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
-				})
-			}), /* @__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 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 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`,
+	const Picker = isEvents ? ActivityPicker : ObjectTypePicker;
+	return /* @__PURE__ */ jsx(Controller, {
+		name: isEvents ? `activity.0` : `object_type.0`,
 		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
-			})
-		})
-	}) });
+		render: ({ field }) => {
+			const filter = field.value;
+			const selected = filter?.type === "activity" ? filter.event_types : filter?.type === "object_type" ? filter.object_types : [];
+			return /* @__PURE__ */ jsxs(Stack, {
+				gap: 4,
+				flex: 1,
+				mih: 0,
+				className: PICKER_CLASS,
+				children: [/* @__PURE__ */ jsx(FillHeightStyles, {}), /* @__PURE__ */ jsx(Picker, {
+					variant: "list",
+					multiple: true,
+					cutoff: true,
+					ocelId,
+					ocelVersion: "original",
+					value: selected,
+					onChange: (next) => field.onChange(isEvents ? {
+						type: "activity",
+						event_types: next,
+						mode: "include"
+					} : {
+						type: "object_type",
+						object_types: next,
+						mode: "include"
+					})
+				})]
+			});
+		}
+	});
 };
 //#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.",
+		description: "Filters the event log by activity (the event type). Only events of the selected activities are kept. The list shows how many events exist per activity to help you decide what to keep.",
 		ViewComponent: EntityFilter("events"),
 		generateDefault: () => [{
 			type: "activity",
 			event_types: [],
-			mode: "exclude"
+			mode: "include"
 		}],
 		cleanUpFilters: (filter) => {
 			if (!filter[0] || filter[0].event_types.length === 0) return [];
@@ -893,12 +804,12 @@ const FILTER_MAP = {
 	},
 	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.",
+		description: "Filters the log by object type. Only objects of the selected types are kept. The list 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"
+			mode: "include"
 		}],
 		cleanUpFilters: (filter) => {
 			if (!filter[0] || filter[0].object_types.length === 0) return [];
@@ -912,12 +823,9 @@ const FILTER_MAP = {
 	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 grouped = {};
+	for (const filter of currentFilters) grouped[filter.type] = [...grouped[filter.type] ?? [], filter];
+	const groupedFilter = grouped;
 	const missingFilterKeys = Object.keys(FILTER_MAP).filter((key) => !(key in groupedFilter));
 	return {
 		...groupedFilter,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ocelescope/filter",
   "type": "module",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "A module for basic filtering of OCELs",
   "author": "Görkem-Emre Öztürk <goerkem.oeztuerk@rwth-aachen.de>",
   "license": "MIT",
@@ -28,34 +28,36 @@
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^3.0.0",
-    "@mantine/charts": "^9.5.1",
-    "@mantine/core": "^9.5.1",
-    "@mantine/dates": "^9.5.1",
-    "@mantine/hooks": "^9.5.1",
-    "@mantine/notifications": "^9.5.1",
-    "@ocelescope/api-base": "^0.10.0",
-    "@ocelescope/api-client": "^0.10.0",
-    "@ocelescope/core": "^0.10.0",
-    "@tanstack/react-query": "^5.90.21",
+    "@mantine/core": "^9.7.2",
+    "@mantine/dates": "^9.7.2",
+    "@mantine/hooks": "^9.7.2",
+    "@mantine/notifications": "^9.7.2",
+    "@ocelescope/api-base": "^0.10.2",
+    "@ocelescope/api-client": "^0.10.2",
+    "@ocelescope/core": "^0.10.2",
+    "@tanstack/react-query": "^5.104.2",
     "axios": "^1.20.0",
     "dayjs": "^1.11.23",
-    "lucide-react": "^1.0.0",
+    "echarts": "^6.1.0",
+    "echarts-for-react": "^3.0.6",
+    "lucide-react": "^1.56.0",
     "mantine-datatable": "^9.4.0",
-    "next": "16.3.6",
+    "next": "16.4.0",
     "object-hash": "^3.0.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
-    "react-hook-form": "^7.71.2",
-    "recharts": "^3.2.1"
+    "react-hook-form": "^7.90.0"
   },
   "devDependencies": {
-    "@mantine/notifications": "^9.5.1",
-    "@ocelescope/api-config": "^0.10.0",
+    "@mantine/notifications": "^9.7.2",
+    "@ocelescope/api-config": "^0.10.2",
     "@types/node": "^26.6.1",
     "@types/object-hash": "^3.0.6",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "tsdown": "^0.23.0",
+    "echarts": "^6.1.0",
+    "echarts-for-react": "^3.0.6",
+    "tsdown": "^0.23.1",
     "typescript": "^6.0.3"
   },
   "scripts": {