diff --git a/components.d.ts b/components.d.ts
index aa8938d1c4..4c2ca150c0 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -212,6 +212,12 @@ declare module 'vue' {
EmptyStateAction: typeof import('./src/components/EmptyState/EmptyStateAction.vue')['default']
EmptyStateImage: typeof import('./src/components/EmptyState/EmptyStateImage.vue')['default']
EmptyStateLabel: typeof import('./src/components/EmptyState/EmptyStateLabel.vue')['default']
+ EntityPopover: typeof import('./src/components/EntityPopover/EntityPopover.vue')['default']
+ EntityPopoverInfo: typeof import('./src/components/EntityPopover/EntityPopoverInfo.vue')['default']
+ EntityPopoverMentionExcerpt: typeof import('./src/components/EntityPopover/EntityPopoverMentionExcerpt.vue')['default']
+ EntityPopoverMentionOccurrences: typeof import('./src/components/EntityPopover/EntityPopoverMentionOccurrences.vue')['default']
+ EntityPopoverMentions: typeof import('./src/components/EntityPopover/EntityPopoverMentions.vue')['default']
+ EntityPopoverTabs: typeof import('./src/components/EntityPopover/EntityPopoverTabs.vue')['default']
Extensions: typeof import('./src/components/Extensions.vue')['default']
ExtractingForm: typeof import('./src/components/ExtractingForm.vue')['default']
ExtractingFormOcrControl: typeof import('./src/components/ExtractingFormOcrControl.vue')['default']
diff --git a/src/components/EntityPopover/EntityPopover.vue b/src/components/EntityPopover/EntityPopover.vue
new file mode 100644
index 0000000000..e5cd0b123f
--- /dev/null
+++ b/src/components/EntityPopover/EntityPopover.vue
@@ -0,0 +1,69 @@
+
+
+
+
+
+
diff --git a/src/components/EntityPopover/EntityPopoverInfo.vue b/src/components/EntityPopover/EntityPopoverInfo.vue
new file mode 100644
index 0000000000..e3b8cf1854
--- /dev/null
+++ b/src/components/EntityPopover/EntityPopoverInfo.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+ {{ content }}
+
+
+
+
+
+
diff --git a/src/components/EntityPopover/EntityPopoverMentionExcerpt.vue b/src/components/EntityPopover/EntityPopoverMentionExcerpt.vue
new file mode 100644
index 0000000000..6612b69182
--- /dev/null
+++ b/src/components/EntityPopover/EntityPopoverMentionExcerpt.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
diff --git a/src/components/EntityPopover/EntityPopoverMentionOccurrences.vue b/src/components/EntityPopover/EntityPopoverMentionOccurrences.vue
new file mode 100644
index 0000000000..01a002cb7f
--- /dev/null
+++ b/src/components/EntityPopover/EntityPopoverMentionOccurrences.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
{{ `${occurrences} ${projectList}` }}
+
+
+
+
+
diff --git a/src/components/EntityPopover/EntityPopoverMentions.vue b/src/components/EntityPopover/EntityPopoverMentions.vue
new file mode 100644
index 0000000000..3b98ad1fc1
--- /dev/null
+++ b/src/components/EntityPopover/EntityPopoverMentions.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/EntityPopover/EntityPopoverTabs.vue b/src/components/EntityPopover/EntityPopoverTabs.vue
new file mode 100644
index 0000000000..4b6e6ffad7
--- /dev/null
+++ b/src/components/EntityPopover/EntityPopoverTabs.vue
@@ -0,0 +1,54 @@
+
+
+
+ {{ mentionsLabel }}
+ {{ props.nbMentions }}
+
+
+
+
+ {{ infoLabel }}
+
+
+
+
+
diff --git a/src/lang/en.json b/src/lang/en.json
index 362ce31a91..7bcf4777df 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -103,6 +103,19 @@
"sectionContentType": "What's the document's type",
"sectionDescription": "Once downloaded, how do I open it ?"
},
+ "entityPopoverInfo": {
+ "content": "This entity was extracted with:",
+ "model": "{model} model",
+ "language": "in {language} language."
+ },
+ "entityPopoverMentionOccurrences": {
+ "occurrences": "This mention appears {nbMentions} times | This mention appears {nbMentions} time | This mention appears {nbMentions} times",
+ "projectList": "in {n} projects | in {n} project | in {n} projects:"
+ },
+ "entityPopoverTabs": {
+ "mentions": "Mentions",
+ "info": "Info"
+ },
"error": {
"title": "Something's wrong here",
"description": "An error has occurred. Please try again later or contact your administrator if the problem persists.",
diff --git a/src/stories/components/EntityPopover/EntityPopover.stories.js b/src/stories/components/EntityPopover/EntityPopover.stories.js
new file mode 100644
index 0000000000..0bdb2fe7a7
--- /dev/null
+++ b/src/stories/components/EntityPopover/EntityPopover.stories.js
@@ -0,0 +1,38 @@
+import EntityPopover from '@/components/EntityPopover/EntityPopover'
+
+export default {
+ title: 'Components/EntityPopover/EntityPopover',
+ component: EntityPopover,
+ tags: ['autodocs'],
+ args: {
+ language: 'English',
+ model: 'CoreNLP',
+ mention: 'Bruno Mars',
+ excerpt: 'Lorem ipsum Bruno Mars dolor ipset',
+ nbMentions: 5033,
+ projects: ['banana papers', 'citrus confidential']
+ },
+ render: (args) => ({
+ components: {
+ EntityPopover
+ },
+ setup: () => ({ args }),
+ computed: {
+ trigger() {
+ return `btn-${this.$.uid}`
+ },
+ title() {
+ return args.document.title
+ }
+ },
+ template: `
+
+
+
+
+ `
+ })
+}
+export const Default = {}
diff --git a/src/stories/components/EntityPopover/EntityPopoverInfo.stories.js b/src/stories/components/EntityPopover/EntityPopoverInfo.stories.js
new file mode 100644
index 0000000000..145a2133cf
--- /dev/null
+++ b/src/stories/components/EntityPopover/EntityPopoverInfo.stories.js
@@ -0,0 +1,12 @@
+import EntityPopoverInfo from '@/components/EntityPopover/EntityPopoverInfo'
+
+export default {
+ title: 'Components/EntityPopover/EntityPopoverInfo',
+ component: EntityPopoverInfo,
+ tags: ['autodocs'],
+ args: {
+ language: 'english',
+ model: 'CoreNLP'
+ }
+}
+export const Default = {}
diff --git a/src/stories/components/EntityPopover/EntityPopoverMentionExcerpt.stories.js b/src/stories/components/EntityPopover/EntityPopoverMentionExcerpt.stories.js
new file mode 100644
index 0000000000..fef496e08c
--- /dev/null
+++ b/src/stories/components/EntityPopover/EntityPopoverMentionExcerpt.stories.js
@@ -0,0 +1,12 @@
+import EntityPopoverMentionExcerpt from '@/components/EntityPopover/EntityPopoverMentionExcerpt'
+
+export default {
+ title: 'Components/EntityPopover/EntityPopoverMentionExcerpt',
+ component: EntityPopoverMentionExcerpt,
+ tags: ['autodocs'],
+ args: {
+ mention: 'Bruno Mars',
+ excerpt: 'Lorem ipsum Bruno Mars dolor ipset '
+ }
+}
+export const Default = {}
diff --git a/src/stories/components/EntityPopover/EntityPopoverMentionOccurrences.stories.js b/src/stories/components/EntityPopover/EntityPopoverMentionOccurrences.stories.js
new file mode 100644
index 0000000000..a0dba3a014
--- /dev/null
+++ b/src/stories/components/EntityPopover/EntityPopoverMentionOccurrences.stories.js
@@ -0,0 +1,12 @@
+import EntityPopoverMentionOccurrences from '@/components/EntityPopover/EntityPopoverMentionOccurrences'
+
+export default {
+ title: 'Components/EntityPopover/EntityPopoverMentionOccurrences',
+ component: EntityPopoverMentionOccurrences,
+ tags: ['autodocs'],
+ args: {
+ nbMentions: 5033,
+ projects: ['banana papers', 'citrus confidential']
+ }
+}
+export const Default = {}
diff --git a/src/stories/components/EntityPopover/EntityPopoverMentions.stories.js b/src/stories/components/EntityPopover/EntityPopoverMentions.stories.js
new file mode 100644
index 0000000000..2d1ad5de9e
--- /dev/null
+++ b/src/stories/components/EntityPopover/EntityPopoverMentions.stories.js
@@ -0,0 +1,33 @@
+import { computed, ref } from 'vue'
+
+import EntityPopoverMentions from '@/components/EntityPopover/EntityPopoverMentions'
+const excerpt = 'Lorem ipsum Bruno Mars dolor ipset'
+const excerpts = [excerpt, 'Lorem ipsum dolor ipset Bruno Mars', 'Bruno Mars Lorem ipsum dolor ipset']
+export default {
+ title: 'Components/EntityPopover/EntityPopoverMentions',
+ component: EntityPopoverMentions,
+ tags: ['autodocs'],
+ args: {
+ mention: 'Bruno Mars',
+ projects: ['banana papers', 'citrus confidential'],
+ nbMentions: excerpts.length,
+ excerpt,
+ excerpts
+ },
+ render: (args) => ({
+ components: {
+ EntityPopoverMentions
+ },
+ setup: () => {
+ const index = ref(1)
+ const current = computed(() => excerpts[index.value - 1])
+ return { args, index, current }
+ },
+
+ template: `
+
+
+ `
+ })
+}
+export const Default = {}
diff --git a/src/stories/components/EntityPopover/EntityPopoverTabs.stories.js b/src/stories/components/EntityPopover/EntityPopoverTabs.stories.js
new file mode 100644
index 0000000000..9773cc6d04
--- /dev/null
+++ b/src/stories/components/EntityPopover/EntityPopoverTabs.stories.js
@@ -0,0 +1,16 @@
+import EntityPopoverTabs from '@/components/EntityPopover/EntityPopoverTabs'
+
+export default {
+ title: 'Components/EntityPopover/EntityPopoverTabs',
+ component: EntityPopoverTabs,
+ tags: ['autodocs'],
+ args: {
+ language: 'english',
+ model: 'CoreNLP',
+ mention: 'Bruno Mars',
+ excerpt: 'Lorem ipsum Bruno Mars dolor ipset ',
+ nbMentions: 5033,
+ projects: ['banana papers', 'citrus confidential']
+ }
+}
+export const Default = {}