@ocelescope/exploration 0.8.0

package/dist/Dashboard-BQ_EzP8N.js

@@ -0,0 +1,1292 @@
+import { ActivityPicker, EventAttributePicker, LineChart, ObjectAttributePicker, ObjectPicker, ObjectTypePicker, OcelChart, useCurrentOcel, useOcelQuery } from "@ocelescope/core";
+import { ChartNoAxesCombinedIcon, Clock3Icon, Code2Icon, GitBranchIcon, InfoIcon, PlusIcon, SearchIcon, Settings2Icon, ShapesIcon, SlidersHorizontalIcon, Trash2Icon } from "lucide-react";
+import { ActionIcon, Alert, Badge, Button, Code, Container, Divider, Group, HoverCard, Modal, MultiSelect, NumberInput, Paper, ScrollArea, SegmentedControl, Select, SimpleGrid, Stack, Text, TextInput, Textarea, ThemeIcon, Title, Tooltip, UnstyledButton } from "@mantine/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { AsyncBoundary, EmptyState, ViewerExportFrame, colorForKey } from "@r4pm/components";
+import { ValueType, useEventAttributes, useObjectAttributes } from "@ocelescope/api-base";
+//#region src/analyses.ts
+const ident = (name) => `"${String(name ?? "").replaceAll("\"", "\"\"")}"`;
+const lit = (value) => `'${String(value ?? "").replaceAll("'", "''")}'`;
+const int = (value, fallback) => Number.isFinite(Number(value)) ? Math.trunc(Number(value)) : fallback;
+const list = (value) => Array.isArray(value) ? value.map(String) : value == null ? [] : [String(value)];
+const activityFilter = (value, column = "activity") => {
+	const selected = list(value);
+	return selected.length === 0 ? "TRUE" : `${column} IN (${selected.map(lit).join(", ")})`;
+};
+/** Every event-object relation, once, with its event and object described.
+* The joins drop relations whose event or object is missing from the log. */
+const REL = `rel AS (
+    SELECT DISTINCT r."ocel:eid" AS eid, r."ocel:oid" AS oid,
+           e."ocel:activity" AS activity, e."ocel:timestamp" AS ts, o."ocel:type" AS type
+    FROM e2o r JOIN events e USING ("ocel:eid") JOIN objects o USING ("ocel:oid")
+  )`;
+const SECONDS = {
+	seconds: 1,
+	minutes: 60,
+	hours: 3600,
+	days: 86400
+};
+/**
+* Value counts, most frequent first, with the tail folded into one bar.
+*
+* `source` selects a single column named `value`, one row per member of the
+* population - so missing values can be counted rather than quietly dropped.
+*/
+const counts = (source, limit = 25) => `WITH raw AS (${source}),
+  counted AS (
+    SELECT value, count(*) AS count FROM raw WHERE value IS NOT NULL GROUP BY 1
+  ),
+  ranked AS (
+    SELECT *, row_number() OVER (ORDER BY count DESC, value) AS rank FROM counted
+  )
+  SELECT CAST(value AS VARCHAR) AS bucket, count, rank FROM ranked WHERE rank <= ${limit}
+  UNION ALL
+  SELECT 'Other (' || count(*) || ')', sum(count), ${limit} + 1
+  FROM ranked WHERE rank > ${limit} GROUP BY ALL HAVING count(*) > 0
+  UNION ALL
+  SELECT 'Missing', count(*), ${limit} + 2
+  FROM raw WHERE value IS NULL GROUP BY ALL HAVING count(*) > 0
+  ORDER BY rank`;
+/**
+* A histogram of `source`'s `value` column.
+*
+* Bin width is Freedman-Diaconis (2·IQR/∛n), with Sturges' rule where the
+* interquartile range is zero. Values beyond Tukey's outer fences are counted
+* in a `<` and a `>` bar instead of stretching the bins, which is what left a
+* long-tailed distribution as one tall bar and a row of empty ones.
+*/
+const histogram = (source) => `WITH raw AS (${source}),
+  spread AS (
+    SELECT quantile_cont(value, 0.25) AS q1, quantile_cont(value, 0.75) AS q3 FROM raw
+  ),
+  kept AS (
+    SELECT value FROM raw, spread
+    WHERE q3 = q1 OR value BETWEEN q1 - 3 * (q3 - q1) AND q3 + 3 * (q3 - q1)
+  ),
+  shape AS (
+    SELECT count(*) AS n, min(value) AS lo, max(value) AS hi,
+           quantile_cont(value, 0.25) AS q1, quantile_cont(value, 0.75) AS q3
+    FROM kept
+  ),
+  plan AS (
+    SELECT n, lo, hi, (hi - lo) / bins AS width, bins FROM (
+      SELECT *, least(200, greatest(1, ceil((hi - lo) / nullif(
+          CASE WHEN q3 > q1 THEN 2 * (q3 - q1) / pow(n, 1.0 / 3)
+               ELSE (hi - lo) / (ceil(log2(greatest(n, 2))) + 1) END, 0))::BIGINT)) AS bins
+      FROM shape
+    )
+  ),
+  binned AS (
+    SELECT lo + width * least(floor((value - lo) / nullif(width, 0)), bins - 1) AS start, width
+    FROM raw, plan WHERE value BETWEEN lo AND hi
+  )
+  SELECT format('{:.6g} – {:.6g}', start, start + width) AS bucket, count(*) AS count, start
+  FROM binned GROUP BY ALL
+  UNION ALL
+  SELECT format('< {:.6g}', lo), count(*), -1e308 FROM raw, plan WHERE value < lo GROUP BY ALL
+  UNION ALL
+  SELECT format('> {:.6g}', hi), count(*), 1e308 FROM raw, plan WHERE value > hi GROUP BY ALL
+  ORDER BY start`;
+/** Value counts or a histogram, whichever the attribute deserves. */
+const distribution = (source, isNumeric) => isNumeric ? histogram(source) : counts(source);
+const DISTRIBUTION_CHART = {
+	x: "bucket",
+	y: "count",
+	types: ["bar", "pie"]
+};
+const analyses = [
+	{
+		id: "custom-sql-chart",
+		label: "Custom SQL chart",
+		category: "Custom",
+		question: "Run your own SQL query and choose exactly how its result is plotted.",
+		method: "The query runs read-only against the current OCEL's DuckDB tables. Its returned columns are mapped directly to the selected axes and optional series grouping.",
+		params: [
+			{
+				name: "sql",
+				label: "SQL query",
+				kind: "sql"
+			},
+			{
+				name: "plot_type",
+				label: "Plot type",
+				kind: "choice",
+				options: [
+					"bar",
+					"line",
+					"area",
+					"scatter",
+					"pie"
+				],
+				default: "bar"
+			},
+			{
+				name: "x",
+				label: "X axis",
+				kind: "column"
+			},
+			{
+				name: "y",
+				label: "Y axis",
+				kind: "columns"
+			},
+			{
+				name: "series",
+				label: "Series (optional)",
+				kind: "column",
+				required: false
+			},
+			{
+				name: "bar_mode",
+				label: "Bar mode",
+				kind: "choice",
+				options: ["grouped", "stacked"],
+				default: "grouped",
+				required: false
+			},
+			{
+				name: "axis_mode",
+				label: "Line axes",
+				kind: "choice",
+				options: ["shared", "independent"],
+				default: "shared",
+				required: false
+			}
+		],
+		sql: ({ sql }) => String(sql ?? ""),
+		chart: ({ plot_type, x, y, series, bar_mode, axis_mode }) => ({
+			type: [
+				"bar",
+				"line",
+				"area",
+				"scatter",
+				"pie"
+			].includes(String(plot_type)) ? String(plot_type) : "bar",
+			x: String(x ?? ""),
+			y: Array.isArray(y) ? y.map(String) : String(y ?? ""),
+			...series && { series: String(series) },
+			stacked: bar_mode === "stacked",
+			yAxes: axis_mode === "independent" ? "independent" : "shared"
+		}),
+		view: "custom-chart"
+	},
+	{
+		id: "total-object-involvement",
+		label: "Total objects per event",
+		category: "Relationships",
+		question: "How many distinct objects does an event involve, and which activities are the events of?",
+		method: "Each event is joined to its unique event–object relations. Events are grouped by their number of distinct objects and activity; the bar height is the number of events in each group.",
+		params: [],
+		sql: () => `WITH per_event AS (
+    SELECT e."ocel:activity" AS activity, count(DISTINCT o."ocel:oid") AS objects
+    FROM events e
+    LEFT JOIN e2o r USING ("ocel:eid")
+    LEFT JOIN objects o USING ("ocel:oid")
+    GROUP BY e."ocel:eid", e."ocel:activity"
+  )
+  SELECT objects, activity, count(*) AS events FROM per_event GROUP BY ALL ORDER BY objects`,
+		chart: () => ({
+			x: "objects",
+			y: "events",
+			series: "activity",
+			stacked: true,
+			colorScope: "activity"
+		})
+	},
+	{
+		id: "object-counts-per-event",
+		label: "Objects per type in an event",
+		category: "Relationships",
+		question: "How many distinct objects of each type take part in an event of an activity?",
+		method: "Unique event–object relations are counted per event and object type. The rings show activity, object type, and the exact number of involved objects; segment size is the number of matching events.",
+		params: [{
+			name: "activities",
+			label: "Activities",
+			kind: "activities",
+			required: false,
+			default: []
+		}],
+		sql: ({ activities }) => `WITH ${REL},
+  per_event AS (
+    SELECT activity, type, eid, count(DISTINCT oid) AS objects
+    FROM rel WHERE ${activityFilter(activities)} GROUP BY ALL
+  )
+  SELECT activity, type AS object_type, objects, count(*) AS events
+  FROM per_event GROUP BY ALL ORDER BY ALL`,
+		chart: () => ({
+			type: "sunburst",
+			types: ["sunburst", "bar"],
+			path: [
+				"activity",
+				"object_type",
+				"objects"
+			],
+			x: "object_type",
+			y: "events",
+			series: "objects"
+		})
+	},
+	{
+		id: "object-type-combinations",
+		label: "Object-type combinations",
+		category: "Relationships",
+		question: "Which exact sets of object types appear together in an event, and in which activities?",
+		method: "For every event, duplicate relations are removed and the involved object types are sorted into an exact set. The most frequent sets become bars, split by the events' activities.",
+		params: [{
+			name: "activities",
+			label: "Activities",
+			kind: "activities",
+			required: false,
+			default: []
+		}, {
+			name: "limit",
+			label: "Combinations",
+			kind: "number",
+			default: 15,
+			min: 1,
+			max: 50
+		}],
+		sql: ({ activities, limit }) => `WITH ${REL},
+  sets AS (
+    SELECT e."ocel:eid" AS eid, e."ocel:activity" AS activity,
+           coalesce(list_sort(list(DISTINCT rel.type)), []::VARCHAR[]) AS types
+    FROM events e LEFT JOIN rel ON rel.eid = e."ocel:eid"
+    WHERE ${activityFilter(activities, "e.\"ocel:activity\"")}
+    GROUP BY ALL
+  ),
+  ranked AS (
+    SELECT types, row_number() OVER (ORDER BY count(*) DESC, types) AS rank
+    FROM sets GROUP BY types
+  )
+  SELECT coalesce(nullif(array_to_string(types, ' + '), ''), 'no objects') AS combination,
+         activity, count(*) AS events, rank
+  FROM sets JOIN ranked USING (types)
+  WHERE rank <= ${int(limit, 15)}
+  GROUP BY ALL ORDER BY rank DESC`,
+		chart: () => ({
+			x: "combination",
+			y: "events",
+			series: "activity",
+			stacked: true,
+			horizontal: true,
+			colorScope: "activity"
+		})
+	},
+	{
+		id: "activity-execution-frequency",
+		label: "Activity execution frequency",
+		category: "Behaviour",
+		question: "How many first, second, third, and later executions of each activity occur for objects of a type?",
+		method: "Events are ranked chronologically within every object–activity pair. Each stacked layer counts event–object pairs at that execution number, revealing repeated activity executions directly.",
+		params: [{
+			name: "object_type",
+			label: "Object type",
+			kind: "objectType"
+		}],
+		sql: ({ object_type }) => `WITH ${REL},
+  ranked AS (
+    SELECT oid, activity,
+           row_number() OVER (PARTITION BY oid, activity ORDER BY ts, eid) AS execution
+    FROM rel WHERE type = ${lit(object_type)}
+  ),
+  counted AS (
+    SELECT activity, execution, count(*) AS pairs
+    FROM ranked GROUP BY activity, execution
+  )
+  SELECT activity, CAST(execution AS VARCHAR) AS execution, pairs
+  FROM counted ORDER BY counted.execution, activity`,
+		chart: () => ({
+			x: "activity",
+			y: "pairs",
+			series: "execution",
+			stacked: true,
+			colorScope: "execution"
+		})
+	},
+	{
+		id: "object-activity-execution-distribution",
+		label: "Execution counts per object",
+		category: "Behaviour",
+		question: "For activities that objects repeat, how many objects executed one exactly n times?",
+		method: "Unique event–object relations are counted for each object and activity. Activities that never repeat are removed; ring size then represents the number of objects with each exact execution count.",
+		params: [{
+			name: "object_type",
+			label: "Object type",
+			kind: "objectType"
+		}],
+		sql: ({ object_type }) => `WITH ${REL},
+  executions AS (
+    SELECT oid, activity, count(*) AS runs
+    FROM rel WHERE type = ${lit(object_type)} GROUP BY ALL
+  ),
+  repeated AS (
+    SELECT * FROM executions QUALIFY max(runs) OVER (PARTITION BY activity) > 1
+  )
+  SELECT activity, runs AS executions, count(*) AS objects
+  FROM repeated GROUP BY ALL ORDER BY ALL`,
+		chart: () => ({
+			type: "sunburst",
+			types: ["sunburst", "bar"],
+			path: ["activity", "executions"],
+			x: "executions",
+			y: "objects",
+			series: "activity",
+			colorScope: "activity"
+		})
+	},
+	{
+		id: "object-involvement-distribution",
+		label: "Objects of one type per event",
+		category: "Relationships",
+		question: "Across the events of an activity, how much does the number of involved objects of a type vary?",
+		method: "For each event of the selected activity, unique related objects of the selected type are counted—including zero. The chart shows the frequency of every resulting count.",
+		params: [{
+			name: "activity",
+			label: "Activity",
+			kind: "activity"
+		}, {
+			name: "object_type",
+			label: "Object type",
+			kind: "objectType"
+		}],
+		sql: ({ activity, object_type }) => `WITH ${REL},
+  per_event AS (
+    SELECT count(DISTINCT rel.oid) AS objects
+    FROM events e
+    LEFT JOIN rel ON rel.eid = e."ocel:eid" AND rel.type = ${lit(object_type)}
+    WHERE e."ocel:activity" = ${lit(activity)}
+    GROUP BY e."ocel:eid"
+  )
+  SELECT objects, count(*) AS events FROM per_event GROUP BY 1 ORDER BY 1`,
+		chart: () => ({
+			x: "objects",
+			y: "events",
+			types: ["bar", "pie"]
+		})
+	},
+	{
+		id: "event-attribute-distribution",
+		label: "Event attribute distribution",
+		category: "Attributes",
+		question: "How are an attribute's values distributed over an activity's events?",
+		method: "The selected attribute is read once per event of the chosen activity. Numeric values use robust histogram bins; categorical values use frequency counts. Missing values are retained explicitly.",
+		params: [{
+			name: "activity",
+			label: "Activity",
+			kind: "activity"
+		}, {
+			name: "attribute",
+			label: "Attribute",
+			kind: "eventAttribute"
+		}],
+		sql: ({ activity, attribute }, numeric) => distribution(`SELECT ${ident(attribute)} AS value FROM events
+       WHERE "ocel:activity" = ${lit(activity)}`, numeric(String(attribute))),
+		chart: () => DISTRIBUTION_CHART
+	},
+	{
+		id: "object-attribute-distribution",
+		label: "Object attribute distribution",
+		category: "Attributes",
+		question: "What values does an object attribute hold at the moments objects take part in an activity?",
+		method: "For every matching event–object relation, the latest attribute change at or before the event is selected. Those point-in-time values are then binned or counted, with missing values retained.",
+		params: [
+			{
+				name: "activity",
+				label: "Activity",
+				kind: "activity"
+			},
+			{
+				name: "object_type",
+				label: "Object type",
+				kind: "objectType"
+			},
+			{
+				name: "attribute",
+				label: "Attribute",
+				kind: "objectAttribute"
+			}
+		],
+		sql: ({ activity, object_type, attribute }, numeric) => distribution(`WITH ${REL},
+    changes AS (
+      SELECT "ocel:oid" AS oid, "ocel:timestamp" AS ts, ${ident(attribute)} AS value
+      FROM object_changes
+      WHERE "ocel:field" = ${lit(attribute)} AND ${ident(attribute)} IS NOT NULL
+    ),
+    pairs AS (
+      SELECT oid, ts FROM rel
+      WHERE activity = ${lit(activity)} AND type = ${lit(object_type)}
+    )
+    SELECT changes.value FROM pairs
+    ASOF LEFT JOIN changes ON pairs.oid = changes.oid AND pairs.ts >= changes.ts`, numeric(String(attribute))),
+		chart: () => DISTRIBUTION_CHART
+	},
+	{
+		id: "time-between-activities",
+		label: "Time between activities",
+		category: "Time",
+		question: "How long does an object take to get from one activity to the next one?",
+		method: "Each object's events are ordered in time and reduced to the two selected activities. Durations are measured only where the source is directly followed by the target in that reduced trace, then robustly binned.",
+		params: [
+			{
+				name: "source",
+				label: "From",
+				kind: "activity"
+			},
+			{
+				name: "target",
+				label: "To",
+				kind: "activity"
+			},
+			{
+				name: "object_type",
+				label: "Object type (optional)",
+				kind: "objectType",
+				required: false
+			},
+			{
+				name: "unit",
+				label: "Unit",
+				kind: "choice",
+				options: [
+					"hours",
+					"days",
+					"minutes",
+					"seconds"
+				]
+			}
+		],
+		sql: ({ source, target, object_type, unit }) => histogram(`WITH ${REL},
+    trace AS (
+      SELECT oid, activity, ts,
+             lead(activity) OVER w AS next_activity, lead(ts) OVER w AS next_ts
+      FROM rel
+      WHERE ${object_type == null ? "TRUE" : `type = ${lit(object_type)}`}
+        AND activity IN (${lit(source)}, ${lit(target)})
+      WINDOW w AS (PARTITION BY oid ORDER BY ts, eid)
+    )
+    SELECT epoch(next_ts - ts) / ${SECONDS[String(unit)] ?? 3600} AS value
+    FROM trace WHERE activity = ${lit(source)} AND next_activity = ${lit(target)}`),
+		chart: ({ unit }) => ({
+			x: "bucket",
+			y: "count",
+			types: ["bar", "pie"],
+			title: `Time in ${unit ?? "hours"}`
+		})
+	},
+	{
+		id: "object-attribute-timeline",
+		label: "Attribute development of one object",
+		category: "Attributes",
+		question: "How did one object's attributes change over its lifetime?",
+		method: "The object's initial values and change records are ordered on one shared timeline. Each attribute is forward-held until its next change and receives its own y-axis so values with different scales remain legible.",
+		params: [{
+			name: "object",
+			label: "Object",
+			kind: "object"
+		}],
+		sql: ({ object }) => `WITH text AS (
+    SELECT "ocel:timestamp" AS time, "ocel:field" AS field,
+           CAST(COLUMNS(* EXCLUDE ("ocel:oid", "ocel:timestamp", "ocel:field")) AS VARCHAR)
+    FROM object_changes WHERE "ocel:oid" = ${lit(object)}
+  ),
+  born AS (
+    SELECT min(e."ocel:timestamp") AS time FROM e2o r
+    JOIN events e USING ("ocel:eid") WHERE r."ocel:oid" = ${lit(object)}
+  )
+  SELECT greatest(time, coalesce((SELECT time FROM born), time)) AS time, attribute, value
+  FROM (
+    UNPIVOT text ON COLUMNS(* EXCLUDE (time, field)) INTO NAME attribute VALUE value
+  ) WHERE attribute = field ORDER BY time`,
+		chart: () => ({}),
+		view: "attribute-changes"
+	}
+];
+const findAnalysis = (id) => analyses.find((analysis) => analysis.id === id);
+/** Whether every required parameter has a value. */
+const isConfigured = (analysis, values) => analysis.params.every((param) => param.required === false || hasValue$1(values[param.name]));
+const hasValue$1 = (value) => value != null && (!Array.isArray(value) || value.length > 0);
+//#endregion
+//#region src/Controls.tsx
+/**
+* The parameter inputs a card is configured with.
+*
+* Anything chosen out of the log - an activity, an object type, an attribute,
+* an object - is one of core's pickers, so choosing here reads the same
+* endpoints and looks the same as on every other page. The rest is Mantine.
+*/
+/** The value types a chart bins; the rest it counts by value. */
+const BINNED = [ValueType.int, ValueType.float];
+/**
+* Whether a card's attribute holds numbers, which is what decides bins versus
+* value counts. A card names one attribute, of its activity or of its object
+* type, so both lists are asked and whichever holds it answers.
+*/
+const useNumeric = (values) => {
+	const { id } = useCurrentOcel();
+	const activity = values.activity == null ? [] : Array.isArray(values.activity) ? values.activity.map(String) : [String(values.activity)];
+	const type = values.object_type == null ? [] : [String(values.object_type)];
+	const events = useEventAttributes(id, { names: activity }, { query: { enabled: id != null && activity.length > 0 } });
+	const objects = useObjectAttributes(id, { names: type }, { query: { enabled: id != null && type.length > 0 } });
+	return (attribute) => [...events.data ?? [], ...objects.data ?? []].some((candidate) => candidate.name === attribute && BINNED.includes(candidate.type));
+};
+const Control = ({ param, values, onChange }) => {
+	const value = values[param.name];
+	if (param.kind === "number") return /* @__PURE__ */ jsx(NumberInput, {
+		size: "xs",
+		label: param.label,
+		min: param.min,
+		max: param.max,
+		value: Number(value ?? param.default ?? 0),
+		onChange: (next) => onChange(typeof next === "number" ? next : void 0)
+	});
+	if (param.kind === "activities") {
+		const selected = Array.isArray(value) ? value.map(String) : [];
+		return /* @__PURE__ */ jsxs(Stack, {
+			gap: 4,
+			children: [/* @__PURE__ */ jsx(ActivityPicker, {
+				label: param.label,
+				multiple: true,
+				value: selected,
+				onChange
+			}), /* @__PURE__ */ jsx(Text, {
+				size: "xs",
+				c: "dimmed",
+				children: "Leave empty to include all activities."
+			})]
+		});
+	}
+	if (param.kind === "choice") return /* @__PURE__ */ jsx(Select, {
+		size: "xs",
+		label: param.label,
+		data: [...param.options ?? []],
+		value: String(value ?? param.options?.[0] ?? ""),
+		onChange: (next) => onChange(next ?? void 0),
+		allowDeselect: false
+	});
+	if (param.kind === "text" || param.kind === "column") return /* @__PURE__ */ jsx(TextInput, {
+		label: param.label,
+		value: value == null ? "" : String(value),
+		onChange: (event) => onChange(event.currentTarget.value || void 0)
+	});
+	if (param.kind === "sql") return /* @__PURE__ */ jsx(Textarea, {
+		label: param.label,
+		autosize: true,
+		minRows: 6,
+		value: value == null ? "" : String(value),
+		onChange: (event) => onChange(event.currentTarget.value || void 0),
+		styles: { input: {
+			fontFamily: "monospace",
+			fontSize: 12
+		} }
+	});
+	if (param.kind === "columns") return null;
+	const chosen = {
+		value: value == null ? null : String(value),
+		onChange
+	};
+	if (param.kind === "object") return /* @__PURE__ */ jsx(ObjectPicker, {
+		label: param.label,
+		...chosen
+	});
+	if (param.kind === "eventAttribute") return /* @__PURE__ */ jsx(EventAttributePicker, {
+		label: param.label,
+		activity: values.activity == null ? void 0 : String(values.activity),
+		disabled: values.activity == null,
+		...chosen
+	});
+	if (param.kind === "objectAttribute") return /* @__PURE__ */ jsx(ObjectAttributePicker, {
+		label: param.label,
+		objectType: values.object_type == null ? void 0 : String(values.object_type),
+		disabled: values.object_type == null,
+		...chosen
+	});
+	if (param.kind === "activity") return /* @__PURE__ */ jsx(ActivityPicker, {
+		label: param.label,
+		...chosen
+	});
+	if (param.kind === "objectType") return /* @__PURE__ */ jsx(ObjectTypePicker, {
+		label: param.label,
+		...chosen
+	});
+	return null;
+};
+//#endregion
+//#region src/Card.tsx
+/** One analysis on the dashboard: its parameters, and the chart they produce. */
+const AnalysisCard = ({ analysis, values, onChange, onRemove, configurationOpened, onConfigure, onCloseConfiguration }) => {
+	const numeric = useNumeric(values);
+	const configured = isConfigured(analysis, values);
+	const setParam = (param, value) => {
+		const next = {
+			...values,
+			[param.name]: value
+		};
+		if (param.name === "activity" && param.kind === "activity") {
+			const dependent = analysis.params.find((candidate) => candidate.kind === "eventAttribute");
+			if (dependent) next[dependent.name] = void 0;
+		}
+		if (param.name === "object_type") {
+			const dependent = analysis.params.find((candidate) => candidate.kind === "objectAttribute");
+			if (dependent) next[dependent.name] = void 0;
+		}
+		onChange(next);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Paper, {
+		withBorder: true,
+		p: "md",
+		radius: "lg",
+		children: [/* @__PURE__ */ jsxs(Group, {
+			align: "flex-start",
+			justify: "space-between",
+			gap: "md",
+			wrap: "nowrap",
+			children: [/* @__PURE__ */ jsxs(Group, {
+				align: "flex-start",
+				gap: "sm",
+				wrap: "nowrap",
+				children: [/* @__PURE__ */ jsx(ThemeIcon, {
+					variant: "light",
+					color: "gray",
+					radius: "md",
+					mt: 1,
+					children: /* @__PURE__ */ jsx(ChartNoAxesCombinedIcon, { size: 17 })
+				}), /* @__PURE__ */ jsxs(Stack, {
+					gap: 4,
+					children: [
+						/* @__PURE__ */ jsxs(Group, {
+							gap: "xs",
+							children: [
+								/* @__PURE__ */ jsx(Text, {
+									fw: 600,
+									size: "sm",
+									children: analysis.label
+								}),
+								/* @__PURE__ */ jsx(Badge, {
+									variant: "light",
+									color: "gray",
+									size: "xs",
+									children: analysis.category
+								}),
+								!configured && /* @__PURE__ */ jsx(Badge, {
+									variant: "light",
+									color: "orange",
+									size: "xs",
+									children: "Configure first"
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx(Text, {
+							c: "dimmed",
+							size: "xs",
+							lineClamp: 2,
+							children: analysis.question
+						}),
+						configured && analysis.params.length > 0 && /* @__PURE__ */ jsx(Group, {
+							gap: 4,
+							children: summary(analysis, values)
+						})
+					]
+				})]
+			}), /* @__PURE__ */ jsxs(Group, {
+				gap: 4,
+				wrap: "nowrap",
+				"data-export-ignore": true,
+				children: [
+					/* @__PURE__ */ jsxs(HoverCard, {
+						width: 340,
+						shadow: "md",
+						position: "bottom-end",
+						openDelay: 200,
+						children: [/* @__PURE__ */ jsx(HoverCard.Target, { children: /* @__PURE__ */ jsx(ActionIcon, {
+							variant: "subtle",
+							color: "gray",
+							"aria-label": `About ${analysis.label}`,
+							children: /* @__PURE__ */ jsx(InfoIcon, { size: 16 })
+						}) }), /* @__PURE__ */ jsx(HoverCard.Dropdown, { children: /* @__PURE__ */ jsxs(Stack, {
+							gap: "xs",
+							children: [
+								/* @__PURE__ */ jsx(Text, {
+									fw: 600,
+									size: "sm",
+									children: "What this shows"
+								}),
+								/* @__PURE__ */ jsx(Text, {
+									size: "sm",
+									children: analysis.question
+								}),
+								/* @__PURE__ */ jsx(Divider, {}),
+								/* @__PURE__ */ jsx(Text, {
+									fw: 600,
+									size: "sm",
+									children: "How it is calculated"
+								}),
+								/* @__PURE__ */ jsx(Text, {
+									size: "sm",
+									c: "dimmed",
+									children: analysis.method
+								})
+							]
+						}) })]
+					}),
+					analysis.params.length > 0 && /* @__PURE__ */ jsx(Tooltip, {
+						label: "Configure",
+						children: /* @__PURE__ */ jsx(ActionIcon, {
+							variant: configured ? "subtle" : "light",
+							color: configured ? "gray" : "blue",
+							"aria-label": `Configure ${analysis.label}`,
+							onClick: onConfigure,
+							children: /* @__PURE__ */ jsx(Settings2Icon, { size: 16 })
+						})
+					}),
+					/* @__PURE__ */ jsx(Tooltip, {
+						label: "Remove",
+						children: /* @__PURE__ */ jsx(ActionIcon, {
+							variant: "subtle",
+							color: "gray",
+							"aria-label": `Remove ${analysis.label}`,
+							onClick: onRemove,
+							children: /* @__PURE__ */ jsx(Trash2Icon, { size: 16 })
+						})
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsx(ViewerExportFrame, {
+			filename: analysis.id,
+			style: {
+				height: 340,
+				marginTop: 12
+			},
+			children: configured ? analysis.view === "attribute-changes" ? /* @__PURE__ */ jsx(Changes, {
+				analysis,
+				values
+			}) : /* @__PURE__ */ jsx(OcelChart, {
+				height: "100%",
+				sql: analysis.sql(values, numeric),
+				...analysis.chart(values)
+			}) : /* @__PURE__ */ jsx(EmptyState, {
+				title: "Choose what to analyze",
+				description: `Configure ${unset(analysis, values)} to create this visualization.`
+			})
+		})]
+	}), /* @__PURE__ */ jsx(Modal, {
+		opened: configurationOpened,
+		onClose: onCloseConfiguration,
+		title: `Configure ${analysis.label}`,
+		size: "lg",
+		centered: true,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: "md",
+			children: [
+				/* @__PURE__ */ jsx(Divider, {}),
+				/* @__PURE__ */ jsx(ScrollArea.Autosize, {
+					mah: "62vh",
+					type: "auto",
+					offsetScrollbars: true,
+					children: /* @__PURE__ */ jsx(Stack, {
+						gap: "md",
+						pr: "xs",
+						children: analysis.view === "custom-chart" ? /* @__PURE__ */ jsx(CustomChartControls, {
+							values,
+							onChange
+						}) : analysis.params.map((param) => /* @__PURE__ */ jsx(Control, {
+							param,
+							values,
+							onChange: (value) => setParam(param, value)
+						}, param.name))
+					})
+				}),
+				/* @__PURE__ */ jsxs(Group, {
+					justify: "space-between",
+					children: [/* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: configured ? "teal" : "dimmed",
+						children: configured ? "Ready—the visualization is updating with these choices." : `Still needed: ${unset(analysis, values)}.`
+					}), /* @__PURE__ */ jsx(Button, {
+						onClick: onCloseConfiguration,
+						children: "Done"
+					})]
+				})
+			]
+		})
+	})] });
+};
+/** The parameters still without a value, in words. */
+const unset = (analysis, values) => analysis.params.filter((param) => param.required !== false && !hasValue(values[param.name])).map((param) => param.label.toLowerCase()).join(", ");
+const hasValue = (value) => value != null && (!Array.isArray(value) || value.length > 0);
+const summary = (analysis, values) => analysis.params.filter((param) => param.kind !== "sql" && values[param.name] != null).slice(0, 3).map((param) => {
+	const value = values[param.name];
+	const text = Array.isArray(value) ? value.length === 0 ? "All" : value.length <= 2 ? value.join(", ") : `${value.length} selected` : String(value);
+	return /* @__PURE__ */ jsxs(Badge, {
+		variant: "outline",
+		color: "gray",
+		size: "xs",
+		children: [
+			param.label,
+			": ",
+			text
+		]
+	}, param.name);
+});
+const PLOT_TYPES = [
+	"bar",
+	"line",
+	"area",
+	"scatter",
+	"pie"
+];
+const CustomChartControls = ({ values, onChange }) => {
+	const appliedSql = String(values.sql ?? "");
+	const [draftSql, setDraftSql] = useState(appliedSql);
+	const query = useOcelQuery({
+		sql: appliedSql,
+		enabled: appliedSql.trim().length > 0
+	});
+	const columns = (query.data?.columns ?? []).map((column) => ({
+		value: column.name,
+		label: `${column.name} · ${column.type.toLowerCase()}`
+	}));
+	const y = Array.isArray(values.y) ? values.y.map(String) : values.y == null ? [] : [String(values.y)];
+	const applyQuery = () => {
+		const sql = draftSql.trim();
+		if (sql === appliedSql) {
+			query.refetch();
+			return;
+		}
+		onChange({
+			...values,
+			sql,
+			x: void 0,
+			y: void 0,
+			series: void 0
+		});
+	};
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: "md",
+		children: [
+			/* @__PURE__ */ jsxs(Stack, {
+				gap: 4,
+				children: [/* @__PURE__ */ jsx(Textarea, {
+					label: "SQL query",
+					description: /* @__PURE__ */ jsxs("span", { children: [
+						"Available tables: ",
+						/* @__PURE__ */ jsx(Code, { children: "events" }),
+						", ",
+						/* @__PURE__ */ jsx(Code, { children: "objects" }),
+						",",
+						" ",
+						/* @__PURE__ */ jsx(Code, { children: "e2o" }),
+						", ",
+						/* @__PURE__ */ jsx(Code, { children: "o2o" }),
+						", and",
+						" ",
+						/* @__PURE__ */ jsx(Code, { children: "object_changes" }),
+						"."
+					] }),
+					placeholder: "SELECT \"ocel:activity\" AS activity, count(*) AS events\nFROM events\nGROUP BY 1",
+					autosize: true,
+					minRows: 6,
+					maxRows: 14,
+					value: draftSql,
+					onChange: (event) => setDraftSql(event.currentTarget.value),
+					styles: { input: {
+						fontFamily: "monospace",
+						fontSize: 12
+					} }
+				}), /* @__PURE__ */ jsx(Group, {
+					justify: "flex-end",
+					children: /* @__PURE__ */ jsx(Button, {
+						size: "xs",
+						variant: "light",
+						loading: query.isFetching,
+						disabled: draftSql.trim().length === 0,
+						onClick: applyQuery,
+						children: columns.length > 0 ? "Reload columns" : "Load columns"
+					})
+				})]
+			}),
+			query.isError && /* @__PURE__ */ jsx(Alert, {
+				color: "red",
+				title: "The query could not be loaded",
+				children: query.error instanceof Error ? query.error.message : "Check the SQL statement and try again."
+			}),
+			columns.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(Divider, {
+					label: "Plot",
+					labelPosition: "left"
+				}),
+				/* @__PURE__ */ jsx(Select, {
+					label: "Plot type",
+					data: PLOT_TYPES,
+					value: String(values.plot_type ?? "bar"),
+					allowDeselect: false,
+					onChange: (plot_type) => onChange({
+						...values,
+						plot_type: plot_type ?? "bar"
+					})
+				}),
+				/* @__PURE__ */ jsxs(Group, {
+					grow: true,
+					align: "flex-start",
+					children: [/* @__PURE__ */ jsx(Select, {
+						label: "X axis",
+						data: columns,
+						value: values.x == null ? null : String(values.x),
+						onChange: (x) => onChange({
+							...values,
+							x: x ?? void 0
+						})
+					}), /* @__PURE__ */ jsx(MultiSelect, {
+						label: "Y axis",
+						data: columns,
+						value: y,
+						searchable: true,
+						onChange: (next) => onChange({
+							...values,
+							y: next
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsx(Select, {
+					label: "Series (optional)",
+					description: "Split rows into one trace per distinct value.",
+					data: columns,
+					value: values.series == null ? null : String(values.series),
+					clearable: true,
+					searchable: true,
+					onChange: (series) => onChange({
+						...values,
+						series: series ?? void 0
+					})
+				}),
+				values.plot_type === "bar" && /* @__PURE__ */ jsx(Select, {
+					label: "Bar mode",
+					data: ["grouped", "stacked"],
+					value: String(values.bar_mode ?? "grouped"),
+					allowDeselect: false,
+					onChange: (bar_mode) => onChange({
+						...values,
+						bar_mode: bar_mode ?? "grouped"
+					})
+				}),
+				values.plot_type === "line" && /* @__PURE__ */ jsx(Select, {
+					label: "Y-axis mode",
+					data: [{
+						value: "shared",
+						label: "Shared scale"
+					}, {
+						value: "independent",
+						label: "One scale per line"
+					}],
+					value: String(values.axis_mode ?? "shared"),
+					allowDeselect: false,
+					onChange: (axis_mode) => onChange({
+						...values,
+						axis_mode: axis_mode ?? "shared"
+					})
+				})
+			] })
+		]
+	});
+};
+/**
+* How one object's attributes changed. Every attribute keeps its own scale,
+* but all lines share the timeline and hover in one plot.
+*/
+const Changes = ({ analysis, values }) => {
+	const query = useOcelQuery({ sql: analysis.sql(values, () => false) });
+	return /* @__PURE__ */ jsx(AsyncBoundary, {
+		status: query,
+		isEmpty: (result) => result.rows.length === 0,
+		loadingLabel: "Querying the OCEL…",
+		errorTitle: "The query failed",
+		emptyState: {
+			title: "No changes",
+			description: "This object's attributes never change."
+		},
+		onRetry: () => void query.refetch(),
+		children: (result) => {
+			const rows = result.rows;
+			const times = rows.map((row) => row.time).sort();
+			const lifetime = [times[0], times[times.length - 1]];
+			return /* @__PURE__ */ jsx(LineChart, {
+				rows,
+				x: "time",
+				y: "value",
+				series: "attribute",
+				xRange: lifetime,
+				yAxes: "independent",
+				colorOf: (attribute) => colorForKey("attribute", attribute) ?? "#888888",
+				step: true
+			});
+		}
+	});
+};
+//#endregion
+//#region src/store.ts
+/** The dashboard a reader has built, kept per OCEL in browser storage. */
+const key = (ocelId) => `ocelescope:exploration:${ocelId}`;
+const useCards = (ocelId) => {
+	const [cards, setCards] = useState([]);
+	const [loaded, setLoaded] = useState(false);
+	useEffect(() => {
+		setLoaded(false);
+		setCards(read(ocelId));
+		setLoaded(true);
+	}, [ocelId]);
+	useEffect(() => {
+		if (!loaded) return;
+		try {
+			window.localStorage.setItem(key(ocelId), JSON.stringify(cards));
+		} catch {}
+	}, [
+		cards,
+		loaded,
+		ocelId
+	]);
+	return {
+		cards,
+		add: (analysis) => {
+			const id = globalThis.crypto.randomUUID();
+			setCards((current) => [...current, {
+				id,
+				analysis,
+				values: fixed(analysis)
+			}]);
+			return id;
+		},
+		update: (id, values) => setCards((current) => current.map((card) => card.id === id ? {
+			...card,
+			values
+		} : card)),
+		remove: (id) => setCards((current) => current.filter((card) => card.id !== id))
+	};
+};
+/**
+* A new card starts with nothing chosen: which activity or object type a chart
+* is about is the reader's question to ask, and guessing it for them either
+* shows an arbitrary one or, across all of them at once, an unreadable chart.
+*
+* Only settings that are not names from the log - a bin count, a time unit -
+* carry their built-in value.
+*/
+const fixed = (analysis) => Object.fromEntries((findAnalysis(analysis)?.params ?? []).map((param) => [param.name, param.default ?? param.options?.[0]]).filter(([, value]) => value != null));
+const read = (ocelId) => {
+	try {
+		const stored = JSON.parse(window.localStorage.getItem(key(ocelId)) ?? "[]");
+		return Array.isArray(stored) ? stored.filter((card) => findAnalysis(card?.analysis)) : [];
+	} catch {
+		return [];
+	}
+};
+//#endregion
+//#region src/Dashboard.tsx
+/** The exploration dashboard: choose a question, configure it, keep the result. */
+const Dashboard = ({ ocelId }) => {
+	const { cards, add, update, remove } = useCards(ocelId);
+	const [catalogOpen, setCatalogOpen] = useState(false);
+	const [configure, setConfigure] = useState();
+	const addAnalysis = (analysis) => {
+		const id = add(analysis);
+		setCatalogOpen(false);
+		setConfigure(id);
+	};
+	return /* @__PURE__ */ jsxs(Container, {
+		fluid: true,
+		px: {
+			base: "sm",
+			md: "lg"
+		},
+		py: "md",
+		children: [/* @__PURE__ */ jsxs(Stack, {
+			gap: "lg",
+			children: [/* @__PURE__ */ jsxs(Group, {
+				align: "center",
+				justify: "space-between",
+				wrap: "wrap",
+				children: [/* @__PURE__ */ jsx(Stack, {
+					gap: 2,
+					children: /* @__PURE__ */ jsxs(Group, {
+						gap: "xs",
+						children: [/* @__PURE__ */ jsx(Title, {
+							order: 2,
+							children: "Explore the log"
+						}), cards.length > 0 && /* @__PURE__ */ jsxs(Badge, {
+							variant: "light",
+							color: "gray",
+							radius: "sm",
+							children: [
+								cards.length,
+								" ",
+								cards.length === 1 ? "view" : "views"
+							]
+						})]
+					})
+				}), /* @__PURE__ */ jsx(Button, {
+					leftSection: /* @__PURE__ */ jsx(PlusIcon, { size: 16 }),
+					onClick: () => setCatalogOpen(true),
+					children: "Add visualization"
+				})]
+			}), /* @__PURE__ */ jsx(SimpleGrid, {
+				cols: {
+					base: 1,
+					xl: 2
+				},
+				spacing: "md",
+				children: cards.map((card) => {
+					const analysis = findAnalysis(card.analysis);
+					return analysis ? /* @__PURE__ */ jsx(AnalysisCard, {
+						analysis,
+						values: card.values,
+						onChange: (values) => update(card.id, values),
+						onRemove: () => remove(card.id),
+						configurationOpened: configure === card.id,
+						onConfigure: () => setConfigure(card.id),
+						onCloseConfiguration: () => setConfigure(void 0)
+					}, card.id) : null;
+				})
+			})]
+		}), /* @__PURE__ */ jsx(AnalysisCatalog, {
+			opened: catalogOpen,
+			onClose: () => setCatalogOpen(false),
+			onAdd: addAnalysis
+		})]
+	});
+};
+const categoryStyle = {
+	Behaviour: {
+		color: "violet",
+		icon: ShapesIcon
+	},
+	Relationships: {
+		color: "blue",
+		icon: GitBranchIcon
+	},
+	Attributes: {
+		color: "teal",
+		icon: SlidersHorizontalIcon
+	},
+	Time: {
+		color: "orange",
+		icon: Clock3Icon
+	},
+	Custom: {
+		color: "cyan",
+		icon: Code2Icon
+	}
+};
+const AnalysisCatalog = ({ opened, onClose, onAdd }) => {
+	const [query, setQuery] = useState("");
+	const [category, setCategory] = useState("All");
+	const categories = [...new Set(analyses.map((analysis) => analysis.category))];
+	const visible = useMemo(() => {
+		const needle = query.trim().toLocaleLowerCase();
+		return analyses.filter((analysis) => (category === "All" || analysis.category === category) && (!needle || `${analysis.label} ${analysis.question}`.toLocaleLowerCase().includes(needle)));
+	}, [category, query]);
+	return /* @__PURE__ */ jsx(Modal, {
+		opened,
+		onClose,
+		title: "Choose a visualization",
+		size: "xl",
+		centered: true,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: "md",
+			children: [
+				/* @__PURE__ */ jsxs(Group, {
+					align: "center",
+					wrap: "wrap",
+					children: [/* @__PURE__ */ jsx(TextInput, {
+						value: query,
+						onChange: (event) => setQuery(event.currentTarget.value),
+						placeholder: "Search analyses",
+						leftSection: /* @__PURE__ */ jsx(SearchIcon, { size: 15 }),
+						style: {
+							flex: 1,
+							minWidth: 220
+						}
+					}), /* @__PURE__ */ jsx(SegmentedControl, {
+						value: category,
+						onChange: setCategory,
+						data: ["All", ...categories]
+					})]
+				}),
+				/* @__PURE__ */ jsx(Divider, {}),
+				/* @__PURE__ */ jsx(ScrollArea.Autosize, {
+					mah: "62vh",
+					type: "auto",
+					offsetScrollbars: true,
+					children: visible.length > 0 ? /* @__PURE__ */ jsx(SimpleGrid, {
+						cols: {
+							base: 1,
+							sm: 2
+						},
+						spacing: "sm",
+						pr: "xs",
+						children: visible.map((analysis) => /* @__PURE__ */ jsx(CatalogItem, {
+							analysis,
+							onAdd: () => onAdd(analysis.id)
+						}, analysis.id))
+					}) : /* @__PURE__ */ jsx(Text, {
+						c: "dimmed",
+						ta: "center",
+						py: "xl",
+						children: "No visualization matches that search."
+					})
+				})
+			]
+		})
+	});
+};
+const CatalogItem = ({ analysis, onAdd }) => {
+	const visual = categoryStyle[analysis.category];
+	const Icon = visual.icon;
+	return /* @__PURE__ */ jsx(UnstyledButton, {
+		onClick: onAdd,
+		style: { height: "100%" },
+		children: /* @__PURE__ */ jsx(Paper, {
+			withBorder: true,
+			radius: "md",
+			p: "md",
+			h: "100%",
+			children: /* @__PURE__ */ jsxs(Stack, {
+				gap: "xs",
+				children: [
+					/* @__PURE__ */ jsxs(Group, {
+						justify: "space-between",
+						align: "flex-start",
+						wrap: "nowrap",
+						children: [/* @__PURE__ */ jsx(ThemeIcon, {
+							color: visual.color,
+							variant: "light",
+							radius: "md",
+							children: /* @__PURE__ */ jsx(Icon, { size: 17 })
+						}), /* @__PURE__ */ jsx(Badge, {
+							color: visual.color,
+							variant: "light",
+							size: "xs",
+							children: analysis.category
+						})]
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						fw: 600,
+						size: "sm",
+						children: analysis.label
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						c: "dimmed",
+						size: "xs",
+						lineClamp: 3,
+						children: analysis.question
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: analysis.params.length > 0 ? "dimmed" : "blue",
+						children: analysis.params.length > 0 ? `${analysis.params.length} configuration ${analysis.params.length === 1 ? "choice" : "choices"}` : "Ready to view"
+					})
+				]
+			})
+		})
+	});
+};
+//#endregion
+export { Dashboard };