From a74e761a0f4ffb46c95fddb08155e072b8d03473 Mon Sep 17 00:00:00 2001 From: Liron Hamra Date: Thu, 4 May 2023 17:15:55 +0300 Subject: [PATCH 1/9] MON-1440 [Reference Comparison] --- .../components/AnalysisHeaderOptions.tsx | 58 ++++++++++++------- .../components/Analysis/analysis.constants.ts | 6 ++ .../src/helpers/context/AnalysisProvider.tsx | 2 +- 3 files changed, 43 insertions(+), 23 deletions(-) create mode 100644 frontend/src/components/Analysis/analysis.constants.ts diff --git a/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx b/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx index 201e98af5..1bc7ee66c 100644 --- a/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx +++ b/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx @@ -1,17 +1,17 @@ import React, { useState, useContext, useEffect } from 'react'; +import { MenuItem, SelectChangeEvent } from '@mui/material'; import dayjs from 'dayjs'; import { ModelManagmentSchema, useGetModelAutoFrequencyApiV1ModelsModelIdAutoFrequencyGet } from 'api/generated'; import { AnalysisContext, frequencyData } from 'helpers/context/AnalysisProvider'; - -import { Box, MenuItem, SelectChangeEvent } from '@mui/material'; +import { frequencyValues } from 'helpers/utils/frequency'; import { DateRange } from 'components/DateRange'; import { CustomStyledSelect } from 'components/Select/CustomStyledSelect'; -import { SwitchButton } from 'components/base/Button/SwitchButton'; import { StyledDivider } from '../AnalysisHeader.style'; -import { frequencyValues } from 'helpers/utils/frequency'; + +import { constants } from 'components/Analysis/analysis.constants'; interface AnalysisHeaderOptions { model: ModelManagmentSchema; @@ -22,14 +22,14 @@ const MAX_WINDOWS_COUNT = 31; // eslint-disable-next-line @typescript-eslint/no-unused-vars export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => { const { - compareWithPreviousPeriod, - setCompareWithPreviousPeriod, period, setPeriod, frequency, - setFrequency - // compareByReference, - // setCompareByReference + setFrequency, + compareByReference, + setCompareByReference, + compareWithPreviousPeriod, + setCompareWithPreviousPeriod } = useContext(AnalysisContext); const [minDate, setMinDate] = useState( @@ -39,6 +39,10 @@ export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => { model.latest_time && frequency ? dayjs.unix(model.latest_time + frequencyValues.DAY).toDate() : null ); + const periodComparison = constants.header.periodComparison; + const referenceComparison = constants.header.referenceComparison; + const comparisonDropdownVal = compareByReference ? referenceComparison : periodComparison; + useEffect(() => { if (frequency) { model.start_time && setMinDate(dayjs.unix(model.start_time).toDate()); @@ -123,6 +127,16 @@ export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => { } }; + const handleComparison = () => { + if (compareByReference) { + setCompareByReference(false); + setCompareWithPreviousPeriod(true); + } else if (compareWithPreviousPeriod) { + setCompareByReference(true); + setCompareWithPreviousPeriod(false); + } + }; + return ( <> {defaultFrequency && ( @@ -150,19 +164,19 @@ export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => { )} - - - {/* */} - + + + {referenceComparison} + + + {periodComparison} + + ); }; diff --git a/frontend/src/components/Analysis/analysis.constants.ts b/frontend/src/components/Analysis/analysis.constants.ts new file mode 100644 index 000000000..5b60ccbe5 --- /dev/null +++ b/frontend/src/components/Analysis/analysis.constants.ts @@ -0,0 +1,6 @@ +export const constants = { + header: { + referenceComparison: 'Compare by reference', + periodComparison: 'Compare with previous period' + } +}; diff --git a/frontend/src/helpers/context/AnalysisProvider.tsx b/frontend/src/helpers/context/AnalysisProvider.tsx index def27baca..9317172a3 100644 --- a/frontend/src/helpers/context/AnalysisProvider.tsx +++ b/frontend/src/helpers/context/AnalysisProvider.tsx @@ -149,7 +149,7 @@ export const AnalysisContext = createContext({ export const AnalysisProvider = ({ children }: AnalysisProviderProps) => { const [compareWithPreviousPeriod, setCompareWithPreviousPeriod] = useState(false); - const [compareByReference, setCompareByReference] = useState(false); + const [compareByReference, setCompareByReference] = useState(true); const [period, setPeriod] = useState<[Date, Date] | null>(null); From c9acbe5e25243e80696e866fc28df37ad98da1a9 Mon Sep 17 00:00:00 2001 From: Liron Hamra Date: Sun, 7 May 2023 11:16:42 +0300 Subject: [PATCH 2/9] noComparisonOption --- .../components/AnalysisHeaderOptions.tsx | 26 ++++++++++++++----- .../components/Analysis/analysis.constants.ts | 1 + .../src/helpers/context/AnalysisProvider.tsx | 2 +- 3 files changed, 22 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx b/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx index 1bc7ee66c..7f91722e0 100644 --- a/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx +++ b/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx @@ -41,7 +41,12 @@ export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => { const periodComparison = constants.header.periodComparison; const referenceComparison = constants.header.referenceComparison; - const comparisonDropdownVal = compareByReference ? referenceComparison : periodComparison; + const noComparison = constants.header.noComparison; + const comparisonDropdownVal = compareByReference + ? referenceComparison + : compareWithPreviousPeriod + ? periodComparison + : noComparison; useEffect(() => { if (frequency) { @@ -127,12 +132,18 @@ export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => { } }; - const handleComparison = () => { - if (compareByReference) { + const handleSelectChange = (event: any) => { + const selectedValue = event.target.value; + + if (selectedValue === referenceComparison) { + console.log(compareByReference); + setCompareByReference(true); + setCompareWithPreviousPeriod(false); + } else if (selectedValue === periodComparison) { setCompareByReference(false); setCompareWithPreviousPeriod(true); - } else if (compareWithPreviousPeriod) { - setCompareByReference(true); + } else { + setCompareByReference(false); setCompareWithPreviousPeriod(false); } }; @@ -168,8 +179,11 @@ export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => { sx={{ minWidth: '115px', marginRight: '12px' }} size="small" value={comparisonDropdownVal} - onChange={handleComparison} + onChange={e => handleSelectChange(e)} > + + {noComparison} + {referenceComparison} diff --git a/frontend/src/components/Analysis/analysis.constants.ts b/frontend/src/components/Analysis/analysis.constants.ts index 5b60ccbe5..30867d6ea 100644 --- a/frontend/src/components/Analysis/analysis.constants.ts +++ b/frontend/src/components/Analysis/analysis.constants.ts @@ -1,5 +1,6 @@ export const constants = { header: { + noComparison: 'No comparison', referenceComparison: 'Compare by reference', periodComparison: 'Compare with previous period' } diff --git a/frontend/src/helpers/context/AnalysisProvider.tsx b/frontend/src/helpers/context/AnalysisProvider.tsx index 9317172a3..def27baca 100644 --- a/frontend/src/helpers/context/AnalysisProvider.tsx +++ b/frontend/src/helpers/context/AnalysisProvider.tsx @@ -149,7 +149,7 @@ export const AnalysisContext = createContext({ export const AnalysisProvider = ({ children }: AnalysisProviderProps) => { const [compareWithPreviousPeriod, setCompareWithPreviousPeriod] = useState(false); - const [compareByReference, setCompareByReference] = useState(true); + const [compareByReference, setCompareByReference] = useState(false); const [period, setPeriod] = useState<[Date, Date] | null>(null); From ceca1db320862b5da2a07581c930c65676888596 Mon Sep 17 00:00:00 2001 From: Liron Hamra Date: Sun, 7 May 2023 11:33:01 +0300 Subject: [PATCH 3/9] cypress --- cypress/e2e/analysis_screen_advanced.cy.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/cypress/e2e/analysis_screen_advanced.cy.ts b/cypress/e2e/analysis_screen_advanced.cy.ts index e90f31df3..12d3cc2a0 100644 --- a/cypress/e2e/analysis_screen_advanced.cy.ts +++ b/cypress/e2e/analysis_screen_advanced.cy.ts @@ -10,9 +10,7 @@ describe("Analysis screen drilldown", () => { }) .then(() => { cy.visit("/analysis"); - cy.contains("span", "Compare with previous period").click({ - force: true, - }); + cy.contains("span", "No comparison"); // cy.get('input[value="11/05/2022 - 11/08/2022"]') // .parent() // .first() From d703d2f5b4816358005631222334b4e7ccafb967 Mon Sep 17 00:00:00 2001 From: Liron Hamra Date: Mon, 8 May 2023 08:51:14 +0300 Subject: [PATCH 4/9] SelectChangeEvent --- .../AnalysisHeader/components/AnalysisHeaderOptions.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx b/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx index 7f91722e0..11f47936d 100644 --- a/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx +++ b/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx @@ -132,11 +132,10 @@ export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => { } }; - const handleSelectChange = (event: any) => { + const handleSelectChange = (event: SelectChangeEvent) => { const selectedValue = event.target.value; if (selectedValue === referenceComparison) { - console.log(compareByReference); setCompareByReference(true); setCompareWithPreviousPeriod(false); } else if (selectedValue === periodComparison) { @@ -179,7 +178,7 @@ export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => { sx={{ minWidth: '115px', marginRight: '12px' }} size="small" value={comparisonDropdownVal} - onChange={e => handleSelectChange(e)} + onChange={e => handleSelectChange(e as SelectChangeEvent)} > {noComparison} From 8874e4f5a96da7757ec7e91bb64f6173ecf9da74 Mon Sep 17 00:00:00 2001 From: Liron Hamra Date: Mon, 8 May 2023 09:15:33 +0300 Subject: [PATCH 5/9] cypress-fix --- cypress/e2e/analysis_screen_advanced.cy.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/e2e/analysis_screen_advanced.cy.ts b/cypress/e2e/analysis_screen_advanced.cy.ts index 12d3cc2a0..a13af60f7 100644 --- a/cypress/e2e/analysis_screen_advanced.cy.ts +++ b/cypress/e2e/analysis_screen_advanced.cy.ts @@ -10,7 +10,7 @@ describe("Analysis screen drilldown", () => { }) .then(() => { cy.visit("/analysis"); - cy.contains("span", "No comparison"); + cy.contains("div", "No comparison"); // cy.get('input[value="11/05/2022 - 11/08/2022"]') // .parent() // .first() From 076fe2df8e48e898d1f7421a983a01159c536ce6 Mon Sep 17 00:00:00 2001 From: Liron Hamra Date: Mon, 8 May 2023 09:20:37 +0300 Subject: [PATCH 6/9] arr map --- .../components/AnalysisHeaderOptions.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx b/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx index 11f47936d..446b530c6 100644 --- a/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx +++ b/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx @@ -180,15 +180,11 @@ export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => { value={comparisonDropdownVal} onChange={e => handleSelectChange(e as SelectChangeEvent)} > - - {noComparison} - - - {referenceComparison} - - - {periodComparison} - + {[noComparison, referenceComparison, periodComparison].map((itemVal: string) => ( + + {itemVal} + + ))} ); From 7ff77e129cdbe7884fb99019ce7fd0b85d2958ea Mon Sep 17 00:00:00 2001 From: Liron Hamra Date: Mon, 8 May 2023 12:56:49 +0300 Subject: [PATCH 7/9] Analysis screen drilldown --- cypress/e2e/analysis_screen_advanced.cy.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/cypress/e2e/analysis_screen_advanced.cy.ts b/cypress/e2e/analysis_screen_advanced.cy.ts index a13af60f7..18f1fad72 100644 --- a/cypress/e2e/analysis_screen_advanced.cy.ts +++ b/cypress/e2e/analysis_screen_advanced.cy.ts @@ -11,6 +11,9 @@ describe("Analysis screen drilldown", () => { .then(() => { cy.visit("/analysis"); cy.contains("div", "No comparison"); + cy.contains("li", "Compare with previous period").click({ + force: true, + }); // cy.get('input[value="11/05/2022 - 11/08/2022"]') // .parent() // .first() From 9123337052d109a6fb053ac46f087202016aca5c Mon Sep 17 00:00:00 2001 From: Liron Hamra Date: Mon, 8 May 2023 14:07:57 +0300 Subject: [PATCH 8/9] comments --- .../components/AnalysisHeaderOptions.tsx | 39 +++++++------------ 1 file changed, 13 insertions(+), 26 deletions(-) diff --git a/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx b/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx index 446b530c6..8da95d850 100644 --- a/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx +++ b/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx @@ -18,19 +18,15 @@ interface AnalysisHeaderOptions { } const MAX_WINDOWS_COUNT = 31; +const periodComparison = constants.header.periodComparison; +const referenceComparison = constants.header.referenceComparison; +const noComparison = constants.header.noComparison; +const comparisonDropdownValues = [noComparison, referenceComparison, periodComparison]; // eslint-disable-next-line @typescript-eslint/no-unused-vars export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => { - const { - period, - setPeriod, - frequency, - setFrequency, - compareByReference, - setCompareByReference, - compareWithPreviousPeriod, - setCompareWithPreviousPeriod - } = useContext(AnalysisContext); + const { period, setPeriod, frequency, setFrequency, setCompareByReference, setCompareWithPreviousPeriod } = + useContext(AnalysisContext); const [minDate, setMinDate] = useState( model.start_time && frequency ? dayjs.unix(model.start_time).toDate() : null @@ -39,14 +35,7 @@ export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => { model.latest_time && frequency ? dayjs.unix(model.latest_time + frequencyValues.DAY).toDate() : null ); - const periodComparison = constants.header.periodComparison; - const referenceComparison = constants.header.referenceComparison; - const noComparison = constants.header.noComparison; - const comparisonDropdownVal = compareByReference - ? referenceComparison - : compareWithPreviousPeriod - ? periodComparison - : noComparison; + const [comparisonDropdownVal, setComparisonDropdownVal] = useState(noComparison); useEffect(() => { if (frequency) { @@ -132,20 +121,18 @@ export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => { } }; - const handleSelectChange = (event: SelectChangeEvent) => { - const selectedValue = event.target.value; - - if (selectedValue === referenceComparison) { + useEffect(() => { + if (comparisonDropdownVal === referenceComparison) { setCompareByReference(true); setCompareWithPreviousPeriod(false); - } else if (selectedValue === periodComparison) { + } else if (comparisonDropdownVal === periodComparison) { setCompareByReference(false); setCompareWithPreviousPeriod(true); } else { setCompareByReference(false); setCompareWithPreviousPeriod(false); } - }; + }, [comparisonDropdownVal]); return ( <> @@ -178,9 +165,9 @@ export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => { sx={{ minWidth: '115px', marginRight: '12px' }} size="small" value={comparisonDropdownVal} - onChange={e => handleSelectChange(e as SelectChangeEvent)} + onChange={e => setComparisonDropdownVal(e.target.value as string)} > - {[noComparison, referenceComparison, periodComparison].map((itemVal: string) => ( + {comparisonDropdownValues.map((itemVal: string) => ( {itemVal} From ff1edb97cf101cb729d1a2572e21aa8be6700676 Mon Sep 17 00:00:00 2001 From: Liron Hamra Date: Mon, 8 May 2023 14:57:32 +0300 Subject: [PATCH 9/9] force-click --- cypress/e2e/analysis_screen_advanced.cy.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/analysis_screen_advanced.cy.ts b/cypress/e2e/analysis_screen_advanced.cy.ts index 18f1fad72..8532684ba 100644 --- a/cypress/e2e/analysis_screen_advanced.cy.ts +++ b/cypress/e2e/analysis_screen_advanced.cy.ts @@ -10,7 +10,9 @@ describe("Analysis screen drilldown", () => { }) .then(() => { cy.visit("/analysis"); - cy.contains("div", "No comparison"); + cy.contains("div", "No comparison").click({ + force: true, + }); cy.contains("li", "Compare with previous period").click({ force: true, });