From edc396bacac6a63020346d4f4bec1fdc9c4baf96 Mon Sep 17 00:00:00 2001
From: jfrer <76432831+jfrer@users.noreply.github.com>
Date: Fri, 18 Oct 2024 15:59:29 +0200
Subject: [PATCH] feat: add labels to metric and filter dropdowns, make layout
 more compact (#101)

---
 src/components/Workflows.vue                  |  2 +-
 src/components/workflows/WorkflowsTable.vue   | 15 +++++++------
 .../workflows/WorkflowsTimeline.vue           | 21 +++++++++++--------
 src/components/workflows/filters/Filters.vue  |  4 ++--
 .../workflows/timeline/TimelineFilters.vue    |  1 +
 .../workflows/timeline/TimelineSorting.vue    |  4 ++--
 src/locales/de.json                           | 14 +++++++------
 src/locales/en.json                           | 14 +++++++------
 8 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/src/components/Workflows.vue b/src/components/Workflows.vue
index ee20a74..3fc6cef 100644
--- a/src/components/Workflows.vue
+++ b/src/components/Workflows.vue
@@ -88,7 +88,7 @@ import projectsStore from "@/store/projects-store"
       <p class="text-amber-700 flex-grow-0 px-4 py-2 bg-amber-100 rounded-md text-sm"><span class="font-semibold">Disclaimer:</span> This is an experimental view.</p>
     </div>
     <WorkflowsIntroSection :page="selectedOption.value as ('timeline' | 'table')" class="mb-6"></WorkflowsIntroSection>
-    <div class="flex mb-6">
+    <div class="flex mb-6 items-end">
       <SelectButton v-model="selectedOption" :options="options" optionLabel="name"></SelectButton>
       <Filters class="ml-auto"/>
     </div>
diff --git a/src/components/workflows/WorkflowsTable.vue b/src/components/workflows/WorkflowsTable.vue
index a1c5ae6..2dfd7b9 100644
--- a/src/components/workflows/WorkflowsTable.vue
+++ b/src/components/workflows/WorkflowsTable.vue
@@ -141,12 +141,15 @@ const setSorted = (event: GroupedTableData, key: keyof EvaluationResultsDocument
   </template>
   <template v-else>
     <div class="flex flex-col" v-if="Object.keys(tableData).length > 0">
-      <div class="flex items-center mb-4 ml-auto">
-        <label for="keepGroupsCheckbox" class="mr-2">{{ $t('keep_grouping_when_sorting') }}</label>
-        <Checkbox v-model="keepGroupsWhenSorting" input-id="keepGroupsCheckbox" binary class="mr-8"></Checkbox>
-        
-        <p class="mr-2">{{ $t('group_by') }}:</p>
-        <Dropdown v-model="groupBy" :options="groupingOptions" optionLabel="label" placeholder="Choose something.." class="" />
+      <div class="flex flex-col-reverse items-start sm:flex-row sm:items-center justify-between mb-4">
+        <div class="flex items-center">
+          <Checkbox v-model="keepGroupsWhenSorting" input-id="keepGroupsCheckbox" binary class=""></Checkbox>
+          <label for="keepGroupsCheckbox" class="pl-4 font-semibold cursor-pointer select-none">{{ $t('keep_grouping_when_sorting') }}</label>
+        </div>
+        <div class="flex flex-col items-start sm:flex-row sm:items-center mb-4 sm:mb-0">
+          <p class="font-semibold mb-2 sm:mb-0 sm:mr-4">{{ $t('group_by') }}:</p>
+          <Dropdown v-model="groupBy" :options="groupingOptions" optionLabel="label" placeholder="Choose something.." class="" />
+        </div>
       </div>
       <TrendLegend :show-text-colors="false" class="ml-auto mb-4"/>
     </div>
diff --git a/src/components/workflows/WorkflowsTimeline.vue b/src/components/workflows/WorkflowsTimeline.vue
index ce1cdbd..896d92d 100644
--- a/src/components/workflows/WorkflowsTimeline.vue
+++ b/src/components/workflows/WorkflowsTimeline.vue
@@ -41,17 +41,20 @@ watch(selectedMetric,
 
 <template>
   <div class="flex flex-col">
-    <div class="flex mb-4 space-x-4 items-end justify-between">
+    <div class="flex mb-2 space-x-4 items-end justify-between">
       <TimelineSorting v-model="sortedGtList" :selectedMetric="selectedMetricValue"/>
-      <Dropdown
-        v-model="selectedMetric"
-        :options="metrics"
-        optionLabel="label"
-        placeholder="Select a metric"
-        class="w-full md:w-56"
-      />
+      <div class="flex flex-col items-start sm:flex-row sm:items-center">
+        <p class="font-semibold mb-2 sm:mb-0 sm:mr-4">{{ t('metric') }}:</p>
+        <Dropdown
+          v-model="selectedMetric"
+          :options="metrics"
+          optionLabel="label"
+          placeholder="Select a metric"
+          class="w-full md:w-56"
+        />
+      </div>
     </div>
-    <TrendLegend class="ml-auto mb-4"/>
+    <TrendLegend class="ml-auto"/>
     <TimelineFilters></TimelineFilters>
     <div class="flex flex-col space-y-6">
       <template v-if="sortedGtList.length > 0">
diff --git a/src/components/workflows/filters/Filters.vue b/src/components/workflows/filters/Filters.vue
index a1759b7..1897762 100644
--- a/src/components/workflows/filters/Filters.vue
+++ b/src/components/workflows/filters/Filters.vue
@@ -16,8 +16,8 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex items-center">
-    <span class="font-semibold mr-4">{{ $t('documents')}} ({{ $t('ground_truth')}}):</span>
+  <div class="flex flex-col items-start md:flex-row md:items-center">
+    <p class="font-semibold mb-2 md:mb-0 md:mr-4">{{ $t('documents')}} ({{ $t('ground_truth')}}):</p>
     <BaseMultiSelect
         v-model="filtersStore.gt"
         @update:model-value="filtersStore.gt = $event"
diff --git a/src/components/workflows/timeline/TimelineFilters.vue b/src/components/workflows/timeline/TimelineFilters.vue
index c02d0d7..14c5abb 100644
--- a/src/components/workflows/timeline/TimelineFilters.vue
+++ b/src/components/workflows/timeline/TimelineFilters.vue
@@ -159,6 +159,7 @@ onMounted(() => {
 </script>
 
 <template>
+  <p class="font-semibold mb-2">{{ t('filter_by') }}:</p>
 <div class="pb-4 lg:pb-6 grid sm:grid-cols-2 gap-4 xl:grid-cols-5 xl:gap-8">
   <BaseMultiSelect
     v-model="selectedLabelling"
diff --git a/src/components/workflows/timeline/TimelineSorting.vue b/src/components/workflows/timeline/TimelineSorting.vue
index 29bf6e1..caecdaa 100644
--- a/src/components/workflows/timeline/TimelineSorting.vue
+++ b/src/components/workflows/timeline/TimelineSorting.vue
@@ -40,8 +40,8 @@ function updateSortedList(event: any) {
 
 </script>
 <template>
-  <div class="w-full">
-    <p class="font-semibold mb-2">{{ t('sort_by')}}:</p>
+  <div class="flex flex-col items-start sm:flex-row sm:items-center w-full">
+    <p class="font-semibold mb-2 sm:mr-4 sm:mb-0">{{ t('sort_by')}}:</p>
     <Dropdown
     v-model="selectedSortOption"
     @update:model-value="updateSortedList($event)"
diff --git a/src/locales/de.json b/src/locales/de.json
index 76e63f1..1153eac 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -81,11 +81,11 @@
   "labelling": "Kennzeichnung",
   "no_labels_for_this_entry": "Keine Kennzeichnung für diesen Eintrag.",
   "average_timeline": "Chronik (Durchschnitt)",
-  "filter_by_date_range": "Nach Zeitspanne filtern",
-  "filter_by_workflow": "Nach Workflow filtern",
-  "filter_by_processor": "Nach Prozessor filtern",
-  "filter_by_labelling": "Nach Kennzeichnungen filtern",
-  "filter_by_script_type": "Nach Skript-Typ filtern",
+  "filter_by_date_range": "Zeitspanne",
+  "filter_by_workflow": "Workflow",
+  "filter_by_processor": "Prozessor",
+  "filter_by_labelling": "Kennzeichnungen",
+  "filter_by_script_type": "Skript-Typ",
   "select_a_date_range": "Zeitraum auswählen",
   "select_a_workflow": "Workflow auswählen",
   "select_a_processor": "Prozessor auswählen",
@@ -99,5 +99,7 @@
   "select_a_label": "Kennzeichnung auswählen",
   "select_a_script_type": "Skript-Typ auswählen",
   "no_labelling": "Keine Kennzeichnung",
-  "select_ground_truth": "Ground Truth auswählen"
+  "select_ground_truth": "Ground Truth auswählen",
+  "filter_by": "Filtern nach",
+  "metric": "Metric"
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 3fd8c26..f1d4d36 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -76,11 +76,11 @@
   "labelling": "Labelling",
   "no_labels_for_this_entry": "No labels for this entry.",
   "average_timeline": "Average Timeline",
-  "filter_by_date_range": "Filter by date range",
-  "filter_by_workflow": "Filter by workflow",
-  "filter_by_processor": "Filter by processor",
-  "filter_by_labelling": "Filter by labelling",
-  "filter_by_script_type": "Filter by script-type",
+  "filter_by_date_range": "Date range",
+  "filter_by_workflow": "Workflow",
+  "filter_by_processor": "Processor",
+  "filter_by_labelling": "Labelling",
+  "filter_by_script_type": "Script-Type",
   "select_a_date_range": "Select a date range",
   "select_a_workflow": "Select a workflow",
   "select_a_processor": "Select a processor",
@@ -94,5 +94,7 @@
   "select_a_label": "Select a label",
   "select_a_script_type": "Select a script-type",
   "no_labelling": "No labelling",
-  "select_ground_truth": "Select Ground Truth"
+  "select_ground_truth": "Select Ground Truth",
+  "filter_by": "Filter by",
+  "metric": "Metric"
 }