@protobase/ui 0.55.1 → 0.55.3

package/dist/live/title-rows.js

@@ -0,0 +1,47 @@
+import { keys } from "../data/query-keys.js";
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/live/title-rows.ts
+const where$1 = createWhere();
+/** The fields a derived title reads, when a single-key `target`'s view derives its titles from fields the reader may read. */
+const derivedTitleFields = (target, view) => {
+	const from = view?.titleFrom;
+	if (!from || from.unreadable || target.primaryKey.length !== 1) return;
+	return from.fields;
+};
+/** Where the fields a record's derived title reads are cached, `{ row }` with `row` null for a record not found. */
+const titleRowKey = (target, id, fields) => keys.titleRow(target.name, id, fields.join(","));
+/** The key and `fields` of the records `ids` of `target`, in one list call, by key. */
+const readTitleRows = async (client, target, fields, ids) => {
+	const keyField = target.primaryKey[0];
+	const unique = [...new Set(ids)];
+	if (unique.length === 0) return /* @__PURE__ */ new Map();
+	const page = await client.list(target.name, {
+		filter: printFilter(where$1.in(keyField, unique)),
+		fields: [keyField, ...fields],
+		pageSize: unique.length
+	});
+	return new Map(page.items.map((item) => [String(item[keyField]), item]));
+};
+/**
+* Reads, for one page of `rows`, the fields the derived titles of the records their relations among `columns` point at
+* read: one list call per target resource, each record cached under its `titleRowKey`, so the cells titling them for
+* the reader ask nothing more.
+*/
+const seedTitleRows = async (queryClient, client, resources, views, model, columns, rows) => {
+	const ids = /* @__PURE__ */ new Map();
+	for (const name of columns) {
+		const field = model.fields[name];
+		const target = field?.type === "relation" && field.relation ? resources[field.relation.resource] : void 0;
+		if (!target || !derivedTitleFields(target, views[target.name])) continue;
+		const values = rows.flatMap((row) => row[name] == null ? [] : [String(row[name])]);
+		ids.set(target.name, [...ids.get(target.name) ?? [], ...values]);
+	}
+	await Promise.all([...ids].map(async ([name, wanted]) => {
+		const target = resources[name];
+		const fields = derivedTitleFields(target, views[name]);
+		const found = await readTitleRows(client, target, fields, wanted);
+		for (const id of new Set(wanted)) queryClient.setQueryData(titleRowKey(target, id, fields), { row: found.get(id) ?? null });
+	}));
+};
+//#endregion
+export { derivedTitleFields, readTitleRows, seedTitleRows, titleRowKey };

package/dist/live/use-filter-config.js

@@ -3,6 +3,7 @@ import { useClient } from "../data/api-provider.js";
 import { humanize } from "./naming.js";
 import { labelFieldOf } from "./model-helpers.js";
 import { fetchLabels } from "./relation-labels.js";
+import { derivedTitleFields, readTitleRows } from "./title-rows.js";
 import { setRange } from "../filter-panel/filter-state.js";
 import { stateToText } from "./filter-string.js";
 import { rangeFormat, rangeHistogram, widgetFields } from "./view-fields.js";
@@ -16,7 +17,7 @@ const histogramBuckets = 24;
 * The panel's config for a view: facet counts come from `:facets` and each range's bounds from `:histogram`, each
 * computed with every other active filter applied but not its own, so choosing one value does not hide the rest.
 */
-const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
+const useFilterConfig = ({ model, resources, views, view, state, extras, titleOf }) => {
 	const client = useClient();
 	const queryClient = useQueryClient();
 	const skeleton = widgetFields(view, model);
@@ -25,6 +26,7 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 		const field = model.fields[name];
 		return field?.type === "relation" && field.relation ? resources[field.relation.resource] : void 0;
 	};
+	const derives = (target) => Boolean(target && views[target.name]?.titleFrom);
 	const counted = skeleton.facets.flatMap((group) => (group.flags ? group.options.map((option) => option.value) : [group.id]).map((field) => ({
 		group: group.id,
 		field
@@ -38,7 +40,7 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 			}
 		}, extras);
 		const target = targetOf(field);
-		const label = target?.primaryKey.length === 1 ? labelFieldOf(target, views[target.name]) : void 0;
+		const label = target?.primaryKey.length === 1 && !derives(target) ? labelFieldOf(target, views[target.name]) : void 0;
 		return {
 			queryKey: keys.facets(model.name, field, filter),
 			queryFn: () => client.facets(model.name, field, {
@@ -49,19 +51,34 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 		};
 	}) });
 	const counts = (group, field) => facetQueries[counted.findIndex((entry) => entry.group === group && entry.field === field)]?.data;
+	const countedKeys = (group) => (counts(group, group) ?? []).flatMap((facet) => facet.value === null ? [] : [String(facet.value)]);
 	const labelQueries = useQueries({ queries: skeleton.facets.map((group) => {
 		const target = targetOf(group.id);
-		const ids = labelKeys((counts(group.id, group.id) ?? []).flatMap((facet) => facet.value === null ? [] : [String(facet.value)]), state.facets[group.id] ?? []);
+		const ids = labelKeys(countedKeys(group.id), state.facets[group.id] ?? []);
 		return {
 			queryKey: keys.labels(`facet:${model.name}.${group.id}`, ids.join(",")),
-			enabled: Boolean(target) && ids.length > 0,
+			enabled: Boolean(target) && !derives(target) && ids.length > 0,
 			queryFn: async () => [...await fetchLabels(queryClient, client, target, ids, views[target.name])]
 		};
 	}) });
+	const titleQueries = useQueries({ queries: skeleton.facets.map((group) => {
+		const target = targetOf(group.id);
+		const fields = target && derives(target) ? derivedTitleFields(target, views[target.name]) : void 0;
+		const ids = [.../* @__PURE__ */ new Set([...countedKeys(group.id), ...state.facets[group.id] ?? []])];
+		return {
+			queryKey: keys.labels(`facet-title:${model.name}.${group.id}`, ids.join(",")),
+			enabled: fields !== void 0 && ids.length > 0,
+			queryFn: async () => [...await readTitleRows(client, target, fields, ids)]
+		};
+	}) });
+	const titled = (group, index) => {
+		const target = targetOf(group);
+		return (titleQueries[index]?.data ?? []).map(([id, row]) => [id, titleOf(target, views[target.name], row, id)]);
+	};
 	const searches = useReferenceSearch(skeleton.facets.map((group) => ({
 		id: group.id,
 		target: group.combobox ? targetOf(group.id) : void 0
-	})), views);
+	})), views, titleOf);
 	const ranges = skeleton.ranges ?? [];
 	const histogramQueries = useQueries({ queries: ranges.map((range) => {
 		const filter = stateToText(skeleton, setRange(state, range.id, void 0), extras);
@@ -88,7 +105,11 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 		}
 		const field = model.fields[group.id];
 		const named = (counts(group.id, group.id) ?? []).flatMap((facet) => facet.label === void 0 ? [] : [[String(facet.value), facet.label]]);
-		const names = new Map([...named, ...labelQueries[index]?.data ?? []]);
+		const names = new Map([
+			...named,
+			...labelQueries[index]?.data ?? [],
+			...titled(group.id, index)
+		]);
 		const values = (counts(group.id, group.id) ?? []).flatMap((facet) => facet.value === null ? [] : [{
 			value: String(facet.value),
 			label: field?.type === "enum" ? enumLabel(String(facet.value), view?.fields[group.id]?.valueLabels) : names.get(String(facet.value)) ?? String(facet.value),

package/dist/live/use-reference-search.js

@@ -8,12 +8,21 @@ const where$1 = createWhere();
 /**
 * The search text typed into each facet's combobox and the records of its target resource that match it. A facet
 * without a target, or whose target has no search fields or a composite key, gets nothing: its options are filtered
-* by name instead.
+* by name instead. A target whose view derives its titles names its records by `titleOf`, for the reader.
 */
-const useReferenceSearch = (targets, views) => {
+const useReferenceSearch = (targets, views, titleOf) => {
 	const client = useClient();
 	const [texts, setTexts] = useState({});
 	const searchable = (target) => Boolean(target?.search?.length) && target.primaryKey.length === 1;
+	const nameFields = (target) => {
+		const view = views[target.name];
+		return [target.primaryKey[0], ...view?.titleFrom ? view.titleFrom.fields : [labelFieldOf(target, view)]];
+	};
+	const named = (target, item) => {
+		const view = views[target.name];
+		const key = String(item[target.primaryKey[0]]);
+		return [key, view?.titleFrom ? titleOf(target, view, item, key) : String(item[labelFieldOf(target, view)])];
+	};
 	const results = useQueries({ queries: targets.map(({ id, target }) => {
 		const text = (texts[id] ?? "").trim();
 		return {
@@ -26,13 +35,11 @@ const useReferenceSearch = (targets, views) => {
 			enabled: searchable(target) && text !== "",
 			placeholderData: keepPreviousData,
 			queryFn: async () => {
-				const keyField = target.primaryKey[0];
-				const labelField = labelFieldOf(target, views[target.name]);
 				return (await client.list(target.name, {
 					filter: printFilter(where$1.search(text)),
-					fields: [keyField, labelField],
+					fields: nameFields(target),
 					pageSize: 20
-				})).items.map((item) => [String(item[keyField]), String(item[labelField])]);
+				})).items;
 			}
 		};
 	}) });
@@ -45,7 +52,7 @@ const useReferenceSearch = (targets, views) => {
 		if ((texts[id] ?? "").trim() === "") return { onSearch };
 		return {
 			onSearch,
-			matches: results[index]?.data ?? []
+			matches: (results[index]?.data ?? []).map((item) => named(target, item))
 		};
 	});
 };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.55.1";
+var version = "0.55.3";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };