Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table height adjustments UI #237

4 changes: 4 additions & 0 deletions ui/app/assets/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,10 @@ td {
border: none;
}

.experiment-details-tabs div button[data-state]:not([data-state='active']):last-child {
border-right: none;
}


div.divide-y.divide-\[var\(--ui-border\)\].scroll-py-1 div[role='group'] {
max-height: 150px;
Expand Down
2 changes: 1 addition & 1 deletion ui/app/components/Project/List.vue
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ const sorting = ref([
</script>

<template>
<UTable class="h-100" sticky v-model:sorting="sorting" :columns="columns" :data="projects">
<UTable class="h-[calc(100vh-430px)]" sticky v-model:sorting="sorting" :columns="columns" :data="projects">
<template #id-cell="{ row }">
<NuxtLink
:to="{ name: 'projects-id', params: { id: row.original.id } }"
Expand Down
12 changes: 6 additions & 6 deletions ui/app/pages/projects/[id]/experiments/[experimentId].vue
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ const items = ref([
/>
</template>
<template #cost-breakdown="{ item }">
<UCard class="my-5">
<UCard class="my-1">
<template #header>
<h2 class="text-xl font-medium">Breakdown</h2>
</template>
Expand All @@ -195,7 +195,7 @@ const items = ref([
<tbody>
<tr v-for="key in overall_metadata.order" :key="key">
<template v-if="overall_metadata[key] !== undefined">
<td class="font-medium w-40 break-all">{{ key === 'ecs_cost' ? 'ECS Cost' : key.split('_').join(' ').replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase()))) }}</td>
<td class="font-medium w-17 break-all">{{ key === 'ecs_cost' ? 'ECS Cost' : key.split('_').join(' ').replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase()))) }}</td>
<td v-if="key.includes('time')" class="w-40 break-all">{{ useConvertSecondsToDHM(Number(overall_metadata[key])) }}</td>
<td v-else-if="key.includes('cost')" class="w-40 break-all">{{ useHumanCurrencyAmount(Number(overall_metadata[key])) }}</td>
<td v-else class="w-40 break-all">{{ overall_metadata[key] }}</td>
Expand Down Expand Up @@ -227,7 +227,7 @@ const items = ref([
<tbody>
<tr v-for="key in indexing_metadata.order" :key="key">
<template v-if="indexing_metadata[key] !== undefined">
<td class="font-medium w-40 break-all">{{
<td class="font-medium w-17 break-all">{{
key === 'ecs_cost'
? 'ECS Cost'
: key.split('_').join(' ').replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())))
Expand Down Expand Up @@ -271,7 +271,7 @@ const items = ref([
<tbody>
<tr v-for="key in retriever_metadata.order" :key="key">
<template v-if="retriever_metadata[key] !== undefined">
<td class="font-medium w-40 break-all">{{ key === 'ecs_cost' ? 'ECS Cost' : key.split('_').join(' ').replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase()))) }}</td>
<td class="font-medium w-17 break-all">{{ key === 'ecs_cost' ? 'ECS Cost' : key.split('_').join(' ').replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase()))) }}</td>
<td v-if="key.includes('time') || key.includes('latency')" class="w-40 break-all">{{ useConvertSecondsToDHM(Number(retriever_metadata[key])) }}</td>
<td v-else-if="key.includes('cost')" class="w-40 break-all">{{ useHumanCurrencyAmount(Number(retriever_metadata[key])) }}</td>
<td v-else class="w-40 break-all">{{ retriever_metadata[key] }}</td>
Expand Down Expand Up @@ -304,7 +304,7 @@ const items = ref([
<tbody>
<tr v-for="key in inferencer_metadata.order" :key="key">
<template v-if="inferencer_metadata[key] !== undefined">
<td class="font-medium w-40 break-all">{{ key === 'ecs_cost' ? 'ECS Cost' : key.split('_').join(' ').replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase()))) }}</td>
<td class="font-medium w-17 break-all">{{ key === 'ecs_cost' ? 'ECS Cost' : key.split('_').join(' ').replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase()))) }}</td>
<td v-if="key.includes('time') || key.includes('latency')" class="w-40 break-all">{{ useConvertSecondsToDHM(Number(inferencer_metadata[key])) }}</td>
<td v-else-if="key.includes('cost')" class="w-40 break-all">{{ useHumanCurrencyAmount(Number(inferencer_metadata[key])) }}</td>
<td v-else class="w-40 break-all">{{ inferencer_metadata[key] }}</td>
Expand Down Expand Up @@ -337,7 +337,7 @@ const items = ref([
<tbody>
<tr v-for="key in evaluation_metadata.order" :key="key">
<template v-if="evaluation_metadata[key] !== undefined">
<td class="font-medium w-40 break-all">{{ key === 'ecs_cost' ? 'ECS Cost' : key.split('_').join(' ').replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase()))) }}</td>
<td class="font-medium w-17 break-all">{{ key === 'ecs_cost' ? 'ECS Cost' : key.split('_').join(' ').replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase()))) }}</td>
<td v-if="key.includes('time') || key.includes('latency')" class="w-40 break-all">{{ useConvertSecondsToDHM(Number(evaluation_metadata[key])) }}</td>
<td v-else-if="key.includes('cost')" class="w-40 break-all">{{ useHumanCurrencyAmount(Number(evaluation_metadata[key])) }}</td>
<td v-else class="w-40 break-all">{{ evaluation_metadata[key] }}</td>
Expand Down