7 files changed, 91 insertions, 6 deletions

diff --git a/viewer/src/@types/gallery/index.d.ts b/viewer/src/@types/gallery/index.d.ts
index b47c812..310c865 100644
--- a/viewer/src/@types/gallery/index.d.ts
+++ b/viewer/src/@types/gallery/index.d.ts
@@ -9,7 +9,7 @@ declare namespace Gallery {
         title: string,
         date: string,
         description: string,
-        tags: string[],
+        tags: RawTag[],
         path: string,
         thumbnail: {
             path: string,
@@ -28,4 +28,5 @@ declare namespace Gallery {
         type: "directory",
         items: Item[]
     }
+    type RawTag = string;
 }
\ No newline at end of file
diff --git a/viewer/src/@types/tag/index.d.ts b/viewer/src/@types/tag/index.d.ts
index 6a0c605..181f47a 100644
--- a/viewer/src/@types/tag/index.d.ts
+++ b/viewer/src/@types/tag/index.d.ts
@@ -1,6 +1,6 @@
 declare namespace Tag {
     interface Node {
-        tag: string;
+        tag: Gallery.RawTag;
         items: Gallery.Item[];
         children: Index;
     }
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
new file mode 100644
index 0000000..b23c14a
--- /dev/null
+++ b/viewer/src/components/LdProposition.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition">
+      <fa-icon icon="minus" @click="add(Operation.SUBSTRACTION, proposed.rawTag)" />
+      <span
+        @click="add(Operation.INTERSECTION, proposed.rawTag)"
+      >{{proposed.rawTag}}&nbsp;x{{proposed.count}}</span>
+      <fa-icon icon="plus" @click="add(Operation.ADDITION, proposed.rawTag)" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import { Operation } from "@/@types/tag/Operation";
+import Gallery from '../views/Gallery.vue';
+
+@Component
+export default class LdTagInput extends Vue {
+  get Operation() {
+    return Operation;
+  }
+
+  get proposedTags() {
+    const currentTags = this.$uiStore.currentTags;
+    let propositions: { [index: string]: number } = {};
+    if (currentTags.length > 0) {
+      // Tags count from current search
+      this.extractDistinctItems(currentTags)
+        .flatMap(item => item.tags)
+        .map(this.rightmost)
+        .filter(rawTag => !currentTags.find(currentTag => currentTag.tag === rawTag))
+        .forEach(rawTag => (propositions[rawTag] = (propositions[rawTag] ?? 0) + 1));
+    } else {
+      // Tags count from the whole gallery
+      Object.entries(this.$galleryStore.tags)
+        .forEach(entry => (propositions[entry[0]] = entry[1].items.length));
+    }
+    
+    return Object.entries(propositions)
+      .sort((a,b) => b[1] - a[1])
+      .map(entry => ({rawTag: entry[0], count: entry[1]}));
+  }
+
+  extractDistinctItems(currentTags: Tag.Search[]): Gallery.Item[] {
+    return [...new Set(currentTags.flatMap(tag => tag.items))];
+  }
+
+  rightmost(tag: Gallery.RawTag): Gallery.RawTag {
+    const dot = tag.lastIndexOf(".");
+    return dot <= 0 ? tag : tag.substr(dot + 1);
+  }
+
+  add(operation: Operation, rawTag: Gallery.RawTag) {
+    const node = this.$galleryStore.tags[rawTag];
+    const search: Tag.Search = { ...node, operation, display: `${operation}${node.tag}` };
+    this.$uiStore.currentTags.push(search);
+    this.$uiStore.mode = "search";
+  }
+}
+</script>
+
+<style lang="scss">
+.proposition {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 10px;
+  color: lightcyan;
+  cursor: pointer;
+}
+.proposition span {
+  padding: 0 10px;
+}
+</style>
diff --git a/viewer/src/locales/en.json b/viewer/src/locales/en.json
index d885872..4c9f5d4 100644
--- a/viewer/src/locales/en.json
+++ b/viewer/src/locales/en.json
@@ -5,5 +5,6 @@
   "panelLeft.mode": "Mode",
   "mode.navigation": "Navigation",
   "mode.search": "Search",
-  "search.no-results": "No results"
+  "search.no-results": "No results",
+  "panelLeft.propositions": "Proposed tags"
 }
\ No newline at end of file
diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts
index ba31c9e..7308afe 100644
--- a/viewer/src/plugins/fontawesome.ts
+++ b/viewer/src/plugins/fontawesome.ts
@@ -6,7 +6,9 @@ import {
     faExpandArrowsAlt,
     faFolder,
     faSearch,
-    faTag
+    faTag,
+    faPlus,
+    faMinus,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -14,6 +16,8 @@ library.add(
     faFolder,
     faSearch,
     faTag,
+    faPlus,
+    faMinus,
 );
 
 Vue.component("fa-icon", FontAwesomeIcon);
diff --git a/viewer/src/store/galleryStore.ts b/viewer/src/store/galleryStore.ts
index 8a611ea..179fbe2 100644
--- a/viewer/src/store/galleryStore.ts
+++ b/viewer/src/store/galleryStore.ts
@@ -44,6 +44,10 @@ export default class GalleryStore extends VuexModule {
     // Pushes all tags for a root item (and its children) to the index
     private static pushTagsForItem(index: Tag.Index, item: Gallery.Item) {
         console.log("IndexingTagsFor: ", item.path);
+        if (item.properties.type === "directory") {
+            item.properties.items.forEach(item => this.pushTagsForItem(index, item));
+            return; // Directories are not indexed
+        }
         for (const tag of item.tags) {
             const parts = tag.split('.');
             let lastPart: string | null = null;
@@ -54,8 +58,6 @@ export default class GalleryStore extends VuexModule {
                 lastPart = part;
             }
         }
-        if (item.properties.type === "directory")
-            item.properties.items.forEach(item => this.pushTagsForItem(index, item));
     }
 
     // Searches for an item by path from a root item (navigation)
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index c187ce6..df1fe54 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -4,6 +4,8 @@
     <ld-mode-radio />
     <h1>{{$t('panelLeft.filters')}}</h1>
     <ld-tag-input />
+    <h1>{{$t('panelLeft.propositions')}}</h1>
+    <ld-proposition />
   </div>
 </template>