From e3b979c1948daddca23455ece36f800692b991ec Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul@posthog.com>
Date: Mon, 27 Feb 2023 12:49:57 +0000
Subject: [PATCH] wip

---
 frontend/src/queries/Query/Query.tsx          |  2 ++
 frontend/src/scenes/insights/Insight.tsx      | 36 +++++++++++--------
 .../src/scenes/insights/insightDataLogic.ts   | 22 ++++++------
 3 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/frontend/src/queries/Query/Query.tsx b/frontend/src/queries/Query/Query.tsx
index 1e85d2aef5a..93cf6f1697a 100644
--- a/frontend/src/queries/Query/Query.tsx
+++ b/frontend/src/queries/Query/Query.tsx
@@ -47,6 +47,8 @@ export function Query(props: QueryProps): JSX.Element {
         }
     }
 
+    console.log('Query', query)
+
     let component
     if (isLegacyQuery(query)) {
         component = <LegacyInsightQuery query={query} />
diff --git a/frontend/src/scenes/insights/Insight.tsx b/frontend/src/scenes/insights/Insight.tsx
index babe84e1975..f682579c123 100644
--- a/frontend/src/scenes/insights/Insight.tsx
+++ b/frontend/src/scenes/insights/Insight.tsx
@@ -13,6 +13,9 @@ import { EditorFilters } from './EditorFilters/EditorFilters'
 import clsx from 'clsx'
 import { Query } from '~/queries/Query/Query'
 import { InsightPageHeader } from 'scenes/insights/InsightPageHeader'
+import { QueryEditor } from '~/queries/QueryEditor/QueryEditor'
+import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
+import { isInsightVizNode } from '~/queries/utils'
 
 export interface InsightSceneProps {
     insightId: InsightShortId | 'new'
@@ -29,27 +32,15 @@ export function Insight({ insightId }: InsightSceneProps): JSX.Element {
         insightLoading,
         filtersKnown,
         filters,
-        insight,
         isUsingDataExploration,
         erroredQueryId,
         isFilterBasedInsight,
-        isQueryBasedInsight,
     } = useValues(logic)
     const { reportInsightViewedForRecentInsights, abortAnyRunningQuery, loadResults } = useActions(logic)
 
     // insightDataLogic
-    const { query: insightVizQuery } = useValues(insightDataLogic(insightProps))
-    const { setQuery: insighVizSetQuery } = useActions(insightDataLogic(insightProps))
-
-    // TODO - separate presentation of insight with viz query from insight with query
-    let query = insightVizQuery
-    let setQuery = insighVizSetQuery
-    if (!!insight.query && isQueryBasedInsight) {
-        query = insight.query
-        setQuery = () => {
-            // don't support editing non-insight viz queries _yet_
-        }
-    }
+    const { query } = useValues(insightDataLogic(insightProps))
+    const { setQuery } = useActions(insightDataLogic(insightProps))
 
     // other logics
     useMountedLogic(insightCommandLogic(insightProps))
@@ -78,6 +69,8 @@ export function Insight({ insightId }: InsightSceneProps): JSX.Element {
         return <InsightSkeleton />
     }
 
+    const showQueryEditorPanel = insightMode === ItemMode.Edit && !!query && !isInsightVizNode(query)
+
     const insightScene = (
         <div className={'insights-page'}>
             <InsightPageHeader insightLogicProps={insightProps} />
@@ -85,7 +78,20 @@ export function Insight({ insightId }: InsightSceneProps): JSX.Element {
             {insightMode === ItemMode.Edit && <InsightsNav />}
 
             {isUsingDataExploration ? (
-                <Query query={query} setQuery={setQuery} />
+                <>
+                    {showQueryEditorPanel ? (
+                        <>
+                            <QueryEditor
+                                query={JSON.stringify(query)}
+                                setQuery={(stringQuery) => setQuery(JSON.parse(stringQuery))}
+                            />
+                            <div className="my-4">
+                                <LemonDivider />
+                            </div>
+                        </>
+                    ) : null}
+                    <Query query={query} setQuery={setQuery} />
+                </>
             ) : (
                 <>
                     <div
diff --git a/frontend/src/scenes/insights/insightDataLogic.ts b/frontend/src/scenes/insights/insightDataLogic.ts
index b719069e95b..0f18ba814fb 100644
--- a/frontend/src/scenes/insights/insightDataLogic.ts
+++ b/frontend/src/scenes/insights/insightDataLogic.ts
@@ -175,17 +175,19 @@ export const insightDataLogic = kea<insightDataLogicType>([
                 return
             }
 
-            const querySource = (query as InsightVizNode).source
-            if (isLifecycleQuery(querySource)) {
-                const filters = queryNodeToFilter(querySource)
-                actions.setFilters(filters)
+            if (isInsightVizNode(query)) {
+                const querySource = (query as InsightVizNode).source
+                if (isLifecycleQuery(querySource)) {
+                    const filters = queryNodeToFilter(querySource)
+                    actions.setFilters(filters)
 
-                if (querySource.lifecycleFilter?.toggledLifecycles !== values.trendsLifecycles) {
-                    actions.setTrendsLifecycles(
-                        querySource.lifecycleFilter?.toggledLifecycles
-                            ? querySource.lifecycleFilter.toggledLifecycles
-                            : ['new', 'resurrecting', 'returning', 'dormant']
-                    )
+                    if (querySource.lifecycleFilter?.toggledLifecycles !== values.trendsLifecycles) {
+                        actions.setTrendsLifecycles(
+                            querySource.lifecycleFilter?.toggledLifecycles
+                                ? querySource.lifecycleFilter.toggledLifecycles
+                                : ['new', 'resurrecting', 'returning', 'dormant']
+                        )
+                    }
                 }
             }
         },