Skip to content

Commit

Permalink
init
Browse files Browse the repository at this point in the history
  • Loading branch information
@jurajmajerik
jurajmajerik committed Dec 27, 2024
1 parent 6c58e55 commit c8ef379
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 58 deletions.
2 changes: 1 addition & 1 deletion frontend/src/scenes/experiments/ExperimentImplementationDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ export function ExperimentImplementationDetails({ experiment }: ExperimentImplem
}

return (
<div>
<div className="mb-4">
<h2 className="font-semibold text-lg mb-2">Implementation</h2>
<div className="border rounded bg-bg-light">
<div className="p-6 space-y-4">
Expand Down
53 changes: 36 additions & 17 deletions frontend/src/scenes/experiments/ExperimentView/ExperimentView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,34 @@ import { ReleaseConditionsModal, ReleaseConditionsTable } from './ReleaseConditi
import { Results } from './Results'
import { SecondaryMetricsTable } from './SecondaryMetricsTable'

const ResultsTab = (): JSX.Element => {
const { experiment, metricResults, featureFlags } = useValues(experimentLogic)
const result = metricResults?.[0]
const hasResultsInsight = result && result.insight
const NewResultsTab = (): JSX.Element => {
const { experiment, metricResults } = useValues(experimentLogic)
const hasSomeResults = metricResults?.some((result) => result?.insight)

return (
<div className="space-y-8">
{featureFlags[FEATURE_FLAGS.EXPERIMENTS_MULTIPLE_METRICS] ? (
<MetricsView />
) : hasResultsInsight ? (
<>
{!hasSomeResults && (
<>
{experiment.type === 'web' ? (
<WebExperimentImplementationDetails experiment={experiment} />
) : (
<ExperimentImplementationDetails experiment={experiment} />
)}
</>
)}
<MetricsView />
<MetricsView isSecondary={true} />
</>
)
}

const OldResultsTab = (): JSX.Element => {
const { experiment, metricResults } = useValues(experimentLogic)
const hasSomeResults = metricResults?.some((result) => result?.insight)

return (
<>
{hasSomeResults ? (
<Results />
) : (
<>
Expand All @@ -54,15 +72,16 @@ const ResultsTab = (): JSX.Element => {
)}
</>
)}
{featureFlags[FEATURE_FLAGS.EXPERIMENTS_MULTIPLE_METRICS] ? (
<MetricsView isSecondary={true} />
) : (
<SecondaryMetricsTable experimentId={experiment.id} />
)}
</div>
<SecondaryMetricsTable experimentId={experiment.id} />
</>
)
}

const ResultsTab = (): JSX.Element => {
const { featureFlags } = useValues(experimentLogic)
return <>{featureFlags[FEATURE_FLAGS.EXPERIMENTS_MULTIPLE_METRICS] ? <NewResultsTab /> : <OldResultsTab />}</>
}

const VariantsTab = (): JSX.Element => {
return (
<div className="space-y-8">
Expand All @@ -87,8 +106,8 @@ export function ExperimentView(): JSX.Element {
} = useValues(experimentLogic)

const { setTabKey } = useActions(experimentLogic)
const result = metricResults?.[0]
const hasResultsInsight = result && result.insight
// Instead, check if any result in the array has an insight
const hasSomeResults = metricResults?.some((result) => result?.insight)

return (
<>
Expand All @@ -103,7 +122,7 @@ export function ExperimentView(): JSX.Element {
<ExperimentLoadingAnimation />
) : (
<>
{hasResultsInsight && !featureFlags[FEATURE_FLAGS.EXPERIMENTS_MULTIPLE_METRICS] ? (
{hasSomeResults && !featureFlags[FEATURE_FLAGS.EXPERIMENTS_MULTIPLE_METRICS] ? (
<div>
<Overview />
<LemonDivider className="mt-4" />
Expand Down
36 changes: 20 additions & 16 deletions frontend/src/scenes/experiments/ExperimentView/components.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -580,12 +580,17 @@ export function PageHeaderCustom(): JSX.Element {
}

export function ShipVariantModal({ experimentId }: { experimentId: Experiment['id'] }): JSX.Element {
const { experiment, sortedWinProbabilities, isShipVariantModalOpen } = useValues(experimentLogic({ experimentId }))
const { experiment, isShipVariantModalOpen } = useValues(experimentLogic({ experimentId }))
const { closeShipVariantModal, shipVariant } = useActions(experimentLogic({ experimentId }))
const { aggregationLabel } = useValues(groupsModel)

const [selectedVariantKey, setSelectedVariantKey] = useState<string | null>()
useEffect(() => setSelectedVariantKey(sortedWinProbabilities(0)[0]?.key), [sortedWinProbabilities(0)])
useEffect(() => {
if (experiment.parameters?.feature_flag_variants?.length > 0) {
// First test variant selected by default
setSelectedVariantKey(experiment.parameters.feature_flag_variants[1].key)
}
}, [experiment])

const aggregationTargetName =
experiment.filters.aggregation_group_type_index != null
Expand Down Expand Up @@ -625,20 +630,19 @@ export function ShipVariantModal({ experimentId }: { experimentId: Experiment['i
className="w-full"
data-attr="metrics-selector"
value={selectedVariantKey}
onChange={(variantKey) => setSelectedVariantKey(variantKey)}
options={sortedWinProbabilities(0).map(({ key }) => ({
value: key,
label: (
<div className="space-x-2 inline-flex">
<VariantTag experimentId={experimentId} variantKey={key} />
{key === sortedWinProbabilities(0)[0]?.key && (
<LemonTag type="success">
<b className="uppercase">Winning</b>
</LemonTag>
)}
</div>
),
}))}
onChange={(variantKey) => {
setSelectedVariantKey(variantKey)
}}
options={
experiment.parameters?.feature_flag_variants?.map(({ key }) => ({
value: key,
label: (
<div className="space-x-2 inline-flex">
<VariantTag experimentId={experimentId} variantKey={key} />
</div>
),
})) || []
}
/>
</div>
</div>
Expand Down
54 changes: 30 additions & 24 deletions frontend/src/scenes/experiments/MetricsView/DeltaChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -274,34 +274,40 @@ export function DeltaChart({
{isFirstMetric && <div className="w-full border-t border-border" />}
{/* eslint-disable-next-line react/forbid-dom-props */}
<div style={{ height: `${chartSvgHeight}px` }}>
{variants.map((variant) => (
<div
key={variant.key}
// eslint-disable-next-line react/forbid-dom-props
style={{
height: `${100 / variants.length}%`,
display: 'flex',
alignItems: 'center',
paddingLeft: '10px',
position: 'relative',
minWidth: 0,
overflow: 'hidden',
}}
>
{result &&
variants.map((variant) => (
<div
className="absolute inset-0"
key={variant.key}
// eslint-disable-next-line react/forbid-dom-props
style={{
backgroundColor: 'var(--bg-light)',
opacity: 0.4,
pointerEvents: 'none',
height: `${100 / variants.length}%`,
display: 'flex',
alignItems: 'center',
paddingLeft: '10px',
position: 'relative',
minWidth: 0,
overflow: 'hidden',
}}
/>
<div className="w-full overflow-hidden whitespace-nowrap">
<VariantTag experimentId={experimentId} variantKey={variant.key} fontSize={11} muted />
>
<div
className="absolute inset-0"
// eslint-disable-next-line react/forbid-dom-props
style={{
backgroundColor: 'var(--bg-light)',
opacity: 0.4,
pointerEvents: 'none',
}}
/>
<div className="w-full overflow-hidden whitespace-nowrap">
<VariantTag
experimentId={experimentId}
variantKey={variant.key}
fontSize={11}
muted
/>
</div>
</div>
</div>
))}
))}
</div>
</div>
{/* SVGs container */}
Expand Down Expand Up @@ -537,7 +543,7 @@ export function DeltaChart({
</foreignObject>
) : (
<foreignObject
x={VIEW_BOX_WIDTH / 2 - 100}
x={VIEW_BOX_WIDTH / 2 - 100 - (result ? 0 : 200)}
y={chartHeight / 2 - 10}
width="250"
height="20"
Expand Down

0 comments on commit c8ef379

Please sign in to comment.