Display models on WorkerActivity

src/components/Corpus/WorkerStats.vue

@@ -4,18 +4,23 @@
       <a class="column is-narrow has-text-grey-dark p-0" v-on:click="expanded = !expanded">
         <i class="toggle icon icon-down-open" :class="{ expanded }"></i>
         <div v-if="loading" class="loading-content loader is-inline-flex"></div>
-        <span v-else>{{ workerName }}</span>
+        <span v-else>
+          {{ workerName }}
+          <template v-if="model">
+            with model {{ model.name }}
+          </template>
+        </span>
         <!--
-          @vue-expect-error This component does support a configurationId set to null,
-          but since it isn't typed, TS assumes the configuratIonId must be a string
+          @vue-expect-error This component does support a configuration_id set to null,
+          but since it isn't typed, TS assumes the configuration_id must be a string
         -->
         <VersionDetails
           has-dropdown-title
           with-configuration
           dropdown-position="left"
           class="has-text-weight-normal"
-          :worker-version-id="workerVersionId"
-          :configuration-id="configurationId"
+          :worker-version-id="stats.worker_version_id"
+          :configuration-id="stats.configuration_id"
         />
       </a>
       <div class="column is-marginless py-1 px-5">
@@ -126,28 +131,26 @@
 </template>
 
 <script lang="ts">
+import { mapStores, mapActions } from 'pinia'
 import { defineComponent, PropType } from 'vue'
-import { mapState, mapActions, mapMutations } from 'vuex'
-import { errorParser } from '@/helpers'
+import { mapState as mapVuexState, mapActions as mapVuexActions } from 'vuex'
+
 import { ACTIVITY_COLORS } from '@/config'
-import VersionDetails from '@/components/Process/Workers/Versions/Details.vue'
 import { WorkerActivityState } from '@/enums'
+import { errorParser } from '@/helpers'
+import { useModelStore, useNotificationStore } from '@/stores'
+import { WorkerActivityStats } from '@/types/process'
+import { ModelVersion } from '@/types/model'
+
+import VersionDetails from '@/components/Process/Workers/Versions/Details.vue'
 
 export default defineComponent({
   components: {
     VersionDetails
   },
   props: {
-    workerVersionId: {
-      type: String,
-      required: true
-    },
-    configurationId: {
-      type: String as PropType<string | null>,
-      default: null
-    },
     stats: {
-      type: Object,
+      type: Object as PropType<WorkerActivityStats>,
       required: true
     }
   },
@@ -155,47 +158,82 @@ export default defineComponent({
     expanded: true,
     loading: false
   }),
-  async created () {
-    if (!this.version) {
-      this.loading = true
-      try {
-        await this.getWorkerVersion(this.workerVersionId)
-      } catch (err) {
-        this.notify({ type: 'error', text: `An error occurred retrieving version "${this.workerVersionId}": ${errorParser(err)}` })
-      } finally {
-        this.loading = false
-      }
-    }
-  },
   computed: {
-    ...mapState('process', ['workerVersions']),
+    ...mapVuexState('process', ['workerVersions']),
+    ...mapStores(useModelStore),
     /**
      * Ordered statistics by state for a better display. Filters out zeros
      */
-    stateStats () {
-      return ['processed', 'started', 'queued', 'error']
-        .map(state => [state, this.stats[state]])
+    stateStats (): [WorkerActivityState, number][] {
+      return (['processed', 'started', 'queued', 'error'] as WorkerActivityState[])
+        .map(state => [state, this.stats[state]] as [WorkerActivityState, number])
         .filter(([, value]) => value)
     },
     count () {
       return this.stateStats.reduce((count, [, value]) => count + Number(value) || 0, 0)
     },
     version () {
-      return this.workerVersions[this.workerVersionId]
+      return this.workerVersions[this.stats.worker_version_id]
     },
     workerName () {
       return this.version ? this.version.worker.name : '—'
     },
+    modelVersion () {
+      if (!this.stats.model_version_id) return null
+      return this.modelStore.modelVersions[this.stats.model_version_id] ?? null
+    },
+    model () {
+      if (!this.modelVersion) return null
+      return this.modelStore.models[this.modelVersion.model_id] ?? null
+    },
     hasProcessedTime () {
       return this.stats.average_processed_time || this.stats.min_processed_time || this.stats.max_processed_time || this.stats.median_processed_time || this.stats.completion_estimate_time
     }
   },
   methods: {
-    ...mapActions('process', ['getWorkerVersion']),
-    ...mapMutations('notifications', ['notify']),
+    ...mapVuexActions('process', ['getWorkerVersion']),
+    ...mapActions(useNotificationStore, ['notify']),
     statColor (value: WorkerActivityState) {
       return ACTIVITY_COLORS[value]
     }
+  },
+  watch: {
+    version: {
+      immediate: true,
+      // newValue cannot be typed because it requires migrating the process store
+      async handler (newValue) {
+        if (newValue) return
+        this.loading = true
+        try {
+          await this.getWorkerVersion(this.stats.worker_version_id)
+        } catch (err) {
+          this.notify({ type: 'error', text: `An error occurred retrieving worker version "${this.stats.worker_version_id}": ${errorParser(err)}` })
+        } finally {
+          this.loading = false
+        }
+      }
+    },
+    modelVersion: {
+      immediate: true,
+      async handler (newValue: ModelVersion | null) {
+        if (!this.stats.model_version_id) return
+        if (!newValue) {
+          // We do not have a model version, fetch it. The model will be fetched on the next watcher call
+          try {
+            await this.modelStore.getModelVersion(this.stats.model_version_id)
+          } catch (err) {
+            this.notify({ type: 'error', text: `An error occurred retrieving model version "${this.stats.model_version_id}": ${errorParser(err)}` })
+          }
+        } else if (!this.model) {
+          // We have a model version but no model, so fetch the model
+          try {
+            await this.modelStore.retrieveModel(newValue.model_id)
+          } catch (err) {
+            this.notify({ type: 'error', text: `An error occurred retrieving model "${newValue.model_id}": ${errorParser(err)}` })
+          }
+        }
+      }
+    }
   }
 })
 </script>

src/views/Corpus/WorkersActivity.vue

@@ -24,10 +24,8 @@
     </template>
     <template v-else>
       <WorkerStats
-        v-for="({ worker_version_id, configuration_id, ...stats }, index) in activities"
+        v-for="(stats, index) in activities"
         :key="index"
-        :worker-version-id="worker_version_id"
-        :configuration-id="configuration_id"
         :stats="stats"
       />
     </template>

src/views/Process/WorkersActivity.vue

@@ -48,10 +48,8 @@
     </template>
     <template v-else>
       <WorkerStats
-        v-for="({ worker_version_id, configuration_id, ...stats }, index) in activities"
+        v-for="(stats, index) in activities"
         :key="index"
-        :worker-version-id="worker_version_id"
-        :configuration-id="configuration_id"
         :stats="stats"
       />
     </template>