Skip to content
Snippets Groups Projects
Commit 1c92215b authored by Paul Pestov's avatar Paul Pestov
Browse files

Add empty checks and update workflows list display

parent 9a306c5c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/assets/main.scss
+ 2
− 2
View file @ 1c92215b
......@@ -5,7 +5,7 @@
margin: 0;
}
.eval-low {
.eval-negative {
background-color: var(--red-200);
}
......@@ -13,7 +13,7 @@
background-color: var(--yellow-300);
}
.eval-high {
.eval-positive {
background-color: var(--green-200);
}
......
src/components/workflows/WorkflowsList.vue
+ 86
− 37
View file @ 1c92215b
......@@ -5,38 +5,54 @@
<div class="grid align-items-center gap-2">
<h3 class="text-xl font-bold">{{ item.label }}</h3>
<Tag :value="item.metadata.workflow_model" class="bg-gray-300 text-gray-700 ml-3"></Tag>
<Tag v-for="font in item.metadata.document_metadata.fonts" :key="font" :value="font" class="bg-gray-300 text-gray-700"></Tag>
<template v-if="item.metadata.document_metadata">
<Tag v-for="font in item.metadata.document_metadata.fonts" :key="font" :value="font" class="bg-gray-300 text-gray-700"></Tag>
</template>
</div>
</template>
<template #content>
<div class="grid">
<div class="col-7 grid">
<Accordion class="text-sm mr-3 flex-1">
<AccordionTab :header="item.metadata.gt_workspace.label">
<div class="grid">
<div class="col">
<p class="font-bold">{{ $t('number_of_pages') }}:</p>
<p>{{ item.metadata.document_metadata.number_of_pages }}</p>
<p class="mt-2 font-bold">{{ $t('publication_year') }}:</p>
<p> {{ item.metadata.document_metadata.publication_year }}</p>
</div>
<div class="col">
<p class="font-bold">{{ $t('layout') }}:</p>
<p>{{ item.metadata.document_metadata.layout }}</p>
<p class="mt-2 font-bold">{{ $t('publication_century') }}:</p>
<p> {{ item.metadata.document_metadata.publication_century }}</p>
</div>
</div>
<div class="mr-3">
<template v-if="item.metadata.gt_workspace">
<Accordion class="text-sm">
<AccordionTab :header="item.metadata.gt_workspace.label">
<div class="grid">
<div class="col">
<p class="font-bold">{{ $t('number_of_pages') }}:</p>
<p>{{ item.metadata.document_metadata.number_of_pages }}</p>
<p class="mt-2 font-bold">{{ $t('publication_year') }}:</p>
<p> {{ item.metadata.document_metadata.publication_year }}</p>
</div>
<div class="col">
<p class="font-bold">{{ $t('layout') }}:</p>
<p>{{ item.metadata.document_metadata.layout }}</p>
<p class="mt-2 font-bold">{{ $t('publication_century') }}:</p>
<p> {{ item.metadata.document_metadata.publication_century }}</p>
</div>
</div>
</AccordionTab>
</Accordion>
<Accordion class="text-sm flex-1">
<AccordionTab :header="item.metadata.ocr_workflow.label">
<div class="flex gap-2">
<div v-for="step in item.metadata.workflow_steps" :key="step"><Chip :label="step" class="text-sm" /></div>
</div>
</AccordionTab>
</Accordion>
</AccordionTab>
</Accordion>
</template>
<template v-else>
<p class="font-bold text-gray-400 mt-3">{{$t('no_gt_workspace')}}</p>
</template>
</div>
<div class="flex-1">
<Accordion class="text-sm">
<AccordionTab :header="item.metadata.ocr_workflow?.label || $t('unknown_workflow')">
<div class="flex gap-2" v-if="item.metadata.workflow_steps">
<div v-for="step in item.metadata.workflow_steps" :key="step">
<Chip :label="step" class="text-sm" />
</div>
</div>
<template v-else>
<span class="font-bold text-gray-400">{{$t('no_ocr_workflow')}}</span>
</template>
</AccordionTab>
</Accordion>
</div>
</div>
<div class="col-5 py-0 ml-auto">
<div class="grid mb-1">
......@@ -45,11 +61,11 @@
</div>
</div>
<div class="grid">
<div v-for="(evaluation, i) in item.evaluations" :key="i" class="col text-center">
<div v-for="({ name, value }, i) in item.evaluations" :key="i" class="col text-center">
<span
class="border-round-3xl py-1 px-3"
:class="getEvalColor(evaluation.name, evaluation.value)">
{{ evaluation.value }}
class="border-round-3xl py-1 px-3 cursor-pointer"
:class="getEvalColor(name, value)" :title="value">
{{ name === 'cer' ? shortenCER(value) : value }}
</span>
</div>
</div>
......@@ -63,25 +79,58 @@
<script setup>
import { ref, onMounted, watch } from "vue";
import { getEvalColor } from "@/helpers/eval-colors";
import { useI18n } from "vue-i18n";
const props = defineProps(['data', 'defs']);
const list = ref([]);
const evals = ref([]);
const { t } = useI18n();
const mapMetadata = ({
workflow_model = t('no_workflow_model'),
document_metadata = {
fonts: []
},
gt_workspace = null,
ocr_workflow = null,
workflow_steps = null
}) => {
return {
workflow_model,
document_metadata,
gt_workspace,
ocr_workflow,
workflow_steps
};
};
const mapEvaluationResults = ({ document_wide = [] }) => {
return Object.keys(document_wide).map(key => ({
name: key,
value: document_wide[key]
}));
};
const setListData = (data) => {
list.value = data.map(({ label, evaluation, metadata }) => ({
list.value = data.map(({ label, evaluation_results = [], metadata }) => ({
label,
metadata,
evaluations: Object.keys(evaluation.document_wide).map(key => ({
name: key,
value: evaluation.document_wide[key]
}))
metadata: mapMetadata(metadata),
evaluations: mapEvaluationResults(evaluation_results[0])
}));
};
const setEvals = (data) => {
evals.value = data && data.length > 0 ? Object.keys(data[0].evaluation.document_wide) : [];
evals.value =
data &&
data.length > 0 &&
data[0].evaluation_results
? Object.keys(data[0].evaluation_results[0].document_wide) || []
: [];
};
const shortenCER = (value) => {
return Math.round(value * 1000) / 1000;
};
onMounted(() => {
......
src/helpers/eval-colors.js
+ 19
− 12
View file @ 1c92215b
......@@ -2,19 +2,19 @@ import { ref } from 'vue';
const evalColors = ref({
wall_time: {
'eval-low': 2000,
'eval-positive': 2000,
'eval-medium': 4000,
'eval-high': 6000
'eval-negative': 6000
},
cer: {
'eval-low': 0.6,
'eval-positive': 0.6,
'eval-medium': 0.8,
'eval-high': 0.9
'eval-negative': 0.9
},
cer_min_max: {
'eval-low': 0.6,
'eval-positive': 0.6,
'eval-medium': 0.8,
'eval-high': 0.9
'eval-negative': 0.9
}
});
......@@ -34,8 +34,13 @@ const setEvalColors = (data) => {
const allCERs = [];
const allWallTimes = [];
data.forEach(({ evaluation }) => {
const { document_wide: evals } = evaluation;
data
.filter(({ evaluation_results }) => !!(evaluation_results))
.forEach(({ evaluation_results }) => {
const { document_wide: evals } = evaluation_results[0];
if (!evals) return;
const { cer, wall_time, cer_min_max } = evals;
if (cer) allCERs.push(cer);
......@@ -51,16 +56,18 @@ const setEvalColors = (data) => {
const diffCER = maxCER - minCER;
const stepCER = diffCER / 3;
evalColors.value.cer["eval-low"] = minCER + stepCER;
evalColors.value.cer["eval-positive"] = minCER + stepCER;
evalColors.value.cer["eval-medium"] = minCER + 2 * stepCER;
evalColors.value.cer["eval-high"] = minCER + 3 * stepCER;
evalColors.value.cer["eval-negative"] = minCER + 3 * stepCER;
const diffallTime = maxWallTime - minWallTime;
const stepWallTime = diffallTime / 3;
evalColors.value.wall_time["eval-low"] = minWallTime + stepWallTime;
evalColors.value.wall_time["eval-positive"] = minWallTime + stepWallTime;
evalColors.value.wall_time["eval-medium"] = minWallTime + 2 * stepWallTime;
evalColors.value.wall_time["eval-high"] = minWallTime + 3 * stepWallTime;
evalColors.value.wall_time["eval-negative"] = minWallTime + 3 * stepWallTime;
console.log(evalColors.value);
};
export {
......
src/locales/de.json
+ 5
− 2
View file @ 1c92215b
......@@ -13,5 +13,8 @@
"publication_year": "Erscheinungsjahr",
"sort_by": "Sortieren nach",
"table": "Tabelle",
"workflows": "Workflows"
}
\ No newline at end of file
"workflows": "Workflows",
"no_gt_workspace": "Keine Informationen zum Ground Truth Workspace vorhanden",
"no_ocr_workflow": "Keine Informationen zum OCR Workflow vorhanden",
"unknown_workflow": "Unbekannter Workflow"
}
src/locales/en.json
+ 4
− 1
View file @ 1c92215b
......@@ -7,5 +7,8 @@
"sort_by": "Sort by",
"group_by": "Group by",
"documents": "Documents",
"no_content": "This view is not created yet. Please try again later. "
"no_content": "This view is not created yet. Please try again later. ",
"no_gt_workspace": "No information about Ground Truth Workspace available",
"no_ocr_workflow": "No information about OCR Workflow available",
"unknown_workflow": "Unknown workflow"
}
src/main.js
+ 2
− 0
View file @ 1c92215b
......@@ -11,6 +11,7 @@ import Accordion from 'primevue/accordion';
import AccordionTab from 'primevue/accordiontab';
import Chip from 'primevue/chip';
import Tag from 'primevue/tag';
import Panel from 'primevue/panel';
import { createI18n } from "vue-i18n";
......@@ -43,6 +44,7 @@ app.component('SelectButton', SelectButton);
app.component('Chip', Chip);
app.component('Accordion', Accordion);
app.component('AccordionTab', AccordionTab);
app.component('Panel', Panel);
app.component('Tag', Tag);
app.mount('#app');
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment