From 64b451a4bb7d7dbb5c6ca2d5f0cbb05d0bb5fc07 Mon Sep 17 00:00:00 2001
From: Paul Pestov <pestov@sub.uni-goettingen.de>
Date: Wed, 6 Dec 2023 12:22:38 +0100
Subject: [PATCH] feat: add trend colors legend
---
src/components/workflows/TrendLegend.vue | 57 +++++++++++++++++++
src/components/workflows/WorkflowsTable.vue | 6 +-
.../workflows/WorkflowsTimeline.vue | 2 +
src/locales/de.json | 5 +-
src/locales/en.json | 5 +-
5 files changed, 71 insertions(+), 4 deletions(-)
create mode 100644 src/components/workflows/TrendLegend.vue
diff --git a/src/components/workflows/TrendLegend.vue b/src/components/workflows/TrendLegend.vue
new file mode 100644
index 0000000..dfa2315
--- /dev/null
+++ b/src/components/workflows/TrendLegend.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+ showTextColors: boolean
+}>(), {
+ showTextColors: true
+})
+</script>
+
+<template>
+ <div class="flex space-x-3 text-sm text-gray-600" :class="{ 'text-colors': showTextColors }">
+ <div class="flex items-center positive"><i class="w-3 h-3 mr-1"></i><span>{{ $t('positive') }}</span></div>
+ <div class="flex items-center neutral"><i class="w-3 h-3 mr-1"></i><span>{{ $t('neutral') }}</span></div>
+ <div class="flex items-center negative"><i class="w-3 h-3 mr-1"></i><span>{{ $t('negative') }}</span></div>
+ </div>
+</template>
+
+<style scoped lang="scss">
+
+.text-colors {
+ .positive {
+ i {
+ background: var(--color--positive-text);
+ }
+ }
+
+ .neutral {
+ i {
+ background: var(--color--neutral-text);
+ }
+ }
+
+ .negative {
+ i {
+ background: var(--color--negative-text);
+ }
+ }
+}
+
+.positive {
+ i {
+ background: var(--color--positive-background);
+ }
+}
+
+.neutral {
+ i {
+ background: var(--color--neutral-background);
+ }
+}
+
+.negative {
+ i {
+ background: var(--color--negative-background);
+ }
+}
+
+</style>
diff --git a/src/components/workflows/WorkflowsTable.vue b/src/components/workflows/WorkflowsTable.vue
index 09f9f04..f12c707 100644
--- a/src/components/workflows/WorkflowsTable.vue
+++ b/src/components/workflows/WorkflowsTable.vue
@@ -7,6 +7,7 @@ import Dropdown from 'primevue/dropdown'
import workflowsStore from "@/store/workflows-store"
import api from "@/helpers/api"
import filtersStore from "@/store/filters-store"
+import TrendLegend from "@/components/workflows/TrendLegend.vue"
const { t } = useI18n()
@@ -118,11 +119,12 @@ const groupByDocuments = () => {
Loading...
</template>
<template v-else>
- <div class="flex mb-4" v-if="evals.length > 0">
- <div class="flex items-center ml-auto">
+ <div class="flex flex-col" v-if="evals.length > 0">
+ <div class="flex items-center mb-4 ml-auto">
<p class="mr-2">{{ $t('group_by') }}:</p>
<Dropdown v-model="sortBy" :options="sortOptions" optionLabel="label" placeholder="Choose something.." class="" />
</div>
+ <TrendLegend :show-text-colors="false" class="ml-auto mb-4"/>
</div>
<table v-if="evals.length > 0" class="w-full border border-collapse rounded text-sm">
<thead>
diff --git a/src/components/workflows/WorkflowsTimeline.vue b/src/components/workflows/WorkflowsTimeline.vue
index bb038ec..e957da8 100644
--- a/src/components/workflows/WorkflowsTimeline.vue
+++ b/src/components/workflows/WorkflowsTimeline.vue
@@ -9,6 +9,7 @@ import { DropdownPassThroughStyles } from '@/helpers/pt'
import workflowsStore from '@/store/workflows-store'
import filtersStore from '@/store/filters-store'
import timelineStore from "@/store/timeline-store"
+import TrendLegend from "@/components/workflows/TrendLegend.vue";
const { t } = useI18n()
const gtList = computed<GroundTruth[]>(() => workflowsStore.gt.filter(({ id }) => filtersStore.gt.findIndex(({ value }) => value === id) > -1))
@@ -44,6 +45,7 @@ watch(selectedMetric,
unstyled
/>
</div>
+ <TrendLegend class="ml-auto mb-4"/>
<div class="flex flex-col space-y-6">
<template v-if="gtList.length > 0">
<TimelineItem v-for="gt in gtList" :key="gt.id" :gt="gt" :metric="selectedMetricValue" />
diff --git a/src/locales/de.json b/src/locales/de.json
index 6f38861..a44655d 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -55,5 +55,8 @@
"date": "Datum",
"ground_truth": "Ground Truth",
"average": "Durchschnitt",
- "cer_standard_deviation": "CER Standardabweichung"
+ "cer_standard_deviation": "CER Standardabweichung",
+ "positive": "positiv",
+ "neutral": "neutral",
+ "negative": "negativ"
}
diff --git a/src/locales/en.json b/src/locales/en.json
index 499ff47..d4ec545 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -49,5 +49,8 @@
"date": "Date",
"ground_truth": "Ground Truth",
"average": "Average",
- "cer_standard_deviation": "CER Standard Deviation"
+ "cer_standard_deviation": "CER Standard Deviation",
+ "positive": "positive",
+ "neutral": "neutral",
+ "negative": "negative"
}
--
GitLab