From d9fbf14a810eb3414ea1a6ff84748cd212cdfaa4 Mon Sep 17 00:00:00 2001
From: Jordi Enric <37541088+jordienr@users.noreply.github.com>
Date: Tue, 21 Jan 2025 17:24:42 +0100
Subject: [PATCH] Fix chart click (#32834)

fix chart click
---
 .../Settings/Logs/LogsPreviewer.tsx           | 32 +++++++++----------
 .../studio/hooks/analytics/useLogsPreview.tsx | 14 +++++---
 2 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/apps/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx b/apps/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx
index 12e6a7b7283..5531bba4621 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx
@@ -22,6 +22,7 @@ import { useSelectedLog } from 'hooks/analytics/useSelectedLog'
 import useSingleLog from 'hooks/analytics/useSingleLog'
 import { LogsBarChart } from 'ui-patterns/LogsBarChart'
 import NoDataPlaceholder from 'components/ui/Charts/NoDataPlaceholder'
+import dayjs from 'dayjs'
 
 /**
  * Acts as a container component for the entire log display
@@ -154,14 +155,6 @@ export const LogsPreviewer = ({
         iso_timestamp_start: nextStart,
         iso_timestamp_end: nextEnd,
       }))
-      router.push({
-        pathname: router.pathname,
-        query: {
-          ...router.query,
-          its: nextStart,
-          ite: nextEnd,
-        },
-      })
     } else if (event === 'datepicker-change') {
       const shouldShowUpgradePrompt = maybeShowUpgradePrompt(from, subscription?.plan?.id)
 
@@ -234,18 +227,25 @@ export const LogsPreviewer = ({
               data={eventChartData}
               onBarClick={(datum) => {
                 if (!datum?.timestamp) return
+
+                const datumTimestamp = dayjs(datum.timestamp).toISOString()
+
+                const start = dayjs(datumTimestamp).subtract(1, 'minute').toISOString()
+                const end = dayjs(datumTimestamp).add(1, 'minute').toISOString()
+
                 handleSearch('event-chart-bar-click', {
-                  query: filters.search_query as string,
-                  to: datum.timestamp.toString(),
-                  from: null,
+                  query: filters.search_query?.toString(),
+                  to: end,
+                  from: start,
                 })
               }}
               EmptyState={
-                <NoDataPlaceholder
-                  message={'No data'}
-                  description="It may take up to 24 hours for data to refresh"
-                  size={'tiny'}
-                />
+                <div className="flex flex-col items-center justify-center h-[67px]">
+                  <h2 className="text-foreground-light text-xs">No data</h2>
+                  <p className="text-foreground-lighter text-xs">
+                    It may take up to 24 hours for data to refresh
+                  </p>
+                </div>
               }
             />
           )}
diff --git a/apps/studio/hooks/analytics/useLogsPreview.tsx b/apps/studio/hooks/analytics/useLogsPreview.tsx
index cd98e62145f..babc968e005 100644
--- a/apps/studio/hooks/analytics/useLogsPreview.tsx
+++ b/apps/studio/hooks/analytics/useLogsPreview.tsx
@@ -161,15 +161,19 @@ function useLogsPreview({
   const newCount = isResponseOk(countData) ? countData.result?.[0]?.count ?? 0 : 0
 
   // chart data
+  const chartQuery = useMemo(
+    () => genChartQuery(table, params, filters),
+    [table, params.iso_timestamp_end, params.project, filters]
+  )
 
-  const chartQuery = useMemo(() => genChartQuery(table, params, filters), [params, filters])
   const chartUrl = useMemo(() => {
     return `${API_URL}/projects/${projectRef}/analytics/endpoints/logs.all?${genQueryParams({
-      iso_timestamp_end: params.iso_timestamp_end,
-      project: params.project,
+      iso_timestamp_start: params.iso_timestamp_start ?? '',
+      iso_timestamp_end: params.iso_timestamp_end ?? '',
+      project: params.project ?? '',
       sql: chartQuery,
-    } as any)}`
-  }, [params, chartQuery])
+    })}`
+  }, [projectRef, params.iso_timestamp_start, params.iso_timestamp_end, params.project, chartQuery])
 
   const { data: eventChartResponse, refetch: refreshEventChart } = useQuery(
     [