Skip to content

Commit

Permalink
Add spinner while Named Entities load
Browse files Browse the repository at this point in the history
  • Loading branch information
@annelhote
annelhote committed Mar 9, 2020
1 parent 6ba66bf commit 1e7db23
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 57 deletions.
87 changes: 46 additions & 41 deletions src/components/document/DocumentTabNamedEntities.vue
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,44 @@
<template>
<div class="p-3">
<div v-if="$config.is('manageDocuments') && !document.hasNerTags" class="document__named-entities document__named-entities--not--searched">
<div v-html="$t('document.named_entities_not_searched', { indexing_link: '#/indexing' })"></div>
</div>
<div v-else-if="!hasNamedEntities && !isLoadingNamedEntities" class="document__named-entities document__named-entities--not--found">
{{ $t('document.named_entities_not_found') }}
</div>
<div v-else-if="!isLoadingNamedEntities" class="document__named-entities">
<div v-for="(pages, category) in namedEntitiesPaginatedByCategories" :key="category" class="mb-4" v-if="categoryIsntEmpty(category)">
<div class="mb-2" :class="getCategoryClass(category, 'text-')">
<fa :icon="getCategoryIcon(category)" />
{{ $t('filter.namedEntity' + capitalize(category)) }}
<i>({{ getCategoryTotal(category) }})</i>
</div>
<span v-for="(page, index) in pages" :key="index">
<span v-for="(ne, index) in page.hits" :key="index" class="d-inline mr-2">
<b-badge pill variant="light" class="p-0 text-uppercase text-black border" :class="getCategoryClass(category, 'border-')" :id="`named-entity-${ne.id}`">
<span class="p-1 d-inline-block">
{{ ne.source.mentionNorm }}
</span>
</b-badge>
<b-popover :target="`named-entity-${ne.id}`" triggers="hover" placement="top">
<named-entity-in-context :document="document" :named-entity="ne" />
<template #title>
<div class="text-muted" v-html="$t('namedEntityInContext.title', ne.source)"></div>
</template>
</b-popover>
<v-wait for="load_data">
<fa icon="circle-notch" spin size="2x" class="d-flex mx-auto mt-5" slot="waiting" />
<div class="p-3">
<div v-if="$config.is('manageDocuments') && !document.hasNerTags" class="document__named-entities document__named-entities--not--searched">
<div v-html="$t('document.named_entities_not_searched', { indexing_link: '#/indexing' })"></div>
</div>
<div v-else-if="!hasNamedEntities && !isLoadingNamedEntities" class="document__named-entities document__named-entities--not--found">
{{ $t('document.named_entities_not_found') }}
</div>
<div v-else-if="!isLoadingNamedEntities" class="document__named-entities">
<div v-for="(pages, category) in namedEntitiesPaginatedByCategories" :key="category" class="mb-4">
<div class="mb-2" :class="getCategoryClass(category, 'text-')" v-if="categoryIsNotEmpty(category)">
<fa :icon="getCategoryIcon(category)" />
{{ $t('filter.namedEntity' + capitalize(category)) }}
<i>({{ getCategoryTotal(category) }})</i>
</div>
<span v-for="(page, index) in pages" :key="index">
<span v-for="(ne, index) in page.hits" :key="index" class="d-inline mr-2">
<b-badge pill variant="light" class="p-0 text-uppercase text-black border" :class="getCategoryClass(category, 'border-')" :id="`named-entity-${ne.id}`">
<span class="p-1 d-inline-block">
{{ ne.source.mentionNorm }}
</span>
</b-badge>
<b-popover :target="`named-entity-${ne.id}`" triggers="hover" placement="top">
<named-entity-in-context :document="document" :named-entity="ne" />
<template #title>
<div class="text-muted" v-html="$t('namedEntityInContext.title', ne.source)"></div>
</template>
</b-popover>
</span>
</span>
</span>
<div v-if="categoryHasNextPage(category)">
<a class="document__named-entities__more small" href="#" @click.prevent="getNextPageInCategory(category)">
{{ $t('document.namedEntities.showMore' + capitalize(category)) }}
</a>
<div v-if="categoryHasNextPage(category)">
<a class="document__named-entities__more small" href="#" @click.prevent="getNextPageInCategory(category)">
{{ $t('document.namedEntities.showMore' + capitalize(category)) }}
</a>
</div>
</div>
</div>
</div>
</div>
</v-wait>
</template>

<script>
Expand All @@ -45,9 +48,9 @@ import keys from 'lodash/keys'
import sumBy from 'lodash/sumBy'
import { mapState } from 'vuex'
import NamedEntityInContext from '@/components/NamedEntityInContext'
import ner from '@/mixins/ner'
import utils from '@/mixins/utils'
import NamedEntityInContext from '@/components/NamedEntityInContext'
export default {
name: 'DocumentTabNamedEntities',
Expand All @@ -57,7 +60,7 @@ export default {
NamedEntityInContext
},
computed: {
...mapState('document', ['namedEntitiesPaginatedByCategories', 'isLoadingNamedEntities']),
...mapState('document', ['isLoadingNamedEntities', 'namedEntitiesPaginatedByCategories']),
hasNamedEntities () {
return sumBy(this.categories, category => this.getCategoryTotal(category))
},
Expand All @@ -69,14 +72,15 @@ export default {
}
},
async mounted () {
this.$wait.start('load_data')
await this.$store.dispatch('document/getFirstPageForNamedEntityInAllCategories')
this.$wait.end('load_data')
},
methods: {
capitalize,
getCategoryTotal (category) {
return get(this, ['namedEntitiesPaginatedByCategories', category, 0, 'total'], 0)
},
categoryIsntEmpty (category) {
categoryIsNotEmpty (category) {
return !!this.getCategoryTotal(category)
},
categoryHasNextPage (category) {
Expand All @@ -87,22 +91,23 @@ export default {
if (!this.isLoadingNamedEntities) {
return this.$store.dispatch('document/getNextPageForNamedEntityInCategory', category)
}
}
},
capitalize
}
}
</script>

<style lang="scss">
.document__named-entities {
&__more {
background: $light;
display: inline-block;
padding: $spacer * 0.25 $spacer * 0.5;
margin-bottom: $spacer * 0.25;
background: $light;
padding: $spacer * 0.25 $spacer * 0.5;
&:hover {
text-decoration: white;
background: white;
text-decoration: white;
}
}
}
Expand Down
12 changes: 5 additions & 7 deletions tests/unit/specs/components/WidgetFileBarometer.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,23 @@
import { createLocalVue, shallowMount } from '@vue/test-utils'

import { Core } from '@/core'
import WidgetFileBarometer from '@/components/WidgetFileBarometer'
import { Core } from '@/core'

describe('WidgetFileBarometer.vue', () => {
const { localVue, store, i18n, wait } = Core.init(createLocalVue()).useAll()
const { i18n, localVue, store, wait } = Core.init(createLocalVue()).useAll()
const widget = { title: 'Hello world' }
const propsData = { widget }
const methods = { count: () => 10 }

beforeEach(() => {
store.commit('insights/reset')
})
beforeEach(() => store.commit('insights/reset'))

it('should be a Vue instance', () => {
const wrapper = shallowMount(WidgetFileBarometer, { localVue, store, i18n, wait, propsData, methods })
const wrapper = shallowMount(WidgetFileBarometer, { i18n, localVue, store, wait, propsData, methods })
expect(wrapper.isVueInstance()).toBeTruthy()
})

it('should display the total number of document', async () => {
const wrapper = shallowMount(WidgetFileBarometer, { localVue, store, i18n, wait, propsData, methods })
const wrapper = shallowMount(WidgetFileBarometer, { i18n, localVue, store, wait, propsData, methods })
await wrapper.vm.$nextTick()
expect(wrapper.find('.widget__main-figure').text()).toBe('10 documents')
})
Expand Down
17 changes: 8 additions & 9 deletions tests/unit/specs/components/document/DocumentTabNamedEntities.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import toLower from 'lodash/toLower'
import Murmur from '@icij/murmur'
import { createLocalVue, shallowMount } from '@vue/test-utils'
import { IndexedDocument, letData } from 'tests/unit/es_utils'

import DocumentTabNamedEntities from '@/components/document/DocumentTabNamedEntities'
import esConnectionHelper from 'tests/unit/specs/utils/esConnectionHelper'
import { Core } from '@/core'
import { IndexedDocument, letData } from 'tests/unit/es_utils'
import esConnectionHelper from 'tests/unit/specs/utils/esConnectionHelper'

const { localVue, store } = Core.init(createLocalVue()).useAll()
const { i18n, localVue, store, wait } = Core.init(createLocalVue()).useAll()

describe('DocumentTabNamedEntities.vue', () => {
const index = toLower('DocumentTabNamedEntities')
Expand All @@ -15,9 +16,7 @@ describe('DocumentTabNamedEntities.vue', () => {
const id = 'document'
let document, wrapper

beforeAll(() => {
Murmur.config.set('manageDocuments', true)
})
beforeAll(() => Murmur.config.set('manageDocuments', true))

beforeEach(() => store.commit('document/reset'))

Expand All @@ -30,7 +29,7 @@ describe('DocumentTabNamedEntities.vue', () => {
.commit()
document = await store.dispatch('document/get', { id, index })
await store.dispatch('document/getFirstPageForNamedEntityInAllCategories')
wrapper = shallowMount(DocumentTabNamedEntities, { localVue, store, propsData: { document }, mocks: { $t: msg => msg }, sync: false })
wrapper = shallowMount(DocumentTabNamedEntities, { i18n, localVue, store, wait, propsData: { document }, sync: false })

const pills = wrapper.findAll('b-badge-stub')
expect(pills).toHaveLength(3)
Expand All @@ -46,7 +45,7 @@ describe('DocumentTabNamedEntities.vue', () => {
await letData(es).have(new IndexedDocument(id, index)).commit()
document = await store.dispatch('document/get', { id, index })
await store.dispatch('document/getFirstPageForNamedEntityInAllCategories')
wrapper = shallowMount(DocumentTabNamedEntities, { localVue, store, propsData: { document }, mocks: { $t: msg => msg }, sync: false })
wrapper = shallowMount(DocumentTabNamedEntities, { i18n, localVue, store, wait, propsData: { document }, sync: false })

expect(wrapper.findAll('.document__named-entities--not--searched')).toHaveLength(1)
})
Expand All @@ -55,7 +54,7 @@ describe('DocumentTabNamedEntities.vue', () => {
await letData(es).have(new IndexedDocument(id, index).withPipeline('CORENLP')).commit()
document = await store.dispatch('document/get', { id, index })
await store.dispatch('document/getFirstPageForNamedEntityInAllCategories')
wrapper = shallowMount(DocumentTabNamedEntities, { localVue, store, propsData: { document }, mocks: { $t: msg => msg }, sync: false })
wrapper = shallowMount(DocumentTabNamedEntities, { i18n, localVue, store, wait, propsData: { document }, sync: false })

expect(wrapper.findAll('.document__named-entities--not--found')).toHaveLength(1)
})
Expand Down

0 comments on commit 1e7db23

Please sign in to comment.