@antelopejs/dms-database 0.1.2 → 0.2.1

package/frontend-vue/app/build/composables/useTableCounts.ts

@@ -0,0 +1,50 @@
+import type { Ref } from 'vue'
+import { isFilterToken } from './useDataBrowserGrid'
+import { DEFAULT_INSTANCE_VALUE } from './useDataBrowserTabs'
+
+const TABLES_ENDPOINT = '/api/database/browse/tables'
+
+interface TableEntry {
+	name: string
+	elementCount: number
+}
+
+/**
+ * The rows of each table of a schema in one instance, for the data browser's
+ * table list. A server render reads them and hands them over with the page;
+ * another schema or instance is read once picked. No count shows while they
+ * load, nor once they failed: `failed` says so.
+ */
+export function useTableCounts(
+	schema: Ref<string | null>,
+	instance: Ref<string>,
+) {
+	const { data, status } = useApiData<{ items: TableEntry[] }>(
+		() => (schema.value ? TABLES_ENDPOINT : null),
+		{
+			query: () => {
+				const query: Record<string, string> = {
+					filter_schema: isFilterToken(schema.value ?? ''),
+				}
+				if (instance.value !== DEFAULT_INSTANCE_VALUE)
+					query.filter_instance = isFilterToken(instance.value)
+				return query
+			},
+		},
+	)
+
+	return {
+		/** Rows by table name. */
+		counts: computed<Record<string, number>>(() =>
+			status.value === 'success'
+				? Object.fromEntries(
+						(data.value?.items ?? []).map((item) => [
+							item.name,
+							item.elementCount,
+						]),
+					)
+				: {},
+		),
+		failed: computed(() => status.value === 'error'),
+	}
+}

package/frontend-vue/app/build/data/stagedWrites.ts

@@ -20,11 +20,11 @@ function statusOf(error: unknown): number | undefined {
 	return failure?.statusCode ?? failure?.status
 }
 
-export async function writeRows(
+export async function writeRows<T = unknown>(
 	rows: Iterable<[string, Record<string, unknown>]>,
-	write: (rowId: string, body: Record<string, unknown>) => Promise<unknown>,
-	/** Called once a row is settled: written, or gone. */
-	onSettled?: (rowId: string) => void,
+	write: (rowId: string, body: Record<string, unknown>) => Promise<T>,
+	/** Called once a row is settled: written, with the write's answer, or gone. */
+	onSettled?: (rowId: string, answer?: T) => void,
 ): Promise<RowWriteOutcome> {
 	const outcome: RowWriteOutcome = {
 		written: [],
@@ -37,8 +37,9 @@ export async function writeRows(
 			outcome.left.push(rowId)
 			continue
 		}
+		let answer: T | undefined
 		try {
-			await write(rowId, body)
+			answer = await write(rowId, body)
 			outcome.written.push(rowId)
 		} catch (error) {
 			if (statusOf(error) !== NOT_FOUND) {
@@ -49,7 +50,7 @@ export async function writeRows(
 			}
 			outcome.gone.push(rowId)
 		}
-		onSettled?.(rowId)
+		onSettled?.(rowId, answer)
 	}
 	return outcome
 }
@@ -62,3 +63,42 @@ export function changesOf<T extends { rowId: string }>(
 	const rows = new Set(rowIds)
 	return changes.filter((change) => rows.has(change.rowId))
 }
+
+/** How the rows of a grid page are narrowed and ordered. */
+export interface PageRefinement {
+	sortKey: string | null
+	search: string
+	/** The fields a column filter narrows, with a value. */
+	filtered: string[]
+}
+
+/**
+ * Whether writing `fields` may take rows in or out of the page, or move them
+ * in it: a field it is sorted or filtered by, or any field while a search
+ * runs (it matches every column). The page is then read again; otherwise
+ * the rows written stay where they are, as the server answered them.
+ */
+export function mayMoveRows(
+	fields: Iterable<string>,
+	refinement: PageRefinement,
+): boolean {
+	if (refinement.search !== '') return true
+	const narrowing = new Set(refinement.filtered)
+	if (refinement.sortKey) narrowing.add(refinement.sortKey)
+	for (const field of fields) if (narrowing.has(field)) return true
+	return false
+}
+
+/**
+ * `rows` with the row the server answered a write with in place of the one of
+ * the same id: the fields it holds replace theirs, the browse-only ones stay.
+ */
+export function withWrittenRow(
+	rows: Record<string, unknown>[],
+	written: Record<string, unknown>,
+	idOf: (row: Record<string, unknown>) => string | null,
+): Record<string, unknown>[] {
+	const id = idOf(written)
+	if (id === null) return rows
+	return rows.map((row) => (idOf(row) === id ? { ...row, ...written } : row))
+}

package/frontend-vue/app/build/data/useStagedSave.ts

@@ -12,9 +12,10 @@ import { changesOf, type RowWriteOutcome, writeRows } from './stagedWrites'
 // Writes the staged edits of a tab after the user reviewed them, then offers
 // to take them back for a few seconds, in the save bar of the current tab
 // (another tab ends the offer). Each row is written with one call of the
-// edit route; an undo writes the previous values back the same way. Only the
-// rows written are announced and undone: a row gone meanwhile drops its
-// changes, and a failure stops the save with the rows left still staged.
+// edit route, which answers with the row as stored; an undo writes the
+// previous values back the same way. Only the rows written are announced and
+// undone: a row gone meanwhile drops its changes, and a failure stops the
+// save with the rows left still staged.
 
 const EDIT_ENDPOINT = '/api/database/browse/edit'
 const UNDO_WINDOW_MS = 10_000
@@ -27,9 +28,19 @@ interface SaveNotice {
 	scope: string
 }
 
+/** What a save or an undo wrote, once it is settled. */
+export interface SavedChanges {
+	/** The fields written. */
+	fields: string[]
+	/** Rows gone meanwhile, which the page may still show. */
+	gone: number
+}
+
 interface StagedSaveOptions {
 	tab: () => BrowserTab
-	onSaved: () => void
+	/** A row written, as the server answered: shown at once in place of the one read. */
+	onWritten: (tab: BrowserTab, row: Record<string, unknown>) => void
+	onSaved: (saved: SavedChanges) => void
 }
 
 /** The server's reason when it gave one, else the error's own message. */
@@ -41,6 +52,10 @@ function messageOf(error: unknown): string {
 	return error instanceof Error ? error.message : String(error)
 }
 
+function fieldsOf(changes: StagedChange[]): string[] {
+	return [...new Set(changes.map((change) => change.field))]
+}
+
 export function useStagedSave(options: StagedSaveOptions) {
 	const { t, n } = useI18n()
 	const { $authFetch } = useAuthFetch()
@@ -85,12 +100,13 @@ export function useStagedSave(options: StagedSaveOptions) {
 		return `${tab.schema}.${tab.table} ${badge}`
 	}
 
-	async function writeRow(
+	/** Writes a row, and answers with it as the server now stores it. */
+	function writeRow(
 		tab: BrowserTab,
 		rowId: string,
 		body: Record<string, unknown>,
-	) {
-		await $authFetch(EDIT_ENDPOINT, {
+	): Promise<Record<string, unknown>> {
+		return $authFetch<Record<string, unknown>>(EDIT_ENDPOINT, {
 			method: 'PUT',
 			query: { ...browseSelectionQuery(tab), id: rowId },
 			body,
@@ -135,8 +151,13 @@ export function useStagedSave(options: StagedSaveOptions) {
 		)
 	}
 
-	// Each row written (or gone) leaves the staged edits at once: a failure
-	// further on keeps only the rows not written.
+	/** Shows a row written as the server answered it. */
+	function showWritten(tab: BrowserTab, row: Record<string, unknown> | undefined) {
+		if (row) options.onWritten(tab, row)
+	}
+
+	// Each row written (or gone) leaves the staged edits at once, its answer
+	// shown in its place: a failure further on keeps only the rows not written.
 	function saveAll(tab: BrowserTab): Promise<RowWriteOutcome> {
 		const rows = staged
 			.rowIds(tab.id)
@@ -147,7 +168,10 @@ export function useStagedSave(options: StagedSaveOptions) {
 		return writeRows(
 			rows,
 			(rowId, body) => writeRow(tab, rowId, body),
-			(rowId) => staged.discard(tab.id, [rowId]),
+			(rowId, row) => {
+				showWritten(tab, row)
+				staged.discard(tab.id, [rowId])
+			},
 		)
 	}
 
@@ -202,6 +226,7 @@ export function useStagedSave(options: StagedSaveOptions) {
 		const outcome = await writeRows(
 			undoBodies(current.changes),
 			(rowId, body) => writeRow(tab, rowId, body),
+			(_rowId, row) => showWritten(tab, row),
 		)
 		const restored = changesOf(current.changes, outcome.written)
 		const gone = changesOf(current.changes, outcome.gone)
@@ -243,7 +268,10 @@ export function useStagedSave(options: StagedSaveOptions) {
 				),
 				color: 'warning',
 			})
-		options.onSaved()
+		options.onSaved({
+			fields: fieldsOf(current.changes),
+			gone: outcome.gone.length,
+		})
 	}
 
 	function announce(tab: BrowserTab, saved: StagedChange[]) {
@@ -259,6 +287,7 @@ export function useStagedSave(options: StagedSaveOptions) {
 		// the dialog closed, what was written is announced and undoable.
 		const saved: StagedChange[] = []
 		let settled = false
+		let gone = 0
 		try {
 			await confirm({
 				title: t(
@@ -281,6 +310,7 @@ export function useStagedSave(options: StagedSaveOptions) {
 					try {
 						const outcome = await saveAll(tab)
 						saved.push(...changesOf(changes, outcome.written))
+						gone += outcome.gone.length
 						if (outcome.written.length + outcome.gone.length > 0) settled = true
 						return partialOutcome(outcome, changes, saved.length)
 					} finally {
@@ -289,7 +319,7 @@ export function useStagedSave(options: StagedSaveOptions) {
 				},
 			})
 		} finally {
-			if (settled) options.onSaved()
+			if (settled) options.onSaved({ fields: fieldsOf(saved), gone })
 			if (saved.length > 0) announce(tab, saved)
 		}
 	}

package/frontend-vue/app/build/query/runs.ts

@@ -33,19 +33,20 @@ export interface DayGroup<T> {
 	items: T[]
 }
 
-function dayKey(date: Date): string {
-	return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`
-}
-
-/** Entries by local calendar day, newest day first, in their given order. */
+/**
+ * Entries by calendar day, newest day first, in their given order. `dayOf`
+ * names a date's day: the reader's (`regionalDayKey`), so that a server
+ * render groups as the browser does.
+ */
 export function groupByDay<T>(
 	entries: T[],
 	dateOf: (entry: T) => string,
+	dayOf: (date: Date) => string,
 ): DayGroup<T>[] {
 	const groups = new Map<string, DayGroup<T>>()
 	for (const entry of entries) {
 		const date = new Date(dateOf(entry))
-		const key = dayKey(date)
+		const key = dayOf(date)
 		const group = groups.get(key) ?? { key, date, items: [] }
 		group.items.push(entry)
 		groups.set(key, group)
@@ -53,27 +54,6 @@ export function groupByDay<T>(
 	return [...groups.values()]
 }
 
-const DAY_MS = 86_400_000
-
-/** "Today", "Yesterday" or the date, in the interface language. */
-export function dayLabel(
-	date: Date,
-	locale: string,
-	words: { today: string; yesterday: string },
-): string {
-	const today = new Date()
-	today.setHours(0, 0, 0, 0)
-	const day = new Date(date)
-	day.setHours(0, 0, 0, 0)
-	const days = Math.round((today.getTime() - day.getTime()) / DAY_MS)
-	if (days === 0) return words.today
-	if (days === 1) return words.yesterday
-	return new Intl.DateTimeFormat(locale, {
-		day: 'numeric',
-		month: 'short',
-	}).format(date)
-}
-
 export type UnknownKind = 'schema' | 'instance' | 'table'
 
 /** A name a query used that its schema does not know. */

package/frontend-vue/app/build/schemas/useSchemasListing.ts

@@ -1,4 +1,4 @@
-import { computed, ref, watch } from 'vue'
+import { computed } from 'vue'
 import {
 	readFilterState,
 	sourceQuery,
@@ -16,47 +16,24 @@ interface SourceResponse {
 	all?: number
 }
 
-type ListingStatus = 'idle' | 'pending' | 'success' | 'error'
-
 export function useSchemasListing() {
 	const route = useDmsRoute()
-	const { $authFetch } = useAuthFetch()
 	const state = computed<SchemasFilterState>(() => readFilterState(route.query))
-	const query = computed(() => sourceQuery(state.value))
-
-	// The counts of the last answer stay while the next one loads.
-	const total = ref(0)
-	const all = ref<number | null>(null)
-	const status = ref<ListingStatus>('idle')
-	let latest = 0
 
-	async function load() {
-		const request = ++latest
-		status.value = 'pending'
-		try {
-			const response = await $authFetch<SourceResponse>(TABLES_SOURCE, {
-				query: query.value,
-			})
-			if (request !== latest) return
-			total.value = response.total
-			all.value = response.all ?? null
-			status.value = 'success'
-		} catch {
-			if (request === latest) status.value = 'error'
-		}
-	}
-
-	// In the browser only: the server renders no count.
-	if (typeof window !== 'undefined') {
-		watch(() => JSON.stringify(query.value), load, { immediate: true })
-	}
+	// Rendered on the server and handed over, the counts only (not the rows
+	// the route lists); the counts of the last answer stay while the next one
+	// loads.
+	const { data, status } = useApiData<SourceResponse>(TABLES_SOURCE, {
+		query: () => sourceQuery(state.value),
+		pick: ['total', 'all'],
+	})
 
 	return {
 		state,
 		/** Tables the bar's filters list. */
-		total,
+		total: computed(() => data.value?.total ?? 0),
 		/** Registered tables before any filter; null until known. */
-		all,
+		all: computed(() => data.value?.all ?? null),
 		status,
 	}
 }

package/frontend-vue/app/components/ConnectionStatus.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useDatabaseHealth } from '../build/composables/useDatabaseHealth'
-import { useIntervalFn, useNow } from '@vueuse/core'
+import { useNow } from '@vueuse/core'
 
 // The overview's health hero: whether the database answers, how fast, and
 // what it holds. The probe runs again every PROBE_INTERVAL_MS while the page
@@ -10,10 +10,16 @@ const SECOND_MS = 1000
 const MINUTE_S = 60
 
 const { t, n, locale } = useI18n()
-const { health, isLoading, error, refresh } = useDatabaseHealth()
-const now = useNow({ interval: SECOND_MS })
-
-useIntervalFn(() => refresh(), PROBE_INTERVAL_MS)
+const { health, isLoading, error, refresh } = useDatabaseHealth({
+	refreshInterval: PROBE_INTERVAL_MS,
+})
+const clock = useNow({ interval: SECOND_MS })
+// The probe's own time until the page is mounted: the server renders the age
+// a few seconds before the browser hydrates it, and both must write the same.
+const mounted = ref(false)
+onMounted(() => {
+	mounted.value = true
+})
 
 // A failed health request is a lost connection too: the route answers
 // whenever the backend is up.
@@ -24,12 +30,9 @@ const isDown = computed(
 const checkedAgo = computed(() => {
 	const checkedAt = health.value.checkedAt
 	if (!checkedAt) return ''
-	const seconds = Math.max(
-		0,
-		Math.round(
-			(now.value.getTime() - new Date(checkedAt).getTime()) / SECOND_MS,
-		),
-	)
+	const checked = new Date(checkedAt).getTime()
+	const now = mounted.value ? clock.value.getTime() : checked
+	const seconds = Math.max(0, Math.round((now - checked) / SECOND_MS))
 	return seconds < MINUTE_S
 		? t('dms_database.overview.connection.checked_seconds', { count: seconds })
 		: t('dms_database.overview.connection.checked_minutes', {

package/frontend-vue/app/components/DataBrowserSidebar.vue

@@ -6,10 +6,11 @@ import {
 	tabInstanceOf,
 	useDataBrowserTabs,
 } from '../build/composables/useDataBrowserTabs'
-import { isFilterToken } from '../build/composables/useDataBrowserGrid'
+import { useTableCounts } from '../build/composables/useTableCounts'
 import type { InstanceChoice } from '../build/data/instanceOptions'
 import { onKeyStroke } from '@vueuse/core'
 import type { SchemaSummary } from '../build/composables/useDatabaseSchemas'
+import { instanceFromUrl } from '../build/utils/databaseLinks'
 import InstancePicker from './InstancePicker.vue'
 import SchemaPicker from './SchemaPicker.vue'
 
@@ -20,13 +21,6 @@ import SchemaPicker from './SchemaPicker.vue'
 // table open in a tab carries a hollow ring, the active one included: the
 // fill of the row says which is shown.
 
-const TABLES_ENDPOINT = '/api/database/browse/tables'
-
-interface TableEntry {
-	name: string
-	elementCount: number
-}
-
 const props = defineProps<{
 	schemas: SchemaSummary[]
 	/** The schema list is being read. */
@@ -38,7 +32,6 @@ const props = defineProps<{
 const emit = defineEmits<{ retry: [] }>()
 
 const { t, n } = useI18n()
-const { $authFetch } = useAuthFetch()
 const { tabs, activeId, activeTab, activations, openTab } = useDataBrowserTabs()
 const route = useDmsRoute()
 
@@ -49,13 +42,17 @@ const filterInput = useTemplateRef<{ inputRef?: HTMLInputElement }>(
 	'filterInput',
 )
 
-// A schema-only link (?schema=X with no table) picks the schema; otherwise
-// the active tab leads, then the first schema. A schema or instance picked
-// here holds until the user goes to a tab (another one, or the same again).
+// The schema a link names (?schema=X) leads, else the first one; once a tab
+// is active, it leads. A table link (?schema=X&table=Y) opens its tab once
+// mounted, in the instance it names: that scope is shown from the start, so
+// the server renders the counts the browser keeps. A schema or instance
+// picked here holds until the user goes to a tab (another one, or the same
+// again).
 const linkedSchema =
-	typeof route.query.schema === 'string' && !route.query.table
-		? route.query.schema
-		: null
+	typeof route.query.schema === 'string' ? route.query.schema : null
+const linkedInstance = route.query.table
+	? tabInstanceOf(instanceFromUrl(route.query.instance))
+	: DEFAULT_INSTANCE_VALUE
 
 watch(
 	[activeId, activations],
@@ -74,6 +71,7 @@ watch(
 		if (schemaId.value || list.length === 0) return
 		const linked = list.find((schema) => schema.id === linkedSchema)
 		schemaId.value = linked?.id ?? list[0]?.id ?? null
+		if (linked) instance.value = linkedInstance
 	},
 	{ immediate: true },
 )
@@ -111,32 +109,7 @@ const instanceName = computed(() => {
 })
 
 // --- tables and their counts in the picked instance ---
-const counts = ref<Record<string, number>>({})
-const countsFailed = ref(false)
-
-watch(
-	[schemaId, instance],
-	async ([id, picked]) => {
-		counts.value = {}
-		countsFailed.value = false
-		if (!id) return
-		const query: Record<string, string> = { filter_schema: isFilterToken(id) }
-		if (picked !== DEFAULT_INSTANCE_VALUE)
-			query.filter_instance = isFilterToken(picked)
-		try {
-			const res = await $authFetch<{ items: TableEntry[] }>(TABLES_ENDPOINT, {
-				query,
-			})
-			if (schemaId.value !== id || instance.value !== picked) return
-			counts.value = Object.fromEntries(
-				res.items.map((item) => [item.name, item.elementCount]),
-			)
-		} catch {
-			if (schemaId.value === id) countsFailed.value = true
-		}
-	},
-	{ immediate: true },
-)
+const { counts, failed: countsFailed } = useTableCounts(schemaId, instance)
 
 const openIds = computed(() => new Set(tabs.value.map((tab) => tab.id)))
 
@@ -327,7 +300,12 @@ onKeyStroke('t', (event) => {
 			<span v-if="countsFailed">
 				{{ t('dms_database.data.scope.counts_failed') }}
 			</span>
-			<i18n-t v-else keypath="dms_database.data.scope.counts_for" tag="span">
+			<i18n-t
+				v-else
+				keypath="dms_database.data.scope.counts_for"
+				tag="span"
+				scope="global"
+			>
 				<template #instance>
 					<span class="text-primary font-mono">{{ instanceName }}</span>
 				</template>

package/frontend-vue/app/components/DataBrowserTabBar.vue

@@ -248,7 +248,7 @@ async function close(tab: BrowserTab) {
 			v-if="hasPreview"
 			class="text-dimmed hidden shrink-0 self-center whitespace-nowrap px-3 pb-1 pt-1.5 text-[11px] lg:inline"
 		>
-			<i18n-t keypath="dms_database.data.tabs.hint" tag="span">
+			<i18n-t keypath="dms_database.data.tabs.hint" tag="span" scope="global">
 				<template #italic>
 					<em>{{ t('dms_database.data.tabs.italic') }}</em>
 				</template>