DocumentView: some css tweaks and update API call

Author: PrinsINT

client/src/api/evaluation.ts

@@ -22,8 +22,7 @@ export const distributionPath = (corpus: UUID): string => `${evaluationPath(corp
 export const metricsPath = (corpus: UUID): string => `${evaluationPath(corpus)}/metrics`
 const metricsSamplesPath = (corpus: UUID): string => `${metricsPath(corpus)}/download`
 const downloadPath = (corpus: UUID): string => `${evaluationPath(corpus)}/download`
-const documentLayerComparisonPath = (corpus: UUID, job: string, document: string): string =>
-    `/corpora/${corpus}/jobs/${job}/documents/${document}/evaluation`
+const documentLayerComparisonPath = (corpus: UUID, document: string): string => `/corpora/${corpus}/documents/${document}/evaluation/comparison`
 const documentEntitiesPath = (corpus: UUID, job: string, document: string): string =>
     `/corpora/${corpus}/jobs/${job}/documents/${document}/entities`
 const jobEntitiesPath = (corpus: UUID, job: string): string => `${evaluationPath(corpus, job)}/entities`
@@ -81,10 +80,10 @@ export function getConfusionSamples(
     reference: string,
     hypoFilter: string,
     refFilter: string,
-    annotationType: string,
+    annotation: string,
 ): Promise<BlobResponse> {
-    return getBlob(confusionSamplesPath(corpus, hypothesis), {
-        params: { reference, hypoFilter, refFilter, annotationType },
+    return getBlob(confusionSamplesPath(corpus), {
+        params: { hypothesis, reference, hypoFilter, refFilter, annotation },
     })
 }
 
@@ -126,7 +125,7 @@ export function getDocumentLayerComparison(
     document: string,
     reference: string,
 ): Promise<AxiosResponse<TermComparison[]>> {
-    return axios.get(documentLayerComparisonPath(corpus, job, document), { params: { reference } })
+    return axios.get(documentLayerComparisonPath(corpus, document), { params: { reference, hypothesis: job } })
 }
 
 export function getDocumentEntities(corpus: UUID, job: string, document: string): Promise<DocumentEntitiesResponse> {

client/src/components/input/AnnotationSelect.vue

@@ -1,6 +1,8 @@
 <template>
-    <label for="annotation-select">Annotation</label>
-    <GSelect id="annotation-select" :options v-model="model" />
+    <fieldset>
+        <label for="annotation-select">Annotation</label>
+        <GSelect id="annotation-select" :options v-model="model" />
+    </fieldset>
 </template>
 
 <script setup lang="ts">

client/src/components/tables/SingleTermComparisonTable.vue

@@ -43,7 +43,7 @@ const columns: Ref<Column[]> = computed(() => {
             return acc
         }, [] as string[])
         .filter((i) => !ignorableAnnotations.includes(i))
-        .map((key) => ({ key, label: key }))
+        .map((key) => ({ key, label: key, noSort: true }))
 })
 
 // Methods

client/src/router/index.ts

@@ -62,11 +62,7 @@ const routes = [
                     },
                     { meta: { title: "Evaluate" }, path: "grouped_metrics", component: GroupedMetricsView },
                     { meta: { title: "Evaluate" }, path: "confusion", component: ConfusionView },
-                    {
-                        meta: { title: "Evaluate" },
-                        path: "document_layer_comparison",
-                        component: DocumentLayerComparisonView,
-                    },
+                    { meta: { title: "Evaluate" }, path: "document", component: DocumentLayerComparisonView },
                     { meta: { title: "Evaluate" }, path: "entities", component: EntitiesView },
                 ],
             },

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

@@ -23,6 +23,7 @@
                 { id: 'grouped_metrics', title: 'Grouped Metrics' },
                 { id: 'confusion', title: 'Confusion' },
                 { id: 'entities', title: 'Entities' },
+                { id: 'document', title: 'Document' },
             ]"
         >
         </GTabs>

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

@@ -36,11 +36,8 @@
 </template>
 
 <script setup lang="ts">
-// Library & API
-
 import * as API from "@/api/evaluation"
 import stores from "@/stores"
-// Types & Stores
 import type { Term, TermComparison } from "@/types/evaluation"
 import type { SelectOption } from "@/types/ui/select"
 
@@ -85,9 +82,9 @@ watch(selectedDoc, async (newVal) => {
 
 watch(termcomps, () => {
     if (!termcomps.value) return
-    annotationOptions.value = documentsStore.documents
-        .find((doc) => doc.name === selectedDoc.value)
-        ?.annotations.map((key) => ({ value: key, text: key }))
+    annotationOptions.value = Object.keys(
+        documentsStore.documents.find((doc) => doc.name === selectedDoc.value)?.annotations,
+    ).map((key) => ({ value: key, text: key }))
 })
 
 // Methods
@@ -107,11 +104,6 @@ function cleanAnnotation(term: Term) {
     padding: 2rem;
 }
 
-.tooltip {
-    min-width: fit-content;
-    min-height: fit-content;
-}
-
 .wordComparison {
     display: inline-block;
     position: relative;
@@ -120,25 +112,26 @@ function cleanAnnotation(term: Term) {
     text-align: center;
     font-size: 0.8rem;
     line-height: 0.8rem;
-}
-
-.incorrect {
-    background-color: rgba(255, 0, 0, 0.1);
-}
+    &.incorrect {
+        background-color: rgba(255, 0, 0, 0.1);
+    }
 
-.wordComparison .tooltip {
-    visibility: hidden;
-    position: absolute;
-    z-index: 1;
-    width: max-content;
-    bottom: 100%;
-    text-align: left;
-    padding: 0;
-    margin: 0;
-}
+    .tooltip {
+        min-width: fit-content;
+        min-height: fit-content;
+        visibility: hidden;
+        position: absolute;
+        z-index: 1;
+        width: max-content;
+        bottom: 100%;
+        text-align: left;
+        padding: 0;
+        margin: 0;
+    }
 
-.wordComparison:hover .tooltip {
-    visibility: visible;
+    &:hover .tooltip {
+        visibility: visible;
+    }
 }
 
 .table-controls {