@protobase/ui 0.19.12 → 0.19.13

package/dist/app/list-page.js

@@ -43,6 +43,8 @@ import { useDisplayRows } from "./displays/use-display-rows.js";
 import { useListScroll } from "./list-scroll.js";
 import { ListChart } from "./list-chart.js";
 import { ListSearch } from "./list-search.js";
+import { relatedColumnLoads } from "./related-dots/dot-card.js";
+import { withRelatedDotsColumns } from "./related-dots/related-dots-columns.js";
 import { SavedList } from "./saved/saved-list.js";
 import { SaveSearchButton } from "./searches/save-search-button.js";
 import { SavedSearches } from "./searches/saved-searches.js";
@@ -109,10 +111,12 @@ const LoadedList = ({ model, address, scope, heading }) => {
 	const view = meta.views[resource];
 	const fields = useMemo(() => widgetFields(view, model), [view, model]);
 	const { fields: fieldTypes } = useProjectUi();
-	const columns = useMemo(() => withFieldTypeCells(columnsFromModel(model, view), model, view, fieldTypes), [
+	const columns = useMemo(() => withRelatedDotsColumns(withFieldTypeCells(columnsFromModel(model, view), model, view, fieldTypes), model, view, meta.resources, meta.views), [
 		model,
 		view,
-		fieldTypes
+		fieldTypes,
+		meta.resources,
+		meta.views
 	]);
 	const filterText = address.filter;
 	const parsed = useMemo(() => textToState(fields, filterText), [fields, filterText]);
@@ -136,13 +140,20 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		view,
 		columns
 	]);
+	const related = useMemo(() => relatedColumnLoads(view, meta.resources, meta.views, loaded), [
+		view,
+		meta.resources,
+		meta.views,
+		loaded
+	]);
 	const rows = useLiveRows({
 		resources: meta.resources,
 		views: meta.views,
 		model,
 		columns: loaded,
 		filter: loadFilter,
-		orderBy
+		orderBy,
+		related
 	});
 	const display = shownDisplay(view, address.display);
 	const pageScroll = display?.kind !== "map";

package/dist/app/related-dots/card-place.js

@@ -0,0 +1,15 @@
+//#region src/app/related-dots/card-place.ts
+const gap = 6;
+/**
+* Where a card of `card`'s size goes for the dot at `dot`, in viewport pixels: below it, or above it when the viewport
+* has no room underneath, starting at its left edge and kept inside the viewport's sides.
+*/
+const placeCard = (dot, card, viewport) => {
+	const below = dot.bottom + gap;
+	return {
+		top: below + card.height > viewport.height - gap ? Math.max(gap, dot.top - gap - card.height) : below,
+		left: Math.max(gap, Math.min(dot.left, viewport.width - gap - card.width))
+	};
+};
+//#endregion
+export { placeCard };

package/dist/app/related-dots/dot-card.js

@@ -0,0 +1,26 @@
+import { displaysOf, shownFields } from "../displays/list-displays.js";
+//#region src/app/related-dots/dot-card.ts
+/**
+* The card a dot shows of its record: the first cards display of the record's view, without the photos and favorite
+* button a small card has no room for, else the record's title with its status as the badge.
+*/
+const dotCard = (view, status) => {
+	const cards = displaysOf(view).find((display) => display.kind === "cards");
+	if (!cards) return {
+		kind: "cards",
+		name: "dot",
+		badge: status
+	};
+	const { photos: _, favorite: __, ...card } = cards;
+	return card;
+};
+/** What the list loads for the related columns of its view among `columns`: each with the fields its dots' cards show. */
+const relatedColumnLoads = (view, resources, views, columns) => (view?.list?.relatedColumns ?? []).filter((column) => columns.includes(column.name)).flatMap((column) => {
+	const target = resources[column.resource];
+	return target ? [{
+		column,
+		fields: shownFields(target, views[target.name], dotCard(views[target.name], column.status))
+	}] : [];
+});
+//#endregion
+export { dotCard, relatedColumnLoads };

package/dist/app/related-dots/dots-summary.js

@@ -0,0 +1,15 @@
+//#region src/app/related-dots/dots-summary.ts
+/**
+* What a related column's dots say, as text: how many records there are, then how many have each status, in the order
+* of the status's values, such as "4 tasks: 1 To do, 3 Done". "No tasks" without any.
+*/
+const dotsSummary = (statuses, { values, label, singular, plural }) => {
+	if (statuses.length === 0) return `No ${plural}`;
+	const counts = /* @__PURE__ */ new Map();
+	for (const status of statuses) if (status !== null && status !== void 0) counts.set(String(status), (counts.get(String(status)) ?? 0) + 1);
+	const parts = [...values, ...[...counts.keys()].filter((value) => !values.includes(value))].filter((value) => counts.has(value)).map((value) => `${counts.get(value)} ${label(value)}`);
+	const total = `${statuses.length} ${statuses.length === 1 ? singular : plural}`;
+	return parts.length === 0 ? total : `${total}: ${parts.join(", ")}`;
+};
+//#endregion
+export { dotsSummary };

package/dist/app/related-dots/related-dots-columns.js

@@ -0,0 +1,38 @@
+import { humanize } from "../../live/naming.js";
+import { headerWidth, listColumnNames } from "../../live/columns-from-model.js";
+import { RelatedDots } from "./related-dots.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/related-dots/related-dots-columns.tsx
+/**
+* The list's columns with its view's related columns among them, in the order the view lists them: each draws its
+* records, which the list loads with its rows under the column's name, as dots.
+*/
+const withRelatedDotsColumns = (columns, model, view, resources, views) => {
+	const related = view?.list?.relatedColumns ?? [];
+	if (related.length === 0) return columns;
+	const byId = new Map(columns.map((spec) => [spec.id, spec]));
+	return listColumnNames(model, view).flatMap((name) => {
+		const field = byId.get(name);
+		if (field) return [field];
+		const column = related.find((candidate) => candidate.name === name);
+		const target = column && resources[column.resource];
+		if (!column || !target) return [];
+		const header = column.label ?? humanize(column.name);
+		return [{
+			id: column.name,
+			header,
+			kind: "text",
+			width: 160,
+			minWidth: headerWidth(header, false),
+			sortable: false,
+			render: (row) => /* @__PURE__ */ jsx(RelatedDots, {
+				column,
+				records: row[column.name] ?? [],
+				target,
+				view: views[target.name]
+			})
+		}];
+	});
+};
+//#endregion
+export { withRelatedDotsColumns };

package/dist/app/related-dots/related-dots.js

@@ -0,0 +1,170 @@
+import { cn } from "../../lib/cn.js";
+import { toneDots } from "../../primitives/badge.js";
+import { recordTitleField } from "../../live/model-helpers.js";
+import { humanize } from "../../live/naming.js";
+import { displayValue } from "../../live/display-value.js";
+import { displayRow } from "../displays/list-displays.js";
+import { AppLink } from "../use-app-address.js";
+import { toneFor } from "../../live/columns-from-model.js";
+import { valueColor } from "../../live/value-color.js";
+import { RecordCard } from "../displays/record-card.js";
+import { dotCard } from "./dot-card.js";
+import { placeCard } from "./card-place.js";
+import { dotsSummary } from "./dots-summary.js";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/app/related-dots/related-dots.tsx
+const hideMs = 150;
+const cardWidth = 288;
+/**
+* The card of the dot that is hovered, focused or tapped, portalled to the body: every grid row is its own stacking
+* context and the grid body clips, so a card inside the row would sit under the rows below it.
+*/
+const DotCardPopover = ({ shown, row, target, view, column, onEnter, onLeave }) => {
+	const card = useRef(null);
+	const [place, setPlace] = useState();
+	useLayoutEffect(() => {
+		if (!card.current) return;
+		setPlace(placeCard(shown.dot, {
+			width: cardWidth,
+			height: card.current.offsetHeight
+		}, {
+			width: window.innerWidth,
+			height: window.innerHeight
+		}));
+	}, [shown]);
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		ref: card,
+		"data-dot-card": true,
+		onMouseEnter: onEnter,
+		onMouseLeave: onLeave,
+		style: {
+			width: cardWidth,
+			...place ?? {
+				visibility: "hidden",
+				top: 0,
+				left: 0
+			}
+		},
+		className: "fixed z-50 rounded-lg shadow-pop",
+		children: /* @__PURE__ */ jsx(RecordCard, {
+			model: target,
+			view,
+			display: dotCard(view, column.status),
+			row
+		})
+	}), document.body);
+};
+/**
+* A related column's cell: a dot per record in the colour its status has in its view, each a link to the record. Hovering
+* or focusing a dot shows the record's card; on a touch screen the first tap shows it, and the card opens the record.
+* The dots say how many records have each status to a screen reader.
+*/
+const RelatedDots = ({ column, records, target, view }) => {
+	const rows = useMemo(() => records.map((record) => displayRow(target, record)), [records, target]);
+	const [shown, setShown] = useState();
+	const hideTimer = useRef(void 0);
+	const pointer = useRef("mouse");
+	const box = useRef(null);
+	const status = target.fields[column.status];
+	const hints = view?.fields[column.status];
+	const statusText = (row) => status ? displayValue(status, row.record[column.status], hints) : "";
+	const titleField = recordTitleField(target, view);
+	const title = (row) => row.labels[titleField] ?? String(row.record[titleField] ?? row.key);
+	const singular = (view?.names?.singular ?? humanize(target.name)).toLowerCase();
+	const plural = (view?.names?.plural ?? humanize(target.name)).toLowerCase();
+	const summary = dotsSummary(rows.map((row) => row.record[column.status]), {
+		values: status?.enumValues ?? [],
+		label: (value) => status ? displayValue(status, value, hints) : value,
+		singular,
+		plural
+	});
+	const cancelHide = () => window.clearTimeout(hideTimer.current);
+	const hideSoon = () => {
+		cancelHide();
+		hideTimer.current = window.setTimeout(() => setShown(void 0), hideMs);
+	};
+	const show = (key, dot) => {
+		cancelHide();
+		setShown({
+			key,
+			dot: dot.getBoundingClientRect()
+		});
+	};
+	useEffect(() => cancelHide, []);
+	useEffect(() => {
+		if (!shown) return;
+		const hide = () => setShown(void 0);
+		const key = (event) => event.key === "Escape" && hide();
+		const outside = (event) => {
+			const target = event.target;
+			if (!box.current?.contains(target) && !target?.closest?.("[data-dot-card]")) hide();
+		};
+		document.addEventListener("keydown", key);
+		document.addEventListener("pointerdown", outside);
+		document.addEventListener("scroll", hide, true);
+		window.addEventListener("resize", hide);
+		return () => {
+			document.removeEventListener("keydown", key);
+			document.removeEventListener("pointerdown", outside);
+			document.removeEventListener("scroll", hide, true);
+			window.removeEventListener("resize", hide);
+		};
+	}, [shown]);
+	const tap = (key) => (event) => {
+		if (pointer.current !== "touch" || shown?.key === key) return;
+		event.preventDefault();
+		show(key, event.currentTarget);
+	};
+	const blur = (event) => {
+		if (!event.relatedTarget?.closest?.("[data-dot-card]")) hideSoon();
+	};
+	const shownRow = shown && rows.find((row) => row.key === shown.key);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: box,
+		className: "flex min-w-0 items-center gap-0.5",
+		onClick: (event) => event.stopPropagation(),
+		onPointerDown: (event) => pointer.current = event.pointerType,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: summary
+			}),
+			rows.map((row) => {
+				const value = row.record[column.status];
+				const color = valueColor(hints?.valueColors, value);
+				return /* @__PURE__ */ jsx(AppLink, {
+					to: {
+						kind: "record",
+						resource: target.name,
+						key: row.key
+					},
+					"aria-label": `${title(row)}, ${statusText(row)}`,
+					onPointerEnter: (event) => event.pointerType !== "touch" && show(row.key, event.currentTarget),
+					onPointerLeave: (event) => event.pointerType !== "touch" && hideSoon(),
+					onFocus: (event) => event.currentTarget.matches(":focus-visible") && show(row.key, event.currentTarget),
+					onBlur: blur,
+					onClick: tap(row.key),
+					className: "flex shrink-0 items-center justify-center rounded-full p-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 pointer-coarse:p-1.5",
+					children: /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						style: color === void 0 ? void 0 : { backgroundColor: color },
+						className: cn("size-2.5 rounded-full", color === void 0 && toneDots[toneFor(String(value))], shown?.key === row.key && "ring-2 ring-foreground/30")
+					})
+				}, row.key);
+			}),
+			shown && shownRow && /* @__PURE__ */ jsx(DotCardPopover, {
+				shown,
+				row: shownRow,
+				target,
+				view,
+				column,
+				onEnter: cancelHide,
+				onLeave: hideSoon
+			})
+		]
+	});
+};
+//#endregion
+export { RelatedDots };

package/dist/live/grid-loader.js

@@ -2,15 +2,17 @@ import { keys } from "../data/query-keys.js";
 import { recordId } from "./model-helpers.js";
 import { listPhotos, withPhotos } from "./row-photos.js";
 import { listLabels, withLabels } from "./relation-labels.js";
+import { loadRelatedColumn } from "./related-column-rows.js";
 //#region src/live/grid-loader.ts
 const exactBelow = 5e3;
 /**
 * Loads fixed-size pages by number. The page after a cached or loading one follows that page's `next_page_token`; a
 * jump to a page whose predecessor is neither asks `:seek` for the page at that row position, so the pages of one jump
-* are read on from a single seek. Every page is cached by TanStack Query.
+* are read on from a single seek. Every page is cached by TanStack Query, with the records of its related columns.
 */
-const createGridLoader = ({ queryClient, client, resources, views, model, columns, filter, orderBy }) => {
-	const pageKey = (number) => keys.page(model.name, filter, orderBy, 40, number);
+const createGridLoader = ({ queryClient, client, resources, views, model, columns, filter, orderBy, related = [] }) => {
+	const relatedNames = related.map((load) => load.column.name).join(",");
+	const pageKey = (number) => related.length === 0 ? keys.page(model.name, filter, orderBy, 40, number) : [...keys.page(model.name, filter, orderBy, 40, number), relatedNames];
 	const labels = listLabels(resources, views, model, columns);
 	const photos = listPhotos(views[model.name]);
 	/** The server's total is a planner estimate, off by a lot for small results; settle those exactly. */
@@ -60,9 +62,18 @@ const createGridLoader = ({ queryClient, client, resources, views, model, column
 			nextPageToken: ""
 		};
 		const ids = result.items.map((record) => recordId(model, record));
+		const labelled = withLabels(resources, model, columns, withPhotos(model, result.items, result.photos), result.labels);
+		const shown = await Promise.all(related.map((load) => loadRelatedColumn({
+			client,
+			resources,
+			views,
+			load,
+			owners: ids
+		})));
 		return {
-			rows: withLabels(resources, model, columns, withPhotos(model, result.items, result.photos), result.labels).map((record, index) => ({
+			rows: labelled.map((record, index) => ({
 				...record,
+				...Object.fromEntries(related.map((load, column) => [load.column.name, shown[column].get(ids[index]) ?? []])),
 				id: ids[index]
 			})),
 			total: page === 0 ? await firstPageTotal(result) : result.totalSizeEstimate,

package/dist/live/related-column-rows.js

@@ -0,0 +1,70 @@
+import { listLabels, withLabels } from "./relation-labels.js";
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/live/related-column-rows.ts
+const where = createWhere();
+const and = (...parts) => {
+	const given = parts.filter((part) => Boolean(part));
+	return given.length === 1 ? given[0] : given.map((part) => `(${part})`).join(" AND ");
+};
+const text = (value) => value === null || value === void 0 ? void 0 : String(value);
+/**
+* The records of each owner, in the order `records` come in: a record belongs to every owner one of whose `links`
+* (`[owner, value]`) holds its `field`'s value. A relation's value may come labelled as `{ id, name }`.
+*/
+const groupByOwner = (links, records, field) => {
+	const owners = /* @__PURE__ */ new Map();
+	for (const [owner, value] of links) owners.set(value, (owners.get(value) ?? /* @__PURE__ */ new Set()).add(owner));
+	const grouped = /* @__PURE__ */ new Map();
+	for (const record of records) {
+		const raw = record[field];
+		const value = text(typeof raw === "object" && raw !== null && "id" in raw ? raw.id : raw);
+		for (const owner of value === void 0 ? [] : owners.get(value) ?? []) grouped.set(owner, [...grouped.get(owner) ?? [], record]);
+	}
+	return grouped;
+};
+const linksOf = async (client, resources, column, owners) => {
+	const through = column.through;
+	if (!through) return owners.map((owner) => [owner, owner]);
+	const via = resources[through.resource];
+	const key = through.key ?? via?.primaryKey[0];
+	if (!via || key === void 0) throw new Error(`The related column ${column.name} names a join resource the app does not have: ${through.resource}`);
+	return (await client.search(via.name, {
+		filter: and(printFilter(where.in(through.field, owners)), through.filter),
+		fields: [through.field, key],
+		pageSize: 500
+	})).items.flatMap((row) => {
+		const owner = text(row[through.field]);
+		const value = text(row[key]);
+		return owner === void 0 || value === void 0 ? [] : [[owner, value]];
+	});
+};
+/**
+* The records a related column shows for each of `owners`, the keys of one page of the list's rows: its join records in
+* one request, then the records they pick in another, in the column's order, their relations labelled.
+*/
+const loadRelatedColumn = async ({ client, resources, views, load, owners }) => {
+	const { column, fields } = load;
+	const target = resources[column.resource];
+	if (!target) throw new Error(`The related column ${column.name} shows a resource the app does not have: ${column.resource}`);
+	if (owners.length === 0) return /* @__PURE__ */ new Map();
+	const links = await linksOf(client, resources, column, owners);
+	const values = [...new Set(links.map(([, value]) => value))];
+	if (values.length === 0) return /* @__PURE__ */ new Map();
+	const loaded = [.../* @__PURE__ */ new Set([
+		...target.primaryKey,
+		column.field,
+		column.status,
+		...fields
+	])];
+	const labels = listLabels(resources, views, target, loaded);
+	const page = await client.search(target.name, {
+		filter: and(printFilter(where.in(column.field, values)), column.filter),
+		...column.sort && { orderBy: column.sort },
+		fields: loaded,
+		pageSize: 500,
+		labels
+	});
+	return groupByOwner(links, withLabels(resources, target, loaded, page.items, page.labels), column.field);
+};
+//#endregion
+export { groupByOwner, loadRelatedColumn };

package/dist/live/use-live-rows.js

@@ -8,10 +8,11 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 * A grid row source backed by the API; `total` is the server's estimate from the first page. `page` loads one page of
 * the same rows by number, and `key` names them in the query cache, for list displays that page through them.
 */
-const useLiveRows = ({ resources, views, model, columns, filter, orderBy }) => {
+const useLiveRows = ({ resources, views, model, columns, filter, orderBy, related }) => {
 	const client = useClient();
 	const queryClient = useQueryClient();
 	const columnKey = columns.join(",");
+	const relatedKey = JSON.stringify(related ?? []);
 	const loader = useMemo(() => createGridLoader({
 		queryClient,
 		client,
@@ -20,7 +21,8 @@ const useLiveRows = ({ resources, views, model, columns, filter, orderBy }) => {
 		model,
 		columns,
 		filter,
-		orderBy
+		orderBy,
+		...related && { related }
 	}), [
 		queryClient,
 		client,
@@ -29,7 +31,8 @@ const useLiveRows = ({ resources, views, model, columns, filter, orderBy }) => {
 		model,
 		columnKey,
 		filter,
-		orderBy
+		orderBy,
+		relatedKey
 	]);
 	const first = useQuery({
 		queryKey: [...keys.first(model.name, filter, orderBy), columnKey],

package/dist/package.js

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

package/dist/primitives/badge.js

@@ -10,7 +10,8 @@ const tones = {
 	red: "bg-danger-soft text-danger-text",
 	violet: "bg-violet-soft text-violet-text"
 };
-const dots = {
+/** The dot of a badge in each tone, for a status drawn as a dot alone. */
+const toneDots = {
 	neutral: "bg-faint-foreground",
 	blue: "bg-primary",
 	green: "bg-success",
@@ -28,7 +29,7 @@ const Badge = ({ tone = "neutral", dot = true, color, shape, children, className
 		...shape === "arrow" && { clipPath: arrow }
 	},
 	className: cn(shape === "arrow" ? "inline-flex h-5 items-center gap-1.5 rounded-l-sm pr-4 pl-2 text-xs font-semibold whitespace-nowrap" : "inline-flex h-5 items-center gap-1.5 rounded-full px-2 text-xs font-medium whitespace-nowrap", color === void 0 && tones[tone], className),
-	children: [dot && color === void 0 && shape === void 0 && /* @__PURE__ */ jsx("span", { className: cn("size-1.5 rounded-full", dots[tone]) }), children]
+	children: [dot && color === void 0 && shape === void 0 && /* @__PURE__ */ jsx("span", { className: cn("size-1.5 rounded-full", toneDots[tone]) }), children]
 });
 //#endregion
-export { Badge };
+export { Badge, toneDots };