From 8e0f392aabe73a2f9f30f27d9f3a1c693d10bede Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 14 Feb 2024 13:33:55 +0100
Subject: [PATCH 1/5] persist up to 500 tags in client database

---
 client/package.json                           |   1 +
 .../TagsMultiselect/HeadlessMultiselect.vue   |   3 +
 .../TagsMultiselect/StatelessTags.vue         |  11 +-
 client/src/stores/userTagsStore.ts            | 129 ++++++++++++++++--
 client/yarn.lock                              |  12 ++
 5 files changed, 138 insertions(+), 18 deletions(-)

diff --git a/client/package.json b/client/package.json
index 07df904d9eea..74a927ee93f8 100644
--- a/client/package.json
+++ b/client/package.json
@@ -55,6 +55,7 @@
     "d3v3": "npm:d3@3",
     "date-fns": "^2.30.0",
     "decode-uri-component": "^0.2.1",
+    "dexie": "^3.2.5",
     "dom-to-image": "^2.6.0",
     "dompurify": "^3.0.6",
     "dumpmeta-webpack-plugin": "^0.2.0",
diff --git a/client/src/components/TagsMultiselect/HeadlessMultiselect.vue b/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
index 8a3fc5dd5fb3..0a5528697839 100644
--- a/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
+++ b/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
@@ -41,6 +41,8 @@ const emit = defineEmits<{
     (e: "input", selected: string[]): void;
     /** emitted when a new option is selected, which wasn't part of the options prop */
     (e: "addOption", newOption: string): void;
+    /** emitted when a option is added */
+    (e: "selected", option: string): void;
 }>();
 
 const inputField = ref<HTMLInputElement | null>(null);
@@ -154,6 +156,7 @@ function onOptionSelected(option: string) {
         set.delete(option);
     } else {
         set.add(option);
+        emit("selected", option);
     }
 
     emit("input", Array.from(set));
diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index 3bd10cf7de69..6fd2db1e1b0f 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { BButton } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { computed, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 
 import { useToast } from "@/composables/toast";
 import { useUid } from "@/composables/utils/uid";
@@ -37,11 +37,15 @@ const userTagsStore = useUserTagsStore();
 const { userTags } = storeToRefs(userTagsStore);
 const { warning } = useToast();
 
+onMounted(() => {
+    userTagsStore.onMultipleNewTagsSeen(props.value);
+});
+
 function onAddTag(tag: string) {
     const newTag = tag.trim();
 
     if (isValid(newTag)) {
-        userTagsStore.addLocalTag(newTag);
+        userTagsStore.onNewTagSeen(newTag);
         emit("input", [...props.value, newTag]);
     } else {
         warning(`"${newTag}" is not a valid tag.`, "Invalid Tag");
@@ -111,7 +115,8 @@ function onTagClicked(tag: string) {
                 :placeholder="props.placeholder"
                 :validator="isValid"
                 @addOption="onAddTag"
-                @input="onInput" />
+                @input="onInput"
+                @selected="(tag) => userTagsStore.onTagUsed(tag)" />
         </div>
 
         <div v-else>
diff --git a/client/src/stores/userTagsStore.ts b/client/src/stores/userTagsStore.ts
index f2bb4047df58..2842473b534a 100644
--- a/client/src/stores/userTagsStore.ts
+++ b/client/src/stores/userTagsStore.ts
@@ -1,27 +1,126 @@
+import { until } from "@vueuse/core";
+import Dexie from "dexie";
 import { defineStore, storeToRefs } from "pinia";
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
+
+import { useHashedUserId } from "@/composables/hashedUserId";
+import { assertDefined, ensureDefined } from "@/utils/assertions";
 
 import { useUserStore } from "./userStore";
 
-export const useUserTagsStore = defineStore("userTagsStore", () => {
-    const localTags = ref<string[]>([]);
+interface StoredTag {
+    id?: number;
+    tag: string;
+    userHash: string;
+    lastUsed: number;
+}
+
+class UserTagStoreDatabase extends Dexie {
+    tags!: Dexie.Table<StoredTag, number>;
+
+    constructor() {
+        super("userTagStoreDatabase");
+        this.version(1).stores({ tags: "++id, userHash, lastUsed" });
+    }
+}
 
+const maxDbEntriesPerUser = 500;
+
+function normalizeTag(tag: string) {
+    return tag.replace(/^name:/, "#");
+}
+
+export const useUserTagsStore = defineStore("userTagsStore", () => {
     const { currentUser } = storeToRefs(useUserStore());
+    const { hashedUserId } = useHashedUserId(currentUser);
+
+    const db = new UserTagStoreDatabase();
+    const tags = ref<StoredTag[]>([]);
+    const dbLoaded = ref(false);
 
+    watch(
+        () => hashedUserId.value,
+        async (userHash) => {
+            if (userHash) {
+                tags.value = await db.tags.where("userHash").equals(userHash).sortBy("lastUsed");
+
+                console.log(tags.value);
+
+                if (tags.value.length > maxDbEntriesPerUser) {
+                    await removeOldestEntries(tags.value.length - maxDbEntriesPerUser);
+                }
+
+                dbLoaded.value = true;
+            }
+        },
+        { immediate: true }
+    );
+
+    /** removes the x oldest tags from the database */
+    async function removeOldestEntries(count: number) {
+        const oldestTags = tags.value.filter((o) => o.id !== undefined).splice(0, count);
+        await db.tags.bulkDelete(oldestTags.map((o) => o.id!));
+    }
+
+    /** tags as string array */
     const userTags = computed(() => {
-        let tags: string[];
-        if (currentUser.value && !currentUser.value.isAnonymous) {
-            tags = [...(currentUser.value.tags_used ?? []), ...localTags.value];
-        } else {
-            tags = localTags.value;
-        }
-        const tagSet = new Set(tags);
-        return Array.from(tagSet).map((tag) => tag.replace(/^name:/, "#"));
+        return tags.value.map((o) => o.tag).reverse();
     });
 
-    const addLocalTag = (tag: string) => {
-        localTags.value.push(tag);
-    };
+    async function onNewTagSeen(tag: string) {
+        await until(dbLoaded).toBe(true);
+
+        assertDefined(hashedUserId.value);
+        tag = normalizeTag(tag);
+
+        const tagSet = new Set(userTags.value);
+
+        if (!tagSet.has(tag)) {
+            const tagObject: StoredTag = {
+                tag,
+                userHash: hashedUserId.value,
+                lastUsed: Date.now(),
+            };
+
+            tags.value.push(tagObject);
+            await db.tags.add(tagObject);
+        }
+    }
+
+    async function onMultipleNewTagsSeen(newTags: string[]) {
+        await until(dbLoaded).toBe(true);
+
+        const userHash = ensureDefined(hashedUserId.value);
+        const tagSet = new Set(userTags.value);
+
+        // only the ones that really are new
+        const filteredNewTags = newTags.map(normalizeTag).filter((tag) => !tagSet.has(tag));
+
+        if (filteredNewTags.length > 0) {
+            const now = Date.now();
+            const newTagObjects: StoredTag[] = filteredNewTags.map((tag) => ({
+                tag,
+                userHash,
+                lastUsed: now,
+            }));
+
+            tags.value = tags.value.concat(newTagObjects);
+            await db.tags.bulkAdd(newTagObjects);
+        }
+    }
+
+    async function onTagUsed(tag: string) {
+        await until(dbLoaded).toBe(true);
+        tag = normalizeTag(tag);
+
+        const storedTag = tags.value.find((o) => o.tag === tag);
+        const id = storedTag?.id;
+
+        if (id !== undefined) {
+            // put instead of update, because `removeOldestEntries` may have deleted this tag on init
+            await db.tags.put({ ...storedTag, lastUsed: Date.now() } as StoredTag, id);
+        }
+    }
 
-    return { localTags, userTags, addLocalTag };
+    return { userTags, onNewTagSeen, onTagUsed, onMultipleNewTagsSeen };
 });
diff --git a/client/yarn.lock b/client/yarn.lock
index 087b32814f97..5e67b9cf21b1 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -5054,6 +5054,13 @@ detect-node@^2.0.4:
   resolved "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz"
   integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
 
+dexie@^3.2.5:
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/dexie/-/dexie-3.2.5.tgz#f68e34b98e0e5e3412cf86b540a2cc6cbf9b0266"
+  integrity sha512-MA7vYQvXxWN2+G50D0GLS4FqdYUyRYQsN0FikZIVebOmRoNCSCL9+eUbIF80dqrfns3kmY+83+hE2GN9CnAGyA==
+  dependencies:
+    karma-safari-launcher "^1.0.0"
+
 diff-sequences@^29.6.3:
   version "29.6.3"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.6.3.tgz#4deaf894d11407c51efc8418012f9e70b84ea921"
@@ -7938,6 +7945,11 @@ just-debounce@^1.0.0:
   resolved "https://registry.npmjs.org/just-debounce/-/just-debounce-1.1.0.tgz"
   integrity sha512-qpcRocdkUmf+UTNBYx5w6dexX5J31AKK1OmPwH630a83DdVVUIngk55RSAiIGpQyoH0dlr872VHfPjnQnK1qDQ==
 
+karma-safari-launcher@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/karma-safari-launcher/-/karma-safari-launcher-1.0.0.tgz#96982a2cc47d066aae71c553babb28319115a2ce"
+  integrity sha512-qmypLWd6F2qrDJfAETvXDfxHvKDk+nyIjpH9xIeI3/hENr0U3nuqkxaftq73PfXZ4aOuOChA6SnLW4m4AxfRjQ==
+
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz"

From d0d0a3c3e105a9952b5fa76f982ae6a44a5a9e35 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 14 Feb 2024 13:43:04 +0100
Subject: [PATCH 2/5] fix test mocks

---
 .../components/TagsMultiselect/StatelessTags.test.js   | 10 ++++++----
 client/tests/jest/jest.config.js                       |  1 +
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.test.js b/client/src/components/TagsMultiselect/StatelessTags.test.js
index 7869166cb34b..63a350000939 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.test.js
+++ b/client/src/components/TagsMultiselect/StatelessTags.test.js
@@ -20,10 +20,12 @@ const mountWithProps = (props) => {
 };
 
 jest.mock("@/stores/userTagsStore");
-const addLocalTagMock = jest.fn((tag) => tag);
+const onNewTagSeenMock = jest.fn((tag) => tag);
 useUserTagsStore.mockReturnValue({
     userTags: computed(() => autocompleteTags),
-    addLocalTag: addLocalTagMock,
+    onNewTagSeen: onNewTagSeenMock,
+    onTagUsed: jest.fn(),
+    onMultipleNewTagsSeen: jest.fn(),
 });
 
 jest.mock("composables/toast");
@@ -103,8 +105,8 @@ describe("StatelessTags", () => {
         multiselect.find(selectors.options).trigger("click");
         await wrapper.vm.$nextTick();
 
-        expect(addLocalTagMock.mock.calls.length).toBe(1);
-        expect(addLocalTagMock.mock.results[0].value).toBe("new_tag");
+        expect(onNewTagSeenMock.mock.calls.length).toBe(1);
+        expect(onNewTagSeenMock.mock.results[0].value).toBe("new_tag");
     });
 
     it("warns about not allowed tags", async () => {
diff --git a/client/tests/jest/jest.config.js b/client/tests/jest/jest.config.js
index fc234e58f24a..58f9c852e11a 100644
--- a/client/tests/jest/jest.config.js
+++ b/client/tests/jest/jest.config.js
@@ -35,6 +35,7 @@ module.exports = {
             "<rootDir>/node_modules/rxjs/dist/esm/internal/scheduler/AsyncScheduler.js",
         "^@/(.*)$": "<rootDir>/src/$1",
         "^@tests/(.*)$": "<rootDir>/tests/$1",
+        dexie: "<rootDir>/node_modules/dexie/dist/dexie.js",
     },
     modulePathIgnorePatterns: ["<rootDir>/src/.*/__mocks__"],
     rootDir: path.join(__dirname, "../../"),

From bb50bd2fd5563c15d9eaeb90a6eb9565cf6e52ee Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 14 Feb 2024 14:08:51 +0100
Subject: [PATCH 3/5] fix mock in Attributes test

---
 client/src/components/Workflow/Editor/Attributes.test.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Workflow/Editor/Attributes.test.js b/client/src/components/Workflow/Editor/Attributes.test.js
index 2f477bca6b9f..f195e4622725 100644
--- a/client/src/components/Workflow/Editor/Attributes.test.js
+++ b/client/src/components/Workflow/Editor/Attributes.test.js
@@ -20,8 +20,11 @@ const autocompleteTags = ["#named_uer_tag", "abc", "my_tag"];
 jest.mock("@/stores/userTagsStore");
 useUserTagsStore.mockReturnValue({
     userTags: computed(() => autocompleteTags),
-    addLocalTag: jest.fn(),
+    onNewTagSeen: jest.fn(),
+    onTagUsed: jest.fn(),
+    onMultipleNewTagsSeen: jest.fn(),
 });
+
 describe("Attributes", () => {
     it("test attributes", async () => {
         const localVue = createLocalVue();

From c028ff70ffd357c3f31cfa4c3dde5a01dad07d93 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 15 Feb 2024 14:40:02 +0100
Subject: [PATCH 4/5] remove tags from internal array increase limit to 10000

---
 client/src/stores/userTagsStore.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/stores/userTagsStore.ts b/client/src/stores/userTagsStore.ts
index 2842473b534a..cf365d80e775 100644
--- a/client/src/stores/userTagsStore.ts
+++ b/client/src/stores/userTagsStore.ts
@@ -24,7 +24,7 @@ class UserTagStoreDatabase extends Dexie {
     }
 }
 
-const maxDbEntriesPerUser = 500;
+const maxDbEntriesPerUser = 10000;
 
 function normalizeTag(tag: string) {
     return tag.replace(/^name:/, "#");
@@ -58,7 +58,7 @@ export const useUserTagsStore = defineStore("userTagsStore", () => {
 
     /** removes the x oldest tags from the database */
     async function removeOldestEntries(count: number) {
-        const oldestTags = tags.value.filter((o) => o.id !== undefined).splice(0, count);
+        const oldestTags = tags.value.splice(0, count);
         await db.tags.bulkDelete(oldestTags.map((o) => o.id!));
     }
 

From 1c69980b7350ff87d13110ab10a7b56b0b0ac678 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 15 Feb 2024 17:10:32 +0100
Subject: [PATCH 5/5] store named tags in the format name:value

---
 client/src/components/TagsMultiselect/HeadlessMultiselect.vue | 4 +++-
 client/src/stores/userTagsStore.ts                            | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/src/components/TagsMultiselect/HeadlessMultiselect.vue b/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
index 0a5528697839..6cd518e8bb73 100644
--- a/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
+++ b/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
@@ -88,7 +88,9 @@ const filteredOptions = computed(() => {
 
 /** options trimmed to `maxShownOptions` and reordered so the search value appears first */
 const trimmedOptions = computed(() => {
-    const optionsSliced = filteredOptions.value.slice(0, props.maxShownOptions);
+    const optionsSliced = filteredOptions.value
+        .slice(0, props.maxShownOptions)
+        .map((tag) => tag.replace(/^name:/, "#"));
 
     // remove search value to put it in front
     const optionsSet = new Set(optionsSliced);
diff --git a/client/src/stores/userTagsStore.ts b/client/src/stores/userTagsStore.ts
index cf365d80e775..ce5b449a1554 100644
--- a/client/src/stores/userTagsStore.ts
+++ b/client/src/stores/userTagsStore.ts
@@ -27,7 +27,7 @@ class UserTagStoreDatabase extends Dexie {
 const maxDbEntriesPerUser = 10000;
 
 function normalizeTag(tag: string) {
-    return tag.replace(/^name:/, "#");
+    return tag.replace(/^#/, "name:");
 }
 
 export const useUserTagsStore = defineStore("userTagsStore", () => {