🐛 filter only selected scenarios

src/app/app.component.html

@@ -42,12 +42,12 @@
           <factor-year-graph [region]="region"></factor-year-graph>
         </ng-container>
         <h2>Comparison of different scenarios</h2>
-        <select [(ngModel)]="selectedRegion">
+        <select [(ngModel)]="selectedRegion" (ngModelChange)="yearGraphService.redrawGraphs({region: selectedRegion})">
           <ng-container *ngFor="let region of sdmDihService.regions">
             <option [ngValue]="region">{{region}}</option>
           </ng-container>
         </select>
-        <select [(ngModel)]="selectedDomain">
+        <select [(ngModel)]="selectedDomain" (ngModelChange)="yearGraphService.redrawGraphs({domain: selectedDomain})">
           <ng-container *ngFor="let domain of sdmDihService.domains">
             <option [ngValue]="domain">{{domain}}</option>
           </ng-container>

src/app/app.component.ts

@@ -8,6 +8,7 @@ import {Tile, Vector as VectorLayer} from 'ol/layer';
 import {HsConfig, HsEventBusService, HsToastService} from 'hslayers-ng';
 
 import {SdmDihService} from './sdm-dih.service';
+import {YearGraphService} from './discs-chart/year-graph.service';
 
 @Component({
   selector: 'application-root',
@@ -24,7 +25,8 @@ export class HslayersAppComponent {
     public hsConfig: HsConfig /* public properties are visible in the template */,
     private hsEventBusService: HsEventBusService /* private properties are only visible from within this component class */,
     private hsToastService: HsToastService,
-    public sdmDihService: SdmDihService
+    public sdmDihService: SdmDihService,
+    public yearGraphService: YearGraphService
   ) {
     /* Define and update the HsConfig configuration object */
     this.hsConfig.update({

src/app/discs-chart/disc.component.ts

@@ -42,7 +42,13 @@ export class DiscComponent implements OnInit, AfterViewInit {
       }
       this.drawGraph();
     });
-    this.yearGraphService.graphRefreshes.subscribe(() => {
+    this.yearGraphService.graphRefreshes.subscribe(({region, domain}) => {
+      if (region) {
+        this.region = region;
+      }
+      if (domain) {
+        this.domain = domain;
+      }
       this.updateGraph();
     });
   }

src/app/discs-chart/scenario-factor-year-graph/scenario-factor-year-graph.component.html

@@ -15,7 +15,7 @@
     </div>
   </div>
 
-  <div *ngFor="let scenario of sdmDihService.scenarios">
+  <div *ngFor="let scenario of filteredScenarios">
     <h4>{{scenario}} scenario</h4>
     <div class="d-flex">
       <div *ngFor="let factor of sdmDihService.factors">

src/app/discs-chart/scenario-factor-year-graph/scenario-factor-year-graph.component.ts

@@ -1,5 +1,6 @@
 import {Component, Input, OnInit} from '@angular/core';
 
+import domain2scenario from '../../../assets/data/domain-scenario.json';
 import {SdmDihService} from '../../sdm-dih.service';
 import {YearGraphService} from '../year-graph.service';
 
@@ -11,23 +12,35 @@ import {YearGraphService} from '../year-graph.service';
 export class ScenarioFactorYearGraphComponent implements OnInit {
   @Input() region: string;
   @Input() domain: string;
+  filteredScenarios = [];
+
   constructor(
     public sdmDihService: SdmDihService,
     public yearGraphService: YearGraphService
   ) {}
 
   ngOnInit() {
+    this.filterScenarios();
     this.sdmDihService.dataLoads.subscribe((loaded) => {
       if (!loaded) {
         return;
       }
     });
-    this.yearGraphService.graphRefreshes.subscribe(() => {
-      //unused
+    this.yearGraphService.graphRefreshes.subscribe(({domain}) => {
+      if (domain) {
+        this.domain = domain;
+      }
+      this.filterScenarios();
+    });
+  }
+
+  filterScenarios(): void {
+    this.filteredScenarios = this.sdmDihService.scenarios.filter((scenario) => {
+      return domain2scenario[this.domain].includes(scenario);
     });
   }
 
-  animateGraphs() {
+  /*animateGraphs() {
     const MILLISECONDS_TO_ANIMATE = 100 as const;
     let i = 1;
     for (const year of this.sdmDihService.years) {
@@ -37,9 +50,9 @@ export class ScenarioFactorYearGraphComponent implements OnInit {
       }, MILLISECONDS_TO_ANIMATE * i);
       i++;
     }
-  }
+  }*/
 
-  nextYear() {
+  /*nextYear() {
     const selectedYearIndex = this.sdmDihService.years.findIndex(
       (val) => val == this.yearGraphService.selectedYear
     );
@@ -47,9 +60,9 @@ export class ScenarioFactorYearGraphComponent implements OnInit {
       this.sdmDihService.years[selectedYearIndex + 1] ??
       this.yearGraphService.selectedYear;
     this.yearGraphService.redrawGraphs();
-  }
+  }*/
 
-  prevYear() {
+  /*prevYear() {
     const selectedYearIndex = this.sdmDihService.years.findIndex(
       (val) => val == this.yearGraphService.selectedYear
     );
@@ -57,5 +70,5 @@ export class ScenarioFactorYearGraphComponent implements OnInit {
       this.sdmDihService.years[selectedYearIndex - 1] ??
       this.yearGraphService.selectedYear;
     this.yearGraphService.redrawGraphs();
-  }
+  }*/
 }

src/app/discs-chart/scenario-year-graph/scenario-year-graph.component.html

@@ -10,11 +10,10 @@
   </select-->
   <h4>Aggregated RAI</h4>
   <div class="d-flex">
-      <disc [region]="region" show="factor"></disc>
-      <div *ngFor="let scenario of sdmDihService.scenarios">
-        <disc [region]="region" [scenario]="scenario" show="factor"></disc>
-      </div>
+    <disc [region]="region" show="factor"></disc>
+    <div *ngFor="let scenario of filteredScenarios">
+      <disc [region]="region" [scenario]="scenario" show="factor"></disc>
+    </div>
   </div>
 </div>
 <ng-template #loading> Loading data... </ng-template>
-

src/app/discs-chart/scenario-year-graph/scenario-year-graph.component.ts

@@ -1,5 +1,6 @@
 import {Component, Input, OnInit} from '@angular/core';
 
+import domain2scenario from '../../../assets/data/domain-scenario.json';
 import {SdmDihService} from '../../sdm-dih.service';
 import {YearGraphService} from '../year-graph.service';
 
@@ -11,23 +12,35 @@ import {YearGraphService} from '../year-graph.service';
 export class ScenarioYearGraphComponent implements OnInit {
   @Input() region: string;
   @Input() domain: string;
+  filteredScenarios = [];
+
   constructor(
     public sdmDihService: SdmDihService,
     public yearGraphService: YearGraphService
   ) {}
 
   ngOnInit() {
+    this.filterScenarios();
     this.sdmDihService.dataLoads.subscribe((loaded) => {
       if (!loaded) {
         return;
       }
     });
-    this.yearGraphService.graphRefreshes.subscribe(() => {
-      //unused
+    this.yearGraphService.graphRefreshes.subscribe(({domain}) => {
+      if (domain) {
+        this.domain = domain;
+      }
+      this.filterScenarios();
+    });
+  }
+
+  filterScenarios(): void {
+    this.filteredScenarios = this.sdmDihService.scenarios.filter((scenario) => {
+      return domain2scenario[this.domain].includes(scenario);
     });
   }
 
-  animateGraphs() {
+  /*animateGraphs() {
     const MILLISECONDS_TO_ANIMATE = 100 as const;
     let i = 1;
     for (const year of this.sdmDihService.years) {
@@ -37,9 +50,9 @@ export class ScenarioYearGraphComponent implements OnInit {
       }, MILLISECONDS_TO_ANIMATE * i);
       i++;
     }
-  }
+  }*/
 
-  nextYear() {
+  /*nextYear() {
     const selectedYearIndex = this.sdmDihService.years.findIndex(
       (val) => val == this.yearGraphService.selectedYear
     );
@@ -47,9 +60,9 @@ export class ScenarioYearGraphComponent implements OnInit {
       this.sdmDihService.years[selectedYearIndex + 1] ??
       this.yearGraphService.selectedYear;
     this.yearGraphService.redrawGraphs();
-  }
+  }*/
 
-  prevYear() {
+  /*prevYear() {
     const selectedYearIndex = this.sdmDihService.years.findIndex(
       (val) => val == this.yearGraphService.selectedYear
     );
@@ -57,5 +70,5 @@ export class ScenarioYearGraphComponent implements OnInit {
       this.sdmDihService.years[selectedYearIndex - 1] ??
       this.yearGraphService.selectedYear;
     this.yearGraphService.redrawGraphs();
-  }
+  }*/
 }

src/app/discs-chart/year-graph.service.ts

@@ -5,7 +5,7 @@ import {SdmDihService} from '../sdm-dih.service';
 
 @Injectable({providedIn: 'root'})
 export class YearGraphService {
-  graphRefreshes: Subject<void> = new Subject();
+  graphRefreshes: Subject<{region?: string; domain?: string}> = new Subject();
   selectedYear = '';
   constructor(public sdmDihService: SdmDihService) {
     this.sdmDihService.dataLoads.subscribe((loaded) => {
@@ -47,7 +47,7 @@ export class YearGraphService {
     return 0;
   }
 
-  redrawGraphs() {
-    this.graphRefreshes.next();
+  redrawGraphs({region, domain}: {region?; domain?} = {}) {
+    this.graphRefreshes.next({region, domain});
   }
 }

src/assets/data/domain-scenario.json

@@ -0,0 +1,6 @@
+{
+    "baseline": ["baseline"],
+    "INFR": ["INFR mix", "INFR Focus Broadband", "INFR Focus Roads"],
+    "AGRI": ["AGRI Focus AKIS", "AGRI Focus Eco-Schemes", "AGRI Mix"],
+    "ENTRP": ["ENTRP High", "ENTRP Medium", "ENTRP Low"]
+}