Update annotation pages to show progress

2 years ago · b8d7495e43
7 changed files with 72 additions and 11 deletions
--- 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
  }
 }
--- 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) {
--- 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()
    }
  }
 }
--- 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) {
--- 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()
    }
  }
 }
--- 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()
    }
  }
 }
--- 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(