Skip to content

Commit

Permalink
fix experiments add header button (#3048)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kavinvalli
kavinvalli authored Dec 12, 2024
1 parent 48bda52 commit be125ef
Show file tree
Hide file tree
Showing 10 changed files with 456 additions and 640 deletions.
154 changes: 65 additions & 89 deletions web/components/shared/themed/table/themedTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ import {
import useOnboardingContext, {
ONBOARDING_STEPS,
} from "@/components/layout/onboardingContext";
import { OnboardingPopover } from "@/components/templates/onboarding/OnboardingPopover";
import { useRouter, useSearchParams } from "next/navigation";
import { RequestViews } from "./RequestViews";

Expand Down Expand Up @@ -373,85 +372,73 @@ export default function ThemedTable<T extends { id?: string }>(
</thead>
<tbody className="text-[13px] ">
{rows.map((row, index) => (
<OnboardingPopover
key={row.id}
open={index === 0 && id === "requests-table"}
popoverContentProps={{
onboardingStep: "REQUESTS_TABLE",
next: () => {
<tr
key={row.original?.id}
className={clsx(
" hover:cursor-pointer",
checkedIds?.includes(row.original?.id ?? "")
? "bg-sky-100 border-l border-sky-500 pl-2 dark:bg-slate-800/50 dark:border-sky-900"
: "hover:bg-sky-50 dark:hover:bg-slate-700/50"
)}
onClick={
onRowSelect &&
(() => {
handleRowSelect(row.original, index);
},
align: "start",
alignOffset: 10,
}}
})
}
>
<tr
className={clsx(
" hover:cursor-pointer",
checkedIds?.includes(row.original?.id ?? "")
? "bg-sky-100 border-l border-sky-500 pl-2 dark:bg-slate-800/50 dark:border-sky-900"
: "hover:bg-sky-50 dark:hover:bg-slate-700/50"
)}
onClick={
onRowSelect &&
(() => {
handleRowSelect(row.original, index);
})
}
>
{showCheckboxes && (
<td className="w-8 px-2">
<Checkbox
variant="blue"
checked={selectedIds?.includes(
row.original?.id ?? ""
)}
onChange={() => {}} // Handle individual row selection
className="text-slate-700 dark:text-slate-400"
/>
</td>
)}
{row.getVisibleCells().map((cell, i) => (
<td
key={i}
className={clsx(
"py-3 border-t border-slate-300 dark:border-slate-700 px-2 text-slate-700 dark:text-slate-300",
i === 0 && "pl-10", // Add left padding to the first column
i === row.getVisibleCells().length - 1 &&
"pr-10 border-r border-slate-300 dark:border-slate-700"
)}
style={{
maxWidth: cell.column.getSize(),
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{dataLoading &&
(cell.column.id == "requestText" ||
cell.column.id == "responseText") ? (
<span
className={clsx(
"w-full flex flex-grow",
(cell.column.id == "requestText" ||
cell.column.id == "responseText") &&
dataLoading
? "animate-pulse bg-slate-200 rounded-md"
: "hidden"
)}
>
&nbsp;
</span>
) : (
flexRender(
cell.column.columnDef.cell,
cell.getContext()
)
{showCheckboxes && (
<td className="w-8 px-2">
<Checkbox
variant="blue"
checked={selectedIds?.includes(
row.original?.id ?? ""
)}
</td>
))}
</tr>
</OnboardingPopover>
onChange={() => {}} // Handle individual row selection
className="text-slate-700 dark:text-slate-400"
/>
</td>
)}
{row.getVisibleCells().map((cell, i) => (
<td
key={i}
className={clsx(
"py-3 border-t border-slate-300 dark:border-slate-700 px-2 text-slate-700 dark:text-slate-300",
i === 0 && "pl-10", // Add left padding to the first column
i === row.getVisibleCells().length - 1 &&
"pr-10 border-r border-slate-300 dark:border-slate-700"
)}
style={{
maxWidth: cell.column.getSize(),
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{dataLoading &&
(cell.column.id == "requestText" ||
cell.column.id == "responseText") ? (
<span
className={clsx(
"w-full flex flex-grow",
(cell.column.id == "requestText" ||
cell.column.id == "responseText") &&
dataLoading
? "animate-pulse bg-slate-200 rounded-md"
: "hidden"
)}
>
&nbsp;
</span>
) : (
flexRender(
cell.column.columnDef.cell,
cell.getContext()
)
)}
</td>
))}
</tr>
))}
</tbody>
</table>
Expand All @@ -463,18 +450,7 @@ export default function ThemedTable<T extends { id?: string }>(
{rightPanel && (
<>
{isOnboardingVisible && currentStep === 1 ? (
<OnboardingPopover
popoverContentProps={{
onboardingStep: "REQUESTS_DRAWER",
next: () => {
router.push(`/sessions/${sessionData?.sessionId}`);
},
align: "center",
side: "left",
}}
>
<div className="h-full w-1/2">{rightPanel}</div>
</OnboardingPopover>
<div className="h-full w-1/2">{rightPanel}</div>
) : (
<>
<ResizableHandle withHandle />
Expand Down
42 changes: 16 additions & 26 deletions web/components/templates/prompts/experiments/table/AddColumnDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { FlaskConicalIcon } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import PromptPlayground from "../../id/promptPlayground";
import { useJawnClient } from "@/lib/clients/jawnHook";
import { OnboardingPopover } from "@/components/templates/onboarding/OnboardingPopover";
import useOnboardingContext, {
ONBOARDING_STEPS,
} from "@/components/layout/onboardingContext";
Expand Down Expand Up @@ -131,33 +130,24 @@ const AddColumnDialog = ({
}
>
<DialogContent className="w-[95vw] max-w-2xl gap-0 max-h-[90vh] overflow-y-auto">
<OnboardingPopover
popoverContentProps={{
onboardingStep: "EXPERIMENTS_ADD_CHANGE_PROMPT",
align: "start",
alignOffset: 10,
}}
modal={true}
>
<div className="flex justify-between items-center mb-8">
<div className="flex items-center">
<FlaskConicalIcon className="w-5 h-5 mr-2.5 text-slate-500" />
<h3 className="text-base font-medium text-slate-950 dark:text-white mr-3">
Add Prompt
</h3>
<div className="flex gap-1 items-center">
<p className="text-slate-500 text-sm font-medium leading-4">
Forked from
</p>
<Badge variant="helicone" className="text-slate-500">
<FlaskConicalIcon className="w-3.5 h-3.5 mr-1" />
{(promptVersionTemplateData?.metadata?.label as string) ??
`v${promptVersionTemplateData?.major_version}.${promptVersionTemplateData?.minor_version}`}
</Badge>
</div>
<div className="flex justify-between items-center mb-8">
<div className="flex items-center">
<FlaskConicalIcon className="w-5 h-5 mr-2.5 text-slate-500" />
<h3 className="text-base font-medium text-slate-950 dark:text-white mr-3">
Add Prompt
</h3>
<div className="flex gap-1 items-center">
<p className="text-slate-500 text-sm font-medium leading-4">
Forked from
</p>
<Badge variant="helicone" className="text-slate-500">
<FlaskConicalIcon className="w-3.5 h-3.5 mr-1" />
{(promptVersionTemplateData?.metadata?.label as string) ??
`v${promptVersionTemplateData?.major_version}.${promptVersionTemplateData?.minor_version}`}
</Badge>
</div>
</div>
</OnboardingPopover>
</div>

{promptVersionTemplateData && (
<PromptPlayground
Expand Down
33 changes: 8 additions & 25 deletions web/components/templates/prompts/experiments/table/AddColumnHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import AddColumnDialog from "./AddColumnDialog";
import { OnboardingPopover } from "@/components/templates/onboarding/OnboardingPopover";

interface AddColumnHeaderProps {
promptVersionId: string;
Expand Down Expand Up @@ -58,31 +57,15 @@ const AddColumnHeader: React.FC<AddColumnHeaderProps> = ({
<>
<DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
<DropdownMenuTrigger asChild>
<OnboardingPopover
popoverContentProps={{
onboardingStep: "EXPERIMENTS_ADD",
align: "start",
alignOffset: 10,
nextOverride: () => {
setSelectedForkFromPromptVersionId(
experimentPromptVersions?.[0].id
);
setIsAddDialogOpen(true);
setIsDropdownOpen(false);
},
delayMs: 1000,
}}
<Button
variant="ghost"
className="text-slate-900 dark:text-slate-100"
>
<Button
variant="ghost"
className="text-slate-900 dark:text-slate-100"
>
<PlusIcon className="w-5 h-5 text-slate-700 dark:text-slate-100" />
<span className="text-sm font-medium text-slate-700 dark:text-slate-100">
Add Column
</span>
</Button>
</OnboardingPopover>
<PlusIcon className="w-5 h-5 text-slate-700 dark:text-slate-100" />
<span className="text-sm font-medium text-slate-700 dark:text-slate-100">
Add Column
</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel className="font-normal text-sm text-slate-500 leading-[140%]">
Expand Down
Loading

0 comments on commit be125ef

Please sign in to comment.