From d5884e8d285dfbe3dba85a843962fcfe22b29c3b Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Sat, 23 Nov 2024 11:35:00 -0800
Subject: [PATCH] Ensure daterange not consistently re rendered (#3229)

* ensure daterange not consistently re rendered

* minor clean up
---
 .../admin/performance/DateRangeSelector.tsx   |   8 +-
 web/src/app/ee/admin/performance/lib.ts       |  24 ++--
 .../query-history/QueryHistoryTable.tsx       | 112 +++++++++---------
 3 files changed, 73 insertions(+), 71 deletions(-)

diff --git a/web/src/app/ee/admin/performance/DateRangeSelector.tsx b/web/src/app/ee/admin/performance/DateRangeSelector.tsx
index 5947d1b36cf..51f510e15ae 100644
--- a/web/src/app/ee/admin/performance/DateRangeSelector.tsx
+++ b/web/src/app/ee/admin/performance/DateRangeSelector.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React, { memo, useMemo, useState } from "react";
 import { Calendar } from "@/components/ui/calendar";
 import {
   Popover,
@@ -11,7 +11,6 @@ import { CalendarIcon } from "lucide-react";
 import { format } from "date-fns";
 import { getXDaysAgo } from "./dateUtils";
 import { Separator } from "@/components/ui/separator";
-import { useState } from "react";
 
 export const THIRTY_DAYS = "30d";
 
@@ -26,7 +25,7 @@ export type DateRange =
     }
   | undefined;
 
-export function DateRangeSelector({
+export const DateRangeSelector = memo(function DateRangeSelector({
   value,
   onValueChange,
 }: {
@@ -99,7 +98,6 @@ export function DateRangeSelector({
                 className="w-full justify-start"
                 onClick={() => {
                   onValueChange(preset.value);
-                  setIsOpen(false);
                 }}
               >
                 {preset.label}
@@ -110,4 +108,4 @@ export function DateRangeSelector({
       </Popover>
     </div>
   );
-}
+});
diff --git a/web/src/app/ee/admin/performance/lib.ts b/web/src/app/ee/admin/performance/lib.ts
index d9068b466ff..0837df1dea0 100644
--- a/web/src/app/ee/admin/performance/lib.ts
+++ b/web/src/app/ee/admin/performance/lib.ts
@@ -15,7 +15,7 @@ import {
   convertDateToStartOfDay,
   getXDaysAgo,
 } from "./dateUtils";
-import { THIRTY_DAYS } from "./DateRangeSelector";
+import { DateRange, THIRTY_DAYS } from "./DateRangeSelector";
 import { DateRangePickerValue } from "@/app/ee/admin/performance/DateRangeSelector";
 
 export const useTimeRange = () => {
@@ -65,25 +65,23 @@ export const useDanswerBotAnalytics = (timeRange: DateRangePickerValue) => {
   };
 };
 
-export const useQueryHistory = () => {
-  const [selectedFeedbackType, setSelectedFeedbackType] =
-    useState<Feedback | null>(null);
-  const [timeRange, setTimeRange] = useTimeRange();
-
+export const useQueryHistory = ({
+  selectedFeedbackType,
+  timeRange,
+}: {
+  selectedFeedbackType: Feedback | null;
+  timeRange: DateRange;
+}) => {
   const url = buildApiPath("/api/admin/chat-session-history", {
     feedback_type: selectedFeedbackType,
-    start: convertDateToStartOfDay(timeRange.from)?.toISOString(),
-    end: convertDateToEndOfDay(timeRange.to)?.toISOString(),
+    start: convertDateToStartOfDay(timeRange?.from)?.toISOString(),
+    end: convertDateToEndOfDay(timeRange?.to)?.toISOString(),
   });
+
   const swrResponse = useSWR<ChatSessionMinimal[]>(url, errorHandlingFetcher);
 
   return {
     ...swrResponse,
-    selectedFeedbackType,
-    setSelectedFeedbackType: (feedbackType: Feedback | "all") =>
-      setSelectedFeedbackType(feedbackType === "all" ? null : feedbackType),
-    timeRange,
-    setTimeRange,
     refreshQueryHistory: () => mutate(url),
   };
 };
diff --git a/web/src/app/ee/admin/performance/query-history/QueryHistoryTable.tsx b/web/src/app/ee/admin/performance/query-history/QueryHistoryTable.tsx
index 55ede0e8b31..e07059db45d 100644
--- a/web/src/app/ee/admin/performance/query-history/QueryHistoryTable.tsx
+++ b/web/src/app/ee/admin/performance/query-history/QueryHistoryTable.tsx
@@ -1,4 +1,4 @@
-import { useQueryHistory } from "../lib";
+import { useQueryHistory, useTimeRange } from "../lib";
 import { Separator } from "@/components/ui/separator";
 import {
   Table,
@@ -21,9 +21,9 @@ import { ThreeDotsLoader } from "@/components/Loading";
 import { ChatSessionMinimal } from "../usage/types";
 import { timestampToReadableDate } from "@/lib/dateUtils";
 import { FiFrown, FiMinus, FiSmile } from "react-icons/fi";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { Feedback } from "@/lib/types";
-import { DateRangeSelector } from "../DateRangeSelector";
+import { DateRange, DateRangeSelector } from "../DateRangeSelector";
 import { PageSelector } from "@/components/PageSelector";
 import Link from "next/link";
 import { FeedbackBadge } from "./FeedbackBadge";
@@ -116,56 +116,65 @@ function SelectFeedbackType({
 }
 
 export function QueryHistoryTable() {
-  const {
-    data: chatSessionData,
-    selectedFeedbackType,
-    setSelectedFeedbackType,
+  const [selectedFeedbackType, setSelectedFeedbackType] = useState<
+    Feedback | "all"
+  >("all");
+  const [timeRange, setTimeRange] = useTimeRange();
+
+  const { data: chatSessionData } = useQueryHistory({
+    selectedFeedbackType:
+      selectedFeedbackType === "all" ? null : selectedFeedbackType,
     timeRange,
-    setTimeRange,
-  } = useQueryHistory();
+  });
 
   const [page, setPage] = useState(1);
 
+  const onTimeRangeChange = useCallback(
+    (value: DateRange) => {
+      if (value) {
+        setTimeRange((prevTimeRange) => ({
+          ...prevTimeRange,
+          from: new Date(value.from),
+          to: new Date(value.to),
+        }));
+      }
+    },
+    [setTimeRange]
+  );
+
   return (
     <CardSection className="mt-8">
-      {chatSessionData ? (
-        <>
-          <div className="flex">
-            <div className="gap-y-3 flex flex-col">
-              <SelectFeedbackType
-                value={selectedFeedbackType || "all"}
-                onValueChange={setSelectedFeedbackType}
-              />
+      <>
+        <div className="flex">
+          <div className="gap-y-3 flex flex-col">
+            <SelectFeedbackType
+              value={selectedFeedbackType || "all"}
+              onValueChange={setSelectedFeedbackType}
+            />
 
-              <DateRangeSelector
-                value={timeRange}
-                onValueChange={(value) => {
-                  if (value) {
-                    setTimeRange({
-                      ...value,
-                      selectValue: timeRange.selectValue,
-                    });
-                  }
-                }}
-              />
-            </div>
-
-            <DownloadAsCSV />
+            <DateRangeSelector
+              value={timeRange}
+              onValueChange={onTimeRangeChange}
+            />
           </div>
-          <Separator />
-          <Table className="mt-5">
-            <TableHeader>
-              <TableRow>
-                <TableHead>First User Message</TableHead>
-                <TableHead>First AI Response</TableHead>
-                <TableHead>Feedback</TableHead>
-                <TableHead>User</TableHead>
-                <TableHead>Persona</TableHead>
-                <TableHead>Date</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {chatSessionData
+
+          <DownloadAsCSV />
+        </div>
+        <Separator />
+        <Table className="mt-5">
+          <TableHeader>
+            <TableRow>
+              <TableHead>First User Message</TableHead>
+              <TableHead>First AI Response</TableHead>
+              <TableHead>Feedback</TableHead>
+              <TableHead>User</TableHead>
+              <TableHead>Persona</TableHead>
+              <TableHead>Date</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {chatSessionData &&
+              chatSessionData
                 .slice(NUM_IN_PAGE * (page - 1), NUM_IN_PAGE * page)
                 .map((chatSessionMinimal) => (
                   <QueryHistoryTableRow
@@ -173,9 +182,10 @@ export function QueryHistoryTable() {
                     chatSessionMinimal={chatSessionMinimal}
                   />
                 ))}
-            </TableBody>
-          </Table>
+          </TableBody>
+        </Table>
 
+        {chatSessionData && (
           <div className="mt-3 flex">
             <div className="mx-auto">
               <PageSelector
@@ -192,12 +202,8 @@ export function QueryHistoryTable() {
               />
             </div>
           </div>
-        </>
-      ) : (
-        <div className="h-80 flex flex-col">
-          <ThreeDotsLoader />
-        </div>
-      )}
+        )}
+      </>
     </CardSection>
   );
 }