@morscherlab/mint-sdk 1.4.0-beta.1 → 1.4.0-beta.10

package/dist/{ExperimentSelectorModal-D-9z7cNx.js → ExperimentSelectorModal-65peG4Up.js}

@@ -1,10 +1,11 @@
-import { a as __exportAll, t as BaseModal_default } from "./BaseModal-DfRIuVoj.js";
+import { n as BaseModal_default, o as __exportAll } from "./useDropdownState-8yWMu-7_.js";
 import { o as useApi, t as useExperimentStore } from "./experiment-43OJtH7R.js";
-import { C as formatExperimentDate, N as BaseSelect_default, b as SORT_OPTIONS, n as ResourcePickerListInternal_default, x as datePresetToISO, y as DATE_PRESET_OPTIONS } from "./records-BzTcxekG.js";
+import { C as formatExperimentDate, n as ResourcePickerListInternal_default, x as datePresetToISO } from "./records-B6gpM_3e.js";
+import { n as ActionMenu_default, t as useRequest } from "./useRequest-D506eHi8.js";
 import { t as useDebouncedWatch } from "./useDebouncedWatch-BPwyl6eS.js";
-import { t as useRequest } from "./useRequest-D5JDfsgZ.js";
-import { i as tone, r as format, t as OPTIONS } from "./experimentStatus-BZmU4czV.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, reactive, ref, unref, vModelCheckbox, watch, withCtx, withDirectives } from "vue";
+import { n as format, r as tone } from "./experimentStatus-Cqp6qNrR.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, reactive, ref, renderList, resolveDynamicComponent, toDisplayString, unref, watch, withCtx } from "vue";
+import { ChevronDown, CircleDot, Folder, Shapes, User } from "lucide-vue-next";
 //#region src/composables/useExperimentSelector.ts
 function getPlatformContext() {
 	if (typeof window === "undefined") return void 0;
@@ -15,7 +16,7 @@ function getPlatformApiUrl() {
 }
 /** Fetches a paginated, filtered experiment list from the platform API for picker and selector UIs. */
 function useExperimentSelector(options = {}) {
-	const { limit = 100, immediate = false, experimentType, allowedExperimentTypes: optionAllowedExperimentTypes, apiBaseUrl } = options;
+	const { limit = 100, immediate = false, experimentType, allowedExperimentTypes: optionAllowedExperimentTypes, apiBaseUrl, withStatusCounts = false } = options;
 	const platformBase = apiBaseUrl ?? getPlatformApiUrl();
 	const api = useApi();
 	const experiments = ref([]);
@@ -31,13 +32,17 @@ function useExperimentSelector(options = {}) {
 	const experimentTypes = ref([]);
 	const projects = ref([]);
 	let filterOptionsFetched = false;
+	const statusCounts = ref({});
+	let statsGeneration = 0;
+	let countedScope = null;
 	const hasMore = computed(() => experiments.value.length < total.value);
 	const filters = reactive({
 		search: void 0,
 		status: void 0,
 		project: void 0,
 		experimentType: void 0,
-		datePreset: void 0
+		datePreset: void 0,
+		mine: void 0
 	});
 	function normalizeExperimentTypes(values) {
 		if (values == null) return null;
@@ -77,16 +82,22 @@ function useExperimentSelector(options = {}) {
 		}
 		return { kind: "all" };
 	}
-	function buildExperimentListUrl(typeFilter, skip, pageLimit) {
+	/** Query params shared by the list and the stats route; status, sort and paging are list-only. */
+	function scopeParams(typeFilter) {
 		const params = new URLSearchParams();
 		if (typeFilter) params.set("experiment_type", typeFilter);
-		if (filters.status) params.set("status", filters.status);
 		if (filters.search) params.set("search", filters.search);
 		if (filters.project) params.set("project", filters.project);
+		if (filters.mine) params.set("mine", "true");
+		if (filters.datePreset) params.set("created_after", datePresetToISO(filters.datePreset));
+		return params;
+	}
+	function buildExperimentListUrl(typeFilter, skip, pageLimit) {
+		const params = scopeParams(typeFilter);
+		if (filters.status) params.set("status", filters.status);
 		const { sortBy, sortOrder } = parseSortKey();
 		params.set("sort_by", sortBy);
 		params.set("sort_order", sortOrder);
-		if (filters.datePreset) params.set("created_after", datePresetToISO(filters.datePreset));
 		params.set("limit", String(pageLimit));
 		params.set("skip", String(skip));
 		const query = params.toString();
@@ -170,6 +181,42 @@ function useExperimentSelector(options = {}) {
 			label: p.name
 		}));
 	}
+	/** The filters the stats route reads; status, sort and paging do not change the counts. */
+	function countScope() {
+		return JSON.stringify([
+			filters.search,
+			filters.project,
+			filters.experimentType,
+			filters.datePreset,
+			filters.mine
+		]);
+	}
+	function refreshStatusCountsOnScopeChange() {
+		if (withStatusCounts && countScope() !== countedScope) fetchStatusCounts();
+	}
+	async function fetchStatusCounts() {
+		const generation = ++statsGeneration;
+		countedScope = countScope();
+		const scope = resolveExperimentTypeScope();
+		if (scope.kind === "blocked") {
+			statusCounts.value = {};
+			return;
+		}
+		const types = scope.kind === "multi" ? scope.experimentTypes : [scope.kind === "single" ? scope.experimentType : void 0];
+		const base = platformBase ?? "";
+		try {
+			const responses = await Promise.all(types.map((type) => api.get(`${base}/experiments/stats?${scopeParams(type)}`)));
+			if (generation !== statsGeneration) return;
+			const counts = {};
+			for (const response of responses) for (const [status, count] of Object.entries(response.by_status)) counts[status] = (counts[status] ?? 0) + count;
+			statusCounts.value = counts;
+		} catch {
+			if (generation === statsGeneration) {
+				statusCounts.value = {};
+				countedScope = null;
+			}
+		}
+	}
 	async function loadMore() {
 		if (!hasMore.value || isLoading.value) return;
 		page.value++;
@@ -192,46 +239,37 @@ function useExperimentSelector(options = {}) {
 		filters.project = void 0;
 		filters.experimentType = void 0;
 		filters.datePreset = void 0;
+		filters.mine = void 0;
 		sortKey.value = "created_at:desc";
 		page.value = 0;
 		request.clearError();
 	}
-	const groupedByProject = computed(() => {
-		const groups = /* @__PURE__ */ new Map();
-		for (const exp of experiments.value) {
-			const key = exp.project_name ?? exp.project ?? "No project";
-			const list = groups.get(key);
-			if (list) list.push(exp);
-			else groups.set(key, [exp]);
-		}
-		return [...groups.entries()].sort(([a], [b]) => {
-			if (a === "No project") return 1;
-			if (b === "No project") return -1;
-			return a.localeCompare(b);
-		});
-	});
 	watch(() => [
 		filters.search,
 		filters.status,
 		filters.project,
 		filters.experimentType,
 		filters.datePreset,
+		filters.mine,
 		sortKey.value
 	], () => invalidateFetch(), { flush: "sync" });
 	const searchWatch = useDebouncedWatch(() => filters.search, () => {
 		page.value = 0;
 		fetchExperiments();
+		refreshStatusCountsOnScopeChange();
 	}, { delay: 300 });
 	watch(() => [
 		filters.status,
 		filters.project,
 		filters.experimentType,
 		filters.datePreset,
+		filters.mine,
 		sortKey.value
 	], () => {
 		searchWatch.cancel();
 		page.value = 0;
 		fetchExperiments();
+		refreshStatusCountsOnScopeChange();
 	});
 	if (immediate) fetchExperiments();
 	return {
@@ -247,42 +285,31 @@ function useExperimentSelector(options = {}) {
 		sortKey,
 		experimentTypes,
 		projects,
-		groupedByProject,
+		statusCounts,
 		fetch: fetchExperiments,
 		loadMore,
 		reset,
 		select,
 		clear,
-		fetchFilterOptions
+		fetchFilterOptions,
+		fetchStatusCounts
 	};
 }
 //#endregion
 //#region src/components/ExperimentSelectorModal.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "mint-experiment-selector__filter-select" };
-var _hoisted_2 = {
-	key: 0,
-	class: "mint-experiment-selector__filter-select"
-};
-var _hoisted_3 = ["aria-expanded"];
+var _hoisted_1 = [
+	"aria-label",
+	"aria-expanded",
+	"onClick",
+	"onKeydown"
+];
+var _hoisted_2 = { class: "mint-experiment-selector__toggle-label" };
+var _hoisted_3 = ["aria-pressed"];
 var _hoisted_4 = {
-	key: 0,
-	class: "mint-experiment-selector__filters-dot"
-};
-var _hoisted_5 = {
-	key: 0,
-	class: "mint-experiment-selector__filters-advanced"
-};
-var _hoisted_6 = {
-	key: 0,
-	class: "mint-experiment-selector__filter-select"
-};
-var _hoisted_7 = { class: "mint-experiment-selector__filter-select" };
-var _hoisted_8 = { class: "mint-experiment-selector__filter-select" };
-var _hoisted_9 = { class: "mint-experiment-selector__group-toggle" };
-var _hoisted_10 = {
 	key: 0,
 	class: "mint-experiment-selector__footer"
 };
+/** Every item carries `checked`, so ActionMenu renders a single-choice menu. */
 var ExperimentSelectorModal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ExperimentSelectorModal",
 	props: {
@@ -291,15 +318,7 @@ var ExperimentSelectorModal_vue_vue_type_script_setup_true_lang_default = /*@__P
 		allowedExperimentTypes: {},
 		currentExperimentId: { default: null },
 		title: { default: "Select Experiment" },
-		size: { default: "full" },
-		groupByProject: {
-			type: Boolean,
-			default: false
-		},
-		showFilters: {
-			type: Boolean,
-			default: false
-		}
+		size: { default: "lg" }
 	},
 	emits: ["update:open"],
 	setup(__props, { emit: __emit }) {
@@ -314,36 +333,80 @@ var ExperimentSelectorModal_vue_vue_type_script_setup_true_lang_default = /*@__P
 		const props = __props;
 		const emit = __emit;
 		const experimentStore = useExperimentStore();
-		const { experiments, filters, isLoading, error, sortKey, experimentTypes, projects, groupedByProject, fetch: fetchExperiments, fetchFilterOptions } = useExperimentSelector({
+		const { experiments, filters, isLoading, error, experimentTypes, projects, statusCounts, fetch: fetchExperiments, fetchFilterOptions, fetchStatusCounts } = useExperimentSelector({
 			experimentType: props.experimentType,
-			allowedExperimentTypes: props.allowedExperimentTypes
+			allowedExperimentTypes: props.allowedExperimentTypes,
+			withStatusCounts: true
 		});
-		const showAdvanced = ref(props.showFilters);
-		const groupToggle = ref(props.groupByProject);
 		const openCount = ref(0);
-		const hasActiveAdvancedFilters = computed(() => !!(filters.project || filters.experimentType || filters.datePreset || sortKey.value !== "created_at:desc"));
-		const typeFilterOptions = computed(() => [{
-			value: "",
-			label: "All types"
-		}, ...experimentTypes.value.map((t) => ({
-			value: t.value,
-			label: t.label
-		}))]);
-		const canChooseExperimentType = computed(() => !props.experimentType && typeFilterOptions.value.length > 2);
-		const projectFilterOptions = computed(() => [{
-			value: "",
-			label: "All projects"
-		}, ...projects.value]);
-		const groups = computed(() => groupToggle.value ? groupedByProject.value.map(([label, items]) => ({
-			label,
-			items
-		})) : null);
+		const STATUS_ORDER = [
+			"ongoing",
+			"planned",
+			"completed",
+			"cancelled"
+		];
+		const canChooseExperimentType = computed(() => !props.experimentType && experimentTypes.value.length > 1);
+		function choiceItems(key, anyLabel, options) {
+			const current = filters[key] ?? "";
+			return [{
+				value: "",
+				label: anyLabel
+			}, ...options].map((option) => ({
+				id: option.value,
+				label: option.label,
+				checked: option.value === current
+			}));
+		}
+		const filterMenus = computed(() => {
+			const menus = [{
+				key: "status",
+				label: "Status",
+				icon: CircleDot,
+				items: choiceItems("status", "Any status", STATUS_ORDER.map((status) => {
+					const count = statusCounts.value[status];
+					const label = format(status);
+					return {
+						value: status,
+						label: count === void 0 ? label : `${label} · ${count}`
+					};
+				})),
+				activeLabel: filters.status ? format(filters.status) : void 0,
+				dotTone: filters.status ? tone(filters.status) : void 0
+			}];
+			if (projects.value.length) menus.push({
+				key: "project",
+				label: "Project",
+				icon: Folder,
+				items: choiceItems("project", "Any project", projects.value),
+				activeLabel: filters.project ?? void 0
+			});
+			if (canChooseExperimentType.value) menus.push({
+				key: "experimentType",
+				label: "Type",
+				icon: Shapes,
+				items: choiceItems("experimentType", "Any type", experimentTypes.value),
+				activeLabel: experimentTypes.value.find((t) => t.value === filters.experimentType)?.label ?? filters.experimentType ?? void 0
+			});
+			return menus;
+		});
+		const activeFilterCount = computed(() => [
+			filters.status,
+			filters.project,
+			filters.experimentType,
+			filters.mine
+		].filter(Boolean).length);
+		function clearFilters() {
+			filters.status = void 0;
+			filters.project = void 0;
+			filters.experimentType = void 0;
+			filters.mine = void 0;
+		}
 		function describe(experiment) {
 			const owner = experiment.created_by_user;
 			return {
 				code: experiment.experiment_code,
 				title: experiment.name,
-				meta: [...groupToggle.value ? [] : [experiment.project_name || experiment.project || ""], owner ? [owner.first_name, owner.last_name].filter(Boolean).join(" ") || owner.username : ""].filter(Boolean),
+				meta: [experiment.project_name || experiment.project || "", owner ? [owner.first_name, owner.last_name].filter(Boolean).join(" ") || owner.username : ""].filter(Boolean),
 				status: experiment.status ? {
 					label: format(experiment.status),
 					tone: tone(experiment.status)
@@ -354,9 +417,6 @@ var ExperimentSelectorModal_vue_vue_type_script_setup_true_lang_default = /*@__P
 		function setFilter(key, value) {
 			filters[key] = String(value) || void 0;
 		}
-		function handleSortChange(value) {
-			sortKey.value = String(value) || "created_at:desc";
-		}
 		function handleSelect(experiment) {
 			experimentStore.select(experiment);
 			emit("update:open", false);
@@ -370,6 +430,7 @@ var ExperimentSelectorModal_vue_vue_type_script_setup_true_lang_default = /*@__P
 				openCount.value++;
 				fetchFilterOptions();
 				fetchExperiments();
+				fetchStatusCounts();
 			}
 		}, { immediate: true });
 		return (_ctx, _cache) => {
@@ -377,133 +438,89 @@ var ExperimentSelectorModal_vue_vue_type_script_setup_true_lang_default = /*@__P
 				open: __props.open,
 				title: __props.title,
 				size: __props.size,
-				"onUpdate:open": _cache[7] || (_cache[7] = ($event) => emit("update:open", $event))
+				"onUpdate:open": _cache[2] || (_cache[2] = ($event) => emit("update:open", $event))
 			}, {
 				default: withCtx(() => [(openBlock(), createBlock(ResourcePickerListInternal_default, {
 					key: openCount.value,
 					search: unref(filters).search ?? "",
 					class: "mint-experiment-selector",
+					"autofocus-search": "",
 					label: "Experiments",
 					placeholder: "Search experiments…",
 					items: unref(experiments),
-					groups: groups.value,
 					"item-key": (experiment) => experiment.id,
 					describe,
 					"selected-key": __props.currentExperimentId,
 					loading: unref(isLoading),
 					error: unref(error),
 					"empty-title": "No experiments found",
-					"onUpdate:search": _cache[6] || (_cache[6] = ($event) => unref(filters).search = $event),
+					"onUpdate:search": _cache[1] || (_cache[1] = ($event) => unref(filters).search = $event),
 					onSelect: handleSelect
 				}, {
 					filters: withCtx(() => [
-						createElementVNode("div", _hoisted_1, [createVNode(BaseSelect_default, {
-							"model-value": unref(filters).status ?? "",
-							options: OPTIONS,
-							size: "sm",
-							"aria-label": "Filter by status",
-							"onUpdate:modelValue": _cache[0] || (_cache[0] = (v) => setFilter("status", v))
-						}, null, 8, ["model-value", "options"])]),
-						canChooseExperimentType.value ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(BaseSelect_default, {
-							"model-value": unref(filters).experimentType ?? "",
-							options: typeFilterOptions.value,
-							size: "sm",
-							"aria-label": "Filter by type",
-							"onUpdate:modelValue": _cache[1] || (_cache[1] = (v) => setFilter("experimentType", v))
-						}, null, 8, ["model-value", "options"])])) : createCommentVNode("", true),
+						(openBlock(true), createElementBlock(Fragment, null, renderList(filterMenus.value, (menu) => {
+							return openBlock(), createBlock(ActionMenu_default, {
+								key: menu.key,
+								label: menu.label,
+								items: menu.items,
+								onSelect: (item) => setFilter(menu.key, item.id)
+							}, {
+								trigger: withCtx(({ open: menuOpen, toggle, keydown }) => [createElementVNode("button", {
+									type: "button",
+									class: normalizeClass(["mint-experiment-selector__toggle", { "mint-experiment-selector__toggle--active": menu.activeLabel }]),
+									"aria-label": `${menu.label}: ${menu.activeLabel ?? menu.items[0].label}`,
+									"aria-haspopup": "menu",
+									"aria-expanded": menuOpen,
+									onClick: toggle,
+									onKeydown: keydown
+								}, [
+									menu.dotTone ? (openBlock(), createElementBlock("span", {
+										key: 0,
+										class: normalizeClass(["mint-experiment-selector__dot", `mint-experiment-selector__dot--${menu.dotTone}`]),
+										"aria-hidden": "true"
+									}, null, 2)) : (openBlock(), createBlock(resolveDynamicComponent(menu.icon), {
+										key: 1,
+										size: 13,
+										"aria-hidden": "true"
+									})),
+									createElementVNode("span", _hoisted_2, toDisplayString(menu.activeLabel ?? menu.label), 1),
+									createVNode(unref(ChevronDown), {
+										size: 12,
+										"aria-hidden": "true"
+									})
+								], 42, _hoisted_1)]),
+								_: 2
+							}, 1032, [
+								"label",
+								"items",
+								"onSelect"
+							]);
+						}), 128)),
 						createElementVNode("button", {
-							class: normalizeClass(["mint-experiment-selector__filters-toggle", { "mint-experiment-selector__filters-toggle--active": hasActiveAdvancedFilters.value }]),
 							type: "button",
-							"aria-expanded": showAdvanced.value,
-							onClick: _cache[2] || (_cache[2] = ($event) => showAdvanced.value = !showAdvanced.value)
-						}, [
-							_cache[8] || (_cache[8] = createElementVNode("svg", {
-								"aria-hidden": "true",
-								width: "14",
-								height: "14",
-								viewBox: "0 0 24 24",
-								fill: "none",
-								stroke: "currentColor",
-								"stroke-width": "2",
-								"stroke-linecap": "round",
-								"stroke-linejoin": "round"
-							}, [
-								createElementVNode("line", {
-									x1: "4",
-									y1: "6",
-									x2: "20",
-									y2: "6"
-								}),
-								createElementVNode("line", {
-									x1: "8",
-									y1: "12",
-									x2: "20",
-									y2: "12"
-								}),
-								createElementVNode("line", {
-									x1: "12",
-									y1: "18",
-									x2: "20",
-									y2: "18"
-								}),
-								createElementVNode("circle", {
-									cx: "6",
-									cy: "12",
-									r: "2"
-								}),
-								createElementVNode("circle", {
-									cx: "10",
-									cy: "18",
-									r: "2"
-								}),
-								createElementVNode("circle", {
-									cx: "6",
-									cy: "6",
-									r: "2"
-								})
-							], -1)),
-							_cache[9] || (_cache[9] = createTextVNode(" Filters ", -1)),
-							hasActiveAdvancedFilters.value ? (openBlock(), createElementBlock("span", _hoisted_4)) : createCommentVNode("", true)
-						], 10, _hoisted_3)
+							class: normalizeClass(["mint-experiment-selector__toggle", { "mint-experiment-selector__toggle--active": unref(filters).mine }]),
+							"aria-pressed": !!unref(filters).mine,
+							onClick: _cache[0] || (_cache[0] = ($event) => unref(filters).mine = unref(filters).mine ? void 0 : true)
+						}, [createVNode(unref(User), {
+							size: 13,
+							"aria-hidden": "true"
+						}), _cache[3] || (_cache[3] = createTextVNode(" Mine ", -1))], 10, _hoisted_3),
+						activeFilterCount.value ? (openBlock(), createElementBlock("button", {
+							key: 0,
+							type: "button",
+							class: "mint-experiment-selector__clear-filters",
+							onClick: clearFilters
+						}, " Clear " + toDisplayString(activeFilterCount.value), 1)) : createCommentVNode("", true)
 					]),
-					advanced: withCtx(() => [showAdvanced.value ? (openBlock(), createElementBlock("div", _hoisted_5, [
-						projectFilterOptions.value.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_6, [createVNode(BaseSelect_default, {
-							"model-value": unref(filters).project ?? "",
-							options: projectFilterOptions.value,
-							size: "sm",
-							"aria-label": "Filter by project",
-							"onUpdate:modelValue": _cache[3] || (_cache[3] = (v) => setFilter("project", v))
-						}, null, 8, ["model-value", "options"])])) : createCommentVNode("", true),
-						createElementVNode("div", _hoisted_7, [createVNode(BaseSelect_default, {
-							"model-value": unref(filters).datePreset ?? "",
-							options: unref(DATE_PRESET_OPTIONS),
-							size: "sm",
-							"aria-label": "Filter by date",
-							"onUpdate:modelValue": _cache[4] || (_cache[4] = (v) => setFilter("datePreset", v))
-						}, null, 8, ["model-value", "options"])]),
-						createElementVNode("div", _hoisted_8, [createVNode(BaseSelect_default, {
-							"model-value": unref(sortKey),
-							options: unref(SORT_OPTIONS),
-							size: "sm",
-							"aria-label": "Sort",
-							"onUpdate:modelValue": handleSortChange
-						}, null, 8, ["model-value", "options"])]),
-						createElementVNode("label", _hoisted_9, [withDirectives(createElementVNode("input", {
-							"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => groupToggle.value = $event),
-							type: "checkbox",
-							class: "mint-experiment-selector__group-checkbox"
-						}, null, 512), [[vModelCheckbox, groupToggle.value]]), _cache[10] || (_cache[10] = createTextVNode(" Group by project ", -1))])
-					])) : createCommentVNode("", true)]),
 					_: 1
 				}, 8, [
 					"search",
 					"items",
-					"groups",
 					"item-key",
 					"selected-key",
 					"loading",
 					"error"
-				])), __props.currentExperimentId != null ? (openBlock(), createElementBlock("div", _hoisted_10, [createElementVNode("button", {
+				])), __props.currentExperimentId != null ? (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("button", {
 					type: "button",
 					class: "mint-experiment-selector__clear-btn",
 					onClick: handleDeselect
@@ -524,4 +541,4 @@ var ExperimentSelectorModal_default = ExperimentSelectorModal_vue_vue_type_scrip
 //#endregion
 export { ExperimentSelectorModal_exports as n, useExperimentSelector as r, ExperimentSelectorModal_default as t };
 
-//# sourceMappingURL=ExperimentSelectorModal-D-9z7cNx.js.map
+//# sourceMappingURL=ExperimentSelectorModal-65peG4Up.js.map