From b8d7495e43d1f7ac12db67d13d2a3992e2f3364a Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Tue, 8 Feb 2022 13:41:26 +0900
Subject: [PATCH] Update annotation pages to show progress

---
 frontend/composables/useExampleItem.ts             |  9 ++++++++-
 .../projects/_id/image-classification/index.vue    | 14 ++++++++++++--
 .../intent-detection-and-slot-filling/index.vue    | 12 +++++++++++-
 .../pages/projects/_id/sequence-labeling/index.vue | 12 +++++++++++-
 .../projects/_id/sequence-to-sequence/index.vue    | 14 ++++++++++++--
 .../pages/projects/_id/speech-to-text/index.vue    | 14 ++++++++++++--
 .../projects/_id/text-classification/index.vue     |  8 ++++++--
 7 files changed, 72 insertions(+), 11 deletions(-)

diff --git a/frontend/composables/useExampleItem.ts b/frontend/composables/useExampleItem.ts
index b6e4faab..718382b6 100644
--- a/frontend/composables/useExampleItem.ts
+++ b/frontend/composables/useExampleItem.ts
@@ -5,7 +5,8 @@ import { ExampleDTO } from '@/services/application/example/exampleData'
 export const useExampleItem = () => {
   const state = reactive({
     example: {} as ExampleDTO,
-    totalExample: 0
+    totalExample: 0,
+    progress: {}
   })
 
   const { app } = useContext()
@@ -28,16 +29,22 @@ export const useExampleItem = () => {
     state.example = await exampleService.findById(projectId, state.example.id)
   }
 
+  const updateProgress = async(projectId: string) => {
+    state.progress = await app.$services.metrics.fetchMyProgress(projectId)
+  }
+
   const confirm = async(
     projectId: string,
   ) => {
     await exampleService.confirm(projectId, state.example.id)
     await getExampleById(projectId)
+    updateProgress(projectId)
   }
 
   return {
     state,
     confirm,
     getExample,
+    updateProgress
   }
 }
diff --git a/frontend/pages/projects/_id/image-classification/index.vue b/frontend/pages/projects/_id/image-classification/index.vue
index 2646aa4a..6e4eafa4 100644
--- a/frontend/pages/projects/_id/image-classification/index.vue
+++ b/frontend/pages/projects/_id/image-classification/index.vue
@@ -62,7 +62,8 @@
       </v-card>
     </template>
     <template #sidebar>
-      <list-metadata :metadata="image.meta" />
+      <annotation-progress :progress="progress" />
+      <list-metadata :metadata="image.meta" class="mt-4" />
     </template>
   </layout-text>
 </template>
@@ -78,10 +79,12 @@ import ListMetadata from '@/components/tasks/metadata/ListMetadata'
 import ToolbarLaptop from '@/components/tasks/toolbar/ToolbarLaptop'
 import ToolbarMobile from '@/components/tasks/toolbar/ToolbarMobile'
 import { useLabelList } from '@/composables/useLabelList'
+import AnnotationProgress from '@/components/tasks/sidebar/AnnotationProgress.vue'
 
 export default {
 
   components: {
+    AnnotationProgress,
     LabelGroup,
     LabelSelect,
     LayoutText,
@@ -118,7 +121,8 @@ export default {
         width: 0
       },
       mdiText,
-      mdiFormatListBulleted
+      mdiFormatListBulleted,
+      progress: {}
     }
   },
 
@@ -162,6 +166,7 @@ export default {
   async created() {
     this.getLabelList(this.projectId)
     this.project = await this.$services.project.findById(this.projectId)
+    this.progress = await this.$services.metrics.fetchMyProgress(this.projectId)
   },
 
   methods: {
@@ -202,9 +207,14 @@ export default {
       }
     },
 
+    async updateProgress() {
+      this.progress = await this.$services.metrics.fetchMyProgress(this.projectId)
+    },
+
     async confirm() {
       await this.$services.example.confirm(this.projectId, this.image.id)
       await this.$fetch()
+      this.updateProgress()
     },
 
     setImageSize(val) {
diff --git a/frontend/pages/projects/_id/intent-detection-and-slot-filling/index.vue b/frontend/pages/projects/_id/intent-detection-and-slot-filling/index.vue
index bdfd57a7..25904e20 100644
--- a/frontend/pages/projects/_id/intent-detection-and-slot-filling/index.vue
+++ b/frontend/pages/projects/_id/intent-detection-and-slot-filling/index.vue
@@ -44,7 +44,8 @@
       </v-card>
     </template>
     <template #sidebar>
-      <list-metadata :metadata="doc.meta" />
+      <annotation-progress :progress="progress" />
+      <list-metadata :metadata="doc.meta" class="mt-4" />
     </template>
   </layout-text>
 </template>
@@ -56,9 +57,11 @@ import ListMetadata from '@/components/tasks/metadata/ListMetadata'
 import ToolbarLaptop from '@/components/tasks/toolbar/ToolbarLaptop'
 import ToolbarMobile from '@/components/tasks/toolbar/ToolbarMobile'
 import LabelGroup from '@/components/tasks/textClassification/LabelGroup'
+import AnnotationProgress from '@/components/tasks/sidebar/AnnotationProgress.vue'
 
 export default {
   components: {
+    AnnotationProgress,
     EntityEditor,
     LayoutText,
     ListMetadata,
@@ -83,6 +86,7 @@ export default {
       project: {},
       exclusive: false,
       enableAutoLabeling: false,
+      progress: {}
     }
   },
 
@@ -123,6 +127,7 @@ export default {
     this.spanTypes = await this.$services.spanType.list(this.projectId)
     this.categoryTypes = await this.$services.categoryType.list(this.projectId)
     this.project = await this.$services.project.findById(this.projectId)
+    this.progress = await this.$services.metrics.fetchMyProgress(this.projectId)
   },
 
   methods: {
@@ -165,9 +170,14 @@ export default {
       await this.listSpan(this.doc.id)
     },
 
+    async updateProgress() {
+      this.progress = await this.$services.metrics.fetchMyProgress(this.projectId)
+    },
+
     async confirm() {
       await this.$services.example.confirm(this.projectId, this.doc.id)
       await this.$fetch()
+      this.updateProgress()
     }
   }
 }
diff --git a/frontend/pages/projects/_id/sequence-labeling/index.vue b/frontend/pages/projects/_id/sequence-labeling/index.vue
index d588b5aa..ac3aeca5 100644
--- a/frontend/pages/projects/_id/sequence-labeling/index.vue
+++ b/frontend/pages/projects/_id/sequence-labeling/index.vue
@@ -38,7 +38,8 @@
       </v-card>
     </template>
     <template #sidebar>
-      <list-metadata :metadata="doc.meta" />
+      <annotation-progress :progress="progress" />
+      <list-metadata :metadata="doc.meta" class="mt-4" />
       <v-card class="mt-4">
         <v-card-title>Label Types</v-card-title>
         <v-card-text>
@@ -80,10 +81,12 @@ import ListMetadata from '@/components/tasks/metadata/ListMetadata'
 import ToolbarLaptop from '@/components/tasks/toolbar/ToolbarLaptop'
 import ToolbarMobile from '@/components/tasks/toolbar/ToolbarMobile'
 import EntityEditor from '@/components/tasks/sequenceLabeling/EntityEditor.vue'
+import AnnotationProgress from '@/components/tasks/sidebar/AnnotationProgress.vue'
 
 export default {
 
   components: {
+    AnnotationProgress,
     EntityEditor,
     LayoutText,
     ListMetadata,
@@ -108,6 +111,7 @@ export default {
       enableAutoLabeling: false,
       rtl: false,
       selectedLabelIndex: null,
+      progress: {},
     }
   },
 
@@ -167,6 +171,7 @@ export default {
     this.labels = await this.$services.spanType.list(this.projectId)
     this.linkTypes = await this.$services.linkTypes.list(this.projectId)
     this.project = await this.$services.project.findById(this.projectId)
+    this.progress = await this.$services.metrics.fetchMyProgress(this.projectId)
   },
 
   methods: {
@@ -215,9 +220,14 @@ export default {
       }
     },
 
+    async updateProgress() {
+      this.progress = await this.$services.metrics.fetchMyProgress(this.projectId)
+    },
+
     async confirm() {
       await this.$services.example.confirm(this.projectId, this.doc.id)
       await this.$fetch()
+      this.updateProgress()
     },
 
     changeSelectedLabel(event) {
diff --git a/frontend/pages/projects/_id/sequence-to-sequence/index.vue b/frontend/pages/projects/_id/sequence-to-sequence/index.vue
index 8b4130da..957a606e 100644
--- a/frontend/pages/projects/_id/sequence-to-sequence/index.vue
+++ b/frontend/pages/projects/_id/sequence-to-sequence/index.vue
@@ -29,7 +29,8 @@
       />
     </template>
     <template #sidebar>
-      <list-metadata :metadata="doc.meta" />
+      <annotation-progress :progress="progress" />
+      <list-metadata :metadata="doc.meta" class="mt-4" />
     </template>
   </layout-text>
 </template>
@@ -40,11 +41,13 @@ import LayoutText from '@/components/tasks/layout/LayoutText'
 import ListMetadata from '@/components/tasks/metadata/ListMetadata'
 import ToolbarLaptop from '@/components/tasks/toolbar/ToolbarLaptop'
 import ToolbarMobile from '@/components/tasks/toolbar/ToolbarMobile'
+import AnnotationProgress from '@/components/tasks/sidebar/AnnotationProgress.vue'
 import Seq2seqBox from '~/components/tasks/seq2seq/Seq2seqBox'
 
 export default {
 
   components: {
+    AnnotationProgress,
     LayoutText,
     ListMetadata,
     Seq2seqBox,
@@ -62,7 +65,8 @@ export default {
       annotations: [],
       docs: [],
       project: {},
-      enableAutoLabeling: false
+      enableAutoLabeling: false,
+      progress: {}
     }
   },
 
@@ -104,6 +108,7 @@ export default {
 
   async created() {
     this.project = await this.$services.project.findById(this.projectId)
+    this.progress = await this.$services.metrics.fetchMyProgress(this.projectId)
   },
 
   methods: {
@@ -139,9 +144,14 @@ export default {
       }
     },
 
+    async updateProgress() {
+      this.progress = await this.$services.metrics.fetchMyProgress(this.projectId)
+    },
+
     async confirm() {
       await this.$services.example.confirm(this.projectId, this.doc.id)
       await this.$fetch()
+      this.updateProgress()
     }
   }
 }
diff --git a/frontend/pages/projects/_id/speech-to-text/index.vue b/frontend/pages/projects/_id/speech-to-text/index.vue
index e08831e3..35457689 100644
--- a/frontend/pages/projects/_id/speech-to-text/index.vue
+++ b/frontend/pages/projects/_id/speech-to-text/index.vue
@@ -36,7 +36,8 @@
       />
     </template>
     <template #sidebar>
-      <list-metadata :metadata="item.meta" />
+      <annotation-progress :progress="progress" />
+      <list-metadata :metadata="item.meta" class="mt-4" />
     </template>
   </layout-text>
 </template>
@@ -47,12 +48,14 @@ import LayoutText from '@/components/tasks/layout/LayoutText'
 import ListMetadata from '@/components/tasks/metadata/ListMetadata'
 import ToolbarLaptop from '@/components/tasks/toolbar/ToolbarLaptop'
 import ToolbarMobile from '@/components/tasks/toolbar/ToolbarMobile'
+import AnnotationProgress from '@/components/tasks/sidebar/AnnotationProgress.vue'
 import Seq2seqBox from '~/components/tasks/seq2seq/Seq2seqBox'
 import AudioViewer from '~/components/tasks/audio/AudioViewer'
 
 export default {
 
   components: {
+    AnnotationProgress,
     AudioViewer,
     LayoutText,
     ListMetadata,
@@ -72,7 +75,8 @@ export default {
       items: [],
       project: {},
       enableAutoLabeling: false,
-      isLoading: false
+      isLoading: false,
+      progress: {}
     }
   },
 
@@ -116,6 +120,7 @@ export default {
 
   async created() {
     this.project = await this.$services.project.findById(this.projectId)
+    this.progress = await this.$services.metrics.fetchMyProgress(this.projectId)
   },
 
   methods: {
@@ -151,9 +156,14 @@ export default {
       }
     },
 
+    async updateProgress() {
+      this.progress = await this.$services.metrics.fetchMyProgress(this.projectId)
+    },
+
     async confirm() {
       await this.$services.example.confirm(this.projectId, this.item.id)
       await this.$fetch()
+      this.updateProgress()
     }
   }
 }
diff --git a/frontend/pages/projects/_id/text-classification/index.vue b/frontend/pages/projects/_id/text-classification/index.vue
index bd502803..81636cb9 100644
--- a/frontend/pages/projects/_id/text-classification/index.vue
+++ b/frontend/pages/projects/_id/text-classification/index.vue
@@ -45,7 +45,8 @@
       </v-card>
     </template>
     <template #sidebar>
-      <list-metadata :metadata="example.meta" />
+      <annotation-progress :progress="progress" />
+      <list-metadata :metadata="example.meta" class="mt-4" />
     </template>
   </layout-text>
 </template>
@@ -63,10 +64,12 @@ import { useExampleItem } from '@/composables/useExampleItem'
 import { useLabelList } from '@/composables/useLabelList'
 import { useProjectItem } from '@/composables/useProjectItem'
 import { useTeacherList } from '@/composables/useTeacherList'
+import AnnotationProgress from '@/components/tasks/sidebar/AnnotationProgress.vue'
 
 export default {
 
   components: {
+    AnnotationProgress,
     ButtonLabelSwitch,
     LabelGroup,
     LabelSelect,
@@ -85,7 +88,7 @@ export default {
     const { app, params, query } = useContext()
     const projectId = params.value.id
     const { state: projectState, getProjectById } = useProjectItem()
-    const { state: exampleState, confirm, getExample } = useExampleItem()
+    const { state: exampleState, confirm, getExample, updateProgress } = useExampleItem()
     const {
       state: teacherState,
       annotateLabel,
@@ -101,6 +104,7 @@ export default {
 
     getLabelList(projectId)
     getProjectById(projectId)
+    updateProgress(projectId)
 
     const { fetch } = useFetch(async() => {
       await getExample(