Filter children tree by worker version

js/store/tree.js

@@ -10,7 +10,8 @@ export const initialState = () => ({
    * Stores tree element type filter during neighbors navigation i.e. with a same parent.
    * Filter is cleaned when updating navigation route in the `Element/Main.vue` component.
    */
-  typeFilter: ''
+  typeFilter: '',
+  versionFilter: ''
 })
 
 export const mutations = {
@@ -24,6 +25,10 @@ export const mutations = {
     state.typeFilter = value
   },
 
+  setVersionFilter (state, value) {
+    state.versionFilter = value
+  },
+
   reset (state) {
     assign(state, initialState())
   }

vue/Navigation/ChildrenTree/ChildrenTree.vue

@@ -29,6 +29,22 @@
           </select>
         </div>
       </li>
+      <li v-if="orderedVersions.length > 1" title="Filter children by worker version">
+        <div class="select is-small">
+          <select v-on:input="e => setVersionFilter(e.target.value)">
+            <option :selected="!versionFilter" value="">Filter by version…</option>
+            <option
+              v-for="v in orderedVersions"
+              :key="v.slug"
+              :selected="versionFilter === v.id"
+              :value="v.id"
+            >
+              {{ `${v.slug}` | truncateShort }}
+              ({{ v.treeCount }}/{{ flatTree.length - 1 }})
+            </option>
+          </select>
+        </div>
+      </li>
       <TreeItem
         :node="filteredChildrenTree"
         :interactive="interactive"
@@ -53,9 +69,10 @@
 <script>
 import EditionForm from 'vue/Element/EditionForm'
 import TranscriptionsForm from 'vue/Element/Transcription/Form'
-import { mapState, mapMutations, mapGetters } from 'vuex'
+import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
 import { orderBy } from 'lodash'
 import { corporaMixin, truncateMixin } from '~/js/mixins'
+import { MANUAL_WORKER_VERSION } from '~/js/config'
 import TreeItem from './TreeItem'
 export default {
   components: {
@@ -86,7 +103,8 @@ export default {
   }),
   computed: {
     ...mapState('display', ['imageShow']),
-    ...mapState('tree', ['typeFilter']),
+    ...mapState('tree', ['typeFilter', 'versionFilter']),
+    ...mapState('process', ['workerVersions']),
     ...mapGetters('tree', ['tree']),
     corpusId () {
       return this.element.corpus.id
@@ -95,7 +113,7 @@ export default {
       return this.tree(this.element)
     },
     filteredChildrenTree () {
-      if (!this.typeFilter) return this.childrenTree
+      if (!this.typeFilter && !this.versionFilter) return this.childrenTree
       return this.filterTree(this.childrenTree)
     },
     flatTree () {
@@ -109,6 +127,10 @@ export default {
     flatFilteredTreeIds () {
       return this.flatFilteredTree.map(e => e.id)
     },
+    treeLengths () {
+      const lengths = { fullTree: this.flatTree.length, filteredTree: this.flatFilteredTreeIds.length }
+      return lengths
+    },
     displayTitle () {
       return this.imageShow ? 'Hide' : 'Display'
     },
@@ -136,12 +158,44 @@ export default {
         })),
         t => t.display_name, ['asc']
       )
+    },
+    orderedVersions () {
+      const versions = this.flatTree.reduce((obj, elt) => {
+        if (elt.id === this.element.id) return obj
+        if (!elt.worker_version_id) obj[MANUAL_WORKER_VERSION] = (obj[MANUAL_WORKER_VERSION] || 0) + 1
+        else obj[elt.worker_version_id] = (obj[elt.worker_version_id] || 0) + 1
+        return obj
+      }, {})
+      return orderBy(
+        Object.entries(versions).map(([versionId, treeCount]) => ({
+          ...this.versionIds[versionId] || {}, treeCount
+        })),
+        v => v.id, ['asc']
+      )
+    }
+  },
+  asyncComputed: {
+    versionIds: {
+      get () {
+        if (!this.element) return {}
+        const versionsList = {}
+        const ids = new Set(this.flatTree.map(elt => elt.worker_version_id))
+        Promise.all([...ids].map(async id => {
+          if (!id) versionsList[MANUAL_WORKER_VERSION] = { id: MANUAL_WORKER_VERSION, slug: 'Manual' }
+          if (id && !this.workerVersions[id]) await this.getWorkerVersion(id)
+          const version = this.workerVersions[id] || null
+          if (version) versionsList[id] = { id: id, slug: version.worker.name + ' ' + version.revision.hash.substring(0, 8) }
+        }))
+        return versionsList
+      },
+      default: {}
     }
   },
   methods: {
     ...mapMutations('display', ['setImageShow']),
-    ...mapMutations('tree', ['setTypeFilter']),
+    ...mapMutations('tree', ['setTypeFilter', 'setVersionFilter']),
     ...mapMutations('elements', ['setHighlightedBulk']),
+    ...mapActions('process', ['getWorkerVersion']),
     flatten (node) {
       return [
         node.element,
@@ -151,6 +205,15 @@ export default {
         }, [])
       ]
     },
+    versionFiltered (node) {
+      return (!this.versionFilter ||
+        (this.versionFilter === MANUAL_WORKER_VERSION && !node.element.worker_version_id) ||
+        node.element.worker_version_id === this.versionFilter
+      )
+    },
+    typeFiltered (node) {
+      return (!this.typeFilter || node.element.type === this.typeFilter)
+    },
     filterTree (node) {
       /*
        * Recursively filter elements of the tree with a corresponding type slug.
@@ -159,7 +222,7 @@ export default {
        */
       const filteredChildren = node.children.map(node => this.filterTree(node)).filter(node => node)
       // Return this node if it match filtering itself or via its children
-      if (node.element.type === this.typeFilter || filteredChildren.length || node.element.id === this.element.id) {
+      if ((this.versionFiltered(node) && this.typeFiltered(node)) || filteredChildren.length || node.element.id === this.element.id) {
         return {
           ...node,
           children: filteredChildren
@@ -180,9 +243,22 @@ export default {
   },
   watch: {
     modal (open) { if (!open) this.selectedElement = null },
+    treeLengths (newValues, oldValues) {
+      /*
+       * If no elements are shown anymore due to deletion, reset the filters.
+       * Only if the total element count in the tree changes, because if a
+       * user chooses filters that, combined, don't return anything, they
+       * should be able to see it.
+       */
+      if (newValues.filteredTree === 1 && oldValues.filteredTree > 1 &&
+          newValues.fullTree < oldValues.fullTree &&
+          (this.typeFilter || this.versionFilter)
+      ) {
+        this.setTypeFilter('')
+        this.setVersionFilter('')
+      }
+    },
     flatFilteredTreeIds (newList, oldList) {
-      // In case no elements are shown anymore, reset the type filter
-      if (newList.length === 1 && oldList.length > 1 && this.typeFilter) this.typeFilter = ''
       // Removed elements should not be highlighted anymore
       const removedElts = oldList.filter(id => !newList.includes(id))
       this.setHighlightedBulk({ parentId: this.element.id, ids: removedElts, highlight: false })