diff --git a/src/client/app/components/ThreeDPillComponent.tsx b/src/client/app/components/ThreeDPillComponent.tsx index 86a6d6cc6..a5c7b8ae2 100644 --- a/src/client/app/components/ThreeDPillComponent.tsx +++ b/src/client/app/components/ThreeDPillComponent.tsx @@ -41,12 +41,12 @@ export default function ThreeDPillComponent() { }); // When a Pill Badge is clicked update threeD state to indicate new meter or group to render. - const handlePillClick = (pillData: MeterOrGroupPill) => dispatch(updateThreeDMeterOrGroupInfo( - { + const handlePillClick = (pillData: MeterOrGroupPill) => dispatch( + updateThreeDMeterOrGroupInfo({ meterOrGroupID: pillData.meterOrGroupID, meterOrGroup: pillData.meterOrGroup - } - )); + }) + ); // Method Generates Reactstrap Pill Badges for selected meters or groups const populatePills = (meterOrGroupPillData: MeterOrGroupPill[]) => { diff --git a/src/client/app/redux/slices/graphSlice.ts b/src/client/app/redux/slices/graphSlice.ts index eab9e7e12..c808b152c 100644 --- a/src/client/app/redux/slices/graphSlice.ts +++ b/src/client/app/redux/slices/graphSlice.ts @@ -134,15 +134,24 @@ export const graphSlice = createSlice({ updateThreeDReadingInterval: (state, action: PayloadAction) => { state.current.threeD.readingInterval = action.payload; }, - updateThreeDMeterOrGroupInfo: (state, action: PayloadAction<{ meterOrGroupID: number | undefined, meterOrGroup: MeterOrGroup }>) => { - state.current.threeD.meterOrGroupID = action.payload.meterOrGroupID; - state.current.threeD.meterOrGroup = action.payload.meterOrGroup; - }, - updateThreeDMeterOrGroupID: (state, action: PayloadAction) => { - state.current.threeD.meterOrGroupID = action.payload; + updateThreeDMeterOrGroupID: (state, action: PayloadAction) => { + if (state.current.threeD.meterOrGroupID !== action.payload) { + state.current.threeD.meterOrGroupID = action.payload; + } }, updateThreeDMeterOrGroup: (state, action: PayloadAction) => { - state.current.threeD.meterOrGroup = action.payload; + if (state.current.threeD.meterOrGroup !== action.payload) { + state.current.threeD.meterOrGroup = action.payload; + } + }, + updateThreeDMeterOrGroupInfo: (state, action: PayloadAction<{ meterOrGroupID: number | undefined, meterOrGroup: MeterOrGroup }>) => { + const { updateThreeDMeterOrGroupID, updateThreeDMeterOrGroup } = graphSlice.caseReducers; + updateThreeDMeterOrGroupID(state, graphSlice.actions.updateThreeDMeterOrGroupID(action.payload.meterOrGroupID)); + updateThreeDMeterOrGroup(state, graphSlice.actions.updateThreeDMeterOrGroup(action.payload.meterOrGroup)); + if (!state.current.queryTimeInterval.getIsBounded()) { + // Set the query time interval to 6 moths back when not bounded for 3D + state.current.queryTimeInterval = new TimeInterval(moment.utc().subtract(6, 'months'), moment.utc()); + } }, updateSelectedMetersOrGroups: ({ current }, action: PayloadAction<{ newMetersOrGroups: number[], meta: ActionMeta }>) => { // This reducer handles the addition and subtraction values for both the meter and group select components.