merge

frontend/src/exporter/Exporter.stories.tsx

@@ -39,7 +39,6 @@ const Template: StoryFn<typeof Exporter> = (props) => {
         </div>
     )
 }
-Template.tags = ['test-skip'] // :FIXME: flaky tests, most likely due to resize observer changes
 
 export const TrendsLineInsight: Story = Template.bind({})
 TrendsLineInsight.args = { insight: require('../mocks/fixtures/api/projects/team_id/insights/trendsLine.json') }
@@ -202,6 +201,7 @@ StickinessInsight.tags = ['test-skip'] // doesn't produce a helpful reference im
 
 export const UserPathsInsight: Story = Template.bind({})
 UserPathsInsight.args = { insight: require('../mocks/fixtures/api/projects/team_id/insights/userPaths.json') }
+UserPathsInsight.tags = ['test-skip'] // FIXME: flaky tests, most likely due to resize observer changes
 
 export const Dashboard: Story = Template.bind({})
 Dashboard.args = { dashboard }

frontend/src/lib/components/Cards/InsightCard/InsightCard.stories.tsx

@@ -17,7 +17,6 @@ import EXAMPLE_TRENDS_PIE from '../../../../mocks/fixtures/api/projects/team_id/
 import EXAMPLE_TRENDS_TABLE from '../../../../mocks/fixtures/api/projects/team_id/insights/trendsTable.json'
 import EXAMPLE_TRENDS_HORIZONTAL_BAR from '../../../../mocks/fixtures/api/projects/team_id/insights/trendsValue.json'
 import EXAMPLE_TRENDS_WORLD_MAP from '../../../../mocks/fixtures/api/projects/team_id/insights/trendsWorldMap.json'
-import EXAMPLE_PATHS from '../../../../mocks/fixtures/api/projects/team_id/insights/userPaths.json'
 import { InsightCard as InsightCardComponent } from './index'
 
 const examples = [
@@ -30,7 +29,6 @@ const examples = [
     EXAMPLE_TRENDS_WORLD_MAP,
     EXAMPLE_FUNNEL,
     EXAMPLE_RETENTION,
-    EXAMPLE_PATHS,
     EXAMPLE_STICKINESS,
     EXAMPLE_LIFECYCLE,
     EXAMPLE_DATA_TABLE_NODE_HOGQL_QUERY,
@@ -64,7 +62,6 @@ const meta: Meta = {
             control: { type: 'boolean' },
         },
     },
-    tags: ['test-skip'], // :FIXME: flaky tests, most likely due to resize observer changes
 }
 export default meta
 export const InsightCard: Story = (args) => {

frontend/src/queries/nodes/InsightViz/InsightViz.tsx

@@ -3,7 +3,7 @@ import './InsightViz.scss'
 import clsx from 'clsx'
 import { BindLogic, useValues } from 'kea'
 import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { insightLogic } from 'scenes/insights/insightLogic'
 import { insightSceneLogic } from 'scenes/insights/insightSceneLogic'
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
@@ -78,9 +78,19 @@ export function InsightViz({ uniqueKey, query, setQuery, context, readOnly, embe
     const showingResults = query.showResults ?? true
     const isEmbedded = embedded || (query.embedded ?? false)
 
-    const Wrapper = ({ children }: { children: React.ReactElement }): JSX.Element => {
-        return isEmbedded ? <>{children}</> : <div className="flex-1 h-full overflow-auto">{children}</div>
-    }
+    const display = (
+        <InsightVizDisplay
+            insightMode={insightMode}
+            context={context}
+            disableHeader={disableHeader}
+            disableTable={disableTable}
+            disableCorrelationTable={disableCorrelationTable}
+            disableLastComputation={disableLastComputation}
+            disableLastComputationRefresh={disableLastComputationRefresh}
+            showingResults={showingResults}
+            embedded={isEmbedded}
+        />
+    )
 
     return (
         <BindLogic logic={insightLogic} props={insightProps}>
@@ -98,20 +108,7 @@ export function InsightViz({ uniqueKey, query, setQuery, context, readOnly, embe
                         {!readOnly && (
                             <EditorFilters query={query.source} showing={showingFilters} embedded={isEmbedded} />
                         )}
-
-                        <Wrapper>
-                            <InsightVizDisplay
-                                insightMode={insightMode}
-                                context={context}
-                                disableHeader={disableHeader}
-                                disableTable={disableTable}
-                                disableCorrelationTable={disableCorrelationTable}
-                                disableLastComputation={disableLastComputation}
-                                disableLastComputationRefresh={disableLastComputationRefresh}
-                                showingResults={showingResults}
-                                embedded={isEmbedded}
-                            />
-                        </Wrapper>
+                        {!isEmbedded ? <div className="flex-1 h-full overflow-auto">{display}</div> : display}
                     </div>
                 </BindLogic>
             </BindLogic>