diff --git a/cypress/e2e/dashboard.cy.ts b/cypress/e2e/dashboard.cy.ts index 7b1394ef5e0ae..fcf0b6f066db2 100644 --- a/cypress/e2e/dashboard.cy.ts +++ b/cypress/e2e/dashboard.cy.ts @@ -325,7 +325,8 @@ describe('Dashboard', () => { savedInsights.checkInsightIsInListView(insightName) }) - it('can delete dashboard and delete the insights', () => { + // TODO: this test works locally, just not in CI + it.skip('can delete dashboard and delete the insights', () => { cy.visit(urls.savedInsights()) // get insights list into turbo mode cy.clickNavMenu('dashboards') diff --git a/cypress/e2e/insights.cy.ts b/cypress/e2e/insights.cy.ts index 3541db0465578..aae913447d47c 100644 --- a/cypress/e2e/insights.cy.ts +++ b/cypress/e2e/insights.cy.ts @@ -1,10 +1,29 @@ import { urls } from 'scenes/urls' import { randomString } from '../support/random' +import { decideResponse } from '../fixtures/api/decide' import { savedInsights, createInsight, insight } from '../productAnalytics' +const hogQLQuery = `select event, + count() + from events + group by event, + properties.$browser, + person.properties.email + order by count() desc + limit 2` + // For tests related to trends please check trendsElements.js describe('Insights', () => { beforeEach(() => { + cy.intercept('https://app.posthog.com/decide/*', (req) => + req.reply( + decideResponse({ + hogql: true, + 'data-exploration-insights': true, + }) + ) + ) + cy.visit(urls.insightNew()) }) @@ -231,4 +250,170 @@ describe('Insights', () => { savedInsights.checkInsightIsInListView(`${insightName} (copy)`) }) }) + + describe('navigation', () => { + it('can save and load and edit a SQL insight', () => { + insight.newInsight('SQL') + const insightName = randomString('SQL insight') + insight.editName(insightName) + insight.save() + cy.visit(urls.savedInsights()) + cy.contains('.row-name a', insightName).click() + + cy.get('[data-attr="hogql-query-editor"]').should('not.exist') + cy.get('tr.DataTable__row').should('have.length.gte', 2) + + cy.get('[data-attr="insight-edit-button"]').click() + insight.clickTab('RETENTION') + + cy.get('[data-attr="insight-save-button"]').click() + + cy.get('.RetentionContainer canvas').should('exist') + cy.get('.RetentionTable__Tab').should('have.length', 66) + }) + + describe('opening a new insight directly', () => { + it('can open a new trends insight', () => { + insight.newInsight('TRENDS') + cy.get('.trends-insights-container canvas').should('exist') + cy.get('tr').should('have.length.gte', 2) + }) + + it('can open a new funnels insight', () => { + insight.newInsight('FUNNELS') + cy.get('.funnels-empty-state__title').should('exist') + }) + + it.skip('can open a new retention insight', () => { + insight.newInsight('RETENTION') + cy.get('.RetentionContainer canvas').should('exist') + cy.get('.RetentionTable__Tab').should('have.length', 66) + }) + + it('can open a new paths insight', () => { + insight.newInsight('PATHS') + cy.get('.Paths g').should('have.length.gte', 5) // not a fixed value unfortunately + }) + + it('can open a new stickiness insight', () => { + insight.newInsight('STICKINESS') + cy.get('.trends-insights-container canvas').should('exist') + }) + + it('can open a new lifecycle insight', () => { + insight.newInsight('LIFECYCLE') + cy.get('.trends-insights-container canvas').should('exist') + }) + + it('can open a new SQL insight', () => { + insight.newInsight('SQL') + insight.updateQueryEditorText(hogQLQuery, 'hogql-query-editor') + cy.get('[data-attr="hogql-query-editor"]').should('exist') + cy.get('tr.DataTable__row').should('have.length.gte', 2) + }) + }) + + describe('opening a new insight after opening a new SQL insight', () => { + // TRICKY: these tests have identical assertions to the ones above, but we need to open a SQL insight first + // and then click a different tab to switch to that insight. + // this is because we had a bug where doing that would mean after starting to load the new insight, + // the SQL insight would be unexpectedly re-selected and the page would switch back to it + + beforeEach(() => { + insight.newInsight('SQL') + insight.updateQueryEditorText(hogQLQuery, 'hogql-query-editor') + cy.get('[data-attr="hogql-query-editor"]').should('exist') + cy.get('tr.DataTable__row').should('have.length.gte', 2) + }) + + it('can open a new trends insight', () => { + insight.clickTab('TRENDS') + cy.get('.trends-insights-container canvas').should('exist') + cy.get('tr').should('have.length.gte', 2) + cy.contains('tr', 'No insight results').should('not.exist') + }) + + it('can open a new funnels insight', () => { + insight.clickTab('FUNNELS') + cy.get('.funnels-empty-state__title').should('exist') + }) + + it('can open a new retention insight', () => { + insight.clickTab('RETENTION') + cy.get('.RetentionContainer canvas').should('exist') + cy.get('.RetentionTable__Tab').should('have.length', 66) + }) + + it('can open a new paths insight', () => { + insight.clickTab('PATH') + cy.get('.Paths g').should('have.length.gte', 5) // not a fixed value unfortunately + }) + + it('can open a new stickiness insight', () => { + insight.clickTab('STICKINESS') + cy.get('.trends-insights-container canvas').should('exist') + }) + + it('can open a new lifecycle insight', () => { + insight.clickTab('LIFECYCLE') + cy.get('.trends-insights-container canvas').should('exist') + }) + + it('can open a new SQL insight', () => { + insight.clickTab('SQL') + insight.updateQueryEditorText(hogQLQuery, 'hogql-query-editor') + cy.get('[data-attr="hogql-query-editor"]').should('exist') + cy.get('tr.DataTable__row').should('have.length.gte', 2) + }) + }) + + it('can open a new SQL insight and navigate to a different one, then back to SQL, and back again', () => { + /** + * This is here as a regression test. We had a bug where navigating to a new query based insight, + * then clicking on the trends tab, then on SQL, and again on trends would mean that the trends + * tab would be selected, but no data loaded for it 🤷‍♀️ + */ + + insight.newInsight('SQL') + cy.get('[data-attr="hogql-query-editor"]').should('exist') + insight.updateQueryEditorText(hogQLQuery, 'hogql-query-editor') + + cy.get('.DataTable tr').should('have.length.gte', 2) + + insight.clickTab('TRENDS') + cy.get('.trends-insights-container canvas').should('exist') + cy.get('tr').should('have.length.gte', 2) + cy.contains('tr', 'No insight results').should('not.exist') + + insight.clickTab('SQL') + cy.get('[data-attr="hogql-query-editor"]').should('exist') + insight.updateQueryEditorText(hogQLQuery, 'hogql-query-editor') + + cy.get('.DataTable tr').should('have.length.gte', 2) + + insight.clickTab('TRENDS') + cy.get('.trends-insights-container canvas').should('exist') + cy.get('tr').should('have.length.gte', 2) + cy.contains('tr', 'No insight results').should('not.exist') + }) + + it('can open event explorer as an insight', () => { + cy.clickNavMenu('events') + cy.get('[data-attr="open-json-editor-button"]').click() + cy.get('[data-attr="insight-json-tab"]').should('exist') + }) + + it('does not show the json tab usually', () => { + cy.clickNavMenu('savedinsights') + cy.get('[data-attr="insight-json-tab"]').should('not.exist') + }) + }) + + describe('view source', () => { + it('can open the query editor', () => { + insight.newInsight('TRENDS') + cy.get('[aria-label="View source (BETA)"]').click() + cy.get('[data-attr="query-editor"]').should('exist') + }) + }) }) diff --git a/cypress/e2e/insights.dataExploration.cy.ts b/cypress/e2e/insights.dataExploration.cy.ts deleted file mode 100644 index b187bc517a853..0000000000000 --- a/cypress/e2e/insights.dataExploration.cy.ts +++ /dev/null @@ -1,191 +0,0 @@ -import { urls } from 'scenes/urls' -import { insight } from '../productAnalytics' -import { decideResponse } from '../fixtures/api/decide' -import { randomString } from '../support/random' - -const hogQLQuery = `select event, - count() - from events - group by event, - properties.$browser, - person.properties.email - order by count() desc - limit 2` - -// For tests related to trends please check trendsElements.js -describe('Insights (with data exploration on)', () => { - beforeEach(() => { - cy.intercept('https://app.posthog.com/decide/*', (req) => - req.reply( - decideResponse({ - hogql: true, - 'data-exploration-insights': true, - }) - ) - ) - - cy.visit(urls.insightNew()) - }) - - it('can open the query editor', () => { - insight.newInsight('TRENDS') - cy.get('[aria-label="View source (BETA)"]').click() - cy.get('[data-attr="query-editor"]').should('exist') - }) - - it('can save and load and edit a SQL insight', () => { - insight.newInsight('SQL') - const insightName = randomString('SQL insight') - insight.editName(insightName) - insight.save() - cy.visit(urls.savedInsights()) - cy.contains('.row-name a', insightName).click() - - cy.get('[data-attr="hogql-query-editor"]').should('not.exist') - cy.get('tr.DataTable__row').should('have.length.gte', 2) - - cy.get('[data-attr="insight-edit-button"]').click() - insight.clickTab('RETENTION') - - cy.get('[data-attr="insight-save-button"]').click() - - cy.get('.RetentionContainer canvas').should('exist') - cy.get('.RetentionTable__Tab').should('have.length', 66) - }) - - describe('opening a new insight directly', () => { - it('can open a new trends insight', () => { - insight.newInsight('TRENDS') - cy.get('.trends-insights-container canvas').should('exist') - cy.get('tr').should('have.length.gte', 2) - }) - - it('can open a new funnels insight', () => { - insight.newInsight('FUNNELS') - cy.get('.funnels-empty-state__title').should('exist') - }) - - it.skip('can open a new retention insight', () => { - insight.newInsight('RETENTION') - cy.get('.RetentionContainer canvas').should('exist') - cy.get('.RetentionTable__Tab').should('have.length', 66) - }) - - it('can open a new paths insight', () => { - insight.newInsight('PATHS') - cy.get('.Paths g').should('have.length.gte', 5) // not a fixed value unfortunately - }) - - it('can open a new stickiness insight', () => { - insight.newInsight('STICKINESS') - cy.get('.trends-insights-container canvas').should('exist') - }) - - it('can open a new lifecycle insight', () => { - insight.newInsight('LIFECYCLE') - cy.get('.trends-insights-container canvas').should('exist') - }) - - it('can open a new SQL insight', () => { - insight.newInsight('SQL') - insight.updateQueryEditorText(hogQLQuery, 'hogql-query-editor') - cy.get('[data-attr="hogql-query-editor"]').should('exist') - cy.get('tr.DataTable__row').should('have.length.gte', 2) - }) - }) - - describe('opening a new insight after opening a new SQL insight', () => { - // TRICKY: these tests have identical assertions to the ones above, but we need to open a SQL insight first - // and then click a different tab to switch to that insight. - // this is because we had a bug where doing that would mean after starting to load the new insight, - // the SQL insight would be unexpectedly re-selected and the page would switch back to it - - beforeEach(() => { - insight.newInsight('SQL') - insight.updateQueryEditorText(hogQLQuery, 'hogql-query-editor') - cy.get('[data-attr="hogql-query-editor"]').should('exist') - cy.get('tr.DataTable__row').should('have.length.gte', 2) - }) - - it('can open a new trends insight', () => { - insight.clickTab('TRENDS') - cy.get('.trends-insights-container canvas').should('exist') - cy.get('tr').should('have.length.gte', 2) - cy.contains('tr', 'No insight results').should('not.exist') - }) - - it('can open a new funnels insight', () => { - insight.clickTab('FUNNELS') - cy.get('.funnels-empty-state__title').should('exist') - }) - - it('can open a new retention insight', () => { - insight.clickTab('RETENTION') - cy.get('.RetentionContainer canvas').should('exist') - cy.get('.RetentionTable__Tab').should('have.length', 66) - }) - - it('can open a new paths insight', () => { - insight.clickTab('PATH') - cy.get('.Paths g').should('have.length.gte', 5) // not a fixed value unfortunately - }) - - it('can open a new stickiness insight', () => { - insight.clickTab('STICKINESS') - cy.get('.trends-insights-container canvas').should('exist') - }) - - it('can open a new lifecycle insight', () => { - insight.clickTab('LIFECYCLE') - cy.get('.trends-insights-container canvas').should('exist') - }) - - it('can open a new SQL insight', () => { - insight.clickTab('SQL') - insight.updateQueryEditorText(hogQLQuery, 'hogql-query-editor') - cy.get('[data-attr="hogql-query-editor"]').should('exist') - cy.get('tr.DataTable__row').should('have.length.gte', 2) - }) - }) - - it('can open a new SQL insight and navigate to a different one, then back to SQL, and back again', () => { - /** - * This is here as a regression test. We had a bug where navigating to a new query based insight, - * then clicking on the trends tab, then on SQL, and again on trends would mean that the trends - * tab would be selected, but no data loaded for it 🤷‍♀️ - */ - - insight.newInsight('SQL') - cy.get('[data-attr="hogql-query-editor"]').should('exist') - insight.updateQueryEditorText(hogQLQuery, 'hogql-query-editor') - - cy.get('.DataTable tr').should('have.length.gte', 2) - - insight.clickTab('TRENDS') - cy.get('.trends-insights-container canvas').should('exist') - cy.get('tr').should('have.length.gte', 2) - cy.contains('tr', 'No insight results').should('not.exist') - - insight.clickTab('SQL') - cy.get('[data-attr="hogql-query-editor"]').should('exist') - insight.updateQueryEditorText(hogQLQuery, 'hogql-query-editor') - - cy.get('.DataTable tr').should('have.length.gte', 2) - - insight.clickTab('TRENDS') - cy.get('.trends-insights-container canvas').should('exist') - cy.get('tr').should('have.length.gte', 2) - cy.contains('tr', 'No insight results').should('not.exist') - }) - - it('can open event explorer as an insight', () => { - cy.clickNavMenu('events') - cy.get('[data-attr="open-json-editor-button"]').click() - cy.get('[data-attr="insight-json-tab"]').should('exist') - }) - - it('does not show the json tab usually', () => { - cy.clickNavMenu('savedinsights') - cy.get('[data-attr="insight-json-tab"]').should('not.exist') - }) -}) diff --git a/frontend/@posthog/apps-common/src/index.ts b/frontend/@posthog/apps-common/src/index.ts index 89e708a453d84..e4beef5bc2526 100644 --- a/frontend/@posthog/apps-common/src/index.ts +++ b/frontend/@posthog/apps-common/src/index.ts @@ -1,7 +1,6 @@ import '~/styles' import '~/initKea' -export * from 'lib/components/AdHocInsight/AdHocInsight' export * from 'lib/lemon-ui/Link' export * from 'lib/components/TZLabel' export * from 'scenes/persons/PersonHeader' diff --git a/frontend/__snapshots__/filters-propertyfilters--comparing-property-filters.png b/frontend/__snapshots__/filters-propertyfilters--comparing-property-filters.png index 5e462cd310395..3f065aca545c7 100644 Binary files a/frontend/__snapshots__/filters-propertyfilters--comparing-property-filters.png and b/frontend/__snapshots__/filters-propertyfilters--comparing-property-filters.png differ diff --git a/frontend/__snapshots__/filters-propertygroupfilters--group-property-filters.png b/frontend/__snapshots__/filters-propertygroupfilters--group-property-filters.png index 91180a58d399b..b591b1079f1e9 100644 Binary files a/frontend/__snapshots__/filters-propertygroupfilters--group-property-filters.png and b/frontend/__snapshots__/filters-propertygroupfilters--group-property-filters.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends--firefox.png b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends--firefox.png index 52c8273f18ca7..7efec9298e95b 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends--firefox.png and b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends--webkit.png index ddcdacfb62c99..8bafb8e4a4723 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit--firefox.png new file mode 100644 index 0000000000000..e55753c015529 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit--webkit.png index a754ff56348c5..1c0217edbca58 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit.png b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit.png index a781cd184fa15..519747fb5bfe1 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends.png b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends.png index 04e4c0da229d6..58f9f30bdf03c 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends.png and b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--firefox.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--firefox.png index 9b9a9aa1bc4c3..74d60b033ccdd 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--firefox.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--webkit.png index 50744967fea3e..716c1de630e34 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--firefox.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--firefox.png index 2fb3b1046a351..5c1eee869d0a5 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--firefox.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--webkit.png index 544bb4d7f5353..e227af2ce06cb 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--firefox.png new file mode 100644 index 0000000000000..d2d17aeeea36f Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png index 279761c8bf979..21be361a8dcb6 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png index 27453449cec79..e17d94a1deb39 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown.png index 7eb3e79e38a43..e30f39a7ec713 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--firefox.png new file mode 100644 index 0000000000000..60b95bbfdb66c Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--webkit.png index bab72d2a781fc..e1c8ba1dab00c 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit.png index 51e01b9dc58fb..11da2c0a95608 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right.png index db828d4562db2..cd662cace3504 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert--firefox.png b/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert--firefox.png index 79c92b7fd322b..9eb5236db94bf 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert--firefox.png and b/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert--webkit.png index 0fc5afe7ae029..f3eb8ad0fa599 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert-edit--firefox.png new file mode 100644 index 0000000000000..516e23e255ec2 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert-edit--webkit.png index c34a68c250e5f..92d0d39de4b50 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert-edit.png b/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert-edit.png index 07d00fdcab9e3..c356d877be987 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert-edit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert.png b/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert.png index a18ce40423dad..340761e5ede01 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert.png and b/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom--firefox.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom--firefox.png index 7c21f9e5b1e3d..b5b8bbcc825e1 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom--firefox.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom--webkit.png index bf0bf15a92aef..f09260de72904 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown--firefox.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown--firefox.png index 0d40742751eea..f64b4c14e5885 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown--firefox.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown--webkit.png index 110dc1abc6ab0..b0af61ea1a9f7 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--firefox.png new file mode 100644 index 0000000000000..120ef4563244d Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--webkit.png index d43321308e0ae..9a6633e409f72 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit.png index 549167134dfbf..470b5181cfb3c 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown.png index ac35ad4aaa8b3..e0dbb209285ab 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit--firefox.png new file mode 100644 index 0000000000000..96f7e9e733a6b Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit--webkit.png index 3a05824b102e9..7b2ce504ffa3c 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit.png index 501f5f28e3827..53623f551297e 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom.png index abb6cd3b6fb5c..6bc6eb73432a4 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--lifecycle--firefox.png b/frontend/__snapshots__/scenes-app-insights--lifecycle--firefox.png index 1e00ae2900bde..77d26fc121795 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--lifecycle--firefox.png and b/frontend/__snapshots__/scenes-app-insights--lifecycle--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--lifecycle--webkit.png b/frontend/__snapshots__/scenes-app-insights--lifecycle--webkit.png index 743901df9b456..edb88ba342090 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--lifecycle--webkit.png and b/frontend/__snapshots__/scenes-app-insights--lifecycle--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--lifecycle-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--lifecycle-edit--firefox.png new file mode 100644 index 0000000000000..fbb64c4617dfc Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--lifecycle-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--lifecycle-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--lifecycle-edit--webkit.png index 22810493f19e1..6a4e4ff1c73a8 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--lifecycle-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--lifecycle-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--lifecycle-edit.png b/frontend/__snapshots__/scenes-app-insights--lifecycle-edit.png index 0844f1ea22547..4cc7e5f001d5b 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--lifecycle-edit.png and b/frontend/__snapshots__/scenes-app-insights--lifecycle-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--lifecycle.png b/frontend/__snapshots__/scenes-app-insights--lifecycle.png index 1f8795c07577e..81a2e0ef311f5 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--lifecycle.png and b/frontend/__snapshots__/scenes-app-insights--lifecycle.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--retention--firefox.png b/frontend/__snapshots__/scenes-app-insights--retention--firefox.png index 7d8ab287fe8dc..9ccc82e0de7db 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--retention--firefox.png and b/frontend/__snapshots__/scenes-app-insights--retention--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--retention--webkit.png b/frontend/__snapshots__/scenes-app-insights--retention--webkit.png index e71bb6fda2178..eb91b079adae9 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--retention--webkit.png and b/frontend/__snapshots__/scenes-app-insights--retention--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--retention-breakdown--firefox.png b/frontend/__snapshots__/scenes-app-insights--retention-breakdown--firefox.png index 9a02ea4a1aea1..f1459758d5cfa 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--retention-breakdown--firefox.png and b/frontend/__snapshots__/scenes-app-insights--retention-breakdown--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--retention-breakdown--webkit.png b/frontend/__snapshots__/scenes-app-insights--retention-breakdown--webkit.png index 9a0406a8b1f4b..7a8f023e3e9dd 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--retention-breakdown--webkit.png and b/frontend/__snapshots__/scenes-app-insights--retention-breakdown--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit--firefox.png new file mode 100644 index 0000000000000..a81b7f4fae4ea Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit--webkit.png index 5d3fbd5051d84..21b1f3f61894c 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit.png index 3789b32185a96..c611df7e5dd26 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--retention-breakdown.png b/frontend/__snapshots__/scenes-app-insights--retention-breakdown.png index ff0ed063c5328..ab3d5933b3ade 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--retention-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--retention-breakdown.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--retention-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--retention-edit--firefox.png new file mode 100644 index 0000000000000..d170dff9f7176 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--retention-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--retention-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--retention-edit--webkit.png index e2a08a2a1e7a4..6e61a29ee823c 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--retention-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--retention-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--retention-edit.png b/frontend/__snapshots__/scenes-app-insights--retention-edit.png index e8ba2684093a4..39b9a0d7b9ff3 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--retention-edit.png and b/frontend/__snapshots__/scenes-app-insights--retention-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--retention.png b/frontend/__snapshots__/scenes-app-insights--retention.png index 20da38f2ded16..6b582b9e3045a 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--retention.png and b/frontend/__snapshots__/scenes-app-insights--retention.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--stickiness--firefox.png b/frontend/__snapshots__/scenes-app-insights--stickiness--firefox.png index f5ee14d4ed590..bff6f5df1ac85 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--stickiness--firefox.png and b/frontend/__snapshots__/scenes-app-insights--stickiness--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--stickiness--webkit.png b/frontend/__snapshots__/scenes-app-insights--stickiness--webkit.png index 9f0360e0f9ca2..22c3be476e44d 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--stickiness--webkit.png and b/frontend/__snapshots__/scenes-app-insights--stickiness--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--stickiness-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--stickiness-edit--firefox.png new file mode 100644 index 0000000000000..34260558789f1 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--stickiness-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--stickiness-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--stickiness-edit--webkit.png index cef9eb6374173..fd3d7a9aa3f5a 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--stickiness-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--stickiness-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--stickiness-edit.png b/frontend/__snapshots__/scenes-app-insights--stickiness-edit.png index 4cf9fdd2cc8a5..9ce6c07b8535b 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--stickiness-edit.png and b/frontend/__snapshots__/scenes-app-insights--stickiness-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--stickiness.png b/frontend/__snapshots__/scenes-app-insights--stickiness.png index d5326d96c0fff..7af366d73d619 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--stickiness.png and b/frontend/__snapshots__/scenes-app-insights--stickiness.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-area--firefox.png index b43276b518dec..d9150d39ad967 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-area--firefox.png and b/frontend/__snapshots__/scenes-app-insights--trends-area--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-area--webkit.png index 14cefd1c3d7b7..a57c6efc5fe54 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-area--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-area--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown--firefox.png index 58ed9b859a5f1..29381468cab8d 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown--firefox.png and b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown--webkit.png index fdb827a9def7c..2bd7524ebdae3 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit--firefox.png new file mode 100644 index 0000000000000..5cd334a80bb81 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit--webkit.png index 08a23b45ab0a1..5ebba8d2833a9 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit.png index a40f9088b9ed1..89905d85fc851 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown.png b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown.png index b847d59922e58..982b21689c52a 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-area-edit--firefox.png new file mode 100644 index 0000000000000..91c121db982af Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-area-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-area-edit--webkit.png index f95264f0dd1b7..7d944d33589c9 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-area-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-area-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-area-edit.png index f90de59a864f9..8ae80cb421876 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-area-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-area-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area.png b/frontend/__snapshots__/scenes-app-insights--trends-area.png index 0dc05f9107fc7..4148bfb364362 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-area.png and b/frontend/__snapshots__/scenes-app-insights--trends-area.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-bar--firefox.png index b6c75cf861b0a..9b73605933ba1 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-bar--firefox.png and b/frontend/__snapshots__/scenes-app-insights--trends-bar--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-bar--webkit.png index 8a2cf598aa1a4..2646ed290a5d5 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-bar--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-bar--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown--firefox.png index 702683c260ecb..dbf99586d3052 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown--firefox.png and b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown--webkit.png index 06eca86025af6..ca63f87401d91 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit--firefox.png new file mode 100644 index 0000000000000..d521afae68d01 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit--webkit.png index 13b9b21a7ed46..8612c59bf676f 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit.png index 79148edca8b96..5582fe682120b 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown.png b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown.png index d2b321aace36c..3dfd84d01c885 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-bar-edit--firefox.png new file mode 100644 index 0000000000000..18a1c87930006 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-bar-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-bar-edit--webkit.png index 4a7684af9caae..8363ee2398315 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-bar-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-bar-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-bar-edit.png index 1d0545d25c9e2..25b00d98ff8e0 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-bar-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-bar-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar.png b/frontend/__snapshots__/scenes-app-insights--trends-bar.png index 02276d1365282..b14d2ca9bfcd1 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-bar.png and b/frontend/__snapshots__/scenes-app-insights--trends-bar.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-line--firefox.png index 794307feedb67..5e6c2c07be117 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line--firefox.png and b/frontend/__snapshots__/scenes-app-insights--trends-line--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-line--webkit.png index 370c0a1ebd890..a073622552095 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-line--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown--firefox.png index 70dfc6fc12d89..a9ba798d17193 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown--firefox.png and b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown--webkit.png index 9c64b135a6820..de3e5658dfe5c 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit--firefox.png new file mode 100644 index 0000000000000..bd041ee01c811 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit--webkit.png index 2c81f7207cbe7..057ebd8b78222 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit.png index 25dff9588739f..ba0af33d95971 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown.png b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown.png index 9d9ae82685903..38bd6a5d90bc7 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--firefox.png new file mode 100644 index 0000000000000..e46aa061a382b Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--webkit.png index 6e57854eaa117..2467bdc1cbcc0 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-line-edit.png index dc14bdf992db8..feeb3683b5c36 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-line-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line.png b/frontend/__snapshots__/scenes-app-insights--trends-line.png index f56fbaa72a3c1..dd96775fe479e 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line.png and b/frontend/__snapshots__/scenes-app-insights--trends-line.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-number--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-number--firefox.png index f1324a137ca14..ee7314ae4204f 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-number--firefox.png and b/frontend/__snapshots__/scenes-app-insights--trends-number--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-number--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-number--webkit.png index 9b70e73b97ae5..818aca05a18ae 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-number--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-number--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-number-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-number-edit--firefox.png new file mode 100644 index 0000000000000..46f00ca3ddca1 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-number-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-number-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-number-edit--webkit.png index c43a186a65cd1..848b2bdee007e 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-number-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-number-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-number-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-number-edit.png index d71ccbc385cca..db9952c926cf2 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-number-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-number-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-number.png b/frontend/__snapshots__/scenes-app-insights--trends-number.png index f0c1e9df96279..d308e574b86fe 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-number.png and b/frontend/__snapshots__/scenes-app-insights--trends-number.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-pie--firefox.png index c6e0e98ae2107..bee66cb19c158 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie--firefox.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-pie--webkit.png index f01b9f8b8ec6b..fe8206aa8fc4d 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown--firefox.png index 572d67f9fb966..86c32a2573c5d 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown--firefox.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown--webkit.png index 8e9db78bce93e..7cd6cf4188f54 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit--firefox.png new file mode 100644 index 0000000000000..d9ffef3ce9f43 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit--webkit.png index bcd34a5ce9e9a..9037cd2eae904 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit.png index a69df06ed2844..172c891398774 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown.png index 6216f3e752fab..4828825b13459 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-edit--firefox.png new file mode 100644 index 0000000000000..a6f29f73728ac Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-pie-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-edit--webkit.png index a2bfe01ced6b3..aadba9e76d421 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-edit.png index 16b124f3940e6..16ce889848a74 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie.png b/frontend/__snapshots__/scenes-app-insights--trends-pie.png index 9d78839382397..958745f0df2b5 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-table--firefox.png index 8fc2e9e2299ab..a404c0096cd5c 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table--firefox.png and b/frontend/__snapshots__/scenes-app-insights--trends-table--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-table--webkit.png index 8b577897810ac..6ac842d9332c2 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-table--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown--firefox.png index e1c678ea9737e..2ad62e2df2b69 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown--firefox.png and b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown--webkit.png index 56e8ddb311957..33f98105cc681 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit--firefox.png new file mode 100644 index 0000000000000..17e6d236fcf71 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit--webkit.png index 3049ffd542f64..2ba0b972efa2d 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit.png index 1eec025dd0e01..123852256dc75 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown.png b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown.png index f159bb3a64dbc..89fa267abe060 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-table-edit--firefox.png new file mode 100644 index 0000000000000..e95a9b7b12337 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-table-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-table-edit--webkit.png index 61be58645f00e..ef65c3ccbdc33 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-table-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-table-edit.png index 8957ffa2629ce..1f90359aab670 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-table-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table.png b/frontend/__snapshots__/scenes-app-insights--trends-table.png index 1b7f0d0b8b7c2..fec6e706074c5 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table.png and b/frontend/__snapshots__/scenes-app-insights--trends-table.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-value--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-value--firefox.png index 4a5a3c80731c4..706e323d0a719 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-value--firefox.png and b/frontend/__snapshots__/scenes-app-insights--trends-value--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-value--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-value--webkit.png index ac3e780c51768..5b7aeb01be5e4 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-value--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-value--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown--firefox.png index f4b3e8909d920..460e2cec83202 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown--firefox.png and b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown--webkit.png index 068f4c3ca1f03..5ad9ff8e5e7b9 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit--firefox.png new file mode 100644 index 0000000000000..335a3ca969b46 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit--webkit.png index 2dc99506eeb33..c9b6e09916c39 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit.png index e7e9f76ec33d7..3f780f14f570a 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown.png b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown.png index 71ffa65deae31..21264fd838544 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-value-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-value-edit--firefox.png new file mode 100644 index 0000000000000..7fe264b4921eb Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-value-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-value-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-value-edit--webkit.png index a5749e7f40b1d..c5a230c5c7abf 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-value-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-value-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-value-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-value-edit.png index 7953c8fe1efbd..200e18a310650 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-value-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-value-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-value.png b/frontend/__snapshots__/scenes-app-insights--trends-value.png index 88bcfc672f519..41ed6fea9369e 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-value.png and b/frontend/__snapshots__/scenes-app-insights--trends-value.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-world-map--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-world-map--firefox.png index 1e2283233bb9c..1bc3a86df60f6 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-world-map--firefox.png and b/frontend/__snapshots__/scenes-app-insights--trends-world-map--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-world-map--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-world-map--webkit.png index 52fd963ad6629..14d32c7f14752 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-world-map--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-world-map--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit--firefox.png new file mode 100644 index 0000000000000..f773efaa07825 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit--webkit.png index 8bcf18512332a..574abc43506c7 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit.png index 6ce864f8157f2..3210cc9638135 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-world-map.png b/frontend/__snapshots__/scenes-app-insights--trends-world-map.png index 9d39a183a037e..41ce36911a9f3 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-world-map.png and b/frontend/__snapshots__/scenes-app-insights--trends-world-map.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--user-paths--firefox.png b/frontend/__snapshots__/scenes-app-insights--user-paths--firefox.png index 98dd9bea611fc..ba18f6f6251f1 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--user-paths--firefox.png and b/frontend/__snapshots__/scenes-app-insights--user-paths--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--user-paths--webkit.png b/frontend/__snapshots__/scenes-app-insights--user-paths--webkit.png index a93988bd419fe..482dd11825e22 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--user-paths--webkit.png and b/frontend/__snapshots__/scenes-app-insights--user-paths--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--user-paths-edit--firefox.png b/frontend/__snapshots__/scenes-app-insights--user-paths-edit--firefox.png new file mode 100644 index 0000000000000..2d2399e512c97 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--user-paths-edit--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--user-paths-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--user-paths-edit--webkit.png index 759e7262243e3..d940b2bc66fc6 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--user-paths-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--user-paths-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--user-paths-edit.png b/frontend/__snapshots__/scenes-app-insights--user-paths-edit.png index a83402802678b..3efcea5f95f40 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--user-paths-edit.png and b/frontend/__snapshots__/scenes-app-insights--user-paths-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--user-paths.png b/frontend/__snapshots__/scenes-app-insights--user-paths.png index b6066d48f7d4a..38528b93cd0cb 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--user-paths.png and b/frontend/__snapshots__/scenes-app-insights--user-paths.png differ diff --git a/frontend/src/lib/components/AdHocInsight/AdHocInsight.tsx b/frontend/src/lib/components/AdHocInsight/AdHocInsight.tsx deleted file mode 100644 index e1118a86ecd07..0000000000000 --- a/frontend/src/lib/components/AdHocInsight/AdHocInsight.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { FilterType, InsightLogicProps } from '~/types' -import { useMemo } from 'react' -import { BindLogic } from 'kea' -import { insightLogic } from 'scenes/insights/insightLogic' -import { useValues } from 'kea' -import { InsightViz } from 'lib/components/Cards/InsightCard/InsightCard' -import { QueryContext } from '~/queries/schema' - -let uniqueMemoizedIndex = 0 -export function AdHocInsight({ - filters, - style, - context, -}: { - filters: Partial - style?: React.CSSProperties - context?: QueryContext -}): JSX.Element { - const pageKey = useMemo(() => `filter-${uniqueMemoizedIndex++}`, []) - const props: InsightLogicProps = { - dashboardItemId: `new-adhoc-${pageKey}`, - cachedInsight: { - filters, - }, - } - const logic = insightLogic(props) - const { insight } = useValues(logic) - - return ( - - {/* eslint-disable-next-line react/forbid-dom-props */} -
- -
-
- ) -} diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx b/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx index 8e9dbe883404d..e4b091861d0a5 100644 --- a/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx +++ b/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx @@ -237,7 +237,7 @@ function InsightMeta({ aggregationLabel, cohortsById, mathDefinitions, - isUsingDataExploration: !!featureFlags[FEATURE_FLAGS.DATA_EXPLORATION_INSIGHTS], + isUsingDataExploration: true, isUsingDashboardQueries: !!featureFlags[FEATURE_FLAGS.HOGQL], }) diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx index 15e167fb5e962..4e6d7b271889e 100644 --- a/frontend/src/lib/constants.tsx +++ b/frontend/src/lib/constants.tsx @@ -130,7 +130,6 @@ export const FEATURE_FLAGS = { ROLE_BASED_ACCESS: 'role-based-access', // owner: #team-experiments, @liyiy YULE_HOG: 'yule-hog', // owner: @benjackwhite QUERY_RUNNING_TIME: 'query_running_time', // owner: @mariusandra - DATA_EXPLORATION_INSIGHTS: 'data-exploration-insights', // owner @thmsobrmlr RECORDING_DEBUGGING: 'recording-debugging', // owner #team-session-recordings REQUIRE_EMAIL_VERIFICATION: 'require-email-verification', // owner: @raquelmsmith SAMPLING: 'sampling', // owner: @yakkomajuri diff --git a/frontend/src/queries/Query/Query.tsx b/frontend/src/queries/Query/Query.tsx index 6af7304560456..ffe5bd30c9230 100644 --- a/frontend/src/queries/Query/Query.tsx +++ b/frontend/src/queries/Query/Query.tsx @@ -1,18 +1,9 @@ -import { - isDataNode, - isDataTableNode, - isLegacyQuery, - isInsightQueryNode, - isInsightVizNode, - isTimeToSeeDataSessionsNode, -} from '../utils' +import { isDataNode, isDataTableNode, isInsightVizNode, isTimeToSeeDataSessionsNode } from '../utils' import { DataTable } from '~/queries/nodes/DataTable/DataTable' import { DataNode } from '~/queries/nodes/DataNode/DataNode' import { InsightViz } from '~/queries/nodes/InsightViz/InsightViz' import { AnyResponseType, Node, QueryContext, QuerySchema } from '~/queries/schema' import { ErrorBoundary } from '~/layout/ErrorBoundary' -import { LegacyInsightQuery } from '~/queries/nodes/LegacyInsightQuery/LegacyInsightQuery' -import { InsightQuery } from '~/queries/nodes/InsightQuery/InsightQuery' import { useEffect, useState } from 'react' import { TimeToSeeData } from '../nodes/TimeToSeeData/TimeToSeeData' import { NotebookNodeType } from 'scenes/notebooks/Nodes/types' @@ -63,9 +54,7 @@ export function Query(props: QueryProps): JSX.Element | null { } let component - if (isLegacyQuery(query)) { - component = - } else if (isDataTableNode(query)) { + if (isDataTableNode(query)) { component = ( ) @@ -73,8 +62,6 @@ export function Query(props: QueryProps): JSX.Element | null { component = } else if (isInsightVizNode(query)) { component = - } else if (isInsightQueryNode(query)) { - component = } else if (isTimeToSeeDataSessionsNode(query)) { component = } diff --git a/frontend/src/queries/examples.ts b/frontend/src/queries/examples.ts index 2afeb3cd50911..cfb361a59dfd0 100644 --- a/frontend/src/queries/examples.ts +++ b/frontend/src/queries/examples.ts @@ -6,7 +6,6 @@ import { EventsQuery, FunnelsQuery, HogQLQuery, - LegacyQuery, LifecycleQuery, Node, NodeKind, @@ -22,7 +21,6 @@ import { import { ChartDisplayType, FilterLogicalOperator, - InsightType, PropertyFilterType, PropertyGroupFilter, PropertyOperator, @@ -115,17 +113,6 @@ const PersonsTableFull: DataTableNode = { source: Persons, } -const LegacyTrendsQuery: LegacyQuery = { - kind: NodeKind.LegacyQuery, - filters: { - insight: InsightType.TRENDS, - date_from: '-7d', - events: [{ id: '$pageview', math: 'avg_count_per_actor', name: '$pageview', type: 'events', order: 0 }], - display: ChartDisplayType.ActionsLineGraph, - interval: 'day', - }, -} - const properties: PropertyGroupFilter = { type: FilterLogicalOperator.And, values: [ @@ -363,7 +350,6 @@ export const queryExamples: Record = { Persons, PersonsTable, PersonsTableFull, - LegacyTrendsQuery, InsightTrendsQuery, InsightFunnelsQuery, InsightRetentionQuery, diff --git a/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts b/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts index 72991bcbcfe20..875259bc6ea2b 100644 --- a/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts +++ b/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts @@ -51,12 +51,16 @@ export const dataNodeLogic = kea([ if (props.query?.kind && !objectsEqual(props.query, oldProps.query) && !props.cachedResults) { actions.loadData() } + if (props.cachedResults && oldProps.cachedResults == null) { + actions.setResponse(props.cachedResults) + } }), actions({ loadData: (refresh = false) => ({ refresh, queryId: uuid() }), abortAnyRunningQuery: true, abortQuery: (payload: { queryId: string }) => payload, cancelQuery: true, + setResponse: (response: Exclude) => response, clearResponse: true, startAutoLoad: true, stopAutoLoad: true, @@ -68,6 +72,7 @@ export const dataNodeLogic = kea([ response: [ props.cachedResults ?? null, { + setResponse: (response) => response, clearResponse: () => null, loadData: async ({ refresh, queryId }, breakpoint) => { if (props.cachedResults) { diff --git a/frontend/src/queries/nodes/InsightQuery/InsightQuery.tsx b/frontend/src/queries/nodes/InsightQuery/InsightQuery.tsx deleted file mode 100644 index 5404e58b21a3e..0000000000000 --- a/frontend/src/queries/nodes/InsightQuery/InsightQuery.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { InsightQueryNode, QueryContext } from '~/queries/schema' -import { InsightLogicProps, FilterType } from '~/types' -import { BindLogic } from 'kea' -import { insightLogic } from 'scenes/insights/insightLogic' -import { AdHocInsight } from 'lib/components/AdHocInsight/AdHocInsight' - -import { queryNodeToFilter } from './utils/queryNodeToFilter' - -/** Use new insight queries and transform them into old insight props to display the respective visualization. */ -export function InsightQuery({ query, context }: { query: InsightQueryNode; context: QueryContext }): JSX.Element { - const filters: Partial = queryNodeToFilter(query) - const insightProps: InsightLogicProps = { dashboardItemId: 'new', cachedInsight: { filters } } - - return ( - - - - ) -} diff --git a/frontend/src/queries/nodes/InsightViz/Breakdown.tsx b/frontend/src/queries/nodes/InsightViz/Breakdown.tsx index 5a046dc56abbd..55cb313a26a4d 100644 --- a/frontend/src/queries/nodes/InsightViz/Breakdown.tsx +++ b/frontend/src/queries/nodes/InsightViz/Breakdown.tsx @@ -1,9 +1,9 @@ import { useActions, useValues } from 'kea' -import { QueryEditorFilterProps } from '~/types' +import { EditorFilterProps } from '~/types' import { TaxonomicBreakdownFilterComponent } from 'scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownFilter' import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic' -export function Breakdown({ insightProps }: QueryEditorFilterProps): JSX.Element { +export function Breakdown({ insightProps }: EditorFilterProps): JSX.Element { const { breakdown, display, isTrends } = useValues(insightVizDataLogic(insightProps)) const { updateBreakdown, updateDisplay } = useActions(insightVizDataLogic(insightProps)) diff --git a/frontend/src/scenes/insights/EditorFilters/EditorFilterGroup.scss b/frontend/src/queries/nodes/InsightViz/EditorFilterGroup.scss similarity index 100% rename from frontend/src/scenes/insights/EditorFilters/EditorFilterGroup.scss rename to frontend/src/queries/nodes/InsightViz/EditorFilterGroup.scss diff --git a/frontend/src/queries/nodes/InsightViz/EditorFilterGroup.tsx b/frontend/src/queries/nodes/InsightViz/EditorFilterGroup.tsx index 3bbd1411ce529..7a811604eda69 100644 --- a/frontend/src/queries/nodes/InsightViz/EditorFilterGroup.tsx +++ b/frontend/src/queries/nodes/InsightViz/EditorFilterGroup.tsx @@ -1,6 +1,5 @@ import { useState } from 'react' -import type { InsightLogicProps, InsightModel, QueryInsightEditorFilterGroup } from '~/types' -import '../../../scenes/insights/EditorFilters/EditorFilterGroup.scss' +import type { InsightLogicProps, InsightModel, InsightEditorFilterGroup } from '~/types' import { LemonButton } from 'lib/lemon-ui/LemonButton' import { IconUnfoldLess, IconUnfoldMore } from 'lib/lemon-ui/icons' import { slugify } from 'lib/utils' @@ -8,8 +7,10 @@ import { LemonBadge } from 'lib/lemon-ui/LemonBadge/LemonBadge' import { PureField } from 'lib/forms/Field' import { InsightQueryNode } from '~/queries/schema' +import './EditorFilterGroup.scss' + export interface EditorFilterGroupProps { - editorFilterGroup: QueryInsightEditorFilterGroup + editorFilterGroup: InsightEditorFilterGroup insight: Partial insightProps: InsightLogicProps query: InsightQueryNode diff --git a/frontend/src/scenes/insights/EditorFilters/EditorFilters.scss b/frontend/src/queries/nodes/InsightViz/EditorFilters.scss similarity index 100% rename from frontend/src/scenes/insights/EditorFilters/EditorFilters.scss rename to frontend/src/queries/nodes/InsightViz/EditorFilters.scss diff --git a/frontend/src/queries/nodes/InsightViz/EditorFilters.tsx b/frontend/src/queries/nodes/InsightViz/EditorFilters.tsx index 923165856eccf..158938d254af3 100644 --- a/frontend/src/queries/nodes/InsightViz/EditorFilters.tsx +++ b/frontend/src/queries/nodes/InsightViz/EditorFilters.tsx @@ -3,9 +3,9 @@ import clsx from 'clsx' import { useValues } from 'kea' import { - QueryInsightEditorFilterGroup, - QueryInsightEditorFilter, - QueryEditorFilterProps, + InsightEditorFilterGroup, + InsightEditorFilter, + EditorFilterProps, ChartDisplayType, AvailableFeature, } from '~/types' @@ -22,23 +22,22 @@ import { TrendsSeriesLabel } from './TrendsSeriesLabel' import { TrendsFormulaLabel } from './TrendsFormulaLabel' import { TrendsFormula } from './TrendsFormula' import { Breakdown } from './Breakdown' -import { PathsEventsTypesDataExploration } from 'scenes/insights/EditorFilters/PathsEventTypes' -import { - PathsTargetEndDataExploration, - PathsTargetStartDataExploration, -} from 'scenes/insights/EditorFilters/PathsTarget' -import { PathsExclusionsDataExploration } from 'scenes/insights/EditorFilters/PathsExclusions' -import { PathsWildcardGroupsDataExploration } from 'scenes/insights/EditorFilters/PathsWildcardGroups' -import { PathsAdvancedDataExploration } from 'scenes/insights/EditorFilters/PathsAdvanced' -import { FunnelsQueryStepsDataExploration } from 'scenes/insights/EditorFilters/FunnelsQuerySteps' -import { AttributionDataExploration } from 'scenes/insights/EditorFilters/AttributionFilter' -import { FunnelsAdvancedDataExploration } from 'scenes/insights/EditorFilters/FunnelsAdvanced' -import { RetentionSummaryDataExploration } from 'scenes/insights/EditorFilters/RetentionSummary' +import { PathsEventsTypes } from 'scenes/insights/EditorFilters/PathsEventTypes' +import { PathsTargetEnd, PathsTargetStart } from 'scenes/insights/EditorFilters/PathsTarget' +import { PathsExclusions } from 'scenes/insights/EditorFilters/PathsExclusions' +import { PathsWildcardGroups } from 'scenes/insights/EditorFilters/PathsWildcardGroups' +import { PathsAdvanced } from 'scenes/insights/EditorFilters/PathsAdvanced' +import { FunnelsQuerySteps } from 'scenes/insights/EditorFilters/FunnelsQuerySteps' +import { Attribution } from 'scenes/insights/EditorFilters/AttributionFilter' +import { FunnelsAdvanced } from 'scenes/insights/EditorFilters/FunnelsAdvanced' +import { RetentionSummary } from 'scenes/insights/EditorFilters/RetentionSummary' import { SamplingFilterDataExploration } from 'scenes/insights/EditorFilters/SamplingFilter' import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic' import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic' +import './EditorFilters.scss' + export interface EditorFiltersProps { query: InsightQueryNode setQuery: (node: InsightQueryNode) => void @@ -61,27 +60,27 @@ export function EditorFilters({ query, setQuery, showing }: EditorFiltersProps): const hasPathsAdvanced = availableFeatures.includes(AvailableFeature.PATHS_ADVANCED) const hasAttribution = isStepsFunnel - const editorFilters: QueryInsightEditorFilterGroup[] = [ + const editorFilters: InsightEditorFilterGroup[] = [ { title: 'General', editorFilters: filterFalsy([ isRetention && { key: 'retention-summary', label: 'Retention Summary', - component: RetentionSummaryDataExploration, + component: RetentionSummary, }, ...(isPaths ? filterFalsy([ { key: 'event-types', label: 'Event Types', - component: PathsEventsTypesDataExploration, + component: PathsEventsTypes, }, hasPathsAdvanced && { key: 'wildcard-groups', label: 'Wildcard Groups', showOptional: true, - component: PathsWildcardGroupsDataExploration, + component: PathsWildcardGroups, tooltip: ( <> Use wildcard matching to group events by unique values in path item names. Use an @@ -94,12 +93,12 @@ export function EditorFilters({ query, setQuery, showing }: EditorFiltersProps): { key: 'start-target', label: 'Starts at', - component: PathsTargetStartDataExploration, + component: PathsTargetStart, }, hasPathsAdvanced && { key: 'ends-target', label: 'Ends at', - component: PathsTargetEndDataExploration, + component: PathsTargetEnd, }, ]) : []), @@ -107,7 +106,7 @@ export function EditorFilters({ query, setQuery, showing }: EditorFiltersProps): ? filterFalsy([ { key: 'query-steps', - component: FunnelsQueryStepsDataExploration, + component: FunnelsQuerySteps, }, ]) : []), @@ -138,14 +137,14 @@ export function EditorFilters({ query, setQuery, showing }: EditorFiltersProps): key: 'toggles', label: 'Lifecycle Toggles', position: 'right', - component: LifecycleToggles as (props: QueryEditorFilterProps) => JSX.Element | null, + component: LifecycleToggles as (props: EditorFilterProps) => JSX.Element | null, } : null, { key: 'properties', label: 'Filters', position: 'right', - component: GlobalAndOrFilters as (props: QueryEditorFilterProps) => JSX.Element | null, + component: GlobalAndOrFilters as (props: EditorFilterProps) => JSX.Element | null, }, ]), }, @@ -189,7 +188,7 @@ export function EditorFilters({ query, setQuery, showing }: EditorFiltersProps): ), - component: AttributionDataExploration, + component: Attribution, } : null, ]), @@ -204,7 +203,7 @@ export function EditorFilters({ query, setQuery, showing }: EditorFiltersProps): tooltip: ( <>Exclude events from Paths visualisation. You can use wildcard groups in exclusions as well. ), - component: PathsExclusionsDataExploration, + component: PathsExclusions, }, ]), }, @@ -214,12 +213,12 @@ export function EditorFilters({ query, setQuery, showing }: EditorFiltersProps): isPaths && { key: 'paths-advanced', position: 'left', - component: PathsAdvancedDataExploration, + component: PathsAdvanced, }, isFunnels && { key: 'funnels-advanced', position: 'left', - component: FunnelsAdvancedDataExploration, + component: FunnelsAdvanced, }, ]), }, @@ -235,15 +234,15 @@ export function EditorFilters({ query, setQuery, showing }: EditorFiltersProps): }, ] - let editorFilterGroups: QueryInsightEditorFilterGroup[] = [] + let editorFilterGroups: InsightEditorFilterGroup[] = [] const leftFilters = editorFilters.reduce( (acc, x) => acc.concat(x.editorFilters.filter((y) => y.position !== 'right')), - [] as QueryInsightEditorFilter[] + [] as InsightEditorFilter[] ) const rightFilters = editorFilters.reduce( (acc, x) => acc.concat(x.editorFilters.filter((y) => y.position === 'right')), - [] as QueryInsightEditorFilter[] + [] as InsightEditorFilter[] ) editorFilterGroups = [ @@ -281,6 +280,6 @@ export function EditorFilters({ query, setQuery, showing }: EditorFiltersProps): ) } -function filterFalsy(a: (QueryInsightEditorFilter | false | null | undefined)[]): QueryInsightEditorFilter[] { - return a.filter((e) => !!e) as QueryInsightEditorFilter[] +function filterFalsy(a: (InsightEditorFilter | false | null | undefined)[]): InsightEditorFilter[] { + return a.filter((e) => !!e) as InsightEditorFilter[] } diff --git a/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx b/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx index 7afe16db34b7e..0aad0a68c8085 100644 --- a/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx +++ b/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx @@ -7,8 +7,8 @@ import { insightDisplayConfigLogic } from './insightDisplayConfigLogic' import { InsightDateFilter } from 'scenes/insights/filters/InsightDateFilter' import { IntervalFilter } from 'lib/components/IntervalFilter' import { SmoothingFilter } from 'lib/components/SmoothingFilter/SmoothingFilter' -import { RetentionDatePickerDataExploration } from 'scenes/insights/RetentionDatePicker' -import { RetentionReferencePickerDataExploration } from 'scenes/insights/filters/RetentionReferencePicker' +import { RetentionDatePicker } from 'scenes/insights/RetentionDatePicker' +import { RetentionReferencePicker } from 'scenes/insights/filters/RetentionReferencePicker' import { PathStepPickerDataExploration } from 'scenes/insights/views/Paths/PathStepPicker' import { CompareFilter } from 'lib/components/CompareFilter/CompareFilter' import { UnitPicker } from 'lib/components/UnitPicker/UnitPicker' @@ -62,8 +62,8 @@ export function InsightDisplayConfig({ disableTable }: InsightDisplayConfigProps {showRetention && ( - - + + )} diff --git a/frontend/src/queries/nodes/InsightViz/InsightViz.tsx b/frontend/src/queries/nodes/InsightViz/InsightViz.tsx index ce8ee21f7d70a..e3bd2035f1800 100644 --- a/frontend/src/queries/nodes/InsightViz/InsightViz.tsx +++ b/frontend/src/queries/nodes/InsightViz/InsightViz.tsx @@ -26,7 +26,11 @@ type InsightVizProps = { export function InsightViz({ query, setQuery, context }: InsightVizProps): JSX.Element { const { insightProps } = useValues(insightLogic) - const dataNodeLogicProps: DataNodeLogicProps = { query: query.source, key: insightVizDataNodeKey(insightProps) } + const dataNodeLogicProps: DataNodeLogicProps = { + query: query.source, + key: insightVizDataNodeKey(insightProps), + cachedResults: insightProps.cachedInsight?.result != null ? insightProps.cachedInsight : undefined, + } const { insightMode } = useValues(insightSceneLogic) diff --git a/frontend/src/queries/nodes/InsightViz/TrendsFormula.tsx b/frontend/src/queries/nodes/InsightViz/TrendsFormula.tsx index 59a698765ee15..344dc2dc41d78 100644 --- a/frontend/src/queries/nodes/InsightViz/TrendsFormula.tsx +++ b/frontend/src/queries/nodes/InsightViz/TrendsFormula.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react' -import { QueryEditorFilterProps } from '~/types' +import { EditorFilterProps } from '~/types' import { useActions, useValues } from 'kea' import { trendsLogic } from 'scenes/trends/trendsLogic' import { LemonInput } from '@posthog/lemon-ui' @@ -9,7 +9,7 @@ import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic' // When updating this regex, remember to update the regex with the same name in mixins/common.py const ALLOWED_FORMULA_CHARACTERS = /^[a-zA-Z\ \-\*\^0-9\+\/\(\)\.]+$/ -export function TrendsFormula({ query, insightProps }: QueryEditorFilterProps): JSX.Element | null { +export function TrendsFormula({ query, insightProps }: EditorFilterProps): JSX.Element | null { const { isFormulaOn } = useValues(trendsLogic(insightProps)) const formula = isTrendsQuery(query) ? query.trendsFilter?.formula : null diff --git a/frontend/src/queries/nodes/InsightViz/TrendsFormulaLabel.tsx b/frontend/src/queries/nodes/InsightViz/TrendsFormulaLabel.tsx index 7b3eff54a730e..ff6789fcb076f 100644 --- a/frontend/src/queries/nodes/InsightViz/TrendsFormulaLabel.tsx +++ b/frontend/src/queries/nodes/InsightViz/TrendsFormulaLabel.tsx @@ -1,8 +1,8 @@ import { useValues } from 'kea' import { trendsLogic } from 'scenes/trends/trendsLogic' -import { QueryEditorFilterProps } from '~/types' +import { EditorFilterProps } from '~/types' -export function TrendsFormulaLabel({ insightProps }: QueryEditorFilterProps): JSX.Element | null { +export function TrendsFormulaLabel({ insightProps }: EditorFilterProps): JSX.Element | null { const { isFormulaOn } = useValues(trendsLogic(insightProps)) return isFormulaOn ? <>Formula : null } diff --git a/frontend/src/queries/nodes/InsightViz/TrendsSeriesLabel.tsx b/frontend/src/queries/nodes/InsightViz/TrendsSeriesLabel.tsx index 312172b77b5bc..cbeeb1dfcb6d6 100644 --- a/frontend/src/queries/nodes/InsightViz/TrendsSeriesLabel.tsx +++ b/frontend/src/queries/nodes/InsightViz/TrendsSeriesLabel.tsx @@ -1,6 +1,6 @@ import { useActions, useValues } from 'kea' import { trendsLogic } from 'scenes/trends/trendsLogic' -import { QueryEditorFilterProps } from '~/types' +import { EditorFilterProps } from '~/types' import { SINGLE_SERIES_DISPLAY_TYPES } from 'lib/constants' import { LemonButton } from '@posthog/lemon-ui' import { Tooltip } from 'lib/lemon-ui/Tooltip' @@ -8,7 +8,7 @@ import { IconCalculate } from 'lib/lemon-ui/icons' import { isTrendsQuery } from '~/queries/utils' import { getDisplay } from './utils' -export function TrendsSeriesLabel({ query, insightProps }: QueryEditorFilterProps): JSX.Element { +export function TrendsSeriesLabel({ query, insightProps }: EditorFilterProps): JSX.Element { const { isFormulaOn } = useValues(trendsLogic(insightProps)) const { setIsFormulaOn } = useActions(trendsLogic(insightProps)) diff --git a/frontend/src/queries/nodes/LegacyInsightQuery/LegacyInsightQuery.tsx b/frontend/src/queries/nodes/LegacyInsightQuery/LegacyInsightQuery.tsx deleted file mode 100644 index 543ab0d90581a..0000000000000 --- a/frontend/src/queries/nodes/LegacyInsightQuery/LegacyInsightQuery.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { LegacyQuery, QueryContext } from '~/queries/schema' -import { InsightLogicProps } from '~/types' -import { BindLogic } from 'kea' -import { insightLogic } from 'scenes/insights/insightLogic' -import { AdHocInsight } from 'lib/components/AdHocInsight/AdHocInsight' - -/** Given a FilterType, display a graph. */ -export function LegacyInsightQuery({ query, context }: { query: LegacyQuery; context?: QueryContext }): JSX.Element { - const insightProps: InsightLogicProps = { dashboardItemId: 'new', cachedInsight: { filters: query.filters } } - return ( - - - - ) -} diff --git a/frontend/src/queries/query.ts b/frontend/src/queries/query.ts index 2b2e833778f2c..312a1081a0ad5 100644 --- a/frontend/src/queries/query.ts +++ b/frontend/src/queries/query.ts @@ -3,7 +3,6 @@ import { DataNode, HogQLQueryResponse, PersonsNode } from './schema' import { isInsightQueryNode, isEventsQuery, - isLegacyQuery, isPersonsNode, isTimeToSeeDataSessionsQuery, isTimeToSeeDataQuery, @@ -61,12 +60,6 @@ export function queryExportContext( currentTeamId: getCurrentTeamId(), refresh, }) - } else if (isLegacyQuery(query)) { - return legacyInsightQueryExportContext({ - filters: query.filters, - currentTeamId: getCurrentTeamId(), - methodOptions, - }) } else if (isTimeToSeeDataSessionsQuery(query)) { return { path: '/api/time_to_see_data/sessions', @@ -136,13 +129,6 @@ export async function query( refresh, }) response = await resp.json() - } else if (isLegacyQuery(queryNode)) { - const [resp] = await legacyInsightQuery({ - filters: queryNode.filters, - currentTeamId: getCurrentTeamId(), - methodOptions, - }) - response = await resp.json() } else if (isTimeToSeeDataQuery(queryNode)) { response = await api.query( { diff --git a/frontend/src/queries/schema.json b/frontend/src/queries/schema.json index 178ec17cb44db..b44aa8a475463 100644 --- a/frontend/src/queries/schema.json +++ b/frontend/src/queries/schema.json @@ -95,971 +95,6 @@ } ] }, - "AnyPartialFilterType": { - "anyOf": [ - { - "additionalProperties": false, - "properties": { - "actions": { - "items": { - "type": "object" - }, - "type": "array" - }, - "aggregation_axis_format": { - "$ref": "#/definitions/AggregationAxisFormat" - }, - "aggregation_axis_postfix": { - "type": "string" - }, - "aggregation_axis_prefix": { - "type": "string" - }, - "aggregation_group_type_index": { - "type": "number" - }, - "breakdown": { - "$ref": "#/definitions/BreakdownKeyType" - }, - "breakdown_group_type_index": { - "type": ["number", "null"] - }, - "breakdown_histogram_bin_count": { - "type": "number" - }, - "breakdown_normalize_url": { - "type": "boolean" - }, - "breakdown_type": { - "anyOf": [ - { - "$ref": "#/definitions/BreakdownType" - }, - { - "type": "null" - } - ] - }, - "breakdowns": { - "items": { - "$ref": "#/definitions/Breakdown" - }, - "type": "array" - }, - "compare": { - "type": "boolean" - }, - "date_from": { - "type": ["string", "null"] - }, - "date_to": { - "type": ["string", "null"] - }, - "display": { - "$ref": "#/definitions/ChartDisplayType" - }, - "entity_id": { - "type": ["string", "number"] - }, - "entity_math": { - "type": "string" - }, - "entity_type": { - "$ref": "#/definitions/EntityType" - }, - "events": { - "items": { - "type": "object" - }, - "type": "array" - }, - "explicit_date": { - "description": "Whether the `date_from` and `date_to` should be used verbatim. Disables rounding to the start and end of period. Strings are cast to bools, e.g. \"true\" -> true.", - "type": ["boolean", "string", "null"] - }, - "filter_test_accounts": { - "type": "boolean" - }, - "formula": {}, - "from_dashboard": { - "type": ["boolean", "number"] - }, - "hidden_legend_keys": { - "additionalProperties": { - "anyOf": [ - { - "type": "boolean" - }, - { - "not": {} - } - ] - }, - "type": "object" - }, - "insight": { - "$ref": "#/definitions/InsightType" - }, - "interval": { - "$ref": "#/definitions/IntervalType" - }, - "new_entity": { - "items": { - "type": "object" - }, - "type": "array" - }, - "properties": { - "anyOf": [ - { - "items": { - "$ref": "#/definitions/AnyPropertyFilter" - }, - "type": "array" - }, - { - "$ref": "#/definitions/PropertyGroupFilter" - } - ] - }, - "sampling_factor": { - "type": ["number", "null"] - }, - "show_legend": { - "type": "boolean" - }, - "show_values_on_series": { - "type": "boolean" - }, - "shown_as": { - "$ref": "#/definitions/ShownAsValue" - }, - "smoothing_intervals": { - "type": "number" - } - }, - "type": "object" - }, - { - "additionalProperties": false, - "properties": { - "actions": { - "items": { - "type": "object" - }, - "type": "array" - }, - "aggregation_group_type_index": { - "type": "number" - }, - "breakdown": { - "$ref": "#/definitions/BreakdownKeyType" - }, - "breakdown_group_type_index": { - "type": ["number", "null"] - }, - "breakdown_normalize_url": { - "type": "boolean" - }, - "breakdown_type": { - "anyOf": [ - { - "$ref": "#/definitions/BreakdownType" - }, - { - "type": "null" - } - ] - }, - "breakdowns": { - "items": { - "$ref": "#/definitions/Breakdown" - }, - "type": "array" - }, - "compare": { - "type": "boolean" - }, - "date_from": { - "type": ["string", "null"] - }, - "date_to": { - "type": ["string", "null"] - }, - "display": { - "$ref": "#/definitions/ChartDisplayType" - }, - "entity_id": { - "type": ["string", "number"] - }, - "entity_math": { - "type": "string" - }, - "entity_type": { - "$ref": "#/definitions/EntityType" - }, - "events": { - "items": { - "type": "object" - }, - "type": "array" - }, - "explicit_date": { - "description": "Whether the `date_from` and `date_to` should be used verbatim. Disables rounding to the start and end of period. Strings are cast to bools, e.g. \"true\" -> true.", - "type": ["boolean", "string", "null"] - }, - "filter_test_accounts": { - "type": "boolean" - }, - "from_dashboard": { - "type": ["boolean", "number"] - }, - "hidden_legend_keys": { - "additionalProperties": { - "anyOf": [ - { - "type": "boolean" - }, - { - "not": {} - } - ] - }, - "type": "object" - }, - "insight": { - "$ref": "#/definitions/InsightType" - }, - "interval": { - "$ref": "#/definitions/IntervalType" - }, - "new_entity": { - "items": { - "type": "object" - }, - "type": "array" - }, - "properties": { - "anyOf": [ - { - "items": { - "$ref": "#/definitions/AnyPropertyFilter" - }, - "type": "array" - }, - { - "$ref": "#/definitions/PropertyGroupFilter" - } - ] - }, - "sampling_factor": { - "type": ["number", "null"] - }, - "show_legend": { - "type": "boolean" - }, - "show_values_on_series": { - "type": "boolean" - }, - "shown_as": { - "$ref": "#/definitions/ShownAsValue" - }, - "stickiness_days": { - "type": "number" - } - }, - "type": "object" - }, - { - "additionalProperties": false, - "properties": { - "actions": { - "items": { - "type": "object" - }, - "type": "array" - }, - "aggregation_group_type_index": { - "type": "number" - }, - "bin_count": { - "$ref": "#/definitions/BinCountValue" - }, - "breakdown": { - "$ref": "#/definitions/BreakdownKeyType" - }, - "breakdown_attribution_type": { - "$ref": "#/definitions/BreakdownAttributionType" - }, - "breakdown_attribution_value": { - "type": "number" - }, - "breakdown_group_type_index": { - "type": ["number", "null"] - }, - "breakdown_normalize_url": { - "type": "boolean" - }, - "breakdown_type": { - "anyOf": [ - { - "$ref": "#/definitions/BreakdownType" - }, - { - "type": "null" - } - ] - }, - "breakdowns": { - "items": { - "$ref": "#/definitions/Breakdown" - }, - "type": "array" - }, - "date_from": { - "type": ["string", "null"] - }, - "date_to": { - "type": ["string", "null"] - }, - "drop_off": { - "type": "boolean" - }, - "entity_id": { - "type": ["string", "number"] - }, - "entity_math": { - "type": "string" - }, - "entity_type": { - "$ref": "#/definitions/EntityType" - }, - "entrance_period_start": { - "type": "string" - }, - "events": { - "items": { - "type": "object" - }, - "type": "array" - }, - "exclusions": { - "items": { - "$ref": "#/definitions/FunnelStepRangeEntityFilter" - }, - "type": "array" - }, - "explicit_date": { - "description": "Whether the `date_from` and `date_to` should be used verbatim. Disables rounding to the start and end of period. Strings are cast to bools, e.g. \"true\" -> true.", - "type": ["boolean", "string", "null"] - }, - "filter_test_accounts": { - "type": "boolean" - }, - "from_dashboard": { - "type": ["boolean", "number"] - }, - "funnel_advanced": { - "type": "boolean" - }, - "funnel_aggregate_by_hogql": { - "type": "string" - }, - "funnel_correlation_person_converted": { - "enum": ["true", "false"], - "type": "string" - }, - "funnel_correlation_person_entity": { - "type": "object" - }, - "funnel_custom_steps": { - "items": { - "type": "number" - }, - "type": "array" - }, - "funnel_from_step": { - "type": "number" - }, - "funnel_order_type": { - "$ref": "#/definitions/StepOrderValue" - }, - "funnel_step": { - "type": "number" - }, - "funnel_step_breakdown": { - "anyOf": [ - { - "type": "string" - }, - { - "items": { - "type": "number" - }, - "type": "array" - }, - { - "type": "number" - }, - { - "type": "null" - } - ] - }, - "funnel_step_reference": { - "$ref": "#/definitions/FunnelStepReference" - }, - "funnel_to_step": { - "type": "number" - }, - "funnel_viz_type": { - "$ref": "#/definitions/FunnelVizType" - }, - "funnel_window_interval": { - "type": "number" - }, - "funnel_window_interval_unit": { - "$ref": "#/definitions/FunnelConversionWindowTimeUnit" - }, - "hidden_legend_keys": { - "additionalProperties": { - "anyOf": [ - { - "type": "boolean" - }, - { - "not": {} - } - ] - }, - "type": "object" - }, - "insight": { - "$ref": "#/definitions/InsightType" - }, - "interval": { - "$ref": "#/definitions/IntervalType" - }, - "layout": { - "$ref": "#/definitions/FunnelLayout" - }, - "new_entity": { - "items": { - "type": "object" - }, - "type": "array" - }, - "properties": { - "anyOf": [ - { - "items": { - "$ref": "#/definitions/AnyPropertyFilter" - }, - "type": "array" - }, - { - "$ref": "#/definitions/PropertyGroupFilter" - } - ] - }, - "sampling_factor": { - "type": ["number", "null"] - } - }, - "type": "object" - }, - { - "additionalProperties": false, - "properties": { - "actions": { - "items": { - "type": "object" - }, - "type": "array" - }, - "aggregation_group_type_index": { - "type": "number" - }, - "breakdown": { - "$ref": "#/definitions/BreakdownKeyType" - }, - "breakdown_group_type_index": { - "type": ["number", "null"] - }, - "breakdown_normalize_url": { - "type": "boolean" - }, - "breakdown_type": { - "anyOf": [ - { - "$ref": "#/definitions/BreakdownType" - }, - { - "type": "null" - } - ] - }, - "breakdowns": { - "items": { - "$ref": "#/definitions/Breakdown" - }, - "type": "array" - }, - "date_from": { - "type": ["string", "null"] - }, - "date_to": { - "type": ["string", "null"] - }, - "edge_limit": { - "type": "number" - }, - "end_point": { - "type": "string" - }, - "entity_id": { - "type": ["string", "number"] - }, - "entity_math": { - "type": "string" - }, - "entity_type": { - "$ref": "#/definitions/EntityType" - }, - "events": { - "items": { - "type": "object" - }, - "type": "array" - }, - "exclude_events": { - "items": { - "type": "string" - }, - "type": "array" - }, - "explicit_date": { - "description": "Whether the `date_from` and `date_to` should be used verbatim. Disables rounding to the start and end of period. Strings are cast to bools, e.g. \"true\" -> true.", - "type": ["boolean", "string", "null"] - }, - "filter_test_accounts": { - "type": "boolean" - }, - "from_dashboard": { - "type": ["boolean", "number"] - }, - "funnel_filter": { - "type": "object" - }, - "funnel_paths": { - "$ref": "#/definitions/FunnelPathType" - }, - "include_event_types": { - "items": { - "$ref": "#/definitions/PathType" - }, - "type": "array" - }, - "insight": { - "$ref": "#/definitions/InsightType" - }, - "interval": { - "$ref": "#/definitions/IntervalType" - }, - "local_path_cleaning_filters": { - "items": { - "$ref": "#/definitions/PathCleaningFilter" - }, - "type": "array" - }, - "max_edge_weight": { - "type": "number" - }, - "min_edge_weight": { - "type": "number" - }, - "new_entity": { - "items": { - "type": "object" - }, - "type": "array" - }, - "path_dropoff_key": { - "type": "string" - }, - "path_end_key": { - "type": "string" - }, - "path_groupings": { - "items": { - "type": "string" - }, - "type": "array" - }, - "path_replacements": { - "type": "boolean" - }, - "path_start_key": { - "type": "string" - }, - "path_type": { - "$ref": "#/definitions/PathType" - }, - "properties": { - "anyOf": [ - { - "items": { - "$ref": "#/definitions/AnyPropertyFilter" - }, - "type": "array" - }, - { - "$ref": "#/definitions/PropertyGroupFilter" - } - ] - }, - "sampling_factor": { - "type": ["number", "null"] - }, - "start_point": { - "type": "string" - }, - "step_limit": { - "type": "number" - } - }, - "type": "object" - }, - { - "additionalProperties": false, - "properties": { - "actions": { - "items": { - "type": "object" - }, - "type": "array" - }, - "aggregation_group_type_index": { - "type": "number" - }, - "breakdown": { - "$ref": "#/definitions/BreakdownKeyType" - }, - "breakdown_group_type_index": { - "type": ["number", "null"] - }, - "breakdown_normalize_url": { - "type": "boolean" - }, - "breakdown_type": { - "anyOf": [ - { - "$ref": "#/definitions/BreakdownType" - }, - { - "type": "null" - } - ] - }, - "breakdowns": { - "items": { - "$ref": "#/definitions/Breakdown" - }, - "type": "array" - }, - "date_from": { - "type": ["string", "null"] - }, - "date_to": { - "type": ["string", "null"] - }, - "entity_id": { - "type": ["string", "number"] - }, - "entity_math": { - "type": "string" - }, - "entity_type": { - "$ref": "#/definitions/EntityType" - }, - "events": { - "items": { - "type": "object" - }, - "type": "array" - }, - "explicit_date": { - "description": "Whether the `date_from` and `date_to` should be used verbatim. Disables rounding to the start and end of period. Strings are cast to bools, e.g. \"true\" -> true.", - "type": ["boolean", "string", "null"] - }, - "filter_test_accounts": { - "type": "boolean" - }, - "from_dashboard": { - "type": ["boolean", "number"] - }, - "insight": { - "$ref": "#/definitions/InsightType" - }, - "interval": { - "$ref": "#/definitions/IntervalType" - }, - "new_entity": { - "items": { - "type": "object" - }, - "type": "array" - }, - "period": { - "$ref": "#/definitions/RetentionPeriod" - }, - "properties": { - "anyOf": [ - { - "items": { - "$ref": "#/definitions/AnyPropertyFilter" - }, - "type": "array" - }, - { - "$ref": "#/definitions/PropertyGroupFilter" - } - ] - }, - "retention_reference": { - "enum": ["total", "previous"], - "type": "string" - }, - "retention_type": { - "$ref": "#/definitions/RetentionType" - }, - "returning_entity": { - "type": "object" - }, - "sampling_factor": { - "type": ["number", "null"] - }, - "target_entity": { - "type": "object" - }, - "total_intervals": { - "type": "number" - } - }, - "type": "object" - }, - { - "additionalProperties": false, - "properties": { - "actions": { - "items": { - "type": "object" - }, - "type": "array" - }, - "aggregation_group_type_index": { - "type": "number" - }, - "breakdown": { - "$ref": "#/definitions/BreakdownKeyType" - }, - "breakdown_group_type_index": { - "type": ["number", "null"] - }, - "breakdown_normalize_url": { - "type": "boolean" - }, - "breakdown_type": { - "anyOf": [ - { - "$ref": "#/definitions/BreakdownType" - }, - { - "type": "null" - } - ] - }, - "breakdowns": { - "items": { - "$ref": "#/definitions/Breakdown" - }, - "type": "array" - }, - "date_from": { - "type": ["string", "null"] - }, - "date_to": { - "type": ["string", "null"] - }, - "entity_id": { - "type": ["string", "number"] - }, - "entity_math": { - "type": "string" - }, - "entity_type": { - "$ref": "#/definitions/EntityType" - }, - "events": { - "items": { - "type": "object" - }, - "type": "array" - }, - "explicit_date": { - "description": "Whether the `date_from` and `date_to` should be used verbatim. Disables rounding to the start and end of period. Strings are cast to bools, e.g. \"true\" -> true.", - "type": ["boolean", "string", "null"] - }, - "filter_test_accounts": { - "type": "boolean" - }, - "from_dashboard": { - "type": ["boolean", "number"] - }, - "insight": { - "$ref": "#/definitions/InsightType" - }, - "interval": { - "$ref": "#/definitions/IntervalType" - }, - "new_entity": { - "items": { - "type": "object" - }, - "type": "array" - }, - "properties": { - "anyOf": [ - { - "items": { - "$ref": "#/definitions/AnyPropertyFilter" - }, - "type": "array" - }, - { - "$ref": "#/definitions/PropertyGroupFilter" - } - ] - }, - "sampling_factor": { - "type": ["number", "null"] - }, - "show_values_on_series": { - "type": "boolean" - }, - "shown_as": { - "$ref": "#/definitions/ShownAsValue" - }, - "toggledLifecycles": { - "items": { - "$ref": "#/definitions/LifecycleToggle" - }, - "type": "array" - } - }, - "type": "object" - }, - { - "additionalProperties": false, - "properties": { - "actions": { - "items": { - "type": "object" - }, - "type": "array" - }, - "aggregation_group_type_index": { - "type": "number" - }, - "breakdown": { - "$ref": "#/definitions/BreakdownKeyType" - }, - "breakdown_group_type_index": { - "type": ["number", "null"] - }, - "breakdown_normalize_url": { - "type": "boolean" - }, - "breakdown_type": { - "anyOf": [ - { - "$ref": "#/definitions/BreakdownType" - }, - { - "type": "null" - } - ] - }, - "breakdowns": { - "items": { - "$ref": "#/definitions/Breakdown" - }, - "type": "array" - }, - "date_from": { - "type": ["string", "null"] - }, - "date_to": { - "type": ["string", "null"] - }, - "entity_id": { - "type": ["string", "number"] - }, - "entity_math": { - "type": "string" - }, - "entity_type": { - "$ref": "#/definitions/EntityType" - }, - "events": { - "items": { - "type": "object" - }, - "type": "array" - }, - "explicit_date": { - "description": "Whether the `date_from` and `date_to` should be used verbatim. Disables rounding to the start and end of period. Strings are cast to bools, e.g. \"true\" -> true.", - "type": ["boolean", "string", "null"] - }, - "filter_test_accounts": { - "type": "boolean" - }, - "from_dashboard": { - "type": ["boolean", "number"] - }, - "insight": { - "$ref": "#/definitions/InsightType" - }, - "interval": { - "$ref": "#/definitions/IntervalType" - }, - "new_entity": { - "items": { - "type": "object" - }, - "type": "array" - }, - "properties": { - "anyOf": [ - { - "items": { - "$ref": "#/definitions/AnyPropertyFilter" - }, - "type": "array" - }, - { - "$ref": "#/definitions/PropertyGroupFilter" - } - ] - }, - "sampling_factor": { - "type": ["number", "null"] - } - }, - "type": "object" - } - ] - }, "AnyPropertyFilter": { "anyOf": [ { @@ -2139,10 +1174,6 @@ } ] }, - "InsightType": { - "enum": ["TRENDS", "STICKINESS", "LIFECYCLE", "FUNNELS", "RETENTION", "PATHS", "JSON", "SQL"], - "type": "string" - }, "InsightVizNode": { "additionalProperties": false, "properties": { @@ -2161,20 +1192,6 @@ "enum": ["hour", "day", "week", "month"], "type": "string" }, - "LegacyQuery": { - "additionalProperties": false, - "properties": { - "filters": { - "$ref": "#/definitions/AnyPartialFilterType" - }, - "kind": { - "const": "LegacyQuery", - "type": "string" - } - }, - "required": ["filters", "kind"], - "type": "object" - }, "LifecycleFilter": { "additionalProperties": false, "description": "`LifecycleFilterType` minus everything inherited from `FilterType`", @@ -2559,9 +1576,6 @@ { "$ref": "#/definitions/InsightVizNode" }, - { - "$ref": "#/definitions/LegacyQuery" - }, { "$ref": "#/definitions/TrendsQuery" }, diff --git a/frontend/src/queries/schema.ts b/frontend/src/queries/schema.ts index ae0bfb584e796..9c2f02bdd56c0 100644 --- a/frontend/src/queries/schema.ts +++ b/frontend/src/queries/schema.ts @@ -1,5 +1,4 @@ import { - AnyPartialFilterType, AnyPropertyFilter, Breakdown, BreakdownKeyType, @@ -45,7 +44,6 @@ export enum NodeKind { // Interface nodes DataTableNode = 'DataTableNode', InsightVizNode = 'InsightVizNode', - LegacyQuery = 'LegacyQuery', // New queries, not yet implemented TrendsQuery = 'TrendsQuery', @@ -77,7 +75,6 @@ export type QuerySchema = // Interface nodes | DataTableNode | InsightVizNode - | LegacyQuery // New queries, not yet implemented | TrendsQuery @@ -474,13 +471,6 @@ export interface RecentPerformancePageViewNode extends DataNode { export type HogQLExpression = string -// Legacy queries - -export interface LegacyQuery extends Node { - kind: NodeKind.LegacyQuery - filters: AnyPartialFilterType -} - // Various utility types below export interface DateRange { diff --git a/frontend/src/queries/utils.ts b/frontend/src/queries/utils.ts index 30424bece30d7..319c4839b769f 100644 --- a/frontend/src/queries/utils.ts +++ b/frontend/src/queries/utils.ts @@ -15,7 +15,6 @@ import { InsightFilterProperty, InsightQueryNode, InsightVizNode, - LegacyQuery, Node, NodeKind, PersonsNode, @@ -81,10 +80,6 @@ export function isInsightVizNode(node?: Node | null): node is InsightVizNode { return node?.kind === NodeKind.InsightVizNode } -export function isLegacyQuery(node?: Node | null): node is LegacyQuery { - return node?.kind === NodeKind.LegacyQuery -} - export function isHogQLQuery(node?: Node | null): node is HogQLQuery { return node?.kind === NodeKind.HogQLQuery } @@ -184,11 +179,6 @@ export function dateRangeFor(node?: Node): DateRange | undefined { return undefined // convert from number of days to date range } else if (isTimeToSeeDataSessionsQuery(node)) { return node.dateRange - } else if (isLegacyQuery(node)) { - return { - date_from: node.filters?.date_from, - date_to: node.filters?.date_to, - } } else if (isActionsNode(node)) { return undefined } else if (isEventsNode(node)) { diff --git a/frontend/src/scenes/funnels/funnelCorrelationDetailsLogic.test.ts b/frontend/src/scenes/funnels/funnelCorrelationDetailsLogic.test.ts index 839ac0bd41f26..304dbc0b2e2cc 100644 --- a/frontend/src/scenes/funnels/funnelCorrelationDetailsLogic.test.ts +++ b/frontend/src/scenes/funnels/funnelCorrelationDetailsLogic.test.ts @@ -1,7 +1,11 @@ import { expectLogic } from 'kea-test-utils' import { initKeaTests } from '~/test/init' +import { DataNode } from '~/queries/schema' + import { FunnelCorrelationResultsType, FunnelCorrelationType, InsightLogicProps, InsightType } from '~/types' +import { insightVizDataNodeKey } from '~/queries/nodes/InsightViz/InsightViz' +import { dataNodeLogic } from '~/queries/nodes/DataNode/dataNodeLogic' import { funnelCorrelationDetailsLogic } from './funnelCorrelationDetailsLogic' const funnelResults = [ @@ -42,8 +46,8 @@ describe('funnelCorrelationDetailsLogic', () => { filters: { insight: InsightType.FUNNELS, actions: [ - { id: '$pageview', order: 0 }, - { id: '$pageview', order: 1 }, + { type: 'actions', id: '$pageview', order: 0 }, + { type: 'actions', id: '$pageview', order: 1 }, ], }, result: funnelResults, @@ -51,6 +55,13 @@ describe('funnelCorrelationDetailsLogic', () => { } beforeEach(async () => { + const builtDataNodeLogic = dataNodeLogic({ + key: insightVizDataNodeKey(defaultProps), + query: {} as DataNode, + cachedResults: { result: funnelResults }, + }) + builtDataNodeLogic.mount() + logic = funnelCorrelationDetailsLogic(defaultProps) logic.mount() }) diff --git a/frontend/src/scenes/funnels/funnelCorrelationDetailsLogic.ts b/frontend/src/scenes/funnels/funnelCorrelationDetailsLogic.ts index 7602686ef7c2f..1fd130da21e74 100644 --- a/frontend/src/scenes/funnels/funnelCorrelationDetailsLogic.ts +++ b/frontend/src/scenes/funnels/funnelCorrelationDetailsLogic.ts @@ -2,8 +2,6 @@ import { kea, props, key, path, connect, selectors, reducers, actions } from 'ke import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils' import { FunnelCorrelation, InsightLogicProps } from '~/types' -import { insightLogic } from 'scenes/insights/insightLogic' -import { funnelLogic } from './funnelLogic' import { funnelDataLogic } from './funnelDataLogic' import type { funnelCorrelationDetailsLogicType } from './funnelCorrelationDetailsLogicType' @@ -13,14 +11,7 @@ export const funnelCorrelationDetailsLogic = kea ['scenes', 'funnels', 'funnelCorrelationDetailsLogic', key]), connect((props: InsightLogicProps) => ({ - values: [ - insightLogic(props), - ['isUsingDataExploration'], - funnelLogic(props), - ['steps as legacySteps'], - funnelDataLogic(props), - ['steps as dataExplorationSteps'], - ], + values: [funnelDataLogic(props), ['steps']], })), actions({ @@ -37,13 +28,6 @@ export const funnelCorrelationDetailsLogic = kea [s.isUsingDataExploration, s.dataExplorationSteps, s.legacySteps], - (isUsingDataExploration, dataExplorationApiParams, legacyApiParams) => { - return isUsingDataExploration ? dataExplorationApiParams : legacyApiParams - }, - ], - correlationMatrixAndScore: [ (s) => [s.funnelCorrelationDetails, s.steps], ( diff --git a/frontend/src/scenes/funnels/funnelCorrelationUsageLogic.ts b/frontend/src/scenes/funnels/funnelCorrelationUsageLogic.ts index 3175922bb4d57..ad18b8f901cbc 100644 --- a/frontend/src/scenes/funnels/funnelCorrelationUsageLogic.ts +++ b/frontend/src/scenes/funnels/funnelCorrelationUsageLogic.ts @@ -7,7 +7,7 @@ import { visibilitySensorLogic } from 'lib/components/VisibilitySensor/visibilit import type { funnelCorrelationUsageLogicType } from './funnelCorrelationUsageLogicType' import { insightLogic } from 'scenes/insights/insightLogic' -import { insightDataLogic } from 'scenes/insights/insightDataLogic' +import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic' import { parseEventAndProperty } from './funnelUtils' import { funnelLogic } from './funnelLogic' import { funnelDataLogic } from './funnelDataLogic' @@ -27,7 +27,7 @@ export const funnelCorrelationUsageLogic = kea( actions: [ insightLogic(props), ['loadResultsSuccess'], - insightDataLogic(props), + insightVizDataLogic(props), ['loadDataSuccess'], funnelLogic(props), ['hideSkewWarning as legacyHideSkewWarning', 'openCorrelationPersonsModal'], diff --git a/frontend/src/scenes/funnels/funnelLogic.test.ts b/frontend/src/scenes/funnels/funnelLogic.test.ts index 5b0bf66d2aaf3..7671ca7325345 100644 --- a/frontend/src/scenes/funnels/funnelLogic.test.ts +++ b/frontend/src/scenes/funnels/funnelLogic.test.ts @@ -1,5 +1,4 @@ import { funnelLogic } from './funnelLogic' -import { MOCK_TEAM_ID } from 'lib/api.mock' import { expectLogic } from 'kea-test-utils' import { initKeaTests } from '~/test/init' import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic' @@ -12,7 +11,6 @@ import { router } from 'kea-router' import { urls } from 'scenes/urls' import { useMocks } from '~/mocks/jest' import { useAvailableFeatures } from '~/mocks/features' -import api from 'lib/api' import { openPersonsModal } from 'scenes/trends/persons-modal/PersonsModal' jest.mock('scenes/trends/persons-modal/PersonsModal') @@ -103,53 +101,6 @@ describe('funnelLogic', () => { ]) await expectLogic(preflightLogic).toDispatchActions(['loadPreflightSuccess']) }) - - it('sets filters after load if valid', async () => { - await expectLogic(logic) - .toDispatchActions(['loadResults']) - .toMatchValues({ - insight: expect.objectContaining({ - short_id: undefined, - filters: { - insight: InsightType.FUNNELS, - actions: [ - { id: '$pageview', order: 0 }, - { id: '$pageview', order: 1 }, - ], - }, - result: null, - }), - filters: { - insight: InsightType.FUNNELS, - actions: [ - { id: '$pageview', order: 0 }, - { id: '$pageview', order: 1 }, - ], - }, - isFunnelWithEnoughSteps: true, - }) - .toDispatchActions(['loadResultsSuccess']) - .toMatchValues({ - insight: expect.objectContaining({ - filters: { - insight: InsightType.FUNNELS, - actions: [ - { id: '$pageview', order: 0 }, - { id: '$pageview', order: 1 }, - ], - }, - result: expect.arrayContaining([expect.objectContaining({ count: 19 })]), - }), - filters: { - insight: InsightType.FUNNELS, - actions: [ - { id: '$pageview', order: 0 }, - { id: '$pageview', order: 1 }, - ], - }, - isFunnelWithEnoughSteps: true, - }) - }) }) describe('isFunnelWithEnoughSteps', () => { @@ -180,56 +131,6 @@ describe('funnelLogic', () => { }) }) - it("load results, don't send breakdown if old visualisation is shown", async () => { - jest.spyOn(api, 'createResponse') - await initFunnelLogic() - - // wait for clickhouse features to be enabled, otherwise this won't call "loadResults" - await expectLogic(preflightLogic).toDispatchActions(['loadPreflightSuccess']) - - await expectLogic(logic, () => { - logic.actions.setFilters({ - actions: [], - events: [ - { id: '$pageview', order: 0 }, - { id: '$pageview', order: 1 }, - { id: '$pageview', order: 2 }, - ], - breakdown: '$active_feature_flags', - }) - }) - .toDispatchActions(['setFilters', 'loadResults', 'loadResultsSuccess']) - .toMatchValues({ - apiParams: expect.objectContaining({ - actions: [], - events: [ - { id: '$pageview', order: 0 }, - { id: '$pageview', order: 1 }, - { id: '$pageview', order: 2 }, - ], - breakdown: undefined, - breakdown_type: undefined, - }), - }) - - expect(api.createResponse).toHaveBeenNthCalledWith( - 2, - `api/projects/${MOCK_TEAM_ID}/insights/funnel/`, - expect.objectContaining({ - actions: [], - events: [ - { id: '$pageview', order: 0 }, - { id: '$pageview', order: 1 }, - { id: '$pageview', order: 2 }, - ], - breakdown: undefined, - breakdown_type: undefined, - insight: 'FUNNELS', - }), - expect.anything() - ) - }) - describe('syncs with insightLogic', () => { const props = { dashboardItemId: Insight123 } beforeEach(async () => { diff --git a/frontend/src/scenes/insights/EditorFilters/AttributionFilter.tsx b/frontend/src/scenes/insights/EditorFilters/AttributionFilter.tsx index cf7177531c6b0..3aff4375e8c36 100644 --- a/frontend/src/scenes/insights/EditorFilters/AttributionFilter.tsx +++ b/frontend/src/scenes/insights/EditorFilters/AttributionFilter.tsx @@ -1,43 +1,17 @@ import { useActions, useValues } from 'kea' -import { - BreakdownAttributionType, - EditorFilterProps, - FunnelStepWithNestedBreakdown, - QueryEditorFilterProps, - StepOrderValue, -} from '~/types' +import { BreakdownAttributionType, EditorFilterProps, StepOrderValue } from '~/types' import { LemonSelect } from '@posthog/lemon-ui' -import { funnelLogic } from 'scenes/funnels/funnelLogic' import { FunnelsFilter } from '~/queries/schema' import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic' import { FUNNEL_STEP_COUNT_LIMIT } from './FunnelsQuerySteps' -export function AttributionDataExploration({ insightProps }: QueryEditorFilterProps): JSX.Element { +export function Attribution({ insightProps }: EditorFilterProps): JSX.Element { const { insightFilter, steps } = useValues(funnelDataLogic(insightProps)) const { updateInsightFilter } = useActions(funnelDataLogic(insightProps)) - return -} - -export function Attribution({ insightProps }: EditorFilterProps): JSX.Element { - const { filters, steps } = useValues(funnelLogic(insightProps)) - const { setFilters } = useActions(funnelLogic(insightProps)) - - return -} - -type AttributionComponentProps = { - setFilters: (filters: FunnelsFilter) => void - steps: FunnelStepWithNestedBreakdown[] -} & FunnelsFilter + const { breakdown_attribution_type, breakdown_attribution_value, funnel_order_type } = (insightFilter || + {}) as FunnelsFilter -export function AttributionComponent({ - breakdown_attribution_type, - breakdown_attribution_value, - funnel_order_type, - setFilters, - steps, -}: AttributionComponentProps): JSX.Element { const currentValue: BreakdownAttributionType | `${BreakdownAttributionType.Step}/${number}` = !breakdown_attribution_type ? BreakdownAttributionType.FirstTouch @@ -73,7 +47,7 @@ export function AttributionComponent({ onChange={(value) => { const [breakdownAttributionType, breakdownAttributionValue] = (value || '').split('/') if (value) { - setFilters({ + updateInsightFilter({ breakdown_attribution_type: breakdownAttributionType as BreakdownAttributionType, breakdown_attribution_value: breakdownAttributionValue ? parseInt(breakdownAttributionValue) diff --git a/frontend/src/scenes/insights/EditorFilters/Breakdown.tsx b/frontend/src/scenes/insights/EditorFilters/Breakdown.tsx deleted file mode 100644 index 76095a5ac82bf..0000000000000 --- a/frontend/src/scenes/insights/EditorFilters/Breakdown.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { useActions } from 'kea' -import { EditorFilterProps } from '~/types' -import { TaxonomicBreakdownFilter } from 'scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownFilter' -import { insightLogic } from 'scenes/insights/insightLogic' - -export function Breakdown({ filters }: EditorFilterProps): JSX.Element { - const { setFiltersMerge } = useActions(insightLogic) - - return -} diff --git a/frontend/src/scenes/insights/EditorFilters/EditorFilterGroup.tsx b/frontend/src/scenes/insights/EditorFilters/EditorFilterGroup.tsx deleted file mode 100644 index d1f5a3326268f..0000000000000 --- a/frontend/src/scenes/insights/EditorFilters/EditorFilterGroup.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { useState } from 'react' -import { EditorFilterProps, InsightEditorFilterGroup, InsightLogicProps, InsightModel } from '~/types' -import { cleanFilters } from '../utils/cleanFilters' -import './EditorFilterGroup.scss' -import { LemonButton } from 'lib/lemon-ui/LemonButton' -import { IconUnfoldLess, IconUnfoldMore } from 'lib/lemon-ui/icons' -import { slugify } from 'lib/utils' -import { LemonBadge } from 'lib/lemon-ui/LemonBadge/LemonBadge' -import { PureField } from 'lib/forms/Field' - -export interface EditorFilterGroupProps { - editorFilterGroup: InsightEditorFilterGroup - insight: Partial - insightProps: InsightLogicProps -} - -export function EditorFilterGroup({ editorFilterGroup, insight, insightProps }: EditorFilterGroupProps): JSX.Element { - const { title, editorFilters, count, defaultExpanded = true } = editorFilterGroup - const [isRowExpanded, setIsRowExpanded] = useState(defaultExpanded) - - return ( -
- {title && ( -
- setIsRowExpanded(!isRowExpanded)} - sideIcon={isRowExpanded ? : } - title={isRowExpanded ? 'Show less' : 'Show more'} - data-attr={'editor-filter-group-collapse-' + slugify(title)} - > -
- {title} - -
-
-
- )} -
- {editorFilters.map( - ({ label: Label, tooltip, showOptional, key, valueSelector, component: Component }) => { - if (Component && Component.name === 'component') { - throw new Error( - `Component for filter ${key} is an anonymous function, which is not a valid React component! Use a named function instead.` - ) - } - // Don't calculate editorFilterProps if not needed - const editorFilterProps: EditorFilterProps | null = - typeof Label === 'function' || Component - ? { - insight, - insightProps, - filters: insight.filters ?? cleanFilters({}), - value: (valueSelector ? valueSelector(insight) : insight?.filters?.[key]) ?? null, - } - : null - return ( -
- - ) : ( - Label - ) - } - info={tooltip} - showOptional={showOptional} - > - {Component ? : null} - -
- ) - } - )} -
-
- ) -} diff --git a/frontend/src/scenes/insights/EditorFilters/EditorFilters.tsx b/frontend/src/scenes/insights/EditorFilters/EditorFilters.tsx deleted file mode 100644 index 88878ce8ab2dc..0000000000000 --- a/frontend/src/scenes/insights/EditorFilters/EditorFilters.tsx +++ /dev/null @@ -1,306 +0,0 @@ -import { - AvailableFeature, - ChartDisplayType, - FunnelVizType, - InsightEditorFilter, - InsightEditorFilterGroup, - InsightLogicProps, -} from '~/types' -import { CSSTransition } from 'react-transition-group' -import { TrendsSeries, TrendsSeriesLabel } from 'scenes/insights/EditorFilters/TrendsSeries' -import { FEATURE_FLAGS, NON_BREAKDOWN_DISPLAY_TYPES } from 'lib/constants' -import { GlobalAndOrFilters } from 'scenes/insights/EditorFilters/GlobalAndOrFilters' -import { TrendsFormula, TrendsFormulaLabel } from 'scenes/insights/EditorFilters/TrendsFormula' -import { Breakdown } from 'scenes/insights/EditorFilters/Breakdown' -import { LifecycleToggles } from 'scenes/insights/EditorFilters/LifecycleToggles' -import { RetentionSummary } from './RetentionSummary' -import { PathsEventTypes } from './PathsEventTypes' -import { PathsWildcardGroups } from './PathsWildcardGroups' -import { PathsTargetEnd, PathsTargetStart } from './PathsTarget' -import { PathsAdvanced } from './PathsAdvanced' -import { FunnelsQuerySteps } from './FunnelsQuerySteps' -import { FunnelsAdvanced } from './FunnelsAdvanced' -import { PathsExclusions } from './PathsExclusions' -import { EditorFilterGroup } from './EditorFilterGroup' -import { useValues } from 'kea' -import { userLogic } from 'scenes/userLogic' -import { insightLogic } from '../insightLogic' -import { funnelLogic } from 'scenes/funnels/funnelLogic' -import { featureFlagLogic } from 'lib/logic/featureFlagLogic' -import './EditorFilters.scss' -import clsx from 'clsx' -import { Attribution } from './AttributionFilter' -import { - isFunnelsFilter, - isLifecycleFilter, - isPathsFilter, - isRetentionFilter, - isStickinessFilter, - isTrendsFilter, -} from 'scenes/insights/sharedUtils' -import { SamplingFilter } from './SamplingFilter' - -export interface EditorFiltersProps { - insightProps: InsightLogicProps - showing: boolean -} - -export function EditorFilters({ insightProps, showing }: EditorFiltersProps): JSX.Element { - const { user } = useValues(userLogic) - const availableFeatures = user?.organization?.available_features || [] - - const logic = insightLogic(insightProps) - const { filters, insight, filterPropertiesCount } = useValues(logic) - - const { advancedOptionsUsedCount } = useValues(funnelLogic(insightProps)) - - const { featureFlags } = useValues(featureFlagLogic) - - const isTrends = isTrendsFilter(filters) - const isLifecycle = isLifecycleFilter(filters) - const isStickiness = isStickinessFilter(filters) - const isRetention = isRetentionFilter(filters) - const isPaths = isPathsFilter(filters) - const isFunnels = isFunnelsFilter(filters) - const isTrendsLike = isTrends || isLifecycle || isStickiness - - const hasBreakdown = - (isTrends && !NON_BREAKDOWN_DISPLAY_TYPES.includes(filters.display || ChartDisplayType.ActionsLineGraph)) || - (isRetention && - featureFlags[FEATURE_FLAGS.RETENTION_BREAKDOWN] && - (filters as any).display !== ChartDisplayType.ActionsLineGraph) || - (isFunnels && filters.funnel_viz_type === FunnelVizType.Steps) - const hasPathsAdvanced = availableFeatures.includes(AvailableFeature.PATHS_ADVANCED) - const hasAttribution = isFunnels && filters.funnel_viz_type === FunnelVizType.Steps - - const advancedOptionsCount = advancedOptionsUsedCount + (isTrends && filters.formula ? 1 : 0) - const advancedOptionsExpanded = !!advancedOptionsCount - - const editorFilters: InsightEditorFilterGroup[] = [ - { - title: 'General', - editorFilters: filterFalsy([ - isRetention && { - key: 'retention-summary', - label: 'Retention Summary', - component: RetentionSummary, - }, - ...(isPaths - ? filterFalsy([ - { - key: 'event-types', - label: 'Event Types', - component: PathsEventTypes, - }, - hasPathsAdvanced && { - key: 'wildcard-groups', - label: 'Wildcard Groups', - showOptional: true, - component: PathsWildcardGroups, - tooltip: ( - <> - Use wildcard matching to group events by unique values in path item names. Use an - asterisk (*) in place of unique values. For example, instead of - /merchant/1234/payment, replace the unique value with an asterisk - /merchant/*/payment. Use a comma to separate multiple wildcards. - - ), - }, - { - key: 'start-target', - label: 'Starts at', - component: PathsTargetStart, - }, - hasPathsAdvanced && { - key: 'ends-target', - label: 'Ends at', - component: PathsTargetEnd, - }, - ]) - : []), - ...(isFunnels - ? filterFalsy([ - { - key: 'query-steps', - // label: 'Query Steps', - component: FunnelsQuerySteps, - }, - ]) - : []), - ]), - }, - { - title: 'Series', - editorFilters: filterFalsy([ - isTrendsLike && { - key: 'series', - label: isTrends ? TrendsSeriesLabel : undefined, - component: TrendsSeries, - }, - isTrends - ? { - key: 'formula', - label: TrendsFormulaLabel, - component: TrendsFormula, - } - : null, - ]), - }, - { - title: 'Filters', - count: filterPropertiesCount, - - editorFilters: filterFalsy([ - isLifecycle - ? { - key: 'toggles', - label: 'Lifecycle Toggles', - position: 'right', - component: LifecycleToggles, - } - : null, - { - key: 'properties', - label: 'Filters', - position: 'right', - component: GlobalAndOrFilters, - }, - ]), - }, - { - title: 'Breakdown', - count: filters.breakdowns?.length || (filters.breakdown ? 1 : 0), - position: 'right', - editorFilters: filterFalsy([ - hasBreakdown - ? { - key: 'breakdown', - label: 'Breakdown by', - position: 'right', - tooltip: ( - <> - Use breakdown to see the aggregation (total volume, active users, etc.) for each value - of that property. For example, breaking down by Current URL with total volume will - give you the event volume for each URL your users have visited. - - ), - component: Breakdown, - } - : null, - hasAttribution - ? { - key: 'attribution', - label: 'Attribution type', - position: 'right', - - tooltip: ( -
- When breaking funnels down by a property, you can choose how to assign users to the - various property values. This is useful because property values can change for a - user/group as someone travels through the funnel. -
    -
  • First step: the first property value seen from all steps is chosen.
  • -
  • Last step: last property value seen from all steps is chosen.
  • -
  • Specific step: the property value seen at that specific step is chosen.
  • -
  • All steps: the property value must be seen in all steps.
  • -
  • - Any step: the property value must be seen on at least one step of the funnel. -
  • -
-
- ), - component: Attribution, - } - : null, - ]), - }, - { - title: 'Exclusions', - position: 'right', - editorFilters: filterFalsy([ - isPaths && { - key: 'paths-exclusions', - label: 'Exclusions', - position: 'right', - tooltip: ( - <>Exclude events from Paths visualisation. You can use wildcard groups in exclusions as well. - ), - component: PathsExclusions, - }, - ]), - }, - { - title: 'Advanced Options', - position: 'left', - defaultExpanded: advancedOptionsExpanded, - count: advancedOptionsCount, - editorFilters: filterFalsy([ - isPaths && { - key: 'paths-advanced', - component: PathsAdvanced, - }, - isFunnels && { - key: 'funnels-advanced', - component: FunnelsAdvanced, - }, - ]), - }, - { - title: 'Sampling', - position: 'right', - editorFilters: filterFalsy([ - { - key: 'sampling', - label: '', - position: 'right', - component: SamplingFilter, - }, - ]), - }, - ].filter((x) => x.editorFilters.length > 0) - - const leftFilters = editorFilters.reduce( - (acc, x) => acc.concat(x.editorFilters.filter((y) => y.position !== 'right')), - [] as InsightEditorFilter[] - ) - const rightFilters = editorFilters.reduce( - (acc, x) => acc.concat(x.editorFilters.filter((y) => y.position === 'right')), - [] as InsightEditorFilter[] - ) - - const legacyEditorFilterGroups: InsightEditorFilterGroup[] = [ - { - title: 'Left', - editorFilters: leftFilters, - }, - { - title: 'right', - editorFilters: rightFilters, - }, - ] - - return ( - -
-
- {(isFunnels ? editorFilters : legacyEditorFilterGroups).map((editorFilterGroup) => ( - - ))} -
-
-
- ) -} - -function filterFalsy(a: (InsightEditorFilter | false | null | undefined)[]): InsightEditorFilter[] { - return a.filter((e) => !!e) as InsightEditorFilter[] -} diff --git a/frontend/src/scenes/insights/EditorFilters/FunnelsAdvanced.tsx b/frontend/src/scenes/insights/EditorFilters/FunnelsAdvanced.tsx index d9858a901f2eb..8443b7e432f9d 100644 --- a/frontend/src/scenes/insights/EditorFilters/FunnelsAdvanced.tsx +++ b/frontend/src/scenes/insights/EditorFilters/FunnelsAdvanced.tsx @@ -1,70 +1,24 @@ import { useValues, useActions } from 'kea' -import { funnelLogic } from 'scenes/funnels/funnelLogic' -import { EditorFilterProps, QueryEditorFilterProps, FunnelsFilterType } from '~/types' -import { FunnelStepOrderPicker, FunnelStepOrderPickerDataExploration } from '../views/Funnels/FunnelStepOrderPicker' -import { - FunnelExclusionsFilter, - FunnelExclusionsFilterDataExploration, -} from '../filters/FunnelExclusionsFilter/FunnelExclusionsFilter' -import { - FunnelStepReferencePicker, - FunnelStepReferencePickerDataExploration, -} from '../filters/FunnelStepReferencePicker' +import { EditorFilterProps } from '~/types' +import { FunnelStepOrderPicker } from '../views/Funnels/FunnelStepOrderPicker' +import { FunnelExclusionsFilter } from '../filters/FunnelExclusionsFilter/FunnelExclusionsFilter' +import { FunnelStepReferencePicker } from '../filters/FunnelStepReferencePicker' import { LemonButton } from 'lib/lemon-ui/LemonButton' import { PureField } from 'lib/forms/Field' import { Noun } from '~/models/groupsModel' import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic' -export function FunnelsAdvancedDataExploration({ insightProps }: QueryEditorFilterProps): JSX.Element { - const { insightFilter, aggregationTargetLabel, advancedOptionsUsedCount } = useValues(funnelDataLogic(insightProps)) - const { updateInsightFilter } = useActions(funnelDataLogic(insightProps)) - - return ( - - ) -} - export function FunnelsAdvanced({ insightProps }: EditorFilterProps): JSX.Element { - const { filters, aggregationTargetLabel, advancedOptionsUsedCount } = useValues(funnelLogic(insightProps)) - const { setFilters } = useActions(funnelLogic(insightProps)) - - return ( - - ) -} - -type FunnelsAdvancedComponentProps = { - aggregationTargetLabel: Noun - advancedOptionsUsedCount: number - setFilters: (filters: Partial) => void - isDataExploration?: boolean -} & FunnelsFilterType + const { querySource, aggregationTargetLabel, advancedOptionsUsedCount } = useValues(funnelDataLogic(insightProps)) + const { updateInsightFilter } = useActions(funnelDataLogic(insightProps)) -export function FunnelsAdvancedComponent({ - aggregationTargetLabel, - advancedOptionsUsedCount, - aggregation_group_type_index, - setFilters, - isDataExploration, -}: FunnelsAdvancedComponentProps): JSX.Element { return (
}> - {isDataExploration ? : } + - {isDataExploration ? : } + } > - {isDataExploration ? : } + {!!advancedOptionsUsedCount && ( @@ -84,7 +38,7 @@ export function FunnelsAdvancedComponent({ { - setFilters({ + updateInsightFilter({ funnel_order_type: undefined, funnel_step_reference: undefined, exclusions: undefined, diff --git a/frontend/src/scenes/insights/EditorFilters/FunnelsQuerySteps.tsx b/frontend/src/scenes/insights/EditorFilters/FunnelsQuerySteps.tsx index f5829b8bc2f61..fe7d61cc7a320 100644 --- a/frontend/src/scenes/insights/EditorFilters/FunnelsQuerySteps.tsx +++ b/frontend/src/scenes/insights/EditorFilters/FunnelsQuerySteps.tsx @@ -1,28 +1,23 @@ import { useValues, useActions } from 'kea' import { groupsModel } from '~/models/groupsModel' -import { funnelLogic } from 'scenes/funnels/funnelLogic' import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic' -import { EditorFilterProps, FilterType, FunnelsFilterType, InsightLogicProps, QueryEditorFilterProps } from '~/types' +import { FilterType, EditorFilterProps } from '~/types' import { MathAvailability } from 'scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow' import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types' import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel' -import { FunnelVizType, FunnelVizTypeDataExploration } from '../views/Funnels/FunnelVizType' +import { FunnelVizType } from '../views/Funnels/FunnelVizType' import { ActionFilter } from '../filters/ActionFilter/ActionFilter' -import { AggregationSelect, AggregationSelectDataExploration } from '../filters/AggregationSelect' -import { - FunnelConversionWindowFilter, - FunnelConversionWindowFilterDataExploration, -} from '../views/Funnels/FunnelConversionWindowFilter' +import { AggregationSelect } from '../filters/AggregationSelect' +import { FunnelConversionWindowFilter } from '../views/Funnels/FunnelConversionWindowFilter' import { queryNodeToFilter } from '~/queries/nodes/InsightQuery/utils/queryNodeToFilter' import { actionsAndEventsToSeries } from '~/queries/nodes/InsightQuery/utils/filtersToQueryNode' import { FunnelsQuery } from '~/queries/schema' -import { isStepsEmpty } from 'scenes/funnels/funnelUtils' import { isInsightQueryNode } from '~/queries/utils' export const FUNNEL_STEP_COUNT_LIMIT = 20 -export function FunnelsQueryStepsDataExploration({ insightProps }: QueryEditorFilterProps): JSX.Element | null { +export function FunnelsQuerySteps({ insightProps }: EditorFilterProps): JSX.Element | null { const { querySource, series } = useValues(funnelDataLogic(insightProps)) const { updateQuerySource } = useActions(funnelDataLogic(insightProps)) @@ -35,52 +30,11 @@ export function FunnelsQueryStepsDataExploration({ insightProps }: QueryEditorFi updateQuerySource({ series: actionsAndEventsToSeries(payload as any) } as FunnelsQuery) } - return ( - 0} - isDataExploration - insightProps={insightProps} - /> - ) -} - -export function FunnelsQuerySteps({ insightProps }: EditorFilterProps): JSX.Element { - const { filterSteps, filters } = useValues(funnelLogic(insightProps)) - const { setFilters } = useActions(funnelLogic(insightProps)) - - return ( - - ) -} - -type FunnelsQueryStepsComponentProps = { - actionFilters: Partial - setActionFilters: (filters: Partial) => void - filterSteps: Record[] - showSeriesIndicator: boolean - isDataExploration?: boolean - insightProps: InsightLogicProps -} - -export function FunnelsQueryStepsComponent({ - actionFilters, - setActionFilters, - filterSteps, - showSeriesIndicator, - isDataExploration, - insightProps, -}: FunnelsQueryStepsComponentProps): JSX.Element { const { groupsTaxonomicTypes, showGroupsOptions } = useValues(groupsModel) + const filterSteps = series || [] + const showSeriesIndicator = (series || []).length > 0 + // TODO: Sort out title offset return ( <> @@ -89,11 +43,7 @@ export function FunnelsQueryStepsComponent({
Graph type - {isDataExploration ? ( - - ) : ( - - )} +
Aggregating by - {isDataExploration ? ( - - ) : ( - - )} + )} - {isDataExploration ? ( - - ) : ( - - )} + ) diff --git a/frontend/src/scenes/insights/EditorFilters/GlobalAndOrFilters.tsx b/frontend/src/scenes/insights/EditorFilters/GlobalAndOrFilters.tsx deleted file mode 100644 index 6476bc5144a83..0000000000000 --- a/frontend/src/scenes/insights/EditorFilters/GlobalAndOrFilters.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { convertPropertiesToPropertyGroup } from 'lib/utils' -import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types' -import { PropertyGroupFilters } from 'lib/components/PropertyGroupFilters/PropertyGroupFilters' -import { EditorFilterProps, InsightType } from '~/types' -import { useActions, useValues } from 'kea' -import { groupsModel } from '~/models/groupsModel' -import { insightLogic } from 'scenes/insights/insightLogic' - -export function GlobalAndOrFilters({ filters }: EditorFilterProps): JSX.Element { - const { setFiltersMerge } = useActions(insightLogic) - const { allEventNames } = useValues(insightLogic) - const { groupsTaxonomicTypes } = useValues(groupsModel) - - const taxonomicGroupTypes = [ - TaxonomicFilterGroupType.EventProperties, - TaxonomicFilterGroupType.PersonProperties, - TaxonomicFilterGroupType.EventFeatureFlags, - ...groupsTaxonomicTypes, - TaxonomicFilterGroupType.Cohorts, - TaxonomicFilterGroupType.Elements, - ...(filters.insight === InsightType.TRENDS ? [TaxonomicFilterGroupType.Sessions] : []), - TaxonomicFilterGroupType.HogQLExpression, - ] - - return ( - setFiltersMerge({ properties })} - taxonomicGroupTypes={taxonomicGroupTypes} - pageKey="insight-filters" - eventNames={allEventNames} - filters={filters} - setTestFilters={(testFilters) => setFiltersMerge(testFilters)} - /> - ) -} diff --git a/frontend/src/scenes/insights/EditorFilters/LifecycleToggles.tsx b/frontend/src/scenes/insights/EditorFilters/LifecycleToggles.tsx deleted file mode 100644 index 0aba3b968081c..0000000000000 --- a/frontend/src/scenes/insights/EditorFilters/LifecycleToggles.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { useActions, useValues } from 'kea' -import { trendsLogic } from 'scenes/trends/trendsLogic' -import { EditorFilterProps, LifecycleToggle } from '~/types' -import { LemonCheckbox } from 'lib/lemon-ui/LemonCheckbox' -import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel' - -const lifecycles: { name: LifecycleToggle; tooltip: string; color: string }[] = [ - { - name: 'new', - tooltip: 'Users who were first seen on this period and did the activity during the period.', - color: 'var(--lifecycle-new)', - }, - { - name: 'returning', - tooltip: 'Users who did activity both this and previous period.', - color: 'var(--lifecycle-returning)', - }, - { - name: 'resurrecting', - tooltip: - 'Users who did the activity this period but did not do the activity on the previous period (i.e. were inactive for 1 or more periods).', - color: 'var(--lifecycle-resurrecting)', - }, - { - name: 'dormant', - tooltip: - 'Users who went dormant on this period, i.e. users who did not do the activity this period but did the activity on the previous period.', - color: 'var(--lifecycle-dormant)', - }, -] - -export function LifecycleToggles({ insightProps }: EditorFilterProps): JSX.Element { - const { toggledLifecycles } = useValues(trendsLogic(insightProps)) - const { toggleLifecycle } = useActions(trendsLogic(insightProps)) - - return ( - <> -
- {lifecycles.map((lifecycle) => ( - - toggleLifecycle(lifecycle.name)} - /> - - ))} -
- - ) -} diff --git a/frontend/src/scenes/insights/EditorFilters/PathsAdvanced.tsx b/frontend/src/scenes/insights/EditorFilters/PathsAdvanced.tsx index 6f068ffcb3bd7..06efe9976d893 100644 --- a/frontend/src/scenes/insights/EditorFilters/PathsAdvanced.tsx +++ b/frontend/src/scenes/insights/EditorFilters/PathsAdvanced.tsx @@ -2,66 +2,24 @@ import { useState } from 'react' import { useActions, useValues } from 'kea' import { InputNumber } from 'antd' -import { - AvailableFeature, - EditorFilterProps, - PathEdgeParameters, - PathsFilterType, - QueryEditorFilterProps, -} from '~/types' +import { AvailableFeature, PathEdgeParameters, EditorFilterProps } from '~/types' import { LemonDivider } from '@posthog/lemon-ui' -import { pathsLogic } from 'scenes/paths/pathsLogic' import { pathsDataLogic } from 'scenes/paths/pathsDataLogic' import { Link } from 'lib/lemon-ui/Link' import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel' import { IconSettings } from 'lib/lemon-ui/icons' -import { PathCleaningFilter, PathCleaningFilterDataExploration } from '../filters/PathCleaningFilter' +import { PathCleaningFilter } from '../filters/PathCleaningFilter' import { PayGateMini } from 'lib/components/PayGateMini/PayGateMini' +import { PathsFilter } from '~/queries/schema' -export function PathsAdvancedDataExploration({ insightProps, ...rest }: QueryEditorFilterProps): JSX.Element { +export function PathsAdvanced({ insightProps, ...rest }: EditorFilterProps): JSX.Element { const { insightFilter } = useValues(pathsDataLogic(insightProps)) const { updateInsightFilter } = useActions(pathsDataLogic(insightProps)) - return ( - - } - {...insightFilter} - /> - - ) -} - -export function PathsAdvanced({ insightProps, ...rest }: EditorFilterProps): JSX.Element { - const { filter } = useValues(pathsLogic(insightProps)) - const { setFilter } = useActions(pathsLogic(insightProps)) - - return ( - - } - {...filter} - /> - - ) -} - -type PathsAdvancedComponentProps = { - setFilter: (filter: PathsFilterType) => void - cleaningFilterComponent: JSX.Element -} & PathsFilterType + const { edge_limit, min_edge_weight, max_edge_weight } = (insightFilter || {}) as PathsFilter -export function PathsAdvancedComponent({ - setFilter, - edge_limit, - min_edge_weight, - max_edge_weight, - cleaningFilterComponent, -}: PathsAdvancedComponentProps): JSX.Element { const [localEdgeParameters, setLocalEdgeParameters] = useState({ edge_limit: edge_limit, min_edge_weight: min_edge_weight, @@ -74,85 +32,87 @@ export function PathsAdvancedComponent({ localEdgeParameters.min_edge_weight !== min_edge_weight || localEdgeParameters.max_edge_weight !== max_edge_weight ) { - setFilter({ ...localEdgeParameters }) + updateInsightFilter({ ...localEdgeParameters }) } } return ( -
- - - Maximum number of paths - - - setLocalEdgeParameters((state) => ({ - ...state, - edge_limit: Number(value), - })) - } - onBlur={updateEdgeParameters} - onPressEnter={updateEdgeParameters} - /> - - Number of people on each path - -
- Between + +
+ + + Maximum number of paths + setLocalEdgeParameters((state) => ({ ...state, - min_edge_weight: Number(value), + edge_limit: Number(value), })) } onBlur={updateEdgeParameters} onPressEnter={updateEdgeParameters} /> - and - - setLocalEdgeParameters((state) => ({ - ...state, - max_edge_weight: Number(value), - })) - } - min={0} - max={100000} - onBlur={updateEdgeParameters} - onPressEnter={updateEdgeParameters} - /> - persons. -
-
-
- - Cleaning rules are an advanced feature that uses regex to normalize URLS for paths - visualization. Rules can be set for all insights in the project settings, or they can be - defined specifically for an insight. - + + Number of people on each path + +
+ Between + + setLocalEdgeParameters((state) => ({ + ...state, + min_edge_weight: Number(value), + })) } - > - Path Cleaning Rules - - - - Configure Project Rules - + onBlur={updateEdgeParameters} + onPressEnter={updateEdgeParameters} + /> + and + + setLocalEdgeParameters((state) => ({ + ...state, + max_edge_weight: Number(value), + })) + } + min={0} + max={100000} + onBlur={updateEdgeParameters} + onPressEnter={updateEdgeParameters} + /> + persons. +
+
+
+ + Cleaning rules are an advanced feature that uses regex to normalize URLS for paths + visualization. Rules can be set for all insights in the project settings, or they + can be defined specifically for an insight. + + } + > + Path Cleaning Rules + + + + Configure Project Rules + +
+
- {cleaningFilterComponent}
-
+
) } diff --git a/frontend/src/scenes/insights/EditorFilters/PathsEventTypes.tsx b/frontend/src/scenes/insights/EditorFilters/PathsEventTypes.tsx index 955dda342885f..c9fc5ed1af9a6 100644 --- a/frontend/src/scenes/insights/EditorFilters/PathsEventTypes.tsx +++ b/frontend/src/scenes/insights/EditorFilters/PathsEventTypes.tsx @@ -1,51 +1,20 @@ import { useValues, useActions } from 'kea' -import { pathsLogic } from 'scenes/paths/pathsLogic' -import { PathType, EditorFilterProps, QueryEditorFilterProps, PathsFilterType } from '~/types' +import { PathType, EditorFilterProps, PathsFilterType } from '~/types' import { LemonButtonWithDropdown, LemonButton } from 'lib/lemon-ui/LemonButton' import { humanizePathsEventTypes } from '../utils' import { LemonCheckbox } from 'lib/lemon-ui/LemonCheckbox' import { capitalizeFirstLetter } from 'lib/utils' import { pathsDataLogic } from 'scenes/paths/pathsDataLogic' -export function PathsEventsTypesDataExploration({ insightProps }: QueryEditorFilterProps): JSX.Element { +export function PathsEventsTypes({ insightProps }: EditorFilterProps): JSX.Element { const { insightFilter } = useValues(pathsDataLogic(insightProps)) const { updateInsightFilter } = useActions(pathsDataLogic(insightProps)) - return ( - { - updateInsightFilter({ include_event_types: includeEventTypes }) - }} - /> - ) -} - -export function PathsEventTypes({ insightProps }: EditorFilterProps): JSX.Element { - const { filter } = useValues(pathsLogic(insightProps)) - const { setFilter } = useActions(pathsLogic(insightProps)) - - return ( - { - setFilter({ - include_event_types: includeEventTypes, - }) - }} - /> - ) -} - -type PathsEventTypesComponentProps = { - includeEventTypes: PathsFilterType['include_event_types'] - setIncludeEventTypes: (includeEventTypes: PathsFilterType['include_event_types']) => void -} + const includeEventTypes = (insightFilter as PathsFilterType)?.include_event_types + const setIncludeEventTypes = (includeEventTypes: PathsFilterType['include_event_types']): void => { + updateInsightFilter({ include_event_types: includeEventTypes }) + } -export function PathsEventTypesComponent({ - includeEventTypes, - setIncludeEventTypes, -}: PathsEventTypesComponentProps): JSX.Element { const options = [ { type: PathType.PageView, diff --git a/frontend/src/scenes/insights/EditorFilters/PathsExclusions.tsx b/frontend/src/scenes/insights/EditorFilters/PathsExclusions.tsx index 80270086eac5c..de9e9e522fe1a 100644 --- a/frontend/src/scenes/insights/EditorFilters/PathsExclusions.tsx +++ b/frontend/src/scenes/insights/EditorFilters/PathsExclusions.tsx @@ -1,50 +1,16 @@ import { useActions, useValues } from 'kea' -import { pathsLogic } from 'scenes/paths/pathsLogic' import { pathsDataLogic } from 'scenes/paths/pathsDataLogic' -import { - EditorFilterProps, - EventPropertyFilter, - PathsFilterType, - PropertyFilterType, - PropertyOperator, - QueryEditorFilterProps, -} from '~/types' +import { EventPropertyFilter, PropertyFilterType, PropertyOperator, EditorFilterProps } from '~/types' import { PathItemFilters } from 'lib/components/PropertyFilters/PathItemFilters' -import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types' +import { PathsFilter } from '~/queries/schema' -export function PathsExclusionsDataExploration({ insightProps }: QueryEditorFilterProps): JSX.Element { +export function PathsExclusions({ insightProps }: EditorFilterProps): JSX.Element { const { insightFilter, taxonomicGroupTypes } = useValues(pathsDataLogic(insightProps)) const { updateInsightFilter } = useActions(pathsDataLogic(insightProps)) - return ( - - ) -} - -export function PathsExclusions({ insightProps }: EditorFilterProps): JSX.Element { - const { filter, taxonomicGroupTypes } = useValues(pathsLogic(insightProps)) - const { setFilter } = useActions(pathsLogic(insightProps)) - - return -} - -type PathsExclusionsComponentProps = { - setFilter: (filter: PathsFilterType) => void - taxonomicGroupTypes: TaxonomicFilterGroupType[] -} & PathsFilterType - -export function PathsExclusionsComponent({ - setFilter, - exclude_events, - path_groupings, - taxonomicGroupTypes, -}: PathsExclusionsComponentProps): JSX.Element { + const { exclude_events, path_groupings } = (insightFilter || {}) as PathsFilter return ( { - setFilter({ exclude_events: values.map((v) => v.value as string) }) + updateInsightFilter({ exclude_events: values.map((v) => v.value as string) }) }} wildcardOptions={path_groupings?.map((name) => ({ name }))} /> diff --git a/frontend/src/scenes/insights/EditorFilters/PathsTarget.tsx b/frontend/src/scenes/insights/EditorFilters/PathsTarget.tsx index 2e987609e0cfe..3dd2836f29414 100644 --- a/frontend/src/scenes/insights/EditorFilters/PathsTarget.tsx +++ b/frontend/src/scenes/insights/EditorFilters/PathsTarget.tsx @@ -1,93 +1,43 @@ import { useValues, useActions } from 'kea' import { combineUrl, encodeParams, router } from 'kea-router' -import { pathsLogic } from 'scenes/paths/pathsLogic' import { pathsDataLogic } from 'scenes/paths/pathsDataLogic' -import { FunnelPathType, EditorFilterProps, QueryEditorFilterProps, PathsFilterType } from '~/types' +import { FunnelPathType, EditorFilterProps } from '~/types' import { PathItemSelector } from 'lib/components/PropertyFilters/components/PathItemSelector' import { LemonButton, LemonButtonWithSideAction } from 'lib/lemon-ui/LemonButton' import { IconClose, IconFunnelVertical } from 'lib/lemon-ui/icons' -import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types' -export function PathsTargetStartDataExploration(props: QueryEditorFilterProps): JSX.Element { +import { PathsFilter } from '~/queries/schema' + +export function PathsTargetStart(props: EditorFilterProps): JSX.Element { return } -export function PathsTargetEndDataExploration(props: QueryEditorFilterProps): JSX.Element { +export function PathsTargetEnd(props: EditorFilterProps): JSX.Element { return } type PathTargetDataExplorationProps = { position: 'start' | 'end' -} & QueryEditorFilterProps +} & EditorFilterProps function PathsTargetDataExploration({ position, insightProps }: PathTargetDataExplorationProps): JSX.Element { const { insightFilter, taxonomicGroupTypes } = useValues(pathsDataLogic(insightProps)) const { updateInsightFilter } = useActions(pathsDataLogic(insightProps)) - return ( - - ) -} - -export function PathsTargetStart(props: EditorFilterProps): JSX.Element { - return -} - -export function PathsTargetEnd(props: EditorFilterProps): JSX.Element { - return -} - -type PathsTargetProps = { - position: 'start' | 'end' -} & EditorFilterProps - -function PathsTarget({ position, insightProps }: PathsTargetProps): JSX.Element { - const { filter, taxonomicGroupTypes } = useValues(pathsLogic(insightProps)) - const { setFilter } = useActions(pathsLogic(insightProps)) + const { funnel_paths, funnel_filter, start_point, end_point, path_groupings } = (insightFilter || {}) as PathsFilter - return ( - - ) -} - -type PathsTargetComponentProps = { - position: 'start' | 'end' - setFilter: (filter: PathsFilterType) => void - taxonomicGroupTypes: TaxonomicFilterGroupType[] -} & PathsFilterType - -function PathsTargetComponent({ - position, - funnel_paths, - funnel_filter, - start_point, - end_point, - path_groupings, - setFilter, - taxonomicGroupTypes, -}: PathsTargetComponentProps): JSX.Element { const overrideStartInput = funnel_paths && [FunnelPathType.between, FunnelPathType.after].includes(funnel_paths) const overrideEndInput = funnel_paths && [FunnelPathType.between, FunnelPathType.before].includes(funnel_paths) const overrideInputs = overrideStartInput || overrideEndInput const key = position === 'start' ? 'start_point' : 'end_point' const onChange = (item: string): void => { - setFilter({ [key]: item }) + updateInsightFilter({ [key]: item }) } const onReset = (): void => { - setFilter({ [key]: undefined, funnel_filter: undefined, funnel_paths: undefined }) + updateInsightFilter({ [key]: undefined, funnel_filter: undefined, funnel_paths: undefined }) } function _getStepNameAtIndex(filters: Record, index: number): string { diff --git a/frontend/src/scenes/insights/EditorFilters/PathsWildcardGroups.tsx b/frontend/src/scenes/insights/EditorFilters/PathsWildcardGroups.tsx index 06cbb1fed6aee..0c6555a9bd53d 100644 --- a/frontend/src/scenes/insights/EditorFilters/PathsWildcardGroups.tsx +++ b/frontend/src/scenes/insights/EditorFilters/PathsWildcardGroups.tsx @@ -1,37 +1,19 @@ import { useValues, useActions } from 'kea' -import { pathsLogic } from 'scenes/paths/pathsLogic' import { pathsDataLogic } from 'scenes/paths/pathsDataLogic' -import { EditorFilterProps, PathsFilterType, QueryEditorFilterProps } from '~/types' +import { EditorFilterProps } from '~/types' import { LemonSelectMultiple } from 'lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple' +import { PathsFilter } from '~/queries/schema' -export function PathsWildcardGroupsDataExploration({ insightProps }: QueryEditorFilterProps): JSX.Element { +export function PathsWildcardGroups({ insightProps }: EditorFilterProps): JSX.Element { const { insightFilter } = useValues(pathsDataLogic(insightProps)) const { updateInsightFilter } = useActions(pathsDataLogic(insightProps)) - return -} - -export function PathsWildcardGroups({ insightProps }: EditorFilterProps): JSX.Element { - const { filter } = useValues(pathsLogic(insightProps)) - const { setFilter } = useActions(pathsLogic(insightProps)) - - return -} - -type PathsWildcardGroupsComponentProps = { - setFilter: (filter: PathsFilterType) => void -} & PathsFilterType - -export function PathsWildcardGroupsComponent({ - setFilter, - path_groupings, -}: PathsWildcardGroupsComponentProps): JSX.Element { return ( setFilter({ path_groupings })} - value={path_groupings || []} + onChange={(path_groupings: string[]) => updateInsightFilter({ path_groupings })} + value={(insightFilter as PathsFilter)?.path_groupings || []} filterOption={false} mode="multiple-custom" /> diff --git a/frontend/src/scenes/insights/EditorFilters/RetentionSummary.tsx b/frontend/src/scenes/insights/EditorFilters/RetentionSummary.tsx index 52626423f853d..03c5a90b551ce 100644 --- a/frontend/src/scenes/insights/EditorFilters/RetentionSummary.tsx +++ b/frontend/src/scenes/insights/EditorFilters/RetentionSummary.tsx @@ -1,75 +1,34 @@ import { useActions, useValues } from 'kea' import { InfoCircleOutlined } from '@ant-design/icons' -import { retentionLogic } from 'scenes/retention/retentionLogic' import { dateOptionPlurals, dateOptions, retentionOptionDescriptions, retentionOptions, } from 'scenes/retention/constants' -import { EditorFilterProps, FilterType, InsightLogicProps, QueryEditorFilterProps, RetentionType } from '~/types' +import { FilterType, EditorFilterProps, RetentionType } from '~/types' import { IconOpenInNew } from 'lib/lemon-ui/icons' import { ActionFilter } from '../filters/ActionFilter/ActionFilter' import { Tooltip } from 'lib/lemon-ui/Tooltip' -import { AggregationSelect, AggregationSelectDataExploration } from 'scenes/insights/filters/AggregationSelect' +import { AggregationSelect } from 'scenes/insights/filters/AggregationSelect' import { groupsModel } from '~/models/groupsModel' import { MathAvailability } from '../filters/ActionFilter/ActionFilterRow/ActionFilterRow' import { Link } from 'lib/lemon-ui/Link' import { LemonInput, LemonSelect } from '@posthog/lemon-ui' -import { RetentionFilter } from '~/queries/schema' import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic' -export function RetentionSummaryDataExploration({ insightProps }: QueryEditorFilterProps): JSX.Element { - const { retentionFilter } = useValues(insightVizDataLogic(insightProps)) - const { updateInsightFilter } = useActions(insightVizDataLogic(insightProps)) - return ( - - ) -} - export function RetentionSummary({ insightProps }: EditorFilterProps): JSX.Element { - const { filters } = useValues(retentionLogic(insightProps)) - const { setFilters } = useActions(retentionLogic(insightProps)) - return -} - -type RetentionSummaryComponentProps = { - setFilters: (filters: Partial) => void - isDataExploration?: boolean - insightProps: InsightLogicProps -} & RetentionFilter - -export function RetentionSummaryComponent({ - target_entity, - returning_entity, - retention_type, - total_intervals, - period, - setFilters, - isDataExploration, - insightProps, -}: RetentionSummaryComponentProps): JSX.Element { const { showGroupsOptions } = useValues(groupsModel) + const { retentionFilter } = useValues(insightVizDataLogic(insightProps)) + const { updateInsightFilter } = useActions(insightVizDataLogic(insightProps)) + const { target_entity, returning_entity, retention_type, total_intervals, period } = retentionFilter || {} return (
Show {showGroupsOptions ? ( - isDataExploration ? ( - - ) : ( - - ) + ) : ( Unique users )} @@ -86,11 +45,11 @@ export function RetentionSummaryComponent({ filters={{ events: [target_entity] } as FilterType} // retention filters use target and returning entity instead of events setFilters={(newFilters: FilterType) => { if (newFilters.events && newFilters.events.length > 0) { - setFilters({ target_entity: newFilters.events[0] }) + updateInsightFilter({ target_entity: newFilters.events[0] }) } else if (newFilters.actions && newFilters.actions.length > 0) { - setFilters({ target_entity: newFilters.actions[0] }) + updateInsightFilter({ target_entity: newFilters.actions[0] }) } else { - setFilters({ target_entity: undefined }) + updateInsightFilter({ target_entity: undefined }) } }} typeKey="retention-table" @@ -109,7 +68,7 @@ export function RetentionSummaryComponent({ ), }))} value={retention_type ? retentionOptions[retention_type] : undefined} - onChange={(value): void => setFilters({ retention_type: value as RetentionType })} + onChange={(value): void => updateInsightFilter({ retention_type: value as RetentionType })} dropdownMatchSelectWidth={false} />
@@ -119,12 +78,12 @@ export function RetentionSummaryComponent({ type="number" className="ml-2 w-20" value={(total_intervals ?? 11) - 1} - onChange={(value) => setFilters({ total_intervals: (value || 0) + 1 })} + onChange={(value) => updateInsightFilter({ total_intervals: (value || 0) + 1 })} /> setFilters({ period: value ? value : undefined })} + onChange={(value): void => updateInsightFilter({ period: value ? value : undefined })} options={dateOptions.map((period) => ({ value: period, label: dateOptionPlurals[period] || period, @@ -144,11 +103,11 @@ export function RetentionSummaryComponent({ filters={{ events: [returning_entity] } as FilterType} setFilters={(newFilters: FilterType) => { if (newFilters.events && newFilters.events.length > 0) { - setFilters({ returning_entity: newFilters.events[0] }) + updateInsightFilter({ returning_entity: newFilters.events[0] }) } else if (newFilters.actions && newFilters.actions.length > 0) { - setFilters({ returning_entity: newFilters.actions[0] }) + updateInsightFilter({ returning_entity: newFilters.actions[0] }) } else { - setFilters({ returning_entity: undefined }) + updateInsightFilter({ returning_entity: undefined }) } }} typeKey="retention-table-returning" diff --git a/frontend/src/scenes/insights/EditorFilters/SamplingFilter.tsx b/frontend/src/scenes/insights/EditorFilters/SamplingFilter.tsx index 2df30f62bf689..793dc6874881e 100644 --- a/frontend/src/scenes/insights/EditorFilters/SamplingFilter.tsx +++ b/frontend/src/scenes/insights/EditorFilters/SamplingFilter.tsx @@ -1,4 +1,4 @@ -import { FilterType, InsightLogicProps, QueryEditorFilterProps } from '~/types' +import { FilterType, InsightLogicProps, EditorFilterProps } from '~/types' import { LemonButton, LemonLabel, LemonSwitch, LemonTag } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' import { AVAILABLE_SAMPLING_PERCENTAGES, samplingFilterLogic } from './samplingFilterLogic' @@ -8,7 +8,7 @@ import { insightVizDataLogic } from '../insightVizDataLogic' const DEFAULT_SAMPLING_INFO_TOOLTIP_CONTENT = 'Sampling computes the result on only a subset of the data, making insights load significantly faster.' -export function SamplingFilterDataExploration({ insightProps }: QueryEditorFilterProps): JSX.Element { +export function SamplingFilterDataExploration({ insightProps }: EditorFilterProps): JSX.Element { const { updateQuerySource } = useActions(insightVizDataLogic(insightProps)) return ( diff --git a/frontend/src/scenes/insights/EditorFilters/TrendsFormula.tsx b/frontend/src/scenes/insights/EditorFilters/TrendsFormula.tsx deleted file mode 100644 index 56d66899302fc..0000000000000 --- a/frontend/src/scenes/insights/EditorFilters/TrendsFormula.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { useEffect, useState } from 'react' -import { EditorFilterProps } from '~/types' -import { useActions, useValues } from 'kea' -import { trendsLogic } from 'scenes/trends/trendsLogic' -import { LemonInput } from '@posthog/lemon-ui' -import { isTrendsFilter } from 'scenes/insights/sharedUtils' - -// When updating this regex, remember to update the regex with the same name in mixins/common.py -const ALLOWED_FORMULA_CHARACTERS = /^[a-zA-Z\ \-\*\^0-9\+\/\(\)\.]+$/ - -export function TrendsFormula({ insightProps }: EditorFilterProps): JSX.Element | null { - const { isFormulaOn, filters } = useValues(trendsLogic(insightProps)) - const formula = isTrendsFilter(filters) ? filters.formula : null - - const { setFilters } = useActions(trendsLogic(insightProps)) - const [value, setValue] = useState(formula) - - useEffect(() => { - // Don't clear the formula so that the value is still there after toggling the formula switch - if (formula) { - setValue(formula) - } - }, [formula]) - - return isFormulaOn ? ( -
- { - let changedValue = value.toLocaleUpperCase() - // Only allow typing of allowed characters - changedValue = changedValue - .split('') - .filter((d) => ALLOWED_FORMULA_CHARACTERS.test(d)) - .join('') - setValue(changedValue) - }} - onBlur={(e) => { - // Ignore TrendsFormulaLabel switch click to prevent conflicting setFilters calls - // Type assertion is needed because for some React relatedTarget isn't defined as an element - // in React types - and it is in reality - if ( - (e.relatedTarget as HTMLElement | undefined)?.id !== 'trends-formula-switch' && - value !== formula - ) { - setFilters({ formula: value }) - } - }} - onFocus={() => { - // When autofocus kicks in, set local value in filters - if (value && value !== formula) { - setFilters({ formula: value }) - } - }} - onPressEnter={() => { - if (value !== formula) { - setFilters({ formula: value }) - } - }} - /> -
- ) : null -} - -export function TrendsFormulaLabel({ insightProps }: EditorFilterProps): JSX.Element | null { - const { isFormulaOn } = useValues(trendsLogic(insightProps)) - - return isFormulaOn ? <>Formula : null -} diff --git a/frontend/src/scenes/insights/EditorFilters/TrendsSeries.tsx b/frontend/src/scenes/insights/EditorFilters/TrendsSeries.tsx deleted file mode 100644 index c07c9f8754d19..0000000000000 --- a/frontend/src/scenes/insights/EditorFilters/TrendsSeries.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { useActions, useValues } from 'kea' -import { trendsLogic } from 'scenes/trends/trendsLogic' -import { groupsModel } from '~/models/groupsModel' -import { ActionFilter } from 'scenes/insights/filters/ActionFilter/ActionFilter' -import { EditorFilterProps, FilterType, InsightType } from '~/types' -import { alphabet } from 'lib/utils' -import { MathAvailability } from 'scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow' -import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types' -import { SINGLE_SERIES_DISPLAY_TYPES } from 'lib/constants' -import { LemonButton } from '@posthog/lemon-ui' -import { Tooltip } from 'lib/lemon-ui/Tooltip' -import { IconCalculate } from 'lib/lemon-ui/icons' -import { isFilterWithDisplay, isLifecycleFilter, isStickinessFilter, isTrendsFilter } from 'scenes/insights/sharedUtils' - -export function TrendsSeries({ insightProps }: EditorFilterProps): JSX.Element { - const { setFilters } = useActions(trendsLogic(insightProps)) - const { filters, isFormulaOn } = useValues(trendsLogic(insightProps)) - const { groupsTaxonomicTypes } = useValues(groupsModel) - - const propertiesTaxonomicGroupTypes = [ - TaxonomicFilterGroupType.EventProperties, - TaxonomicFilterGroupType.PersonProperties, - TaxonomicFilterGroupType.EventFeatureFlags, - ...groupsTaxonomicTypes, - TaxonomicFilterGroupType.Cohorts, - TaxonomicFilterGroupType.Elements, - ...(isTrendsFilter(filters) ? [TaxonomicFilterGroupType.Sessions] : []), - TaxonomicFilterGroupType.HogQLExpression, - ] - return ( - <> - {isLifecycleFilter(filters) && ( -
- Showing Unique users who did -
- )} - ): void => setFilters(payload)} - typeKey={`trends_${InsightType.TRENDS}`} - buttonCopy={`Add graph ${isFormulaOn ? 'variable' : 'series'}`} - showSeriesIndicator - showNestedArrow - entitiesLimit={ - (isFilterWithDisplay(filters) && - filters.display && - SINGLE_SERIES_DISPLAY_TYPES.includes(filters.display) && - !isFormulaOn) || - isLifecycleFilter(filters) - ? 1 - : alphabet.length - } - mathAvailability={ - isLifecycleFilter(filters) - ? MathAvailability.None - : isStickinessFilter(filters) - ? MathAvailability.ActorsOnly - : MathAvailability.All - } - propertiesTaxonomicGroupTypes={propertiesTaxonomicGroupTypes} - /> - - ) -} - -export function TrendsSeriesLabel({ insightProps }: EditorFilterProps): JSX.Element { - const { filters, localFilters, isFormulaOn } = useValues(trendsLogic(insightProps)) - const { setIsFormulaOn } = useActions(trendsLogic(insightProps)) - - const formulaModeButtonDisabled: boolean = - isFormulaOn && - isTrendsFilter(filters) && - !!filters.display && - SINGLE_SERIES_DISPLAY_TYPES.includes(filters.display) && - localFilters.length > 1 - - return ( -
- {isFormulaOn ? 'Variables' : 'Series'} - - {/** The negative margin negates the button's effect on label sizing. */} -
- setIsFormulaOn(!isFormulaOn)} - disabled={formulaModeButtonDisabled} - icon={} - id="trends-formula-switch" - > - {isFormulaOn ? 'Disable' : 'Enable'} formula mode - -
-
-
- ) -} diff --git a/frontend/src/scenes/insights/Insight.tsx b/frontend/src/scenes/insights/Insight.tsx index f3ab0ab8314cf..a550d75bda7fa 100644 --- a/frontend/src/scenes/insights/Insight.tsx +++ b/frontend/src/scenes/insights/Insight.tsx @@ -5,16 +5,12 @@ import { insightSceneLogic } from 'scenes/insights/insightSceneLogic' import { insightLogic } from './insightLogic' import { insightCommandLogic } from './insightCommandLogic' import { insightDataLogic } from './insightDataLogic' -import { InsightShortId, InsightType, ItemMode } from '~/types' +import { InsightShortId, ItemMode } from '~/types' import { InsightsNav } from './InsightNav/InsightsNav' -import { InsightContainer } from 'scenes/insights/InsightContainer' import { InsightSkeleton } from 'scenes/insights/InsightSkeleton' -import { EditorFilters } from './EditorFilters/EditorFilters' -import clsx from 'clsx' import { Query } from '~/queries/Query/Query' import { InsightPageHeader } from 'scenes/insights/InsightPageHeader' import { containsHogQLQuery } from '~/queries/utils' -import { insightNavLogic } from './InsightNav/insightNavLogic' export interface InsightSceneProps { insightId: InsightShortId | 'new' @@ -29,16 +25,7 @@ export function Insight({ insightId }: InsightSceneProps): JSX.Element { dashboardItemId: insightId || 'new', cachedInsight: insight?.short_id === insightId ? insight : null, }) - const { - insightProps, - insightLoading, - filtersKnown, - filters, - isUsingDataExploration, - isUsingDashboardQueries, - erroredQueryId, - isFilterBasedInsight, - } = useValues(logic) + const { insightProps, insightLoading, filtersKnown, erroredQueryId } = useValues(logic) const { reportInsightViewedForRecentInsights, abortAnyRunningQuery, loadResults } = useActions(logic) // insightDataLogic @@ -47,7 +34,6 @@ export function Insight({ insightId }: InsightSceneProps): JSX.Element { // other logics useMountedLogic(insightCommandLogic(insightProps)) - const { activeView } = useValues(insightNavLogic(insightProps)) useEffect(() => { reportInsightViewedForRecentInsights() @@ -64,8 +50,6 @@ export function Insight({ insightId }: InsightSceneProps): JSX.Element { abortAnyRunningQuery() } }, []) - // if this is a non-viz query-based insight e.g. an events table then don't show the insight editing chrome - const showFilterEditing = isFilterBasedInsight // Show the skeleton if loading an insight for which we only know the id // This helps with the UX flickering and showing placeholder "name" text. @@ -77,49 +61,24 @@ export function Insight({ insightId }: InsightSceneProps): JSX.Element { insightMode === ItemMode.Edit && ((isQueryBasedInsight && !containsHogQLQuery(query)) || (!isQueryBasedInsight && showQueryEditor)) - const insightScene = ( -
- - - {insightMode === ItemMode.Edit && } - - {isUsingDataExploration || - (isUsingDashboardQueries && [InsightType.SQL, InsightType.JSON].includes(activeView)) ? ( - <> - - - ) : ( - <> -
- -
- -
-
- - )} -
- ) - return ( - {insightScene} +
+ + + {insightMode === ItemMode.Edit && } + + +
) } diff --git a/frontend/src/scenes/insights/InsightDisplayConfig.tsx b/frontend/src/scenes/insights/InsightDisplayConfig.tsx index 11d3de7c0fe9b..7c6f1f7b17829 100644 --- a/frontend/src/scenes/insights/InsightDisplayConfig.tsx +++ b/frontend/src/scenes/insights/InsightDisplayConfig.tsx @@ -9,8 +9,6 @@ import { ChartDisplayType, FilterType, FunnelVizType, InsightType, ItemMode, Tre import { InsightDateFilter } from './filters/InsightDateFilter' import { FunnelDisplayLayoutPicker } from './views/Funnels/FunnelDisplayLayoutPicker' import { PathStepPicker } from './views/Paths/PathStepPicker' -import { RetentionDatePicker } from './RetentionDatePicker' -import { RetentionReferencePicker } from './filters/RetentionReferencePicker' import { FunnelBinsPicker } from './views/Funnels/FunnelBinsPicker' import { featureFlagLogic } from 'lib/logic/featureFlagLogic' import { useActions, useValues } from 'kea' @@ -93,6 +91,13 @@ function ConfigFilter(props: PropsWithChildren): JSX.Element { } export function InsightDisplayConfig({ filters, disableTable }: InsightDisplayConfigProps): JSX.Element { + if (!isFunnelsFilter(filters) && !isTrendsFilter(filters)) { + // The legacy InsightContainer should only be used in Experiments, + // where we only have funnel and trend insights, allowing us already + // to gradually remove the other insight types here + throw new Error('Unsupported insight type') + } + const isFunnels = isFunnelsFilter(filters) const isPaths = isPathsFilter(filters) const { featureFlags } = useValues(featureFlagLogic) @@ -125,13 +130,6 @@ export function InsightDisplayConfig({ filters, disableTable }: InsightDisplayCo ) : null} - {isRetentionFilter(filters) && ( - - - - - )} - {isPaths && ( @@ -152,7 +150,7 @@ export function InsightDisplayConfig({ filters, disableTable }: InsightDisplayCo ((isTrendsFilter(filters) || isStickinessFilter(filters) || isLifecycleFilter(filters)) && - filters.show_values_on_series) || + (filters as TrendsFilterType).show_values_on_series) || // pie charts have value checked by default (isTrendsFilter(filters) && filters.display === ChartDisplayType.ActionsPie && diff --git a/frontend/src/scenes/insights/InsightNav/insightNavLogic.test.ts b/frontend/src/scenes/insights/InsightNav/insightNavLogic.test.ts index 61ee6ed374d0a..4984a919d7925 100644 --- a/frontend/src/scenes/insights/InsightNav/insightNavLogic.test.ts +++ b/frontend/src/scenes/insights/InsightNav/insightNavLogic.test.ts @@ -8,11 +8,14 @@ import { useMocks } from '~/mocks/jest' import { featureFlagLogic } from 'lib/logic/featureFlagLogic' import { FEATURE_FLAGS } from 'lib/constants' import { DataTableNode, NodeKind } from '~/queries/schema' +import { insightDataLogic } from '../insightDataLogic' +import { nodeKindToDefaultQuery } from '~/queries/nodes/InsightQuery/defaults' describe('insightNavLogic', () => { - let theInsightLogic: ReturnType - let theInsightNavLogic: ReturnType - let theFeatureFlagLogic: ReturnType + let logic: ReturnType + let builtInsightLogic: ReturnType + let builtInsightDataLogic: ReturnType + let builtFeatureFlagLogic: ReturnType describe('active view', () => { beforeEach(async () => { @@ -28,116 +31,54 @@ describe('insightNavLogic', () => { }) initKeaTests(true, { ...MOCK_DEFAULT_TEAM, test_account_filters_default_checked: true }) - theFeatureFlagLogic = featureFlagLogic() - theFeatureFlagLogic.mount() - theFeatureFlagLogic.actions.setFeatureFlags( - [FEATURE_FLAGS.DATA_EXPLORATION_INSIGHTS, FEATURE_FLAGS.HOGQL], - { - [FEATURE_FLAGS.DATA_EXPLORATION_INSIGHTS]: false, - [FEATURE_FLAGS.HOGQL]: false, - } - ) + builtFeatureFlagLogic = featureFlagLogic() + builtFeatureFlagLogic.mount() + builtFeatureFlagLogic.actions.setFeatureFlags([FEATURE_FLAGS.HOGQL], { + [FEATURE_FLAGS.HOGQL]: false, + }) const insightLogicProps: InsightLogicProps = { dashboardItemId: 'new', } - theInsightLogic = insightLogic(insightLogicProps) - theInsightLogic.mount() - theInsightNavLogic = insightNavLogic(insightLogicProps) - theInsightNavLogic.mount() + builtInsightLogic = insightLogic(insightLogicProps) + builtInsightLogic.mount() + builtInsightDataLogic = insightDataLogic(insightLogicProps) + builtInsightDataLogic.mount() + logic = insightNavLogic(insightLogicProps) + logic.mount() }) it('has a default of trends', async () => { - await expectLogic(theInsightNavLogic).toMatchValues({ + await expectLogic(logic).toMatchValues({ activeView: InsightType.TRENDS, }) }) - it('can set the active view to TRENDS which sets the filters', async () => { - await expectLogic(theInsightLogic, () => { - theInsightNavLogic.actions.setActiveView(InsightType.TRENDS) + it('can set the active view to TRENDS which sets the query', async () => { + await expectLogic(builtInsightDataLogic, () => { + logic.actions.setActiveView(InsightType.TRENDS) }).toMatchValues({ - filters: { - actions: [], - display: 'ActionsLineGraph', - events: [ - { - id: '$pageview', - name: '$pageview', - order: 0, - type: 'events', - }, - ], - insight: 'TRENDS', - interval: 'day', + query: { + kind: NodeKind.InsightVizNode, + source: { ...nodeKindToDefaultQuery[NodeKind.TrendsQuery], filterTestAccounts: true }, }, }) }) it('can set the active view to FUNNEL which sets the filters differently', async () => { - await expectLogic(theInsightLogic, () => { - theInsightNavLogic.actions.setActiveView(InsightType.FUNNELS) + await expectLogic(builtInsightDataLogic, () => { + logic.actions.setActiveView(InsightType.FUNNELS) }).toMatchValues({ - filters: { - actions: [], - events: [ - { - id: '$pageview', - name: '$pageview', - order: 0, - type: 'events', - }, - ], - exclusions: [], - funnel_viz_type: 'steps', - insight: 'FUNNELS', + query: { + kind: NodeKind.InsightVizNode, + source: { ...nodeKindToDefaultQuery[NodeKind.FunnelsQuery], filterTestAccounts: true }, }, }) }) - it('clears maybeShowTimeoutMessage when setting active view', async () => { - theInsightLogic.actions.markInsightTimedOut('a query id') - await expectLogic(theInsightLogic).toMatchValues({ maybeShowTimeoutMessage: true }) - theInsightNavLogic.actions.setActiveView(InsightType.FUNNELS) - await expectLogic(theInsightLogic).toMatchValues({ maybeShowTimeoutMessage: false }) - }) - - it('clears maybeShowErrorMessage when setting active view', async () => { - theInsightLogic.actions.loadInsightFailure('error', { status: 0 }) - await expectLogic(theInsightLogic).toMatchValues({ maybeShowErrorMessage: true }) - theInsightNavLogic.actions.setActiveView(InsightType.FUNNELS) - await expectLogic(theInsightLogic).toMatchValues({ maybeShowErrorMessage: false }) - }) - - it('clears lastRefresh when setting active view', async () => { - theInsightLogic.actions.setLastRefresh('123') - await expectLogic(theInsightLogic).toMatchValues({ lastRefresh: '123' }) - theInsightNavLogic.actions.setActiveView(InsightType.FUNNELS) - await expectLogic(theInsightLogic).toFinishAllListeners().toMatchValues({ lastRefresh: null }) - }) - - it('clears erroredQueryId when setting active view', async () => { - theInsightLogic.actions.markInsightErrored('123') - await expectLogic(theInsightLogic).toMatchValues({ erroredQueryId: '123' }) - theInsightNavLogic.actions.setActiveView(InsightType.FUNNELS) - await expectLogic(theInsightLogic).toMatchValues({ erroredQueryId: null }) - }) - - it('can set active view to JSON even when data exploration off', async () => { - await expectLogic(theInsightNavLogic, () => { - theInsightNavLogic.actions.setActiveView(InsightType.JSON) - }).toMatchValues({ - activeView: InsightType.JSON, - }) - }) - - it('can set active view to QUERY when data exploration on', async () => { - theFeatureFlagLogic.actions.setFeatureFlags([FEATURE_FLAGS.DATA_EXPLORATION_INSIGHTS], { - [FEATURE_FLAGS.DATA_EXPLORATION_INSIGHTS]: true, - }) - - await expectLogic(theInsightNavLogic, () => { - theInsightNavLogic.actions.setActiveView(InsightType.JSON) + it('can set active view to QUERY', async () => { + await expectLogic(logic, () => { + logic.actions.setActiveView(InsightType.JSON) }).toMatchValues({ activeView: InsightType.JSON, }) @@ -145,23 +86,22 @@ describe('insightNavLogic', () => { describe('filters changing changes active view', () => { it('takes view from cached insight filters', async () => { - const propsWithCachedInsight = { + const props = { dashboardItemId: 'insight' as InsightShortId, cachedInsight: { filters: { insight: InsightType.FUNNELS } }, } - const theInsightLogicWithCachedInsight = insightLogic(propsWithCachedInsight) - theInsightLogicWithCachedInsight.mount() - const theInsightNavLogicForTheCachedInsight = insightNavLogic({ - dashboardItemId: 'insight' as InsightShortId, - cachedInsight: { filters: { insight: InsightType.FUNNELS } }, - }) - theInsightNavLogicForTheCachedInsight.mount() - expect(theInsightNavLogicForTheCachedInsight.values.activeView).toEqual(InsightType.FUNNELS) + const buildInsightLogicWithCachedInsight = insightLogic(props) + buildInsightLogicWithCachedInsight.mount() + + const builtInsightNavLogicForTheCachedInsight = insightNavLogic(props) + builtInsightNavLogicForTheCachedInsight.mount() + + expect(builtInsightNavLogicForTheCachedInsight.values.activeView).toEqual(InsightType.FUNNELS) }) it('does set view from setInsight if filters are overriding', async () => { - await expectLogic(theInsightNavLogic, () => { - theInsightLogic.actions.setInsight( + await expectLogic(logic, () => { + builtInsightLogic.actions.setInsight( { filters: { insight: InsightType.FUNNELS } }, { overrideFilter: true } ) @@ -171,39 +111,24 @@ describe('insightNavLogic', () => { }) it('sets view from loadInsightSuccess', async () => { - await expectLogic(theInsightNavLogic, () => { - theInsightLogic.actions.loadInsightSuccess({ filters: { insight: InsightType.FUNNELS } }) + await expectLogic(logic, () => { + builtInsightLogic.actions.loadInsightSuccess({ filters: { insight: InsightType.FUNNELS } }) }).toMatchValues({ activeView: InsightType.FUNNELS, }) }) it('sets view from loadResultsSuccess', async () => { - await expectLogic(theInsightNavLogic, () => { - theInsightLogic.actions.loadResultsSuccess({ filters: { insight: InsightType.FUNNELS } }) + await expectLogic(logic, () => { + builtInsightLogic.actions.loadResultsSuccess({ filters: { insight: InsightType.FUNNELS } }) }).toMatchValues({ activeView: InsightType.FUNNELS, }) }) - it('does not ignore set of JSON view from loadResultsSuccess when data exploration is off', async () => { - await expectLogic(theInsightNavLogic, () => { - theInsightLogic.actions.loadResultsSuccess({ - filters: {}, - query: { kind: NodeKind.DataTableNode } as DataTableNode, - }) - }).toMatchValues({ - activeView: InsightType.JSON, - }) - }) - - it('sets QUERY view from loadResultsSuccess when data exploration is on', async () => { - theFeatureFlagLogic.actions.setFeatureFlags([FEATURE_FLAGS.DATA_EXPLORATION_INSIGHTS], { - [FEATURE_FLAGS.DATA_EXPLORATION_INSIGHTS]: true, - }) - - await expectLogic(theInsightNavLogic, () => { - theInsightLogic.actions.loadResultsSuccess({ + it('sets QUERY view from loadResultsSuccess', async () => { + await expectLogic(logic, () => { + builtInsightLogic.actions.loadResultsSuccess({ filters: {}, query: { kind: NodeKind.DataTableNode } as DataTableNode, }) diff --git a/frontend/src/scenes/insights/InsightNav/insightNavLogic.tsx b/frontend/src/scenes/insights/InsightNav/insightNavLogic.tsx index 292889ecf215c..64ed0940d3e90 100644 --- a/frontend/src/scenes/insights/InsightNav/insightNavLogic.tsx +++ b/frontend/src/scenes/insights/InsightNav/insightNavLogic.tsx @@ -3,7 +3,6 @@ import { InsightLogicProps, InsightType } from '~/types' import type { insightNavLogicType } from './insightNavLogicType' import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils' -import { cleanFilters } from 'scenes/insights/utils/cleanFilters' import { insightLogic } from 'scenes/insights/insightLogic' import { NodeKind } from '~/queries/schema' import { insightDataLogic, queryFromKind } from 'scenes/insights/insightDataLogic' @@ -36,7 +35,7 @@ export const insightNavLogic = kea([ filterTestAccountsDefaultsLogic, ['filterTestAccountsDefault'], ], - actions: [insightLogic(props), ['setFilters'], insightDataLogic(props), ['setQuery']], + actions: [insightDataLogic(props), ['setQuery']], })), actions({ setActiveView: (view: InsightType) => ({ view }), @@ -47,10 +46,6 @@ export const insightNavLogic = kea([ }, }), selectors({ - isUsingDataExploration: [ - (s) => [s.featureFlags], - (featureFlags) => !!featureFlags[FEATURE_FLAGS.DATA_EXPLORATION_INSIGHTS], - ], allowQueryTab: [(s) => [s.featureFlags], (featureFlags) => !!featureFlags[FEATURE_FLAGS.HOGQL]], activeView: [ (s) => [s.filters, s.query, s.userSelectedView], @@ -162,30 +157,18 @@ export const insightNavLogic = kea([ actions.setQuery(examples.HogQLTable) } } else { - if (values.isUsingDataExploration) { - if (view === InsightType.TRENDS) { - actions.setQuery(queryFromKind(NodeKind.TrendsQuery, values.filterTestAccountsDefault)) - } else if (view === InsightType.FUNNELS) { - actions.setQuery(queryFromKind(NodeKind.FunnelsQuery, values.filterTestAccountsDefault)) - } else if (view === InsightType.RETENTION) { - actions.setQuery(queryFromKind(NodeKind.RetentionQuery, values.filterTestAccountsDefault)) - } else if (view === InsightType.PATHS) { - actions.setQuery(queryFromKind(NodeKind.PathsQuery, values.filterTestAccountsDefault)) - } else if (view === InsightType.STICKINESS) { - actions.setQuery(queryFromKind(NodeKind.StickinessQuery, values.filterTestAccountsDefault)) - } else if (view === InsightType.LIFECYCLE) { - actions.setQuery(queryFromKind(NodeKind.LifecycleQuery, values.filterTestAccountsDefault)) - } - } else { - actions.setFilters( - cleanFilters( - // double-check that the view is valid - { ...values.filters, insight: view || InsightType.TRENDS }, - values.filters - ), - undefined, - true - ) + if (view === InsightType.TRENDS) { + actions.setQuery(queryFromKind(NodeKind.TrendsQuery, values.filterTestAccountsDefault)) + } else if (view === InsightType.FUNNELS) { + actions.setQuery(queryFromKind(NodeKind.FunnelsQuery, values.filterTestAccountsDefault)) + } else if (view === InsightType.RETENTION) { + actions.setQuery(queryFromKind(NodeKind.RetentionQuery, values.filterTestAccountsDefault)) + } else if (view === InsightType.PATHS) { + actions.setQuery(queryFromKind(NodeKind.PathsQuery, values.filterTestAccountsDefault)) + } else if (view === InsightType.STICKINESS) { + actions.setQuery(queryFromKind(NodeKind.StickinessQuery, values.filterTestAccountsDefault)) + } else if (view === InsightType.LIFECYCLE) { + actions.setQuery(queryFromKind(NodeKind.LifecycleQuery, values.filterTestAccountsDefault)) } } }, diff --git a/frontend/src/scenes/insights/RetentionDatePicker.tsx b/frontend/src/scenes/insights/RetentionDatePicker.tsx index 00f52d71ed377..4af9318d3078d 100644 --- a/frontend/src/scenes/insights/RetentionDatePicker.tsx +++ b/frontend/src/scenes/insights/RetentionDatePicker.tsx @@ -1,47 +1,18 @@ import { useActions, useValues } from 'kea' -import { retentionLogic } from 'scenes/retention/retentionLogic' import { Tooltip } from 'lib/lemon-ui/Tooltip' import { insightLogic } from 'scenes/insights/insightLogic' import { dayjs } from 'lib/dayjs' import { DatePicker } from 'lib/components/DatePicker' -import { DateRange } from '~/queries/schema' import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic' -export function RetentionDatePickerDataExploration(): JSX.Element { +export function RetentionDatePicker(): JSX.Element { const { insightProps } = useValues(insightLogic) const { dateRange, retentionFilter } = useValues(insightVizDataLogic(insightProps)) const { updateDateRange } = useActions(insightVizDataLogic(insightProps)) - return ( - - ) -} - -export function RetentionDatePicker(): JSX.Element { - const { insightProps } = useValues(insightLogic) - const { filters } = useValues(retentionLogic(insightProps)) - const { setFilters } = useActions(retentionLogic(insightProps)) - - return ( - - ) -} - -type RetentionDatePickerComponentProps = { - period?: string - date_to?: string | null - updateDateRange: (filters: Partial) => void -} + const period = retentionFilter?.period + const date_to = dateRange?.date_to -function RetentionDatePickerComponent({ - date_to, - period, - updateDateRange, -}: RetentionDatePickerComponentProps): JSX.Element { const yearSuffix = date_to && dayjs(date_to).year() !== dayjs().year() ? ', YYYY' : '' return ( diff --git a/frontend/src/scenes/insights/filters/FunnelExclusionsFilter/ExclusionRowSuffix.tsx b/frontend/src/scenes/insights/filters/FunnelExclusionsFilter/ExclusionRowSuffix.tsx index 0a1758b566dc9..3c657491b1134 100644 --- a/frontend/src/scenes/insights/filters/FunnelExclusionsFilter/ExclusionRowSuffix.tsx +++ b/frontend/src/scenes/insights/filters/FunnelExclusionsFilter/ExclusionRowSuffix.tsx @@ -1,6 +1,5 @@ import { Row, Select } from 'antd' import { useActions, useValues } from 'kea' -import { funnelLogic } from 'scenes/funnels/funnelLogic' import { ANTD_TOOLTIP_PLACEMENTS } from 'lib/utils' import { FunnelStepRangeEntityFilter, ActionFilter as ActionFilterType, FunnelsFilterType } from '~/types' import { insightLogic } from 'scenes/insights/insightLogic' @@ -10,7 +9,19 @@ import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic' import { FunnelsQuery } from '~/queries/schema' import { getClampedStepRangeFilterDataExploration } from 'scenes/funnels/funnelUtils' -export function ExclusionRowSuffixDataExploration(props: ExclusionRowSuffixComponentBaseProps): JSX.Element | null { +type ExclusionRowSuffixComponentBaseProps = { + filter: ActionFilterType | FunnelStepRangeEntityFilter + index: number + onClose?: () => void + isVertical: boolean +} + +export function ExclusionRowSuffix({ + filter, + index, + onClose, + isVertical, +}: ExclusionRowSuffixComponentBaseProps): JSX.Element | null { const { insightProps } = useValues(insightLogic) const { querySource, insightFilter, exclusionDefaultStepRange, isFunnelWithEnoughSteps, series } = useValues( funnelDataLogic(insightProps) @@ -32,63 +43,9 @@ export function ExclusionRowSuffixDataExploration(props: ExclusionRowSuffixCompo }) } - return ( - - ) -} - -export function ExclusionRowSuffix(props: ExclusionRowSuffixComponentBaseProps): JSX.Element | null { - const { insightProps } = useValues(insightLogic) - const { filters, isFunnelWithEnoughSteps, numberOfSeries, exclusionDefaultStepRange } = useValues( - funnelLogic(insightProps) - ) - const { setOneEventExclusionFilter } = useActions(funnelLogic(insightProps)) - - return ( - - ) -} + const exclusions = (insightFilter as FunnelsFilterType)?.exclusions + const numberOfSeries = series?.length || 0 -type ExclusionRowSuffixComponentBaseProps = { - filter: ActionFilterType | FunnelStepRangeEntityFilter - index: number - onClose?: () => void - isVertical: boolean -} - -type ExclusionRowSuffixComponentProps = ExclusionRowSuffixComponentBaseProps & { - isFunnelWithEnoughSteps: boolean - numberOfSeries: number - exclusionDefaultStepRange: Omit - exclusions?: FunnelStepRangeEntityFilter[] - setOneEventExclusionFilter: (eventFilter: FunnelStepRangeEntityFilter, index: number) => void -} - -export function ExclusionRowSuffixComponent({ - filter, - index, - onClose, - isVertical, - isFunnelWithEnoughSteps, - numberOfSeries, - exclusionDefaultStepRange, - exclusions, - setOneEventExclusionFilter, -}: ExclusionRowSuffixComponentProps): JSX.Element | null { const stepRange = { funnel_from_step: exclusions?.[index]?.funnel_from_step ?? exclusionDefaultStepRange.funnel_from_step, funnel_to_step: exclusions?.[index]?.funnel_to_step ?? exclusionDefaultStepRange.funnel_to_step, diff --git a/frontend/src/scenes/insights/filters/FunnelExclusionsFilter/FunnelExclusionsFilter.tsx b/frontend/src/scenes/insights/filters/FunnelExclusionsFilter/FunnelExclusionsFilter.tsx index cf17d851b021f..9bb147c049967 100644 --- a/frontend/src/scenes/insights/filters/FunnelExclusionsFilter/FunnelExclusionsFilter.tsx +++ b/frontend/src/scenes/insights/filters/FunnelExclusionsFilter/FunnelExclusionsFilter.tsx @@ -2,76 +2,34 @@ import { useRef } from 'react' import { useActions, useValues } from 'kea' import useSize from '@react-hook/size' import { ActionFilter } from 'scenes/insights/filters/ActionFilter/ActionFilter' -import { funnelLogic } from 'scenes/funnels/funnelLogic' import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types' import { FunnelStepRangeEntityFilter, EntityTypes, FilterType } from '~/types' import { insightLogic } from 'scenes/insights/insightLogic' import { MathAvailability } from 'scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow' import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic' -import { ExclusionRowSuffix, ExclusionRowSuffixDataExploration } from './ExclusionRowSuffix' +import { ExclusionRowSuffix } from './ExclusionRowSuffix' import { ExclusionRow } from './ExclusionRow' -export function FunnelExclusionsFilterDataExploration(): JSX.Element { +export function FunnelExclusionsFilter(): JSX.Element { const { insightProps } = useValues(insightLogic) const { exclusionFilters, exclusionDefaultStepRange, isFunnelWithEnoughSteps } = useValues( funnelDataLogic(insightProps) ) const { updateInsightFilter } = useActions(funnelDataLogic(insightProps)) - return ( - { - const exclusions = (filters.events as FunnelStepRangeEntityFilter[]).map((e) => ({ - ...e, - funnel_from_step: e.funnel_from_step || exclusionDefaultStepRange.funnel_from_step, - funnel_to_step: e.funnel_to_step || exclusionDefaultStepRange.funnel_to_step, - })) - updateInsightFilter({ exclusions }) - }} - isDataExploration - /> - ) -} - -export function FunnelExclusionsFilter(): JSX.Element { - const { insightProps } = useValues(insightLogic) - const { exclusionFilters, isFunnelWithEnoughSteps, exclusionDefaultStepRange } = useValues( - funnelLogic(insightProps) - ) - const { setEventExclusionFilters } = useActions(funnelLogic(insightProps)) - - return ( - - ) -} - -type FunnelExclusionsFilterComponentProps = { - exclusionFilters: FilterType - exclusionDefaultStepRange: Omit - isFunnelWithEnoughSteps: boolean - setFilters: (filters: Partial) => void - isDataExploration?: boolean -} - -export function FunnelExclusionsFilterComponent({ - exclusionFilters, - exclusionDefaultStepRange, - isFunnelWithEnoughSteps, - setFilters, - isDataExploration, -}: FunnelExclusionsFilterComponentProps): JSX.Element { const ref = useRef(null) const [width] = useSize(ref) const isVerticalLayout = !!width && width < 450 // If filter container shrinks below 500px, initiate verticality + const setFilters = (filters: Partial): void => { + const exclusions = (filters.events as FunnelStepRangeEntityFilter[]).map((e) => ({ + ...e, + funnel_from_step: e.funnel_from_step || exclusionDefaultStepRange.funnel_from_step, + funnel_to_step: e.funnel_to_step || exclusionDefaultStepRange.funnel_to_step, + })) + updateInsightFilter({ exclusions }) + } + return ( } - customRowSuffix={(props) => - isDataExploration ? ( - - ) : ( - - ) - } + customRowSuffix={(props) => } /> ) } diff --git a/frontend/src/scenes/insights/filters/FunnelStepReferencePicker.tsx b/frontend/src/scenes/insights/filters/FunnelStepReferencePicker.tsx index 6cb634dd5256d..c9cf20baf7c5c 100644 --- a/frontend/src/scenes/insights/filters/FunnelStepReferencePicker.tsx +++ b/frontend/src/scenes/insights/filters/FunnelStepReferencePicker.tsx @@ -1,41 +1,19 @@ import { useActions, useValues } from 'kea' import { insightLogic } from 'scenes/insights/insightLogic' -import { funnelLogic } from 'scenes/funnels/funnelLogic' import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic' -import { FunnelsFilterType, FunnelStepReference } from '~/types' +import { FunnelStepReference } from '~/types' import { LemonSelect } from '@posthog/lemon-ui' +import { FunnelsFilter } from '~/queries/schema' -export function FunnelStepReferencePickerDataExploration(): JSX.Element | null { +export function FunnelStepReferencePicker(): JSX.Element | null { const { insightProps } = useValues(insightLogic) const { insightFilter } = useValues(funnelDataLogic(insightProps)) const { updateInsightFilter } = useActions(funnelDataLogic(insightProps)) - return -} - -export function FunnelStepReferencePicker(): JSX.Element | null { - const { insightProps } = useValues(insightLogic) - const { stepReference } = useValues(funnelLogic(insightProps)) - const { setStepReference } = useActions(funnelLogic(insightProps)) - - return ( - funnel_step_reference && setStepReference(funnel_step_reference)} - /> - ) -} - -type FunnelStepReferencePickerComponentProps = { - setFilters: (filters: Partial) => void -} & FunnelsFilterType + const { funnel_step_reference } = (insightFilter || {}) as FunnelsFilter -export function FunnelStepReferencePickerComponent({ - funnel_step_reference, - setFilters, -}: FunnelStepReferencePickerComponentProps): JSX.Element | null { const options = [ { value: FunnelStepReference.total, @@ -50,7 +28,7 @@ export function FunnelStepReferencePickerComponent({ return ( stepRef && setFilters({ funnel_step_reference: stepRef })} + onChange={(stepRef) => stepRef && updateInsightFilter({ funnel_step_reference: stepRef })} dropdownMatchSelectWidth={false} data-attr="funnel-step-reference-selector" options={options} diff --git a/frontend/src/scenes/insights/filters/PathCleaningFilter.tsx b/frontend/src/scenes/insights/filters/PathCleaningFilter.tsx index 1bcf9aef9aafe..82adec7e27168 100644 --- a/frontend/src/scenes/insights/filters/PathCleaningFilter.tsx +++ b/frontend/src/scenes/insights/filters/PathCleaningFilter.tsx @@ -1,37 +1,20 @@ import { useActions, useValues } from 'kea' -import { pathsLogic } from 'scenes/paths/pathsLogic' import { pathsDataLogic } from 'scenes/paths/pathsDataLogic' import { teamLogic } from 'scenes/teamLogic' -import { EditorFilterProps, PathsFilterType, QueryEditorFilterProps } from '~/types' +import { EditorFilterProps } from '~/types' import { LemonSwitch } from '@posthog/lemon-ui' import { PathCleanFilters } from 'lib/components/PathCleanFilters/PathCleanFilters' import { Tooltip } from 'lib/lemon-ui/Tooltip' +import { PathsFilter } from '~/queries/schema' -export function PathCleaningFilterDataExploration({ insightProps }: QueryEditorFilterProps): JSX.Element { +export function PathCleaningFilter({ insightProps }: EditorFilterProps): JSX.Element { const { insightFilter } = useValues(pathsDataLogic(insightProps)) const { updateInsightFilter } = useActions(pathsDataLogic(insightProps)) - return -} - -export function PathCleaningFilter({ insightProps }: EditorFilterProps): JSX.Element { - const { filter } = useValues(pathsLogic(insightProps)) - const { setFilter } = useActions(pathsLogic(insightProps)) - - return -} - -type PathCleaningFilterComponentProps = { - setFilter: (filter: PathsFilterType) => void -} & PathsFilterType + const { local_path_cleaning_filters, path_replacements } = (insightFilter || {}) as PathsFilter -export function PathCleaningFilterComponent({ - setFilter, - local_path_cleaning_filters, - path_replacements, -}: PathCleaningFilterComponentProps): JSX.Element { const { currentTeam } = useValues(teamLogic) const hasFilters = (currentTeam?.path_cleaning_filters || []).length > 0 @@ -39,7 +22,7 @@ export function PathCleaningFilterComponent({ <> setFilter({ local_path_cleaning_filters: filters })} + setFilters={(filters) => updateInsightFilter({ local_path_cleaning_filters: filters })} /> { localStorage.setItem('default_path_clean_filters', checked.toString()) - setFilter({ path_replacements: checked }) + updateInsightFilter({ path_replacements: checked }) }} label="Apply global path URL cleaning" bordered diff --git a/frontend/src/scenes/insights/filters/RetentionReferencePicker.tsx b/frontend/src/scenes/insights/filters/RetentionReferencePicker.tsx index a09763686dff7..be670f9abc8c5 100644 --- a/frontend/src/scenes/insights/filters/RetentionReferencePicker.tsx +++ b/frontend/src/scenes/insights/filters/RetentionReferencePicker.tsx @@ -2,39 +2,19 @@ import { Select } from 'antd' import { PercentageOutlined } from '@ant-design/icons' import { insightLogic } from 'scenes/insights/insightLogic' import { useActions, useValues } from 'kea' -import { retentionLogic } from 'scenes/retention/retentionLogic' -import { RetentionFilter } from '~/queries/schema' import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic' -export function RetentionReferencePickerDataExploration(): JSX.Element { +export function RetentionReferencePicker(): JSX.Element { const { insightProps } = useValues(insightLogic) const { retentionFilter } = useValues(insightVizDataLogic(insightProps)) const { updateInsightFilter } = useActions(insightVizDataLogic(insightProps)) - return -} - -export function RetentionReferencePicker(): JSX.Element { - const { insightProps } = useValues(insightLogic) - const { filters } = useValues(retentionLogic(insightProps)) - const { setFilters } = useActions(retentionLogic(insightProps)) - - return -} - -type RetentionReferencePickerComponentProps = { - setFilters: (filters: Partial) => void -} & RetentionFilter - -export function RetentionReferencePickerComponent({ - retention_reference, - setFilters, -}: RetentionReferencePickerComponentProps): JSX.Element { + const { retention_reference } = retentionFilter || {} return (