From 24a78aef6826644ea520a53cce85fd0a62e82a68 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashrafdev365@gmail.com>
Date: Thu, 17 Oct 2024 20:52:25 +0600
Subject: [PATCH 01/16] feat(frontend): implemented filters in observability

---
 .../observability/TableHeader/Filters.tsx     | 153 ++++++++++++++++++
 .../pages/observability/TableHeader/Sort.tsx  |  43 +++++
 agenta-web/src/lib/Types.ts                   |   6 +
 agenta-web/src/lib/helpers/utils.ts           |  94 +++++++++++
 .../apps/[app_id]/observability/index.tsx     |  72 ++++++++-
 5 files changed, 364 insertions(+), 4 deletions(-)
 create mode 100644 agenta-web/src/components/pages/observability/TableHeader/Filters.tsx
 create mode 100644 agenta-web/src/components/pages/observability/TableHeader/Sort.tsx

diff --git a/agenta-web/src/components/pages/observability/TableHeader/Filters.tsx b/agenta-web/src/components/pages/observability/TableHeader/Filters.tsx
new file mode 100644
index 0000000000..50ec47f6ef
--- /dev/null
+++ b/agenta-web/src/components/pages/observability/TableHeader/Filters.tsx
@@ -0,0 +1,153 @@
+import React, {useState} from "react"
+import {Filter, JSSTheme} from "@/lib/Types"
+import {ArrowCounterClockwise, CaretDown, Funnel, X} from "@phosphor-icons/react"
+import {Button, Divider, Input, Popover, Select, Space, Typography} from "antd"
+import {createUseStyles} from "react-jss"
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    popover: {
+        "& .ant-popover-inner": {
+            width: "600px !important",
+            padding: `0px ${theme.paddingXS}px ${theme.paddingXS}px ${theme.padding}px`,
+        },
+    },
+    filterHeading: {
+        fontSize: theme.fontSizeHeading5,
+        lineHeight: theme.lineHeightHeading5,
+        fontWeight: theme.fontWeightMedium,
+    },
+    filterContainer: {
+        padding: 8,
+        gap: 8,
+        borderRadius: theme.borderRadius,
+        backgroundColor: "#f5f7fa",
+        marginTop: 8,
+    },
+}))
+
+type Props = {
+    setFilterValue: React.Dispatch<React.SetStateAction<Filter>>
+    columns: {column: string; mapping: string}[]
+}
+
+const Filters: React.FC<Props> = ({setFilterValue, columns}) => {
+    const classes = useStyles()
+    const [filter, setFilter] = useState<Filter>({} as Filter)
+    const [isFilterOpen, setIsFilterOpen] = useState(false)
+
+    const conditions = [
+        "contains",
+        "does not contain",
+        "starts with",
+        "ends with",
+        "exists",
+        "does not exist",
+        "=",
+        ">",
+        "<",
+        ">=",
+        "<=",
+    ]
+
+    const clearFilter = () => {
+        setFilter({} as Filter)
+        setFilterValue({} as Filter)
+    }
+
+    return (
+        <Popover
+            title={null}
+            trigger="click"
+            overlayClassName={classes.popover}
+            arrow={false}
+            onOpenChange={() => setIsFilterOpen(false)}
+            open={isFilterOpen}
+            placement="bottomLeft"
+            content={
+                <section>
+                    <div className="h-[44px] flex items-center justify-between">
+                        <Typography.Text className={classes.filterHeading}>Filter</Typography.Text>
+
+                        <Button icon={<ArrowCounterClockwise size={14} />} onClick={clearFilter}>
+                            Clear
+                        </Button>
+                    </div>
+
+                    <div className="-ml-4 -mr-2">
+                        <Divider className="!m-0" />
+                    </div>
+
+                    <div className={classes.filterContainer}>
+                        <Space className="pl-3">
+                            <Typography.Text>Where</Typography.Text>
+
+                            <Select
+                                placeholder="Column"
+                                style={{width: 88}}
+                                popupMatchSelectWidth={120}
+                                suffixIcon={<CaretDown size={14} />}
+                                onChange={(value) => setFilter({...filter, column: value})}
+                                value={filter.column}
+                                options={columns.map((item) => {
+                                    return {
+                                        value: item.mapping,
+                                        label: item.column.toUpperCase(),
+                                    }
+                                })}
+                            />
+                            {filter.column && (
+                                <>
+                                    <Select
+                                        placeholder="Condition"
+                                        style={{width: 95}}
+                                        suffixIcon={<CaretDown size={14} />}
+                                        onChange={(value) =>
+                                            setFilter({...filter, condition: value})
+                                        }
+                                        popupMatchSelectWidth={250}
+                                        value={filter.condition}
+                                        options={conditions.map((item) => {
+                                            return {value: item, label: item.toUpperCase()}
+                                        })}
+                                    />
+
+                                    <Input
+                                        placeholder="Keyword"
+                                        className="w-[300px]"
+                                        value={filter.keyword}
+                                        onChange={(e) =>
+                                            setFilter({...filter, keyword: e.target.value})
+                                        }
+                                    />
+                                </>
+                            )}
+                        </Space>
+                    </div>
+
+                    <div className="flex items-center justify-end mt-2">
+                        <Button
+                            type="primary"
+                            disabled={!filter.keyword}
+                            onClick={() => {
+                                setIsFilterOpen(false)
+                                setFilterValue(filter)
+                            }}
+                        >
+                            Apply
+                        </Button>
+                    </div>
+                </section>
+            }
+        >
+            <Button
+                icon={<Funnel size={14} />}
+                onClick={() => setIsFilterOpen(true)}
+                className="flex items-center gap-2"
+            >
+                Filters {filter.condition && <X size={14} />}
+            </Button>
+        </Popover>
+    )
+}
+
+export default Filters
diff --git a/agenta-web/src/components/pages/observability/TableHeader/Sort.tsx b/agenta-web/src/components/pages/observability/TableHeader/Sort.tsx
new file mode 100644
index 0000000000..3e50b8de15
--- /dev/null
+++ b/agenta-web/src/components/pages/observability/TableHeader/Sort.tsx
@@ -0,0 +1,43 @@
+import React, {useState} from "react"
+import {Hourglass} from "@phosphor-icons/react"
+import {Select} from "antd"
+
+type Props = {
+    setSort: React.Dispatch<React.SetStateAction<string>>
+    sort?: string
+}
+
+const Sort: React.FC<Props> = ({setSort, sort}) => {
+    return (
+        <Select
+            style={{width: 120}}
+            suffixIcon={null}
+            value={sort}
+            onChange={(value) => setSort(value)}
+            placeholder={
+                <div className="flex items-center justify-center gap-2">
+                    <Hourglass size={14} /> Sort by time
+                </div>
+            }
+            labelRender={(value) => (
+                <div className="flex items-center justify-center gap-2">
+                    <Hourglass size={14} /> {sort !== "all time" && "Last"} {value.value}
+                </div>
+            )}
+            options={[
+                {value: "30 mins", label: "30 mins"},
+                {value: "1 hour", label: "1 hour"},
+                {value: "6 hour", label: "6 hour"},
+                {value: "24 hour", label: "24 hour"},
+                {value: "3 days", label: "3 days"},
+                {value: "7 days", label: "7 days"},
+                {value: "14 days", label: "14 days"},
+                {value: "1 month", label: "1 month"},
+                {value: "3 month", label: "3 month"},
+                {value: "all time", label: "All time"},
+            ]}
+        />
+    )
+}
+
+export default Sort
diff --git a/agenta-web/src/lib/Types.ts b/agenta-web/src/lib/Types.ts
index df47fd87bf..5a1d251569 100644
--- a/agenta-web/src/lib/Types.ts
+++ b/agenta-web/src/lib/Types.ts
@@ -662,3 +662,9 @@ export interface HumanEvaluationListTableDataType {
     variant_revision_ids: string[]
     variantNames: string[]
 }
+
+export type Filter = {
+    condition: string
+    column: string
+    keyword: string
+}
\ No newline at end of file
diff --git a/agenta-web/src/lib/helpers/utils.ts b/agenta-web/src/lib/helpers/utils.ts
index 01fac1df35..2a7f9f6807 100644
--- a/agenta-web/src/lib/helpers/utils.ts
+++ b/agenta-web/src/lib/helpers/utils.ts
@@ -359,3 +359,97 @@ export const filterVariantParameters = ({
 export const formatVariantIdWithHash = (variantId: string) => {
     return `# ${variantId.split("-")[0]}`
 }
+
+export const getTimeRangeUnit = (time: string) => {
+    let unit: dayjs.UnitType
+    let duration: number
+
+    switch (time) {
+        case "30 mins":
+            unit = "minute"
+            duration = 30
+            break
+        case "1 hour":
+            unit = "hour"
+            duration = 1
+            break
+        case "6 hour":
+            unit = "hour"
+            duration = 6
+            break
+        case "24 hour":
+            unit = "hour"
+            duration = 24
+            break
+        case "3 days":
+            unit = "day"
+            duration = 3
+            break
+        case "7 days":
+            unit = "day"
+            duration = 7
+            break
+        case "14 days":
+            unit = "day"
+            duration = 14
+            break
+        case "1 month":
+            unit = "month"
+            duration = 1
+            break
+        case "3 month":
+            unit = "month"
+            duration = 3
+            break
+        default:
+            unit = "year"
+            duration = Infinity
+    }
+
+    return {duration, unit}
+}
+
+export const getNestedProperties = (obj: any, path: string) => {
+    return path.split(".").reduce((acc, key) => acc && acc[key], obj)
+}
+
+export const matcheFilterCriteria = ({
+    data,
+    condition,
+    keyword,
+}: {
+    data: any
+    condition: string
+    keyword: string | number
+}) => {
+    if (data === undefined) return false
+    const value = String(data).toLowerCase()
+    const key = String(keyword).toLowerCase()
+
+    switch (condition) {
+        case "contains":
+            return value.includes(key)
+        case "does not contain":
+            return !value.includes(key)
+        case "starts with":
+            return value.startsWith(key)
+        case "ends with":
+            return value.endsWith(key)
+        case "exists":
+            return data !== undefined
+        case "does not exist":
+            return data === undefined
+        case "=":
+            return typeof data == "number" ? Number(data) == Number(key) : value == key
+        case ">":
+            return Number(data) > Number(key)
+        case "<":
+            return Number(data) < Number(key)
+        case ">=":
+            return Number(data) >= Number(key)
+        case "<=":
+            return Number(data) <= Number(key)
+        default:
+            return false
+    }
+}
diff --git a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
index 4703c1c645..df2bde90db 100644
--- a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
@@ -3,15 +3,18 @@ import StatusRenderer from "@/components/pages/observability/components/StatusRe
 import TraceContent from "@/components/pages/observability/drawer/TraceContent"
 import TraceHeader from "@/components/pages/observability/drawer/TraceHeader"
 import TraceTree from "@/components/pages/observability/drawer/TraceTree"
+import Filters from "@/components/pages/observability/TableHeader/Filters"
+import Sort from "@/components/pages/observability/TableHeader/Sort"
 import ResultTag from "@/components/ResultTag/ResultTag"
 import {useQueryParam} from "@/hooks/useQuery"
 import {formatCurrency, formatLatency, formatTokenUsage} from "@/lib/helpers/formatters"
 import {findTraceNodeById} from "@/lib/helpers/observability_helpers"
+import {getNestedProperties, getTimeRangeUnit, matcheFilterCriteria} from "@/lib/helpers/utils"
 import {useTraces} from "@/lib/hooks/useTraces"
-import {JSSTheme} from "@/lib/Types"
+import {Filter, JSSTheme} from "@/lib/Types"
 import {observabilityTransformer} from "@/services/observability/core"
 import {_AgentaRootsResponse, AgentaNodeDTO} from "@/services/observability/types"
-import {Table, Typography} from "antd"
+import {Input, Space, Table, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import dayjs from "dayjs"
 import React, {useCallback, useMemo, useState} from "react"
@@ -30,8 +33,21 @@ interface Props {}
 const ObservabilityDashboard = ({}: Props) => {
     const classes = useStyles()
     const [selectedTraceId, setSelectedTraceId] = useQueryParam("trace", "")
+    const [searchTerm, setSearchTerm] = useState("")
+    const [filterTrace, setFilterTrace] = useState<Filter>({} as Filter)
+    const [sortTrace, setSortTrace] = useState("14 days")
     const {traces} = useTraces()
 
+    const filterColumns = [
+        {column: "inputs", mapping: "data.inputs.topic"},
+        {column: "outputs", mapping: "data.outputs"},
+        {column: "status", mapping: "status.code"},
+        {column: "costs", mapping: "metrics.acc.costs.total"},
+        {column: "tokens", mapping: "metrics.acc.tokens.total"},
+        {column: "node name", mapping: "node.name"},
+        {column: "node type", mapping: "node.type"},
+    ]
+
     // const activeTrace = useMemo(
     //     () => traces?.find((item) => item.root.id === selectedTraceId) ?? null,
     //     [selectedTraceId, traces],
@@ -56,6 +72,44 @@ const ObservabilityDashboard = ({}: Props) => {
     //     [activeTrace],
     // )
 
+    const filteredTrace = useMemo(() => {
+        let filtered = traces
+
+        if (filterTrace.keyword) {
+            const {column, condition, keyword} = filterTrace
+
+            filtered = filtered?.filter((trace) => {
+                const propertyValue = getNestedProperties(trace, column)
+                return matcheFilterCriteria({data: propertyValue, condition, keyword})
+            })
+        }
+
+        if (sortTrace) {
+            const now = dayjs()
+            const {duration, unit} = getTimeRangeUnit(sortTrace)
+
+            if (duration == Infinity) {
+                return filtered
+            }
+
+            filtered = filtered?.filter((item) => {
+                const itemDate = dayjs(item.lifecycle.created_at)
+
+                return itemDate.isAfter(now.subtract(duration, unit))
+            })
+        }
+
+        if (searchTerm) {
+            filtered = filtered?.filter((item) =>
+                item.data?.outputs.toLowerCase().includes(searchTerm.toLowerCase()),
+            )
+        }
+
+        return filtered
+    }, [searchTerm, traces, sortTrace, filterTrace])
+
+    console.log(filteredTrace)
+
     const columns: ColumnsType<_AgentaRootsResponse> = [
         {
             title: "ID",
@@ -137,11 +191,21 @@ const ObservabilityDashboard = ({}: Props) => {
     return (
         <div className="flex flex-col gap-6">
             <Typography.Text className={classes.title}>Observability</Typography.Text>
-
+            <Space>
+                <Input.Search
+                    placeholder="Search"
+                    className="w-[400px]"
+                    allowClear
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                />
+                <Sort setSort={setSortTrace} sort={sortTrace} />
+                <Filters setFilterValue={setFilterTrace} columns={filterColumns} />
+            </Space>
             {traces?.length ? (
                 <Table
                     columns={columns}
-                    dataSource={traces}
+                    dataSource={filteredTrace}
                     bordered
                     style={{cursor: "pointer"}}
                     onRow={(record) => ({

From 7e6a7c720c7e183f1da93639783ad1feaa559224 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashrafdev365@gmail.com>
Date: Fri, 18 Oct 2024 14:48:14 +0600
Subject: [PATCH 02/16] refactor(frontend): observability filter code

---
 .../TableHeader => Filters}/Filters.tsx       |  0
 .../TableHeader => Filters}/Sort.tsx          |  2 +-
 agenta-web/src/lib/Types.ts                   | 17 +++++-
 agenta-web/src/lib/helpers/utils.ts           | 61 +++++--------------
 .../apps/[app_id]/observability/index.tsx     |  7 +--
 5 files changed, 33 insertions(+), 54 deletions(-)
 rename agenta-web/src/components/{pages/observability/TableHeader => Filters}/Filters.tsx (100%)
 rename agenta-web/src/components/{pages/observability/TableHeader => Filters}/Sort.tsx (97%)

diff --git a/agenta-web/src/components/pages/observability/TableHeader/Filters.tsx b/agenta-web/src/components/Filters/Filters.tsx
similarity index 100%
rename from agenta-web/src/components/pages/observability/TableHeader/Filters.tsx
rename to agenta-web/src/components/Filters/Filters.tsx
diff --git a/agenta-web/src/components/pages/observability/TableHeader/Sort.tsx b/agenta-web/src/components/Filters/Sort.tsx
similarity index 97%
rename from agenta-web/src/components/pages/observability/TableHeader/Sort.tsx
rename to agenta-web/src/components/Filters/Sort.tsx
index 3e50b8de15..bf3e0e897d 100644
--- a/agenta-web/src/components/pages/observability/TableHeader/Sort.tsx
+++ b/agenta-web/src/components/Filters/Sort.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from "react"
+import React from "react"
 import {Hourglass} from "@phosphor-icons/react"
 import {Select} from "antd"
 
diff --git a/agenta-web/src/lib/Types.ts b/agenta-web/src/lib/Types.ts
index 5a1d251569..2fb5baa57f 100644
--- a/agenta-web/src/lib/Types.ts
+++ b/agenta-web/src/lib/Types.ts
@@ -664,7 +664,20 @@ export interface HumanEvaluationListTableDataType {
 }
 
 export type Filter = {
-    condition: string
+    condition: FilterConditions
     column: string
     keyword: string
-}
\ No newline at end of file
+}
+
+export type FilterConditions =
+    | "contains"
+    | "does not contain"
+    | "starts with"
+    | "ends with"
+    | "exists"
+    | "does not exist"
+    | "="
+    | ">"
+    | "<"
+    | ">="
+    | "<="
diff --git a/agenta-web/src/lib/helpers/utils.ts b/agenta-web/src/lib/helpers/utils.ts
index 2a7f9f6807..7c83073551 100644
--- a/agenta-web/src/lib/helpers/utils.ts
+++ b/agenta-web/src/lib/helpers/utils.ts
@@ -1,6 +1,6 @@
 import {v4 as uuidv4} from "uuid"
 import {EvaluationType} from "../enums"
-import {GenericObject} from "../Types"
+import {FilterConditions, GenericObject} from "../Types"
 import promiseRetry from "promise-retry"
 import {getErrorMessage} from "./errorHandler"
 import dayjs from "dayjs"
@@ -360,53 +360,20 @@ export const formatVariantIdWithHash = (variantId: string) => {
     return `# ${variantId.split("-")[0]}`
 }
 
-export const getTimeRangeUnit = (time: string) => {
-    let unit: dayjs.UnitType
-    let duration: number
-
-    switch (time) {
-        case "30 mins":
-            unit = "minute"
-            duration = 30
-            break
-        case "1 hour":
-            unit = "hour"
-            duration = 1
-            break
-        case "6 hour":
-            unit = "hour"
-            duration = 6
-            break
-        case "24 hour":
-            unit = "hour"
-            duration = 24
-            break
-        case "3 days":
-            unit = "day"
-            duration = 3
-            break
-        case "7 days":
-            unit = "day"
-            duration = 7
-            break
-        case "14 days":
-            unit = "day"
-            duration = 14
-            break
-        case "1 month":
-            unit = "month"
-            duration = 1
-            break
-        case "3 month":
-            unit = "month"
-            duration = 3
-            break
-        default:
-            unit = "year"
-            duration = Infinity
+export const getTimeRangeUnit = (time: string): {duration: number; unit: dayjs.ManipulateType} => {
+    const timeRanges: {[key: string]: {duration: number; unit: dayjs.ManipulateType}} = {
+        "30 mins": {duration: 30, unit: "minute"},
+        "1 hour": {duration: 1, unit: "hour"},
+        "6 hour": {duration: 6, unit: "hour"},
+        "24 hour": {duration: 24, unit: "hour"},
+        "3 days": {duration: 3, unit: "day"},
+        "7 days": {duration: 7, unit: "day"},
+        "14 days": {duration: 14, unit: "day"},
+        "1 month": {duration: 1, unit: "month"},
+        "3 month": {duration: 3, unit: "month"},
     }
 
-    return {duration, unit}
+    return timeRanges[time] || {duration: Infinity, unit: "year"}
 }
 
 export const getNestedProperties = (obj: any, path: string) => {
@@ -419,7 +386,7 @@ export const matcheFilterCriteria = ({
     keyword,
 }: {
     data: any
-    condition: string
+    condition: FilterConditions
     keyword: string | number
 }) => {
     if (data === undefined) return false
diff --git a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
index df2bde90db..5afda64223 100644
--- a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
@@ -3,8 +3,8 @@ import StatusRenderer from "@/components/pages/observability/components/StatusRe
 import TraceContent from "@/components/pages/observability/drawer/TraceContent"
 import TraceHeader from "@/components/pages/observability/drawer/TraceHeader"
 import TraceTree from "@/components/pages/observability/drawer/TraceTree"
-import Filters from "@/components/pages/observability/TableHeader/Filters"
-import Sort from "@/components/pages/observability/TableHeader/Sort"
+import Filters from "@/components/Filters/Filters"
+import Sort from "@/components/Filters/Sort"
 import ResultTag from "@/components/ResultTag/ResultTag"
 import {useQueryParam} from "@/hooks/useQuery"
 import {formatCurrency, formatLatency, formatTokenUsage} from "@/lib/helpers/formatters"
@@ -88,13 +88,12 @@ const ObservabilityDashboard = ({}: Props) => {
             const now = dayjs()
             const {duration, unit} = getTimeRangeUnit(sortTrace)
 
-            if (duration == Infinity) {
+            if (duration === Infinity) {
                 return filtered
             }
 
             filtered = filtered?.filter((item) => {
                 const itemDate = dayjs(item.lifecycle.created_at)
-
                 return itemDate.isAfter(now.subtract(duration, unit))
             })
         }

From d518ae0d5687a433fc7b47fd088d69ad12b013a2 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashrafdev365@gmail.com>
Date: Sun, 20 Oct 2024 17:20:58 +0600
Subject: [PATCH 03/16] fix(frontend): minor fixes

---
 .../apps/[app_id]/observability/index.tsx     |   2 +
 .../src/styles/tokens/antd-themeConfig.json   | 106 +++++++++---------
 2 files changed, 55 insertions(+), 53 deletions(-)

diff --git a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
index dd7a9a89d3..46d85bedf9 100644
--- a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
@@ -102,6 +102,8 @@ const ObservabilityDashboard = ({}: Props) => {
                 return itemDate.isAfter(now.subtract(duration, unit))
             })
         }
+
+        return filtered
     }, [traces, sortTrace, filterTrace])
 
     const columns: ColumnsType<_AgentaRootsResponse> = [
diff --git a/agenta-web/src/styles/tokens/antd-themeConfig.json b/agenta-web/src/styles/tokens/antd-themeConfig.json
index c12b939bb8..47eb48069b 100644
--- a/agenta-web/src/styles/tokens/antd-themeConfig.json
+++ b/agenta-web/src/styles/tokens/antd-themeConfig.json
@@ -281,8 +281,8 @@
         "paddingContentVerticalSM": 8,
         "controlPaddingHorizontal": 12,
         "controlPaddingHorizontalSM": 8,
-        "fontFamily": "'Inter', 'Inter'",
-        "fontFamilyCode": "'Inter', 'Inter'",
+        "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'",
+        "fontFamilyCode": "'__Inter_36bd41', '__Inter_Fallback_36bd41'",
         "fontSize": 12,
         "fontSizeLG": 14,
         "fontSizeSM": 10,
@@ -379,7 +379,7 @@
             "inputFontSize": 12,
             "inputFontSizeLG": 14,
             "inputFontSizeSM": 10,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Transfer": {
             "listWidthLG": 250,
@@ -412,7 +412,7 @@
             "colorBgContainer": "#ffffff",
             "itemHeight": 28,
             "headerHeight": 34,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Segmented": {
             "segmentedBgColorSelected": "#ffffff",
@@ -448,7 +448,7 @@
             "itemActiveBg": "rgba(5, 23, 41, 0.15)",
             "trackPadding": 2,
             "trackBg": "#ffffff",
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Switch": {
             "trackPadding": 2,
@@ -474,7 +474,7 @@
             "colorPrimaryBorder": "#d6dee6",
             "colorPrimary": "#1c2c3d",
             "handleBg": "#ffffff",
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "TimePicker": {
             "timeColumnWidth": 56,
@@ -564,7 +564,7 @@
             "inputFontSize": 12,
             "inputFontSizeLG": 14,
             "inputFontSizeSM": 10,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Timeline": {
             "itemPaddingBottom": 20,
@@ -588,7 +588,7 @@
             "colorBgContainer": "#ffffff",
             "tailColor": "rgba(5, 23, 41, 0.06)",
             "dotBg": "#ffffff",
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Tabs": {
             "horizontalItemGutter": 24,
@@ -636,7 +636,7 @@
             "titleFontSize": 12,
             "titleFontSizeLG": 14,
             "titleFontSizeSM": 12,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Table": {
             "stickyScrollBarBorderRadius": 100,
@@ -700,7 +700,7 @@
             "cellFontSize": 12,
             "cellFontSizeMD": 12,
             "cellFontSizeSM": 12,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Steps": {
             "dotSize": 8,
@@ -751,7 +751,7 @@
             "finishIconBorderColor": "#1677ff",
             "customIconFontSize": 24,
             "iconFontSize": 12,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Spin": {
             "dotSizeSM": 14,
@@ -767,7 +767,7 @@
             "colorPrimary": "#1c2c3d",
             "colorBgContainer": "#ffffff",
             "dotSizeLG": 28,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Slider": {
             "railSize": 4,
@@ -805,7 +805,7 @@
             "dotBorderColor": "#eaeff5",
             "dotActiveBorderColor": "#d6dee6",
             "handleColorDisabled": "#bfbfbf",
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Rate": {
             "rateStarSize": 20,
@@ -816,7 +816,7 @@
             "controlHeightLG": 34,
             "colorText": "#1c2c3d",
             "colorFillContent": "rgba(5, 23, 41, 0.06)",
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Radio": {
             "radioSize": 16,
@@ -861,7 +861,7 @@
             "buttonCheckedBgDisabled": "rgba(5, 23, 41, 0.15)",
             "buttonCheckedBg": "#ffffff",
             "buttonBg": "#ffffff",
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Popover": {
             "titleMinWidth": 177,
@@ -880,7 +880,7 @@
             "colorText": "#1c2c3d",
             "colorSplit": "rgba(5, 23, 41, 0.06)",
             "colorBgElevated": "#ffffff",
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Notification": {
             "width": 384,
@@ -908,7 +908,7 @@
             "colorBgElevated": "#ffffff",
             "lineHeightLG": 1.5714285714285714,
             "lineWidthFocus": 4,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Tooltip": {
             "paddingSM": 12,
@@ -922,7 +922,7 @@
             "colorTextLightSolid": "#ffffff",
             "colorText": "#1c2c3d",
             "colorBgSpotlight": "rgba(5, 23, 41, 0.9)",
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Menu": {
             "subMenuItemBg": "rgba(0, 0, 0, 0)",
@@ -987,7 +987,7 @@
             "iconMarginInlineEnd": 10,
             "groupTitleFontSize": 12,
             "groupTitleLineHeight": 1.6666666666666667,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "InputNumber": {
             "paddingInlineSM": 7,
@@ -1040,7 +1040,7 @@
             "inputFontSize": 12,
             "inputFontSizeLG": 14,
             "inputFontSizeSM": 10,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Image": {
             "previewOperationSize": 18,
@@ -1087,7 +1087,7 @@
             "headerFontSizeSM": 12,
             "fontHeight": 22,
             "fontSizeLG": 14,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Carousel": {
             "dotWidth": 16,
@@ -1100,7 +1100,7 @@
             "controlHeightLG": 34,
             "colorText": "#1c2c3d",
             "colorBgContainer": "#ffffff",
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Cascader": {
             "dropdownHeight": 180,
@@ -1137,7 +1137,7 @@
             "optionSelectedBg": "#f5f7fa",
             "menuPadding": 4,
             "optionSelectedFontWeight": 600,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Calendar": {
             "yearControlWidth": 80,
@@ -1180,7 +1180,7 @@
             "fullPanelBg": "#ffffff",
             "fullBg": "#ffffff",
             "fontHeightSM": 20,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Button": {
             "paddingInlineSM": 7,
@@ -1273,7 +1273,7 @@
             "textFontSizeSM": 10,
             "fontHeight": 22,
             "lineHeight": 1.6666666666666667,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Form": {
             "screenXSMax": 575,
@@ -1310,7 +1310,7 @@
             "labelColonMarginInlineStart": 2,
             "labelHeight": 28,
             "labelFontSize": 12,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Avatar": {
             "marginXXS": 4,
@@ -1334,7 +1334,7 @@
             "textFontSize": 18,
             "textFontSizeLG": 20,
             "textFontSizeSM": 12,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Tour": {
             "sizePopupArrow": 16,
@@ -1360,7 +1360,7 @@
             "closeBtnSize": 22,
             "primaryNextBtnHoverBg": "#f0f0f0",
             "primaryPrevBtnBg": "rgba(255, 255, 255, 0.15)",
-            "fontFamily": "'Inter', 'Inter'",
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'",
             "lineWidthFocus": 4
         },
         "QRCode": {
@@ -1374,7 +1374,7 @@
             "colorWhite": "#ffffff",
             "colorText": "#1c2c3d",
             "colorSplit": "rgba(5, 23, 41, 0.06)",
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Upload": {
             "paddingXS": 8,
@@ -1408,7 +1408,7 @@
             "fontHeight": 22,
             "fontHeightSM": 20,
             "lineWidthFocus": 4,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Typography": {
             "paddingSM": 12,
@@ -1440,7 +1440,7 @@
             "colorErrorHover": "#de4040",
             "colorErrorActive": "#ab0d0d",
             "colorError": "#d61010",
-            "fontFamilyCode": "'Inter', 'Inter'"
+            "fontFamilyCode": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "TreeSelect": {
             "paddingXS": 8,
@@ -1471,7 +1471,7 @@
             "titleHeight": 24,
             "nodeSelectedBg": "#f5f7fa",
             "nodeHoverBg": "rgba(5, 23, 41, 0.04)",
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Tree": {
             "paddingSM": 12,
@@ -1506,7 +1506,7 @@
             "nodeHoverBg": "rgba(5, 23, 41, 0.04)",
             "directoryNodeSelectedColor": "#ffffff",
             "directoryNodeSelectedBg": "#1c2c3d",
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Tag": {
             "paddingXXS": 4,
@@ -1539,7 +1539,7 @@
             "colorErrorBg": "#fbe7e7",
             "defaultColor": "#1c2c3d",
             "defaultBg": "rgba(5, 23, 41, 0.02)",
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Statistic": {
             "padding": 16,
@@ -1552,7 +1552,7 @@
             "colorText": "#1c2c3d",
             "contentFontSize": 20,
             "titleFontSize": 12,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Skeleton": {
             "padding": 16,
@@ -1627,7 +1627,7 @@
             "clearBg": "#ffffff",
             "optionFontSize": 12,
             "optionSelectedFontWeight": 600,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Result": {
             "paddingXS": 8,
@@ -1665,7 +1665,7 @@
             "remainingColor": "rgba(5, 23, 41, 0.06)",
             "defaultColor": "#1c2c3d",
             "circleTextColor": "#1c2c3d",
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Popconfirm": {
             "marginXXS": 4,
@@ -1726,7 +1726,7 @@
             "itemActiveColorDisabled": "#bdc7d1",
             "itemActiveBgDisabled": "rgba(5, 23, 41, 0.15)",
             "itemActiveBg": "#ffffff",
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Modal": {
             "screenSMMax": 767,
@@ -1764,7 +1764,7 @@
             "titleFontSize": 16,
             "titleLineHeight": 1.25,
             "fontHeight": 22,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Message": {
             "paddingXS": 8,
@@ -1781,7 +1781,7 @@
             "colorInfo": "#1c2c3d",
             "colorError": "#d61010",
             "contentBg": "#ffffff",
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "List": {
             "screenSM": 576,
@@ -1819,7 +1819,7 @@
             "footerBg": "rgba(0, 0, 0, 0)",
             "avatarMarginRight": 16,
             "descriptionFontSize": 12,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "FloatButton": {
             "paddingXXS": 4,
@@ -1843,7 +1843,7 @@
             "colorPrimary": "#1c2c3d",
             "colorFillContent": "rgba(5, 23, 41, 0.06)",
             "colorBgElevated": "#ffffff",
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Empty": {
             "colorTextDisabled": "#bdc7d1",
@@ -1880,7 +1880,7 @@
             "colorError": "#d61010",
             "colorBgElevated": "#ffffff",
             "paddingBlock": 5,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Drawer": {
             "paddingXS": 8,
@@ -1910,7 +1910,7 @@
             "colorText": "#1c2c3d",
             "colorSplit": "rgba(5, 23, 41, 0.06)",
             "lineHeight": 1.6666666666666667,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Descriptions": {
             "paddingXS": 8,
@@ -1936,7 +1936,7 @@
             "titleColor": "#1c2c3d",
             "labelBg": "rgba(5, 23, 41, 0.02)",
             "contentColor": "#1c2c3d",
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "DatePicker": {
             "sizePopupArrow": 16,
@@ -2037,7 +2037,7 @@
             "inputFontSizeSM": 10,
             "fontHeight": 22,
             "fontHeightLG": 24,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Collapse": {
             "paddingXXS": 4,
@@ -2063,7 +2063,7 @@
             "fontHeight": 22,
             "fontHeightLG": 24,
             "lineHeightLG": 1.5714285714285714,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Checkbox": {
             "paddingXS": 8,
@@ -2085,7 +2085,7 @@
             "colorBorder": "#bdc7d1",
             "colorBgContainerDisabled": "rgba(5, 23, 41, 0.04)",
             "colorBgContainer": "#ffffff",
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Breadcrumb": {
             "paddingXXS": 4,
@@ -2106,7 +2106,7 @@
             "separatorMargin": 8,
             "iconFontSize": 12,
             "fontHeight": 22,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Anchor": {
             "paddingXXS": 4,
@@ -2119,7 +2119,7 @@
             "colorPrimary": "#1c2c3d",
             "linkPaddingInlineStart": 16,
             "linkPaddingBlock": 4,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Alert": {
             "paddingMD": 20,
@@ -2151,7 +2151,7 @@
             "colorErrorBg": "#fbe7e7",
             "colorError": "#d61010",
             "withDescriptionIconSize": 20,
-            "fontFamily": "'Inter', 'Inter'"
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'"
         },
         "Space": {
             "paddingXS": 8,
@@ -2202,7 +2202,7 @@
             "optionActiveBg": "rgba(0, 0, 0, 0.04)",
             "optionHeight": 32,
             "optionFontSize": 12,
-            "fontFamily": "'Inter', 'Inter'",
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'",
             "fontSize": 12,
             "fontSizeIcon": 12,
             "fontSizeLG": 14,
@@ -2229,7 +2229,7 @@
             "fontSizeXL": 18
         },
         "Mentions": {
-            "fontFamily": "'Inter', 'Inter'",
+            "fontFamily": "'__Inter_36bd41', '__Inter_Fallback_36bd41'",
             "fontSize": 12,
             "lineHeight": 1.6666666666666667
         }

From 92b6ab4b2f3dbff421664e1c9ea7e29f25fa1bee Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashrafdev365@gmail.com>
Date: Mon, 21 Oct 2024 12:59:58 +0600
Subject: [PATCH 04/16] fix(lint): error

---
 agenta-web/src/components/Filters/Filters.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/agenta-web/src/components/Filters/Filters.tsx b/agenta-web/src/components/Filters/Filters.tsx
index e4cdb74d9d..28518b4784 100644
--- a/agenta-web/src/components/Filters/Filters.tsx
+++ b/agenta-web/src/components/Filters/Filters.tsx
@@ -118,7 +118,7 @@ const Filters: React.FC<Props> = ({filterValue, setFilterValue, columns}) => {
 
                     <div className={classes.filterContainer}>
                         {filter.map((item, idx) => (
-                            <Space>
+                            <Space key={idx}>
                                 <p className={`!w-[70px] text-end`}>{idx == 0 ? "Where" : "And"}</p>
 
                                 <Select

From e3737ad52bc0e72d9288e36f04e4a8da84da87dd Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashrafdev365@gmail.com>
Date: Tue, 22 Oct 2024 12:23:05 +0600
Subject: [PATCH 05/16] fix(frontend): obserbility filter component logic

---
 agenta-web/src/components/Filters/Filters.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/agenta-web/src/components/Filters/Filters.tsx b/agenta-web/src/components/Filters/Filters.tsx
index 28518b4784..dff2b4f4c5 100644
--- a/agenta-web/src/components/Filters/Filters.tsx
+++ b/agenta-web/src/components/Filters/Filters.tsx
@@ -71,7 +71,6 @@ const Filters: React.FC<Props> = ({filterValue, setFilterValue, columns}) => {
     }
 
     const onDeleteFilter = (index: number) => {
-        if (index === 0) return
         setFilter(filter.filter((_, idx) => idx !== index))
     }
 
@@ -173,7 +172,7 @@ const Filters: React.FC<Props> = ({filterValue, setFilterValue, columns}) => {
                                         />
                                     </>
                                 )}
-                                {idx > 0 && (
+                                {filter.length > 1 && (
                                     <Button
                                         type="link"
                                         icon={<Trash size={14} />}
@@ -190,7 +189,7 @@ const Filters: React.FC<Props> = ({filterValue, setFilterValue, columns}) => {
                             onClick={addNestedFilter}
                             className="mt-2"
                         >
-                            Add nested filters
+                            Add conditions
                         </Button>
                     </div>
 

From 3ba157b675ba42bfdbbb2311882af825d7fb0c3c Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashrafdev365@gmail.com>
Date: Tue, 22 Oct 2024 23:51:57 +0600
Subject: [PATCH 06/16] feat(frontend): added edit column and export data
 feature

---
 .../src/components/Filters/EditColumns.tsx    | 110 ++++++++++++
 agenta-web/src/components/Filters/Filters.tsx |  31 ++--
 agenta-web/src/components/Filters/Sort.tsx    |  30 ++--
 agenta-web/src/lib/Types.ts                   |  13 ++
 agenta-web/src/lib/helpers/utils.ts           |  61 -------
 .../apps/[app_id]/observability/index.tsx     | 157 ++++++++++++------
 6 files changed, 262 insertions(+), 140 deletions(-)
 create mode 100644 agenta-web/src/components/Filters/EditColumns.tsx

diff --git a/agenta-web/src/components/Filters/EditColumns.tsx b/agenta-web/src/components/Filters/EditColumns.tsx
new file mode 100644
index 0000000000..507f7a3c3e
--- /dev/null
+++ b/agenta-web/src/components/Filters/EditColumns.tsx
@@ -0,0 +1,110 @@
+import {Button, Dropdown, Space, Checkbox} from "antd"
+import React, {useState} from "react"
+import {createUseStyles} from "react-jss"
+import {Columns} from "@phosphor-icons/react"
+import {ColumnsType} from "antd/es/table"
+import type {MenuProps} from "antd"
+
+const useStyles = createUseStyles((theme) => ({
+    dropdownMenu: {
+        "&>.ant-dropdown-menu-item": {
+            "& .anticon-check": {
+                display: "none",
+            },
+        },
+        "&>.ant-dropdown-menu-item-selected": {
+            "&:not(:hover)": {
+                backgroundColor: "transparent !important",
+            },
+            "& .anticon-check": {
+                display: "inline-flex !important",
+            },
+        },
+    },
+    button: {
+        display: "flex",
+        alignItems: "center",
+    },
+}))
+
+interface EditColumnsProps {
+    isOpen: boolean
+    handleOpenChange: (open: boolean) => void
+    selectedKeys: string[] // Default selected column keys
+    columns: ColumnsType<any>
+    onChange: (key: string) => void
+    excludes?: string[] // Array of column keys to exclude
+    buttonText?: string
+}
+
+const EditColumns: React.FC<EditColumnsProps> = ({
+    isOpen,
+    handleOpenChange,
+    selectedKeys,
+    columns,
+    onChange,
+    excludes = [],
+    buttonText = "Edit Columns",
+}) => {
+    const classes = useStyles()
+    const [open, setOpen] = useState(isOpen)
+
+    const handleDropdownChange = (newOpen: boolean) => {
+        setOpen(newOpen)
+        if (!newOpen) handleOpenChange(newOpen) // Only trigger close action if dropdown is closing
+    }
+
+    const generateEditItems = (): MenuProps["items"] => {
+        return columns
+            .filter((col) => !excludes.includes(col.key as string))
+            .flatMap((col) => [
+                {
+                    key: col.key as React.Key,
+                    label: (
+                        <Space onClick={(e) => e.stopPropagation()}>
+                            <Checkbox
+                                value={col.key}
+                                checked={!selectedKeys.includes(col.key as string)}
+                                onChange={() => onChange(col.key as string)}
+                            />
+                            {col.title as string}
+                        </Space>
+                    ),
+                },
+                ...(("children" in col &&
+                    col.children?.map((child) => ({
+                        key: child.key as React.Key,
+                        label: (
+                            <Space className="ml-4" onClick={(e) => e.stopPropagation()}>
+                                <Checkbox
+                                    value={child.key}
+                                    checked={!selectedKeys.includes(child.key as string)} // Default to selected
+                                    onChange={() => onChange(child.key as string)}
+                                />
+                                {child.title as string}
+                            </Space>
+                        ),
+                    }))) ||
+                    []),
+            ])
+    }
+
+    return (
+        <Dropdown
+            trigger={["click"]}
+            open={open}
+            onOpenChange={handleDropdownChange}
+            menu={{
+                selectedKeys,
+                items: generateEditItems(),
+                className: classes.dropdownMenu,
+            }}
+        >
+            <Button icon={<Columns size={14} />} className={classes.button}>
+                {buttonText}
+            </Button>
+        </Dropdown>
+    )
+}
+
+export default EditColumns
diff --git a/agenta-web/src/components/Filters/Filters.tsx b/agenta-web/src/components/Filters/Filters.tsx
index dff2b4f4c5..be795bedcf 100644
--- a/agenta-web/src/components/Filters/Filters.tsx
+++ b/agenta-web/src/components/Filters/Filters.tsx
@@ -28,18 +28,16 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
 }))
 
 type Props = {
-    filterValue: Filter[]
-    setFilterValue: React.Dispatch<React.SetStateAction<Filter[]>>
     columns: {column: string; mapping: string}[]
+    onApplyFilter: (filters: Filter[]) => void
+    onClearFilter: (filters: Filter[]) => void
 }
 
-const Filters: React.FC<Props> = ({filterValue, setFilterValue, columns}) => {
+const Filters: React.FC<Props> = ({columns, onApplyFilter, onClearFilter}) => {
     const classes = useStyles()
     const emptyFilter = [{condition: "", column: "", keyword: ""}] as Filter[]
 
-    const [filter, setFilter] = useState<Filter[]>(() =>
-        filterValue.length > 0 ? filterValue : emptyFilter,
-    )
+    const [filter, setFilter] = useState<Filter[]>(emptyFilter)
     const [isFilterOpen, setIsFilterOpen] = useState(false)
 
     const conditions = [
@@ -80,7 +78,7 @@ const Filters: React.FC<Props> = ({filterValue, setFilterValue, columns}) => {
 
     const clearFilter = () => {
         setFilter(emptyFilter)
-        setFilterValue(emptyFilter)
+        onClearFilter(emptyFilter)
     }
 
     const applyFilter = () => {
@@ -88,7 +86,7 @@ const Filters: React.FC<Props> = ({filterValue, setFilterValue, columns}) => {
             ({column, condition, keyword}) => column && condition && keyword,
         )
 
-        setFilterValue(sanitizedFilters)
+        onApplyFilter(sanitizedFilters)
         setIsFilterOpen(false)
     }
 
@@ -129,12 +127,10 @@ const Filters: React.FC<Props> = ({filterValue, setFilterValue, columns}) => {
                                         onFilterChange({columnName: "column", value, idx})
                                     }
                                     value={item.column}
-                                    options={columns.map((col) => {
-                                        return {
-                                            value: col.mapping,
-                                            label: col.column,
-                                        }
-                                    })}
+                                    options={columns.map((col) => ({
+                                        value: col.mapping,
+                                        label: col.column,
+                                    }))}
                                 />
                                 {item.column && (
                                     <>
@@ -153,9 +149,10 @@ const Filters: React.FC<Props> = ({filterValue, setFilterValue, columns}) => {
                                             }
                                             popupMatchSelectWidth={250}
                                             value={item.condition}
-                                            options={conditions.map((con) => {
-                                                return {value: con, label: con}
-                                            })}
+                                            options={conditions.map((con) => ({
+                                                value: con,
+                                                label: con,
+                                            }))}
                                         />
 
                                         <Input
diff --git a/agenta-web/src/components/Filters/Sort.tsx b/agenta-web/src/components/Filters/Sort.tsx
index bf3e0e897d..8b0c8a0faf 100644
--- a/agenta-web/src/components/Filters/Sort.tsx
+++ b/agenta-web/src/components/Filters/Sort.tsx
@@ -1,27 +1,35 @@
-import React from "react"
+import React, {useState} from "react"
 import {Hourglass} from "@phosphor-icons/react"
 import {Select} from "antd"
+import {SortTypes} from "@/lib/Types"
 
 type Props = {
-    setSort: React.Dispatch<React.SetStateAction<string>>
-    sort?: string
+    onSortApply: (sort: SortTypes) => void
+    defaultSortValue: SortTypes
 }
 
-const Sort: React.FC<Props> = ({setSort, sort}) => {
+const Sort: React.FC<Props> = ({onSortApply, defaultSortValue}) => {
+    const [sort, setSort] = useState<SortTypes>(defaultSortValue)
+
     return (
         <Select
             style={{width: 120}}
             suffixIcon={null}
             value={sort}
-            onChange={(value) => setSort(value)}
-            placeholder={
-                <div className="flex items-center justify-center gap-2">
-                    <Hourglass size={14} /> Sort by time
-                </div>
-            }
+            onChange={(value) => {
+                setSort(value)
+                onSortApply(value)
+            }}
             labelRender={(value) => (
                 <div className="flex items-center justify-center gap-2">
-                    <Hourglass size={14} /> {sort !== "all time" && "Last"} {value.value}
+                    <Hourglass size={14} />{" "}
+                    {sort ? (
+                        <>
+                            {sort !== "all time" && "Last"} {value.value}
+                        </>
+                    ) : (
+                        "Sort by Date"
+                    )}
                 </div>
             )}
             options={[
diff --git a/agenta-web/src/lib/Types.ts b/agenta-web/src/lib/Types.ts
index d381d2ad6b..74afe389e6 100644
--- a/agenta-web/src/lib/Types.ts
+++ b/agenta-web/src/lib/Types.ts
@@ -682,3 +682,16 @@ export type FilterConditions =
     | ">="
     | "<="
     | ""
+
+export type SortTypes =
+    | "30 mins"
+    | "1 hour"
+    | "6 hour"
+    | "24 hour"
+    | "3 days"
+    | "7 days"
+    | "14 days"
+    | "1 month"
+    | "3 month"
+    | "all time"
+    | ""
diff --git a/agenta-web/src/lib/helpers/utils.ts b/agenta-web/src/lib/helpers/utils.ts
index 7c83073551..d89dee399a 100644
--- a/agenta-web/src/lib/helpers/utils.ts
+++ b/agenta-web/src/lib/helpers/utils.ts
@@ -359,64 +359,3 @@ export const filterVariantParameters = ({
 export const formatVariantIdWithHash = (variantId: string) => {
     return `# ${variantId.split("-")[0]}`
 }
-
-export const getTimeRangeUnit = (time: string): {duration: number; unit: dayjs.ManipulateType} => {
-    const timeRanges: {[key: string]: {duration: number; unit: dayjs.ManipulateType}} = {
-        "30 mins": {duration: 30, unit: "minute"},
-        "1 hour": {duration: 1, unit: "hour"},
-        "6 hour": {duration: 6, unit: "hour"},
-        "24 hour": {duration: 24, unit: "hour"},
-        "3 days": {duration: 3, unit: "day"},
-        "7 days": {duration: 7, unit: "day"},
-        "14 days": {duration: 14, unit: "day"},
-        "1 month": {duration: 1, unit: "month"},
-        "3 month": {duration: 3, unit: "month"},
-    }
-
-    return timeRanges[time] || {duration: Infinity, unit: "year"}
-}
-
-export const getNestedProperties = (obj: any, path: string) => {
-    return path.split(".").reduce((acc, key) => acc && acc[key], obj)
-}
-
-export const matcheFilterCriteria = ({
-    data,
-    condition,
-    keyword,
-}: {
-    data: any
-    condition: FilterConditions
-    keyword: string | number
-}) => {
-    if (data === undefined) return false
-    const value = String(data).toLowerCase()
-    const key = String(keyword).toLowerCase()
-
-    switch (condition) {
-        case "contains":
-            return value.includes(key)
-        case "does not contain":
-            return !value.includes(key)
-        case "starts with":
-            return value.startsWith(key)
-        case "ends with":
-            return value.endsWith(key)
-        case "exists":
-            return data !== undefined
-        case "does not exist":
-            return data === undefined
-        case "=":
-            return typeof data == "number" ? Number(data) == Number(key) : value == key
-        case ">":
-            return Number(data) > Number(key)
-        case "<":
-            return Number(data) < Number(key)
-        case ">=":
-            return Number(data) >= Number(key)
-        case "<=":
-            return Number(data) <= Number(key)
-        default:
-            return false
-    }
-}
diff --git a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
index e3106e191e..a7b0ff9ba5 100644
--- a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
@@ -6,19 +6,22 @@ import TraceHeader from "@/components/pages/observability/drawer/TraceHeader"
 import TraceTree from "@/components/pages/observability/drawer/TraceTree"
 import Filters from "@/components/Filters/Filters"
 import Sort from "@/components/Filters/Sort"
+import EditColumns from "@/components/Filters/EditColumns"
 import ResultTag from "@/components/ResultTag/ResultTag"
 import {useQueryParam} from "@/hooks/useQuery"
 import {formatCurrency, formatLatency, formatTokenUsage} from "@/lib/helpers/formatters"
 import {getNodeById} from "@/lib/helpers/observability_helpers"
 import {useTraces} from "@/lib/hooks/useTraces"
-import {Filter, JSSTheme} from "@/lib/Types"
+import {Filter, JSSTheme, SortTypes} from "@/lib/Types"
 import {_AgentaRootsResponse} from "@/services/observability/types"
-import {Radio, RadioChangeEvent, Space, Table, Typography} from "antd"
+import {Button, Radio, RadioChangeEvent, Space, Table, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import dayjs from "dayjs"
 import React, {useEffect, useMemo, useState} from "react"
 import {createUseStyles} from "react-jss"
-import {getNestedProperties, getTimeRangeUnit, matcheFilterCriteria} from "@/lib/helpers/utils"
+import {Export} from "@phosphor-icons/react"
+import {getAppValues} from "@/contexts/app.context"
+import {convertToCsv, downloadCsv} from "@/lib/helpers/fileManipulations"
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     title: {
@@ -33,10 +36,10 @@ interface Props {}
 const ObservabilityDashboard = ({}: Props) => {
     const classes = useStyles()
     const [selectedTraceId, setSelectedTraceId] = useQueryParam("trace", "")
-    const [searchTerm, setSearchTerm] = useState("")
-    const [filterTrace, setFilterTrace] = useState<Filter[]>([] as Filter[])
-    const [sortTrace, setSortTrace] = useState("14 days")
     const [traceTabs, setTraceTabs] = useState("root calls")
+    const [editColumns, setEditColumns] = useState<string[]>([])
+    const [isExportLoading, setIsExportLoading] = useState(false)
+    const [isFilterColsDropdownOpen, setIsFilterColsDropdownOpen] = useState(false)
     const {traces} = useTraces()
 
     const filterColumns = [
@@ -71,36 +74,6 @@ const ObservabilityDashboard = ({}: Props) => {
         setTraceTabs(e.target.value)
     }
 
-    const filteredTrace = useMemo(() => {
-        let filtered = traces
-
-        if (filterTrace[0]?.keyword) {
-            filterTrace.map((item) => {
-                const {column, condition, keyword} = item
-                filtered = filtered?.filter((trace) => {
-                    const propertyValue = getNestedProperties(trace, column)
-                    return matcheFilterCriteria({data: propertyValue, condition, keyword})
-                })
-            })
-        }
-
-        if (sortTrace) {
-            const now = dayjs()
-            const {duration, unit} = getTimeRangeUnit(sortTrace)
-
-            if (duration === Infinity) {
-                return filtered
-            }
-
-            filtered = filtered?.filter((item) => {
-                const itemDate = dayjs(item.lifecycle.created_at)
-                return itemDate.isAfter(now.subtract(duration, unit))
-            })
-        }
-
-        return filtered
-    }, [traces, sortTrace, filterTrace])
-
     const columns: ColumnsType<_AgentaRootsResponse> = [
         {
             title: "ID",
@@ -190,29 +163,111 @@ const ObservabilityDashboard = ({}: Props) => {
         },
     ]
 
+    const onExport = async () => {
+        try {
+            setIsExportLoading(true)
+
+            if (traces.length) {
+                const {currentApp} = getAppValues()
+                const filename = `${currentApp?.app_name}_observability.csv`
+
+                // Helper function to create a trace object
+                const createTraceObject = (trace: any) => ({
+                    "Trace ID": trace.key,
+                    Timestamp: dayjs(trace.time.start).format("HH:mm:ss DD MMM YYYY"),
+                    Inputs: trace?.data?.inputs?.topic || "N/A",
+                    Outputs: JSON.stringify(trace?.data?.outputs) || "N/A",
+                    Status: trace.status.code,
+                    Latency: formatLatency(trace.time.span / 1000000),
+                    Usage: formatTokenUsage(trace?.metrics?.acc?.tokens?.total || 0),
+                    "Total cost": formatCurrency(trace?.metrics?.acc?.costs?.total || 0),
+                    "Span ID": trace.node.id,
+                    "Span Type": trace.node.type || "N/A",
+                })
+
+                const csvData = convertToCsv(
+                    traces.flatMap((trace) => {
+                        const parentTrace = createTraceObject(trace)
+                        const childrenTraces = trace.children.map(createTraceObject)
+                        return [parentTrace, ...childrenTraces]
+                    }),
+                    [
+                        ...columns.map((col) =>
+                            col.title === "ID" ? "Trace ID" : (col.title as string),
+                        ),
+                        "Span ID",
+                        "Span Type",
+                    ],
+                )
+
+                downloadCsv(csvData, filename)
+            }
+        } catch (error) {
+            console.error("Export error:", error)
+        } finally {
+            setIsExportLoading(false)
+        }
+    }
+
+    const onFilterApply = (filter: Filter[]) => {}
+
+    const onClearFilter = async (filter: Filter[]) => {}
+
+    const onSortApply = (sortData: SortTypes) => {}
+
+    const handleToggleColumnVisibility = (key: string) => {
+        setEditColumns((prev) =>
+            prev.includes(key) ? prev.filter((item) => item !== key) : [...prev, key],
+        )
+    }
+
     return (
         <div className="flex flex-col gap-6">
             <Typography.Text className={classes.title}>Observability</Typography.Text>
 
             {traces?.length ? (
                 <section className="flex flex-col gap-2">
-                    <Space>
-                        <Filters
-                            filterValue={filterTrace}
-                            setFilterValue={setFilterTrace}
-                            columns={filterColumns}
-                        />
-                        <Sort setSort={setSortTrace} sort={sortTrace} />
+                    <div className="flex items-center justify-between">
+                        <Space>
+                            <Filters
+                                columns={filterColumns}
+                                onApplyFilter={onFilterApply}
+                                onClearFilter={onClearFilter}
+                            />
+                            <Sort onSortApply={onSortApply} defaultSortValue="" />
+
+                            <Radio.Group value={traceTabs} onChange={onTraceTabChange}>
+                                <Radio.Button value="root calls">Root calls</Radio.Button>
+                                <Radio.Button value="generations">Generation</Radio.Button>
+                                <Radio.Button value="all runs">All runs</Radio.Button>
+                            </Radio.Group>
+                        </Space>
+                        <Space>
+                            <Button
+                                type="text"
+                                onClick={onExport}
+                                icon={<Export size={14} className="mt-0.5" />}
+                                disabled={traces.length === 0}
+                                loading={isExportLoading}
+                            >
+                                Export as CSV
+                            </Button>
+                            <EditColumns
+                                isOpen={isFilterColsDropdownOpen}
+                                handleOpenChange={setIsFilterColsDropdownOpen}
+                                selectedKeys={editColumns}
+                                columns={columns}
+                                onChange={handleToggleColumnVisibility}
+                            />
+                        </Space>
+                    </div>
 
-                        <Radio.Group value={traceTabs} onChange={onTraceTabChange}>
-                            <Radio.Button value="root calls">Root calls</Radio.Button>
-                            <Radio.Button value="generations">Generation</Radio.Button>
-                            <Radio.Button value="all runs">All runs</Radio.Button>
-                        </Radio.Group>
-                    </Space>
                     <Table
-                        columns={columns}
-                        dataSource={filteredTrace}
+                        columns={columns.map((col) => ({
+                            ...col,
+                            hidden: editColumns.includes(col.key as string),
+                        }))}
+                        dataSource={traces}
                         bordered
                         style={{cursor: "pointer"}}
                         onRow={(record) => ({

From 54dab926b01c24da64400fd1baf61cdfdc8bfab9 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashrafdev365@gmail.com>
Date: Wed, 23 Oct 2024 14:54:10 +0600
Subject: [PATCH 07/16] enhance(frontend): added search query filter

---
 .../src/components/Filters/EditColumns.tsx    |  8 +--
 agenta-web/src/lib/helpers/utils.ts           |  2 +-
 .../apps/[app_id]/observability/index.tsx     | 58 +++++++++++--------
 3 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/agenta-web/src/components/Filters/EditColumns.tsx b/agenta-web/src/components/Filters/EditColumns.tsx
index 507f7a3c3e..2e4eb894e6 100644
--- a/agenta-web/src/components/Filters/EditColumns.tsx
+++ b/agenta-web/src/components/Filters/EditColumns.tsx
@@ -1,5 +1,5 @@
-import {Button, Dropdown, Space, Checkbox} from "antd"
 import React, {useState} from "react"
+import {Button, Dropdown, Space, Checkbox} from "antd"
 import {createUseStyles} from "react-jss"
 import {Columns} from "@phosphor-icons/react"
 import {ColumnsType} from "antd/es/table"
@@ -30,7 +30,7 @@ const useStyles = createUseStyles((theme) => ({
 interface EditColumnsProps {
     isOpen: boolean
     handleOpenChange: (open: boolean) => void
-    selectedKeys: string[] // Default selected column keys
+    selectedKeys: string[]
     columns: ColumnsType<any>
     onChange: (key: string) => void
     excludes?: string[] // Array of column keys to exclude
@@ -51,7 +51,7 @@ const EditColumns: React.FC<EditColumnsProps> = ({
 
     const handleDropdownChange = (newOpen: boolean) => {
         setOpen(newOpen)
-        if (!newOpen) handleOpenChange(newOpen) // Only trigger close action if dropdown is closing
+        if (!newOpen) handleOpenChange(newOpen)
     }
 
     const generateEditItems = (): MenuProps["items"] => {
@@ -78,7 +78,7 @@ const EditColumns: React.FC<EditColumnsProps> = ({
                             <Space className="ml-4" onClick={(e) => e.stopPropagation()}>
                                 <Checkbox
                                     value={child.key}
-                                    checked={!selectedKeys.includes(child.key as string)} // Default to selected
+                                    checked={!selectedKeys.includes(child.key as string)}
                                     onChange={() => onChange(child.key as string)}
                                 />
                                 {child.title as string}
diff --git a/agenta-web/src/lib/helpers/utils.ts b/agenta-web/src/lib/helpers/utils.ts
index d89dee399a..01fac1df35 100644
--- a/agenta-web/src/lib/helpers/utils.ts
+++ b/agenta-web/src/lib/helpers/utils.ts
@@ -1,6 +1,6 @@
 import {v4 as uuidv4} from "uuid"
 import {EvaluationType} from "../enums"
-import {FilterConditions, GenericObject} from "../Types"
+import {GenericObject} from "../Types"
 import promiseRetry from "promise-retry"
 import {getErrorMessage} from "./errorHandler"
 import dayjs from "dayjs"
diff --git a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
index a7b0ff9ba5..368ee38e9c 100644
--- a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
@@ -14,7 +14,7 @@ import {getNodeById} from "@/lib/helpers/observability_helpers"
 import {useTraces} from "@/lib/hooks/useTraces"
 import {Filter, JSSTheme, SortTypes} from "@/lib/Types"
 import {_AgentaRootsResponse} from "@/services/observability/types"
-import {Button, Radio, RadioChangeEvent, Space, Table, Typography} from "antd"
+import {Button, Input, Radio, RadioChangeEvent, Space, Table, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import dayjs from "dayjs"
 import React, {useEffect, useMemo, useState} from "react"
@@ -36,6 +36,7 @@ interface Props {}
 const ObservabilityDashboard = ({}: Props) => {
     const classes = useStyles()
     const [selectedTraceId, setSelectedTraceId] = useQueryParam("trace", "")
+    const [searchQuery, setSearchQuery] = useState("")
     const [traceTabs, setTraceTabs] = useState("root calls")
     const [editColumns, setEditColumns] = useState<string[]>([])
     const [isExportLoading, setIsExportLoading] = useState(false)
@@ -215,6 +216,8 @@ const ObservabilityDashboard = ({}: Props) => {
 
     const onSortApply = (sortData: SortTypes) => {}
 
+    const onSearchQueryAppy = async () => {}
+
     const handleToggleColumnVisibility = (key: string) => {
         setEditColumns((prev) =>
             prev.includes(key) ? prev.filter((item) => item !== key) : [...prev, key],
@@ -227,39 +230,48 @@ const ObservabilityDashboard = ({}: Props) => {
 
             {traces?.length ? (
                 <section className="flex flex-col gap-2">
-                    <div className="flex items-center justify-between">
+                    <div className="flex justify-between gap-2 flex-col 2xl:flex-row 2xl:items-center">
                         <Space>
+                            <Input.Search
+                                placeholder="Search"
+                                value={searchQuery}
+                                onChange={(e) => setSearchQuery(e.target.value)}
+                                onPressEnter={onSearchQueryAppy}
+                                className="w-[320px]"
+                                allowClear
+                            />
                             <Filters
                                 columns={filterColumns}
                                 onApplyFilter={onFilterApply}
                                 onClearFilter={onClearFilter}
                             />
-                            <Sort onSortApply={onSortApply} defaultSortValue="" />
-
+                            <Sort onSortApply={onSortApply} defaultSortValue="1 month" />
+                        </Space>
+                        <div className="w-full flex items-center justify-between">
                             <Radio.Group value={traceTabs} onChange={onTraceTabChange}>
                                 <Radio.Button value="root calls">Root calls</Radio.Button>
                                 <Radio.Button value="generations">Generation</Radio.Button>
                                 <Radio.Button value="all runs">All runs</Radio.Button>
                             </Radio.Group>
-                        </Space>
-                        <Space>
-                            <Button
-                                type="text"
-                                onClick={onExport}
-                                icon={<Export size={14} className="mt-0.5" />}
-                                disabled={traces.length === 0}
-                                loading={isExportLoading}
-                            >
-                                Export as CSV
-                            </Button>
-                            <EditColumns
-                                isOpen={isFilterColsDropdownOpen}
-                                handleOpenChange={setIsFilterColsDropdownOpen}
-                                selectedKeys={editColumns}
-                                columns={columns}
-                                onChange={handleToggleColumnVisibility}
-                            />
-                        </Space>
+                            <Space>
+                                <Button
+                                    type="text"
+                                    onClick={onExport}
+                                    icon={<Export size={14} className="mt-0.5" />}
+                                    disabled={traces.length === 0}
+                                    loading={isExportLoading}
+                                >
+                                    Export as CSV
+                                </Button>
+                                <EditColumns
+                                    isOpen={isFilterColsDropdownOpen}
+                                    handleOpenChange={setIsFilterColsDropdownOpen}
+                                    selectedKeys={editColumns}
+                                    columns={columns}
+                                    onChange={handleToggleColumnVisibility}
+                                />
+                            </Space>
+                        </div>
                     </div>
 
                     <Table

From 112e46411cd8429d7549fbc07edcf782f71f35ad Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashrafdev365@gmail.com>
Date: Fri, 25 Oct 2024 15:43:07 +0600
Subject: [PATCH 08/16] enhance(frontnd): made series of changes: - Implemented
 advance sorting - improved filtering functionalities - synchronized filter
 component with search and group buttons

---
 agenta-web/src/components/Filters/Filters.tsx | 107 +++++---
 agenta-web/src/components/Filters/Sort.tsx    | 245 +++++++++++++++---
 agenta-web/src/lib/Types.ts                   |  29 ++-
 .../apps/[app_id]/observability/index.tsx     | 210 +++++++++++++--
 4 files changed, 487 insertions(+), 104 deletions(-)

diff --git a/agenta-web/src/components/Filters/Filters.tsx b/agenta-web/src/components/Filters/Filters.tsx
index be795bedcf..7e30dcc48b 100644
--- a/agenta-web/src/components/Filters/Filters.tsx
+++ b/agenta-web/src/components/Filters/Filters.tsx
@@ -3,6 +3,7 @@ import {Filter, JSSTheme} from "@/lib/Types"
 import {ArrowCounterClockwise, CaretDown, Funnel, Plus, Trash, X} from "@phosphor-icons/react"
 import {Button, Divider, Input, Popover, Select, Space, Typography} from "antd"
 import {createUseStyles} from "react-jss"
+import {useUpdateEffect} from "usehooks-ts"
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     popover: {
@@ -28,32 +29,54 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
 }))
 
 type Props = {
-    columns: {column: string; mapping: string}[]
+    filterData?: Filter[]
+    setFilterData?: React.Dispatch<React.SetStateAction<Filter[]>>
+    columns: {value: string; label: string}[]
     onApplyFilter: (filters: Filter[]) => void
     onClearFilter: (filters: Filter[]) => void
 }
 
-const Filters: React.FC<Props> = ({columns, onApplyFilter, onClearFilter}) => {
+const Filters: React.FC<Props> = ({
+    filterData,
+    setFilterData,
+    columns,
+    onApplyFilter,
+    onClearFilter,
+}) => {
     const classes = useStyles()
-    const emptyFilter = [{condition: "", column: "", keyword: ""}] as Filter[]
+    const emptyFilter = [{key: "", operator: "", value: ""}] as Filter[]
 
     const [filter, setFilter] = useState<Filter[]>(emptyFilter)
     const [isFilterOpen, setIsFilterOpen] = useState(false)
 
-    const conditions = [
-        "contains",
-        "does not contain",
-        "starts with",
-        "ends with",
-        "exists",
-        "does not exist",
-        "=",
-        ">",
-        "<",
-        ">=",
-        "<=",
+    useUpdateEffect(() => {
+        if (filterData && filterData.length > 0) {
+            setFilter(filterData)
+        } else {
+            setFilter(emptyFilter)
+        }
+    }, [filterData])
+
+    const operators = [
+        {value: "contains", lable: "contains"},
+        {value: "matches", lable: "matches"},
+        {value: "like", lable: "like"},
+        {value: "startswith", lable: "startswith"},
+        {value: "endswith", lable: "endswith"},
+        {value: "exists", lable: "exists"},
+        {value: "not_exists", lable: "not exists"},
+        {value: "eq", lable: "="},
+        {value: "neq", lable: "!="},
+        {value: "gt", lable: ">"},
+        {value: "lt", lable: "<"},
+        {value: "gte", lable: ">="},
+        {value: "lte", lable: "<="},
     ]
 
+    const filteredOptions = columns.filter(
+        (col) => !filter.some((item, i) => item.key === col.value),
+    )
+
     const onFilterChange = ({
         columnName,
         value,
@@ -73,7 +96,7 @@ const Filters: React.FC<Props> = ({columns, onApplyFilter, onClearFilter}) => {
     }
 
     const addNestedFilter = () => {
-        setFilter([...filter, {column: "", condition: "", keyword: ""}])
+        setFilter([...filter, {key: "", operator: "", value: ""}])
     }
 
     const clearFilter = () => {
@@ -82,9 +105,7 @@ const Filters: React.FC<Props> = ({columns, onApplyFilter, onClearFilter}) => {
     }
 
     const applyFilter = () => {
-        const sanitizedFilters = filter.filter(
-            ({column, condition, keyword}) => column && condition && keyword,
-        )
+        const sanitizedFilters = filter.filter(({key, operator}) => key && operator)
 
         onApplyFilter(sanitizedFilters)
         setIsFilterOpen(false)
@@ -116,52 +137,58 @@ const Filters: React.FC<Props> = ({columns, onApplyFilter, onClearFilter}) => {
                     <div className={classes.filterContainer}>
                         {filter.map((item, idx) => (
                             <Space key={idx}>
-                                <p className={`!w-[70px] text-end`}>{idx == 0 ? "Where" : "And"}</p>
+                                <p className={`w-[60px] text-end`}>{idx == 0 ? "Where" : "And"}</p>
 
                                 <Select
+                                    showSearch
                                     labelRender={(label) => (!label.value ? "Column" : label.label)}
-                                    style={{width: 88}}
-                                    popupMatchSelectWidth={120}
+                                    style={{width: 100}}
+                                    popupMatchSelectWidth={150}
                                     suffixIcon={<CaretDown size={14} />}
                                     onChange={(value) =>
-                                        onFilterChange({columnName: "column", value, idx})
+                                        onFilterChange({columnName: "key", value, idx})
+                                    }
+                                    filterOption={(input, option) =>
+                                        (option?.label ?? "")
+                                            .toLowerCase()
+                                            .includes(input.toLowerCase())
                                     }
-                                    value={item.column}
-                                    options={columns.map((col) => ({
-                                        value: col.mapping,
-                                        label: col.column,
+                                    value={item.key}
+                                    options={filteredOptions.map((col) => ({
+                                        value: col.value,
+                                        label: col.label,
                                     }))}
                                 />
-                                {item.column && (
+                                {item.key && (
                                     <>
                                         <Select
                                             labelRender={(label) =>
-                                                !label.value ? "Condition" : label.value
+                                                !label.value ? "Condition" : label.label
                                             }
                                             style={{width: 95}}
                                             suffixIcon={<CaretDown size={14} />}
                                             onChange={(value) =>
                                                 onFilterChange({
-                                                    columnName: "condition",
+                                                    columnName: "operator",
                                                     value,
                                                     idx,
                                                 })
                                             }
-                                            popupMatchSelectWidth={250}
-                                            value={item.condition}
-                                            options={conditions.map((con) => ({
-                                                value: con,
-                                                label: con,
+                                            popupMatchSelectWidth={100}
+                                            value={item.operator}
+                                            options={operators.map((operator) => ({
+                                                value: operator.value,
+                                                label: operator.lable,
                                             }))}
                                         />
 
                                         <Input
                                             placeholder="Keyword"
-                                            className="w-[275px]"
-                                            value={item.keyword}
+                                            className="w-[270px]"
+                                            value={item.value}
                                             onChange={(e) =>
                                                 onFilterChange({
-                                                    columnName: "keyword",
+                                                    columnName: "value",
                                                     value: e.target.value,
                                                     idx,
                                                 })
@@ -191,7 +218,7 @@ const Filters: React.FC<Props> = ({columns, onApplyFilter, onClearFilter}) => {
                     </div>
 
                     <div className="flex items-center justify-end mt-2">
-                        <Button type="primary" disabled={!filter[0]?.keyword} onClick={applyFilter}>
+                        <Button type="primary" disabled={!filter[0]?.value} onClick={applyFilter}>
                             Apply
                         </Button>
                     </div>
@@ -203,7 +230,7 @@ const Filters: React.FC<Props> = ({columns, onApplyFilter, onClearFilter}) => {
                 onClick={() => setIsFilterOpen(true)}
                 className="flex items-center gap-2"
             >
-                Filters {filter[0]?.keyword && <X size={14} />}
+                Filters {filter[0]?.value && <X size={14} />}
             </Button>
         </Popover>
     )
diff --git a/agenta-web/src/components/Filters/Sort.tsx b/agenta-web/src/components/Filters/Sort.tsx
index 8b0c8a0faf..6e80c6abab 100644
--- a/agenta-web/src/components/Filters/Sort.tsx
+++ b/agenta-web/src/components/Filters/Sort.tsx
@@ -1,50 +1,233 @@
 import React, {useState} from "react"
-import {Hourglass} from "@phosphor-icons/react"
-import {Select} from "antd"
-import {SortTypes} from "@/lib/Types"
+import {CaretRight, Clock, Hourglass} from "@phosphor-icons/react"
+import {DatePicker, Button, Typography, Divider, Popover} from "antd"
+import {JSSTheme, SortTypes} from "@/lib/Types"
+import {Dayjs} from "dayjs"
+import type {SelectProps} from "antd"
+import {createUseStyles} from "react-jss"
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    title: {
+        fontSize: theme.fontSizeLG,
+        fontWeight: theme.fontWeightMedium,
+        padding: theme.paddingXS,
+    },
+    customDateContainer: {
+        flex: 1,
+        padding: theme.paddingXS,
+        gap: 16,
+        display: "flex",
+        flexDirection: "column",
+    },
+    popover: {
+        "& .ant-popover-inner": {
+            transition: "width 0.3s ease",
+            padding: 4,
+        },
+    },
+    popupItems: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: `5px ${theme.paddingContentHorizontal}px`,
+        gap: theme.marginXS,
+        borderRadius: theme.borderRadiusSM,
+        cursor: "pointer",
+        "&:hover": {
+            backgroundColor: theme.controlItemBgActive,
+        },
+    },
+    popupSelectedItem: {
+        backgroundColor: theme.controlItemBgActive,
+    },
+}))
 
 type Props = {
-    onSortApply: (sort: SortTypes) => void
+    onSortApply: ({
+        sortData,
+        customSortData,
+    }: {
+        sortData: SortTypes
+        customSortData?: CustomTimeRange
+    }) => void
     defaultSortValue: SortTypes
 }
+export type CustomTimeRange = {
+    startTime: Dayjs | null
+    endTime: Dayjs | null
+}
 
 const Sort: React.FC<Props> = ({onSortApply, defaultSortValue}) => {
+    const classes = useStyles()
+
     const [sort, setSort] = useState<SortTypes>(defaultSortValue)
+    const [customTime, setCustomTime] = useState<CustomTimeRange>({startTime: null, endTime: null})
+    const [dropdownVisible, setDropdownVisible] = useState(false)
+    const [customOptionSelected, setCustomOptionSelected] = useState(
+        customTime.startTime == null ? false : true,
+    )
+
+    const handleApplyCustomRange = () => {
+        if (customTime.startTime && customTime.endTime) {
+            onSortApply({sortData: sort, customSortData: customTime})
+            setDropdownVisible(false)
+        }
+    }
+
+    const options: SelectProps["options"] = [
+        {value: "30 minutes", label: "30 mins"},
+        {value: "1 hour", label: "1 hour"},
+        {value: "6 hours", label: "6 hours"},
+        {value: "24 hours", label: "24 hours"},
+        {value: "3 days", label: "3 days"},
+        {value: "7 days", label: "7 days"},
+        {value: "14 days", label: "14 days"},
+        {value: "1 month", label: "1 month"},
+        {value: "3 months", label: "3 months"},
+        {value: "all time", label: "All time"},
+    ]
 
     return (
-        <Select
-            style={{width: 120}}
-            suffixIcon={null}
-            value={sort}
-            onChange={(value) => {
-                setSort(value)
-                onSortApply(value)
-            }}
-            labelRender={(value) => (
-                <div className="flex items-center justify-center gap-2">
-                    <Hourglass size={14} />{" "}
+        <>
+            <Popover
+                title={null}
+                trigger="click"
+                overlayClassName={`${classes.popover} ${customOptionSelected ? "!w-[536px]" : "!w-[256px]"} h-[345px]`}
+                arrow={false}
+                afterOpenChange={() => {
+                    if (sort == "custom" && customTime.startTime == null) {
+                        setSort(defaultSortValue)
+                        setCustomOptionSelected(false)
+                    }
+                }}
+                onOpenChange={() => setDropdownVisible(false)}
+                open={dropdownVisible}
+                placement="bottomLeft"
+                content={
+                    <section className="flex gap-2">
+                        <div className="flex-1">
+                            <div>
+                                {options.map((item) => (
+                                    <div
+                                        key={item.value}
+                                        onClick={() => {
+                                            setCustomOptionSelected(false)
+                                            setDropdownVisible(false)
+                                            setSort(item.value as SortTypes)
+                                            onSortApply({sortData: item.value as SortTypes})
+                                        }}
+                                        className={`${classes.popupItems} ${sort === item.value && classes.popupSelectedItem}`}
+                                    >
+                                        {item.label}
+                                    </div>
+                                ))}
+
+                                <div className="-ml-1 -mr-1.5">
+                                    <Divider className="!my-1" />
+                                </div>
+
+                                <div
+                                    className={`${classes.popupItems} ${sort === "custom" && classes.popupSelectedItem}`}
+                                    onClick={() => {
+                                        setCustomOptionSelected(true)
+                                        setSort("custom")
+                                    }}
+                                >
+                                    <Typography.Text className="flex items-center gap-2">
+                                        <Clock size={12} /> Define start and end time
+                                    </Typography.Text>
+                                    <CaretRight size={12} />
+                                </div>
+                            </div>
+                        </div>
+
+                        {customOptionSelected && (
+                            <>
+                                <Divider className="!m-0 !h-[340px]" type="vertical" />
+
+                                <div className="flex-1 flex flex-col justify-between">
+                                    <div>
+                                        <Typography.Text className={classes.title}>
+                                            Start and end time
+                                        </Typography.Text>
+
+                                        <div className={classes.customDateContainer}>
+                                            <div className="w-full flex flex-col gap-1">
+                                                <Typography.Text>Start time</Typography.Text>
+                                                <DatePicker
+                                                    showTime
+                                                    value={customTime.startTime}
+                                                    onChange={(date) =>
+                                                        setCustomTime({
+                                                            ...customTime,
+                                                            startTime: date,
+                                                        })
+                                                    }
+                                                    style={{width: "100%"}}
+                                                />
+                                            </div>
+
+                                            <div className="w-full flex flex-col gap-1">
+                                                <Typography.Text>End time</Typography.Text>
+                                                <DatePicker
+                                                    showTime
+                                                    value={customTime.endTime}
+                                                    onChange={(date) =>
+                                                        setCustomTime({
+                                                            ...customTime,
+                                                            endTime: date,
+                                                        })
+                                                    }
+                                                    style={{width: "100%"}}
+                                                />
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div className="flex items-center justify-end gap-2 p-1">
+                                        <Button
+                                            onClick={() => {
+                                                setDropdownVisible(false)
+                                                setCustomTime({startTime: null, endTime: null})
+                                            }}
+                                        >
+                                            Cancel
+                                        </Button>
+                                        <Button
+                                            type="primary"
+                                            onClick={handleApplyCustomRange}
+                                            disabled={!customTime.startTime || !customTime.endTime}
+                                        >
+                                            Apply
+                                        </Button>
+                                    </div>
+                                </div>
+                            </>
+                        )}
+                    </section>
+                }
+            >
+                <Button
+                    icon={<Hourglass size={14} />}
+                    onClick={() => setDropdownVisible(true)}
+                    className="flex items-center gap-2"
+                >
                     {sort ? (
                         <>
-                            {sort !== "all time" && "Last"} {value.value}
+                            {sort === "custom" ? (
+                                "Custom date"
+                            ) : sort === "all time" ? (
+                                "All time"
+                            ) : (
+                                <>Last {sort}</>
+                            )}
                         </>
                     ) : (
                         "Sort by Date"
                     )}
-                </div>
-            )}
-            options={[
-                {value: "30 mins", label: "30 mins"},
-                {value: "1 hour", label: "1 hour"},
-                {value: "6 hour", label: "6 hour"},
-                {value: "24 hour", label: "24 hour"},
-                {value: "3 days", label: "3 days"},
-                {value: "7 days", label: "7 days"},
-                {value: "14 days", label: "14 days"},
-                {value: "1 month", label: "1 month"},
-                {value: "3 month", label: "3 month"},
-                {value: "all time", label: "All time"},
-            ]}
-        />
+                </Button>
+            </Popover>
+        </>
     )
 }
 
diff --git a/agenta-web/src/lib/Types.ts b/agenta-web/src/lib/Types.ts
index 74afe389e6..42224cf8eb 100644
--- a/agenta-web/src/lib/Types.ts
+++ b/agenta-web/src/lib/Types.ts
@@ -664,23 +664,27 @@ export interface HumanEvaluationListTableDataType {
 }
 
 export type Filter = {
-    condition: FilterConditions
-    column: string
-    keyword: string
+    key: string
+    operator: FilterConditions
+    value: string
 }
 
 export type FilterConditions =
     | "contains"
-    | "does not contain"
-    | "starts with"
-    | "ends with"
+    | "matches"
+    | "like"
+    | "startswith"
+    | "endswith"
     | "exists"
-    | "does not exist"
-    | "="
-    | ">"
-    | "<"
-    | ">="
-    | "<="
+    | "not_exists"
+    | "eq"
+    | "neq"
+    | "gt"
+    | "lt"
+    | "gte"
+    | "lte"
+    | "between"
+    | "in"
     | ""
 
 export type SortTypes =
@@ -694,4 +698,5 @@ export type SortTypes =
     | "1 month"
     | "3 month"
     | "all time"
+    | "custom"
     | ""
diff --git a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
index 67ea6d0829..23d9648390 100644
--- a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
@@ -13,8 +13,8 @@ import {useQueryParam} from "@/hooks/useQuery"
 import {formatCurrency, formatLatency, formatTokenUsage} from "@/lib/helpers/formatters"
 import {getNodeById} from "@/lib/helpers/observability_helpers"
 import {useTraces} from "@/lib/hooks/useTraces"
-import {Filter, JSSTheme, SortTypes} from "@/lib/Types"
-import {_AgentaRootsResponse} from "@/services/observability/types"
+import {Filter, FilterConditions, JSSTheme, SortTypes} from "@/lib/Types"
+import {_AgentaRootsResponse, AgentaRootsResponse} from "@/services/observability/types"
 import {
     Button,
     Input,
@@ -32,6 +32,10 @@ import {createUseStyles} from "react-jss"
 import {Export} from "@phosphor-icons/react"
 import {getAppValues} from "@/contexts/app.context"
 import {convertToCsv, downloadCsv} from "@/lib/helpers/fileManipulations"
+import axios from "@/lib/helpers/axiosConfig"
+import {getAgentaApiUrl} from "@/lib/helpers/utils"
+import {observabilityTransformer} from "@/services/observability/core"
+import {useUpdateEffect} from "usehooks-ts"
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     title: {
@@ -47,11 +51,12 @@ const ObservabilityDashboard = ({}: Props) => {
     const classes = useStyles()
     const [selectedTraceId, setSelectedTraceId] = useQueryParam("trace", "")
     const [searchQuery, setSearchQuery] = useState("")
-    const [traceTabs, setTraceTabs] = useState("root calls")
+    const [traceTabs, setTraceTabs] = useState("all")
     const [editColumns, setEditColumns] = useState<string[]>([])
+    const [filters, setFilters] = useState<Filter[]>([])
     const [isExportLoading, setIsExportLoading] = useState(false)
     const [isFilterColsDropdownOpen, setIsFilterColsDropdownOpen] = useState(false)
-    const {traces} = useTraces()
+    const {traces, setTraces} = useTraces()
     const [columns, setColumns] = useState<ColumnsType<_AgentaRootsResponse>>([
         {
             title: "ID",
@@ -189,6 +194,9 @@ const ObservabilityDashboard = ({}: Props) => {
         }))
     }, [columns])
 
+    // external codes
+    // ----------------------------------------------------------------------
+
     const onExport = async () => {
         try {
             setIsExportLoading(true)
@@ -236,22 +244,67 @@ const ObservabilityDashboard = ({}: Props) => {
     }
 
     const filterColumns = [
-        {column: "inputs", mapping: "data.inputs.topic"},
-        {column: "outputs", mapping: "data.outputs"},
-        {column: "status", mapping: "status.code"},
-        {column: "costs", mapping: "metrics.acc.costs.total"},
-        {column: "tokens", mapping: "metrics.acc.tokens.total"},
-        {column: "node_name", mapping: "node.name"},
-        {column: "node_type", mapping: "node.type"},
+        {value: "data", label: "data"},
+        {value: "status.code", label: "status.code"},
+        {value: "metrics.acc.costs.total", label: "metrics.acc.costs.total"},
+        {value: "metrics.acc.tokens.total", label: "metrics.acc.tokens.total"},
+        {value: "node.name", label: "node.name"},
+        {value: "node.type", label: "node.type"},
     ]
 
-    const onFilterApply = (filter: Filter[]) => {}
+    const onSortApply = async ({
+        sortData,
+        customSortData,
+    }: {
+        sortData: SortTypes
+        customSortData?: any
+    }) => {
+        let time
+        let query: string
+
+        if (sortData !== "custom" && sortData) {
+            const now = dayjs().utc() // Get the current UTC time
+
+            if (sortData === "all time") {
+                time = "1970-01-01T00:00:00"
+                query = `&earliest=${time}`
+                return
+            }
+
+            // Split the value into number and unit (e.g., "30 minutes" becomes ["30", "minutes"])
+            const [amount, unit] = sortData.split(" ")
 
-    const onClearFilter = async (filter: Filter[]) => {}
+            time = now
+                .subtract(parseInt(amount), unit as dayjs.ManipulateType)
+                .toISOString()
+                .split(".")[0]
+            query = `&earliest=${time}`
+        }
 
-    const onSortApply = (sortData: SortTypes) => {}
+        if (customSortData?.startTime && sortData == "custom") {
+            query = `earliest=${customSortData.startTime.toISOString().split(".")[0]}&latest=${customSortData.endTime.toISOString().split(".")[0]}`
+        }
+
+        try {
+            const fetchAllTraces = async () => {
+                const response = await axios.get(
+                    `${getAgentaApiUrl()}/api/observability/v1/traces/search?project_id=0192c229-3760-759d-a637-959921135050&${query}`,
+                )
+                return response.data
+            }
 
-    const onSearchQueryAppy = async () => {}
+            const data = await fetchAllTraces()
+
+            setTraces(
+                data.trees.flatMap((item: AgentaRootsResponse) =>
+                    // @ts-ignore
+                    observabilityTransformer(item),
+                ) as _AgentaRootsResponse[],
+            )
+        } catch (error) {
+            console.log(error)
+        }
+    }
 
     const handleToggleColumnVisibility = (key: string) => {
         setEditColumns((prev) =>
@@ -259,8 +312,121 @@ const ObservabilityDashboard = ({}: Props) => {
         )
     }
 
+    // without synchronization code - version 1
+    // ------------------------------------------------------------------------
+
+    // const onFilterApply = (filter: Filter[]) => {
+    //     try {
+    //         const query = `&filtering={"conditions": ${JSON.stringify(filter)}}`
+    //         console.log(query)
+    //     } catch (error) {}
+    // }
+
+    // const onClearFilter = async (filter: Filter[]) => {}
+
+    // const onSearchQueryAppy = async () => {
+    //     if (!searchQuery) return
+    //     try {
+    //         const query = `filtering={"conditions":[{"key":"data","value":"${searchQuery}","operator":"contains"}]}`
+
+    //         const fetchAllTraces = async () => {
+    //             const response = await axios.get(
+    //                 `${getAgentaApiUrl()}/api/observability/v1/traces/search?project_id=0192c229-3760-759d-a637-959921135050&${query}`,
+    //             )
+    //             return response.data
+    //         }
+
+    //         const data = await fetchAllTraces()
+    //         setTraces(
+    //             data.trees.flatMap((item: AgentaRootsResponse) =>
+    //                 // @ts-ignore
+    //                 observabilityTransformer(item),
+    //             ) as _AgentaRootsResponse[],
+    //         )
+    //     } catch (error) {
+    //         console.log(error)
+    //     }
+    // }
+
+    // const onTraceTabChange = async (e: RadioChangeEvent) => {
+    //     setTraceTabs(e.target.value)
+    //     try {
+    //         const tab = e.target.value
+    //         if (!tab) return
+    //         const query =
+    //             tab === "all"
+    //                 ? `&focus=tree`
+    //                 : `&focus=node&node_type=${tab == "llm" ? "CHAT" : "WORKFLOW"}`
+
+    //         const fetchAllTraces = async () => {
+    //             const response = await axios.get(
+    //                 `${getAgentaApiUrl()}/api/observability/v1/0192ba30-1a80-7093-8c99-456a914f829d/traces?focus=tree${query}`,
+    //             )
+    //             return response.data
+    //         }
+
+    //         const data = await fetchAllTraces()
+
+    //         // setTraces(data.nodes)
+    //     } catch (error) {
+    //         console.log(error)
+    //     }
+    // }
+
+    const lol = "dfdf"
+
+    // synchronization code - version 2
+    // -------------------------------------------------------------------------
+
+    // Update search filter based on search input change
+    const onSearchQueryApply = () => {
+        updateFilter("data", "contains", searchQuery)
+    }
+
+    // Update filters based on Radio button change
     const onTraceTabChange = (e: RadioChangeEvent) => {
-        setTraceTabs(e.target.value)
+        const selectedTab = e.target.value
+        setTraceTabs(selectedTab)
+
+        if (selectedTab == "all") {
+            setFilters((prevFilters) => prevFilters.filter((f) => f.key !== "node.type"))
+        } else {
+            updateFilter("node.type", "eq", selectedTab)
+        }
+    }
+
+    const updateFilter = (key: string, operator: FilterConditions, value: string) => {
+        setFilters((prevFilters) => {
+            const otherFilters = prevFilters.filter((f) => f.key !== key)
+            return value ? [...otherFilters, {key, operator, value}] : otherFilters
+        })
+    }
+
+    const onSearchClear = () => {
+        setSearchQuery("") // Clear the search query
+        setFilters((prevFilters) => prevFilters.filter((f) => f.key !== "data")) // Remove the filter for 'data'
+    }
+
+    // Sync searchQuery with filters state
+    useUpdateEffect(() => {
+        const dataFilter = filters.find((f) => f.key === "data")
+        setSearchQuery(dataFilter ? dataFilter.value : "")
+    }, [filters])
+
+    // Sync traceTabs with filters state
+    useUpdateEffect(() => {
+        const nodeTypeFilter = filters.find((f) => f.key === "node.type")
+        setTraceTabs(nodeTypeFilter ? nodeTypeFilter.value : "all")
+    }, [filters])
+
+    const onClearFilter = () => {
+        setFilters([])
+        setSearchQuery("")
+        setTraceTabs("all")
+    }
+
+    const onApplyFilter = (newFilters: Filter[]) => {
+        setFilters(newFilters)
     }
 
     return (
@@ -275,22 +441,24 @@ const ObservabilityDashboard = ({}: Props) => {
                                 placeholder="Search"
                                 value={searchQuery}
                                 onChange={(e) => setSearchQuery(e.target.value)}
-                                onPressEnter={onSearchQueryAppy}
+                                onPressEnter={onSearchQueryApply}
+                                onSearch={onSearchClear}
                                 className="w-[320px]"
                                 allowClear
                             />
                             <Filters
+                                filterData={filters}
                                 columns={filterColumns}
-                                onApplyFilter={onFilterApply}
+                                onApplyFilter={onApplyFilter}
                                 onClearFilter={onClearFilter}
                             />
                             <Sort onSortApply={onSortApply} defaultSortValue="1 month" />
                         </Space>
                         <div className="w-full flex items-center justify-between">
                             <Radio.Group value={traceTabs} onChange={onTraceTabChange}>
-                                <Radio.Button value="root calls">Root calls</Radio.Button>
-                                <Radio.Button value="generations">Generation</Radio.Button>
-                                <Radio.Button value="all runs">All runs</Radio.Button>
+                                <Radio.Button value="all">All</Radio.Button>
+                                <Radio.Button value="llm">LLM</Radio.Button>
+                                <Radio.Button value="workflows">Workflows</Radio.Button>
                             </Radio.Group>
                             <Space>
                                 <Button

From 577659fcf4c1019d5b03ac17fb470deff5622888 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashrafdev365@gmail.com>
Date: Fri, 25 Oct 2024 15:54:10 +0600
Subject: [PATCH 09/16] fix(frontend): removed uncommit changes

---
 agenta-web/src/components/Filters/Sort.tsx    |  4 +-
 .../apps/[app_id]/observability/index.tsx     | 84 +++++++++----------
 2 files changed, 41 insertions(+), 47 deletions(-)

diff --git a/agenta-web/src/components/Filters/Sort.tsx b/agenta-web/src/components/Filters/Sort.tsx
index 6e80c6abab..14e3d684a0 100644
--- a/agenta-web/src/components/Filters/Sort.tsx
+++ b/agenta-web/src/components/Filters/Sort.tsx
@@ -111,7 +111,9 @@ const Sort: React.FC<Props> = ({onSortApply, defaultSortValue}) => {
                                     <div
                                         key={item.value}
                                         onClick={() => {
-                                            setCustomOptionSelected(false)
+                                            setTimeout(() => {
+                                                setCustomOptionSelected(false)
+                                            }, 500)
                                             setDropdownVisible(false)
                                             setSort(item.value as SortTypes)
                                             onSortApply({sortData: item.value as SortTypes})
diff --git a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
index 23d9648390..fc123fbe17 100644
--- a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
@@ -56,7 +56,7 @@ const ObservabilityDashboard = ({}: Props) => {
     const [filters, setFilters] = useState<Filter[]>([])
     const [isExportLoading, setIsExportLoading] = useState(false)
     const [isFilterColsDropdownOpen, setIsFilterColsDropdownOpen] = useState(false)
-    const {traces, setTraces} = useTraces()
+    const {traces} = useTraces()
     const [columns, setColumns] = useState<ColumnsType<_AgentaRootsResponse>>([
         {
             title: "ID",
@@ -259,51 +259,43 @@ const ObservabilityDashboard = ({}: Props) => {
         sortData: SortTypes
         customSortData?: any
     }) => {
-        let time
-        let query: string
-
-        if (sortData !== "custom" && sortData) {
-            const now = dayjs().utc() // Get the current UTC time
-
-            if (sortData === "all time") {
-                time = "1970-01-01T00:00:00"
-                query = `&earliest=${time}`
-                return
-            }
-
-            // Split the value into number and unit (e.g., "30 minutes" becomes ["30", "minutes"])
-            const [amount, unit] = sortData.split(" ")
-
-            time = now
-                .subtract(parseInt(amount), unit as dayjs.ManipulateType)
-                .toISOString()
-                .split(".")[0]
-            query = `&earliest=${time}`
-        }
-
-        if (customSortData?.startTime && sortData == "custom") {
-            query = `earliest=${customSortData.startTime.toISOString().split(".")[0]}&latest=${customSortData.endTime.toISOString().split(".")[0]}`
-        }
-
-        try {
-            const fetchAllTraces = async () => {
-                const response = await axios.get(
-                    `${getAgentaApiUrl()}/api/observability/v1/traces/search?project_id=0192c229-3760-759d-a637-959921135050&${query}`,
-                )
-                return response.data
-            }
-
-            const data = await fetchAllTraces()
-
-            setTraces(
-                data.trees.flatMap((item: AgentaRootsResponse) =>
-                    // @ts-ignore
-                    observabilityTransformer(item),
-                ) as _AgentaRootsResponse[],
-            )
-        } catch (error) {
-            console.log(error)
-        }
+        // let time
+        // let query: string
+        // if (sortData !== "custom" && sortData) {
+        //     const now = dayjs().utc() // Get the current UTC time
+        //     if (sortData === "all time") {
+        //         time = "1970-01-01T00:00:00"
+        //         query = `&earliest=${time}`
+        //         return
+        //     }
+        //     // Split the value into number and unit (e.g., "30 minutes" becomes ["30", "minutes"])
+        //     const [amount, unit] = sortData.split(" ")
+        //     time = now
+        //         .subtract(parseInt(amount), unit as dayjs.ManipulateType)
+        //         .toISOString()
+        //         .split(".")[0]
+        //     query = `&earliest=${time}`
+        // }
+        // if (customSortData?.startTime && sortData == "custom") {
+        //     query = `earliest=${customSortData.startTime.toISOString().split(".")[0]}&latest=${customSortData.endTime.toISOString().split(".")[0]}`
+        // }
+        // try {
+        //     const fetchAllTraces = async () => {
+        //         const response = await axios.get(
+        //             `${getAgentaApiUrl()}/api/observability/v1/traces/search?project_id=0192c229-3760-759d-a637-959921135050&${query}`,
+        //         )
+        //         return response.data
+        //     }
+        //     const data = await fetchAllTraces()
+        //     setTraces(
+        //         data.trees.flatMap((item: AgentaRootsResponse) =>
+        //             // @ts-ignore
+        //             observabilityTransformer(item),
+        //         ) as _AgentaRootsResponse[],
+        //     )
+        // } catch (error) {
+        //     console.log(error)
+        // }
     }
 
     const handleToggleColumnVisibility = (key: string) => {

From f14f85057792030f0606c8051c73cea0a02c0ea5 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashrafdev365@gmail.com>
Date: Fri, 25 Oct 2024 19:02:33 +0600
Subject: [PATCH 10/16] temp(frontend): temporarily getting the project_id
 dynamically

---
 agenta-web/src/lib/hooks/useTraces.ts               | 5 ++++-
 agenta-web/src/services/observability/core/index.ts | 5 ++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/agenta-web/src/lib/hooks/useTraces.ts b/agenta-web/src/lib/hooks/useTraces.ts
index 955ae8052a..732fdfe653 100644
--- a/agenta-web/src/lib/hooks/useTraces.ts
+++ b/agenta-web/src/lib/hooks/useTraces.ts
@@ -7,15 +7,18 @@ import {
 } from "@/services/observability/types"
 import {useEffect, useState} from "react"
 import {buildNodeTree, observabilityTransformer} from "../helpers/observability_helpers"
+import {useRouter} from "next/router"
 
 export const useTraces = () => {
     const [traces, setTraces] = useState<_AgentaRootsResponse[]>([])
     const [isLoadingTraces, setIsLoadingTraces] = useState(true)
+    const router = useRouter()
+    const projectId = router.query.project_id
 
     const fetchTraces = async () => {
         try {
             setIsLoadingTraces(true)
-            const data = await fetchAllTraces()
+            const data = await fetchAllTraces(projectId as string)
 
             const transformedTraces: _AgentaRootsResponse[] = []
 
diff --git a/agenta-web/src/services/observability/core/index.ts b/agenta-web/src/services/observability/core/index.ts
index ef456362da..e7995d072e 100644
--- a/agenta-web/src/services/observability/core/index.ts
+++ b/agenta-web/src/services/observability/core/index.ts
@@ -9,11 +9,10 @@ import axios from "@/lib/helpers/axiosConfig"
 //  - update: PUT data to server
 //  - delete: DELETE data from server
 
-const PROJECT_ID = "019233b0-2967-76c0-bde2-f5b78b3a9a04"
 
-export const fetchAllTraces = async () => {
+export const fetchAllTraces = async (projectId: string) => {
     const response = await axios.get(
-        `${getAgentaApiUrl()}/api/observability/v1/traces/search?project_id=${PROJECT_ID}`,
+        `${getAgentaApiUrl()}/api/observability/v1/traces/search?project_id=${projectId}`,
     )
     return response.data
 }

From de4fefbde0b3d5aba951696720d351c8b481b0a1 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashrafdev365@gmail.com>
Date: Mon, 28 Oct 2024 14:28:50 +0600
Subject: [PATCH 11/16] enhance(frontend): connect filters with backend apis

---
 agenta-web/src/components/Filters/Filters.tsx |  30 +-
 agenta-web/src/components/Filters/Sort.tsx    |   4 +-
 agenta-web/src/lib/hooks/useTraces.ts         |   2 +-
 .../apps/[app_id]/observability/index.tsx     | 364 ++++++++++--------
 4 files changed, 217 insertions(+), 183 deletions(-)

diff --git a/agenta-web/src/components/Filters/Filters.tsx b/agenta-web/src/components/Filters/Filters.tsx
index 7e30dcc48b..cdaf075228 100644
--- a/agenta-web/src/components/Filters/Filters.tsx
+++ b/agenta-web/src/components/Filters/Filters.tsx
@@ -124,10 +124,6 @@ const Filters: React.FC<Props> = ({
                 <section>
                     <div className="h-[44px] flex items-center justify-between">
                         <Typography.Text className={classes.filterHeading}>Filter</Typography.Text>
-
-                        <Button icon={<ArrowCounterClockwise size={14} />} onClick={clearFilter}>
-                            Clear
-                        </Button>
                     </div>
 
                     <div className="-ml-4 -mr-2">
@@ -143,11 +139,16 @@ const Filters: React.FC<Props> = ({
                                     showSearch
                                     labelRender={(label) => (!label.value ? "Column" : label.label)}
                                     style={{width: 100}}
-                                    popupMatchSelectWidth={150}
+                                    popupMatchSelectWidth={220}
                                     suffixIcon={<CaretDown size={14} />}
                                     onChange={(value) =>
                                         onFilterChange({columnName: "key", value, idx})
                                     }
+                                    filterSort={(a, b) =>
+                                        (a?.label ?? "")
+                                            .toLowerCase()
+                                            .localeCompare((b?.label ?? "").toLowerCase())
+                                    }
                                     filterOption={(input, option) =>
                                         (option?.label ?? "")
                                             .toLowerCase()
@@ -217,11 +218,22 @@ const Filters: React.FC<Props> = ({
                         </Button>
                     </div>
 
-                    <div className="flex items-center justify-end mt-2">
-                        <Button type="primary" disabled={!filter[0]?.value} onClick={applyFilter}>
+                    <Space className="flex items-center justify-end mt-2">
+                        <Button type="link">Cancel</Button>
+                        <Button
+                            icon={<ArrowCounterClockwise size={14} className="mt-0.5" />}
+                            onClick={clearFilter}
+                        >
+                            Clear
+                        </Button>
+                        <Button
+                            type="primary"
+                            disabled={!filter[0]?.operator}
+                            onClick={applyFilter}
+                        >
                             Apply
                         </Button>
-                    </div>
+                    </Space>
                 </section>
             }
         >
@@ -230,7 +242,7 @@ const Filters: React.FC<Props> = ({
                 onClick={() => setIsFilterOpen(true)}
                 className="flex items-center gap-2"
             >
-                Filters {filter[0]?.value && <X size={14} />}
+                Filters {filter[0]?.operator && <X size={14} />}
             </Button>
         </Popover>
     )
diff --git a/agenta-web/src/components/Filters/Sort.tsx b/agenta-web/src/components/Filters/Sort.tsx
index 14e3d684a0..a8ee1e2fa5 100644
--- a/agenta-web/src/components/Filters/Sort.tsx
+++ b/agenta-web/src/components/Filters/Sort.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from "react"
-import {CaretRight, Clock, Hourglass} from "@phosphor-icons/react"
+import {CaretRight, Clock, Calendar} from "@phosphor-icons/react"
 import {DatePicker, Button, Typography, Divider, Popover} from "antd"
 import {JSSTheme, SortTypes} from "@/lib/Types"
 import {Dayjs} from "dayjs"
@@ -210,7 +210,7 @@ const Sort: React.FC<Props> = ({onSortApply, defaultSortValue}) => {
                 }
             >
                 <Button
-                    icon={<Hourglass size={14} />}
+                    icon={<Calendar size={14} className="mt-0.5" />}
                     onClick={() => setDropdownVisible(true)}
                     className="flex items-center gap-2"
                 >
diff --git a/agenta-web/src/lib/hooks/useTraces.ts b/agenta-web/src/lib/hooks/useTraces.ts
index 732fdfe653..9f928d8fd1 100644
--- a/agenta-web/src/lib/hooks/useTraces.ts
+++ b/agenta-web/src/lib/hooks/useTraces.ts
@@ -57,5 +57,5 @@ export const useTraces = () => {
         fetchTraces()
     }, [])
 
-    return {traces, isLoadingTraces}
+    return {traces, isLoadingTraces, setIsLoadingTraces, setTraces}
 }
diff --git a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
index d2fdbff495..becb62901b 100644
--- a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
@@ -13,11 +13,14 @@ import {ResizableTitle} from "@/components/ServerTable/components"
 import {useAppId} from "@/hooks/useAppId"
 import {useQueryParam} from "@/hooks/useQuery"
 import {formatCurrency, formatLatency, formatTokenUsage} from "@/lib/helpers/formatters"
-import {getNodeById} from "@/lib/helpers/observability_helpers"
-import {getStringOrJson} from "@/lib/helpers/utils"
+import {
+    buildNodeTree,
+    getNodeById,
+    observabilityTransformer,
+} from "@/lib/helpers/observability_helpers"
 import {useTraces} from "@/lib/hooks/useTraces"
 import {Filter, FilterConditions, JSSTheme, SortTypes} from "@/lib/Types"
-import {_AgentaRootsResponse} from "@/services/observability/types"
+import {_AgentaRootsResponse, AgentaNodeDTO, AgentaTreeDTO} from "@/services/observability/types"
 import {SwapOutlined} from "@ant-design/icons"
 import {
     Button,
@@ -38,6 +41,8 @@ import {Export} from "@phosphor-icons/react"
 import {getAppValues} from "@/contexts/app.context"
 import {convertToCsv, downloadCsv} from "@/lib/helpers/fileManipulations"
 import {useUpdateEffect} from "usehooks-ts"
+import {getAgentaApiUrl} from "@/lib/helpers/utils"
+import axios from "axios"
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     title: {
@@ -49,16 +54,17 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
 
 interface Props {}
 
+type TraceTabTypes = "tree" | "node" | "llm"
+
 const ObservabilityDashboard = ({}: Props) => {
     const appId = useAppId()
     const router = useRouter()
     const classes = useStyles()
     const [selectedTraceId, setSelectedTraceId] = useQueryParam("trace", "")
-    const {traces, isLoadingTraces} = useTraces()
+    const {traces, isLoadingTraces, setIsLoadingTraces, setTraces} = useTraces()
     const [searchQuery, setSearchQuery] = useState("")
-    const [traceTabs, setTraceTabs] = useState("all")
-    const [focusTab, setFocusTab] = useState("tree")
-    const [editColumns, setEditColumns] = useState<string[]>([])
+    const [traceTabs, setTraceTabs] = useState<TraceTabTypes>("tree")
+    const [editColumns, setEditColumns] = useState<string[]>(["span_type"])
     const [filters, setFilters] = useState<Filter[]>([])
     const [isExportLoading, setIsExportLoading] = useState(false)
     const [isFilterColsDropdownOpen, setIsFilterColsDropdownOpen] = useState(false)
@@ -214,15 +220,13 @@ const ObservabilityDashboard = ({}: Props) => {
         return columns.map((col) => ({
             ...col,
             width: col.width || 200,
+            hidden: editColumns.includes(col.key as string),
             onHeaderCell: (column: TableColumnType<_AgentaRootsResponse>) => ({
                 width: column.width,
                 onResize: handleResize(column.key?.toString()!),
             }),
         }))
-    }, [columns])
-
-    // external codes
-    // ----------------------------------------------------------------------
+    }, [columns, editColumns])
 
     const onExport = async () => {
         try {
@@ -271,12 +275,40 @@ const ObservabilityDashboard = ({}: Props) => {
     }
 
     const filterColumns = [
-        {value: "data", label: "data"},
+        {value: "root.id", label: "root.id"},
+        {value: "tree.id", label: "tree.id"},
+        {value: "tree.type", label: "tree.type"},
+        {value: "node.id", label: "node.id"},
+        {value: "node.type", label: "node.type"},
+        {value: "node.name", label: "node.name"},
+        {value: "parent.id", label: "parent.id"},
         {value: "status.code", label: "status.code"},
-        {value: "metrics.acc.costs.total", label: "metrics.acc.costs.total"},
+        {value: "status.message", label: "status.message"},
+        {value: "exception.timestamp", label: "exception.timestamp"},
+        {value: "exception.type", label: "exception.type"},
+        {value: "exception.message", label: "exception.message"},
+        {value: "exception.stacktrace", label: "exception.stacktrace"},
+        {value: "data", label: "data"},
+        {value: "metrics.acc.duration.total", label: "metrics.acc.duration.total"},
+        {value: "metrics.acc.cost.total", label: "metrics.acc.cost.total"},
+        {value: "metrics.unit.cost.total", label: "metrics.unit.cost.total"},
+        {value: "metrics.acc.tokens.prompt", label: "metrics.acc.tokens.prompt"},
+        {value: "metrics.acc.tokens.completion", label: "metrics.acc.tokens.completion"},
         {value: "metrics.acc.tokens.total", label: "metrics.acc.tokens.total"},
-        {value: "node.name", label: "node.name"},
-        {value: "node.type", label: "node.type"},
+        {value: "metrics.unit.tokens.prompt", label: "metrics.unit.tokens.prompt"},
+        {value: "metrics.unit.tokens.completion", label: "metrics.unit.tokens.completion"},
+        {value: "metrics.unit.tokens.total", label: "metrics.unit.tokens.total"},
+        {value: "refs.variant.id", label: "refs.variant.id"},
+        {value: "refs.variant.slug", label: "refs.variant.slug"},
+        {value: "refs.variant.version", label: "refs.variant.version"},
+        {value: "refs.environment.id", label: "refs.environment.id"},
+        {value: "refs.environment.slug", label: "refs.environment.slug"},
+        {value: "refs.environment.version", label: "refs.environment.version"},
+        {value: "refs.application.id", label: "refs.application.id"},
+        {value: "refs.application.slug", label: "refs.application.slug"},
+        {value: "link.type", label: "link.type"},
+        {value: "link.node.id", label: "link.node.id"},
+        {value: "otel.kind", label: "otel.kind"},
     ]
 
     const onSortApply = async ({
@@ -286,148 +318,52 @@ const ObservabilityDashboard = ({}: Props) => {
         sortData: SortTypes
         customSortData?: any
     }) => {
-        // let time
-        // let query: string
-        // if (sortData !== "custom" && sortData) {
-        //     const now = dayjs().utc() // Get the current UTC time
-        //     if (sortData === "all time") {
-        //         time = "1970-01-01T00:00:00"
-        //         query = `&earliest=${time}`
-        //         return
-        //     }
-        //     // Split the value into number and unit (e.g., "30 minutes" becomes ["30", "minutes"])
-        //     const [amount, unit] = sortData.split(" ")
-        //     time = now
-        //         .subtract(parseInt(amount), unit as dayjs.ManipulateType)
-        //         .toISOString()
-        //         .split(".")[0]
-        //     query = `&earliest=${time}`
-        // }
-        // if (customSortData?.startTime && sortData == "custom") {
-        //     query = `earliest=${customSortData.startTime.toISOString().split(".")[0]}&latest=${customSortData.endTime.toISOString().split(".")[0]}`
-        // }
-        // try {
-        //     const fetchAllTraces = async () => {
-        //         const response = await axios.get(
-        //             `${getAgentaApiUrl()}/api/observability/v1/traces/search?project_id=0192c229-3760-759d-a637-959921135050&${query}`,
-        //         )
-        //         return response.data
-        //     }
-        //     const data = await fetchAllTraces()
-        //     setTraces(
-        //         data.trees.flatMap((item: AgentaRootsResponse) =>
-        //             // @ts-ignore
-        //             observabilityTransformer(item),
-        //         ) as _AgentaRootsResponse[],
-        //     )
-        // } catch (error) {
-        //     console.log(error)
-        // }
-    }
-
-    const handleToggleColumnVisibility = (key: string) => {
-        setEditColumns((prev) =>
-            prev.includes(key) ? prev.filter((item) => item !== key) : [...prev, key],
-        )
-    }
+        let time
+        let query: string
+        if (sortData !== "custom" && sortData && sortData !== "all time") {
+            const now = dayjs().utc() // Get the current UTC time
+
+            // Split the value into number and unit (e.g., "30 minutes" becomes ["30", "minutes"])
+            const [amount, unit] = sortData.split(" ")
+            time = now
+                .subtract(parseInt(amount), unit as dayjs.ManipulateType)
+                .toISOString()
+                .split(".")[0]
+            query = `&earliest=${time}`
+        } else if (customSortData?.startTime && sortData == "custom") {
+            query = `earliest=${customSortData.startTime.toISOString().split(".")[0]}&latest=${customSortData.endTime.toISOString().split(".")[0]}`
+        } else if (sortData === "all time") {
+            time = "1970-01-01T00:00:00"
+            query = `&earliest=${time}`
+        }
 
-    // without synchronization code - version 1
-    // ------------------------------------------------------------------------
-
-    // const onFilterApply = (filter: Filter[]) => {
-    //     try {
-    //         const query = `&filtering={"conditions": ${JSON.stringify(filter)}}`
-    //         console.log(query)
-    //     } catch (error) {}
-    // }
-
-    // const onClearFilter = async (filter: Filter[]) => {}
-
-    // const onSearchQueryAppy = async () => {
-    //     if (!searchQuery) return
-    //     try {
-    //         const query = `filtering={"conditions":[{"key":"data","value":"${searchQuery}","operator":"contains"}]}`
-
-    //         const fetchAllTraces = async () => {
-    //             const response = await axios.get(
-    //                 `${getAgentaApiUrl()}/api/observability/v1/traces/search?project_id=0192c229-3760-759d-a637-959921135050&${query}`,
-    //             )
-    //             return response.data
-    //         }
-
-    //         const data = await fetchAllTraces()
-    //         setTraces(
-    //             data.trees.flatMap((item: AgentaRootsResponse) =>
-    //                 // @ts-ignore
-    //                 observabilityTransformer(item),
-    //             ) as _AgentaRootsResponse[],
-    //         )
-    //     } catch (error) {
-    //         console.log(error)
-    //     }
-    // }
-
-    // const onTraceTabChange = async (e: RadioChangeEvent) => {
-    //     setTraceTabs(e.target.value)
-    //     try {
-    //         const tab = e.target.value
-    //         if (!tab) return
-    //         const query =
-    //             tab === "all"
-    //                 ? `&focus=tree`
-    //                 : `&focus=node&node_type=${tab == "llm" ? "CHAT" : "WORKFLOW"}`
-
-    //         const fetchAllTraces = async () => {
-    //             const response = await axios.get(
-    //                 `${getAgentaApiUrl()}/api/observability/v1/0192ba30-1a80-7093-8c99-456a914f829d/traces?focus=tree${query}`,
-    //             )
-    //             return response.data
-    //         }
-
-    //         const data = await fetchAllTraces()
-
-    //         // setTraces(data.nodes)
-    //     } catch (error) {
-    //         console.log(error)
-    //     }
-    // }
-
-    const lol = "dfdf"
-
-    // synchronization code - version 2
-    // -------------------------------------------------------------------------
-
-    // Update search filter based on search input change
-    const onSearchQueryApply = () => {
-        updateFilter("data", "contains", searchQuery)
-    }
+        try {
+            const fetchAllTraces = async () => {
+                const response = await axios.get(
+                    `${getAgentaApiUrl()}/api/observability/v1/traces/search?project_id=0192c229-3760-759d-a637-959921135050&${query}`,
+                )
+                return response.data
+            }
 
-    // Update filters based on Radio button change
-    const onTraceTabChange = (e: RadioChangeEvent) => {
-        const selectedTab = e.target.value
-        setTraceTabs(selectedTab)
+            const data = await fetchAllTraces()
 
-        if (selectedTab == "all") {
-            setFilters((prevFilters) => prevFilters.filter((f) => f.key !== "node.type"))
-        } else {
-            updateFilter("node.type", "eq", selectedTab)
+            setTraces(data.trees.flatMap((item: AgentaTreeDTO) => observabilityTransformer(item)))
+        } catch (error) {
+            console.log(error)
         }
     }
 
-    const onFocusTabChange = (e: RadioChangeEvent) => {
-        setFocusTab(e.target.value)
-    }
-
-    const updateFilter = (key: string, operator: FilterConditions, value: string) => {
-        setFilters((prevFilters) => {
-            const otherFilters = prevFilters.filter((f) => f.key !== key)
-            return value ? [...otherFilters, {key, operator, value}] : otherFilters
-        })
+    const handleToggleColumnVisibility = (key: string) => {
+        setEditColumns((prev) =>
+            prev.includes(key) ? prev.filter((item) => item !== key) : [...prev, key],
+        )
     }
 
-    const onSearchChange = (e: any) => {
+    // ------------------ search filter ------------------
+    const onSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         setSearchQuery(e.target.value)
 
+        // if the data filter is exist in filter then remove it when the input value get empty
         if (!e.target.value) {
             const isSearchFilterExist = filters.some((item) => item.key === "data")
 
@@ -437,9 +373,18 @@ const ObservabilityDashboard = ({}: Props) => {
         }
     }
 
+    const onSearchQueryApply = () => {
+        if (searchQuery) {
+            updateFilter({key: "data", operator: "contains", value: searchQuery})
+        }
+    }
+
     const onSearchClear = () => {
-        setSearchQuery("") // Clear the search query
-        setFilters((prevFilters) => prevFilters.filter((f) => f.key !== "data")) // Remove the filter for 'data'
+        const isSearchFilterExist = filters.some((item) => item.key === "data")
+
+        if (isSearchFilterExist) {
+            setFilters((prevFilters) => prevFilters.filter((f) => f.key !== "data"))
+        }
     }
 
     // Sync searchQuery with filters state
@@ -448,26 +393,110 @@ const ObservabilityDashboard = ({}: Props) => {
         setSearchQuery(dataFilter ? dataFilter.value : "")
     }, [filters])
 
+    // -------------------- group buttons filter ---------------------
+    const onTraceTabChange = async (e: RadioChangeEvent) => {
+        const selectedTab = e.target.value
+
+        setTraceTabs(selectedTab)
+        if (selectedTab == "llm") {
+            console.log(`focus=${selectedTab}&node_type=llm`)
+        } else {
+            console.log(`focus=${selectedTab}`)
+        }
+
+        // updateFilter({key: "node.type", operator: "eq", value: selectedTab})
+    }
+
     // Sync traceTabs with filters state
-    useUpdateEffect(() => {
-        const nodeTypeFilter = filters.find((f) => f.key === "node.type")
-        setTraceTabs(nodeTypeFilter ? nodeTypeFilter.value : "all")
-    }, [filters])
+    // useUpdateEffect(() => {
+    //     const nodeTypeFilter = filters.find((f) => f.key === "node.type")
+    //     setTraceTabs(nodeTypeFilter ? (nodeTypeFilter.value as TraceTabTypes) : "tree")
+    // }, [filters])
 
-    const onClearFilter = () => {
-        setFilters([])
-        setSearchQuery("")
-        setTraceTabs("all")
+    // -------------------- utility functions ---------------------
+
+    const updateFilter = ({
+        key,
+        operator,
+        value,
+    }: {
+        key: string
+        operator: FilterConditions
+        value: string
+    }) => {
+        setFilters((prevFilters) => {
+            const otherFilters = prevFilters.filter((f) => f.key !== key)
+
+            return value ? [...otherFilters, {key, operator, value}] : otherFilters
+        })
     }
 
-    const onApplyFilter = (newFilters: Filter[]) => {
+    useUpdateEffect(() => {
+        const filterTraceData = async () => {
+            try {
+                setIsLoadingTraces(true)
+
+                let data: any
+                const focusPoint =
+                    traceTabs == "llm" ? `focus=node&node_type=${traceTabs}` : `focus=${traceTabs}`
+
+                const fetchAllFilteredTraces = async () => {
+                    const response = await axios.get(
+                        `${getAgentaApiUrl()}/api/observability/v1/traces/search?project_id=0192c229-3760-759d-a637-959921135050&${focusPoint}&filtering={"conditions":${JSON.stringify(filters)}}`,
+                    )
+                    return response.data
+                }
+                const fetchAllTraces = async () => {
+                    const response = await axios.get(
+                        `${getAgentaApiUrl()}/api/observability/v1/traces/search?project_id=0192c229-3760-759d-a637-959921135050&${focusPoint}`,
+                    )
+                    return response.data
+                }
+
+                if (filters.length > 0 && filters[0].value) {
+                    data = await fetchAllFilteredTraces()
+                    console.log("filtred")
+                } else {
+                    data = await fetchAllTraces()
+                    console.log("clear")
+                }
+
+                const transformedTraces: _AgentaRootsResponse[] = []
+
+                if (data?.trees) {
+                    transformedTraces.push(
+                        ...data.trees.flatMap((item: AgentaTreeDTO) =>
+                            observabilityTransformer(item),
+                        ),
+                    )
+                }
+
+                if (data?.nodes) {
+                    transformedTraces.push(
+                        ...data.nodes
+                            .flatMap((node: AgentaNodeDTO) => buildNodeTree(node))
+                            .flatMap((item: AgentaTreeDTO) => observabilityTransformer(item)),
+                    )
+                }
+
+                setTraces(transformedTraces)
+            } catch (error) {
+                console.log(error)
+            } finally {
+                setIsLoadingTraces(false)
+            }
+        }
+        filterTraceData()
+    }, [filters, traceTabs])
+
+    const onApplyFilter = async (newFilters: Filter[]) => {
         setFilters(newFilters)
     }
 
-    // Function to check if custom Radio Button should be displayed
-    const shouldShowCustomButton = filters.some(
-        (item) => item.key === "node.type" && !["llm", "workflows", "all"].includes(item.value),
-    )
+    const onClearFilter = async () => {
+        setFilters([])
+        setSearchQuery("")
+    }
 
     return (
         <div className="flex flex-col gap-6">
@@ -495,16 +524,9 @@ const ObservabilityDashboard = ({}: Props) => {
                 <div className="w-full flex items-center justify-between">
                     <Space>
                         <Radio.Group value={traceTabs} onChange={onTraceTabChange}>
-                            <Radio.Button value="all">All</Radio.Button>
+                            <Radio.Button value="tree">Root</Radio.Button>
                             <Radio.Button value="llm">LLM</Radio.Button>
-                            <Radio.Button value="workflows">Workflows</Radio.Button>
-                            {shouldShowCustomButton && (
-                                <Radio.Button value="custom">Custom</Radio.Button>
-                            )}
-                        </Radio.Group>
-                        <Radio.Group value={focusTab} onChange={onFocusTabChange}>
-                            <Radio.Button value="tree">Tree</Radio.Button>
-                            <Radio.Button value="node">Node</Radio.Button>
+                            <Radio.Button value="node">All</Radio.Button>
                         </Radio.Group>
                     </Space>
 

From d0870ca87ef6e806d0ad5c9eecab6242a3c703e4 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashrafdev365@gmail.com>
Date: Mon, 28 Oct 2024 15:51:27 +0600
Subject: [PATCH 12/16] refactor(frontend): cleaned up the components

---
 agenta-web/src/components/Filters/Filters.tsx |  9 +---
 .../apps/[app_id]/observability/index.tsx     | 48 +++++++++----------
 .../src/services/observability/core/index.ts  |  1 -
 3 files changed, 25 insertions(+), 33 deletions(-)

diff --git a/agenta-web/src/components/Filters/Filters.tsx b/agenta-web/src/components/Filters/Filters.tsx
index cdaf075228..f48313cc5d 100644
--- a/agenta-web/src/components/Filters/Filters.tsx
+++ b/agenta-web/src/components/Filters/Filters.tsx
@@ -30,19 +30,12 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
 
 type Props = {
     filterData?: Filter[]
-    setFilterData?: React.Dispatch<React.SetStateAction<Filter[]>>
     columns: {value: string; label: string}[]
     onApplyFilter: (filters: Filter[]) => void
     onClearFilter: (filters: Filter[]) => void
 }
 
-const Filters: React.FC<Props> = ({
-    filterData,
-    setFilterData,
-    columns,
-    onApplyFilter,
-    onClearFilter,
-}) => {
+const Filters: React.FC<Props> = ({filterData, columns, onApplyFilter, onClearFilter}) => {
     const classes = useStyles()
     const emptyFilter = [{key: "", operator: "", value: ""}] as Filter[]
 
diff --git a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
index f9d6d89ba3..88900a00bf 100644
--- a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
@@ -55,7 +55,7 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
 
 interface Props {}
 
-type TraceTabTypes = "tree" | "node" | "llm"
+type TraceTabTypes = "tree" | "node" | "chat"
 
 const ObservabilityDashboard = ({}: Props) => {
     const appId = useAppId()
@@ -67,7 +67,6 @@ const ObservabilityDashboard = ({}: Props) => {
     const [traceTabs, setTraceTabs] = useState<TraceTabTypes>("tree")
     const [editColumns, setEditColumns] = useState<string[]>(["span_type"])
     const [filters, setFilters] = useState<Filter[]>([])
-    const [isExportLoading, setIsExportLoading] = useState(false)
     const [isFilterColsDropdownOpen, setIsFilterColsDropdownOpen] = useState(false)
     const [columns, setColumns] = useState<ColumnsType<_AgentaRootsResponse>>([
         {
@@ -253,18 +252,20 @@ const ObservabilityDashboard = ({}: Props) => {
 
     const onExport = async () => {
         try {
-            setIsExportLoading(true)
-
             if (traces.length) {
                 const {currentApp} = getAppValues()
                 const filename = `${currentApp?.app_name}_observability.csv`
 
+                const convertToStringOrJson = (value: any) => {
+                    return typeof value === "string" ? value : JSON.stringify(value)
+                }
+
                 // Helper function to create a trace object
                 const createTraceObject = (trace: any) => ({
                     "Trace ID": trace.key,
                     Timestamp: dayjs(trace.time.start).format("HH:mm:ss DD MMM YYYY"),
                     Inputs: trace?.data?.inputs?.topic || "N/A",
-                    Outputs: JSON.stringify(trace?.data?.outputs) || "N/A",
+                    Outputs: convertToStringOrJson(trace?.data?.outputs) || "N/A",
                     Status: trace.status.code,
                     Latency: formatLatency(trace.time.span / 1000000),
                     Usage: formatTokenUsage(trace?.metrics?.acc?.tokens?.total || 0),
@@ -292,8 +293,6 @@ const ObservabilityDashboard = ({}: Props) => {
             }
         } catch (error) {
             console.error("Export error:", error)
-        } finally {
-            setIsExportLoading(false)
         }
     }
 
@@ -419,24 +418,24 @@ const ObservabilityDashboard = ({}: Props) => {
     // -------------------- group buttons filter ---------------------
     const onTraceTabChange = async (e: RadioChangeEvent) => {
         const selectedTab = e.target.value
-
         setTraceTabs(selectedTab)
-        if (selectedTab == "llm") {
-            console.log(`focus=${selectedTab}&node_type=llm`)
+
+        if (selectedTab === "chat") {
+            updateFilter({key: "node.type", operator: "eq", value: selectedTab})
         } else {
-            console.log(`focus=${selectedTab}`)
-        }
+            const isNodeTypeFilterExist = filters.some((item) => item.key === "node.type")
 
-        // updateFilter({key: "node.type", operator: "eq", value: selectedTab})
+            if (isNodeTypeFilterExist) {
+                setFilters((prevFilters) => prevFilters.filter((f) => f.key !== "node.type"))
+            }
+        }
     }
 
     // Sync traceTabs with filters state
-    // useUpdateEffect(() => {
-    //     const nodeTypeFilter = filters.find((f) => f.key === "node.type")
-    //     setTraceTabs(nodeTypeFilter ? (nodeTypeFilter.value as TraceTabTypes) : "tree")
-    // }, [filters])
-
-    // -------------------- utility functions ---------------------
+    useUpdateEffect(() => {
+        const nodeTypeFilter = filters.find((f) => f.key === "node.type")
+        setTraceTabs(nodeTypeFilter?.value ? (nodeTypeFilter.value as TraceTabTypes) : "tree")
+    }, [filters])
 
     const updateFilter = ({
         key,
@@ -459,9 +458,8 @@ const ObservabilityDashboard = ({}: Props) => {
             try {
                 setIsLoadingTraces(true)
 
-                let data: any
-                const focusPoint =
-                    traceTabs == "llm" ? `focus=node&node_type=${traceTabs}` : `focus=${traceTabs}`
+                let data
+                const focusPoint = traceTabs !== "chat" ? `focus=${traceTabs}` : ""
 
                 const fetchAllFilteredTraces = async () => {
                     const response = await axios.get(
@@ -517,6 +515,9 @@ const ObservabilityDashboard = ({}: Props) => {
     const onClearFilter = async () => {
         setFilters([])
         setSearchQuery("")
+        if (traceTabs === "chat") {
+            setTraceTabs("tree")
+        }
     }
 
     return (
@@ -546,7 +547,7 @@ const ObservabilityDashboard = ({}: Props) => {
                     <Space>
                         <Radio.Group value={traceTabs} onChange={onTraceTabChange}>
                             <Radio.Button value="tree">Root</Radio.Button>
-                            <Radio.Button value="llm">LLM</Radio.Button>
+                            <Radio.Button value="chat">LLM</Radio.Button>
                             <Radio.Button value="node">All</Radio.Button>
                         </Radio.Group>
                     </Space>
@@ -557,7 +558,6 @@ const ObservabilityDashboard = ({}: Props) => {
                             onClick={onExport}
                             icon={<Export size={14} className="mt-0.5" />}
                             disabled={traces.length === 0}
-                            loading={isExportLoading}
                         >
                             Export as CSV
                         </Button>
diff --git a/agenta-web/src/services/observability/core/index.ts b/agenta-web/src/services/observability/core/index.ts
index e7995d072e..ca92701ace 100644
--- a/agenta-web/src/services/observability/core/index.ts
+++ b/agenta-web/src/services/observability/core/index.ts
@@ -9,7 +9,6 @@ import axios from "@/lib/helpers/axiosConfig"
 //  - update: PUT data to server
 //  - delete: DELETE data from server
 
-
 export const fetchAllTraces = async (projectId: string) => {
     const response = await axios.get(
         `${getAgentaApiUrl()}/api/observability/v1/traces/search?project_id=${projectId}`,

From 01be3ac75fa800256dc27da2b330f8b08800e821 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashrafdev365@gmail.com>
Date: Mon, 28 Oct 2024 17:56:45 +0600
Subject: [PATCH 13/16] feat(frontend): added pagination UI

---
 .../apps/[app_id]/observability/index.tsx     | 122 +++++++++++-------
 1 file changed, 72 insertions(+), 50 deletions(-)

diff --git a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
index 88900a00bf..ba65519cd8 100644
--- a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
@@ -25,6 +25,7 @@ import {SwapOutlined} from "@ant-design/icons"
 import {
     Button,
     Input,
+    Pagination,
     Radio,
     RadioChangeEvent,
     Space,
@@ -51,6 +52,12 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         fontWeight: theme.fontWeightMedium,
         lineHeight: theme.lineHeightHeading4,
     },
+    pagination: {
+        "& > .ant-pagination-options": {
+            order: -1,
+            marginRight: 8,
+        },
+    },
 }))
 
 interface Props {}
@@ -68,6 +75,7 @@ const ObservabilityDashboard = ({}: Props) => {
     const [editColumns, setEditColumns] = useState<string[]>(["span_type"])
     const [filters, setFilters] = useState<Filter[]>([])
     const [isFilterColsDropdownOpen, setIsFilterColsDropdownOpen] = useState(false)
+    const [pagination, setPagination] = useState({current: 1, page: 10})
     const [columns, setColumns] = useState<ColumnsType<_AgentaRootsResponse>>([
         {
             title: "ID",
@@ -520,6 +528,10 @@ const ObservabilityDashboard = ({}: Props) => {
         }
     }
 
+    const onPaginationChange = (current: number, pageSize: number) => {
+        setPagination({current, page: pageSize})
+    }
+
     return (
         <div className="flex flex-col gap-6">
             <Typography.Text className={classes.title}>Observability</Typography.Text>
@@ -572,56 +584,66 @@ const ObservabilityDashboard = ({}: Props) => {
                 </div>
             </div>
 
-            <Table
-                loading={isLoadingTraces}
-                columns={mergedColumns as TableColumnType<_AgentaRootsResponse>[]}
-                dataSource={traces}
-                bordered
-                style={{cursor: "pointer"}}
-                onRow={(record) => ({
-                    onClick: () => {
-                        setSelected(record.node.id)
-                        setSelectedTraceId(record.root.id)
-                    },
-                })}
-                components={{
-                    header: {
-                        cell: ResizableTitle,
-                    },
-                }}
-                pagination={false}
-                scroll={{x: "max-content"}}
-                locale={{
-                    emptyText: (
-                        <div className="py-16">
-                            <EmptyComponent
-                                image={
-                                    <SwapOutlined
-                                        style={{transform: "rotate(90deg)"}}
-                                        className="text-[32px]"
-                                    />
-                                }
-                                description="Monitor the performance and results of your LLM applications here."
-                                primaryCta={{
-                                    text: "Go to Playground",
-                                    onClick: () => router.push(`/apps/${appId}/playground`),
-                                    tooltip:
-                                        "Run your LLM app in the playground to generate and view insights.",
-                                }}
-                                secondaryCta={{
-                                    text: "Learn More",
-                                    onClick: () =>
-                                        router.push(
-                                            "https://docs.agenta.ai/observability/quickstart",
-                                        ),
-                                    tooltip:
-                                        "Explore more about tracking and analyzing your app's observability data.",
-                                }}
-                            />
-                        </div>
-                    ),
-                }}
-            />
+            <div className="flex flex-col gap-2">
+                <Table
+                    loading={isLoadingTraces}
+                    columns={mergedColumns as TableColumnType<_AgentaRootsResponse>[]}
+                    dataSource={traces}
+                    bordered
+                    style={{cursor: "pointer"}}
+                    onRow={(record) => ({
+                        onClick: () => {
+                            setSelected(record.node.id)
+                            setSelectedTraceId(record.root.id)
+                        },
+                    })}
+                    components={{
+                        header: {
+                            cell: ResizableTitle,
+                        },
+                    }}
+                    pagination={false}
+                    scroll={{x: "max-content"}}
+                    locale={{
+                        emptyText: (
+                            <div className="py-16">
+                                <EmptyComponent
+                                    image={
+                                        <SwapOutlined
+                                            style={{transform: "rotate(90deg)"}}
+                                            className="text-[32px]"
+                                        />
+                                    }
+                                    description="Monitor the performance and results of your LLM applications here."
+                                    primaryCta={{
+                                        text: "Go to Playground",
+                                        onClick: () => router.push(`/apps/${appId}/playground`),
+                                        tooltip:
+                                            "Run your LLM app in the playground to generate and view insights.",
+                                    }}
+                                    secondaryCta={{
+                                        text: "Learn More",
+                                        onClick: () =>
+                                            router.push(
+                                                "https://docs.agenta.ai/observability/quickstart",
+                                            ),
+                                        tooltip:
+                                            "Explore more about tracking and analyzing your app's observability data.",
+                                    }}
+                                />
+                            </div>
+                        ),
+                    }}
+                />
+                <Pagination
+                    total={100}
+                    align="end"
+                    className={classes.pagination}
+                    current={pagination.current}
+                    pageSize={pagination.page}
+                    onChange={onPaginationChange}
+                />
+            </div>
 
             {activeTrace && !!traces?.length && (
                 <GenericDrawer

From aa1d54201cc2db50458e282ab5ac6077d0aaed23 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashrafdev365@gmail.com>
Date: Mon, 28 Oct 2024 18:09:55 +0600
Subject: [PATCH 14/16] enhane(frontend): refactor endpoint api url

---
 agenta-web/src/lib/hooks/useTraces.ts                      | 5 +----
 agenta-web/src/pages/apps/[app_id]/observability/index.tsx | 6 +++---
 agenta-web/src/services/observability/core/index.ts        | 6 ++----
 3 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/agenta-web/src/lib/hooks/useTraces.ts b/agenta-web/src/lib/hooks/useTraces.ts
index 9f928d8fd1..f5c5bb72ee 100644
--- a/agenta-web/src/lib/hooks/useTraces.ts
+++ b/agenta-web/src/lib/hooks/useTraces.ts
@@ -7,18 +7,15 @@ import {
 } from "@/services/observability/types"
 import {useEffect, useState} from "react"
 import {buildNodeTree, observabilityTransformer} from "../helpers/observability_helpers"
-import {useRouter} from "next/router"
 
 export const useTraces = () => {
     const [traces, setTraces] = useState<_AgentaRootsResponse[]>([])
     const [isLoadingTraces, setIsLoadingTraces] = useState(true)
-    const router = useRouter()
-    const projectId = router.query.project_id
 
     const fetchTraces = async () => {
         try {
             setIsLoadingTraces(true)
-            const data = await fetchAllTraces(projectId as string)
+            const data = await fetchAllTraces()
 
             const transformedTraces: _AgentaRootsResponse[] = []
 
diff --git a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
index ba65519cd8..fc59c7c895 100644
--- a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
@@ -370,7 +370,7 @@ const ObservabilityDashboard = ({}: Props) => {
         try {
             const fetchAllTraces = async () => {
                 const response = await axios.get(
-                    `${getAgentaApiUrl()}/api/observability/v1/traces/search?project_id=0192c229-3760-759d-a637-959921135050&${query}`,
+                    `${getAgentaApiUrl()}/api/observability/v1/traces/search?${query}`,
                 )
                 return response.data
             }
@@ -471,13 +471,13 @@ const ObservabilityDashboard = ({}: Props) => {
 
                 const fetchAllFilteredTraces = async () => {
                     const response = await axios.get(
-                        `${getAgentaApiUrl()}/api/observability/v1/traces/search?project_id=0192c229-3760-759d-a637-959921135050&${focusPoint}&filtering={"conditions":${JSON.stringify(filters)}}`,
+                        `${getAgentaApiUrl()}/api/observability/v1/traces/search?${focusPoint}&filtering={"conditions":${JSON.stringify(filters)}}`,
                     )
                     return response.data
                 }
                 const fetchAllTraces = async () => {
                     const response = await axios.get(
-                        `${getAgentaApiUrl()}/api/observability/v1/traces/search?project_id=0192c229-3760-759d-a637-959921135050&${focusPoint}`,
+                        `${getAgentaApiUrl()}/api/observability/v1/traces/search?${focusPoint}`,
                     )
                     return response.data
                 }
diff --git a/agenta-web/src/services/observability/core/index.ts b/agenta-web/src/services/observability/core/index.ts
index ca92701ace..4234fd8cce 100644
--- a/agenta-web/src/services/observability/core/index.ts
+++ b/agenta-web/src/services/observability/core/index.ts
@@ -9,9 +9,7 @@ import axios from "@/lib/helpers/axiosConfig"
 //  - update: PUT data to server
 //  - delete: DELETE data from server
 
-export const fetchAllTraces = async (projectId: string) => {
-    const response = await axios.get(
-        `${getAgentaApiUrl()}/api/observability/v1/traces/search?project_id=${projectId}`,
-    )
+export const fetchAllTraces = async () => {
+    const response = await axios.get(`${getAgentaApiUrl()}/api/observability/v1/traces/search`)
     return response.data
 }

From 147bf8647b34fc7a8fe57f2676b6903002d6dbee Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashrafdev365@gmail.com>
Date: Mon, 28 Oct 2024 21:35:57 +0600
Subject: [PATCH 15/16] enhance(frontend): sort data functionalities

---
 agenta-web/src/components/Filters/Sort.tsx    | 78 +++++++++++++++----
 .../observability/drawer/TraceContent.tsx     |  4 +-
 .../apps/[app_id]/observability/index.tsx     | 36 +++------
 3 files changed, 77 insertions(+), 41 deletions(-)

diff --git a/agenta-web/src/components/Filters/Sort.tsx b/agenta-web/src/components/Filters/Sort.tsx
index a8ee1e2fa5..09b63b0c93 100644
--- a/agenta-web/src/components/Filters/Sort.tsx
+++ b/agenta-web/src/components/Filters/Sort.tsx
@@ -2,7 +2,7 @@ import React, {useState} from "react"
 import {CaretRight, Clock, Calendar} from "@phosphor-icons/react"
 import {DatePicker, Button, Typography, Divider, Popover} from "antd"
 import {JSSTheme, SortTypes} from "@/lib/Types"
-import {Dayjs} from "dayjs"
+import dayjs, {Dayjs} from "dayjs"
 import type {SelectProps} from "antd"
 import {createUseStyles} from "react-jss"
 
@@ -42,13 +42,21 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
     },
 }))
 
+export type SortResult = {
+    type: "custom" | "standerd"
+    sorted: string
+    customRange?: {startTime: string; endTime: string}
+}
+
 type Props = {
     onSortApply: ({
-        sortData,
-        customSortData,
+        type,
+        sorted,
+        customRange,
     }: {
-        sortData: SortTypes
-        customSortData?: CustomTimeRange
+        type: "custom" | "standerd"
+        sorted: string
+        customRange?: {startTime: string; endTime: string}
     }) => void
     defaultSortValue: SortTypes
 }
@@ -67,13 +75,62 @@ const Sort: React.FC<Props> = ({onSortApply, defaultSortValue}) => {
         customTime.startTime == null ? false : true,
     )
 
+    const apply = ({
+        sortData,
+        customRange,
+    }: {
+        sortData: SortTypes
+        customRange?: CustomTimeRange
+    }) => {
+        let sortedTime
+        let customRangeTime
+
+        if (sortData && sortData !== "custom" && sortData !== "all time") {
+            const now = dayjs().utc()
+
+            // Split the value into number and unit (e.g., "30 minutes" becomes ["30", "minutes"])
+            const [amount, unit] = (sortData as SortTypes).split(" ")
+            sortedTime = now
+                .subtract(parseInt(amount), unit as dayjs.ManipulateType)
+                .toISOString()
+                .split(".")[0]
+        } else if (customRange?.startTime && sortData == "custom") {
+            customRangeTime = {
+                startTime: customRange.startTime.toISOString().split(".")[0],
+                endTime: customRange.endTime?.toISOString().split(".")[0] as string,
+            }
+        } else if (sortData === "all time") {
+            sortedTime = "1970-01-01T00:00:00"
+        }
+
+        onSortApply({
+            type: sortData == "custom" ? "custom" : "standerd",
+            sorted: sortedTime as string,
+            customRange: customRangeTime,
+        })
+    }
+
     const handleApplyCustomRange = () => {
         if (customTime.startTime && customTime.endTime) {
-            onSortApply({sortData: sort, customSortData: customTime})
+            apply({sortData: "custom", customRange: customTime})
             setDropdownVisible(false)
         }
     }
 
+    const onSelectItem = (item: any) => {
+        setTimeout(() => {
+            setCustomOptionSelected(false)
+        }, 500)
+
+        if (customTime.startTime) {
+            setCustomTime({startTime: null, endTime: null})
+        }
+
+        setDropdownVisible(false)
+        setSort(item.value as SortTypes)
+        apply({sortData: item.value as SortTypes})
+    }
+
     const options: SelectProps["options"] = [
         {value: "30 minutes", label: "30 mins"},
         {value: "1 hour", label: "1 hour"},
@@ -110,14 +167,7 @@ const Sort: React.FC<Props> = ({onSortApply, defaultSortValue}) => {
                                 {options.map((item) => (
                                     <div
                                         key={item.value}
-                                        onClick={() => {
-                                            setTimeout(() => {
-                                                setCustomOptionSelected(false)
-                                            }, 500)
-                                            setDropdownVisible(false)
-                                            setSort(item.value as SortTypes)
-                                            onSortApply({sortData: item.value as SortTypes})
-                                        }}
+                                        onClick={() => onSelectItem(item)}
                                         className={`${classes.popupItems} ${sort === item.value && classes.popupSelectedItem}`}
                                     >
                                         {item.label}
diff --git a/agenta-web/src/components/pages/observability/drawer/TraceContent.tsx b/agenta-web/src/components/pages/observability/drawer/TraceContent.tsx
index daafc29f26..5e383af457 100644
--- a/agenta-web/src/components/pages/observability/drawer/TraceContent.tsx
+++ b/agenta-web/src/components/pages/observability/drawer/TraceContent.tsx
@@ -222,10 +222,10 @@ const TraceContent = ({activeTrace}: TraceContentProps) => {
                         </Typography.Text>
 
                         <Space>
-                            {!activeTrace.parent && activeTrace.refs?.application.id && (
+                            {!activeTrace.parent && activeTrace.refs?.application_id && (
                                 <Button
                                     className="flex items-center"
-                                    href={`/apps/${activeTrace.refs.application.id}/playground`}
+                                    href={`/apps/${activeTrace.refs.application_id}/playground`}
                                 >
                                     <Rocket size={14} />
                                     Open in playground
diff --git a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
index fc59c7c895..621dac035f 100644
--- a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
@@ -6,7 +6,7 @@ import TraceContent from "@/components/pages/observability/drawer/TraceContent"
 import TraceHeader from "@/components/pages/observability/drawer/TraceHeader"
 import TraceTree from "@/components/pages/observability/drawer/TraceTree"
 import Filters from "@/components/Filters/Filters"
-import Sort from "@/components/Filters/Sort"
+import Sort, {SortResult} from "@/components/Filters/Sort"
 import EditColumns from "@/components/Filters/EditColumns"
 import ResultTag from "@/components/ResultTag/ResultTag"
 import {ResizableTitle} from "@/components/ServerTable/components"
@@ -341,30 +341,13 @@ const ObservabilityDashboard = ({}: Props) => {
         {value: "otel.kind", label: "otel.kind"},
     ]
 
-    const onSortApply = async ({
-        sortData,
-        customSortData,
-    }: {
-        sortData: SortTypes
-        customSortData?: any
-    }) => {
-        let time
+    const onSortApply = async ({type, sorted, customRange}: SortResult) => {
         let query: string
-        if (sortData !== "custom" && sortData && sortData !== "all time") {
-            const now = dayjs().utc() // Get the current UTC time
-
-            // Split the value into number and unit (e.g., "30 minutes" becomes ["30", "minutes"])
-            const [amount, unit] = sortData.split(" ")
-            time = now
-                .subtract(parseInt(amount), unit as dayjs.ManipulateType)
-                .toISOString()
-                .split(".")[0]
-            query = `&earliest=${time}`
-        } else if (customSortData?.startTime && sortData == "custom") {
-            query = `earliest=${customSortData.startTime.toISOString().split(".")[0]}&latest=${customSortData.endTime.toISOString().split(".")[0]}`
-        } else if (sortData === "all time") {
-            time = "1970-01-01T00:00:00"
-            query = `&earliest=${time}`
+
+        if (type === "standerd") {
+            query = `&earliest=${sorted}`
+        } else if (type == "custom" && customRange?.startTime) {
+            query = `earliest=${customRange.startTime}&latest=${customRange.endTime}`
         }
 
         try {
@@ -442,7 +425,9 @@ const ObservabilityDashboard = ({}: Props) => {
     // Sync traceTabs with filters state
     useUpdateEffect(() => {
         const nodeTypeFilter = filters.find((f) => f.key === "node.type")
-        setTraceTabs(nodeTypeFilter?.value ? (nodeTypeFilter.value as TraceTabTypes) : "tree")
+        setTraceTabs((prev) =>
+            nodeTypeFilter?.value ? (nodeTypeFilter.value as TraceTabTypes) : prev,
+        )
     }, [filters])
 
     const updateFilter = ({
@@ -523,6 +508,7 @@ const ObservabilityDashboard = ({}: Props) => {
     const onClearFilter = async () => {
         setFilters([])
         setSearchQuery("")
+
         if (traceTabs === "chat") {
             setTraceTabs("tree")
         }

From 57fbf23a16d806214f0d7631993e89bd39a3d209 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashrafdev365@gmail.com>
Date: Mon, 28 Oct 2024 22:55:24 +0600
Subject: [PATCH 16/16] enhance(frontend): synced all quaries with a single
 endpoint

---
 agenta-web/src/components/Filters/Sort.tsx    |  8 +-
 .../apps/[app_id]/observability/index.tsx     | 75 ++++++++-----------
 2 files changed, 34 insertions(+), 49 deletions(-)

diff --git a/agenta-web/src/components/Filters/Sort.tsx b/agenta-web/src/components/Filters/Sort.tsx
index 09b63b0c93..9dee076576 100644
--- a/agenta-web/src/components/Filters/Sort.tsx
+++ b/agenta-web/src/components/Filters/Sort.tsx
@@ -118,6 +118,10 @@ const Sort: React.FC<Props> = ({onSortApply, defaultSortValue}) => {
     }
 
     const onSelectItem = (item: any) => {
+        setDropdownVisible(false)
+        setSort(item.value as SortTypes)
+        apply({sortData: item.value as SortTypes})
+
         setTimeout(() => {
             setCustomOptionSelected(false)
         }, 500)
@@ -125,10 +129,6 @@ const Sort: React.FC<Props> = ({onSortApply, defaultSortValue}) => {
         if (customTime.startTime) {
             setCustomTime({startTime: null, endTime: null})
         }
-
-        setDropdownVisible(false)
-        setSort(item.value as SortTypes)
-        apply({sortData: item.value as SortTypes})
     }
 
     const options: SelectProps["options"] = [
diff --git a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
index 621dac035f..c5f1972a75 100644
--- a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
@@ -74,6 +74,7 @@ const ObservabilityDashboard = ({}: Props) => {
     const [traceTabs, setTraceTabs] = useState<TraceTabTypes>("tree")
     const [editColumns, setEditColumns] = useState<string[]>(["span_type"])
     const [filters, setFilters] = useState<Filter[]>([])
+    const [sort, setSort] = useState<SortResult>({} as SortResult)
     const [isFilterColsDropdownOpen, setIsFilterColsDropdownOpen] = useState(false)
     const [pagination, setPagination] = useState({current: 1, page: 10})
     const [columns, setColumns] = useState<ColumnsType<_AgentaRootsResponse>>([
@@ -342,28 +343,7 @@ const ObservabilityDashboard = ({}: Props) => {
     ]
 
     const onSortApply = async ({type, sorted, customRange}: SortResult) => {
-        let query: string
-
-        if (type === "standerd") {
-            query = `&earliest=${sorted}`
-        } else if (type == "custom" && customRange?.startTime) {
-            query = `earliest=${customRange.startTime}&latest=${customRange.endTime}`
-        }
-
-        try {
-            const fetchAllTraces = async () => {
-                const response = await axios.get(
-                    `${getAgentaApiUrl()}/api/observability/v1/traces/search?${query}`,
-                )
-                return response.data
-            }
-
-            const data = await fetchAllTraces()
-
-            setTraces(data.trees.flatMap((item: AgentaTreeDTO) => observabilityTransformer(item)))
-        } catch (error) {
-            console.log(error)
-        }
+        setSort({type, sorted, customRange})
     }
 
     const handleToggleColumnVisibility = (key: string) => {
@@ -446,33 +426,38 @@ const ObservabilityDashboard = ({}: Props) => {
         })
     }
 
+    const fetchFilterdTrace = async () => {
+        const focusPoint = traceTabs !== "chat" ? `focus=${traceTabs}` : ""
+        const filterQuery = filters[0]?.operator
+            ? `&filtering={"conditions":${JSON.stringify(filters)}}`
+            : ""
+        const paginationQuery = `&size=${pagination.page}&page=${pagination.current}`
+        let sortQuery
+
+        if (sort && sort.type === "standerd") {
+            sortQuery = `&earliest=${sort.sorted}`
+        } else if (sort && sort.type == "custom" && sort.customRange?.startTime) {
+            sortQuery = `&earliest=${sort.customRange.startTime}&latest=${sort.customRange.endTime}`
+        } else {
+            sortQuery = ""
+        }
+
+        try {
+            const response = await axios.get(
+                `${getAgentaApiUrl()}/api/observability/v1/traces/search?${focusPoint}${paginationQuery}${sortQuery}${filterQuery}`,
+            )
+            return response.data
+        } catch (error) {
+            console.log(error)
+        }
+    }
+
     useUpdateEffect(() => {
         const filterTraceData = async () => {
             try {
                 setIsLoadingTraces(true)
 
-                let data
-                const focusPoint = traceTabs !== "chat" ? `focus=${traceTabs}` : ""
-
-                const fetchAllFilteredTraces = async () => {
-                    const response = await axios.get(
-                        `${getAgentaApiUrl()}/api/observability/v1/traces/search?${focusPoint}&filtering={"conditions":${JSON.stringify(filters)}}`,
-                    )
-                    return response.data
-                }
-                const fetchAllTraces = async () => {
-                    const response = await axios.get(
-                        `${getAgentaApiUrl()}/api/observability/v1/traces/search?${focusPoint}`,
-                    )
-                    return response.data
-                }
-
-                if (filters.length > 0 && filters[0].value) {
-                    data = await fetchAllFilteredTraces()
-                } else {
-                    data = await fetchAllTraces()
-                }
-
+                const data = await fetchFilterdTrace()
                 const transformedTraces: _AgentaRootsResponse[] = []
 
                 if (data?.trees) {
@@ -499,7 +484,7 @@ const ObservabilityDashboard = ({}: Props) => {
             }
         }
         filterTraceData()
-    }, [filters, traceTabs])
+    }, [filters, traceTabs, sort, pagination])
 
     const onApplyFilter = async (newFilters: Filter[]) => {
         setFilters(newFilters)