From 15928aa0a6de7fcf52b4205da9d2cba4c0b4b29d Mon Sep 17 00:00:00 2001 From: Hironsan Date: Fri, 21 Oct 2022 17:18:10 +0900 Subject: [PATCH] Enable to order examples by score in frontend --- .../tasks/toolbar/ToolbarLaptop.vue | 21 +++++++++++++++++++ frontend/composables/useExampleItem.ts | 9 ++++++-- .../projects/_id/image-captioning/index.vue | 3 ++- .../_id/image-classification/index.vue | 3 ++- .../index.vue | 3 ++- .../projects/_id/object-detection/index.vue | 3 ++- .../pages/projects/_id/segmentation/index.vue | 3 ++- .../projects/_id/sequence-labeling/index.vue | 3 ++- .../_id/sequence-to-sequence/index.vue | 3 ++- .../projects/_id/speech-to-text/index.vue | 3 ++- .../example/apiDocumentRepository.ts | 4 ++-- .../example/exampleApplicationService.ts | 6 ++++-- 12 files changed, 50 insertions(+), 14 deletions(-) diff --git a/frontend/components/tasks/toolbar/ToolbarLaptop.vue b/frontend/components/tasks/toolbar/ToolbarLaptop.vue index 381621a6..b6941580 100644 --- a/frontend/components/tasks/toolbar/ToolbarLaptop.vue +++ b/frontend/components/tasks/toolbar/ToolbarLaptop.vue @@ -6,6 +6,8 @@ + + @@ -64,6 +66,7 @@ import ButtonClear from './buttons/ButtonClear.vue' import ButtonComment from './buttons/ButtonComment.vue' import ButtonFilter from './buttons/ButtonFilter.vue' import ButtonGuideline from './buttons/ButtonGuideline.vue' +import ButtonOrder from './buttons/ButtonOrder.vue' import ButtonPagination from './buttons/ButtonPagination.vue' import ButtonReview from './buttons/ButtonReview.vue' import ButtonKeyboardShortcut from './buttons/ButtonKeyboardShortcut.vue' @@ -80,6 +83,7 @@ export default Vue.extend({ ButtonComment, ButtonFilter, ButtonGuideline, + ButtonOrder, ButtonKeyboardShortcut, ButtonPagination, ButtonReview, @@ -134,6 +138,10 @@ export default Vue.extend({ filterOption(): string { // @ts-ignore return this.$route.query.isChecked + }, + orderOption(): string { + // @ts-ignore + return this.$route.query.ordering } }, @@ -143,6 +151,7 @@ export default Vue.extend({ query: { page: page.toString(), isChecked: this.filterOption, + ordering: this.$route.query.ordering, q: this.$route.query.q } }) @@ -153,11 +162,23 @@ export default Vue.extend({ query: { page: '1', isChecked, + ordering: this.$route.query.ordering, q: this.$route.query.q } }) }, + changeOrder(ordering: string) { + this.$router.push({ + query: { + page: '1', + isChecked: this.filterOption, + q: this.$route.query.q, + ordering + } + }) + }, + updateAutoLabeling(isEnable: boolean) { if (isEnable) { this.$emit('update:enable-auto-labeling', true) diff --git a/frontend/composables/useExampleItem.ts b/frontend/composables/useExampleItem.ts index d616850b..ed9baca1 100644 --- a/frontend/composables/useExampleItem.ts +++ b/frontend/composables/useExampleItem.ts @@ -14,9 +14,14 @@ export const useExampleItem = () => { const getExample = async ( projectId: string, - { page, q, isChecked }: { page: string; q: string; isChecked: string } + { + page, + q, + isChecked, + ordering + }: { page: string; q: string; isChecked: string; ordering: string } ) => { - const examples = await exampleService.fetchOne(projectId, page, q, isChecked) + const examples = await exampleService.fetchOne(projectId, page, q, isChecked, ordering) state.totalExample = examples.count if (!_.isEmpty(examples) && examples.items.length !== 0) { state.example = examples.items[0] diff --git a/frontend/pages/projects/_id/image-captioning/index.vue b/frontend/pages/projects/_id/image-captioning/index.vue index f573cf71..83000f3b 100644 --- a/frontend/pages/projects/_id/image-captioning/index.vue +++ b/frontend/pages/projects/_id/image-captioning/index.vue @@ -112,7 +112,8 @@ export default { this.projectId, this.$route.query.page, this.$route.query.q, - this.$route.query.isChecked + this.$route.query.isChecked, + this.$route.query.ordering ) const image = this.images.items[0] this.setImageSize(image) diff --git a/frontend/pages/projects/_id/image-classification/index.vue b/frontend/pages/projects/_id/image-classification/index.vue index 3bce0f34..5b256340 100644 --- a/frontend/pages/projects/_id/image-classification/index.vue +++ b/frontend/pages/projects/_id/image-classification/index.vue @@ -115,7 +115,8 @@ export default { this.projectId, this.$route.query.page, this.$route.query.q, - this.$route.query.isChecked + this.$route.query.isChecked, + this.$route.query.ordering ) const image = this.images.items[0] this.setImageSize(image) 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 ed3236ae..326e4886 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 @@ -91,7 +91,8 @@ export default { this.projectId, this.$route.query.page, this.$route.query.q, - this.$route.query.isChecked + this.$route.query.isChecked, + this.$route.query.ordering ) const doc = this.docs.items[0] await this.listSpan(doc.id) diff --git a/frontend/pages/projects/_id/object-detection/index.vue b/frontend/pages/projects/_id/object-detection/index.vue index 4d390f66..732149cc 100644 --- a/frontend/pages/projects/_id/object-detection/index.vue +++ b/frontend/pages/projects/_id/object-detection/index.vue @@ -134,7 +134,8 @@ export default { this.projectId, this.$route.query.page, this.$route.query.q, - this.$route.query.isChecked + this.$route.query.isChecked, + this.$route.query.ordering ) const image = this.images.items[0] if (this.enableAutoLabeling) { diff --git a/frontend/pages/projects/_id/segmentation/index.vue b/frontend/pages/projects/_id/segmentation/index.vue index b62174c8..47c61bf5 100644 --- a/frontend/pages/projects/_id/segmentation/index.vue +++ b/frontend/pages/projects/_id/segmentation/index.vue @@ -135,7 +135,8 @@ export default { this.projectId, this.$route.query.page, this.$route.query.q, - this.$route.query.isChecked + this.$route.query.isChecked, + this.$route.query.ordering ) const image = this.images.items[0] if (this.enableAutoLabeling) { diff --git a/frontend/pages/projects/_id/sequence-labeling/index.vue b/frontend/pages/projects/_id/sequence-labeling/index.vue index 3b132001..3f0bddf5 100644 --- a/frontend/pages/projects/_id/sequence-labeling/index.vue +++ b/frontend/pages/projects/_id/sequence-labeling/index.vue @@ -124,7 +124,8 @@ export default { this.projectId, this.$route.query.page, this.$route.query.q, - this.$route.query.isChecked + this.$route.query.isChecked, + this.$route.query.ordering ) const doc = this.docs.items[0] if (this.enableAutoLabeling && !doc.isConfirmed) { diff --git a/frontend/pages/projects/_id/sequence-to-sequence/index.vue b/frontend/pages/projects/_id/sequence-to-sequence/index.vue index a68e4ad3..d250e77f 100644 --- a/frontend/pages/projects/_id/sequence-to-sequence/index.vue +++ b/frontend/pages/projects/_id/sequence-to-sequence/index.vue @@ -71,7 +71,8 @@ export default { this.projectId, this.$route.query.page, this.$route.query.q, - this.$route.query.isChecked + this.$route.query.isChecked, + this.$route.query.ordering ) const doc = this.docs.items[0] if (this.enableAutoLabeling) { diff --git a/frontend/pages/projects/_id/speech-to-text/index.vue b/frontend/pages/projects/_id/speech-to-text/index.vue index 937326c9..ce893ebb 100644 --- a/frontend/pages/projects/_id/speech-to-text/index.vue +++ b/frontend/pages/projects/_id/speech-to-text/index.vue @@ -76,7 +76,8 @@ export default { this.projectId, this.$route.query.page, this.$route.query.q, - this.$route.query.isChecked + this.$route.query.isChecked, + this.$route.query.ordering ) const item = this.items.items[0] if (this.enableAutoLabeling) { diff --git a/frontend/repositories/example/apiDocumentRepository.ts b/frontend/repositories/example/apiDocumentRepository.ts index d1312c3b..2dfcd6fc 100644 --- a/frontend/repositories/example/apiDocumentRepository.ts +++ b/frontend/repositories/example/apiDocumentRepository.ts @@ -30,9 +30,9 @@ export class APIExampleRepository implements ExampleRepository { async list( projectId: string, - { limit = '10', offset = '0', q = '', isChecked = '' }: SearchOption + { limit = '10', offset = '0', q = '', isChecked = '', ordering = '' }: SearchOption ): Promise { - const url = `/projects/${projectId}/examples?limit=${limit}&offset=${offset}&q=${q}&confirmed=${isChecked}` + const url = `/projects/${projectId}/examples?limit=${limit}&offset=${offset}&q=${q}&confirmed=${isChecked}&ordering=${ordering}` const response = await this.request.get(url) return new ExampleItemList( response.data.count, diff --git a/frontend/services/application/example/exampleApplicationService.ts b/frontend/services/application/example/exampleApplicationService.ts index 69e8f760..8b77242f 100644 --- a/frontend/services/application/example/exampleApplicationService.ts +++ b/frontend/services/application/example/exampleApplicationService.ts @@ -19,14 +19,16 @@ export class ExampleApplicationService { projectId: string, page: string, q: string, - isChecked: string + isChecked: string, + ordering: string ): Promise { const offset = (parseInt(page, 10) - 1).toString() const options: SearchOption = { limit: '1', offset, q, - isChecked + isChecked, + ordering } return await this.list(projectId, options) }