From 995a7bac10979425843241bb4db209ec32dfa886 Mon Sep 17 00:00:00 2001
From: hudson-newey <neweyh@qut.edu.au>
Date: Thu, 2 Feb 2023 07:02:43 +1000
Subject: [PATCH 1/4] added more maps

Fixes: #2027
---
 src/app/components/home/home.component.html   | 15 ++++
 src/app/components/home/home.module.ts        |  7 +-
 .../site-map/site-map.component.spec.ts       |  2 +-
 .../components/site-map/site-map.component.ts | 69 +++++++++++++++----
 .../pages/details/details.component.spec.ts   |  2 +-
 .../pages/details/details.component.ts        |  2 +-
 .../projects/pages/list/list.component.ts     |  6 ++
 .../pages/details/details.component.spec.ts   |  4 +-
 .../pages/details/details.component.ts        |  2 +-
 9 files changed, 87 insertions(+), 22 deletions(-)

diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
index fbf08fe13..0a49ffa7e 100644
--- a/src/app/components/home/home.component.html
+++ b/src/app/components/home/home.component.html
@@ -150,3 +150,18 @@ <h2>View Some {{ viewMoreLink.label | titlecase }}s</h2>
     </ng-container>
   </div>
 </section>
+
+<!-- Live an interactive map -->
+<section id="interactiveMap" class="pb-5 pt-5 border-top border-top text-bg-light">
+  <div class="container">
+    <h2>View the Live Site Map</h2>
+    
+    <ng-container *ngIf="models$ | withLoading | async as models">
+      <baw-loading *ngIf="models.loading" [size]="lg"></baw-loading>
+
+      <div style="width: 100%; height: 600px;">
+        <baw-site-map *ngIf="!models.loading" [unstructuredLocations]="models.value"></baw-site-map>
+      </div>
+    </ng-container>
+  </div>
+</section>
diff --git a/src/app/components/home/home.module.ts b/src/app/components/home/home.module.ts
index bc580cf1f..9b9592186 100644
--- a/src/app/components/home/home.module.ts
+++ b/src/app/components/home/home.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from "@angular/core";
 import { RouterModule } from "@angular/router";
 import { getRouteConfigForPage } from "@helpers/page/pageRouting";
 import { SharedModule } from "@shared/shared.module";
+import { ProjectsModule } from "../projects/projects.module";
 import { HomeComponent } from "./home.component";
 import { homeRoute } from "./home.menus";
 
@@ -9,8 +10,8 @@ const components = [HomeComponent];
 const routes = homeRoute.compileRoutes(getRouteConfigForPage);
 
 @NgModule({
-  declarations: components,
-  imports: [SharedModule, RouterModule.forChild(routes)],
-  exports: [RouterModule, ...components],
+    declarations: components,
+    exports: [RouterModule, ...components],
+    imports: [SharedModule, RouterModule.forChild(routes), ProjectsModule]
 })
 export class HomeModule {}
diff --git a/src/app/components/projects/components/site-map/site-map.component.spec.ts b/src/app/components/projects/components/site-map/site-map.component.spec.ts
index 7fe6a6f14..e4a5870ba 100644
--- a/src/app/components/projects/components/site-map/site-map.component.spec.ts
+++ b/src/app/components/projects/components/site-map/site-map.component.spec.ts
@@ -41,7 +41,7 @@ describe("SiteMapComponent", () => {
   function setup(project: Project, region?: Region) {
     spec = createComponent({
       detectChanges: false,
-      props: { project, region },
+      props: { projects: project, regions: region },
     });
     api = spec.inject(SitesService);
   }
diff --git a/src/app/components/projects/components/site-map/site-map.component.ts b/src/app/components/projects/components/site-map/site-map.component.ts
index d2a9dfc9c..25ad534d6 100644
--- a/src/app/components/projects/components/site-map/site-map.component.ts
+++ b/src/app/components/projects/components/site-map/site-map.component.ts
@@ -20,8 +20,9 @@ import { switchMap, takeUntil } from "rxjs/operators";
 export class SiteMapComponent extends withUnsubscribe() implements OnInit {
   // TODO Implement system to change colour of selected sites
   @Input() public selected: List<Site>;
-  @Input() public project: Project;
-  @Input() public region: Region;
+  @Input() public unstructuredLocations: List<Project | Region> | undefined;
+  @Input() public projects: Project[] | undefined;
+  @Input() public regions: Region[] | undefined;
   public markers: List<MapMarkerOptions> = List([]);
 
   public constructor(private sitesApi: SitesService) {
@@ -29,11 +30,51 @@ export class SiteMapComponent extends withUnsubscribe() implements OnInit {
   }
 
   public ngOnInit(): void {
+    // sometimes an unstructured array of locations can be passed to the map component
+    // therefore, it is necessary that the data is structured before
+    if (this.unstructuredLocations) {
+      const locationsArray = this.unstructuredLocations.toArray();
+
+      locationsArray.forEach((location) => {
+        if (location["type"] === "Region") {
+          if (!this.regions) {
+            this.regions = [];
+          }
+
+          this.regions.push(location as Region);
+        } else {
+          if (!this.projects) {
+            this.projects = [];
+          }
+
+          this.projects.push(location as Project);
+        }
+      });
+    }
+
+    // a list of regions will only ever have one project, while a project will never have a region
+    // therefore, we can decide how to iterate through a list of items on the predicate if there is a region
+    if (this.regions) {
+      this.regions.forEach((region) => {
+        this.addSingleLocationMarkers(this.projects[0], region);
+      });
+    } else {
+      this.projects.forEach((project) => {
+        this.addSingleLocationMarkers(project, undefined);
+      });
+    }
+  }
+
+  /**
+   * Fetches the markers and adds the markers to the `markers` list for a single location
+   * e.g. A project or region
+   */
+  private addSingleLocationMarkers(project: Project, region: Region): void {
     const filters: Filters<ISite> = { paging: { page: 1 } };
 
-    this.getFilter(filters, this.project, this.region)
+    this.getFilter(filters, project, region)
       .pipe(
-        switchMap((models) => this.getMarkers(models)),
+        switchMap((models) => this.getMarkers(models, project, region)),
         takeUntil(this.unsubscribe)
       )
       .subscribe({
@@ -44,10 +85,10 @@ export class SiteMapComponent extends withUnsubscribe() implements OnInit {
 
   private getFilter(
     filters: Filters<ISite>,
-    project: Project,
-    region?: Region
-  ) {
-    return this.region
+    project: Project | undefined,
+    region?: Region | undefined
+  ): Observable<Site[]> {
+    return this.regions
       ? this.sitesApi.filterByRegion(filters, project, region)
       : this.sitesApi.filter(filters, project);
   }
@@ -55,15 +96,17 @@ export class SiteMapComponent extends withUnsubscribe() implements OnInit {
   /**
    * Retrieve map markers from api
    */
-  private getMarkers(sites: Site[]) {
+  private getMarkers(
+    sites: Site[],
+    project: Project,
+    region: Region
+  ): Observable<Site[]> {
     const numPages = sites?.[0]?.getMetadata()?.paging?.maxPage || 1;
     const observables: Observable<Site[]>[] = [];
 
     // Can skip first page because initial filter produces the results
     for (let page = 2; page <= numPages; page++) {
-      observables.push(
-        this.getFilter({ paging: { page } }, this.project, this.region)
-      );
+      observables.push(this.getFilter({ paging: { page } }, project, region));
     }
 
     this.pushMarkers(sites);
@@ -73,7 +116,7 @@ export class SiteMapComponent extends withUnsubscribe() implements OnInit {
   /**
    * Push new sites to markers list
    */
-  private pushMarkers(sites: Site[]) {
+  private pushMarkers(sites: Site[]): void {
     this.markers = this.markers.concat(
       sanitizeMapMarkers(sites.map((site) => site.getMapMarker()))
     );
diff --git a/src/app/components/projects/pages/details/details.component.spec.ts b/src/app/components/projects/pages/details/details.component.spec.ts
index c8319c17e..e2cc3421b 100644
--- a/src/app/components/projects/pages/details/details.component.spec.ts
+++ b/src/app/components/projects/pages/details/details.component.spec.ts
@@ -237,7 +237,7 @@ describe("ProjectDetailsComponent", () => {
       );
       spectator.detectChanges();
       await awaitChanges(promise);
-      expect(getMap().project).toEqual(defaultProject);
+      expect(getMap().projects).toEqual(defaultProject);
     });
   });
 
diff --git a/src/app/components/projects/pages/details/details.component.ts b/src/app/components/projects/pages/details/details.component.ts
index 8dd909db7..79fa13f3f 100644
--- a/src/app/components/projects/pages/details/details.component.ts
+++ b/src/app/components/projects/pages/details/details.component.ts
@@ -92,7 +92,7 @@ const projectKey = "project";
       <ul id="model-grid" class="list-group">
         <!-- Google Maps -->
         <div *ngIf="hasSites || hasRegions || loading" class="item map">
-          <baw-site-map [project]="project"></baw-site-map>
+          <baw-site-map [projects]="[project]"></baw-site-map>
         </div>
 
         <!-- Regions -->
diff --git a/src/app/components/projects/pages/list/list.component.ts b/src/app/components/projects/pages/list/list.component.ts
index 7a8307082..1c661444c 100644
--- a/src/app/components/projects/pages/list/list.component.ts
+++ b/src/app/components/projects/pages/list/list.component.ts
@@ -24,6 +24,12 @@ export const projectsMenuItemActions = [
   selector: "baw-projects-list",
   template: `
     <ng-container *ngIf="!error">
+      <ng-container *ngIf="!loading && models.size > 0;">
+        <div style="width: 100%; height: 500px;">
+          <baw-site-map [projects]="models.toArray()"></baw-site-map>
+        </div>
+      </ng-container>
+
       <baw-debounce-input
         label="Filter"
         placeholder="Filter Projects"
diff --git a/src/app/components/regions/pages/details/details.component.spec.ts b/src/app/components/regions/pages/details/details.component.spec.ts
index aa2aef3da..e7f758b17 100644
--- a/src/app/components/regions/pages/details/details.component.spec.ts
+++ b/src/app/components/regions/pages/details/details.component.spec.ts
@@ -159,7 +159,7 @@ describe("RegionDetailsComponent", () => {
       spectator.detectChanges();
       await promise;
       spectator.detectChanges();
-      expect(getMap().project).toEqual(defaultProject);
+      expect(getMap().projects).toEqual(defaultProject);
     });
 
     it("should provide region to maps component", async () => {
@@ -168,7 +168,7 @@ describe("RegionDetailsComponent", () => {
       spectator.detectChanges();
       await promise;
       spectator.detectChanges();
-      expect(getMap().region).toEqual(defaultRegion);
+      expect(getMap().regions).toEqual(defaultRegion);
     });
   });
 
diff --git a/src/app/components/regions/pages/details/details.component.ts b/src/app/components/regions/pages/details/details.component.ts
index b5a5701c1..63b998bcd 100644
--- a/src/app/components/regions/pages/details/details.component.ts
+++ b/src/app/components/regions/pages/details/details.component.ts
@@ -78,7 +78,7 @@ const regionKey = "region";
       <ul id="model-grid" class="list-group">
         <!-- Google Maps -->
         <div *ngIf="hasSites()" class="item map">
-          <baw-site-map [project]="project" [region]="region"></baw-site-map>
+          <baw-site-map [projects]="[project]" [regions]="[region]"></baw-site-map>
         </div>
 
         <!-- Sites -->

From 5cbfb11467de3285c94e19c7a0dfc19242506a07 Mon Sep 17 00:00:00 2001
From: hudson-newey <neweyh@qut.edu.au>
Date: Thu, 2 Feb 2023 10:09:45 +1000
Subject: [PATCH 2/4] Fixed homepage map bug & added map to regions list

---
 src/app/components/home/home.component.html   | 18 ++++++----
 src/app/components/home/home.component.ts     | 36 +++++++++++++++++++
 .../regions/pages/list/list.component.ts      |  6 ++++
 3 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
index 0a49ffa7e..27e747c13 100644
--- a/src/app/components/home/home.component.html
+++ b/src/app/components/home/home.component.html
@@ -152,15 +152,21 @@ <h2>View Some {{ viewMoreLink.label | titlecase }}s</h2>
 </section>
 
 <!-- Live an interactive map -->
-<section id="interactiveMap" class="pb-5 pt-5 border-top border-top text-bg-light">
+<section
+  id="interactiveMap"
+  class="pb-5 pt-5 border-top border-top text-bg-light"
+>
   <div class="container">
     <h2>View the Live Site Map</h2>
-    
-    <ng-container *ngIf="models$ | withLoading | async as models">
-      <baw-loading *ngIf="models.loading" [size]="lg"></baw-loading>
 
-      <div style="width: 100%; height: 600px;">
-        <baw-site-map *ngIf="!models.loading" [unstructuredLocations]="models.value"></baw-site-map>
+    <ng-container *ngIf="allSites$ | withLoading | async as sites">
+      <baw-loading *ngIf="sites.loading" [size]="lg"></baw-loading>
+
+      <div style="width: 100%; height: 600px">
+        <baw-site-map
+          *ngIf="!sites.loading && sites.value.size > 0"
+          [unstructuredLocations]="sites.value"
+        ></baw-site-map>
       </div>
     </ng-container>
   </div>
diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
index e408ec2dc..beea1ea9d 100644
--- a/src/app/components/home/home.component.ts
+++ b/src/app/components/home/home.component.ts
@@ -33,6 +33,7 @@ class HomeComponent extends PageComponent implements OnInit {
   };
   public viewMoreLink: { label: string; link: StrongRoute };
   public models$: Observable<List<Project | Region>>;
+  public allSites$: Observable<List<Project | Region>>;
   public sourceRepo: string;
 
   public constructor(
@@ -81,6 +82,9 @@ class HomeComponent extends PageComponent implements OnInit {
       map((models) => List<Project | Region>(models)),
       takeUntil(this.unsubscribe)
     );
+
+    // to render the "live site map" at the bottom of the home page, the home component has to have knowledge of all the site locations
+    this.fetchAllSiteLocations();
   }
 
   public calculateSvgTextYPos(index: number) {
@@ -117,6 +121,38 @@ class HomeComponent extends PageComponent implements OnInit {
 
     return `${xPos} ${yPos} ${width} ${height}`;
   }
+
+  /**
+   * The home component must have knowledge on all site locations for the overview map
+   */
+  public fetchAllSiteLocations(): Observable<List<Project | Region>> {
+    const settings = this.config.settings;
+
+    let pageNumber = 1;
+    // Get the first page of points. This will also provide information on the max page length to search through
+    let maxPageNumber = 1;
+
+    while (pageNumber <= maxPageNumber) {
+      const filter = { paging: { page: pageNumber } };
+
+      const sites: Observable<Region[] | Project[]> = settings.hideProjects
+        ? this.regionApi.filter(filter)
+        : this.projectApi.filter(filter);
+
+      this.allSites$ = sites.pipe(
+        map((models) => List<Project | Region>(models)),
+        takeUntil(this.unsubscribe)
+      );
+
+      // find the max page number from the metadata
+      this.allSites$
+        .pipe(takeUntil(this.unsubscribe))
+        .subscribe((site) => maxPageNumber = site.toArray().shift().getMetadata()?.paging?.maxPage);
+      pageNumber++;
+    }
+
+    return this.allSites$;
+  }
 }
 
 HomeComponent.linkToRoute({
diff --git a/src/app/components/regions/pages/list/list.component.ts b/src/app/components/regions/pages/list/list.component.ts
index 1888710a7..a265fca8b 100644
--- a/src/app/components/regions/pages/list/list.component.ts
+++ b/src/app/components/regions/pages/list/list.component.ts
@@ -22,6 +22,12 @@ export const regionsMenuItemActions = [
   selector: "baw-regions",
   template: `
     <ng-container *ngIf="!error">
+      <ng-container *ngIf="!loading && models.size > 0;">
+        <div style="width: 100%; height: 500px;">
+          <baw-site-map [regions]="models.toArray()"></baw-site-map>
+        </div>
+      </ng-container>
+
       <baw-debounce-input
         label="Filter"
         placeholder="Filter Sites"

From b6c8663f33189a34ad595d477f2b2b1920da1928 Mon Sep 17 00:00:00 2001
From: hudson-newey <neweyh@qut.edu.au>
Date: Fri, 3 Feb 2023 16:10:26 +1000
Subject: [PATCH 3/4] added basic unit tests and improved code quality

---
 src/app/components/home/home.component.html   |  5 +-
 .../components/home/home.component.spec.ts    | 27 +++++++--
 src/app/components/home/home.component.ts     | 10 +++-
 .../site-map/site-map.component.spec.ts       |  8 +--
 .../components/site-map/site-map.component.ts | 55 ++++---------------
 .../pages/details/details.component.spec.ts   |  2 +-
 .../pages/list/list.component.spec.ts         |  9 +++
 .../projects/pages/list/list.component.ts     |  2 +-
 .../pages/details/details.component.spec.ts   |  4 +-
 .../regions/pages/list/list.component.spec.ts | 11 ++++
 .../regions/pages/list/list.component.ts      |  2 +-
 .../components/shared/map/map.component.ts    |  2 +-
 12 files changed, 75 insertions(+), 62 deletions(-)

diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
index 27e747c13..c0a0b9577 100644
--- a/src/app/components/home/home.component.html
+++ b/src/app/components/home/home.component.html
@@ -162,10 +162,11 @@ <h2>View the Live Site Map</h2>
     <ng-container *ngIf="allSites$ | withLoading | async as sites">
       <baw-loading *ngIf="sites.loading" [size]="lg"></baw-loading>
 
-      <div style="width: 100%; height: 600px">
+      <div style="width: 100%; height: 24em;">
         <baw-site-map
           *ngIf="!sites.loading && sites.value.size > 0"
-          [unstructuredLocations]="sites.value"
+          [projects]="projects(sites.value).toArray()"
+          [regions]="regions(sites.value).toArray()"
         ></baw-site-map>
       </div>
     </ng-container>
diff --git a/src/app/components/home/home.component.spec.ts b/src/app/components/home/home.component.spec.ts
index 221680256..eef853fe3 100644
--- a/src/app/components/home/home.component.spec.ts
+++ b/src/app/components/home/home.component.spec.ts
@@ -28,7 +28,9 @@ import { generateProject } from "@test/fakes/Project";
 import { generateRegion } from "@test/fakes/Region";
 import { interceptFilterApiRequest } from "@test/helpers/general";
 import { MockComponent } from "ng-mocks";
-import { BehaviorSubject } from "rxjs";
+import { BehaviorSubject, of } from "rxjs";
+import { MapComponent } from "@shared/map/map.component";
+import { List } from "immutable";
 import { HomeComponent } from "./home.component";
 
 describe("HomeComponent", () => {
@@ -37,9 +39,14 @@ describe("HomeComponent", () => {
   let cmsService: SpyObject<CmsService>;
   let config: ConfigService;
   let spec: Spectator<HomeComponent>;
+
   const createComponent = createComponentFactory({
     component: HomeComponent,
-    declarations: [CardsComponent, MockComponent(CardComponent)],
+    declarations: [
+      CardsComponent,
+      MockComponent(MapComponent),
+      MockComponent(CardComponent),
+    ],
     imports: [
       MockBawApiModule,
       MockConfigModule,
@@ -112,12 +119,20 @@ describe("HomeComponent", () => {
     cmsService.get.and.callFake(() => new BehaviorSubject("cms content"));
   }
 
-  beforeEach(() => {
+  function setup() {
     spec = createComponent({ detectChanges: false });
     projectApi = spec.inject(ProjectsService);
     regionApi = spec.inject(ShallowRegionsService);
     config = spec.inject(ConfigService);
-  });
+
+    const mockProjectList = List<Project | Region>([]);
+    spyOn(spec.component, "fetchAllSiteLocations").and.callFake(() => of(mockProjectList));
+    spec.component.models$ = of(mockProjectList);
+    spec.component.allSites$ = of(mockProjectList);
+
+  }
+
+  beforeEach(() => setup());
 
   // TODO Re-enable once cms is setup
   /* assertCms<HomeComponent>(async () => {
@@ -215,5 +230,9 @@ describe("HomeComponent", () => {
         expect(button).toHaveStrongRoute(test.link);
       });
     });
+
+    it("should create live map", () => {
+      expect(spec.query("#interactiveMap")).toExist();
+    });
   });
 });
diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
index beea1ea9d..c3147e8df 100644
--- a/src/app/components/home/home.component.ts
+++ b/src/app/components/home/home.component.ts
@@ -147,12 +147,20 @@ class HomeComponent extends PageComponent implements OnInit {
       // find the max page number from the metadata
       this.allSites$
         .pipe(takeUntil(this.unsubscribe))
-        .subscribe((site) => maxPageNumber = site.toArray().shift().getMetadata()?.paging?.maxPage);
+        .subscribe((site) => maxPageNumber = site.toArray()?.shift()?.getMetadata()?.paging?.maxPage);
       pageNumber++;
     }
 
     return this.allSites$;
   }
+
+  public projects(sites: List<Project | Region>): List<Project> {
+    return sites?.filter((location) => location.kind === "Project") as List<Project>;
+  }
+
+  public regions(sites: List<Project | Region>): List<Region> {
+    return sites?.filter((location) => location.kind === "Region") as List<Region>;
+  }
 }
 
 HomeComponent.linkToRoute({
diff --git a/src/app/components/projects/components/site-map/site-map.component.spec.ts b/src/app/components/projects/components/site-map/site-map.component.spec.ts
index e4a5870ba..b5103027e 100644
--- a/src/app/components/projects/components/site-map/site-map.component.spec.ts
+++ b/src/app/components/projects/components/site-map/site-map.component.spec.ts
@@ -41,7 +41,7 @@ describe("SiteMapComponent", () => {
   function setup(project: Project, region?: Region) {
     spec = createComponent({
       detectChanges: false,
-      props: { projects: project, regions: region },
+      props: { projects: [project], regions: [region] },
     });
     api = spec.inject(SitesService);
   }
@@ -90,10 +90,9 @@ describe("SiteMapComponent", () => {
   function interceptApiRequest(
     responses: Errorable<Site[]>[],
     expectations?: ((filter: Filters<ISite>, project: Project) => void)[],
-    hasRegion?: boolean
   ): Promise<void>[] {
     return interceptRepeatApiRequests<ISite, Site[]>(
-      hasRegion ? api.filterByRegion : api.filter,
+      api.filterByRegion,
       responses,
       expectations
     );
@@ -216,8 +215,7 @@ describe("SiteMapComponent", () => {
       const promise = Promise.all(
         interceptApiRequest(
           sites,
-          [assertFilter(1, defaultProject, defaultRegion)],
-          true
+          [assertFilter(1, defaultProject, defaultRegion)]
         )
       );
 
diff --git a/src/app/components/projects/components/site-map/site-map.component.ts b/src/app/components/projects/components/site-map/site-map.component.ts
index 25ad534d6..2dff4c6fd 100644
--- a/src/app/components/projects/components/site-map/site-map.component.ts
+++ b/src/app/components/projects/components/site-map/site-map.component.ts
@@ -20,9 +20,8 @@ import { switchMap, takeUntil } from "rxjs/operators";
 export class SiteMapComponent extends withUnsubscribe() implements OnInit {
   // TODO Implement system to change colour of selected sites
   @Input() public selected: List<Site>;
-  @Input() public unstructuredLocations: List<Project | Region> | undefined;
-  @Input() public projects: Project[] | undefined;
-  @Input() public regions: Region[] | undefined;
+  @Input() public projects: Project[];
+  @Input() public regions: Region[];
   public markers: List<MapMarkerOptions> = List([]);
 
   public constructor(private sitesApi: SitesService) {
@@ -30,46 +29,14 @@ export class SiteMapComponent extends withUnsubscribe() implements OnInit {
   }
 
   public ngOnInit(): void {
-    // sometimes an unstructured array of locations can be passed to the map component
-    // therefore, it is necessary that the data is structured before
-    if (this.unstructuredLocations) {
-      const locationsArray = this.unstructuredLocations.toArray();
-
-      locationsArray.forEach((location) => {
-        if (location["type"] === "Region") {
-          if (!this.regions) {
-            this.regions = [];
-          }
-
-          this.regions.push(location as Region);
-        } else {
-          if (!this.projects) {
-            this.projects = [];
-          }
-
-          this.projects.push(location as Project);
-        }
-      });
-    }
-
-    // a list of regions will only ever have one project, while a project will never have a region
-    // therefore, we can decide how to iterate through a list of items on the predicate if there is a region
-    if (this.regions) {
-      this.regions.forEach((region) => {
-        this.addSingleLocationMarkers(this.projects[0], region);
-      });
-    } else {
-      this.projects.forEach((project) => {
-        this.addSingleLocationMarkers(project, undefined);
-      });
-    }
+    this.regions?.forEach((region) => this.addSingleLocationMarkers(this.projects.pop(), region));
+    this.projects?.forEach((project) => this.addSingleLocationMarkers(project));
   }
 
   /**
-   * Fetches the markers and adds the markers to the `markers` list for a single location
-   * e.g. A project or region
+   * Fetches the markers for a project or region and adds the markers to the `markers` list for a single location
    */
-  private addSingleLocationMarkers(project: Project, region: Region): void {
+  private addSingleLocationMarkers(project?: Project, region?: Region): void {
     const filters: Filters<ISite> = { paging: { page: 1 } };
 
     this.getFilter(filters, project, region)
@@ -85,12 +52,12 @@ export class SiteMapComponent extends withUnsubscribe() implements OnInit {
 
   private getFilter(
     filters: Filters<ISite>,
-    project: Project | undefined,
-    region?: Region | undefined
+    project: Project,
+    region?: Region
   ): Observable<Site[]> {
-    return this.regions
-      ? this.sitesApi.filterByRegion(filters, project, region)
-      : this.sitesApi.filter(filters, project);
+    // since the region parameter is optional, if a region is not specified, it will default to undefined
+    // and will have the same result as `siteApi.filter()`
+    return this.sitesApi.filterByRegion(filters, project, region)
   }
 
   /**
diff --git a/src/app/components/projects/pages/details/details.component.spec.ts b/src/app/components/projects/pages/details/details.component.spec.ts
index e2cc3421b..c8c44a780 100644
--- a/src/app/components/projects/pages/details/details.component.spec.ts
+++ b/src/app/components/projects/pages/details/details.component.spec.ts
@@ -237,7 +237,7 @@ describe("ProjectDetailsComponent", () => {
       );
       spectator.detectChanges();
       await awaitChanges(promise);
-      expect(getMap().projects).toEqual(defaultProject);
+      expect(getMap().projects).toEqual([defaultProject]);
     });
   });
 
diff --git a/src/app/components/projects/pages/list/list.component.spec.ts b/src/app/components/projects/pages/list/list.component.spec.ts
index 87af54442..a937ab366 100644
--- a/src/app/components/projects/pages/list/list.component.spec.ts
+++ b/src/app/components/projects/pages/list/list.component.spec.ts
@@ -21,6 +21,7 @@ import { nStepObservable } from "@test/helpers/general";
 import { assertErrorHandler } from "@test/helpers/html";
 import { MockComponent } from "ng-mocks";
 import { Subject } from "rxjs";
+import { SiteMapComponent } from "@components/projects/components/site-map/site-map.component";
 import { ListComponent } from "./list.component";
 
 const mockCardsComponent = MockComponent(CardsComponent);
@@ -41,6 +42,7 @@ describe("ProjectsListComponent", () => {
         },
       ],
     ],
+    declarations: [MockComponent(SiteMapComponent)],
     imports: [SharedModule, RouterTestingModule, MockBawApiModule],
   });
 
@@ -195,4 +197,11 @@ describe("ProjectsListComponent", () => {
       expect(spec.component.onFilter).toHaveBeenCalled();
     });
   });
+
+  it("should display a baw-map", async () => {
+    const projects = generateProjects(1);
+    await handleApiRequest(projects);
+
+    expect(spec.query(SiteMapComponent)).toExist();
+  });
 });
diff --git a/src/app/components/projects/pages/list/list.component.ts b/src/app/components/projects/pages/list/list.component.ts
index 1c661444c..5ffdd0e0f 100644
--- a/src/app/components/projects/pages/list/list.component.ts
+++ b/src/app/components/projects/pages/list/list.component.ts
@@ -25,7 +25,7 @@ export const projectsMenuItemActions = [
   template: `
     <ng-container *ngIf="!error">
       <ng-container *ngIf="!loading && models.size > 0;">
-        <div style="width: 100%; height: 500px;">
+        <div id="site-map" style="width: 100%; height: 24em;">
           <baw-site-map [projects]="models.toArray()"></baw-site-map>
         </div>
       </ng-container>
diff --git a/src/app/components/regions/pages/details/details.component.spec.ts b/src/app/components/regions/pages/details/details.component.spec.ts
index e7f758b17..8c066d6e6 100644
--- a/src/app/components/regions/pages/details/details.component.spec.ts
+++ b/src/app/components/regions/pages/details/details.component.spec.ts
@@ -159,7 +159,7 @@ describe("RegionDetailsComponent", () => {
       spectator.detectChanges();
       await promise;
       spectator.detectChanges();
-      expect(getMap().projects).toEqual(defaultProject);
+      expect(getMap().projects).toEqual([defaultProject]);
     });
 
     it("should provide region to maps component", async () => {
@@ -168,7 +168,7 @@ describe("RegionDetailsComponent", () => {
       spectator.detectChanges();
       await promise;
       spectator.detectChanges();
-      expect(getMap().regions).toEqual(defaultRegion);
+      expect(getMap().regions).toEqual([defaultRegion]);
     });
   });
 
diff --git a/src/app/components/regions/pages/list/list.component.spec.ts b/src/app/components/regions/pages/list/list.component.spec.ts
index f187035ca..b42ccb810 100644
--- a/src/app/components/regions/pages/list/list.component.spec.ts
+++ b/src/app/components/regions/pages/list/list.component.spec.ts
@@ -21,6 +21,7 @@ import { nStepObservable } from "@test/helpers/general";
 import { assertErrorHandler } from "@test/helpers/html";
 import { MockComponent } from "ng-mocks";
 import { Subject } from "rxjs";
+import { SiteMapComponent } from "@components/projects/components/site-map/site-map.component";
 import { ListComponent } from "./list.component";
 
 const mockCardsComponent = MockComponent(CardsComponent);
@@ -41,6 +42,9 @@ describe("RegionsListComponent", () => {
         },
       ],
     ],
+    declarations: [
+      MockComponent(SiteMapComponent)
+    ],
     imports: [SharedModule, RouterTestingModule, MockBawApiModule],
   });
 
@@ -195,4 +199,11 @@ describe("RegionsListComponent", () => {
       expect(spec.component.onFilter).toHaveBeenCalled();
     });
   });
+
+  it("should display a baw-map", async () => {
+    const regions = generateRegions(1);
+    await handleApiRequest(regions);
+
+    expect(spec.query(SiteMapComponent)).toExist();
+  });
 });
diff --git a/src/app/components/regions/pages/list/list.component.ts b/src/app/components/regions/pages/list/list.component.ts
index a265fca8b..a4981a6b4 100644
--- a/src/app/components/regions/pages/list/list.component.ts
+++ b/src/app/components/regions/pages/list/list.component.ts
@@ -23,7 +23,7 @@ export const regionsMenuItemActions = [
   template: `
     <ng-container *ngIf="!error">
       <ng-container *ngIf="!loading && models.size > 0;">
-        <div style="width: 100%; height: 500px;">
+        <div style="width: 100%; height: 24em;">
           <baw-site-map [regions]="models.toArray()"></baw-site-map>
         </div>
       </ng-container>
diff --git a/src/app/components/shared/map/map.component.ts b/src/app/components/shared/map/map.component.ts
index 6345de37e..78736f19c 100644
--- a/src/app/components/shared/map/map.component.ts
+++ b/src/app/components/shared/map/map.component.ts
@@ -28,7 +28,7 @@ import { takeUntil } from "rxjs/operators";
         height="100%"
         width="100%"
         [options]="mapOptions"
-        (mapClick)="markerOptions.draggable && newLocation.emit($event)"
+        (mapClick)="markerOptions?.draggable && newLocation.emit($event)"
       >
         <map-marker
           *ngFor="let marker of filteredMarkers"

From d01f83c50457ac797d112960c6313634a0f2da93 Mon Sep 17 00:00:00 2001
From: hudson-newey <neweyh@qut.edu.au>
Date: Fri, 3 Feb 2023 18:53:53 +1000
Subject: [PATCH 4/4] added tests

---
 .../components/home/home.component.spec.ts    |  9 ++++--
 .../pages/list/list.component.spec.ts         | 28 +++++++++++++++---
 .../regions/pages/list/list.component.spec.ts | 29 ++++++++++++++++---
 3 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/src/app/components/home/home.component.spec.ts b/src/app/components/home/home.component.spec.ts
index eef853fe3..e1ce38b0b 100644
--- a/src/app/components/home/home.component.spec.ts
+++ b/src/app/components/home/home.component.spec.ts
@@ -231,8 +231,13 @@ describe("HomeComponent", () => {
       });
     });
 
-    it("should create live map", () => {
-      expect(spec.query("#interactiveMap")).toExist();
+    describe("site map", () => {
+      it("should create", () => {
+        expect(spec.query("#interactiveMap")).toExist();
+      });
+
+      it("should handle taking both projects and regions", async () => {
+      });
     });
   });
 });
diff --git a/src/app/components/projects/pages/list/list.component.spec.ts b/src/app/components/projects/pages/list/list.component.spec.ts
index a937ab366..abbeeabb1 100644
--- a/src/app/components/projects/pages/list/list.component.spec.ts
+++ b/src/app/components/projects/pages/list/list.component.spec.ts
@@ -22,6 +22,7 @@ import { assertErrorHandler } from "@test/helpers/html";
 import { MockComponent } from "ng-mocks";
 import { Subject } from "rxjs";
 import { SiteMapComponent } from "@components/projects/components/site-map/site-map.component";
+import { modelData } from "@test/helpers/faker";
 import { ListComponent } from "./list.component";
 
 const mockCardsComponent = MockComponent(CardsComponent);
@@ -198,10 +199,29 @@ describe("ProjectsListComponent", () => {
     });
   });
 
-  it("should display a baw-map", async () => {
-    const projects = generateProjects(1);
-    await handleApiRequest(projects);
+  describe("site map", () => {
+    it("should create", async () => {
+      const projects = generateProjects(modelData.datatype.number({ min: 1 }));
+      await handleApiRequest(projects);
+
+      expect(spec.query(SiteMapComponent)).toExist();
+    });
+
+    it("should display the same projects that are displayed in the filtered list", async () => {
+      const projects = generateProjects(modelData.datatype.number({ min: 1 }));
+      await handleApiRequest(projects);
 
-    expect(spec.query(SiteMapComponent)).toExist();
+      const mapComponent = spec.query(SiteMapComponent);
+
+      const shownProjects = spec.component.models.toArray();
+      const mapProjects = mapComponent.projects;
+      const mapRegions = mapComponent.regions;
+
+      expect(mapProjects).toEqual(shownProjects);
+
+      // since there are no regions specified in the project component, there should not be any regions in the map component
+      // if this assertion fails, there is a problem with the `ngOnInit()` method
+      expect(mapRegions).toBeUndefined();
+    });
   });
 });
diff --git a/src/app/components/regions/pages/list/list.component.spec.ts b/src/app/components/regions/pages/list/list.component.spec.ts
index b42ccb810..c4b3fd348 100644
--- a/src/app/components/regions/pages/list/list.component.spec.ts
+++ b/src/app/components/regions/pages/list/list.component.spec.ts
@@ -22,6 +22,7 @@ import { assertErrorHandler } from "@test/helpers/html";
 import { MockComponent } from "ng-mocks";
 import { Subject } from "rxjs";
 import { SiteMapComponent } from "@components/projects/components/site-map/site-map.component";
+import { modelData } from "@test/helpers/faker";
 import { ListComponent } from "./list.component";
 
 const mockCardsComponent = MockComponent(CardsComponent);
@@ -200,10 +201,30 @@ describe("RegionsListComponent", () => {
     });
   });
 
-  it("should display a baw-map", async () => {
-    const regions = generateRegions(1);
-    await handleApiRequest(regions);
+  describe("site map", () => {
+    it("should create", async () => {
+      const regions = generateRegions(modelData.datatype.number({ min: 1 }));
+      await handleApiRequest(regions);
+
+      expect(spec.query(SiteMapComponent)).toExist();
+    });
+
+    it("should display the same projects that are displayed in the filtered list", async () => {
+      const regions = generateRegions(modelData.datatype.number({ min: 1 }));
+      await handleApiRequest(regions);
 
-    expect(spec.query(SiteMapComponent)).toExist();
+      const mapComponent = spec.query(SiteMapComponent);
+
+      const listedRegions = spec.component.models.toArray();
+      const mapProjects = mapComponent.projects;
+      const mapRegions = mapComponent.regions;
+
+      expect(mapRegions).toEqual(listedRegions);
+
+      // since there are no projects specified in the region component, there should not be any projects in the map component
+      // if this assertion fails, there is a problem with the `ngOnInit()` method
+      expect(mapProjects).toBeUndefined();
+    });
   });
+
 });