fix: resolve vue warnings

src/components/workflows/TrendLegend.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const props = withDefaults(defineProps<{
-  showTextColors: boolean
+  showTextColors?: boolean
 }>(), {
   showTextColors: true
 })

src/components/workflows/WorkflowsTable.vue

@@ -9,6 +9,7 @@ import workflowsStore from "@/store/workflows-store"
 import api from "@/helpers/api"
 import filtersStore from "@/store/filters-store"
 import TrendLegend from "@/components/workflows/TrendLegend.vue"
+import { Icon } from '@iconify/vue'
 import WorkflowsTableSorter from "@/components/workflows/timeline/WorkflowTableSorter.vue"
 
 const { t } = useI18n()
@@ -166,11 +167,13 @@ const setSorted = (event: GroupedTableData, key: keyof EvaluationResultsDocument
             >
               {{ evalDefinitions[evalKey] ? evalDefinitions[evalKey].label : evalKey }}
             </WorkflowsTableSorter>
-            <i-icon name="ink-info"/>
             <div class="def-tooltip">
-              <div class="flex p-2 bg-white border rounded">
-                {{ evalDefinitions[evalKey] ? evalDefinitions[evalKey].short_descr : $t('no_description') }}.
-                <a v-if="evalDefinitions[evalKey]" :href="evalDefinitions[evalKey].url">{{ $t('details') }}</a>
+              <div class="flex p-2 bg-white border rounded space-x-2 items-start">
+                <span>{{ evalDefinitions[evalKey] ? evalDefinitions[evalKey].short_descr : $t('no_description') }}.</span>
+                <a v-if="evalDefinitions[evalKey]" :href="evalDefinitions[evalKey].url" class="flex items-center text-xs">
+                  <Icon icon="material-symbols:info-outline" class="mr-1"></Icon>
+                  <span>{{ $t('details') }}</span>
+                </a>
               </div>
             </div>
           </span>

src/components/workflows/timeline/MetricAverageChart.vue

@@ -65,39 +65,41 @@ function tooltipContent(d: TimelineChartDataPoint) {
 </script>
 
 <template>
-  <div @click="op?.toggle($event)" class="cursor-pointer flex">
-    <BaseTimelineChart
-      :data="data"
-      :max-y="maxY"
-      :start-date="startDate"
-      :end-date="endDate"
-      :tooltip-content="tooltipContent"
-      :width="400"
-      :higher-is-positive="isHigherPositive(metric)"
-    />
+  <div>
+    <div @click="op?.toggle($event)" class="cursor-pointer flex">
+      <BaseTimelineChart
+        :data="data"
+        :max-y="maxY"
+        :start-date="startDate"
+        :end-date="endDate"
+        :tooltip-content="tooltipContent"
+        :width="400"
+        :higher-is-positive="isHigherPositive(metric)"
+      />
+    </div>
+    <OverlayPanel
+      ref="op"
+      :pt="{
+        root: {
+          class: 'z-[1111] bg-white border rounded-md shadow-md p-5'
+        }
+      }"
+    >
+      <BaseTimelineDetailedChart
+        :data="data"
+        :max-y="maxY"
+        :y-axis-title="`${t(metric)} (${t(getUnitOfMetric(metric))})`"
+        :workflow="workflowName"
+        :label="gtName"
+        :start-date="startDate"
+        :end-date="endDate"
+        :tooltip-content="tooltipContent"
+        :height="400"
+        :width="660"
+        :higher-is-positive="isHigherPositive(metric)"
+      />
+    </OverlayPanel>
   </div>
-  <OverlayPanel
-    ref="op"
-    :pt="{
-      root: {
-        class: 'z-[1111] bg-white border rounded-md shadow-md p-5'
-      }
-    }"
-  >
-    <BaseTimelineDetailedChart
-      :data="data"
-      :max-y="maxY"
-      :y-axis-title="`${t(metric)} (${t(getUnitOfMetric(metric))})`"
-      :workflow="workflowName"
-      :label="gtName"
-      :start-date="startDate"
-      :end-date="endDate"
-      :tooltip-content="tooltipContent"
-      :height="400"
-      :width="660"
-      :higher-is-positive="isHigherPositive(metric)"
-    />
-  </OverlayPanel>
 </template>
 
 <style scoped lang="scss">

src/components/workflows/timeline/MetricChart.vue

@@ -52,39 +52,41 @@ function tooltipContent(d: TimelineChartDataPoint) {
 </script>
 
 <template>
-  <div @click="op?.toggle($event)" class="cursor-pointer flex justify-end">
-    <BaseTimelineChart
-      :data="data"
-      :max-y="maxY"
-      :start-date="startDate"
-      :end-date="endDate"
-      :tooltip-content="tooltipContent"
-      :width="400"
-      :higher-is-positive="isHigherPositive(metric)"
-    />
+  <div>
+    <div @click="op?.toggle($event)" class="cursor-pointer flex justify-end">
+      <BaseTimelineChart
+        :data="data"
+        :max-y="maxY"
+        :start-date="startDate"
+        :end-date="endDate"
+        :tooltip-content="tooltipContent"
+        :width="400"
+        :higher-is-positive="isHigherPositive(metric)"
+      />
+    </div>
+    <OverlayPanel
+      ref="op"
+      :pt="{
+        root: {
+          class: 'z-[1111] bg-white border rounded-md shadow-md p-5'
+        }
+      }"
+    >
+      <BaseTimelineDetailedChart
+        :data="data"
+        :max-y="maxY"
+        :y-axis-title="`${t(metric)} (${t(getUnitOfMetric(metric))})`"
+        :workflow="workflowName"
+        :label="gtName"
+        :start-date="startDate"
+        :end-date="endDate"
+        :tooltip-content="tooltipContent"
+        :height="400"
+        :width="660"
+        :higher-is-positive="isHigherPositive(metric)"
+      />
+    </OverlayPanel>
   </div>
-  <OverlayPanel
-    ref="op"
-    :pt="{
-      root: {
-        class: 'z-[1111] bg-white border rounded-md shadow-md p-5'
-      }
-    }"
-  >
-    <BaseTimelineDetailedChart
-      :data="data"
-      :max-y="maxY"
-      :y-axis-title="`${t(metric)} (${t(getUnitOfMetric(metric))})`"
-      :workflow="workflowName"
-      :label="gtName"
-      :start-date="startDate"
-      :end-date="endDate"
-      :tooltip-content="tooltipContent"
-      :height="400"
-      :width="660"
-      :higher-is-positive="isHigherPositive(metric)"
-    />
-  </OverlayPanel>
 </template>
 
 <style scoped lang="scss">

src/components/workflows/timeline/TimelineFilters.vue

@@ -111,7 +111,7 @@ watch(() => filtersStore.gt, () => {
 })
 
 onMounted(() => {
-  workflowStepOptions.value = deduplicateStepIds(workflowsStore.workflows).map(id => ({ value: id, label: t(id) }))
+  workflowStepOptions.value = deduplicateStepIds(workflowsStore.workflows).map(id => ({ value: id, label: id }))
 
   selectedDateRange.value = dateRangeOptions.value
   selectedWorkflows.value = workflowOptions.value

src/locales/de.json

@@ -75,7 +75,7 @@
   "url": "URL",
   "language": "Sprache | Sprachen",
   "script": "Skript | Skripte",
-  "scripttype": "Skript-Typ",
+  "script-type": "Skript-Typ",
   "license": "Lizenz | Lizenzen",
   "volume": "Umfang",
   "labelling": "Kennzeichnung",

src/locales/en.json

@@ -1,4 +1,5 @@
 {
+  "details": "Details",
   "projects": "Projects",
   "processors": "Processors",
   "workflows": "Workflows",