Skip to content

Commit

Permalink
Merge branch 'thiagohora/OPIK-68_add_rate_limit' of https://github.co…
Browse files Browse the repository at this point in the history
…m/comet-ml/opik into thiagohora/OPIK-68_add_rate_limit
  • Loading branch information
thiagohora committed Sep 20, 2024
2 parents 004a811 + cd9e140 commit f5baaa8
Show file tree
Hide file tree
Showing 3 changed files with 185 additions and 47 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -122,43 +122,41 @@ const AddExperimentToCompareDialog: React.FunctionComponent<
};

return (
<>
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="max-w-lg sm:max-w-[560px]">
<DialogHeader>
<DialogTitle>Add to compare</DialogTitle>
</DialogHeader>
<div className="w-full overflow-hidden">
<SearchInput
searchText={search}
setSearchText={setSearch}
placeholder="Search by name"
></SearchInput>
<Alert className="mt-4">
<MessageCircleWarning className="size-4" />
<AlertDescription>
Only experiments using the same dataset as the baseline can be
added to compare.
</AlertDescription>
</Alert>
<div className="my-4 flex max-h-[400px] min-h-36 max-w-full flex-col justify-stretch overflow-y-auto">
{renderListItems()}
</div>
{total > DEFAULT_SIZE && (
<div className="pt-4">
<DataTablePagination
page={page}
pageChange={setPage}
size={size}
sizeChange={setSize}
total={total}
></DataTablePagination>
</div>
)}
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="max-w-lg sm:max-w-[560px]">
<DialogHeader>
<DialogTitle>Add to compare</DialogTitle>
</DialogHeader>
<div className="w-full overflow-hidden">
<SearchInput
searchText={search}
setSearchText={setSearch}
placeholder="Search by name"
></SearchInput>
<Alert className="mt-4">
<MessageCircleWarning className="size-4" />
<AlertDescription>
Only experiments using the same dataset as the baseline can be
added to compare.
</AlertDescription>
</Alert>
<div className="my-4 flex max-h-[400px] min-h-36 max-w-full flex-col justify-stretch overflow-y-auto">
{renderListItems()}
</div>
</DialogContent>
</Dialog>
</>
{total > DEFAULT_SIZE && (
<div className="pt-4">
<DataTablePagination
page={page}
pageChange={setPage}
size={size}
sizeChange={setSize}
total={total}
></DataTablePagination>
</div>
)}
</div>
</DialogContent>
</Dialog>
);
};

Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import React, { useRef, useState } from "react";
import { Split } from "lucide-react";

import {
Expand All @@ -11,6 +11,7 @@ import { Button } from "@/components/ui/button";
import { Experiment } from "@/types/datasets";
import { useNavigate } from "@tanstack/react-router";
import useAppStore from "@/store/AppStore";
import FilterExperimentsToCompareDialog from "@/components/pages/ExperimentsPage/FilterExperimentsToCompareDialog";

type ExperimentsActionsButtonProps = {
experiments: Experiment[];
Expand All @@ -19,26 +20,43 @@ type ExperimentsActionsButtonProps = {
const ExperimentsActionsButton: React.FunctionComponent<
ExperimentsActionsButtonProps
> = ({ experiments }) => {
const resetKeyRef = useRef(0);
const [open, setOpen] = useState<boolean>(false);
const navigate = useNavigate();
const workspaceName = useAppStore((state) => state.activeWorkspaceName);

const handleCompareClick = () => {
if (experiments.length === 0) return;

navigate({
to: "/$workspaceName/experiments/$datasetId/compare",
params: {
datasetId: experiments[0].dataset_id,
workspaceName,
},
search: {
experiments: experiments.map((e) => e.id),
},
});
const hasTheSameDataset = experiments.every(
(e) => e.dataset_id === experiments[0].dataset_id,
);

if (hasTheSameDataset) {
navigate({
to: "/$workspaceName/experiments/$datasetId/compare",
params: {
datasetId: experiments[0].dataset_id,
workspaceName,
},
search: {
experiments: experiments.map((e) => e.id),
},
});
} else {
setOpen(true);
resetKeyRef.current = resetKeyRef.current + 1;
}
};

return (
<>
<FilterExperimentsToCompareDialog
key={resetKeyRef.current}
experiments={experiments}
open={open}
setOpen={setOpen}
/>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="default">
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
import React, { useState } from "react";
import findIndex from "lodash/findIndex";

import {
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import useAppStore from "@/store/AppStore";
import { Experiment } from "@/types/datasets";
import { Button } from "@/components/ui/button";
import { useNavigate } from "@tanstack/react-router";
import { Checkbox } from "@/components/ui/checkbox";

type FilterExperimentsToCompareDialogProps = {
experiments: Experiment[];
open: boolean;
setOpen: (open: boolean) => void;
};

const FilterExperimentsToCompareDialog: React.FunctionComponent<
FilterExperimentsToCompareDialogProps
> = ({ experiments, open, setOpen }) => {
const navigate = useNavigate();
const workspaceName = useAppStore((state) => state.activeWorkspaceName);
const [selectedExperiments, setSelectedExperiments] = useState(experiments);
const isValid = selectedExperiments.every(
(e) => e.dataset_id === selectedExperiments[0].dataset_id,
);

const compareHandler = () => {
if (!isValid) return;

navigate({
to: "/$workspaceName/experiments/$datasetId/compare",
params: {
datasetId: selectedExperiments[0].dataset_id,
workspaceName,
},
search: {
experiments: selectedExperiments.map((e) => e.id),
},
});
};

const checkboxChangeHandler = (e: Experiment) => {
setSelectedExperiments((state) => {
const localExperiments = state.slice();
const index = findIndex(localExperiments, (le) => le.id === e.id);

if (index !== -1) {
localExperiments.splice(index, 1);
} else {
localExperiments.push(e);
}

return localExperiments;
});
};

const renderListItems = () => {
return experiments.map((e) => {
const checked =
findIndex(selectedExperiments, (se) => se.id === e.id) !== -1;
return (
<label
key={e.id}
className="flex cursor-pointer flex-col gap-0.5 py-2.5 pl-3 pr-4"
>
<div className="flex flex-col gap-0.5">
<div className="flex items-center gap-2">
<Checkbox
checked={checked}
onCheckedChange={() => checkboxChangeHandler(e)}
aria-label="Select experiment"
className="mt-0.5"
/>
<span className="comet-body-s-accented truncate">{e.name}</span>
</div>
<div className="truncate pl-6 text-light-slate">
Dataset: {e.dataset_name ?? "Deleted dataset"}
</div>
</div>
</label>
);
});
};

return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="max-w-lg sm:max-w-[560px]">
<DialogHeader>
<DialogTitle>Select experiments to compare</DialogTitle>
</DialogHeader>
<div className="w-full overflow-hidden">
<div className="comet-body-s py-2 text-muted-slate">
You can only compare experiments that use the same dataset. Please
make sure all the experiments use the same dataset.
</div>
<div className="my-4 flex max-h-[400px] min-h-36 max-w-full flex-col justify-stretch gap-2.5 overflow-y-auto">
{renderListItems()}
</div>
</div>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<DialogClose asChild>
<Button type="submit" disabled={!isValid} onClick={compareHandler}>
Compare experiments
</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
);
};

export default FilterExperimentsToCompareDialog;

0 comments on commit f5baaa8

Please sign in to comment.