From 1a0336b3466c6c7d05447a4467b7727d59dc8d89 Mon Sep 17 00:00:00 2001 From: Mike Williams Date: Fri, 17 Jan 2025 17:28:00 -0500 Subject: [PATCH] feat(nimbus): change DOU to DAU in Results UI --- .../PageResults/TableHighlights/index.tsx | 23 +++------------- .../PageResults/TableResults/index.test.tsx | 2 +- .../PageResults/TableResults/index.tsx | 23 ++-------------- .../PageResults/TableResultsWeekly/index.tsx | 27 +------------------ .../TableWithTabComparison/index.tsx | 4 --- .../src/components/PageResults/index.tsx | 9 ------- .../src/lib/visualization/constants.ts | 23 ++++++++-------- .../nimbus-ui/src/lib/visualization/mocks.tsx | 16 +++++++++++ 8 files changed, 35 insertions(+), 92 deletions(-) diff --git a/experimenter/experimenter/nimbus-ui/src/components/PageResults/TableHighlights/index.tsx b/experimenter/experimenter/nimbus-ui/src/components/PageResults/TableHighlights/index.tsx index aa904efd2c..c316c680f3 100644 --- a/experimenter/experimenter/nimbus-ui/src/components/PageResults/TableHighlights/index.tsx +++ b/experimenter/experimenter/nimbus-ui/src/components/PageResults/TableHighlights/index.tsx @@ -13,7 +13,6 @@ import { HIGHLIGHTS_METRICS_LIST, METRIC, METRICS_TIPS, - METRIC_TO_GROUP, TABLE_LABEL, } from "src/lib/visualization/constants"; import { @@ -26,7 +25,6 @@ import { getExperiment_experimentBySlug_referenceBranch, getExperiment_experimentBySlug_treatmentBranches, } from "src/types/getExperiment"; -import { NimbusExperimentApplicationEnum } from "src/types/globalTypes"; export type TableHighlightsProps = { experiment: getExperiment_experimentBySlug; @@ -40,21 +38,9 @@ type Branch = | getExperiment_experimentBySlug_referenceBranch | getExperiment_experimentBySlug_treatmentBranches; -const getHighlightMetrics = (outcomes: OutcomesList, isDesktop = false) => { +const getHighlightMetrics = (outcomes: OutcomesList) => { // Make a copy of `HIGHLIGHTS_METRICS_LIST` since we modify it. - const highlightMetricsList = HIGHLIGHTS_METRICS_LIST.map( - (highlightMetric) => { - if (isDesktop && highlightMetric.value === METRIC.DAYS_OF_USE) { - return { - value: METRIC.QUALIFIED_CUMULATIVE_DAYS_OF_USE, - name: "Qualified Cumulative Days of Use", - tooltip: METRICS_TIPS.QUALIFIED_CUMULATIVE_DAYS_OF_USE, - group: METRIC_TO_GROUP[METRIC.QUALIFIED_CUMULATIVE_DAYS_OF_USE], - }; - } - return highlightMetric; - }, - ); + const highlightMetricsList = [...HIGHLIGHTS_METRICS_LIST]; outcomes?.forEach((outcome) => { if (!outcome?.isDefault) { return; @@ -95,10 +81,7 @@ const TableHighlights = ({ referenceBranch, }: TableHighlightsProps) => { const { primaryOutcomes } = useOutcomes(experiment); - const highlightMetricsList = getHighlightMetrics( - primaryOutcomes, - experiment.application === NimbusExperimentApplicationEnum.DESKTOP, - ); + const highlightMetricsList = getHighlightMetrics(primaryOutcomes); const branchDescriptions = getBranchDescriptions( experiment.referenceBranch, experiment.treatmentBranches, diff --git a/experimenter/experimenter/nimbus-ui/src/components/PageResults/TableResults/index.test.tsx b/experimenter/experimenter/nimbus-ui/src/components/PageResults/TableResults/index.test.tsx index 61de31c456..6f3a3150f9 100644 --- a/experimenter/experimenter/nimbus-ui/src/components/PageResults/TableResults/index.test.tsx +++ b/experimenter/experimenter/nimbus-ui/src/components/PageResults/TableResults/index.test.tsx @@ -28,7 +28,7 @@ describe("TableResults", () => { const EXPECTED_HEADINGS = [ "2-Week Browser Retention", "Mean Searches Per User", - "Qualified Cumulative Days of Use", + "Daily Active Users", "Total Users", ]; diff --git a/experimenter/experimenter/nimbus-ui/src/components/PageResults/TableResults/index.tsx b/experimenter/experimenter/nimbus-ui/src/components/PageResults/TableResults/index.tsx index f5bc23d319..ec14004a42 100644 --- a/experimenter/experimenter/nimbus-ui/src/components/PageResults/TableResults/index.tsx +++ b/experimenter/experimenter/nimbus-ui/src/components/PageResults/TableResults/index.tsx @@ -11,9 +11,7 @@ import { OutcomesList } from "src/lib/types"; import { BRANCH_COMPARISON, GROUP, - METRIC, METRICS_TIPS, - METRIC_TO_GROUP, METRIC_TYPE, RESULTS_METRICS_LIST, TABLE_LABEL, @@ -24,7 +22,6 @@ import { } from "src/lib/visualization/types"; import { getTableDisplayType } from "src/lib/visualization/utils"; import { getExperiment_experimentBySlug } from "src/types/getExperiment"; -import { NimbusExperimentApplicationEnum } from "src/types/globalTypes"; export type TableResultsProps = { experiment: getExperiment_experimentBySlug; @@ -37,18 +34,7 @@ export type TableResultsProps = { const getResultMetrics = (outcomes: OutcomesList, isDesktop = false) => { // Make a copy of `RESULTS_METRICS_LIST` since we modify it. - const resultsMetricsList = RESULTS_METRICS_LIST.map((resultMetric) => { - if (isDesktop && resultMetric.value === METRIC.DAYS_OF_USE) { - return { - value: METRIC.QUALIFIED_CUMULATIVE_DAYS_OF_USE, - name: "Qualified Cumulative Days of Use", - tooltip: METRICS_TIPS.QUALIFIED_CUMULATIVE_DAYS_OF_USE, - type: METRIC_TYPE.GUARDRAIL, - group: METRIC_TO_GROUP[METRIC.QUALIFIED_CUMULATIVE_DAYS_OF_USE], - }; - } - return resultMetric; - }); + const resultsMetricsList = [...RESULTS_METRICS_LIST]; outcomes?.forEach((outcome) => { if (!outcome?.isDefault) { return; @@ -70,15 +56,10 @@ const TableResults = ({ branchComparison = BRANCH_COMPARISON.UPLIFT, analysisBasis = "enrollments", segment = "all", - isDesktop = false, referenceBranch, }: TableResultsProps) => { const { primaryOutcomes } = useOutcomes(experiment); - const resultsMetricsList = getResultMetrics( - primaryOutcomes, - isDesktop || - experiment.application === NimbusExperimentApplicationEnum.DESKTOP, - ); + const resultsMetricsList = getResultMetrics(primaryOutcomes); const { analysis: { metadata, overall }, sortedBranchNames, diff --git a/experimenter/experimenter/nimbus-ui/src/components/PageResults/TableResultsWeekly/index.tsx b/experimenter/experimenter/nimbus-ui/src/components/PageResults/TableResultsWeekly/index.tsx index a232fec1b0..aba7c25de2 100644 --- a/experimenter/experimenter/nimbus-ui/src/components/PageResults/TableResultsWeekly/index.tsx +++ b/experimenter/experimenter/nimbus-ui/src/components/PageResults/TableResultsWeekly/index.tsx @@ -13,9 +13,6 @@ import { BRANCH_COMPARISON, GENERAL_TIPS, HIGHLIGHTS_METRICS_LIST, - METRIC, - METRICS_TIPS, - METRIC_TO_GROUP, } from "src/lib/visualization/constants"; import { AnalysisBases, @@ -26,35 +23,13 @@ export type TableResultsWeeklyProps = { branchComparison?: BranchComparisonValues; analysisBasis?: AnalysisBases; segment?: string; - isDesktop?: boolean; referenceBranch: string; }; -const getHighlightMetrics = (isDesktop = false) => { - // Make a copy of `HIGHLIGHTS_METRICS_LIST` since we modify it. - if (isDesktop) { - const highlightMetricsList = [...HIGHLIGHTS_METRICS_LIST]; - return highlightMetricsList.map((highlightMetric) => { - if (highlightMetric.value === METRIC.DAYS_OF_USE) { - return { - value: METRIC.QUALIFIED_CUMULATIVE_DAYS_OF_USE, - name: "Qualified Cumulative Days of Use", - tooltip: METRICS_TIPS.QUALIFIED_CUMULATIVE_DAYS_OF_USE, - group: METRIC_TO_GROUP[METRIC.QUALIFIED_CUMULATIVE_DAYS_OF_USE], - }; - } - return highlightMetric; - }); - } - - return HIGHLIGHTS_METRICS_LIST; -}; - const TableResultsWeekly = ({ branchComparison = BRANCH_COMPARISON.UPLIFT, analysisBasis = "enrollments", segment = "all", - isDesktop = false, referenceBranch, }: TableResultsWeeklyProps) => { const { @@ -90,7 +65,7 @@ const TableResultsWeekly = ({
- {getHighlightMetrics(isDesktop).map((metric, index) => { + {HIGHLIGHTS_METRICS_LIST.map((metric, index) => { return (

( @@ -51,7 +49,6 @@ export const TableWithTabComparison = ({ )} @@ -74,7 +71,6 @@ export const TableWithTabComparison = ({ branchComparison={BRANCH_COMPARISON.ABSOLUTE} analysisBasis={analysisBasis} segment={segment} - isDesktop={isDesktop} referenceBranch={referenceBranch} /> diff --git a/experimenter/experimenter/nimbus-ui/src/components/PageResults/index.tsx b/experimenter/experimenter/nimbus-ui/src/components/PageResults/index.tsx index e4933874ed..c5658df95f 100644 --- a/experimenter/experimenter/nimbus-ui/src/components/PageResults/index.tsx +++ b/experimenter/experimenter/nimbus-ui/src/components/PageResults/index.tsx @@ -32,7 +32,6 @@ import { import { GROUP, METRIC_TYPE } from "src/lib/visualization/constants"; import { AnalysisBases, AnalysisError } from "src/lib/visualization/types"; import { getSortedBranchNames } from "src/lib/visualization/utils"; -import { NimbusExperimentApplicationEnum } from "src/types/globalTypes"; const PageResults: React.FunctionComponent = () => { const { experiment, analysis, useRedirectCondition, useAnalysisRequired } = @@ -463,10 +462,6 @@ const PageResults: React.FunctionComponent = () => { className="rounded-bottom mb-3 border-top-0" analysisBasis={selectedAnalysisBasis} segment={selectedSegment} - isDesktop={ - experiment.application === - NimbusExperimentApplicationEnum.DESKTOP - } referenceBranch={selectedReferenceBranch} /> )} @@ -480,10 +475,6 @@ const PageResults: React.FunctionComponent = () => { Table={TableResultsWeekly} analysisBasis={selectedAnalysisBasis} segment={selectedSegment} - isDesktop={ - experiment.application === - NimbusExperimentApplicationEnum.DESKTOP - } referenceBranch={selectedReferenceBranch} /> )} diff --git a/experimenter/experimenter/nimbus-ui/src/lib/visualization/constants.ts b/experimenter/experimenter/nimbus-ui/src/lib/visualization/constants.ts index 50c6535846..315d5e5bcf 100644 --- a/experimenter/experimenter/nimbus-ui/src/lib/visualization/constants.ts +++ b/experimenter/experimenter/nimbus-ui/src/lib/visualization/constants.ts @@ -11,6 +11,7 @@ export const METRICS_TIPS = { DAYS_OF_USE: "Average number of days each client sent a main ping", QUALIFIED_CUMULATIVE_DAYS_OF_USE: "Average number of days each client sent a main ping", + DAILY_ACTIVE_USERS: "Average number of client that sent a main ping per day", }; export const SEGMENT_TIPS = { @@ -63,9 +64,8 @@ export const SIGNIFICANCE = { export const METRIC = { RETENTION: "retained", SEARCH: "search_count", - DAYS_OF_USE: "days_of_use", + DAILY_ACTIVE_USERS: "client_level_daily_active_users_v2", USER_COUNT: "identity", - QUALIFIED_CUMULATIVE_DAYS_OF_USE: "qualified_cumulative_days_of_use", }; export const METRIC_TYPE = { @@ -138,11 +138,12 @@ const GROUPED_METRICS = [ "identity", "days_of_use", "qualified_cumulative_days_of_use", + "client_level_daily_active_users_v2", ], }, ]; -export const METRIC_TO_GROUP = GROUPED_METRICS.reduce((res, group) => { +const METRIC_TO_GROUP = GROUPED_METRICS.reduce((res, group) => { group.metrics.forEach((metric) => { res[metric] = group.name; }); @@ -165,10 +166,10 @@ export const HIGHLIGHTS_METRICS_LIST = [ group: METRIC_TO_GROUP[METRIC.SEARCH], }, { - value: METRIC.DAYS_OF_USE, - name: "Days of Use", - tooltip: METRICS_TIPS.DAYS_OF_USE, - group: METRIC_TO_GROUP[METRIC.DAYS_OF_USE], + value: METRIC.DAILY_ACTIVE_USERS, + name: "Daily Active Users", + tooltip: METRICS_TIPS.DAILY_ACTIVE_USERS, + group: METRIC_TO_GROUP[METRIC.DAILY_ACTIVE_USERS], }, ]; @@ -190,11 +191,11 @@ export const RESULTS_METRICS_LIST = [ group: METRIC_TO_GROUP[METRIC.SEARCH], }, { - value: METRIC.DAYS_OF_USE, - name: "Overall Mean Days of Use Per User", - tooltip: METRICS_TIPS.DAYS_OF_USE, + value: METRIC.DAILY_ACTIVE_USERS, + name: "Daily Active users", + tooltip: METRICS_TIPS.DAILY_ACTIVE_USERS, type: METRIC_TYPE.GUARDRAIL, - group: METRIC_TO_GROUP[METRIC.DAYS_OF_USE], + group: METRIC_TO_GROUP[METRIC.DAILY_ACTIVE_USERS], }, { value: METRIC.USER_COUNT, diff --git a/experimenter/experimenter/nimbus-ui/src/lib/visualization/mocks.tsx b/experimenter/experimenter/nimbus-ui/src/lib/visualization/mocks.tsx index f745722607..439c977721 100644 --- a/experimenter/experimenter/nimbus-ui/src/lib/visualization/mocks.tsx +++ b/experimenter/experimenter/nimbus-ui/src/lib/visualization/mocks.tsx @@ -1232,6 +1232,7 @@ export const mockAnalysis = (modifications = {}) => }, days_of_use: CONTROL_NEUTRAL, qualified_cumulative_days_of_use: CONTROL_NEUTRAL, + client_level_daily_active_users_v2: CONTROL_NEUTRAL, }, search_metrics: { search_count: { @@ -1648,6 +1649,7 @@ export const mockAnalysis = (modifications = {}) => feature_c: TREATMENT_NEUTRAL, days_of_use: TREATMENT_NEUTRAL, qualified_cumulative_days_of_use: TREATMENT_NEUTRAL, + client_level_daily_active_users_v2: TREATMENT_NEUTRAL, feature_d: { absolute: { first: { @@ -2136,6 +2138,7 @@ export const mockAnalysis = (modifications = {}) => }, days_of_use: CONTROL_NEUTRAL, qualified_cumulative_days_of_use: CONTROL_NEUTRAL, + client_level_daily_active_users_v2: CONTROL_NEUTRAL, }, search_metrics: { search_count: { @@ -2558,6 +2561,7 @@ export const mockAnalysis = (modifications = {}) => feature_c: TREATMENT_NEUTRAL, days_of_use: TREATMENT_NEUTRAL, qualified_cumulative_days_of_use: TREATMENT_NEUTRAL, + client_level_daily_active_users_v2: TREATMENT_NEUTRAL, feature_d: { absolute: { first: { @@ -3053,6 +3057,7 @@ export const mockAnalysisWithSegments = mockAnalysis({ }, days_of_use: CONTROL_NEUTRAL, qualified_cumulative_days_of_use: CONTROL_NEUTRAL, + client_level_daily_active_users_v2: CONTROL_NEUTRAL, }, search_metrics: { search_count: { @@ -3460,6 +3465,7 @@ export const mockAnalysisWithSegments = mockAnalysis({ feature_c: TREATMENT_NEUTRAL, days_of_use: TREATMENT_NEUTRAL, qualified_cumulative_days_of_use: TREATMENT_NEUTRAL, + client_level_daily_active_users_v2: TREATMENT_NEUTRAL, feature_d: { absolute: { first: { @@ -3940,6 +3946,7 @@ export const mockAnalysisWithSegments = mockAnalysis({ }, days_of_use: CONTROL_NEUTRAL, qualified_cumulative_days_of_use: CONTROL_NEUTRAL, + client_level_daily_active_users_v2: CONTROL_NEUTRAL, }, search_metrics: { search_count: { @@ -4362,6 +4369,7 @@ export const mockAnalysisWithSegments = mockAnalysis({ feature_c: TREATMENT_NEUTRAL, days_of_use: TREATMENT_NEUTRAL, qualified_cumulative_days_of_use: TREATMENT_NEUTRAL, + client_level_daily_active_users_v2: TREATMENT_NEUTRAL, feature_d: { absolute: { first: { @@ -4855,6 +4863,7 @@ export const mockAnalysisWithExposures = mockAnalysis({ }, days_of_use: CONTROL_NEUTRAL, qualified_cumulative_days_of_use: CONTROL_NEUTRAL, + client_level_daily_active_users_v2: CONTROL_NEUTRAL, }, search_metrics: { search_count: { @@ -5277,6 +5286,7 @@ export const mockAnalysisWithExposures = mockAnalysis({ feature_c: TREATMENT_NEUTRAL, days_of_use: TREATMENT_NEUTRAL, qualified_cumulative_days_of_use: TREATMENT_NEUTRAL, + client_level_daily_active_users_v2: TREATMENT_NEUTRAL, feature_d: { absolute: { first: { @@ -5765,6 +5775,7 @@ export const mockAnalysisWithExposures = mockAnalysis({ }, days_of_use: CONTROL_NEUTRAL, qualified_cumulative_days_of_use: CONTROL_NEUTRAL, + client_level_daily_active_users_v2: CONTROL_NEUTRAL, }, search_metrics: { search_count: { @@ -6187,6 +6198,7 @@ export const mockAnalysisWithExposures = mockAnalysis({ feature_c: TREATMENT_NEUTRAL, days_of_use: TREATMENT_NEUTRAL, qualified_cumulative_days_of_use: TREATMENT_NEUTRAL, + client_level_daily_active_users_v2: TREATMENT_NEUTRAL, feature_d: { absolute: { first: { @@ -7863,6 +7875,7 @@ export const mockAnalysisWithErrorsAndResults = (modifications = {}) => }, days_of_use: CONTROL_NEUTRAL, qualified_cumulative_days_of_use: CONTROL_NEUTRAL, + client_level_daily_active_users_v2: CONTROL_NEUTRAL, }, search_metrics: { search_count: { @@ -8285,6 +8298,7 @@ export const mockAnalysisWithErrorsAndResults = (modifications = {}) => feature_c: TREATMENT_NEUTRAL, days_of_use: TREATMENT_NEUTRAL, qualified_cumulative_days_of_use: TREATMENT_NEUTRAL, + client_level_daily_active_users_v2: TREATMENT_NEUTRAL, feature_d: { absolute: { first: { @@ -8735,6 +8749,7 @@ export const mockAnalysisWithErrorsAndResults = (modifications = {}) => }, days_of_use: CONTROL_NEUTRAL, qualified_cumulative_days_of_use: CONTROL_NEUTRAL, + client_level_daily_active_users_v2: CONTROL_NEUTRAL, }, search_metrics: { search_count: { @@ -9157,6 +9172,7 @@ export const mockAnalysisWithErrorsAndResults = (modifications = {}) => feature_c: TREATMENT_NEUTRAL, days_of_use: TREATMENT_NEUTRAL, qualified_cumulative_days_of_use: TREATMENT_NEUTRAL, + client_level_daily_active_users_v2: TREATMENT_NEUTRAL, feature_d: { absolute: { first: {