diff --git a/src/components/Workflows.vue b/src/components/Workflows.vue index eafff1ed61be68a02e411b6c185d127c1659aaf0..7f20484fb1fe16f4c5848259de7b8eb1ed65017d 100644 --- a/src/components/Workflows.vue +++ b/src/components/Workflows.vue @@ -70,9 +70,9 @@ </template> <template v-else> <div class="flex mb-6"> - <p class="text-amber-600 flex-grow-0 p-4 bg-amber-100 rounded-md"><span class="font-semibold">Disclaimer:</span> This is an experimental view.</p> + <p class="text-amber-600 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> - <div class="flex mb-3"> + <div class="flex mb-6"> <SelectButton v-model="selectedOption" :options="options" optionLabel="name"></SelectButton> <Filters class="ml-auto"/> </div> diff --git a/src/components/workflows/WorkflowsTimeline.vue b/src/components/workflows/WorkflowsTimeline.vue index 8a033b4978315e79f86af10da32e061d9035a5d2..d912a1de6a2be1fe88e3373b90771a6bd5bb5a9f 100644 --- a/src/components/workflows/WorkflowsTimeline.vue +++ b/src/components/workflows/WorkflowsTimeline.vue @@ -44,7 +44,7 @@ watch(selectedMetric, unstyled /> </div> - <div class="flex flex-col space-y-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" /> </template> diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue index 287a6cdd65d7290321f5473ff92a996dcde592aa..69d96b7c3c098bbc043e8cd5226c8e100d0ae060 100644 --- a/src/components/workflows/timeline/TimelineItem.vue +++ b/src/components/workflows/timeline/TimelineItem.vue @@ -9,6 +9,7 @@ import { Icon } from '@iconify/vue' import { onMounted, ref } from "vue" import { OverlayPanelDropdownStyles } from "@/helpers/pt" import workflowsStore from "@/store/workflows-store" +import HomeView from "@/views/HomeView.vue" const props = defineProps<{ gt: GroundTruth, @@ -75,31 +76,40 @@ function hideParametersOverlay() { <template v-slot:default> <div class="flex border-t border-gray-300 py-4 px-4"> <table class="table-fixed w-full"> - <tr v-for="workflow in workflows" :key="workflow.id"> + <thead> + <tr class=""> + <th class="text-left pb-4">{{ $t('workflows') }}</th> + <th class="text-left pb-4">{{ $t('processors') }}</th> + <th class="text-right pr-[314px] pb-4">{{ $t('timeline') }}</th> + </tr> + </thead> + <tbody> + <tr v-for="workflow in workflows" :key="workflow.id"> <td class="font-semibold pe-2">{{ workflow.label }}</td> <td class="p-1 overflow-x-auto"> <span - v-for="step in workflow.steps" - :key="step.id" - class="p-1 cursor-pointer" - @mouseenter="showParametersOverlay(step, $event)" - @mouseleave="hideParametersOverlay()" + v-for="step in workflow.steps" + :key="step.id" + class="p-1 cursor-pointer" + @mouseenter="showParametersOverlay(step, $event)" + @mouseleave="hideParametersOverlay()" > {{ getStepAcronym(step.id) }} </span> </td> <td class="overflow-x-auto"> <MetricChart - :runs="workflowsStore.getRuns(gt.id, workflow.id)" - :workflow-name="workflow.label" - :metric="metric" - :width="400" - :start-date="startDate" - :end-date="endDate" - class="flex justify-end" + :runs="workflowsStore.getRuns(gt.id, workflow.id)" + :workflow-name="workflow.label" + :metric="metric" + :width="400" + :start-date="startDate" + :end-date="endDate" + class="flex justify-end" /> </td> </tr> + </tbody> </table> </div> </template>