-
Notifications
You must be signed in to change notification settings - Fork 238
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[OPIK-424] [UX improvements] Improvements to experiment items table (#…
…780) * [OPIK-424] [UX improvements] Improvements to experiment items table * - fix review comments
- Loading branch information
1 parent
0c3956f
commit b9705b0
Showing
26 changed files
with
653 additions
and
345 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
100 changes: 0 additions & 100 deletions
100
...src/components/pages/CompareExperimentsPage/ExperimentItemsTab/CompareExperimentsCell.tsx
This file was deleted.
Oops, something went wrong.
50 changes: 50 additions & 0 deletions
50
...s/pages/CompareExperimentsPage/ExperimentItemsTab/CompareExperimentsFeedbackScoreCell.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import React from "react"; | ||
| import { CellContext } from "@tanstack/react-table"; | ||
|
|
||
| import { ExperimentItem, ExperimentsCompare } from "@/types/datasets"; | ||
| import VerticallySplitCellWrapper, { | ||
| CustomMeta, | ||
| } from "@/components/pages/CompareExperimentsPage/ExperimentItemsTab/VerticallySplitCellWrapper"; | ||
| import TooltipWrapper from "@/components/shared/TooltipWrapper/TooltipWrapper"; | ||
| import { MessageSquareMore } from "lucide-react"; | ||
|
|
||
| const CompareExperimentsFeedbackScoreCell: React.FunctionComponent< | ||
| CellContext<ExperimentsCompare, unknown> | ||
| > = (context) => { | ||
| const experimentCompare = context.row.original; | ||
| const { custom } = context.column.columnDef.meta ?? {}; | ||
| const { feedbackKey } = (custom ?? {}) as CustomMeta; | ||
|
|
||
| const renderContent = (item: ExperimentItem | undefined) => { | ||
| const feedbackScore = item?.feedback_scores?.find( | ||
| (f) => f.name === feedbackKey, | ||
| ); | ||
|
|
||
| if (!feedbackScore) { | ||
| return <div className="flex h-4 w-full items-center justify-end">-</div>; | ||
| } | ||
|
|
||
| return ( | ||
| <div className="flex h-4 w-full items-center justify-end gap-1"> | ||
| <div className="truncate">{feedbackScore.value}</div> | ||
| {feedbackScore.reason && ( | ||
| <TooltipWrapper content={feedbackScore.reason} delayDuration={100}> | ||
| <MessageSquareMore className="size-3.5 shrink-0 text-light-slate" /> | ||
| </TooltipWrapper> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <VerticallySplitCellWrapper | ||
| renderContent={renderContent} | ||
| experimentCompare={experimentCompare} | ||
| metadata={context.column.columnDef.meta} | ||
| tableMetadata={context.table.options.meta} | ||
| rowId={context.row.id} | ||
| ></VerticallySplitCellWrapper> | ||
| ); | ||
| }; | ||
|
|
||
| export default CompareExperimentsFeedbackScoreCell; |
50 changes: 50 additions & 0 deletions
50
...components/pages/CompareExperimentsPage/ExperimentItemsTab/CompareExperimentsNameCell.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import React from "react"; | ||
| import { CellContext } from "@tanstack/react-table"; | ||
|
|
||
| import { ExperimentItem, ExperimentsCompare } from "@/types/datasets"; | ||
| import VerticallySplitCellWrapper, { | ||
| CustomMeta, | ||
| } from "@/components/pages/CompareExperimentsPage/ExperimentItemsTab/VerticallySplitCellWrapper"; | ||
| import ResourceLink, { | ||
| RESOURCE_TYPE, | ||
| } from "@/components/shared/ResourceLink/ResourceLink"; | ||
|
|
||
| const CompareExperimentsOutputCell: React.FunctionComponent< | ||
| CellContext<ExperimentsCompare, unknown> | ||
| > = (context) => { | ||
| const { custom } = context.column.columnDef.meta ?? {}; | ||
| const { experiments = [] } = (custom ?? {}) as CustomMeta; | ||
| const experimentCompare = context.row.original; | ||
|
|
||
| const renderContent = ( | ||
| item: ExperimentItem | undefined, | ||
| experimentId: string, | ||
| ) => { | ||
| const experiment = experiments.find((e) => e.id === experimentId); | ||
|
|
||
| return ( | ||
| <div className="-mt-2 h-8"> | ||
| <ResourceLink | ||
| id={experiment?.dataset_id || ""} | ||
| name={experiment?.name} | ||
| resource={RESOURCE_TYPE.experiment} | ||
| search={{ | ||
| experiments: [experimentId], | ||
| }} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <VerticallySplitCellWrapper | ||
| renderContent={renderContent} | ||
| experimentCompare={experimentCompare} | ||
| metadata={context.column.columnDef.meta} | ||
| tableMetadata={context.table.options.meta} | ||
| rowId={context.row.id} | ||
| ></VerticallySplitCellWrapper> | ||
| ); | ||
| }; | ||
|
|
||
| export default CompareExperimentsOutputCell; |
27 changes: 27 additions & 0 deletions
27
...mponents/pages/CompareExperimentsPage/ExperimentItemsTab/CompareExperimentsNameHeader.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import React from "react"; | ||
| import { FlaskConical } from "lucide-react"; | ||
| import { HeaderContext } from "@tanstack/react-table"; | ||
|
|
||
| import { ExperimentsCompare } from "@/types/datasets"; | ||
| import HeaderWrapper from "@/components/shared/DataTableHeaders/HeaderWrapper"; | ||
|
|
||
| const CompareExperimentsNameHeader: React.FunctionComponent< | ||
| HeaderContext<ExperimentsCompare, unknown> | ||
| > = (context) => { | ||
| const hasData = context.table.getRowCount() > 0; | ||
|
|
||
| return ( | ||
| <HeaderWrapper | ||
| metadata={context.column.columnDef.meta} | ||
| tableMetadata={context.table.options.meta} | ||
| > | ||
| {hasData && ( | ||
| <div className="absolute left-0 top-0 h-[10000px] w-px bg-border" /> | ||
| )} | ||
| <FlaskConical className="size-3.5 shrink-0 text-slate-300" /> | ||
| <div className="comet-body-s-accented truncate">Experiment</div> | ||
| </HeaderWrapper> | ||
| ); | ||
| }; | ||
|
|
||
| export default CompareExperimentsNameHeader; |
Oops, something went wrong.