From 6443142b6d31cb54dfb83fa225dfcdabec31f01a Mon Sep 17 00:00:00 2001 From: Nischita Nannapaneni Date: Tue, 24 Sep 2024 19:05:30 -0500 Subject: [PATCH 1/3] added code for the case that only meter is selected, the option selected should be shown as selected by default, without the user needing to click it. --- src/client/app/components/ThreeDPillComponent.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/client/app/components/ThreeDPillComponent.tsx b/src/client/app/components/ThreeDPillComponent.tsx index a5c7b8ae2..9c946b310 100644 --- a/src/client/app/components/ThreeDPillComponent.tsx +++ b/src/client/app/components/ThreeDPillComponent.tsx @@ -3,6 +3,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ import * as React from 'react'; +import { useEffect } from 'react'; import { Badge } from 'reactstrap'; import { selectGraphState, selectThreeDState, updateThreeDMeterOrGroupInfo } from '../redux/slices/graphSlice'; import { selectGroupDataById } from '../redux/api/groupsApi'; @@ -40,6 +41,17 @@ export default function ThreeDPillComponent() { return { meterOrGroupID: groupID, isDisabled: isDisabled, meterOrGroup: MeterOrGroup.groups } as MeterOrGroupPill; }); + // when there is only one meter, it must be selected as a default (there is no other option) + useEffect(() => { + if (meterPillData.length === 1) { + const singleMeter = meterPillData[0]; + dispatch(updateThreeDMeterOrGroupInfo({ + meterOrGroupID: singleMeter.meterOrGroupID, + meterOrGroup: singleMeter.meterOrGroup + })); + } + }, [meterPillData, dispatch]); + // When a Pill Badge is clicked update threeD state to indicate new meter or group to render. const handlePillClick = (pillData: MeterOrGroupPill) => dispatch( updateThreeDMeterOrGroupInfo({ @@ -48,6 +60,7 @@ export default function ThreeDPillComponent() { }) ); + // Method Generates Reactstrap Pill Badges for selected meters or groups const populatePills = (meterOrGroupPillData: MeterOrGroupPill[]) => { return meterOrGroupPillData.map(pillData => { From d4387c1f82d7c53f8baee748a5b1080976c31f9b Mon Sep 17 00:00:00 2001 From: Nischita Nannapaneni Date: Sun, 29 Sep 2024 23:27:46 -0500 Subject: [PATCH 2/3] generalized the function of the default selection effect so that it applies to not only meter but also group --- src/client/app/components/ThreeDPillComponent.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/client/app/components/ThreeDPillComponent.tsx b/src/client/app/components/ThreeDPillComponent.tsx index 9c946b310..dd450a3f6 100644 --- a/src/client/app/components/ThreeDPillComponent.tsx +++ b/src/client/app/components/ThreeDPillComponent.tsx @@ -41,16 +41,18 @@ export default function ThreeDPillComponent() { return { meterOrGroupID: groupID, isDisabled: isDisabled, meterOrGroup: MeterOrGroup.groups } as MeterOrGroupPill; }); - // when there is only one meter, it must be selected as a default (there is no other option) + // when there is only one choice, it must be selected as a default (there is no other option) useEffect(() => { - if (meterPillData.length === 1) { - const singleMeter = meterPillData[0]; + const combinedPillData = [...meterPillData, ...groupPillData]; + + if (combinedPillData.length === 1) { + const singlePill = combinedPillData[0]; dispatch(updateThreeDMeterOrGroupInfo({ - meterOrGroupID: singleMeter.meterOrGroupID, - meterOrGroup: singleMeter.meterOrGroup + meterOrGroupID: singlePill.meterOrGroupID, + meterOrGroup: singlePill.meterOrGroup })); } - }, [meterPillData, dispatch]); + }, [meterPillData, groupPillData, dispatch]); // When a Pill Badge is clicked update threeD state to indicate new meter or group to render. const handlePillClick = (pillData: MeterOrGroupPill) => dispatch( From ac7c5287310669ab7d31c3c95bbf706fe72b036e Mon Sep 17 00:00:00 2001 From: Nischita Nannapaneni Date: Sat, 5 Oct 2024 14:46:27 -0500 Subject: [PATCH 3/3] slight edits made for better formatting --- src/client/app/components/ThreeDPillComponent.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/client/app/components/ThreeDPillComponent.tsx b/src/client/app/components/ThreeDPillComponent.tsx index dd450a3f6..cc6d3ca40 100644 --- a/src/client/app/components/ThreeDPillComponent.tsx +++ b/src/client/app/components/ThreeDPillComponent.tsx @@ -52,7 +52,7 @@ export default function ThreeDPillComponent() { meterOrGroup: singlePill.meterOrGroup })); } - }, [meterPillData, groupPillData, dispatch]); + }, [meterPillData, groupPillData]); // When a Pill Badge is clicked update threeD state to indicate new meter or group to render. const handlePillClick = (pillData: MeterOrGroupPill) => dispatch( @@ -62,7 +62,6 @@ export default function ThreeDPillComponent() { }) ); - // Method Generates Reactstrap Pill Badges for selected meters or groups const populatePills = (meterOrGroupPillData: MeterOrGroupPill[]) => { return meterOrGroupPillData.map(pillData => {