fix(structure): recursively count proposals count down structure tree

apollo/queries/countProposals.gql

@@ -0,0 +1,8 @@
+query CountProposals {
+  proposals: allThreads (condition: {threadType: PROPOSAL, status: OPEN, isDraft: false}) {
+    proposals: nodes {
+      id,
+      iri
+    }
+  }
+}

components/fallback/PouchBox.vue

@@ -48,33 +48,25 @@
             {{ classesCount }}
           </span>
         </div>
-        <div
-          v-show="!isProposal"
-          class="class-box-level-item">
-          <span class="class-box-label">
-            Proposal{{ proposalCount === 1 ? '' : 's' }}
-          </span>
-          <span class="class-box-value">
-            {{ proposalCount }}
-          </span>
-        </div>
-        <!--<div class="class-box-level-item">
-          <span class="class-box-label">
-            Propert{{ propertiesCount === 1 ? 'y' : 'ies' }}
-          </span>
-          <span class="class-box-value">
-            {{ propertiesCount }}
-          </span>
-        </div>-->
+        <no-ssr>
+          <div
+            v-show="!isProposal"
+            class="class-box-level-item">
+            <span class="class-box-label">
+              Proposal{{ proposalCount === 1 ? '' : 's' }}
+            </span>
+            <span class="class-box-value">
+              {{ proposalCount }}
+            </span>
+          </div>
+        </no-ssr>
       </div>
     </nuxt-link>
   </article>
 </template>
 
 <script>
-import _get from 'lodash/get'
 import { iriToId } from '@/libs/utils'
-import countProposalsByIri from '@/apollo/queries/countProposalsByIri'
 
 export default {
   name: 'PouchBox',
@@ -97,9 +89,10 @@ export default {
       required: false,
       default: 0
     },
-    propertiesCount: {
+    proposalCount: {
       type: Number,
-      required: true
+      required: false,
+      default: 0
     },
     modified: {
       type: String,
@@ -117,34 +110,8 @@ export default {
       default: false
     }
   },
-  data () {
-    return {
-      proposalCount: 0
-    }
-  },
   methods: {
     iriToId
-  },
-  apollo: {
-    proposals: {
-      query: countProposalsByIri,
-      variables () {
-        return {
-          iri: this.iri
-        }
-      },
-      fetchPolicy: 'no-cache',
-      pollInterval: process.server ? null : 1000 * Math.round(30 + Math.random() * 20),
-      result ({ data, loading }) {
-        if (!loading) {
-          const proposals = _get(data, 'proposals.proposals', [])
-          this.proposalCount = proposals.length
-        }
-      },
-      skip () {
-        return (process.client && !this.$store.state.authProcessDone) || this.isProposal
-      }
-    }
   }
 }
 </script>

components/fallback/Structure.vue

@@ -3,7 +3,7 @@
     <div class="tile is-parent">
       <article class="tile is-child container-box">
         <h1 class="title">
-          <!--{{ $store.state.config.editor.text.groupName || 'Group' }}: -->{{ _get(obj, 'label') }}
+          {{ _get(obj, 'label') }}
         </h1>
 
         <div class="tile is-child container-box class-boxes">
@@ -22,7 +22,7 @@
                   :label="child.label"
                   :to="{ path: child.path, params: {} }"
                   :iri="child.iri"
-                  :properties-count="_get(child, 'properties.length', 0)"
+                  :proposal-count="child.proposalCount"
                   :classes-count="childClassesCount(child)"
                   :modified="child.modified"
                   :type="child.type" />

plugins/libs/rdf.js

@@ -375,7 +375,7 @@ export default ({ app, store }, inject) => {
     return Object.values(indexObject)
   }
 
-  function buildTree (structureDataset, ontologyDataset) {
+  function buildTree (structureDataset, ontologyDataset, proposalCountByIRI) {
     if (!structureDataset) {
       return {}
     }
@@ -421,6 +421,23 @@ export default ({ app, store }, inject) => {
           }
         }
 
+        if (typeof node.proposalCount !== 'number') {
+          node.proposalCount = 0
+        }
+        const count = proposalCountByIRI[iri]
+        node.proposalCount = count || 0
+
+        let countNode = node.parent
+        while (countNode) {
+          if (typeof countNode.proposalCount !== 'number') {
+            countNode.proposalCount = 0
+          }
+          if (node.proposalCount) {
+            countNode.proposalCount += node.proposalCount
+          }
+          countNode = countNode.parent
+        }
+
         if (!node.parent) {
           // then it's a root
           acc.push(node)

store/action-types.js

@@ -5,3 +5,4 @@ export const LOAD = 'LOAD'
 export const LOAD_CONFIG = 'LOAD_CONFIG'
 export const DESERIALIZE = 'DESERIALIZE'
 export const RELOAD_DATASET = 'RELOAD_DATASET'
+export const COUNT_PROPOSALS = 'COUNT_PROPOSALS'

store/graph.js

@@ -1,17 +1,20 @@
+import _get from 'lodash/get'
 import rdf from 'rdf-ext'
 import DatasetExt from 'rdf-ext/lib/Dataset'
 import N3Parser from 'rdf-parser-n3'
 import { Readable } from 'readable-stream'
 import { serialize } from '@/libs/utils'
-import { DESERIALIZE, RELOAD_DATASET } from '@/store/action-types'
+import { DESERIALIZE, RELOAD_DATASET, COUNT_PROPOSALS } from '@/store/action-types'
 import fetchDataset from '@/trifid/dataset-fetch-client'
+import countProposals from '@/apollo/queries/countProposals'
 
 export const state = () => ({
   ontology: {},
   structure: {},
   ontologySerialized: '',
   structureSerialized: '',
   structureTree: {},
+  proposalCountByIRI: {},
   searchIndex: [],
   clientReady: false
 })
@@ -41,16 +44,23 @@ export const mutations = {
   structureInit (state, structureDataset) {
     state.structureSerialized = serialize(structureDataset)
     state.structure = structureDataset
-    state.structureTree = this.$buildTree(structureDataset, state.ontology)
+    state.structureTree = this.$buildTree(structureDataset, state.ontology, state.proposalCountByIRI)
   },
   clientReady (state) {
     state.searchIndex = this.$buildSearchIndex(state.ontology.merge(state.structure))
     state.clientReady = true
+  },
+  proposalCountByIRI (state, count) {
+    state.proposalCountByIRI = count
+  },
+  rebuildStructureTree (state) {
+    state.structureTree = this.$buildTree(state.structure, state.ontology, state.proposalCountByIRI)
   }
 }
 
 export const actions = {
-  async [DESERIALIZE] ({ commit, state }) {
+  async [DESERIALIZE] ({ commit, dispatch, state }) {
+    await dispatch(COUNT_PROPOSALS)
     const toDeserialize = ['ontology', 'structure']
       .filter((prop) => !(state[prop] instanceof DatasetExt))
 
@@ -64,13 +74,41 @@ export const actions = {
     commit('clientReady')
     return Promise.resolve('deserialized')
   },
+
   async [RELOAD_DATASET] ({ commit, dispatch, state, rootState }) {
+    const cache = JSON.stringify(state.proposalCountByIRI)
+    await dispatch(COUNT_PROPOSALS)
+    const compare = JSON.stringify(state.proposalCountByIRI)
+    if (compare !== cache) {
+      commit('rebuildStructureTree')
+    }
+
     const { ontologyDataset, structureDataset } = await fetchDataset(rootState.config)
     if (state.ontologySerialized !== serialize(ontologyDataset) || state.structureSerialized !== serialize(structureDataset)) {
       commit('ontologyInit', ontologyDataset)
       commit('structureInit', structureDataset)
     }
     return dispatch(DESERIALIZE)
+  },
+
+  async [COUNT_PROPOSALS] ({ commit }) {
+    try {
+      const result = await this.app.apolloProvider.defaultClient.query({
+        query: countProposals
+      })
+      const proposals = _get(result, 'data.proposals.proposals', [])
+      const count = proposals.reduce((acc, { iri }) => {
+        if (!acc[iri]) {
+          acc[iri] = 0
+        }
+        acc[iri]++
+        return acc
+      }, {})
+      commit('proposalCountByIRI', count)
+    }
+    catch (err) {
+      console.error(err)
+    }
   }
 }