@ocelescope/exploration 0.10.1 → 0.10.2

package/dist/{Dashboard-BQ_EzP8N.js → Dashboard-DlIf2ec5.js}

@@ -1,9 +1,9 @@
 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 { ChartNoAxesCombinedIcon, CheckIcon, Clock3Icon, Code2Icon, GitBranchIcon, InfoIcon, PlusIcon, SearchIcon, Settings2Icon, ShapesIcon, SlidersHorizontalIcon, Trash2Icon } from "lucide-react";
+import { ActionIcon, Alert, Badge, Box, Button, Center, Code, Container, Divider, Group, HoverCard, Input, 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 { AsyncBoundary, ViewerExportFrame } from "@r4pm/components";
 import { ValueType, useEventAttributes, useObjectAttributes } from "@ocelescope/api-base";
 //#region src/analyses.ts
 const ident = (name) => `"${String(name ?? "").replaceAll("\"", "\"\"")}"`;
@@ -48,15 +48,30 @@ const counts = (source, limit = 25) => `WITH raw AS (${source}),
   SELECT 'Missing', count(*), ${limit} + 2
   FROM raw WHERE value IS NULL GROUP BY ALL HAVING count(*) > 0
   ORDER BY rank`;
+/** The column a histogram's bins start in, named after what they measure so
+* the axis reads it - kept clear of the two columns beside it. */
+const binColumn = (measure) => {
+	const name = String(measure ?? "value");
+	return name === "count" || name === "bin_end" ? `${name} ` : name;
+};
+/** How to draw what `histogram` returns. */
+const histogramChart = (measure) => ({
+	type: "histogram",
+	x: binColumn(measure),
+	xEnd: "bin_end",
+	y: "count"
+});
 /**
-* A histogram of `source`'s `value` column.
+* A histogram of `source`'s `value` column: one row per bin, with its lower
+* edge in a column named after `measure`, its upper edge in `bin_end`.
 *
 * 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.
+* in two open-ended bins - no lower edge, or no upper one - 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}),
+const histogram = (source, measure) => `WITH raw AS (${source}),
   spread AS (
     SELECT quantile_cont(value, 0.25) AS q1, quantile_cont(value, 0.75) AS q3 FROM raw
   ),
@@ -81,16 +96,17 @@ const histogram = (source) => `WITH raw AS (${source}),
     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
+  SELECT start AS ${ident(binColumn(measure))}, start + width AS bin_end, count(*) AS count
   FROM binned GROUP BY ALL
   UNION ALL
-  SELECT format('< {:.6g}', lo), count(*), -1e308 FROM raw, plan WHERE value < lo GROUP BY ALL
+  SELECT NULL, lo, count(*) 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`;
+  SELECT hi, NULL, count(*) FROM raw, plan WHERE value > hi GROUP BY ALL
+  ORDER BY 1 NULLS FIRST`;
 /** Value counts or a histogram, whichever the attribute deserves. */
-const distribution = (source, isNumeric) => isNumeric ? histogram(source) : counts(source);
-const DISTRIBUTION_CHART = {
+const distribution = (source, attribute, isNumeric) => isNumeric ? histogram(source, attribute) : counts(source);
+/** How to draw what `distribution` returns. */
+const distributionChart = (attribute, isNumeric) => isNumeric ? histogramChart(attribute) : {
 	x: "bucket",
 	y: "count",
 	types: ["bar", "pie"]
@@ -133,7 +149,7 @@ const analyses = [
 			},
 			{
 				name: "series",
-				label: "Series (optional)",
+				label: "Series",
 				kind: "column",
 				required: false
 			},
@@ -381,8 +397,8 @@ const analyses = [
 			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
+       WHERE "ocel:activity" = ${lit(activity)}`, attribute, numeric(String(attribute))),
+		chart: ({ attribute }, numeric) => distributionChart(attribute, numeric(String(attribute)))
 	},
 	{
 		id: "object-attribute-distribution",
@@ -418,8 +434,8 @@ const analyses = [
       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
+    ASOF LEFT JOIN changes ON pairs.oid = changes.oid AND pairs.ts >= changes.ts`, attribute, numeric(String(attribute))),
+		chart: ({ attribute }, numeric) => distributionChart(attribute, numeric(String(attribute)))
 	},
 	{
 		id: "time-between-activities",
@@ -440,7 +456,7 @@ const analyses = [
 			},
 			{
 				name: "object_type",
-				label: "Object type (optional)",
+				label: "Object type",
 				kind: "objectType",
 				required: false
 			},
@@ -466,13 +482,8 @@ const analyses = [
       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"}`
-		})
+    FROM trace WHERE activity = ${lit(source)} AND next_activity = ${lit(target)}`, unit),
+		chart: ({ unit }) => histogramChart(unit)
 	},
 	{
 		id: "object-attribute-timeline",
@@ -503,9 +514,24 @@ const analyses = [
 	}
 ];
 const findAnalysis = (id) => analyses.find((analysis) => analysis.id === id);
+/**
+* A card's values, with every parameter the reader has not set at its
+* built-in value - so what a control shows is what the query runs with.
+*/
+const resolve = (analysis, values) => {
+	const resolved = {};
+	for (const param of analysis.params) {
+		const value = values[param.name] ?? param.default ?? param.options?.[0] ?? void 0;
+		if (value != null) resolved[param.name] = value;
+	}
+	return resolved;
+};
+const hasValue = (value) => value != null && (!Array.isArray(value) || value.length > 0);
 /** 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);
+const isConfigured = (analysis, values) => {
+	const resolved = resolve(analysis, values);
+	return analysis.params.every((param) => param.required === false || hasValue(resolved[param.name]));
+};
 //#endregion
 //#region src/Controls.tsx
 /**
@@ -530,69 +556,110 @@ const useNumeric = (values) => {
 	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 }) => {
+/** Whether a parameter narrows another: its choices depend on the activity. */
+const followsActivity = (analysis, param) => param.kind === "eventAttribute" || param.kind === "objectType" && param.required !== false && analysis.params.some((other) => other.name === "activity");
+/**
+* The parameters to clear when one changes, because what they offer depends
+* on it: an attribute on its activity or object type, an object type on the
+* activity it is narrowed to.
+*/
+const dependents = (analysis, changed) => {
+	const stale = (param) => changed.name === "activity" && followsActivity(analysis, param) || changed.name === "object_type" && param.kind === "objectAttribute";
+	const names = analysis.params.filter(stale).map((param) => param.name);
+	return changed.name === "activity" && names.includes("object_type") ? [...names, ...analysis.params.filter((param) => param.kind === "objectAttribute").map((param) => param.name)] : names;
+};
+/**
+* An analysis's parameters as numbered steps. A step shows a check once it
+* has a value; the next one to fill is highlighted, and optional ones are
+* dashed - so what is left to do is seen rather than read.
+*/
+const Fields = ({ analysis, values, onChange }) => {
+	const next = analysis.params.find((param) => param.required !== false && !hasValue(values[param.name]));
+	return /* @__PURE__ */ jsx(Stack, {
+		gap: "md",
+		children: analysis.params.map((param, index) => {
+			const done = hasValue(values[param.name]);
+			return /* @__PURE__ */ jsxs(Group, {
+				gap: "sm",
+				align: "flex-start",
+				wrap: "nowrap",
+				children: [/* @__PURE__ */ jsx(ThemeIcon, {
+					size: 22,
+					radius: "xl",
+					color: done ? "teal" : param === next ? "blue" : "gray",
+					variant: done || param === next ? "filled" : "outline",
+					style: {
+						fontSize: 11,
+						fontWeight: 600,
+						borderStyle: param.required === false ? "dashed" : void 0
+					},
+					children: done ? /* @__PURE__ */ jsx(CheckIcon, { size: 13 }) : index + 1
+				}), /* @__PURE__ */ jsx(Box, {
+					flex: 1,
+					miw: 0,
+					children: /* @__PURE__ */ jsx(Control, {
+						analysis,
+						param,
+						values,
+						onChange: (value) => onChange(param, value)
+					})
+				})]
+			}, param.name);
+		})
+	});
+};
+const Control = ({ analysis, param, values, onChange }) => {
 	const value = values[param.name];
+	const activity = typeof values.activity === "string" ? values.activity : void 0;
 	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),
+		value: Number(value ?? 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, {
+	if (param.kind === "choice") return /* @__PURE__ */ jsx(Input.Wrapper, {
 		label: param.label,
-		value: value == null ? "" : String(value),
-		onChange: (event) => onChange(event.currentTarget.value || void 0)
+		children: /* @__PURE__ */ jsx(SegmentedControl, {
+			fullWidth: true,
+			data: [...param.options ?? []],
+			value: String(value ?? ""),
+			onChange
+		})
 	});
-	if (param.kind === "sql") return /* @__PURE__ */ jsx(Textarea, {
+	if (param.kind === "activities") return /* @__PURE__ */ jsx(ActivityPicker, {
 		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
-		} }
+		placeholder: "All activities",
+		multiple: true,
+		value: Array.isArray(value) ? value.map(String) : [],
+		onChange
 	});
-	if (param.kind === "columns") return null;
 	const chosen = {
 		value: value == null ? null : String(value),
 		onChange
 	};
+	if (param.kind === "activity") return /* @__PURE__ */ jsx(ActivityPicker, {
+		label: param.label,
+		...chosen
+	});
+	if (param.kind === "objectType") {
+		const narrowed = followsActivity(analysis, param);
+		return /* @__PURE__ */ jsx(ObjectTypePicker, {
+			label: param.label,
+			activity: narrowed ? activity : void 0,
+			disabled: narrowed && activity === void 0,
+			...param.required === false && { placeholder: "All object types" },
+			...chosen
+		});
+	}
 	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,
+		activity,
+		disabled: activity === void 0,
 		...chosen
 	});
 	if (param.kind === "objectAttribute") return /* @__PURE__ */ jsx(ObjectAttributePicker, {
@@ -601,35 +668,21 @@ const Control = ({ param, values, onChange }) => {
 		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 AnalysisCard = ({ analysis, values: stored, onChange, onRemove, configurationOpened, onConfigure, onCloseConfiguration }) => {
+	const values = resolve(analysis, stored);
 	const numeric = useNumeric(values);
 	const configured = isConfigured(analysis, values);
 	const setParam = (param, value) => {
 		const next = {
-			...values,
+			...stored,
 			[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;
-		}
+		for (const name of dependents(analysis, param)) next[name] = void 0;
 		onChange(next);
 	};
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Paper, {
@@ -656,25 +709,16 @@ const AnalysisCard = ({ analysis, values, onChange, onRemove, configurationOpene
 					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"
-								})
-							]
+							children: [/* @__PURE__ */ jsx(Text, {
+								fw: 600,
+								size: "sm",
+								children: analysis.label
+							}), /* @__PURE__ */ jsx(Badge, {
+								variant: "light",
+								color: "gray",
+								size: "xs",
+								children: analysis.category
+							})]
 						}),
 						/* @__PURE__ */ jsx(Text, {
 							c: "dimmed",
@@ -763,57 +807,49 @@ const AnalysisCard = ({ analysis, values, onChange, onRemove, configurationOpene
 			}) : /* @__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.`
+				...analysis.chart(values, numeric)
+			}) : /* @__PURE__ */ jsx(Center, {
+				h: "100%",
+				"data-export-ignore": true,
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "light",
+					leftSection: /* @__PURE__ */ jsx(Settings2Icon, { size: 16 }),
+					onClick: onConfigure,
+					children: "Configure"
+				})
 			})
 		})]
 	}), /* @__PURE__ */ jsx(Modal, {
 		opened: configurationOpened,
 		onClose: onCloseConfiguration,
-		title: `Configure ${analysis.label}`,
+		title: 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"
-					})]
+			gap: "lg",
+			children: [/* @__PURE__ */ jsx(ScrollArea.Autosize, {
+				mah: "62vh",
+				type: "auto",
+				offsetScrollbars: true,
+				children: analysis.view === "custom-chart" ? /* @__PURE__ */ jsx(CustomChartControls, {
+					values,
+					onChange
+				}) : /* @__PURE__ */ jsx(Fields, {
+					analysis,
+					values,
+					onChange: setParam
 				})
-			]
+			}), /* @__PURE__ */ jsx(Group, {
+				justify: "flex-end",
+				children: /* @__PURE__ */ jsx(Button, {
+					disabled: !configured,
+					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);
@@ -948,8 +984,8 @@ const CustomChartControls = ({ values, onChange }) => {
 					})]
 				}),
 				/* @__PURE__ */ jsx(Select, {
-					label: "Series (optional)",
-					description: "Split rows into one trace per distinct value.",
+					label: "Series",
+					placeholder: "None",
 					data: columns,
 					value: values.series == null ? null : String(values.series),
 					clearable: true,
@@ -1016,7 +1052,7 @@ const Changes = ({ analysis, values }) => {
 				series: "attribute",
 				xRange: lifetime,
 				yAxes: "independent",
-				colorOf: (attribute) => colorForKey("attribute", attribute) ?? "#888888",
+				colorScope: "attribute",
 				step: true
 			});
 		}
@@ -1046,12 +1082,14 @@ const useCards = (ocelId) => {
 	]);
 	return {
 		cards,
+		/** False until the stored dashboard has been read. */
+		loaded,
 		add: (analysis) => {
 			const id = globalThis.crypto.randomUUID();
 			setCards((current) => [...current, {
 				id,
 				analysis,
-				values: fixed(analysis)
+				values: {}
 			}]);
 			return id;
 		},
@@ -1062,15 +1100,6 @@ const useCards = (ocelId) => {
 		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)) ?? "[]");
@@ -1083,13 +1112,14 @@ const read = (ocelId) => {
 //#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 { cards, loaded, 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);
+		const added = findAnalysis(analysis);
+		if (added && !isConfigured(added, {})) setConfigure(id);
 	};
 	return /* @__PURE__ */ jsxs(Container, {
 		fluid: true,
@@ -1100,52 +1130,65 @@ const Dashboard = ({ ocelId }) => {
 		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"
-							]
-						})]
+			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"
+								]
+							})]
+						})
+					}), cards.length > 0 && /* @__PURE__ */ jsx(Button, {
+						leftSection: /* @__PURE__ */ jsx(PlusIcon, { size: 16 }),
+						onClick: () => setCatalogOpen(true),
+						children: "Add visualization"
+					})]
+				}),
+				loaded && cards.length === 0 && /* @__PURE__ */ jsx(Center, {
+					h: "50vh",
+					children: /* @__PURE__ */ jsx(Button, {
+						size: "lg",
+						variant: "light",
+						leftSection: /* @__PURE__ */ jsx(PlusIcon, { size: 18 }),
+						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(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),
@@ -1277,11 +1320,6 @@ const CatalogItem = ({ analysis, onAdd }) => {
 						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"
 					})
 				]
 			})

package/dist/index.js

@@ -4,7 +4,7 @@ import { LoadingOverlay } from "@mantine/core";
 import dynamic from "next/dynamic";
 import { jsx } from "react/jsx-runtime";
 //#region src/pages/dashboard.tsx
-const Dashboard = dynamic(() => import("./Dashboard-BQ_EzP8N.js").then((module) => module.Dashboard), { ssr: false });
+const Dashboard = dynamic(() => import("./Dashboard-DlIf2ec5.js").then((module) => module.Dashboard), { ssr: false });
 const DashboardPage = () => {
 	const { id } = useCurrentOcel();
 	return id ? /* @__PURE__ */ jsx(Dashboard, { ocelId: id }, id) : /* @__PURE__ */ jsx(LoadingOverlay, { visible: true });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ocelescope/exploration",
   "type": "module",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "Interactive analytical dashboards for OCEL data",
   "license": "MIT",
   "repository": {
@@ -19,19 +19,19 @@
     "dist"
   ],
   "peerDependencies": {
-    "@mantine/core": "^9.5.1",
-    "@ocelescope/api-base": "^0.10.1",
-    "@ocelescope/core": "^0.10.1",
+    "@mantine/core": "^9.7.2",
+    "@ocelescope/api-base": "^0.10.2",
+    "@ocelescope/core": "^0.10.2",
     "@r4pm/components": "^0.3.2",
-    "@tanstack/react-query": "^5.90.21",
-    "lucide-react": "^1.0.0",
-    "next": "16.3.6",
+    "@tanstack/react-query": "^5.104.2",
+    "lucide-react": "^1.56.0",
+    "next": "16.4.0",
     "react": "^19.3.0"
   },
   "devDependencies": {
     "@types/node": "^26.6.1",
     "@types/react": "^19.3.0",
-    "tsdown": "^0.23.0",
+    "tsdown": "^0.23.1",
     "typescript": "^6.0.3"
   },
   "scripts": {