From e99b46f7471ea66403a680a5caee345af162ddfb Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Tue, 10 Dec 2024 23:19:55 +0100 Subject: [PATCH 1/5] feat(frontend): adds useIsomorphicLayoutEffect hook --- agenta-web/src/hooks/useIsomorphicLayoutEffect.ts | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 agenta-web/src/hooks/useIsomorphicLayoutEffect.ts diff --git a/agenta-web/src/hooks/useIsomorphicLayoutEffect.ts b/agenta-web/src/hooks/useIsomorphicLayoutEffect.ts new file mode 100644 index 0000000000..b44f3c3c40 --- /dev/null +++ b/agenta-web/src/hooks/useIsomorphicLayoutEffect.ts @@ -0,0 +1,8 @@ +import {useLayoutEffect, useEffect} from "react" + +// useIsomorphicLayoutEffect is a custom hook that uses useLayoutEffect on the client-side +// (when window is defined) and useEffect on the server-side (when window is undefined). +// This ensures that the code runs correctly in both client-side and server-side environments. +const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect + +export default useIsomorphicLayoutEffect From f65f4938a348dcc1ff2bea35b363af50466a668f Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Tue, 10 Dec 2024 23:20:19 +0100 Subject: [PATCH 2/5] chore(fronend): replace problematic useLayoutEffect usage with useIsomorphicLayoutEffect --- agenta-web/src/hooks/usePostHogAg.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/agenta-web/src/hooks/usePostHogAg.ts b/agenta-web/src/hooks/usePostHogAg.ts index 8b3a4655e6..3fbac630cd 100644 --- a/agenta-web/src/hooks/usePostHogAg.ts +++ b/agenta-web/src/hooks/usePostHogAg.ts @@ -2,6 +2,7 @@ import {useLayoutEffect} from "react" import {isDemo, generateOrRetrieveDistinctId} from "@/lib/helpers/utils" import {usePostHog} from "posthog-js/react" import {useProfileData} from "@/contexts/profile.context" +import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect" export const usePostHogAg = () => { const trackingEnabled = process.env.NEXT_PUBLIC_TELEMETRY_TRACKING_ENABLED === "true" @@ -23,11 +24,11 @@ export const usePostHogAg = () => { } } - useLayoutEffect(() => { + useIsomorphicLayoutEffect(() => { if (!trackingEnabled) posthog.opt_out_capturing() }, [trackingEnabled]) - useLayoutEffect(() => { + useIsomorphicLayoutEffect(() => { if (posthog.get_distinct_id() !== _id) identify() }, [user?.id]) From b4afd4b49a7491334ac2204eab062b2b0fb313bc Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Wed, 11 Dec 2024 01:50:10 +0100 Subject: [PATCH 3/5] fix(frontend): split state to select evaluaor category --- .../autoEvaluation/EvaluatorsModal/Evaluators/index.tsx | 7 ++----- .../autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx | 5 ----- .../autoEvaluation/EvaluatorsModal/NewEvaluator/index.tsx | 7 ++----- 3 files changed, 4 insertions(+), 15 deletions(-) diff --git a/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/Evaluators/index.tsx b/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/Evaluators/index.tsx index 99600dda62..b3035dbfbf 100644 --- a/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/Evaluators/index.tsx +++ b/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/Evaluators/index.tsx @@ -22,8 +22,6 @@ type EvaluatorsProps = { onSuccess: () => void setEvaluatorsDisplay: any evaluatorsDisplay: string - setSelectedEvaluatorCategory: React.Dispatch> - selectedEvaluatorCategory: string } const useStyles = createUseStyles((theme: JSSTheme) => ({ @@ -74,13 +72,12 @@ const Evaluators = ({ setCloneConfig, setEvaluatorsDisplay, evaluatorsDisplay, - selectedEvaluatorCategory, - setSelectedEvaluatorCategory, }: EvaluatorsProps) => { const classes = useStyles() const [searchTerm, setSearchTerm] = useState("") const evaluatorTags = getEvaluatorTags() const evaluators = useAtom(evaluatorsAtom)[0] + const [selectedEvaluatorCategory, setSelectedEvaluatorCategory] = useState("view_all") const updatedEvaluatorConfigs = useMemo(() => { return evaluatorConfigs.map((config) => { @@ -128,7 +125,7 @@ const Evaluators = ({
setSelectedEvaluatorCategory(e.target.value)} > diff --git a/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx b/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx index c1404b6114..02a88dcea8 100644 --- a/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx +++ b/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx @@ -68,7 +68,6 @@ const EvaluatorsModal = ({ "evaluator_view", "list", ) - const [selectedEvaluatorCategory, setSelectedEvaluatorCategory] = useState("view_all") const [selectedTestset, setSelectedTestset] = useState("") const evalConfigFetcher = () => { @@ -114,8 +113,6 @@ const EvaluatorsModal = ({ setCloneConfig={setCloneConfig} setEvaluatorsDisplay={setEvaluatorsDisplay} evaluatorsDisplay={evaluatorsDisplay} - selectedEvaluatorCategory={selectedEvaluatorCategory} - setSelectedEvaluatorCategory={setSelectedEvaluatorCategory} /> ), }, @@ -128,8 +125,6 @@ const EvaluatorsModal = ({ setSelectedEvaluator={setSelectedEvaluator} setEvaluatorsDisplay={setEvaluatorsDisplay} evaluatorsDisplay={evaluatorsDisplay} - selectedEvaluatorCategory={selectedEvaluatorCategory} - setSelectedEvaluatorCategory={setSelectedEvaluatorCategory} /> ), }, diff --git a/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/NewEvaluator/index.tsx b/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/NewEvaluator/index.tsx index 972c3efc20..a6a426e879 100644 --- a/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/NewEvaluator/index.tsx +++ b/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/NewEvaluator/index.tsx @@ -15,8 +15,6 @@ type NewEvaluatorProps = { setSelectedEvaluator: React.Dispatch> setEvaluatorsDisplay: any evaluatorsDisplay: string - setSelectedEvaluatorCategory: React.Dispatch> - selectedEvaluatorCategory: string } const useStyles = createUseStyles((theme: JSSTheme) => ({ @@ -62,12 +60,11 @@ const NewEvaluator = ({ setSelectedEvaluator, setEvaluatorsDisplay, evaluatorsDisplay, - selectedEvaluatorCategory, - setSelectedEvaluatorCategory, }: NewEvaluatorProps) => { const classes = useStyles() const [searchTerm, setSearchTerm] = useState("") const evaluatorTags = getEvaluatorTags() + const [selectedEvaluatorCategory, setSelectedEvaluatorCategory] = useState("view_all") const filteredEvaluators = useMemo(() => { let filtered = evaluators @@ -103,7 +100,7 @@ const NewEvaluator = ({
setSelectedEvaluatorCategory(e.target.value)} > From a1c313961840a4b14a4e7a8fa77aadff12e5b0e7 Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Wed, 11 Dec 2024 13:07:53 +0100 Subject: [PATCH 4/5] fix(frontend): removed maxHeight from menu container styles --- agenta-web/src/components/Sidebar/Sidebar.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx index 0854ac8a3d..b34ab57534 100644 --- a/agenta-web/src/components/Sidebar/Sidebar.tsx +++ b/agenta-web/src/components/Sidebar/Sidebar.tsx @@ -66,7 +66,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({ }, menuContainer: { borderRight: "0 !important", - maxHeight: "calc(100vh - 390px)", overflowY: "auto", position: "relative", "& .ant-menu-item-selected": { From ec78df0908d89e670458a0f4aee4762a3a183e70 Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Wed, 11 Dec 2024 13:27:22 +0100 Subject: [PATCH 5/5] minor fix(frontend) --- agenta-web/src/components/Sidebar/Sidebar.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx index b34ab57534..65c2ce801c 100644 --- a/agenta-web/src/components/Sidebar/Sidebar.tsx +++ b/agenta-web/src/components/Sidebar/Sidebar.tsx @@ -51,6 +51,7 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({ justifyContent: "space-between", flexDirection: "column", flex: 1, + overflowY: "auto", }, "& .ant-menu-submenu-title": { display: "flex",