fix: resolve vue warnings (#95)

* fix: make showTextColors Prop optional * wrap charts and overlaypanels in div to allow props to be inherited by a single root element * fix: remove translations lookup from processor labels as they currently dont need translation * fix: remove old i-icon, improve tooltip structure * fix: add i18n details key to en * fix: typo in script-type key in i18n de
OCR-D · Jul 24, 2024 · c9d009d · c9d009d
1 parent a52b9d7
commit c9d009d
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 71 deletions.
diff --git a/src/components/workflows/TrendLegend.vue b/src/components/workflows/TrendLegend.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const props = withDefaults(defineProps<{
-  showTextColors: boolean
+  showTextColors?: boolean
 }>(), {
   showTextColors: true
 })

diff --git a/src/components/workflows/WorkflowsTable.vue b/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>

diff --git a/src/components/workflows/timeline/MetricAverageChart.vue b/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">

diff --git a/src/components/workflows/timeline/MetricChart.vue b/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">

diff --git a/src/components/workflows/timeline/TimelineFilters.vue b/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

diff --git a/src/locales/de.json b/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",

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -1,4 +1,5 @@
 {
+  "details": "Details",
   "projects": "Projects",
   "processors": "Processors",
   "workflows": "Workflows",