Scenario project areas (#1699)

* using project area tiles

* show project areas

* cleanup and fix test

* remove dependencies

src/interface/src/app/app-routing.module.ts

@@ -118,6 +118,7 @@ const routes: Routes = [
         canActivate: [AuthGuard, createFeatureGuard('treatments')],
         resolve: {
           treatmentId: numberResolver('treatmentId', ''),
+          scenarioId: numberResolver('scenarioId', ''),
         },
         loadChildren: () =>
           import('./treatments/treatments.module').then(

src/interface/src/app/treatments/map-project-areas/map-project-areas.component.html

@@ -0,0 +1,37 @@
+<mgl-vector-source
+  id="scenarioProjectAreas"
+  [tiles]="[vectorLayerUrl]"></mgl-vector-source>
+
+<mgl-layer
+  id="map-project-areas-line"
+  type="line"
+  source="scenarioProjectAreas"
+  [sourceLayer]="layerName"
+  [paint]="{
+    'line-color': '#333',
+    'line-width': 2
+  }"></mgl-layer>
+
+<mgl-layer
+  id="map-project-areas-fill"
+  type="fill"
+  source="scenarioProjectAreas"
+  [sourceLayer]="layerName"
+  [paint]="paint"></mgl-layer>
+
+<mgl-layer
+  id="map-project-areas-labels"
+  type="symbol"
+  source="scenarioProjectAreas"
+  [sourceLayer]="layerName"
+  [layout]="{
+    'text-field': ['get', 'rank'],
+    'text-size': 14,
+    'text-anchor': 'center',
+    'text-justify': 'center'
+  }"
+  [paint]="{
+    'text-color': '#000',
+    'text-halo-color': '#fff',
+    'text-halo-width': 2
+  }"></mgl-layer>

src/interface/src/app/treatments/map-project-areas/map-project-areas.component.spec.ts

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MapProjectAreasComponent } from './map-project-areas.component';
+import { MockDeclarations } from 'ng-mocks';
+import {
+  LayerComponent,
+  VectorSourceComponent,
+} from '@maplibre/ngx-maplibre-gl';
+
+describe('MapProjectAreasComponent', () => {
+  let component: MapProjectAreasComponent;
+  let fixture: ComponentFixture<MapProjectAreasComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MapProjectAreasComponent],
+      declarations: MockDeclarations(VectorSourceComponent, LayerComponent),
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MapProjectAreasComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/interface/src/app/treatments/map-project-areas/map-project-areas.component.ts

@@ -0,0 +1,56 @@
+import { Component, Input } from '@angular/core';
+import {
+  FeatureComponent,
+  GeoJSONSourceComponent,
+  LayerComponent,
+  VectorSourceComponent,
+} from '@maplibre/ngx-maplibre-gl';
+import { getColorForProjectPosition } from '../../plan/plan-helpers';
+import { LayerSpecification, Map as MapLibreMap } from 'maplibre-gl';
+import { environment } from '../../../environments/environment';
+
+@Component({
+  selector: 'app-map-project-areas',
+  standalone: true,
+  imports: [
+    FeatureComponent,
+    GeoJSONSourceComponent,
+    LayerComponent,
+    VectorSourceComponent,
+  ],
+  templateUrl: './map-project-areas.component.html',
+  styleUrl: './map-project-areas.component.scss',
+})
+export class MapProjectAreasComponent {
+  @Input() scenarioId!: number;
+  @Input() mapLibreMap!: MapLibreMap;
+
+  readonly layerName = 'project_areas_by_scenario';
+  readonly tilesUrl =
+    environment.martin_server + 'project_areas_by_scenario/{z}/{x}/{y}';
+
+  constructor() {}
+
+  get vectorLayerUrl() {
+    return this.tilesUrl + `?scenario_id=${this.scenarioId}`;
+  }
+
+  paint: LayerSpecification['paint'] = {
+    'fill-outline-color': '#000',
+    'fill-color': this.getFillColors() as any,
+    'fill-opacity': 0.5,
+  };
+
+  getFillColors() {
+    const defaultColor = '#00000050';
+    const matchExpression: (number | string | string[])[] = [
+      'match',
+      ['get', 'rank'],
+    ];
+    for (let i = 1; i < 11; i++) {
+      matchExpression.push(i.toString(), getColorForProjectPosition(i));
+    }
+    matchExpression.push(defaultColor);
+    return matchExpression;
+  }
+}

src/interface/src/app/treatments/map-rectangle/map-rectangle.component.html

@@ -1,4 +1,4 @@
-<mgl-geojson-source id="rectangle-source">
+<mgl-geojson-source [id]="sourceName">
   <mgl-feature [geometry]="rectangleGeometry"></mgl-feature>
 </mgl-geojson-source>
 <mgl-layer

src/interface/src/app/treatments/map-stands/map-stands.component.html

@@ -8,15 +8,15 @@
     'line-color': 'black',
     'line-width': 3
   }"
-  sourceLayer="project_area_outline"></mgl-layer>
+  sourceLayer="project_area_aggregate"></mgl-layer>
 
 <mgl-layer
   [id]="layers.stands"
   type="fill"
   source="stands"
   [paint]="paint"
   (layerMouseDown)="clickOnLayer($event)"
-  sourceLayer="treatment_plan_prescriptions"></mgl-layer>
+  sourceLayer="stands_by_tx_plan"></mgl-layer>
 
 <mgl-layer
   [id]="layers.selectedStands"
@@ -26,7 +26,7 @@
     'fill-color': '#007dff',
     'fill-opacity': 0.2
   }"
-  sourceLayer="treatment_plan_prescriptions"
+  sourceLayer="stands_by_tx_plan"
   [filter]="[
     'in',
     ['get', 'id'],

src/interface/src/app/treatments/map-stands/map-stands.component.ts

@@ -32,9 +32,10 @@ export class MapStandsComponent implements OnChanges {
   selectedStands$ = this.mapStandsService.selectedStands$;
   private initialSelectedStands: number[] = [];
 
+  // TODO project_area_aggregate only applies when looking at a specific project area
   readonly tilesUrl =
     environment.martin_server +
-    'project_area_outline,treatment_plan_prescriptions/{z}/{x}/{y}';
+    'project_area_aggregate,stands_by_tx_plan/{z}/{x}/{y}';
 
   readonly layers = {
     outline: 'outline-layer',

src/interface/src/app/treatments/treatment-map/treatment-map.component.html

@@ -27,4 +27,9 @@
     [mapLibreMap]="mapLibreMap"
     [start]="start ? start.lngLat : null"
     [end]="end ? end.lngLat : null"></app-map-rectangle>
+
+  <app-map-project-areas
+    *ngIf="scenarioId"
+    [mapLibreMap]="mapLibreMap"
+    [scenarioId]="scenarioId"></app-map-project-areas>
 </mgl-map>

src/interface/src/app/treatments/treatment-map/treatment-map.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { JsonPipe, NgForOf } from '@angular/common';
+import { JsonPipe, NgForOf, NgIf } from '@angular/common';
 import {
   DraggableDirective,
   FeatureComponent,
@@ -15,6 +15,7 @@ import { MapRectangleComponent } from '../map-rectangle/map-rectangle.component'
 import { SelectedStandsState } from './selected-stands.state';
 import { MapControlsComponent } from '../map-controls/map-controls.component';
 import { environment } from '../../../environments/environment';
+import { MapProjectAreasComponent } from '../map-project-areas/map-project-areas.component';
 
 @Component({
   selector: 'app-treatment-map',
@@ -31,6 +32,8 @@ import { environment } from '../../../environments/environment';
     MapStandsComponent,
     MapRectangleComponent,
     MapControlsComponent,
+    MapProjectAreasComponent,
+    NgIf,
   ],
   providers: [SelectedStandsState],
   templateUrl: './treatment-map.component.html',
@@ -43,6 +46,7 @@ export class TreatmentMapComponent {
   // TODO: should we keep using prop drilling here? Consider using a provider service to hold these values
   @Input() projectAreaId: number | null = null;
   @Input() treatmentPlanId = 0;
+  @Input() scenarioId: number | null = null;
 
   treatedStands: { id: number; assigment: string }[] = [];
 

src/interface/src/app/treatments/treatment-overview/treatment-overview.component.html

@@ -1,4 +1,6 @@
 <app-treatment-summary
   [treatmentPlanId]="treatmentPlanId"></app-treatment-summary>
 
-<app-treatment-map [treatmentPlanId]="treatmentPlanId"></app-treatment-map>
+<app-treatment-map
+  [treatmentPlanId]="treatmentPlanId"
+  [scenarioId]="scenarioId"></app-treatment-map>

src/interface/src/app/treatments/treatment-overview/treatment-overview.component.ts

@@ -16,6 +16,7 @@ import { TreatmentSummaryComponent } from '../treatment-summary/treatment-summar
 export class TreatmentOverviewComponent implements OnInit {
   treatmentPlanId: number = this.route.snapshot.data['treatmentId'];
   treatmentPlan: TreatmentPlan | null = null;
+  scenarioId: number = this.route.snapshot.data['scenarioId'];
 
   constructor(
     private treatmentsService: TreatmentsService,

src/interface/src/app/types/scenario.types.ts

@@ -41,7 +41,8 @@ export interface ScenarioResult {
   status: ScenarioResultStatus;
   completed_at: string;
   result: {
-    features: FeatureCollection[];
+    // this is the FeatureCollection[]
+    features: FeatureCollection[]; // TODO this is actually Features[]
     type: string;
   };
 }