Merge branch 'master' into feat/flag-db-operations-validation

frontend/src/lib/lemon-ui/LemonField/LemonField.tsx

@@ -43,7 +43,7 @@ const LemonPureField = ({
             onClick={onClick}
             className={clsx(
                 'Field flex',
-                { 'gap-2': className && className.indexOf('gap-') === -1 },
+                { 'gap-2': className ? className.indexOf('gap-') === -1 : true },
                 className,
                 error && 'Field--error',
                 inline ? 'flex-row' : 'flex-col'

frontend/src/queries/nodes/DataTable/dataTableLogic.ts

@@ -68,7 +68,18 @@ export const dataTableLogic = kea<dataTableLogicType>([
     })),
     selectors({
         sourceKind: [(_, p) => [p.query], (query): NodeKind | null => query.source?.kind],
-        sourceFeatures: [(_, p) => [p.query], (query): Set<QueryFeature> => getQueryFeatures(query.source)],
+        sourceFeatures: [
+            (_, p) => [p.query, (_, props) => props.context],
+            (query, context): Set<QueryFeature> => {
+                const sourceFeatures = getQueryFeatures(query.source)
+                if (context?.extraDataTableQueryFeatures) {
+                    for (const feature of context.extraDataTableQueryFeatures) {
+                        sourceFeatures.add(feature)
+                    }
+                }
+                return sourceFeatures
+            },
+        ],
         orderBy: [
             (s, p) => [p.query, s.sourceFeatures],
             (query, sourceFeatures): string[] | null =>

frontend/src/queries/nodes/DataTable/renderColumnMeta.tsx

@@ -21,7 +21,8 @@ export function renderColumnMeta(key: string, query: DataTableNode, context?: Qu
     let align: ColumnMeta['align']
 
     const queryContextColumnName = key.startsWith('context.columns.') ? trimQuotes(key.substring(16)) : undefined
-    const queryContextColumn = queryContextColumnName ? context?.columns?.[queryContextColumnName] : undefined
+    const queryContextColumn =
+        (queryContextColumnName ? context?.columns?.[queryContextColumnName] : undefined) ?? context?.columns?.[key]
 
     if (queryContextColumnName && queryContextColumn && (queryContextColumn.title || queryContextColumn.renderTitle)) {
         const Component = queryContextColumn.renderTitle

frontend/src/scenes/data-management/properties/PropertyDefinitionsTable.tsx

@@ -85,7 +85,7 @@ export function PropertyDefinitionsTable(): JSX.Element {
                     Query with SQL
                 </Link>
             </LemonBanner>
-            <div className="flex justify-between mb-4 gap-2 flex-wrap">
+            <div className="flex mb-4 gap-2 flex-wrap">
                 <LemonInput
                     type="search"
                     placeholder="Search for properties"

frontend/src/scenes/error-tracking/queries.ts

@@ -38,16 +38,19 @@ export const errorTrackingQuery = ({
     filterTestAccounts,
     filterGroup,
     sparklineSelectedPeriod,
+    columns,
 }: {
     order: ErrorTrackingQuery['order']
     dateRange: DateRange
     filterTestAccounts: boolean
     filterGroup: UniversalFiltersGroup
     sparklineSelectedPeriod: string | null
+    columns?: ('error' | 'volume' | 'occurrences' | 'sessions' | 'users' | 'assignee')[]
 }): DataTableNode => {
     const select: string[] = []
-
-    const columns = ['error', 'occurrences', 'sessions', 'users', 'assignee']
+    if (!columns) {
+        columns = ['error', 'occurrences', 'sessions', 'users', 'assignee']
+    }
 
     if (sparklineSelectedPeriod) {
         const { value, displayAs, offsetHours } = parseSparklineSelection(sparklineSelectedPeriod)

frontend/src/scenes/experiments/Experiment.stories.tsx

@@ -483,6 +483,10 @@ const MOCK_EXPERIMENT_RESULTS: FunnelExperimentResults = {
                 failure_count: 28,
             },
         ],
+        credible_intervals: {
+            control: [0.0126, 0.0526],
+            test: [0.0526, 0.0826],
+        },
     },
 }
 

frontend/src/scenes/experiments/ExperimentView/Overview.tsx

@@ -28,7 +28,7 @@ export function Overview(): JSX.Element {
                 comparisonVariant = sortedWinProbabilities.find(({ key }) => key === 'control')
             }
 
-            if (!comparisonVariant) {
+            if (!winningVariant?.conversionRate || !comparisonVariant?.conversionRate) {
                 return <></>
             }
 

frontend/src/scenes/experiments/ExperimentView/SecondaryMetricsTable.tsx

@@ -212,15 +212,15 @@ export function SecondaryMetricsTable({
                         ),
                         render: function Key(_, item: TabularSecondaryMetricResults): JSX.Element {
                             const { variant } = item
-                            return <div>{targetResults ? countDataForVariant(targetResults, variant) : '--'}</div>
+                            return <div>{targetResults ? countDataForVariant(targetResults, variant) : '—'}</div>
                         },
                     },
                     {
                         title: 'Exposure',
                         render: function Key(_, item: TabularSecondaryMetricResults): JSX.Element {
                             const { variant } = item
                             return (
-                                <div>{targetResults ? exposureCountDataForVariant(targetResults, variant) : '--'}</div>
+                                <div>{targetResults ? exposureCountDataForVariant(targetResults, variant) : '—'}</div>
                             )
                         },
                     },
@@ -233,7 +233,7 @@ export function SecondaryMetricsTable({
                                     <b>
                                         {targetResults?.probability?.[variant] != undefined
                                             ? `${(targetResults.probability?.[variant] * 100).toFixed(1)}%`
-                                            : '--'}
+                                            : '—'}
                                     </b>
                                 </div>
                             )
@@ -250,7 +250,10 @@ export function SecondaryMetricsTable({
                         render: function Key(_, item: TabularSecondaryMetricResults): JSX.Element {
                             const { variant } = item
                             const conversionRate = conversionRateForVariant(targetResults || null, variant)
-                            return <div>{conversionRate === '--' ? conversionRate : `${conversionRate}%`}</div>
+                            if (!conversionRate) {
+                                return <>—</>
+                            }
+                            return <div>{`${conversionRate.toFixed(2)}%`}</div>
                         },
                     },
                     {
@@ -262,7 +265,7 @@ export function SecondaryMetricsTable({
                                     <b>
                                         {targetResults?.probability?.[variant] != undefined
                                             ? `${(targetResults.probability?.[variant] * 100).toFixed(1)}%`
-                                            : '--'}
+                                            : '—'}
                                     </b>
                                 </div>
                             )

frontend/src/scenes/experiments/ExperimentView/SummaryTable.tsx

@@ -6,7 +6,7 @@ import { useValues } from 'kea'
 import { EntityFilterInfo } from 'lib/components/EntityFilterInfo'
 import { LemonProgress } from 'lib/lemon-ui/LemonProgress'
 
-import { FunnelExperimentVariant, InsightType, TrendExperimentVariant } from '~/types'
+import { _FunnelExperimentResults, FunnelExperimentVariant, InsightType, TrendExperimentVariant } from '~/types'
 
 import { experimentLogic } from '../experimentLogic'
 import { VariantTag } from './components'
@@ -88,13 +88,68 @@ export function SummaryTable(): JSX.Element {
             title: 'Conversion rate',
             render: function Key(_, item): JSX.Element {
                 const conversionRate = conversionRateForVariant(experimentResults, item.key)
-                return (
-                    <div className="font-semibold">
-                        {conversionRate === '--' ? conversionRate : `${conversionRate}%`}
-                    </div>
-                )
+                if (!conversionRate) {
+                    return <>—</>
+                }
+
+                return <div className="font-semibold">{`${conversionRate.toFixed(2)}%`}</div>
             },
-        })
+        }),
+            columns.push({
+                key: 'delta',
+                title: (
+                    <div className="inline-flex items-center space-x-1">
+                        <div className="">Delta %</div>
+                        <Tooltip title="Delta % indicates the percentage change in the conversion rate between the control and the test variant.">
+                            <IconInfo className="text-muted-alt text-base" />
+                        </Tooltip>
+                    </div>
+                ),
+                render: function Key(_, item): JSX.Element {
+                    if (item.key === 'control') {
+                        return <em>Baseline</em>
+                    }
+
+                    const controlConversionRate = conversionRateForVariant(experimentResults, 'control')
+                    const variantConversionRate = conversionRateForVariant(experimentResults, item.key)
+
+                    if (!controlConversionRate || !variantConversionRate) {
+                        return <>—</>
+                    }
+
+                    const delta = variantConversionRate - controlConversionRate
+
+                    return (
+                        <div
+                            className={`font-semibold ${delta > 0 ? 'text-success' : delta < 0 ? 'text-danger' : ''}`}
+                        >{`${delta > 0 ? '+' : ''}${delta.toFixed(2)}%`}</div>
+                    )
+                },
+            }),
+            columns.push({
+                key: 'credibleInterval',
+                title: (
+                    <div className="inline-flex items-center space-x-1">
+                        <div className="">Credible interval (95%)</div>
+                        <Tooltip title="A credible interval represents a range within which we believe the true parameter value lies with a certain probability (often 95%), based on the posterior distribution derived from the observed data and our prior beliefs.">
+                            <IconInfo className="text-muted-alt text-base" />
+                        </Tooltip>
+                    </div>
+                ),
+                render: function Key(_, item): JSX.Element {
+                    const credibleInterval = (experimentResults as _FunnelExperimentResults)?.credible_intervals?.[
+                        item.key
+                    ]
+                    if (!credibleInterval) {
+                        return <>—</>
+                    }
+
+                    const lowerBound = (credibleInterval[0] * 100).toFixed(2)
+                    const upperBound = (credibleInterval[1] * 100).toFixed(2)
+
+                    return <div className="font-semibold">{`[${lowerBound}%, ${upperBound}%]`}</div>
+                },
+            })
     }
 
     columns.push({
@@ -122,7 +177,7 @@ export function SummaryTable(): JSX.Element {
                             </span>
                         </span>
                     ) : (
-                        '--'
+                        '—'
                     )}
                 </>
             )

frontend/src/scenes/experiments/Experiments.tsx

@@ -10,7 +10,7 @@ import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { More } from 'lib/lemon-ui/LemonButton/More'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { LemonTable, LemonTableColumn, LemonTableColumns } from 'lib/lemon-ui/LemonTable'
-import { createdAtColumn, createdByColumn } from 'lib/lemon-ui/LemonTable/columnUtils'
+import { atColumn, createdAtColumn, createdByColumn } from 'lib/lemon-ui/LemonTable/columnUtils'
 import { LemonTableLink } from 'lib/lemon-ui/LemonTable/LemonTableLink'
 import { LemonTabs } from 'lib/lemon-ui/LemonTabs'
 import { Link } from 'lib/lemon-ui/Link'
@@ -64,13 +64,14 @@ export function Experiments(): JSX.Element {
         },
         createdByColumn<Experiment>() as LemonTableColumn<Experiment, keyof Experiment | undefined>,
         createdAtColumn<Experiment>() as LemonTableColumn<Experiment, keyof Experiment | undefined>,
+        atColumn('start_date', 'Started') as LemonTableColumn<Experiment, keyof Experiment | undefined>,
         {
             title: 'Duration',
             key: 'duration',
             render: function Render(_, experiment: Experiment) {
                 const duration = getExperimentDuration(experiment)
 
-                return <div>{duration !== undefined ? `${duration} day${duration !== 1 ? 's' : ''}` : '--'}</div>
+                return <div>{duration !== undefined ? `${duration} day${duration !== 1 ? 's' : ''}` : '—'}</div>
             },
             sorter: (a, b) => {
                 const durationA = getExperimentDuration(a) ?? -1

frontend/src/scenes/experiments/experimentLogic.tsx

@@ -1051,20 +1051,21 @@ export const experimentLogic = kea<experimentLogicType>([
         conversionRateForVariant: [
             () => [],
             () =>
-                (experimentResults: Partial<ExperimentResults['result']> | null, variant: string): string => {
-                    const errorResult = '--'
+                (experimentResults: Partial<ExperimentResults['result']> | null, variantKey: string): number | null => {
                     if (!experimentResults || !experimentResults.insight) {
-                        return errorResult
+                        return null
                     }
                     const variantResults = (experimentResults.insight as FunnelStep[][]).find(
-                        (variantFunnel: FunnelStep[]) => variantFunnel[0]?.breakdown_value?.[0] === variant
+                        (variantFunnel: FunnelStep[]) => {
+                            const breakdownValue = variantFunnel[0]?.breakdown_value
+                            return Array.isArray(breakdownValue) && breakdownValue[0] === variantKey
+                        }
                     )
+
                     if (!variantResults) {
-                        return errorResult
+                        return null
                     }
-                    return ((variantResults[variantResults.length - 1].count / variantResults[0].count) * 100).toFixed(
-                        1
-                    )
+                    return (variantResults[variantResults.length - 1].count / variantResults[0].count) * 100
                 },
         ],
         getIndexForVariant: [
@@ -1285,7 +1286,7 @@ export const experimentLogic = kea<experimentLogicType>([
             (
                 experimentResults,
                 conversionRateForVariant
-            ): { key: string; winProbability: number; conversionRate: number }[] => {
+            ): { key: string; winProbability: number; conversionRate: number | null }[] => {
                 if (!experimentResults) {
                     return []
                 }
@@ -1294,7 +1295,7 @@ export const experimentLogic = kea<experimentLogicType>([
                     .map((key) => ({
                         key,
                         winProbability: experimentResults.probability[key],
-                        conversionRate: parseFloat(conversionRateForVariant(experimentResults, key)),
+                        conversionRate: conversionRateForVariant(experimentResults, key),
                     }))
                     .sort((a, b) => b.winProbability - a.winProbability)
             },

frontend/src/scenes/retention/RetentionModal.tsx

@@ -53,7 +53,7 @@ export function RetentionModal(): JSX.Element | null {
             footer={
                 <div className="flex justify-between gap-2 w-full">
                     <div className="flex gap-2">
-                        {people.result?.length && !exploreUrl && (
+                        {!!people.result?.length && !exploreUrl && (
                             <LemonButton
                                 type="secondary"
                                 onClick={() =>
@@ -68,7 +68,7 @@ export function RetentionModal(): JSX.Element | null {
                                 Download CSV
                             </LemonButton>
                         )}
-                        {people.result?.length && !!dataTableNodeQuery && (
+                        {!!people.result?.length && !!dataTableNodeQuery && (
                             <LemonButton
                                 type="secondary"
                                 onClick={() => {

frontend/src/scenes/web-analytics/WebAnalyticsModal.tsx

@@ -4,8 +4,8 @@ import { IconOpenInNew } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonModal } from 'lib/lemon-ui/LemonModal'
 import { urls } from 'scenes/urls'
+import { WebQuery } from 'scenes/web-analytics/tiles/WebAnalyticsTile'
 import { webAnalyticsLogic } from 'scenes/web-analytics/webAnalyticsLogic'
-import { WebQuery } from 'scenes/web-analytics/WebAnalyticsTile'
 import { WebPropertyFilters } from 'scenes/web-analytics/WebPropertyFilters'
 
 export const WebAnalyticsModal = (): JSX.Element | null => {

frontend/src/scenes/web-analytics/WebDashboard.tsx

@@ -12,6 +12,9 @@ import { PostHogComDocsURL } from 'lib/lemon-ui/Link/Link'
 import { Popover } from 'lib/lemon-ui/Popover'
 import { isNotNil } from 'lib/utils'
 import React, { useState } from 'react'
+import { WebAnalyticsErrorTrackingTile } from 'scenes/web-analytics/tiles/WebAnalyticsErrorTracking'
+import { WebAnalyticsRecordingsTile } from 'scenes/web-analytics/tiles/WebAnalyticsRecordings'
+import { WebQuery } from 'scenes/web-analytics/tiles/WebAnalyticsTile'
 import { WebAnalyticsHealthCheck } from 'scenes/web-analytics/WebAnalyticsHealthCheck'
 import {
     QueryTile,
@@ -21,8 +24,6 @@ import {
     webAnalyticsLogic,
 } from 'scenes/web-analytics/webAnalyticsLogic'
 import { WebAnalyticsModal } from 'scenes/web-analytics/WebAnalyticsModal'
-import { WebAnalyticsRecordingsTile } from 'scenes/web-analytics/WebAnalyticsRecordings'
-import { WebQuery } from 'scenes/web-analytics/WebAnalyticsTile'
 import { WebPropertyFilters } from 'scenes/web-analytics/WebPropertyFilters'
 
 import { navigationLogic } from '~/layout/navigation/navigationLogic'
@@ -72,6 +73,8 @@ const Tiles = (): JSX.Element => {
                     return <TabsTileItem key={i} tile={tile} />
                 } else if (tile.kind === 'replay') {
                     return <WebAnalyticsRecordingsTile key={i} tile={tile} />
+                } else if (tile.kind === 'error_tracking') {
+                    return <WebAnalyticsErrorTrackingTile key={i} tile={tile} />
                 }
                 return null
             })}