proof of concept of NER select legend

Author: PrinsINT

client/src/components/tables/DocumentEntitiesTable.vue

@@ -51,11 +51,11 @@ const items = computed(() =>
         jobEntities.map(entity => ({ ...entity, job: jobName }))
     )
 )
-const columns = ref<Column[]>([
-    { key: "label", sortOn: i => i.label },
-    { key: "form", sortOn: i => i.form },
-    { key: "count", sortOn: i => i.count },
-    { key: "job", sortOn: i => i.job }
+const columns = ref<Column<Entity>[]>([
+    { key: "label", sortOn: (e: Entity): string => e.label },
+    { key: "form", sortOn: (e: Entity): string => e.form },
+    { key: "count", sortOn: (e: Entity): number => e.count },
+    { key: "job", sortOn: (e: Entity): string => e.job }
 ])
 
 function filter(entity: Entity): boolean {

client/src/stores/evaluation/entities.ts

@@ -1,10 +1,11 @@
 import { jobsEntitiesPath } from "@/api/evaluation"
 import { useAxios } from "@/api/useAxios"
 import stores from "@/stores"
+import type { JobsEntities } from "@/types/evaluation/entities"
 
 const useEntities = defineStore("entities", () => {
     const { corpusId } = storeToRefs(stores.useCorpora())
-    const { loading, data: entities } = useAxios(() =>
+    const { loading, data: entities } = useAxios<JobsEntities>(() =>
         jobsEntitiesPath(corpusId.value)
     )
 

client/src/types/evaluation/entities.ts

@@ -2,6 +2,7 @@ export type Entity = {
     label: string
     form: string
     count: number
+    job: string
 }
 
 export type DocumentEntities = {

client/src/views/annotate/subviews/evaluate/subviews/EntitiesView.vue

@@ -8,11 +8,20 @@
 
         <GTable class="table" :loading :items :columns sortColumn="document">
             <template #header>
+                <legend class="entities-legend">
+                    <p>Legend:</p>
+                    <div>
+                        <span v-for="(job, i) in Object.keys(entities?.jobs ?? {})" :key="i">
+                            <strong>{{ i + 1 }}:</strong> {{ job }}
+                        </span>
+                    </div>
+                </legend>
                 <form class="filter" @submit.prevent>
                     <fieldset>
                         <label for="entities-select">Entities</label>
                         <MultiSelect id="entities-select" v-model="selectedEntities" :options="entityOptions"
-                            placeholder="Select entities" :maxSelectedLabels="3" />
+                            placeholder="Select entities" :maxSelectedLabels="3" optionLabel="text"
+                            optionValue="value" />
                     </fieldset>
                     <fieldset>
                         <label for="jobs-select">Jobs</label>
@@ -56,7 +65,32 @@ const selectedEntities = ref<string[]>([])
 const selectedJobs = ref<string[]>([])
 
 // --- computed ---
-const entityOptions = computed(() => ["total"].concat(Object.keys(entities.value?.stddev?.stddev ?? {}).toSorted()))
+const entityLegend = computed(() => {
+    if (!entities.value) return {}
+    const legend = {}
+    for (const [jobName, jobData] of Object.entries(entities.value.jobs)) {
+        legend[jobName] = Object.keys(jobData.summary)
+    }
+    return legend
+})
+const entityOptions = computed(() => {
+    const options = [{ text: "Total", value: "total" }]
+    const labels = Object.keys(entities.value?.stddev?.stddev ?? {}).toSorted()
+    for (const label of labels) {
+        // in which indices of entittyLegend does this label occur?
+        const occurence = []
+        for (const [i, job] of Object.keys(entities.value.jobs).entries()) {
+            console.log("job", job, "i", i)
+            if (entities.value.jobs[job].summary[label] !== undefined) {
+                occurence.push(i + 1) // +1 because we want to start from 1, not 0
+            }
+        }
+        // ex.: LOC (1, 2, 3)
+        const text = `${label} (${occurence})`
+        options.push({ text: text, value: label })
+    }
+    return options
+})
 const jobOptions = computed(() => Object.keys(entities.value?.jobs ?? {}).toSorted())
 const items = computed<DocumentEntitiesRow[]>(() => convertJobsEntities(entities.value))
 const columns = computed<Column<Record<string, number>>[]>(() => {
@@ -202,4 +236,17 @@ function formatNumber(value: unknown): string | unknown {
         align-items: center;
     }
 }
+
+.entities-legend {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    align-items: center;
+
+    div {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+}
 </style>