From ec0692bd5d6d17aee2ecc51d10c67b30e34d80f1 Mon Sep 17 00:00:00 2001
From: James Clarke <james@edgedb.com>
Date: Tue, 10 Dec 2024 10:15:58 +0000
Subject: [PATCH] Fix code highlighting + disable analyse button for sql
 queries

---
 .../tabs/perfStats/perfStats.module.scss      |  4 +--
 shared/studio/tabs/perfStats/statsTable.tsx   | 27 +++++++++++++------
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/shared/studio/tabs/perfStats/perfStats.module.scss b/shared/studio/tabs/perfStats/perfStats.module.scss
index 846aa64..b3213df 100644
--- a/shared/studio/tabs/perfStats/perfStats.module.scss
+++ b/shared/studio/tabs/perfStats/perfStats.module.scss
@@ -291,7 +291,7 @@
   .fullData {
     display: grid;
     grid-template-columns: repeat(6, auto);
-    margin: 0 48px 0 12px;
+    margin: 0 48px 16px 12px;
     gap: 16px 24px;
     max-width: 880px;
 
@@ -350,7 +350,7 @@
 
   .analyseQueryButton {
     align-self: flex-end;
-    margin-top: -32px;
+    margin-top: -48px;
     margin-bottom: 16px;
     margin-right: 8px;
   }
diff --git a/shared/studio/tabs/perfStats/statsTable.tsx b/shared/studio/tabs/perfStats/statsTable.tsx
index 439fe52..98ab4d8 100644
--- a/shared/studio/tabs/perfStats/statsTable.tsx
+++ b/shared/studio/tabs/perfStats/statsTable.tsx
@@ -1,6 +1,8 @@
 import {useEffect, useRef, useState} from "react";
 import {observer} from "mobx-react-lite";
 
+import {sql, PostgreSQL} from "@codemirror/lang-sql";
+
 import cn from "@edgedb/common/utils/classNames";
 
 import {
@@ -19,6 +21,8 @@ import {OrderBy, PerfStatsState, QueryStats} from "./state";
 
 import styles from "./perfStats.module.scss";
 
+const sqlLang = sql({dialect: PostgreSQL}).language;
+
 export const StatsTable = observer(function StatsTable({
   state,
 }: {
@@ -236,13 +240,15 @@ export const QueryStatsRow = observer(function QueryStatsRow({
               </div>
             </div>
 
-            <Button
-              className={styles.analyseQueryButton}
-              kind="outline"
-              onClick={() => state.setAnalyzeQuery(queryStats.query)}
-            >
-              Analyze Query
-            </Button>
+            {queryStats.query_type === "EdgeQL" ? (
+              <Button
+                className={styles.analyseQueryButton}
+                kind="outline"
+                onClick={() => state.setAnalyzeQuery(queryStats.query)}
+              >
+                Analyze Query
+              </Button>
+            ) : null}
 
             <div className={styles.fullQuery}>
               <CopyButton
@@ -250,7 +256,12 @@ export const QueryStatsRow = observer(function QueryStatsRow({
                 content={queryStats.query}
                 mini
               />
-              <CodeBlock code={queryStats.query} />
+              <CodeBlock
+                code={queryStats.query}
+                language={
+                  queryStats.query_type === "SQL" ? sqlLang : undefined
+                }
+              />
             </div>
           </div>
         ) : null}