fix(4as): exposure assessment sidebar expand and check at the same time

src/app/features/noah-playground/components/risk-assessment-group/risk-assessment-group.component.html

@@ -1,5 +1,5 @@
 <div class="p-5 w-full bg-sidebar shadow-md hover:shodow-lg rounded-lg mt-6">
-  <div class="flex cursor-pointer select-none">
+  <div class="flex cursor-pointer select-none" (click)="toggleExpanded($event)">
     <label class="inline-flex items-center checkbox">
       <input
         type="checkbox"
@@ -123,7 +123,10 @@
       </button>
     </div>
   </div>
-  <div [ngClass]="(expanded$ | async) ? ' pt-5 ' : ' hidden '">
+  <div
+    *ngIf="isExpanded"
+    [ngClass]="(expanded$ | async) ? ' pt-5 ' : ' hidden '"
+  >
     <hr class="pb-4" />
     <div class="pl-2">
       <div class="items-center">

src/app/features/noah-playground/components/risk-assessment-group/risk-assessment-group.component.ts

@@ -24,7 +24,7 @@ export class RiskAssessmentGroupComponent implements OnInit {
   expanded$: Observable<boolean>;
   riskAssessmentPopuShown$: Observable<boolean>;
   shown$: Observable<boolean>;
-
+  expandedValue: boolean = false;
   initialRainOpacityValue: number = 80;
   initialPopuOpacityValue: number = 80;
 
@@ -35,6 +35,10 @@ export class RiskAssessmentGroupComponent implements OnInit {
 
   popuLegend = false;
 
+  get isExpanded(): boolean {
+    return this.expandedValue;
+  }
+
   constructor(
     private pgService: NoahPlaygroundService,
     private modalService: ModalService
@@ -84,21 +88,34 @@ export class RiskAssessmentGroupComponent implements OnInit {
   toggleExpanded(event: Event) {
     event.stopPropagation();
     event.stopImmediatePropagation();
-    this.pgService.toggleRiskAssessmentGroupProperty('expanded');
+    this.expandedValue = !this.expandedValue;
+    this.pgService.toggleRiskAssessmentGroupProperty(
+      'expanded',
+      this.expandedValue
+    );
   }
 
   toggleShown(event: Event) {
     event.stopPropagation();
     event.stopImmediatePropagation();
     this.checkedShown = (event.target as HTMLInputElement).checked;
-    this.pgService.toggleRiskAssessmentGroupProperty('shown');
-    this.pgService.toggleRiskAssessmentGroupProperty('expanded');
     this.updateButtonEnabled();
-
+    this.expandedValue = true;
     if (!this.checkedShown) {
       this.modalService.closeBtnRiskAssessment();
       this.popuLegend = false;
       this.pgService.toggleAffectedPopulationVisibilityFalse();
+      this.pgService.toggleRiskAssessmentGroupProperty('shown', false);
+      this.pgService.toggleRiskAssessmentGroupProperty(
+        'expanded',
+        (this.expandedValue = false)
+      );
+    } else {
+      this.pgService.toggleRiskAssessmentGroupProperty('shown', true);
+      this.pgService.toggleRiskAssessmentGroupProperty(
+        'expanded',
+        this.expandedValue
+      );
     }
   }
 

src/app/features/noah-playground/services/noah-playground.service.ts

@@ -521,13 +521,17 @@ export class NoahPlaygroundService {
     this.store.patch({ volcanoes }, `Volcanoes ${property}, ${!currentValue}`);
   }
 
-  toggleRiskAssessmentGroupProperty(property: 'expanded' | 'shown') {
+  toggleRiskAssessmentGroupProperty(
+    property: 'expanded' | 'shown',
+    value: boolean
+  ) {
     const riskAssessment: RiskAssessmentGroupState = {
       ...this.store.state.riskAssessment,
     };
 
     const currentValue = riskAssessment[property];
-    riskAssessment[property] = !currentValue;
+    //riskAssessment[property] = !currentValue; remain this if ever we have changes
+    riskAssessment[property] = value;
     this.store.patch(
       { riskAssessment },
       `Risk Assessment ${property}, ${!currentValue}`