From 559236dbd007e243abb3d92c71094d64d48fdeab Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 13 Jan 2025 23:29:28 +0800
Subject: [PATCH] Chore/query performance fixes and improvements (#32747)

* Show tab max value in seconds if > 1000ms

* Fix incorrect sort option in initial state with no URL state

* Fix trim of undefined in Query Performance when retrieving index
---
 .../QueryPerformance/QueryPerformance.tsx     | 103 ++++++++++--------
 .../QueryPerformanceFilterBar.tsx             |   2 +-
 .../retrieve-index-from-select-query.ts       |  25 +++--
 3 files changed, 77 insertions(+), 53 deletions(-)

diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryPerformance.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryPerformance.tsx
index 569187d08c..e7ac3638bd 100644
--- a/apps/studio/components/interfaces/QueryPerformance/QueryPerformance.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/QueryPerformance.tsx
@@ -126,52 +126,67 @@ export const QueryPerformance = ({
         }}
       >
         <TabsList_Shadcn_ className={cn('flex gap-0 border-0 items-end z-10')}>
-          {QUERY_PERFORMANCE_TABS.map((tab) => (
-            <TabsTrigger_Shadcn_
-              key={tab.id}
-              value={tab.id}
-              className={cn(
-                'group relative',
-                'px-6 py-3 border-b-0 flex flex-col items-start !shadow-none border-default border-t',
-                'even:border-x last:border-r even:!border-x-strong last:!border-r-strong',
-                tab.id === page ? '!bg-surface-200' : '!bg-surface-200/[33%]',
-                'hover:!bg-surface-100',
-                'data-[state=active]:!bg-surface-200',
-                'hover:text-foreground-light',
-                'transition'
-              )}
-            >
-              {tab.id === page && (
-                <div className="absolute top-0 left-0 w-full h-[1px] bg-foreground" />
-              )}
+          {QUERY_PERFORMANCE_TABS.map((tab) => {
+            const tabMax = Number(tab.max)
+            const maxValue =
+              tab.id !== QUERY_PERFORMANCE_REPORT_TYPES.MOST_FREQUENT
+                ? tabMax > 1000
+                  ? (tabMax / 1000).toFixed(2)
+                  : tabMax.toLocaleString()
+                : tabMax.toLocaleString()
 
-              <div className="flex items-center gap-x-2">
-                <span className="">{tab.label}</span>
-                <Tooltip_Shadcn_>
-                  <TooltipTrigger_Shadcn_ asChild>
-                    <InformationCircleIcon className="transition text-foreground-muted w-3 h-3 data-[state=delayed-open]:text-foreground-light" />
-                  </TooltipTrigger_Shadcn_>
-                  <TooltipContent_Shadcn_ side="top">{tab.description}</TooltipContent_Shadcn_>
-                </Tooltip_Shadcn_>
-              </div>
-              {tab.isLoading ? (
-                <ShimmeringLoader className="w-32 pt-1" />
-              ) : tab.max === undefined ? (
-                <span className="text-xs text-foreground-muted group-hover:text-foreground-lighter group-data-[state=active]:text-foreground-lighter transition">
-                  No data yet
-                </span>
-              ) : (
-                <span className="text-xs text-foreground-muted group-hover:text-foreground-lighter group-data-[state=active]:text-foreground-lighter transition">
-                  {Number(tab.max).toLocaleString()}
-                  {tab.id !== QUERY_PERFORMANCE_REPORT_TYPES.MOST_FREQUENT ? 'ms' : ' calls'}
-                </span>
-              )}
+            return (
+              <TabsTrigger_Shadcn_
+                key={tab.id}
+                value={tab.id}
+                className={cn(
+                  'group relative',
+                  'px-6 py-3 border-b-0 flex flex-col items-start !shadow-none border-default border-t',
+                  'even:border-x last:border-r even:!border-x-strong last:!border-r-strong',
+                  tab.id === page ? '!bg-surface-200' : '!bg-surface-200/[33%]',
+                  'hover:!bg-surface-100',
+                  'data-[state=active]:!bg-surface-200',
+                  'hover:text-foreground-light',
+                  'transition'
+                )}
+              >
+                {tab.id === page && (
+                  <div className="absolute top-0 left-0 w-full h-[1px] bg-foreground" />
+                )}
 
-              {tab.id === page && (
-                <div className="absolute bottom-0 left-0 w-full h-[1px] bg-surface-200"></div>
-              )}
-            </TabsTrigger_Shadcn_>
-          ))}
+                <div className="flex items-center gap-x-2">
+                  <span className="">{tab.label}</span>
+                  <Tooltip_Shadcn_>
+                    <TooltipTrigger_Shadcn_ asChild>
+                      <InformationCircleIcon className="transition text-foreground-muted w-3 h-3 data-[state=delayed-open]:text-foreground-light" />
+                    </TooltipTrigger_Shadcn_>
+                    <TooltipContent_Shadcn_ side="top">{tab.description}</TooltipContent_Shadcn_>
+                  </Tooltip_Shadcn_>
+                </div>
+                {tab.isLoading ? (
+                  <ShimmeringLoader className="w-32 pt-1" />
+                ) : tab.max === undefined ? (
+                  <span className="text-xs text-foreground-muted group-hover:text-foreground-lighter group-data-[state=active]:text-foreground-lighter transition">
+                    No data yet
+                  </span>
+                ) : (
+                  <span className="text-xs text-foreground-muted group-hover:text-foreground-lighter group-data-[state=active]:text-foreground-lighter transition">
+                    {/* {Number(tab.max).toLocaleString()} */}
+                    {maxValue}
+                    {tab.id !== QUERY_PERFORMANCE_REPORT_TYPES.MOST_FREQUENT
+                      ? tabMax > 1000
+                        ? 's'
+                        : 'ms'
+                      : ' calls'}
+                  </span>
+                )}
+
+                {tab.id === page && (
+                  <div className="absolute bottom-0 left-0 w-full h-[1px] bg-surface-200"></div>
+                )}
+              </TabsTrigger_Shadcn_>
+            )
+          })}
         </TabsList_Shadcn_>
       </Tabs_Shadcn_>
 
diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceFilterBar.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceFilterBar.tsx
index 8c189b95ea..debc3a41c4 100644
--- a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceFilterBar.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceFilterBar.tsx
@@ -73,7 +73,7 @@ export const QueryPerformanceFilterBar = ({
   }
 
   function getSortButtonLabel() {
-    if (defaultSortByValue?.order === 'desc') {
+    if (sortByValue?.order === 'desc') {
       return 'Sorted by latency - high to low'
     } else {
       return 'Sorted by latency - low to high'
diff --git a/apps/studio/data/database/retrieve-index-from-select-query.ts b/apps/studio/data/database/retrieve-index-from-select-query.ts
index 8ef31cde99..1d0b7d0f02 100644
--- a/apps/studio/data/database/retrieve-index-from-select-query.ts
+++ b/apps/studio/data/database/retrieve-index-from-select-query.ts
@@ -102,19 +102,28 @@ export const useGetIndexesFromSelectQuery = <TData = GetInvolvedIndexesFromSelec
     GetInvolvedIndexesFromSelectQueryError,
     TData
   > = {}
-) =>
-  useQuery<GetInvolvedIndexesFromSelectQueryData, GetInvolvedIndexesFromSelectQueryError, TData>(
+) => {
+  // [Joshen] Only get indexes for queries starting with these
+  const isValidQueryForIndexing =
+    query !== undefined &&
+    (query.trim().toLowerCase().startsWith('select') ||
+      query.trim().toLowerCase().startsWith('with pgrst_source'))
+
+  return useQuery<
+    GetInvolvedIndexesFromSelectQueryData,
+    GetInvolvedIndexesFromSelectQueryError,
+    TData
+  >(
     databaseKeys.indexesFromQuery(projectRef, query),
     () => getInvolvedIndexesInSelectQuery({ projectRef, connectionString, query }),
     {
       retry: false,
       enabled:
-        (enabled &&
-          typeof projectRef !== 'undefined' &&
-          typeof query !== 'undefined' &&
-          query !== undefined &&
-          (query.startsWith('select') || query.startsWith('SELECT'))) ||
-        query.trim().toLowerCase().startsWith('with pgrst_source'),
+        enabled &&
+        typeof projectRef !== 'undefined' &&
+        typeof query !== 'undefined' &&
+        isValidQueryForIndexing,
       ...options,
     }
   )
+}