fix(date-picker): ensure date range automatically applies on selectio…

…n for dashboard and request pages
Helicone · Oct 8, 2024 · 84bd865 · 84bd865
1 parent f7b37ab
commit 84bd865
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 26 deletions.
diff --git a/web/components/shared/themed/themedTimeFilterShadCN.tsx b/web/components/shared/themed/themedTimeFilterShadCN.tsx
@@ -89,6 +89,10 @@ export function ThemedTimeFilterShadCN({
 
   const handleDateChange = (newDate: DateRange | undefined) => {
     if (newDate?.from && newDate?.to) {
+      if (newDate.from > newDate.to) {
+        // Swap dates if from is after to
+        [newDate.from, newDate.to] = [newDate.to, newDate.from];
+      }
       const daysDifference = differenceInDays(newDate.to, newDate.from);
       if (daysDifference > 31 && !hasAccess) {
         setIsDialogOpen(true);
@@ -188,14 +192,18 @@ export function ThemedTimeFilterShadCN({
                 type="number"
                 min="1"
                 value={customNumber}
-                onChange={(e) => setCustomNumber(parseInt(e.target.value) || 1)}
+                onChange={(e) => {
+                  setCustomNumber(parseInt(e.target.value) || 1);
+                  handleCustomRangeChange();
+                }}
                 className="w-16 px-2 py-1 border rounded text-xs"
               />
               <Select
                 value={customUnit}
-                onValueChange={(value: "hour" | "day" | "week") =>
-                  setCustomUnit(value)
-                }
+                onValueChange={(value: "hour" | "day" | "week") => {
+                  setCustomUnit(value);
+                  handleCustomRangeChange();
+                }}
               >
                 <SelectTrigger className="w-[100px] text-xs">
                   <SelectValue />
@@ -212,13 +220,6 @@ export function ThemedTimeFilterShadCN({
                   </SelectItem>
                 </SelectContent>
               </Select>
-              <Button
-                onClick={handleCustomRangeChange}
-                size="sm_sleek"
-                variant={"ghost"}
-              >
-                Apply
-              </Button>
             </div>
           </div>
 

diff --git a/web/components/templates/dashboard/dashboardPage.tsx b/web/components/templates/dashboard/dashboardPage.tsx
@@ -299,6 +299,24 @@ const DashboardPage = (props: DashboardPageProps) => {
     },
     [encodeFilters, refetch]
   );
+
+  const onTimeSelectHandler = (newDate: DateRange | undefined) => {
+    if (newDate?.from && newDate?.to) {
+      const start = newDate.from;
+      const end = newDate.to;
+      searchParams.set(
+        "t",
+        `custom_${start.toISOString()}_${end.toISOString()}`
+      );
+      setInterval("custom");
+      setTimeFilter({
+        start,
+        end,
+      });
+      debouncedRefetch(); // Use debounced refetch
+    }
+  };
+
   const metricsData: MetricsPanelProps["metric"][] = [
     {
       id: "cost-req",
@@ -579,6 +597,7 @@ const DashboardPage = (props: DashboardPageProps) => {
                     });
                   }
                 },
+                onDateChange: onTimeSelectHandler,
               }}
               advancedFilter={{
                 filterMap,

diff --git a/web/components/templates/requestsV2/requestsPageV2.tsx b/web/components/templates/requestsV2/requestsPageV2.tsx
@@ -553,37 +553,31 @@ const RequestsPageV2 = (props: RequestsPageV2Props) => {
     }
   }, [router.query.page, page]);
 
-  const onTimeSelectHandler = (key: TimeInterval, value: string) => {
-    const tableName = getTableName(isCached);
-    const createdAtColumn = getCreatedAtColumn(isCached);
-    if (key === "custom") {
-      const [start, end] = value.split("_");
+  const onTimeSelectHandler = (newDate: DateRange | undefined) => {
+    if (newDate?.from && newDate?.to) {
+      const start = newDate.from;
+      const end = newDate.to;
+      const tableName = getTableName(isCached);
+      const createdAtColumn = getCreatedAtColumn(isCached);
       const filter: FilterNode = {
         left: {
           [tableName]: {
             [createdAtColumn]: {
-              gte: new Date(start).toISOString(),
+              gte: start.toISOString(),
             },
           },
         },
         operator: "and",
         right: {
           [tableName]: {
             [createdAtColumn]: {
-              lte: new Date(end).toISOString(),
+              lte: end.toISOString(),
             },
           },
         },
       };
       setTimeFilter(filter);
-    } else {
-      setTimeFilter({
-        [tableName]: {
-          [createdAtColumn]: {
-            gte: new Date(getTimeIntervalAgo(key)).toISOString(),
-          },
-        },
-      });
+      debouncedRefetch(); // Use debounced refetch
     }
   };