@ocelescope/core 0.10.0 → 0.10.2

package/dist/OptionPicker-D9rUIwbY.js

@@ -0,0 +1,351 @@
+import { ChevronsUpDownIcon, SearchIcon, XIcon } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Badge, Button, Flex, Popover, Spinner, Text, TextField, Theme } from "@r4pm/components/ui";
+import { EmptyState, ErrorState, FrequencyPicker, SkeletonList, softBadgeStyle } from "@r4pm/components";
+//#region src/components/Pickers/internal/Field.tsx
+/**
+* A picker's label and help text above it.
+*
+* Its own Radix theme, since a Mantine modal is portalled outside the app's:
+* there the Radix parts would lose their styles. Within the app's theme it
+* only inherits it.
+*/
+const Field = ({ label, description, children }) => /* @__PURE__ */ jsx(Theme, {
+	asChild: true,
+	hasBackground: false,
+	children: /* @__PURE__ */ jsxs(Flex, {
+		direction: "column",
+		gap: "1",
+		width: "100%",
+		children: [
+			label && /* @__PURE__ */ jsx(Text, {
+				as: "div",
+				size: "2",
+				weight: "medium",
+				children: label
+			}),
+			description && /* @__PURE__ */ jsx(Text, {
+				as: "div",
+				size: "1",
+				color: "gray",
+				children: description
+			}),
+			children
+		]
+	})
+});
+/** A dot in a choice's colour. */
+const Swatch = ({ color }) => color ? /* @__PURE__ */ jsx("span", {
+	"aria-hidden": true,
+	style: {
+		flex: "none",
+		width: 8,
+		height: 8,
+		borderRadius: "50%",
+		background: color
+	}
+}) : null;
+/** Picked values as badges, each with a button that takes it out. */
+const PickedBadges = ({ picked, onRemove, disabled }) => picked.length === 0 ? null : /* @__PURE__ */ jsx(Flex, {
+	gap: "1",
+	wrap: "wrap",
+	children: picked.map(({ id, label, color }) => /* @__PURE__ */ jsxs(Badge, {
+		size: "1",
+		style: color ? softBadgeStyle(color) : void 0,
+		color: color ? void 0 : "gray",
+		children: [label, !disabled && /* @__PURE__ */ jsx(XIcon, {
+			size: 12,
+			role: "button",
+			tabIndex: 0,
+			"aria-label": `Remove ${label}`,
+			style: { cursor: "pointer" },
+			onClick: () => onRemove(id),
+			onKeyDown: (event) => {
+				if (event.key === "Enter" || event.key === " ") {
+					event.preventDefault();
+					onRemove(id);
+				}
+			}
+		})]
+	}, id))
+});
+//#endregion
+//#region src/components/Pickers/internal/ListSelect.module.css
+var ListSelect_module_default = {
+	"hideCount": "wENrqW_hideCount",
+	"single": "wENrqW_single"
+};
+//#endregion
+//#region src/components/Pickers/internal/options.ts
+const defaultIdOf = (value) => typeof value === "string" ? value : JSON.stringify(value);
+/** The picked values, however the caller holds them. */
+const pickedValues = (selection) => selection.multiple ? [...selection.value] : selection.value == null ? [] : [selection.value];
+/** Report values back as the one value, or the list, the caller asked for. */
+const report = (selection, values) => {
+	if (selection.multiple) selection.onChange(values);
+	else selection.onChange(values[0]);
+};
+/** Options in groups, in first-seen order. Ungrouped options form one group. */
+const groupOptions = (options) => {
+	const groups = /* @__PURE__ */ new Map();
+	for (const option of options) {
+		const key = option.group?.label ?? "";
+		const entry = groups.get(key) ?? {
+			group: option.group,
+			options: []
+		};
+		entry.options.push(option);
+		groups.set(key, entry);
+	}
+	return [...groups.values()];
+};
+const sortOptions = (options, sort) => [...options].sort((a, b) => sort === "name" ? a.label.localeCompare(b.label) : (b.count ?? 0) - (a.count ?? 0) || a.label.localeCompare(b.label));
+//#endregion
+//#region src/components/Pickers/internal/ListSelect.tsx
+/** Lists at most this long get no search box of their own. */
+const SEARCH_FROM = 8;
+/** One r4pm list scrolls after eight rows; several groups of them share
+* this height, so a grouped picker stays as compact. */
+const GROUPS_HEIGHT = 320;
+/**
+* Every choice at once, one r4pm `FrequencyPicker` per group, so choices
+* keep the colour and frequency bars they have in the viewers.
+*/
+const ListSelect = ({ model, counts = true, bars = true, cutoff = false, sort = "count", emptyText, disabled, autoFocus, loading, error, missing, search, onSearch, total }) => {
+	const groups = groupOptions(model.options);
+	const groupsRef = useRef(null);
+	const groupCount = groups.length;
+	useEffect(() => {
+		if (groupCount < 2) return;
+		const frame = requestAnimationFrame(() => groupsRef.current?.scrollTo({ top: 0 }));
+		return () => cancelAnimationFrame(frame);
+	}, [groupCount]);
+	const shownIds = new Set(model.options.map((o) => model.idOf(o.value)));
+	const offList = model.picked.filter(({ id }) => !shownIds.has(id));
+	const content = () => {
+		if (missing) return /* @__PURE__ */ jsx(EmptyState, { title: missing });
+		if (error) return /* @__PURE__ */ jsx(ErrorState, {
+			error,
+			title: "Couldn't load"
+		});
+		if (loading && model.options.length === 0) return /* @__PURE__ */ jsx(SkeletonList, { rows: 4 });
+		if (model.options.length === 0) return /* @__PURE__ */ jsx(EmptyState, { title: emptyText ?? "Nothing to choose from" });
+		const lists = groups.map(({ group, options }) => {
+			const byLabel = new Map(options.map((option) => [option.label, option]));
+			const groupIds = new Set(options.map((o) => model.idOf(o.value)));
+			const pickedLabels = options.filter((option) => model.pickedIds.has(model.idOf(option.value))).map((option) => option.label);
+			return /* @__PURE__ */ jsxs(Flex, {
+				direction: "column",
+				gap: "1",
+				children: [group && /* @__PURE__ */ jsxs(Flex, {
+					gap: "2",
+					align: "center",
+					children: [/* @__PURE__ */ jsx(Badge, {
+						size: "1",
+						style: group.color ? softBadgeStyle(group.color) : void 0,
+						children: group.label
+					}), group.caption && /* @__PURE__ */ jsx(Text, {
+						size: "1",
+						color: "gray",
+						children: group.caption
+					})]
+				}), /* @__PURE__ */ jsx(FrequencyPicker, {
+					items: options.map((option) => ({
+						key: option.label,
+						count: option.count ?? 0
+					})),
+					value: new Set(pickedLabels),
+					onChange: (next) => {
+						if (disabled) return;
+						const values = [...next].flatMap((label) => {
+							const option = byLabel.get(label);
+							return option ? [option.value] : [];
+						});
+						if (!model.multiple) {
+							const fresh = values.find((value) => !model.pickedIds.has(model.idOf(value)));
+							return model.set(fresh !== void 0 ? [fresh] : values);
+						}
+						model.set([...model.picked.filter(({ id }) => !groupIds.has(id)).map(({ value }) => value), ...values]);
+					},
+					mode: model.multiple ? "multi" : "single",
+					searchable: !onSearch && options.length > SEARCH_FROM,
+					showBars: bars,
+					showCounts: counts,
+					showCutoff: cutoff,
+					sort,
+					colorOf: (_, key) => byLabel.get(key)?.color,
+					autoFocus,
+					emptyText: "Nothing matches"
+				})]
+			}, group?.label ?? "");
+		});
+		return groups.length > 1 ? /* @__PURE__ */ jsx(Flex, {
+			direction: "column",
+			gap: "3",
+			ref: groupsRef,
+			style: {
+				maxHeight: GROUPS_HEIGHT,
+				overflowY: "auto",
+				overflowX: "hidden"
+			},
+			children: lists
+		}) : lists;
+	};
+	return /* @__PURE__ */ jsxs(Flex, {
+		direction: "column",
+		gap: "2",
+		className: [!model.multiple || total !== void 0 ? ListSelect_module_default.hideCount : "", model.multiple ? "" : ListSelect_module_default.single].join(" "),
+		children: [
+			onSearch && /* @__PURE__ */ jsxs(TextField.Root, {
+				size: "2",
+				value: search ?? "",
+				placeholder: "Search…",
+				autoFocus,
+				disabled: disabled || !!missing,
+				onChange: (event) => onSearch(event.currentTarget.value),
+				children: [/* @__PURE__ */ jsx(TextField.Slot, { children: /* @__PURE__ */ jsx(SearchIcon, {
+					size: 14,
+					"aria-hidden": true
+				}) }), loading && /* @__PURE__ */ jsx(TextField.Slot, {
+					side: "right",
+					children: /* @__PURE__ */ jsx(Spinner, { size: "1" })
+				})]
+			}),
+			model.multiple && total !== void 0 && /* @__PURE__ */ jsxs(Text, {
+				size: "1",
+				color: "gray",
+				children: [
+					model.picked.length,
+					" of ",
+					total.toLocaleString(),
+					" selected"
+				]
+			}),
+			/* @__PURE__ */ jsx(PickedBadges, {
+				picked: offList,
+				onRemove: model.remove,
+				disabled
+			}),
+			content()
+		]
+	});
+};
+//#endregion
+//#region src/components/Pickers/internal/DropdownSelect.tsx
+/**
+* A field that names what is picked and opens the list in a popover, so both
+* variants are the same list.
+*/
+const DropdownSelect = (props) => {
+	const { model, label, placeholder, disabled, missing, loading } = props;
+	const [open, setOpen] = useState(props.autoFocus ?? false);
+	const [first, ...more] = model.picked;
+	const total = props.total ?? model.options.length;
+	const picked = more.length === 0 ? first?.label : `${model.picked.length} of ${total.toLocaleString()} selected`;
+	return /* @__PURE__ */ jsxs(Popover.Root, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+			disabled: disabled || !!missing,
+			children: /* @__PURE__ */ jsxs(Button, {
+				variant: "surface",
+				color: "gray",
+				"aria-label": label ?? placeholder,
+				style: {
+					width: "100%",
+					justifyContent: "space-between",
+					fontWeight: "normal"
+				},
+				children: [/* @__PURE__ */ jsxs(Flex, {
+					gap: "2",
+					align: "center",
+					minWidth: "0",
+					children: [more.length === 0 && /* @__PURE__ */ jsx(Swatch, { color: first?.color }), /* @__PURE__ */ jsx(Text, {
+						truncate: true,
+						highContrast: !!picked && !missing,
+						children: missing ?? (picked || placeholder || "Choose…")
+					})]
+				}), loading ? /* @__PURE__ */ jsx(Spinner, { size: "1" }) : /* @__PURE__ */ jsx(ChevronsUpDownIcon, {
+					size: 14,
+					"aria-hidden": true,
+					style: { flex: "none" }
+				})]
+			})
+		}), /* @__PURE__ */ jsx(Popover.Content, {
+			size: "1",
+			align: "start",
+			style: {
+				width: "var(--radix-popover-trigger-width)",
+				minWidth: 260,
+				maxHeight: "var(--radix-popover-content-available-height)",
+				zIndex: 400
+			},
+			children: /* @__PURE__ */ jsx(ListSelect, {
+				...props,
+				autoFocus: true,
+				model: model.multiple ? model : {
+					...model,
+					set: (values) => {
+						model.set(values);
+						setOpen(false);
+					}
+				}
+			})
+		})]
+	});
+};
+//#endregion
+//#region src/components/Pickers/internal/usePickerModel.ts
+const usePickerModel = (props) => {
+	const { options, sort = "count", idOf = defaultIdOf, labelOf } = props;
+	const sorted = useMemo(() => groupOptions(options).flatMap((group) => sortOptions(group.options, sort)), [options, sort]);
+	const byId = useMemo(() => new Map(sorted.map((option) => [idOf(option.value), option])), [sorted, idOf]);
+	const picked = pickedValues(props).map((value) => {
+		const id = idOf(value);
+		const option = byId.get(id);
+		const label = option?.label ?? labelOf?.(value) ?? id;
+		return {
+			id,
+			value,
+			label: option?.group ? `${label} (${option.group.label})` : label,
+			color: option?.color ?? option?.group?.color
+		};
+	});
+	const pickedIds = new Set(picked.map(({ id }) => id));
+	const set = (values) => report(props, values);
+	return {
+		options: sorted,
+		idOf,
+		multiple: props.multiple === true,
+		picked,
+		pickedIds,
+		set,
+		remove: (id) => set(picked.filter((entry) => entry.id !== id).map((p) => p.value))
+	};
+};
+//#endregion
+//#region src/components/Pickers/OptionPicker.tsx
+/**
+* Picking values out of a list of options, as a dropdown or as a list.
+*
+* Presentational: handed the options, it reports what was picked. Every OCEL
+* picker is this, wrapped around an endpoint; use it directly for choices
+* that come from elsewhere.
+*/
+const OptionPicker = (props) => {
+	const model = usePickerModel(props);
+	return /* @__PURE__ */ jsx(Field, {
+		label: props.label,
+		description: props.description,
+		children: props.variant === "list" ? /* @__PURE__ */ jsx(ListSelect, {
+			...props,
+			model
+		}) : /* @__PURE__ */ jsx(DropdownSelect, {
+			...props,
+			model
+		})
+	});
+};
+//#endregion
+export { OptionPicker };

package/dist/{PieChart-DBiASngC.js → PieChart-DZFHaTXD.js}

@@ -1,11 +1,12 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
-import { t as Plot } from "./Plot-CxHHyXot.js";
-import { n as toSeries, t as paint } from "./series-BBXVjHHY.js";
+import { n as Plot, t as useChart } from "./useChart-jzzXgs0j.js";
+import { n as toSeries, t as paint } from "./series-W1jsVape.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/charts/PieChart.tsx
 var PieChart_exports = /* @__PURE__ */ __exportAll({ PieChart: () => PieChart });
 /** Shares of a whole, one slice per category. */
-const PieChart = ({ hole = .5, ...props }) => {
+const PieChart = ({ hole = .5, ...given }) => {
+	const props = useChart(given);
 	const [slices] = toSeries(props);
 	const colors = slices && paint(slices, props.colorOf, true);
 	const total = slices?.values.reduce((sum, value) => sum + (typeof value === "number" ? value : 0), 0);

package/dist/{ScatterChart-jIQOjQes.js → ScatterChart-DJfJmABJ.js}

@@ -1,11 +1,12 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
-import { i as measureOf, n as axis, t as Plot } from "./Plot-CxHHyXot.js";
-import { n as traceCount, t as cartesian } from "./cartesian-5TPNWjl_.js";
+import { a as measureOf, n as Plot, r as axis, t as useChart } from "./useChart-jzzXgs0j.js";
+import { n as traceCount, t as cartesian } from "./cartesian-Dt7weMqK.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/charts/ScatterChart.tsx
 var ScatterChart_exports = /* @__PURE__ */ __exportAll({ ScatterChart: () => ScatterChart });
 /** A point per row, for values that have no order to follow. */
-const ScatterChart = ({ xRange, ...props }) => {
+const ScatterChart = ({ xRange, ...given }) => {
+	const props = useChart(given);
 	const measure = measureOf(props.y);
 	return /* @__PURE__ */ jsx(Plot, {
 		traces: cartesian(props, {

package/dist/{SqlChart-bwDArK2l.js → SqlChart-Bf7D5o5P.js}

@@ -1,22 +1,22 @@
-import { t as AreaChart } from "./AreaChart-DoD3LM50.js";
-import { t as BarChart } from "./BarChart-Cixo5Okd.js";
-import { t as LineChart } from "./LineChart-CVz-dkJI.js";
-import { t as PieChart } from "./PieChart-DBiASngC.js";
-import { t as ScatterChart } from "./ScatterChart-jIQOjQes.js";
-import { t as SunburstChart } from "./SunburstChart-D6FhYBHI.js";
-import { Group, SegmentedControl, Text } from "@mantine/core";
+import { t as AreaChart } from "./AreaChart-q6rVcUIp.js";
+import { t as BarChart } from "./BarChart-BLZS87ex.js";
+import { t as HistogramChart } from "./HistogramChart-GgiQdlsk.js";
+import { t as LineChart } from "./LineChart-Cq935Tk2.js";
+import { t as PieChart } from "./PieChart-DZFHaTXD.js";
+import { t as ScatterChart } from "./ScatterChart-DJfJmABJ.js";
+import { t as SunburstChart } from "./SunburstChart-CMNYlKon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { EmptyState, useViewSetting, useViewerConfig } from "@r4pm/components";
+import { Flex, SegmentedControl, Text } from "@r4pm/components/ui";
+import { EmptyState, useViewSetting } from "@r4pm/components";
 //#region src/components/charts/SqlChart.tsx
 /**
 * A query's result, drawn.
 *
-* This is the r4pm viewer: it reads the result's own column types to decide
-* what goes across and what goes up, takes colours and selection from the
-* ambient `ViewerConfig`, and hands the rows to one of the charts.
+* It reads the result's own column types to decide what goes across and what
+* goes up, and hands the rows to one of the charts; colours and selection
+* reach them from the ambient `ViewerConfig`, or from the props given here.
 */
-const SqlChart = ({ data, type: initialType = "bar", types = [], x, y, series, path, stacked = false, horizontal = false, yAxes = "shared", colorScope, title, height = "100%", ...config }) => {
-	const { colorOf, onSelect } = useViewerConfig(config);
+const SqlChart = ({ data, type: initialType = "bar", types = [], x, xEnd, y, series, path, stacked = false, horizontal = false, yAxes = "shared", colorScope, title, height = "100%", colorOf, onSelect }) => {
 	const [type, setType] = useViewSetting(`chartType:${title ?? ""}`, initialType);
 	const { category, measures } = columns(data, {
 		x,
@@ -28,12 +28,9 @@ const SqlChart = ({ data, type: initialType = "bar", types = [], x, y, series, p
 		x: category,
 		y: measures,
 		series,
-		...colorScope && { colorOf: (name) => colorOf?.(colorScope, name) ?? "#888888" },
-		onSelect: (name, point) => onSelect?.({
-			scope: colorScope ?? category,
-			key: name,
-			data: point
-		})
+		colorScope,
+		colorOf,
+		onSelect
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		style: {
@@ -42,27 +39,27 @@ const SqlChart = ({ data, type: initialType = "bar", types = [], x, y, series, p
 			width: "100%",
 			height
 		},
-		children: [(title || types.length > 1) && /* @__PURE__ */ jsxs(Group, {
-			gap: "xs",
-			mb: "xs",
-			pr: 48,
-			justify: "flex-start",
+		children: [(title || types.length > 1) && /* @__PURE__ */ jsxs(Flex, {
+			gap: "2",
+			mb: "2",
+			pr: "8",
+			align: "center",
 			wrap: "wrap",
 			children: [title && /* @__PURE__ */ jsx(Text, {
-				size: "sm",
-				fw: 600,
+				size: "2",
+				weight: "bold",
 				truncate: true,
 				children: title
-			}), types.length > 1 && /* @__PURE__ */ jsx(SegmentedControl, {
+			}), types.length > 1 && /* @__PURE__ */ jsx(SegmentedControl.Root, {
 				"data-export-ignore": true,
-				size: "xs",
-				radius: "xl",
+				size: "1",
+				radius: "full",
 				value: type,
-				onChange: (value) => setType(value),
-				data: types.map((option) => ({
+				onValueChange: (value) => setType(value),
+				children: types.map((option) => /* @__PURE__ */ jsx(SegmentedControl.Item, {
 					value: option,
-					label: option[0]?.toUpperCase() + option.slice(1)
-				}))
+					children: option[0]?.toUpperCase() + option.slice(1)
+				}, option))
 			})]
 		}), /* @__PURE__ */ jsx("div", {
 			style: {
@@ -76,6 +73,9 @@ const SqlChart = ({ data, type: initialType = "bar", types = [], x, y, series, p
 				...chart,
 				stacked,
 				horizontal
+			}) : type === "histogram" && xEnd ? /* @__PURE__ */ jsx(HistogramChart, {
+				...chart,
+				xEnd
 			}) : type === "line" ? /* @__PURE__ */ jsx(LineChart, {
 				...chart,
 				yAxes

package/dist/{SunburstChart-D6FhYBHI.js → SunburstChart-CMNYlKon.js}

@@ -1,10 +1,11 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
-import { i as measureOf, r as label, t as Plot } from "./Plot-CxHHyXot.js";
+import { a as measureOf, i as label, n as Plot, t as useChart } from "./useChart-jzzXgs0j.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/charts/SunburstChart.tsx
 var SunburstChart_exports = /* @__PURE__ */ __exportAll({ SunburstChart: () => SunburstChart });
 /** A hierarchy as rings, each one a column of the path. */
-const SunburstChart = ({ path, ...props }) => {
+const SunburstChart = ({ path, ...given }) => {
+	const props = useChart(given);
 	const rings = path ?? [props.x, props.series].filter(named);
 	return /* @__PURE__ */ jsx(Plot, {
 		traces: [nest(props.rows, rings, measureOf(props.y), props.colorOf)],

package/dist/attributeOptions-D4slIoZx.js

@@ -0,0 +1,37 @@
+//#region src/components/Pickers/internal/attributeOptions.ts
+/**
+* Attributes as options: one per name, with its value types as description
+* and its distinct values as count.
+*
+* Without a type filter the endpoints return an attribute once per event or
+* object type that carries it, so "status" on two object types is merged.
+*/
+const attributeOptions = (attributes, valueTypes, toValue, group) => {
+	const merged = /* @__PURE__ */ new Map();
+	for (const attribute of attributes ?? []) {
+		if (valueTypes && !valueTypes.includes(attribute.type)) continue;
+		const entry = merged.get(attribute.name) ?? {
+			types: /* @__PURE__ */ new Set(),
+			count: 0
+		};
+		entry.types.add(attribute.type);
+		entry.count = Math.max(entry.count, attribute.distinct_values);
+		merged.set(attribute.name, entry);
+	}
+	return [...merged].map(([name, { types, count }]) => ({
+		value: toValue(name),
+		label: name,
+		description: [...types].join(", "),
+		count,
+		group
+	}));
+};
+/** Distinct values say how varied an attribute is, not how often it occurs,
+* so by default they neither sort the choices nor draw bars. */
+const attributeDefaults = {
+	sort: "name",
+	bars: false,
+	counts: false
+};
+//#endregion
+export { attributeOptions as n, attributeDefaults as t };

package/dist/{cartesian-5TPNWjl_.js → cartesian-Dt7weMqK.js}

@@ -1,4 +1,4 @@
-import { n as toSeries, t as paint } from "./series-BBXVjHHY.js";
+import { n as toSeries, t as paint } from "./series-W1jsVape.js";
 //#region src/components/charts/internal/cartesian.ts
 /**
 * Traces for the charts drawn against two axes.