From 8e7f7191bc65830471f23d4b9e420f4af4c6534f Mon Sep 17 00:00:00 2001
From: Marius Andra <marius.andra@gmail.com>
Date: Fri, 13 Oct 2023 16:28:15 +0200
Subject: [PATCH] feat(hogql): debugger split view (#17970)

---
 frontend/src/scenes/debug/DebugScene.tsx     | 84 ++++++++++++--------
 frontend/src/scenes/debug/HogQLDebug.tsx     |  7 +-
 frontend/src/scenes/debug/debugSceneLogic.ts | 31 +++++---
 3 files changed, 80 insertions(+), 42 deletions(-)

diff --git a/frontend/src/scenes/debug/DebugScene.tsx b/frontend/src/scenes/debug/DebugScene.tsx
index c69aa492dd33f..723a132162b6d 100644
--- a/frontend/src/scenes/debug/DebugScene.tsx
+++ b/frontend/src/scenes/debug/DebugScene.tsx
@@ -10,23 +10,46 @@ import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { HogQLQuery } from '~/queries/schema'
 import { HogQLDebug } from 'scenes/debug/HogQLDebug'
 
-export function DebugScene(): JSX.Element {
-    const { query } = useValues(debugSceneLogic)
-    const { setQuery } = useActions(debugSceneLogic)
-
+interface QueryDebugProps {
+    queryKey: string
+    query: string
+    setQuery: (query: string) => void
+}
+function QueryDebug({ query, setQuery, queryKey }: QueryDebugProps): JSX.Element {
     let parsed: Record<string, any> | undefined
     try {
         parsed = JSON.parse(query)
     } catch (e) {
         // do nothing
     }
-
-    const showQueryEditor = !(
-        parsed &&
-        parsed.kind == 'DataTableNode' &&
-        parsed.source.kind == 'HogQLQuery' &&
-        (parsed.full || parsed.showHogQLEditor)
+    return (
+        <>
+            {parsed && parsed?.kind === 'HogQLQuery' ? (
+                <HogQLDebug
+                    queryKey={queryKey}
+                    query={parsed as HogQLQuery}
+                    setQuery={(query) => setQuery(JSON.stringify(query, null, 2))}
+                />
+            ) : (
+                <Query
+                    query={query}
+                    setQuery={(query) => setQuery(JSON.stringify(query, null, 2))}
+                    context={{
+                        showQueryEditor:
+                            parsed &&
+                            parsed.kind == 'DataTableNode' &&
+                            parsed.source.kind == 'HogQLQuery' &&
+                            (parsed.full || parsed.showHogQLEditor),
+                    }}
+                />
+            )}
+        </>
     )
+}
+
+export function DebugScene(): JSX.Element {
+    const { query1, query2 } = useValues(debugSceneLogic)
+    const { setQuery1, setQuery2 } = useActions(debugSceneLogic)
 
     return (
         <div className="QueryScene">
@@ -34,21 +57,24 @@ export function DebugScene(): JSX.Element {
                 title="Query Debugger"
                 buttons={
                     <>
+                        <LemonButton active={!!query2} onClick={() => (query2 ? setQuery2('') : setQuery2(query1))}>
+                            Split
+                        </LemonButton>
                         <LemonButton
-                            active={query === stringifiedExamples.HogQLRaw}
-                            onClick={() => setQuery(stringifiedExamples.HogQLRaw)}
+                            active={query1 === stringifiedExamples.HogQLRaw}
+                            onClick={() => setQuery1(stringifiedExamples.HogQLRaw)}
                         >
                             HogQL Debug
                         </LemonButton>
                         <LemonButton
-                            active={query === stringifiedExamples.HogQLTable}
-                            onClick={() => setQuery(stringifiedExamples.HogQLTable)}
+                            active={query1 === stringifiedExamples.HogQLTable}
+                            onClick={() => setQuery1(stringifiedExamples.HogQLTable)}
                         >
                             HogQL Table
                         </LemonButton>
                         <LemonButton
-                            active={query === stringifiedExamples.Events}
-                            onClick={() => setQuery(stringifiedExamples.Events)}
+                            active={query1 === stringifiedExamples.Events}
+                            onClick={() => setQuery1(stringifiedExamples.Events)}
                         >
                             Any Query
                         </LemonButton>
@@ -62,7 +88,7 @@ export function DebugScene(): JSX.Element {
                                     })}
                                 onChange={(v) => {
                                     if (v) {
-                                        setQuery(v)
+                                        setQuery1(v)
                                     }
                                 }}
                             />
@@ -70,20 +96,16 @@ export function DebugScene(): JSX.Element {
                     </>
                 }
             />
-            {parsed && parsed?.kind === 'HogQLQuery' ? (
-                <HogQLDebug
-                    query={parsed as HogQLQuery}
-                    setQuery={(query) => setQuery(JSON.stringify(query, null, 2))}
-                />
-            ) : (
-                <Query
-                    query={query}
-                    setQuery={(query) => setQuery(JSON.stringify(query, null, 2))}
-                    context={{
-                        showQueryEditor: showQueryEditor,
-                    }}
-                />
-            )}
+            <div className="flex gap-2">
+                <div className="flex-1 w-1/2">
+                    <QueryDebug query={query1} setQuery={setQuery1} queryKey="hogql-debug-1" />
+                </div>
+                {query2 ? (
+                    <div className="flex-1 w-1/2">
+                        <QueryDebug query={query2} setQuery={setQuery2} queryKey="hogql-debug-2" />
+                    </div>
+                ) : null}
+            </div>
         </div>
     )
 }
diff --git a/frontend/src/scenes/debug/HogQLDebug.tsx b/frontend/src/scenes/debug/HogQLDebug.tsx
index 17e35a65d4c10..6c047d967fbbb 100644
--- a/frontend/src/scenes/debug/HogQLDebug.tsx
+++ b/frontend/src/scenes/debug/HogQLDebug.tsx
@@ -9,19 +9,22 @@ import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
 import { CodeEditor } from 'lib/components/CodeEditors'
 import { LemonSelect } from 'lib/lemon-ui/LemonSelect'
 import { LemonLabel } from 'lib/lemon-ui/LemonLabel'
+import { Reload } from '~/queries/nodes/DataNode/Reload'
 
 interface HogQLDebugProps {
+    queryKey: string
     query: HogQLQuery
     setQuery: (query: DataNode) => void
 }
-export function HogQLDebug({ query, setQuery }: HogQLDebugProps): JSX.Element {
-    const dataNodeLogicProps: DataNodeLogicProps = { query, key: 'debug-scene' }
+export function HogQLDebug({ query, setQuery, queryKey }: HogQLDebugProps): JSX.Element {
+    const dataNodeLogicProps: DataNodeLogicProps = { query, key: queryKey }
     const { dataLoading, response, responseErrorObject, elapsedTime } = useValues(dataNodeLogic(dataNodeLogicProps))
     return (
         <BindLogic logic={dataNodeLogic} props={dataNodeLogicProps}>
             <div className="space-y-2">
                 <HogQLQueryEditor query={query} setQuery={setQuery} />
                 <div className="flex gap-2">
+                    <Reload />
                     <DateRange key="date-range" query={query} setQuery={setQuery} />
                     <EventPropertyFilters key="event-property" query={query} setQuery={setQuery} />
                 </div>
diff --git a/frontend/src/scenes/debug/debugSceneLogic.ts b/frontend/src/scenes/debug/debugSceneLogic.ts
index aaf975c26ee85..912474eac6907 100644
--- a/frontend/src/scenes/debug/debugSceneLogic.ts
+++ b/frontend/src/scenes/debug/debugSceneLogic.ts
@@ -10,20 +10,33 @@ const DEFAULT_QUERY: string = stringifiedExamples['HogQLRaw']
 export const debugSceneLogic = kea<debugSceneLogicType>([
     path(['scenes', 'query', 'debugSceneLogic']),
     actions({
-        setQuery: (query: string) => ({ query: query }),
+        setQuery1: (query: string) => ({ query: query }),
+        setQuery2: (query: string) => ({ query: query }),
     }),
     reducers({
-        query: [DEFAULT_QUERY, { setQuery: (_, { query }) => query }],
+        query1: [DEFAULT_QUERY, { setQuery1: (_, { query }) => query }],
+        query2: [DEFAULT_QUERY, { setQuery2: (_, { query }) => query }],
     }),
-    actionToUrl({
-        setQuery: ({ query }) => {
-            return [urls.debugQuery(), {}, { q: query }, { replace: true }]
+    actionToUrl(({ values }) => ({
+        setQuery1: ({ query }) => {
+            return [
+                urls.debugQuery(),
+                {},
+                { ...{ q: query }, ...(values.query2 ? { q2: values.query2 } : {}) },
+                { replace: true },
+            ]
         },
-    }),
+        setQuery2: () => {
+            return [urls.debugQuery(), {}, { q: values.query1, q2: values.query2 }, { replace: true }]
+        },
+    })),
     urlToAction(({ actions, values }) => ({
-        [urls.debugQuery()]: (_, __, { q }) => {
-            if (q && q !== values.query) {
-                actions.setQuery(q)
+        [urls.debugQuery()]: (_, __, { q, q2 }) => {
+            if (q && q !== values.query1) {
+                actions.setQuery1(q)
+            }
+            if ((q2 ?? '') !== (values.query2 ?? '')) {
+                actions.setQuery2(q2 ?? '')
             }
         },
     })),