Skip to content

Commit

Permalink
Ensure daterange not consistently re rendered (onyx-dot-app#3229)
Browse files Browse the repository at this point in the history
* ensure daterange not consistently re rendered

* minor clean up
  • Loading branch information
pablonyx authored and ahmadassaf committed Nov 25, 2024
1 parent 3a09eeb commit d5884e8
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 71 deletions.
8 changes: 3 additions & 5 deletions web/src/app/ee/admin/performance/DateRangeSelector.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import * as React from "react";
import React, { memo, useMemo, useState } from "react";
import { Calendar } from "@/components/ui/calendar";
import {
Popover,
Expand All @@ -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";

Expand All @@ -26,7 +25,7 @@ export type DateRange =
}
| undefined;

export function DateRangeSelector({
export const DateRangeSelector = memo(function DateRangeSelector({
value,
onValueChange,
}: {
Expand Down Expand Up @@ -99,7 +98,6 @@ export function DateRangeSelector({
className="w-full justify-start"
onClick={() => {
onValueChange(preset.value);
setIsOpen(false);
}}
>
{preset.label}
Expand All @@ -110,4 +108,4 @@ export function DateRangeSelector({
</Popover>
</div>
);
}
});
24 changes: 11 additions & 13 deletions web/src/app/ee/admin/performance/lib.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -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),
};
};
Expand Down
112 changes: 59 additions & 53 deletions web/src/app/ee/admin/performance/query-history/QueryHistoryTable.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useQueryHistory } from "../lib";
import { useQueryHistory, useTimeRange } from "../lib";
import { Separator } from "@/components/ui/separator";
import {
Table,
Expand All @@ -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";
Expand Down Expand Up @@ -116,66 +116,76 @@ 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
key={chatSessionMinimal.id}
chatSessionMinimal={chatSessionMinimal}
/>
))}
</TableBody>
</Table>
</TableBody>
</Table>

{chatSessionData && (
<div className="mt-3 flex">
<div className="mx-auto">
<PageSelector
Expand All @@ -192,12 +202,8 @@ export function QueryHistoryTable() {
/>
</div>
</div>
</>
) : (
<div className="h-80 flex flex-col">
<ThreeDotsLoader />
</div>
)}
)}
</>
</CardSection>
);
}

0 comments on commit d5884e8

Please sign in to comment.