feat: limit height of processor params tooltip

src/assets/app.scss

@@ -82,3 +82,7 @@ h3 {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
+
+.p-overlaypanel .p-overlaypanel-content {
+  padding: 0;
+}

src/components/workflows/timeline/MetricAverageChart.vue

@@ -79,7 +79,7 @@ function tooltipContent(d: TimelineChartDataPoint) {
     ref="op"
     :pt="{
       root: {
-        class: 'z-[9999] bg-white border rounded-md shadow-md'
+        class: 'z-[1111] bg-white border rounded-md shadow-md p-5'
       }
     }"
   >

src/components/workflows/timeline/MetricChart.vue

@@ -61,7 +61,7 @@ function tooltipContent(d: TimelineChartDataPoint) {
     ref="op"
     :pt="{
       root: {
-        class: 'z-[9999] bg-white border rounded-md shadow-md'
+        class: 'z-[1111] bg-white border rounded-md shadow-md p-5'
       }
     }"
   >

src/components/workflows/timeline/TimelineItem.vue

@@ -123,16 +123,18 @@ function hideParametersOverlay() {
   >
     <div class="flex flex-col pt-2">
       <h2 class="font-bold px-2 pb-2 mb-2 border-b border-gray-300">{{ selectedStep?.id }}</h2>
-      <table v-if="selectedStep" class="text-sm border-collapse">
-        <tr class="">
-          <th class="p-1 pl-2 font-semibold">Parameter</th>
-          <th class="p-1 pr-2 font-semibold">Value</th>
-        </tr>
-        <tr v-for="step in Object.keys(selectedStep.params)" :key="step">
-          <td class="p-1 pl-2 border-collapse border border-l-0 border-b-0 border-gray-300">{{ step }}</td>
-          <td class="p-1 pr-2 border-collapse border border-r-0 border-b-0 border-gray-300">{{ selectedStep.params[step] }}</td>
-        </tr>
-      </table>
+      <div class="overflow-y-auto max-h-[400px] w-full">
+        <table v-if="selectedStep" class="text-sm border-collapse">
+          <tr class="">
+            <th class="p-1 pl-2 font-semibold">Parameter</th>
+            <th class="p-1 pr-2 font-semibold">Value</th>
+          </tr>
+          <tr v-for="step in Object.keys(selectedStep.params)" :key="step">
+            <td class="p-1 pl-2 border-collapse border border-l-0 border-b-0 border-gray-300">{{ step }}</td>
+            <td class="p-1 pr-2 border-collapse border border-r-0 border-b-0 border-gray-300">{{ selectedStep.params[step] }}</td>
+          </tr>
+        </table>
+      </div>
     </div>
   </OverlayPanel>
 </template>

src/locales/de.json

@@ -54,5 +54,6 @@
   "cpu_standard_deviation": "CPU Standardabweichung",
   "date": "Datum",
   "ground_truth": "Ground Truth",
-  "average": "Durchschnitt"
+  "average": "Durchschnitt",
+  "cer_standard_deviation": "CER Standardabweichung"
 }

src/locales/en.json

@@ -48,5 +48,6 @@
   "cpu_standard_deviation": "CPU Standard Deviation",
   "date": "Date",
   "ground_truth": "Ground Truth",
-  "average": "Average"
+  "average": "Average",
+  "cer_standard_deviation": "CER Standard Deviation"
 }