init advanced filter dialog

components/project/traces/trace-filter.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"; // Adjust the import path as needed
+import {
+  ChromaDBMethods,
+  Event,
+  OpenAIMethods,
+  PineconeMethods,
+} from "@langtrase/trace-attributes";
+import { Button, Checkbox, FormControlLabel } from "@mui/material";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import * as React from "react";
+
+interface FilterDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onApplyFilters: (filters: any) => void;
+}
+
+type FilterTypes = Event | OpenAIMethods | ChromaDBMethods | PineconeMethods;
+
+export function FilterDialog({
+  open,
+  onClose,
+  onApplyFilters,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onApplyFilters: (filters: any) => void;
+}) {
+  const [selectedFilters, setSelectedFilters] = React.useState<FilterTypes[]>(
+    []
+  );
+  const [showEvents, setShowEvents] = React.useState<boolean>(false);
+  const [showOpenAI, setShowOpenAI] = React.useState<boolean>(false);
+  const [showChromaDB, setShowChromaDB] = React.useState<boolean>(false);
+  const [showPinecone, setShowPinecone] = React.useState<boolean>(false);
+
+  const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value as FilterTypes;
+    setSelectedFilters((prev) => {
+      if (prev.includes(value)) {
+        return prev.filter((e) => e !== value);
+      }
+      return [...prev, value];
+    });
+  };
+
+  const applyFilters = () => {
+    onApplyFilters({
+      filters: selectedFilters,
+    });
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Filter Traces</DialogTitle>
+          <DialogDescription>
+            Select filters to apply to the traces.
+          </DialogDescription>
+        </DialogHeader>
+        <div>
+          <h4
+            onClick={() => setShowEvents(!showEvents)}
+            className="cursor-pointer flex items-center"
+          >
+            Events
+            <ChevronDownIcon className="ml-2 h-4 w-4" />
+          </h4>
+          {showEvents &&
+            Object.values(Event).map((event) => (
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={selectedFilters.includes(event)}
+                    onChange={handleFilterChange}
+                    value={event}
+                  />
+                }
+                label={event}
+                key={event}
+              />
+            ))}
+        </div>
+        <div>
+          <h4
+            onClick={() => setShowOpenAI(!showOpenAI)}
+            className="cursor-pointer flex items-center"
+          >
+            OpenAI
+            <ChevronDownIcon className="ml-2 h-4 w-4" />
+          </h4>
+          {showOpenAI &&
+            Object.values(OpenAIMethods).map((method) => (
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={selectedFilters.includes(method)}
+                    onChange={handleFilterChange}
+                    value={method}
+                  />
+                }
+                label={method}
+                key={method}
+              />
+            ))}
+        </div>
+        <div>
+          <h4
+            onClick={() => setShowChromaDB(!showChromaDB)}
+            className="cursor-pointer flex items-center"
+          >
+            ChromaDB
+            <ChevronDownIcon className="ml-2 h-4 w-4" />
+          </h4>
+          {showChromaDB &&
+            Object.values(ChromaDBMethods).map((method) => (
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={selectedFilters.includes(method)}
+                    onChange={handleFilterChange}
+                    value={method}
+                  />
+                }
+                label={method}
+                key={method}
+              />
+            ))}
+        </div>
+        <div>
+          <h4
+            onClick={() => setShowPinecone(!showPinecone)}
+            className="cursor-pointer flex items-center"
+          >
+            Pinecone
+            <ChevronDownIcon className="ml-2 h-4 w-4" />
+          </h4>
+          {showPinecone &&
+            Object.values(PineconeMethods).map((method) => (
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={selectedFilters.includes(method)}
+                    onChange={handleFilterChange}
+                    value={method}
+                  />
+                }
+                label={method}
+                key={method}
+              />
+            ))}
+        </div>
+        <DialogFooter>
+          <Button onClick={onClose}>Cancel</Button>
+          <Button onClick={applyFilters} color="primary">
+            Apply Filters
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default FilterDialog;

components/project/traces/traces.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import { TraceRow } from "@/components/project/traces/trace-row";
+import { Button } from "@/components/ui/button";
 import { PAGE_SIZE } from "@/lib/constants";
 import { PropertyFilter } from "@/lib/services/query_builder_service";
+import FilterListIcon from "@mui/icons-material/FilterList";
 import { useParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useBottomScrollListener } from "react-bottom-scroll-listener";
@@ -14,6 +16,7 @@ import { Checkbox } from "../../ui/checkbox";
 import { Label } from "../../ui/label";
 import { Separator } from "../../ui/separator";
 import { Switch } from "../../ui/switch";
+import { FilterDialog } from "./trace-filter";
 import TraceRowSkeleton from "./trace-row-skeleton";
 
 export default function Traces({ email }: { email: string }) {
@@ -25,6 +28,7 @@ export default function Traces({ email }: { email: string }) {
   const [filters, setFilters] = useState<PropertyFilter[]>([]);
   const [enableFetch, setEnableFetch] = useState(false);
   const [utcTime, setUtcTime] = useState(true);
+  const [isFilterDialogOpen, setIsFilterDialogOpen] = useState(true);
 
   useEffect(() => {
     setShowLoader(true);
@@ -127,6 +131,18 @@ export default function Traces({ email }: { email: string }) {
     },
   ];
 
+  const handleFilterDialogOpen = () => {
+    setIsFilterDialogOpen(true);
+  };
+
+  const handleFilterDialogClose = () => {
+    setIsFilterDialogOpen(false);
+  };
+
+  const handleApplyFilters = (newFilters: any) => {
+    setFilters(newFilters);
+  };
+
   return (
     <div className="w-full py-6 px-6 flex flex-col gap-4">
       <div className="flex justify-between items-center px-12 bg-muted py-4 rounded-md">
@@ -160,6 +176,15 @@ export default function Traces({ email }: { email: string }) {
               </label>
             </div>
           ))}
+          <div>
+            <Button
+              className="h-5 w-3 dark:bg-black bg-muted border border-black hover:bg-secondary"
+              onClick={() => setIsFilterDialogOpen(true)}
+            >
+              <FilterListIcon className="cursor-pointer h-4 text-black" />
+            </Button>
+            <label className="text-xs font-semibold px-2">Filters</label>
+          </div>
         </div>
         <div className="flex gap-2 items-center">
           <Label>Local time</Label>
@@ -219,6 +244,11 @@ export default function Traces({ email }: { email: string }) {
             )}
         </div>
       )}
+      <FilterDialog
+        open={true}
+        onClose={handleFilterDialogClose}
+        onApplyFilters={handleApplyFilters}
+      />
     </div>
   );
 }

package.json

@@ -27,7 +27,7 @@
 		"@headlessui/react": "^1.7.18",
 		"@headlessui/tailwindcss": "^0.2.0",
 		"@hookform/resolvers": "^3.3.4",
-		"@langtrase/trace-attributes": "^1.0.33",
+		"@langtrase/trace-attributes": "^1.0.53",
 		"@mui/icons-material": "^5.15.14",
 		"@mui/material": "^5.15.14",
 		"@mui/x-tree-view": "^6.17.0",