From 4f7cd4bfa1e021abde3c2d44f95dc9c36b0d4511 Mon Sep 17 00:00:00 2001
From: kemal <hello@kemal.earth>
Date: Mon, 11 Aug 2025 15:19:50 +0100
Subject: [PATCH] feat: house chart filters in bar

---
 .../QueryInsights/QueryInsights.tsx           |  5 ++-
 .../QueryInsights/components/MetricsChart.tsx | 34 ++++++++++---------
 .../components/QueryInsightsBarChart.tsx      |  2 +-
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/apps/studio/components/interfaces/QueryInsights/QueryInsights.tsx b/apps/studio/components/interfaces/QueryInsights/QueryInsights.tsx
index 1df7ffdb78b..22a7754e2b9 100644
--- a/apps/studio/components/interfaces/QueryInsights/QueryInsights.tsx
+++ b/apps/studio/components/interfaces/QueryInsights/QueryInsights.tsx
@@ -111,7 +111,7 @@ export const QueryInsights = () => {
     {
       id: 'query_latency',
       label: 'Query latency',
-      description: `p95 in ${p95Latency}`,
+      description: `p95: ${p95Latency}`,
       tooltip: 'Shows the latency of each query execution.',
     },
     {
@@ -281,7 +281,7 @@ export const QueryInsights = () => {
       <Tabs_Shadcn_
         value={selectedMetric}
         onValueChange={(value) => setSelectedMetric(value as MetricType)}
-        className="space-y-4"
+        className="pb-4"
       >
         <TabsList_Shadcn_ className={cn('flex gap-0 border-0 items-end z-10')}>
           {METRICS.map((metric) => (
@@ -334,7 +334,6 @@ export const QueryInsights = () => {
       </Tabs_Shadcn_>
 
 
-
       <QueryList
         queries={queriesData || []}
         isLoading={isLoadingQueries}
diff --git a/apps/studio/components/interfaces/QueryInsights/components/MetricsChart.tsx b/apps/studio/components/interfaces/QueryInsights/components/MetricsChart.tsx
index e3a082d1d33..1f34964c245 100644
--- a/apps/studio/components/interfaces/QueryInsights/components/MetricsChart.tsx
+++ b/apps/studio/components/interfaces/QueryInsights/components/MetricsChart.tsx
@@ -168,26 +168,28 @@ export function MetricsChart(props: MetricsChartProps) {
   return (
     <div className="h-[320px] flex flex-col">
       <div className="flex flex-col flex-1 min-h-0">
-        <div className="flex flex-wrap items-center gap-2 px-5 mb-4">
-          <MetricToggleButtons
-            chartConfig={chartConfig}
-            visibleMetrics={visibleMetrics}
-            setVisibleMetrics={setVisibleMetrics}
-            metric={metric}
-            selectedQuery={selectedQuery}
-          />
-
-          {selectedQuery && (
-            <SelectedQueryBadge
-              selectedQuery={selectedQuery}
-              onClear={handleClearSelectedQuery}
+        <div className="flex flex-wrap items-center gap-2 mb-4 px-6 py-2 bg-surface-200 border-t border-b -mt-px justify-between">
+          <div className="flex items-center gap-2">
+            <MetricToggleButtons
+              chartConfig={chartConfig}
+              visibleMetrics={visibleMetrics}
+              setVisibleMetrics={setVisibleMetrics}
               metric={metric}
-              metrics={metricBadges}
+              selectedQuery={selectedQuery}
             />
-          )}
+
+            {selectedQuery && (
+              <SelectedQueryBadge
+                selectedQuery={selectedQuery}
+                onClear={handleClearSelectedQuery}
+                metric={metric}
+                metrics={metricBadges}
+              />
+            )}
+          </div>
         </div>
 
-        <div className="flex-1 min-h-0">
+        <div className="flex-1 min-h-0 pt-4 pr-4">
           <ChartContainer className="h-full w-full" config={config}>
             <AreaChart
               data={chartData}
diff --git a/apps/studio/components/interfaces/QueryInsights/components/QueryInsightsBarChart.tsx b/apps/studio/components/interfaces/QueryInsights/components/QueryInsightsBarChart.tsx
index 6577025d6b7..6ee8e9768a5 100644
--- a/apps/studio/components/interfaces/QueryInsights/components/QueryInsightsBarChart.tsx
+++ b/apps/studio/components/interfaces/QueryInsights/components/QueryInsightsBarChart.tsx
@@ -61,7 +61,7 @@ export const QueryInsightsLineChart = ({
       >
         <ComposedChart
           data={data}
-          onMouseMove={(e: { activeTooltipIndex: number | null }) => {
+          onMouseMove={(e: any) => {
             if (e.activeTooltipIndex !== focusDataIndex) {
               setFocusDataIndex(e.activeTooltipIndex)
             }