@antelopejs/dms-database 0.1.1 → 0.2.0

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>

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

@@ -8,7 +8,6 @@ import { useDatabaseSchemas } from '../build/composables/useDatabaseSchemas'
 import {
 	GRID_PAGE_SIZES,
 	browseListQuery,
-	browseParamsKey,
 	browseSelectionQuery,
 	useDataBrowserGrid,
 } from '../build/composables/useDataBrowserGrid'
@@ -63,7 +62,6 @@ const props = defineProps<{
 }>()
 
 const { t, n } = useI18n()
-const { $authFetch } = useAuthFetch()
 const router = useDmsRouter()
 const grid = useDataBrowserGrid()
 const staged = useStagedEdits()
@@ -75,12 +73,23 @@ const state = grid.getState(props.tab.id)
 const readOnly = computed(() => props.tab.instance === CROSS_INSTANCE_VALUE)
 
 // --- data loading ---
-const data = ref<GridData | null>(grid.getCache(props.tab.id))
-const loading = ref(false)
-const loadError = ref<string | null>(null)
-let requestSeq = 0
-// Column metadata only depends on the tab, so it is read once per mount.
-const columnsMeta = ref<ColumnsResponse | null>(null)
+const selection = computed(() => browseSelectionQuery(props.tab))
+// The columns sampled from the table: the table alone decides them. A
+// failure leaves the grid on the introspected fields.
+const columnsRead = useApiData<ColumnsResponse>(`${BROWSE_ENDPOINT}/columns`, {
+	query: selection,
+})
+// A page of rows, read again as the selection, the page, the sort, the search
+// or the filters change; the previous page stays on screen meanwhile.
+const listRead = useApiData<ListResponse>(`${BROWSE_ENDPOINT}/list`, {
+	query: () => ({ ...selection.value, ...browseListQuery(state) }),
+})
+const loading = computed(() => listRead.pending.value)
+const loadError = computed(() => {
+	const error = listRead.error.value
+	if (!error) return null
+	return error instanceof Error ? error.message : String(error)
+})
 
 function columnsOf(
 	meta: ColumnsResponse | null,
@@ -96,90 +105,36 @@ function columnsOf(
 	}))
 }
 
-async function fetchPage(force: boolean) {
-	const selection = browseSelectionQuery(props.tab)
-	const needColumns = force || columnsMeta.value === null
-	return Promise.all([
-		needColumns
-			? // A columns failure must not discard the rows: the grid falls back
-				// to the introspected fields.
-				$authFetch<ColumnsResponse>(`${BROWSE_ENDPOINT}/columns`, {
-					query: selection,
-				}).catch(() => null)
-			: Promise.resolve(columnsMeta.value),
-		$authFetch<ListResponse>(`${BROWSE_ENDPOINT}/list`, {
-			query: { ...selection, ...browseListQuery(state) },
-		}),
-	])
-}
-
-async function load(force = false) {
-	const key = browseParamsKey(props.tab, state)
-	const cached = grid.getCache(props.tab.id)
-	if (!force && cached && cached.paramsKey === key) {
-		// Retire a request in flight: its late answer would overwrite the cache
-		// with rows for parameters the user has left.
-		requestSeq += 1
-		data.value = cached
-		loadError.value = null
-		loading.value = false
-		return
-	}
-	const seq = ++requestSeq
-	loading.value = true
-	loadError.value = null
-	try {
-		const [columnsRes, listRes] = await fetchPage(force)
-		if (seq !== requestSeq) return
-		if (columnsRes) columnsMeta.value = columnsRes
-		const primaryKey =
-			listRes.primaryKey ?? columnsMeta.value?.primaryKey ?? null
-		const next: GridData = {
-			columns: columnsOf(columnsMeta.value, primaryKey),
-			rows: listRes.results ?? [],
-			total: listRes.total ?? 0,
-			primaryKey,
-			paramsKey: key,
-		}
-		grid.setCache(props.tab.id, next)
-		data.value = next
-		if (
-			editing.value &&
-			rowIdOf(next.rows[editing.value.r] ?? {}) !== editing.value.rowId
-		) {
-			cancelEdit()
-		}
-		// Rows deleted elsewhere can leave the page past the end.
-		if (next.total > 0 && state.page * state.pageSize >= next.total) {
-			state.page = Math.max(0, Math.ceil(next.total / state.pageSize) - 1)
-		}
-	} catch (error) {
-		if (seq !== requestSeq) return
-		loadError.value = error instanceof Error ? error.message : String(error)
-	} finally {
-		if (seq === requestSeq) loading.value = false
+const data = computed<GridData | null>(() => {
+	const list = listRead.data.value
+	if (!list) return null
+	const meta = columnsRead.data.value
+	const primaryKey = list.primaryKey ?? meta?.primaryKey ?? null
+	return {
+		columns: columnsOf(meta, primaryKey),
+		rows: list.results ?? [],
+		total: list.total ?? 0,
+		primaryKey,
 	}
-}
-
-watch(
-	() => browseParamsKey(props.tab, state),
-	() => load(),
-	{ immediate: true },
-)
+})
 
-// A table cached empty while the schemas were still loading recovers once
-// its introspected fields arrive.
-watch(
-	() => props.table,
-	(table) => {
-		if (table && (data.value?.columns.length ?? 0) === 0 && !loading.value)
-			load(true)
-	},
-)
+watch(data, (next) => {
+	if (!next) return
+	if (
+		editing.value &&
+		rowIdOf(next.rows[editing.value.r] ?? {}) !== editing.value.rowId
+	) {
+		cancelEdit()
+	}
+	// Rows deleted elsewhere can leave the page past the end.
+	if (next.total > 0 && state.page * state.pageSize >= next.total) {
+		state.page = Math.max(0, Math.ceil(next.total / state.pageSize) - 1)
+	}
+})
 
 function reload() {
-	grid.invalidate(props.tab.id)
-	load(true)
+	void columnsRead.refresh()
+	void listRead.refresh()
 }
 
 const columns = computed(() => data.value?.columns ?? [])
@@ -237,7 +192,6 @@ watch(searchDraft, (value) => {
 })
 onBeforeUnmount(() => {
 	clearTimeout(searchTimer)
-	requestSeq += 1
 	const value = searchDraft.value.trim()
 	if (value !== state.search) {
 		state.search = value

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

@@ -40,76 +40,84 @@ const emit = defineEmits<{ 'update:modelValue': [choice: InstanceChoice] }>()
 const INSTANCES_ENDPOINT = '/api/database/tables/instances'
 const SEARCH_DEBOUNCE_MS = 250
 
+/** One read of a schema's named instances, with what it searched. */
+interface InstancesPage {
+	schema: string
+	term: string
+	instances: string[]
+	total: number
+}
+
 const { t, n } = useI18n()
-const { $authFetch } = useAuthFetch()
 
 const search = ref('')
+// What the server searches: the term once typing settles.
+const term = ref('')
 const open = ref(false)
-const names = ref<string[]>([])
-const matched = ref(0)
-// Named instances of the schema, before any search; null until known.
-const total = ref<number | null>(null)
-const status = ref<InstancesStatus>('idle')
-let request = 0
-let loadedKey: string | null = null
-
-async function load() {
-	const schema = props.schema
-	if (!schema) return
-	const term = search.value.trim()
-	const key = `${schema}\u0000${term}`
-	if (key === loadedKey) return
-	const current = ++request
-	status.value = 'pending'
-	try {
-		const res = await $authFetch<{ instances: string[]; total: number }>(
+
+watchDebounced(search, (value) => (term.value = value.trim()), {
+	debounce: SEARCH_DEBOUNCE_MS,
+})
+
+// Read when the menu opens, in the browser only, never on the page's
+// refreshes: a closed menu shows nothing of it.
+const instances = useApiData<InstancesPage>(
+	() =>
+		props.schema
+			? `dms-database:instances:${JSON.stringify([props.schema, term.value])}`
+			: null,
+	async ({ $authFetch, signal }) => {
+		const schema = props.schema as string
+		const searched = term.value
+		const page = await $authFetch<{ instances: string[]; total: number }>(
 			INSTANCES_ENDPOINT,
 			{
-				query: {
-					schema,
-					search: term || undefined,
-					limit: PICKER_LIMIT,
-				},
+				query: { schema, search: searched || undefined, limit: PICKER_LIMIT },
+				signal,
 			},
 		)
-		if (current !== request) return
-		names.value = res.instances
-		matched.value = res.total
-		if (!term) total.value = res.total
-		status.value = 'success'
-		loadedKey = key
-	} catch {
-		if (current === request) status.value = 'error'
-	}
-}
-
-// Another schema, other instances: they load when the menu opens.
-watch(
-	() => props.schema,
-	() => {
-		request++
-		loadedKey = null
-		names.value = []
-		matched.value = 0
-		total.value = null
-		status.value = 'idle'
-		if (open.value) void load()
+		return { schema, term: searched, ...page }
+	},
+	{
+		immediate: false,
+		server: false,
+		watch: false,
+		refreshOnPageRefresh: false,
 	},
 )
 
+// Another schema shows none of the previous one's instances while its own
+// load; another search keeps the previous matches on screen meanwhile.
+const page = computed(() => {
+	const value = instances.data.value
+	return value?.schema === props.schema ? value : null
+})
+const names = computed(() => page.value?.instances ?? [])
+const matched = computed(() => page.value?.total ?? 0)
+const status = computed(() => instances.status.value as InstancesStatus)
+
+// Named instances of the schema, before any search; null until known.
+const unsearched = shallowRef<InstancesPage | null>(null)
+watch(page, (value) => {
+	if (value && !value.term) unsearched.value = value
+})
+const total = computed(() =>
+	unsearched.value?.schema === props.schema ? unsearched.value.total : null,
+)
+
+function load() {
+	if (!open.value || !props.schema) return
+	if (instances.pending.value || instances.status.value === 'success') return
+	void instances.execute()
+}
+
+watch([() => props.schema, term], load)
+
 function onOpen(value: boolean) {
 	open.value = value
-	if (value) void load()
+	load()
 }
 
-watchDebounced(
-	search,
-	() => {
-		if (open.value) void load()
-	},
-	{ debounce: SEARCH_DEBOUNCE_MS },
-)
-
 const items = computed(() =>
 	instanceMenu({
 		search: search.value,

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

@@ -50,10 +50,9 @@ const OPERATION_ICONS: Record<string, string> = {
 const { t, n } = useI18n()
 const route = useDmsRoute()
 const router = useDmsRouter()
-const { $authFetch } = useAuthFetch()
 const { confirm } = useConfirm()
 const toast = useToast()
-const { user } = useUserSession()
+const { user } = useDmsUserSession()
 const store = useQueryStore()
 const { schemas } = useDatabaseSchemas()
 
@@ -64,11 +63,9 @@ const failure = ref<QueryFailure | null>(null)
 const target = ref<QueryTarget>({})
 const loadedSaved = ref<SavedQuery | null>(null)
 const activeHistoryId = ref<string | null>(null)
-const libraryLoading = ref(true)
 // Named instances holding rows of a table the last read found empty in the
 // default instance.
 const elsewhere = ref<InstanceRows[]>([])
-const team = ref<SavedQuery[]>([])
 const editor = useTemplateRef<InstanceType<typeof QueryBuilderPanel>>('editor')
 
 const edited = computed(
@@ -80,24 +77,10 @@ const ownId = computed(
 )
 
 // --- library ---
-async function refreshHistory() {
-	await store.fetchHistory().catch(() => undefined)
-}
-
-async function refreshSaved() {
-	await store.fetchSaved('me').catch(() => undefined)
-	try {
-		const res = await $authFetch<{ items: SavedQuery[] }>(
-			'/api/database/query/saved',
-			{
-				query: { scope: 'shared' },
-			},
-		)
-		team.value = res.items.filter((query) => query.userId !== ownId.value)
-	} catch {
-		team.value = []
-	}
-}
+// The team's queries: the shared ones the caller did not write.
+const team = computed(() =>
+	store.sharedQueries.value.filter((query) => query.userId !== ownId.value),
+)
 
 function openSaved(query: SavedQuery) {
 	loadedSaved.value = query
@@ -151,7 +134,7 @@ async function deleteSaved(query: SavedQuery) {
 	if (!confirmed) return
 	await store.deleteSaved(query.id).catch(() => undefined)
 	if (loadedSaved.value?.id === query.id) loadedSaved.value = null
-	await refreshSaved()
+	await store.refreshSaved()
 }
 
 async function clearHistory() {
@@ -185,22 +168,25 @@ function fetchDuration(error: unknown): number | null {
 	return typeof duration === 'number' ? duration : null
 }
 
+type CountRows = (query: Record<string, string>) => Promise<{ total: number }>
+
 /**
  * The named instances of a table that hold rows, each with its count: asked
  * only when a read found the table empty in the default instance (decision
  * 11). An instance whose count fails is left out.
  */
-async function instancesWithRows(target: QueryTarget): Promise<InstanceRows[]> {
+async function instancesWithRows(
+	target: QueryTarget,
+	count: CountRows,
+): Promise<InstanceRows[]> {
 	const instances =
 		schemas.value.find((schema) => schema.id === target.schema)?.instances ?? []
 	const counts = await Promise.all(
 		instances.map((id) =>
-			$authFetch<{ total: number }>(BROWSE_COUNT, {
-				query: {
-					filter_schema: `is:${target.schema}`,
-					filter_table: `is:${target.table}`,
-					filter_instance: `is:${id}`,
-				},
+			count({
+				filter_schema: `is:${target.schema}`,
+				filter_table: `is:${target.table}`,
+				filter_instance: `is:${id}`,
 			}).then(
 				(res) => ({ id, count: res.total }),
 				() => ({ id, count: 0 }),
@@ -210,6 +196,29 @@ async function instancesWithRows(target: QueryTarget): Promise<InstanceRows[]> {
 	return counts.filter((entry) => entry.count > 0)
 }
 
+// The table the last read found empty, whose instances are counted: in the
+// browser, after a run.
+const emptyTarget = shallowRef<QueryTarget | null>(null)
+const elsewhereRead = useApiData<InstanceRows[]>(
+	() =>
+		emptyTarget.value
+			? `dms-database:elsewhere:${JSON.stringify([
+					emptyTarget.value.schema,
+					emptyTarget.value.table,
+				])}`
+			: null,
+	({ $authFetch, signal }) =>
+		instancesWithRows(emptyTarget.value as QueryTarget, (query) =>
+			$authFetch<{ total: number }>(BROWSE_COUNT, { query, signal }),
+		),
+	{
+		immediate: false,
+		server: false,
+		watch: false,
+		refreshOnPageRefresh: false,
+	},
+)
+
 // Each run drops the instances found for the previous one; a slow answer
 // for an older run is ignored.
 let runId = 0
@@ -228,8 +237,9 @@ async function findElsewhere(
 		!next.table
 	)
 		return
-	const found = await instancesWithRows(next)
-	if (id === runId) elsewhere.value = found
+	emptyTarget.value = next
+	await elsewhereRead.execute()
+	if (id === runId) elsewhere.value = elsewhereRead.data.value ?? []
 }
 
 // The result keeps naming the previous run's target until the new one lands.
@@ -251,7 +261,7 @@ async function execute(query: Record<string, unknown>, text: string) {
 		target.value = next
 		executing.value = false
 		activeHistoryId.value = null
-		await refreshHistory()
+		await store.refreshHistory()
 	}
 }
 
@@ -516,7 +526,7 @@ async function confirmSave() {
 			color: 'success',
 			icon: 'i-ph-check',
 		})
-		await refreshSaved()
+		await store.refreshSaved()
 	} catch (error) {
 		saveError.value =
 			error instanceof Error && !('data' in error)
@@ -570,9 +580,9 @@ async function openFromRoute(): Promise<boolean> {
 	return opened
 }
 
+// The link and the draft name queries of the library: once it is read.
 onMounted(async () => {
-	await Promise.all([refreshHistory(), refreshSaved()])
-	libraryLoading.value = false
+	await store.libraryRead
 	if (!(await openFromRoute())) restoreDraft()
 })
 </script>
@@ -590,7 +600,7 @@ onMounted(async () => {
 			:team="team"
 			:active-saved-id="loadedSaved?.id ?? null"
 			:active-history-id="activeHistoryId"
-			:loading="libraryLoading"
+			:loading="store.libraryLoading.value"
 			@open-history="openHistory"
 			@save-history="openSaveModal"
 			@open-saved="openSaved"