repro of insight logic issues

frontend/src/scenes/appScenes.ts

@@ -5,6 +5,7 @@ export const appScenes: Record<Scene, () => any> = {
     [Scene.Error404]: () => ({ default: preloadedScenes[Scene.Error404].component }),
     [Scene.ErrorNetwork]: () => ({ default: preloadedScenes[Scene.ErrorNetwork].component }),
     [Scene.ErrorProjectUnavailable]: () => ({ default: preloadedScenes[Scene.ErrorProjectUnavailable].component }),
+    [Scene.Playground]: () => import('./playground/Playground'),
     [Scene.Dashboards]: () => import('./dashboard/dashboards/Dashboards'),
     [Scene.Dashboard]: () => import('./dashboard/Dashboard'),
     [Scene.Insight]: () => import('./insights/InsightScene'),

frontend/src/scenes/playground/Playground.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react'
+import { SceneExport } from 'scenes/sceneTypes'
+import { Query } from '~/queries/Query/Query'
+import { InsightVizNode, NodeKind, TrendsQuery } from '~/queries/schema'
+import { BaseMathType } from '~/types'
+
+export const scene: SceneExport = {
+    component: PlaygroundScene,
+}
+
+const trendsDefaultQuery: TrendsQuery = {
+    kind: NodeKind.TrendsQuery,
+    series: [
+        {
+            kind: NodeKind.EventsNode,
+            name: '$pageview',
+            event: '$pageview',
+            math: BaseMathType.TotalCount,
+        },
+    ],
+    trendsFilter: {},
+}
+
+function PlaygroundScene(): JSX.Element {
+    const initialQuery: InsightVizNode = {
+        kind: NodeKind.InsightVizNode,
+        source: trendsDefaultQuery,
+        full: true,
+        showFilters: true,
+    }
+    const [query, setQuery] = useState(initialQuery)
+    return (
+        <div>
+            <h1>Playground</h1>
+            <pre>{JSON.stringify(query, null, 2)}</pre>
+            <Query query={query} setQuery={setQuery} readOnly={false} />
+        </div>
+    )
+}

frontend/src/scenes/sceneTypes.ts

@@ -4,6 +4,7 @@ import { LogicWrapper } from 'kea'
 // If so, we can preload the scene's required chunks in parallel with the scene itself.
 
 export enum Scene {
+    Playground = 'Playground',
     Error404 = '404',
     ErrorNetwork = '4xx',
     ErrorProjectUnavailable = 'ProjectUnavailable',

frontend/src/scenes/scenes.ts

@@ -31,6 +31,10 @@ export const preloadedScenes: Record<string, LoadedScene> = {
 }
 
 export const sceneConfigurations: Partial<Record<Scene, SceneConfig>> = {
+    [Scene.Playground]: {
+        projectBased: true,
+        name: 'Playground',
+    },
     // Project-based routes
     [Scene.Dashboards]: {
         projectBased: true,
@@ -349,6 +353,7 @@ export const redirects: Record<
     string | ((params: Params, searchParams: Params, hashParams: Params) => string)
 > = {
     '/': preserveParams(urls.projectHomepage()),
+    '/playground': urls.playground(),
     '/saved_insights': urls.savedInsights(),
     '/dashboards': urls.dashboards(),
     '/plugins': urls.projectApps(),
@@ -395,6 +400,7 @@ export const redirects: Record<
 }
 
 export const routes: Record<string, Scene> = {
+    [urls.playground()]: Scene.Playground,
     [urls.dashboards()]: Scene.Dashboards,
     [urls.dashboard(':id')]: Scene.Dashboard,
     [urls.dashboardTextTile(':id', ':textTileId')]: Scene.Dashboard,

frontend/src/scenes/urls.ts

@@ -24,6 +24,7 @@ import { toParams } from 'lib/utils'
  * Sync the paths with AutoProjectMiddleware!
  */
 export const urls = {
+    playground: (): string => '/playground',
     default: (): string => '/',
     dashboards: (): string => '/dashboard',
     dashboard: (id: string | number, highlightInsightId?: string): string =>