Skip to content

Commit

Permalink
feat: consolidate columns in comparison and fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@cabreraalex
cabreraalex committed Sep 28, 2023
1 parent 0673f61 commit 84170e2
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 89 deletions.
18 changes: 10 additions & 8 deletions backend/zeno_backend/database/select.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1155,18 +1155,20 @@ def table_data_paginated(
sql.SQL("DESC" if req.sort[1] else "ASC"),
)

db.cur.execute(
sql.SQL("SELECT * {} FROM {} {} {} LIMIT %s OFFSET %s;").format(
final_statement = sql.SQL(" ").join(
[
sql.SQL("SELECT *"),
diff_sql,
sql.Identifier(f"{project}"),
sql.SQL("FROM {}").format(sql.Identifier(project)),
filter,
order_sql,
),
[
req.limit,
req.offset,
],
sql.SQL("LIMIT {} OFFSET {};").format(
sql.Literal(req.limit), sql.Literal(req.offset)
),
]
)
db.cur.execute(final_statement)

if db.cur.description is not None:
columns = [desc[0] for desc in db.cur.description]
filter_results = db.cur.fetchall()
Expand Down
155 changes: 86 additions & 69 deletions frontend/src/lib/components/instance-views/ComparisonView.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
compareSort,
comparisonColumn,
comparisonModel,
metric,
model,
project,
rowsPerPage,
Expand All @@ -16,11 +15,10 @@
tagIds
} from '$lib/stores';
import { Join, MetadataType, ZenoColumnType, type GroupMetric } from '$lib/zenoapi';
import { Label } from '@smui/button';
import { Icon, Label } from '@smui/button';
import { Pagination } from '@smui/data-table';
import IconButton from '@smui/icon-button';
import Select, { Option } from '@smui/select';
import ComparisonViewTableHeader from './ComparisonViewTableHeader.svelte';
import { viewMap } from './views/viewMap';
export let viewOptions: Record<string, unknown> | undefined;
Expand Down Expand Up @@ -48,6 +46,7 @@
$: if (currentPage > lastPage) {
currentPage = lastPage;
}
$: modelAResult.then((r) => {
if (r !== undefined && r.length > 0) {
lastPage = Math.max(Math.ceil(r[0].size / $rowsPerPage) - 1, 0);
Expand All @@ -64,10 +63,10 @@
// when state changes update current table view
$: {
currentPage;
$model;
$comparisonModel;
$comparisonColumn;
$rowsPerPage;
$model;
$compareSort;
$selectionIds;
$selectionPredicates;
Expand Down Expand Up @@ -118,32 +117,40 @@
}
function updateTable() {
if (isNaN(start) || isNaN(end) || end <= start) return;
if ($model !== undefined && $comparisonModel !== undefined) {
let predicates = $selectionPredicates;
if (predicates !== undefined && instanceOfFilterPredicate(predicates)) {
predicates = {
join: Join._,
predicates: [predicates]
};
}
const secureTagIds = $tagIds === undefined ? [] : $tagIds;
const secureSelectionIds = $selectionIds === undefined ? [] : $selectionIds;
const dataIds = [...new Set([...secureTagIds, ...secureSelectionIds])];
tablePromise = getFilteredTable(
$project.uuid,
$columns,
[$model, $comparisonModel],
$comparisonColumn,
start,
end - start,
$compareSort,
dataIds,
predicates
);
if (instanceContainer) {
instanceContainer.scrollTop = 0;
}
if (
isNaN(start) ||
isNaN(end) ||
end <= start ||
$model === undefined ||
$comparisonModel === undefined
)
return;
let predicates = $selectionPredicates;
if (predicates !== undefined && instanceOfFilterPredicate(predicates)) {
predicates = {
join: Join._,
predicates: [predicates]
};
}
const secureTagIds = $tagIds === undefined ? [] : $tagIds;
const secureSelectionIds = $selectionIds === undefined ? [] : $selectionIds;
const dataIds = [...new Set([...secureTagIds, ...secureSelectionIds])];
tablePromise = getFilteredTable(
$project.uuid,
$columns,
[$model, $comparisonModel],
$comparisonColumn,
start,
end - start,
$compareSort,
dataIds,
predicates
);
if (instanceContainer) {
instanceContainer.scrollTop = 0;
}
}
Expand All @@ -166,48 +173,53 @@
<thead
class="sticky border-b border-grey-lighter font-semibold top-0 left-0 text-left align-top bg-background z-10"
>
<th class="p-3">
<div>A: {$model}</div>
<div>
<span class="font-normal text-sm mr-3.5 text-grey-dark">
{$metric ? $metric.name + ':' : ''}
</span>
<span class="font-normal mr-3.5 text-primary">
{#await modelAResult then res}
{#if res !== undefined && res.length > 0}
{#if res[0].metric !== undefined && res[0].metric !== null}
{res[0].metric.toFixed(2)}
{/if}
<th class="p-3 cursor-pointer hover:text-primary" on:click={() => updateSort($model)}>
<div class="flex">
<p>A: {$model}</p>
{#if sortModel === $model}
<Icon class="material-icons">
{#if $compareSort[0] && $compareSort[1]}
arrow_drop_up
{:else if $compareSort[0]}
arrow_drop_down
{/if}
{/await}
</span>
</Icon>
{/if}
</div>
</th>
<th class="p-3">
<div>B: {$comparisonModel}</div>
<div>
<span class="font-normal text-sm mr-3.5 text-grey-dark">
{$metric ? $metric.name + ':' : ''}
</span>
<span class="font-normal text-sm mr-3.5 text-primary">
{#await modelBResult then res}
{#if res !== undefined && res.length > 0}
{#if res[0].metric !== undefined && res[0].metric !== null}
{res[0].metric.toFixed(2)}
{/if}
<th
class="p-3 cursor-pointer hover:text-primary"
on:click={() => updateSort($comparisonModel)}
>
<div class="flex">
<p>B: {$comparisonModel}</p>
{#if sortModel === $comparisonModel}
<Icon class="material-icons">
{#if $compareSort[0] && $compareSort[1]}
arrow_drop_up
{:else if $compareSort[0]}
arrow_drop_down
{/if}
{/await}
</span>
</Icon>
{/if}
</div>
</th>
<th on:click={() => updateSort($model)} class="cursor-pointer p-3 min-w-[150px]">
<ComparisonViewTableHeader {sortModel} header={$model} />
</th>
<th on:click={() => updateSort($comparisonModel)} class="cursor-pointer p-3 min-w-[150px]">
<ComparisonViewTableHeader {sortModel} header={$comparisonModel} />
</th>
<th on:click={() => updateSort('')} class="cursor-pointer p-3 min-w-[150px]">
<ComparisonViewTableHeader {sortModel} header={''} />
<th class="p-3 cursor-pointer hover:text-primary" on:click={() => updateSort('')}>
<div class="flex">
<div>
<span class="whitespace-nowrap">Difference in</span>
<span class="text-grey-dark whitespace-nowrap">{$comparisonColumn?.name}</span>
</div>
{#if sortModel === ''}
<Icon class="material-icons">
{#if $compareSort[0] && $compareSort[1]}
arrow_drop_up
{:else if $compareSort[0]}
arrow_drop_down
{/if}
</Icon>
{/if}
</div>
</th>
</thead>
{#await tablePromise then table}
Expand All @@ -216,6 +228,10 @@
<tr>
{#if viewMap[$project.view] !== undefined}
<td class="p-3 align-baseline">
<p class="mb-2">
<span class="text-grey-dark">{$comparisonColumn?.name}:</span>
{modelValueAndDiff($model, tableContent)}
</p>
<div class="instance">
<svelte:component
this={viewMap[$project.view]}
Expand All @@ -226,6 +242,10 @@
</div>
</td>
<td class="p-3 align-baseline">
<p class="mb-2">
<span class="text-grey-dark">{$comparisonColumn?.name}:</span>
{modelValueAndDiff($comparisonModel, tableContent)}
</p>
<div class="instance">
<svelte:component
this={viewMap[$project.view]}
Expand All @@ -237,9 +257,6 @@
</td>
{/if}
{#if $model !== undefined && $comparisonModel !== undefined}
<td class="p-3 align-text-top">{modelValueAndDiff($model, tableContent)}</td>
<td class="p-3 align-text-top">{modelValueAndDiff($comparisonModel, tableContent)}</td
>
<td class="p-3 align-text-top"
>{$comparisonColumn?.dataType === MetadataType.CONTINUOUS
? Number(tableContent['diff']).toFixed(2)
Expand Down
25 changes: 13 additions & 12 deletions frontend/src/lib/components/metadata/MetadataHeader.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,29 +63,30 @@
</div>
{/if}
</div>
{#if $page.url.href.includes('compare') && $metric !== undefined && $metrics.length > 0}
<div class="flex flex-col w-full">
<span class="my-1 text-grey-dark">Metric</span>

{#if $page.url.href.includes('compare') && comparisonColumnOptions.length > 0}
<div class="mt-3 mb-3">
<h4 class="mb-1">Comparison Feature</h4>
<select
class="w-full h-9 border border-grey-light rounded text-sm text-grey"
bind:value={$metric}
bind:value={$comparisonColumn}
>
{#each $metrics as met}
<option value={met}>{met.name}</option>
{#each comparisonColumnOptions as col (col.id)}
<option value={col}>{col.name}</option>
{/each}
</select>
</div>
{/if}

{#if $page.url.href.includes('compare') && comparisonColumnOptions.length > 0}
<div class="mt-3 mb-3">
<h4 class="mb-1">Comparison Feature</h4>
{#if $page.url.href.includes('compare') && $metric !== undefined && $metrics.length > 0}
<div class="flex flex-col w-full mt-3 mb-3">
<span class="my-1 text-grey-dark">Metric</span>
<select
class="w-full h-9 border border-grey-light rounded text-sm text-grey"
bind:value={$comparisonColumn}
bind:value={$metric}
>
{#each comparisonColumnOptions as col (col.id)}
<option value={col}>{col.name}</option>
{#each $metrics as met}
<option value={met}>{met.name}</option>
{/each}
</select>
</div>
Expand Down

0 comments on commit 84170e2

Please sign in to comment.