22 <GCard title =" Entities View" >
33 <template #help >
44 <p >
5- Here you can see all the named entities in the selected document .
5+ Here you can see all the named entities in the selected hypothesis job .
66 </p >
77 </template >
8- <DocumentSelect v-if =" jobSelection.hypothesisJobId" v-model =" selectedDoc" />
9- <p v-else >
10- Please select a hypothesis job first.
11- </p >
12- <GTable v-if =" items" :title :loading :items :columns sortedByColumn =" count" compact >
8+
9+ <GTable v-if =" items" class =" table" :title =" `Entities in ${jobSelection.hypothesisJobId}`" :loading :items
10+ :columns compact >
1311 <template #table-empty-instruction >
14- No entities found in this document.
12+ Select a hypothesis layer.
13+ </template >
14+
15+ <template #cell =" data : TableData < DocumentEntities > " >
16+ <GButton v-if =" data.item.document != 'total' && data.field.key != 'document'" class =" button"
17+ @click =" selectedItem = data" >
18+ {{ data.value }}
19+ </GButton >
1520 </template >
1621 </GTable >
22+
23+ <GModal :show =" selectedItem" @hide =" selectedItem = undefined"
24+ :title =" `Entities in ${selectedItem?.item?.document}`" >
25+ <template #help >
26+ Here you can view all the entities in the selected document.
27+ </template >
28+ <DocumentEntitiesTable :filter =" selectedItem?.field?.key" :entities =" selectedItem?.item?.entities" >
29+ </DocumentEntitiesTable >
30+ </GModal >
1731 </GCard >
1832</template >
1933
2034<script setup lang="ts">
2135import stores from ' @/stores'
2236import * as API from ' @/api/evaluation'
23- import type { Entity , Term } from ' @/types/evaluation'
2437import type { Field , TableData } from ' @/types/ui/table'
38+ import { Entity , type DocumentEntities } from ' @/types/evaluation/entities'
2539
2640// --- stores ---
2741const jobSelection = stores .useJobSelection ()
2842const corpora = stores .useCorpora ()
2943
3044// --- data ---
31- const selectedDoc = ref <string >()
3245const loading = ref <boolean >(false )
33- const items = ref <Entity []>()
34- const columns = ref <Field []>([
35- { key: " label" , sortOn : (i ) => i .label },
36- { key: " form" , sortOn : (i ) => i .form },
37- { key: " count" , sortOn : (i ) => i .count }
38- ])
46+ const items = ref <DocumentEntities []>()
47+ const selectedItem = ref <TableData <DocumentEntities >>()
3948
4049// --- computed ---
41- const title = computed <string >(() => {
42- return ` Entities in ${selectedDoc .value } `
43- })
50+ const columns = computed <Field []>(() => Object .keys (items .value [0 ]).map ((i ) => ({ key: i })))
4451
45-
46- watch (() => selectedDoc . value , () => {
52+ watch (() => jobSelection . hypothesisJobId , () => {
53+ if ( ! jobSelection . hypothesisJobId ) return
4754 loading .value = true
48- API .getEntities (
55+ API .getJobEntities (
4956 corpora .activeUUID ,
5057 jobSelection .hypothesisJobId ,
51- selectedDoc .value
5258 ).then (res => {
53- items .value = res .data
59+ items .value = Object .entries (res .data .documents ).map (([key , value ]) => ({ document: key , ... value .summary , total: value .total , entities: value .entities }))
60+ items .value .unshift ({ document: " total" , ... res .data .summary , total: res .data .total })
5461 }).finally (() => {
5562 loading .value = false
5663 })
57- })
64+ }, { immediate: true } )
5865 </script >
66+
67+ <style scoped lang="scss">
68+ .table {
69+ :deep (td ) {
70+ padding : 0 !important ;
71+ box-sizing : border-box !important ;
72+
73+ .button {
74+ width : 100% ;
75+ height : 100% ;
76+ background-color : transparent ;
77+
78+ & :hover {
79+ background-color : var (--int-light-grey ) !important ;
80+ }
81+
82+ & :focus {
83+ background-color : var (--int-light-grey-hover ) !important ;
84+ }
85+ }
86+ }
87+ }
88+ </style >
0 commit comments