Merge pull request #2373 from Agenta-AI/feat/testset-drawer-checkpoint-2

Test set drawer checkpoint-2
Agenta-AI · Dec 26, 2024 · 06803f5 · 06803f5
2 parents 75ba96a + 784a7bb
commit 06803f5
Show file tree

Hide file tree

Showing 7 changed files with 565 additions and 248 deletions.
diff --git a/agenta-web/src/components/pages/observability/ObservabilityDashboard.tsx b/agenta-web/src/components/pages/observability/ObservabilityDashboard.tsx
@@ -1,3 +1,4 @@
+import {dynamicComponent} from "@/lib/helpers/dynamic"
 import EmptyComponent from "@/components/EmptyComponent"
 import GenericDrawer from "@/components/GenericDrawer"
 import {nodeTypeStyles} from "./components/AvatarTreeContent"
@@ -38,10 +39,13 @@ import {createUseStyles} from "react-jss"
 import {Database, Export} from "@phosphor-icons/react"
 import {getAppValues} from "@/contexts/app.context"
 import {convertToCsv, downloadCsv} from "@/lib/helpers/fileManipulations"
-import {useUpdateEffect} from "usehooks-ts"
+import useLazyEffect from "@/hooks/useLazyEffect"
 import {getStringOrJson} from "@/lib/helpers/utils"
 import ObservabilityContextProvider, {useObservabilityData} from "@/contexts/observability.context"
-import TestsetDrawer, {TestsetTraceData} from "./drawer/TestsetDrawer"
+import {TestsetTraceData, TestsetDrawerProps} from "./drawer/TestsetDrawer/assets/types"
+const TestsetDrawer = dynamicComponent<TestsetDrawerProps>(
+    "pages/observability/drawer/TestsetDrawer/TestsetDrawer",
+)
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     title: {
@@ -422,7 +426,7 @@ const ObservabilityDashboard = () => {
         setPagination({size: pageSize, page: current})
     }
     // reset pagination to page 1 whenever quearies get updated
-    useUpdateEffect(() => {
+    useLazyEffect(() => {
         if (pagination.page > 1) {
             setPagination({...pagination, page: 1})
         }
@@ -451,7 +455,7 @@ const ObservabilityDashboard = () => {
         }
     }
     // Sync searchQuery with filters state
-    useUpdateEffect(() => {
+    useLazyEffect(() => {
         const dataFilter = filters.find((f) => f.key === "content")
         setSearchQuery(dataFilter ? dataFilter.value : "")
     }, [filters])
@@ -485,7 +489,7 @@ const ObservabilityDashboard = () => {
         }
     }
     // Sync traceTabs with filters state
-    useUpdateEffect(() => {
+    useLazyEffect(() => {
         const nodeTypeFilter = filters.find((f) => f.key === "node.type")?.value
         setTraceTabs((prev) =>
             nodeTypeFilter === "chat" ? "chat" : prev == "chat" ? "tree" : prev,
@@ -650,16 +654,14 @@ const ObservabilityDashboard = () => {
                 />
             </div>
 
-            {testsetDrawerData.length > 0 && (
-                <TestsetDrawer
-                    open={testsetDrawerData.length > 0}
-                    data={testsetDrawerData}
-                    onClose={() => {
-                        setTestsetDrawerData([])
-                        setSelectedRowKeys([])
-                    }}
-                />
-            )}
+            <TestsetDrawer
+                open={testsetDrawerData.length > 0}
+                data={testsetDrawerData}
+                onClose={() => {
+                    setTestsetDrawerData([])
+                    setSelectedRowKeys([])
+                }}
+            />
 
             {activeTrace && !!traces?.length && (
                 <GenericDrawer