From e5cb628c9f35bc8717e8d3c74a7ced96bf8ad4be Mon Sep 17 00:00:00 2001
From: rainu <rainu@raysha.de>
Date: Tue, 5 Nov 2024 11:19:50 +0100
Subject: [PATCH] split collection manage tabs into separate views; improve
 performance for listing collection items

---
 src/components/layout/Navigation.vue |  42 +++-
 src/router/index.ts                  |  15 +-
 src/views/collection/Manage.vue      | 301 ---------------------------
 src/views/collection/manage/Add.vue  | 146 +++++++++++++
 src/views/collection/manage/List.vue | 201 ++++++++++++++++++
 5 files changed, 392 insertions(+), 313 deletions(-)
 delete mode 100644 src/views/collection/Manage.vue
 create mode 100644 src/views/collection/manage/Add.vue
 create mode 100644 src/views/collection/manage/List.vue

diff --git a/src/components/layout/Navigation.vue b/src/components/layout/Navigation.vue
index a76d96f..7ba335e 100644
--- a/src/components/layout/Navigation.vue
+++ b/src/components/layout/Navigation.vue
@@ -2,7 +2,7 @@
 	<v-list :opened="open" open-strategy="multiple">
 		<!-- Directory (only if supported) -->
 		<template v-if="features.local">
-			<v-list-group v-if="mainDirectory" value="local">
+			<v-list-group v-if="mainDirectory" value="local" fluid>
 				<template v-slot:activator="{ props }">
 					<v-list-item v-bind="props" :title="$t('file.title')" prepend-icon="mdi-folder-open-outline"></v-list-item>
 				</template>
@@ -10,11 +10,13 @@
 				<v-list-item
 					:to="{ name: RouteDirectoryAnalyse }"
 					:title="$t('vision.analyse.title')"
+					class="ml-2"
 					prepend-icon="mdi-folder-eye-outline"
 				></v-list-item>
 				<v-list-item
 					:to="{ name: RouteDirectorySearch }"
 					:title="$t('search.title')"
+					class="ml-2"
 					prepend-icon="mdi-folder-search-outline"
 				></v-list-item>
 			</v-list-group>
@@ -24,24 +26,40 @@
 		</template>
 
 		<!-- Collection -->
-		<v-list-group v-if="collectionName" value="remote">
+		<v-list-group v-if="collectionName" value="remote" fluid>
 			<template v-slot:activator="{ props }">
 				<v-list-item v-bind="props" :title="$t('collection.title')" prepend-icon="mdi-collage" active></v-list-item>
 			</template>
 
-			<v-list-item
-				:to="{ name: RouteCollectionList, params: { collection: collectionName } }"
-				:title="$t('collection.manage.title')"
-				prepend-icon="mdi-format-list-group"
-			></v-list-item>
+			<v-list-group value="remote-manage" fluid>
+				<template v-slot:activator="{ props }">
+					<v-list-item v-bind="props" :title="$t('collection.manage.title')" prepend-icon="mdi-format-list-group" class="ml-2" active></v-list-item>
+				</template>
+
+				<v-list-item
+					:to="{ name: RouteCollectionManageList, params: { collection: collectionName } }"
+					:title="$t('collection.manage.content')"
+					class="ml-4"
+					prepend-icon="mdi-format-list-checkbox"
+				></v-list-item>
+				<v-list-item
+					:to="{ name: RouteCollectionManageAdd, params: { collection: collectionName } }"
+					:title="$t('collection.manage.add')"
+					class="ml-4"
+					prepend-icon="mdi-image-plus"
+				></v-list-item>
+			</v-list-group>
+
 			<v-list-item
 				:to="{ name: RouteCollectionAnalyse, params: { collection: collectionName } }"
 				:title="$t('vision.analyse.title')"
+				class="ml-2"
 				prepend-icon="mdi-archive-eye-outline"
 			></v-list-item>
 			<v-list-item
 				:to="{ name: RouteCollectionSearch, params: { collection: collectionName } }"
 				:title="$t('search.title')"
+				class="ml-2"
 				prepend-icon="mdi-image-search-outline"
 			></v-list-item>
 		</v-list-group>
@@ -79,7 +97,8 @@ import { defineComponent } from "vue"
 import {
 	RouteCollection,
 	RouteCollectionAnalyse,
-	RouteCollectionManage,
+	RouteCollectionManageList,
+	RouteCollectionManageAdd,
 	RouteCollectionSearch,
 	RouteDirectory,
 	RouteDirectoryAnalyse,
@@ -87,8 +106,8 @@ import {
 	RouteExport,
 	RouteHome,
 	RouteImport,
-	RouteHelp
-} from "../../router"
+	RouteHelp,
+} from '../../router'
 import { mapState } from "pinia"
 import { useFileStore } from "../../store/file.ts"
 import { isLocalSupported } from "../../support.ts"
@@ -108,7 +127,8 @@ export default defineComponent({
 			RouteDirectorySearch,
 			RouteCollection,
 			RouteCollectionAnalyse,
-			RouteCollectionList: RouteCollectionManage,
+			RouteCollectionManageList,
+			RouteCollectionManageAdd,
 			RouteCollectionSearch,
 			RouteImport,
 			RouteExport
diff --git a/src/router/index.ts b/src/router/index.ts
index 7d797eb..a513725 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -19,6 +19,8 @@ export const RouteDirectorySearch = RouteDirectory + '-search'
 export const RouteCollection = 'collection'
 export const RouteCollectionAnalyse = RouteCollection + '-analyse'
 export const RouteCollectionManage = RouteCollection + '-manage'
+export const RouteCollectionManageList = RouteCollectionManage + '-list'
+export const RouteCollectionManageAdd = RouteCollectionManage + '-add'
 export const RouteCollectionSearch = RouteCollection + '-search'
 export const RouteImport = 'import'
 export const RouteExport = 'export'
@@ -87,7 +89,18 @@ export default createRouter({
 						{
 							name: RouteCollectionManage,
 							path: 'manage',
-							component: () => import('../views/collection/Manage.vue'),
+							children: [
+								{
+									name: RouteCollectionManageList,
+									path: 'list',
+									component: () => import('../views/collection/manage/List.vue'),
+								},
+								{
+									name: RouteCollectionManageAdd,
+									path: 'add',
+									component: () => import('../views/collection/manage/Add.vue'),
+								},
+							]
 						},
 						{
 							name: RouteCollectionSearch,
diff --git a/src/views/collection/Manage.vue b/src/views/collection/Manage.vue
deleted file mode 100644
index 35cddc4..0000000
--- a/src/views/collection/Manage.vue
+++ /dev/null
@@ -1,301 +0,0 @@
-<template>
-	<v-app-bar location="top" elevation="0" density="compact">
-		<v-container>
-			<v-tabs v-model="tab" align-tabs="center">
-				<v-tab value="add">
-					<v-icon icon="mdi-image-plus"></v-icon>
-					{{ $t('collection.manage.add') }}
-				</v-tab>
-				<v-tab value="list">
-					<v-icon icon="mdi-format-list-checkbox"></v-icon>
-					{{ $t('collection.manage.content') }}
-				</v-tab>
-			</v-tabs>
-		</v-container>
-	</v-app-bar>
-
-	<v-tabs-window v-model="tab">
-		<v-tabs-window-item value="list">
-			<v-list density="compact">
-				<v-list-item v-for="item of view" :key="item.id" variant="tonal">
-					<template v-slot:prepend>
-						<v-list-item-action start>
-							<v-checkbox-btn v-model="selected[item.id]"></v-checkbox-btn>
-						</v-list-item-action>
-					</template>
-
-					<v-list-item-title>
-						<a :href="item.parsedUri.rawURI" target="_blank">{{ item.parsedUri.name }}</a>
-					</v-list-item-title>
-					<v-list-item-subtitle>{{ item.parsedUri.rawURI }}</v-list-item-subtitle>
-
-					<template v-slot:append>
-						<v-icon v-if="item.analysed" icon="mdi-eye-check"></v-icon>
-						<v-icon v-else icon="mdi-eye-remove"></v-icon>
-					</template>
-				</v-list-item>
-			</v-list>
-		</v-tabs-window-item>
-
-		<v-tabs-window-item value="add">
-			<LinedTextarea v-model="newItems" :annotations="itemAnnotations" :styles="{height: '70vh'}"></LinedTextarea>
-			<v-expansion-panels>
-				<v-expansion-panel v-show="Object.keys(itemAnnotations).length > 0">
-					<v-expansion-panel-title>
-						{{
-							$t("collection.manage.validation.summary", {
-								success: Object.values(itemAnnotations).filter((a) => a.class === "success").length,
-								errors: Object.values(itemAnnotations).filter((a) => a.class === "error").length,
-								warnings: Object.values(itemAnnotations).filter((a) => a.class === "warning").length
-							})
-						}}
-					</v-expansion-panel-title>
-					<v-expansion-panel-text>
-						<v-list>
-							<v-list-item v-for="(value, key) in itemAnnotations" :key="key">
-								<v-alert :type="value.class || undefined" variant="tonal" density="compact">
-									<v-alert-title>{{ value.text }}</v-alert-title>
-									<span class="progress-alert-line-content">
-										{{ Number(key) + 1 }}: {{ value.line }}
-									</span>
-								</v-alert>
-							</v-list-item>
-						</v-list>
-					</v-expansion-panel-text>
-				</v-expansion-panel>
-			</v-expansion-panels>
-		</v-tabs-window-item>
-	</v-tabs-window>
-
-	<v-app-bar location="bottom" elevation="0" density="compact">
-		<v-container>
-			<v-text-field
-				v-show="tab === 'list'"
-				v-model="filter"
-				:label="$t('collection.manage.filter')"
-				variant="solo"
-				hide-details
-				append-inner-icon="mdi-magnify"
-				clearable
-				@click:clear="onFilterChanged"
-				@click:append-inner="onFilterChanged"
-				@keydown.enter.prevent="onFilterChanged"
-			></v-text-field>
-
-			<v-btn v-show="tab === 'add'" color="primary" variant="elevated" block :disabled="!newItems" @click="onAddItems">
-				<v-icon icon="mdi-image-plus"></v-icon>
-				{{ $t('collection.manage.add') }}
-			</v-btn>
-		</v-container>
-	</v-app-bar>
-
-	<v-app-bar v-show="tab === 'list'" location="bottom" elevation="0" density="compact">
-		<v-container>
-			<v-list-item variant="tonal">
-				<template v-slot:prepend>
-					<v-list-item-action start>
-						<v-checkbox-btn v-model="selectAll"></v-checkbox-btn>
-						<v-icon icon="mdi-check-all"></v-icon>
-					</v-list-item-action>
-				</template>
-				<v-list-item-title>
-					<v-btn v-show="selectedCount > 0" variant="elevated" color="red" block @click="onDeleteSelected">
-						{{ $t('collection.manage.delete', { count: selectedCount }) }}
-					</v-btn>
-				</v-list-item-title>
-			</v-list-item>
-		</v-container>
-	</v-app-bar>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { PersistedVectorEntry, VectorEntryKey } from '../../database/vector.ts'
-import { ParsedURI, parseURI, remoteFileURI } from '../../database/uri.ts'
-import LinedTextarea, { Annotation } from '../../components/LinedTextarea.vue'
-
-type Item = { id: VectorEntryKey; parsedUri: ParsedURI; analysed: boolean }
-type AdvancedAnnotation = Annotation & { line: string, class: "error" | "success" | "warning" }
-
-export default defineComponent({
-	components: { LinedTextarea },
-	data() {
-		return {
-			tab: 'list',
-			newItems: null as string | null,
-			itemAnnotations: {} as Record<number, AdvancedAnnotation>,
-			selected: {} as Record<VectorEntryKey, boolean>,
-			selectAll: false,
-			filter: null as string | null,
-			appliedFilter: null as string | null,
-			items: [] as Item[],
-		}
-	},
-	computed: {
-		collectionName(): string {
-			if (Array.isArray(this.$route.params.collection)) {
-				return this.$route.params.collection[0]
-			}
-			return this.$route.params.collection
-		},
-		view(): Item[] {
-			if (!this.appliedFilter) {
-				return this.items
-			}
-
-			const filter = this.appliedFilter.toLowerCase()
-			const result = this.items.filter((i) => i.parsedUri.rawURI.toLowerCase().includes(filter))
-			return result
-		},
-		selectedCount(): number {
-			return Object.values(this.selected).filter((v) => v).length
-		},
-	},
-	methods: {
-		async collectItems() {
-			const result = [] as Item[]
-			await this.$vectorDB.iterateRemote(this.collectionName, (e: PersistedVectorEntry): boolean => {
-				const parsedUri = parseURI(e.uri)
-				if (!parsedUri) {
-					return true
-				}
-
-				result.push({
-					id: e.id,
-					parsedUri,
-					analysed: e.embedding.length > 0,
-				})
-				return true
-			})
-			this.items = result
-		},
-		onFilterChanged() {
-			this.appliedFilter = this.filter
-		},
-		async onAddItems() {
-			if (!this.newItems) {
-				return
-			}
-			this.itemAnnotations = {}
-
-			const lines = this.newItems.split('\n')
-			const validLines = lines.filter((line, idx) => {
-				const valid = URL.canParse(line)
-				if (!valid) {
-					this.itemAnnotations[idx] = {
-						line,
-						text: this.$t('collection.manage.validation.invalid.url'),
-						class: 'error',
-					}
-				}
-
-				return valid
-			})
-
-			for (let i in validLines) {
-				const line = validLines[i]
-				try {
-					const uri = remoteFileURI(this.collectionName, line)
-					const exists = await this.$vectorDB.exists(uri)
-
-					if (exists) {
-						this.itemAnnotations[i] = {
-							line,
-							text: this.$t('collection.manage.validation.invalid.exists'),
-							class: 'warning',
-						}
-					} else {
-						const id = await this.$vectorDB.saveRemote({
-							collection: this.collectionName,
-							uri: uri,
-							embedding: Float32Array.from([]),
-						})
-
-						const parsedUri = parseURI(uri)
-						if (parsedUri) {
-							this.items.push({
-								id,
-								parsedUri,
-								analysed: false,
-							})
-						}
-
-						this.itemAnnotations[i] = {
-							line,
-							class: 'success',
-						}
-					}
-				} catch (e: unknown) {
-					const error = e as Error
-					this.itemAnnotations[i] = {
-						line,
-						text: this.$t('collection.manage.validation.invalid.error', { error: error.message }),
-						class: 'error',
-					}
-				}
-			}
-		},
-		async onDeleteSelected() {
-			const ids: VectorEntryKey[] = Object.entries(this.selected)
-				.filter(([_, value]) => value)
-				.map(([key, _]) => key)
-				.map((key: string) => Number(key))
-
-			for (let id of ids) {
-				await this.$vectorDB.delete(id)
-			}
-			this.items = this.items.filter((i) => !this.selected[i.id])
-			this.selected = {}
-		},
-	},
-	watch: {
-		collectionName() {
-			this.collectItems()
-			this.selected = {}
-		},
-		items() {
-			if (this.items.length === 0) {
-				this.tab = 'add'
-			}
-		},
-		selectAll() {
-			this.view.forEach((i) => {
-				this.selected[i.id] = this.selectAll
-			})
-		},
-	},
-	mounted() {
-		this.collectItems()
-	},
-})
-</script>
-
-<style>
-a {
-	text-decoration: none;
-	color: inherit;
-}
-
-.lined-textarea .error {
-	background-color: red;
-	color: white;
-}
-
-.lined-textarea .warning {
-	background-color: yellow;
-	color: black;
-}
-
-.lined-textarea .success {
-	background-color: greenyellow;
-	color: black;
-}
-
-.progress-alert-line-content {
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	word-break: break-all;
-}
-
-</style>
diff --git a/src/views/collection/manage/Add.vue b/src/views/collection/manage/Add.vue
new file mode 100644
index 0000000..b04ce38
--- /dev/null
+++ b/src/views/collection/manage/Add.vue
@@ -0,0 +1,146 @@
+<template>
+	<LinedTextarea v-model="newItems" :annotations="itemAnnotations" :styles="{ height: '75vh' }"></LinedTextarea>
+	<v-expansion-panels>
+		<v-expansion-panel v-show="Object.keys(itemAnnotations).length > 0">
+			<v-expansion-panel-title>
+				{{
+					$t('collection.manage.validation.summary', {
+						success: Object.values(itemAnnotations).filter((a) => a.class === 'success').length,
+						errors: Object.values(itemAnnotations).filter((a) => a.class === 'error').length,
+						warnings: Object.values(itemAnnotations).filter((a) => a.class === 'warning').length,
+					})
+				}}
+			</v-expansion-panel-title>
+			<v-expansion-panel-text>
+				<v-list>
+					<v-list-item v-for="(value, key) in itemAnnotations" :key="key">
+						<v-alert :type="value.class || undefined" variant="tonal" density="compact">
+							<v-alert-title>{{ value.text }}</v-alert-title>
+							<span class="progress-alert-line-content"> {{ Number(key) + 1 }}: {{ value.line }} </span>
+						</v-alert>
+					</v-list-item>
+				</v-list>
+			</v-expansion-panel-text>
+		</v-expansion-panel>
+	</v-expansion-panels>
+
+	<v-app-bar location="bottom" elevation="0" density="compact">
+		<v-container>
+			<v-btn color="primary" variant="elevated" block :disabled="!newItems" @click="onAddItems">
+				<v-icon icon="mdi-image-plus"></v-icon>
+				{{ $t('collection.manage.add') }}
+			</v-btn>
+		</v-container>
+	</v-app-bar>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import LinedTextarea, { Annotation } from '../../../components/LinedTextarea.vue'
+import { remoteFileURI } from '../../../database/uri.ts'
+
+type AdvancedAnnotation = Annotation & { line: string; class: 'error' | 'success' | 'warning' }
+
+export default defineComponent({
+	components: { LinedTextarea },
+	data() {
+		return {
+			newItems: null as string | null,
+			itemAnnotations: {} as Record<number, AdvancedAnnotation>,
+		}
+	},
+	computed: {
+		collectionName(): string {
+			if (Array.isArray(this.$route.params.collection)) {
+				return this.$route.params.collection[0]
+			}
+			return this.$route.params.collection
+		},
+	},
+	methods: {
+		async onAddItems() {
+			if (!this.newItems) {
+				return
+			}
+			this.itemAnnotations = {}
+
+			const lines = this.newItems.split('\n')
+			const validLines = lines.filter((line, idx) => {
+				const valid = URL.canParse(line)
+				if (!valid) {
+					this.itemAnnotations[idx] = {
+						line,
+						text: this.$t('collection.manage.validation.invalid.url'),
+						class: 'error',
+					}
+				}
+
+				return valid
+			})
+
+			for (let i in validLines) {
+				const line = validLines[i]
+				try {
+					const uri = remoteFileURI(this.collectionName, line)
+					const exists = await this.$vectorDB.exists(uri)
+
+					if (exists) {
+						this.itemAnnotations[i] = {
+							line,
+							text: this.$t('collection.manage.validation.invalid.exists'),
+							class: 'warning',
+						}
+					} else {
+						await this.$vectorDB.saveRemote({
+							collection: this.collectionName,
+							uri: uri,
+							embedding: Float32Array.from([]),
+						})
+
+						this.itemAnnotations[i] = {
+							line,
+							class: 'success',
+						}
+					}
+				} catch (e: unknown) {
+					const error = e as Error
+					this.itemAnnotations[i] = {
+						line,
+						text: this.$t('collection.manage.validation.invalid.error', { error: error.message }),
+						class: 'error',
+					}
+				}
+			}
+		},
+	},
+})
+</script>
+
+<style>
+a {
+	text-decoration: none;
+	color: inherit;
+}
+
+.lined-textarea .error {
+	background-color: red;
+	color: white;
+}
+
+.lined-textarea .warning {
+	background-color: yellow;
+	color: black;
+}
+
+.lined-textarea .success {
+	background-color: greenyellow;
+	color: black;
+}
+
+.progress-alert-line-content {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	word-break: break-all;
+}
+</style>
diff --git a/src/views/collection/manage/List.vue b/src/views/collection/manage/List.vue
new file mode 100644
index 0000000..d86a5a2
--- /dev/null
+++ b/src/views/collection/manage/List.vue
@@ -0,0 +1,201 @@
+<template>
+	<v-app-bar location="top" elevation="0" density="compact">
+		<v-container>
+			<v-pagination v-model="page" :length="pageCount"></v-pagination>
+		</v-container>
+	</v-app-bar>
+
+	<v-list density="compact">
+		<v-list-item v-for="item of view.items" :key="item.id" variant="tonal">
+			<template v-slot:prepend>
+				<v-list-item-action start>
+					<v-checkbox-btn v-model="selected[item.id]"></v-checkbox-btn>
+				</v-list-item-action>
+			</template>
+
+			<v-list-item-title>
+				<a :href="item.parsedUri.rawURI" target="_blank">{{ item.parsedUri.name }}</a>
+			</v-list-item-title>
+			<v-list-item-subtitle>{{ item.parsedUri.rawURI }}</v-list-item-subtitle>
+
+			<template v-slot:append>
+				<v-icon v-if="item.analysed" icon="mdi-eye-check"></v-icon>
+				<v-icon v-else icon="mdi-eye-remove"></v-icon>
+			</template>
+		</v-list-item>
+	</v-list>
+
+	<v-app-bar location="bottom" elevation="0" density="compact">
+		<v-container>
+			<v-pagination v-model="page" :length="pageCount"></v-pagination>
+		</v-container>
+	</v-app-bar>
+
+	<v-app-bar location="bottom" elevation="0" density="compact">
+		<v-container>
+			<v-text-field
+				v-model="filter.value"
+				:label="$t('collection.manage.filter')"
+				variant="solo"
+				hide-details
+				append-inner-icon="mdi-magnify"
+				clearable
+				@click:clear="onFilterChanged"
+				@click:append-inner="onFilterChanged"
+				@keydown.enter.prevent="onFilterChanged"
+			></v-text-field>
+		</v-container>
+	</v-app-bar>
+
+	<v-app-bar location="bottom" elevation="0" density="compact">
+		<v-container>
+			<v-list-item variant="tonal">
+				<template v-slot:prepend>
+					<v-list-item-action start>
+						<v-btn icon @click="onSelect(true)">
+							<v-icon icon="mdi-check-all"></v-icon>
+						</v-btn>
+						<v-btn icon @click="onSelect(false)">
+							<v-icon icon="mdi-checkbox-blank-off-outline"></v-icon>
+						</v-btn>
+					</v-list-item-action>
+				</template>
+				<v-list-item-title>
+					<v-btn v-show="selectedCount > 0" variant="elevated" color="red" block @click="onDeleteSelected">
+						{{ $t('collection.manage.delete', { count: selectedCount }) }}
+					</v-btn>
+				</v-list-item-title>
+			</v-list-item>
+		</v-container>
+	</v-app-bar>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { PersistedVectorEntry, VectorEntryKey } from '../../../database/vector.ts'
+import { ParsedURI, parseURI } from '../../../database/uri.ts'
+
+type Item = { id: VectorEntryKey; parsedUri: ParsedURI; analysed: boolean }
+
+export default defineComponent({
+	data() {
+		return {
+			totalCount: 0,
+			view: {
+				count: 0,
+				items: [] as Item[],
+			},
+			selected: {} as Record<VectorEntryKey, boolean>,
+			selectAll: false,
+			filter: {
+				value: '',
+				applied: null as string | null,
+			},
+			page: 1,
+			limit: 100,
+		}
+	},
+	computed: {
+		collectionName(): string {
+			if (Array.isArray(this.$route.params.collection)) {
+				return this.$route.params.collection[0]
+			}
+			return this.$route.params.collection
+		},
+		selectedCount() {
+			return Object.values(this.selected).filter((v) => v).length
+		},
+		filterLowercase() {
+			return this.filter.applied?.toLowerCase()
+		},
+		pageCount() {
+			return Math.ceil(this.view.count / this.limit)
+		},
+	},
+	methods: {
+		isIncluded(e: PersistedVectorEntry): boolean {
+			if(!this.filterLowercase) {
+				return true
+			}
+
+			const parsedUri = parseURI(e.uri)
+			if (!parsedUri) {
+				return false
+			}
+			return parsedUri.rawURI.toLowerCase().includes(this.filterLowercase)
+		},
+		async collectInformation() {
+			this.totalCount = await this.$vectorDB.countRemote(this.collectionName)
+			this.page = 1
+
+			if (this.filter.applied) {
+				let count = 0
+				await this.$vectorDB.iterateRemote(this.collectionName, (e: PersistedVectorEntry): boolean => {
+					if (this.isIncluded(e)) {
+						count++
+					}
+
+					return true
+				})
+				this.view.count = count
+			} else {
+				this.view.count = this.totalCount
+			}
+		},
+		async collectView() {
+			const items: Item[] = []
+			const offset = (this.page - 1) * this.limit
+			let count = 0
+			await this.$vectorDB.iterateRemote(this.collectionName, (e: PersistedVectorEntry): boolean => {
+				if (this.isIncluded(e)) {
+					if (count >= offset) {
+						const parsedUri = parseURI(e.uri)
+						if (parsedUri) {
+							items.push({ id: e.id, parsedUri, analysed: e.embedding.length > 0 })
+						}
+					}
+					count++
+				}
+
+				return items.length < this.limit
+			})
+			this.view.items = items
+		},
+		onFilterChanged(){
+			this.filter.applied = this.filter.value
+		},
+		onSelect(value: boolean){
+			this.view.items.forEach((i) => {
+				this.selected[i.id] = value
+			})
+		},
+		async onDeleteSelected() {
+			const ids: VectorEntryKey[] = Object.entries(this.selected)
+				.filter(([_, value]) => value)
+				.map(([key, _]) => key)
+				.map((key: string) => Number(key))
+
+			for (let id of ids) {
+				await this.$vectorDB.delete(id)
+			}
+
+			this.selected = {}
+			await this.collectView()
+			await this.collectInformation()
+		}
+	},
+	watch: {
+		'filter.applied'() {
+			this.collectInformation().then(() => this.collectView())
+		},
+		page() {
+			this.collectView()
+		},
+	},
+	mounted() {
+		this.collectInformation().then(() => this.collectView())
+	},
+})
+</script>
+
+<style scoped></style>