Merge pull request #348 from KnowWhereGraph/develop

2.0.1 Release

package.json

@@ -31,7 +31,6 @@
     "@popperjs/core": "^2.11.6",
     "@turf/centroid": "^6.5.0",
     "@types/leaflet.markercluster": "^1.5.1",
-    "axios": "^1.2.0",
     "bootstrap": "^5.1.3",
     "leaflet": "^1.9.3",
     "leaflet.markercluster": "^1.5.3",

src/app/app.component.ts

@@ -9,5 +9,5 @@ import { Component } from '@angular/core'
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
-  title = 'faceted-search'
+  title = 'Knowledge Explorer'
 }

src/app/facets/facets.component.scss

@@ -32,7 +32,7 @@
   border-radius: 0 5px 5px 0;
   color: #fff;
   cursor: pointer;
-  width: 30%
+  width: 30%;
 }
 
 .facet {

src/app/facets/facets.component.ts

@@ -439,10 +439,16 @@ export class FacetsComponent implements OnInit {
 
   /**
    * Handles the event when the state of the GNIS tree changes
+   *
+   * @param $event: The event fired from the dropdown on a state change
    */
   gnisFacetChange($event) {
     // Check to see if any nodes were selected.
     let node_ids = this.getSelectedNodes(this.gnisTree.treeModel, false)
+    // If there aren't any focused nodes, then return early to avoid a table refresh
+    if (!$event.focusedNodeId) {
+      return
+    }
     let nodes: Array<any> = []
     node_ids.forEach((node) => {
       nodes.push(this.gnisTree.treeModel.getNodeById(node[0]))

src/app/header/header.component.html

@@ -1,4 +1,4 @@
-<header [ngStyle]="{ height: router.url === '/' ? 'auto' : '200px' }">
+<header [ngStyle]="{ height: router.url === '/' ? 'auto' : '220px' }">
   <div class="home">
     <div class="container" *ngIf="router.url === '/'">
       <h1>Knowledge Explorer: Discovery begins here.</h1>

src/app/nav/nav.component.html

@@ -47,4 +47,8 @@
       </li>
     </ul>
   </div>
+  <div class="nav-display">
+    <label class="breadcrumb">{{ breadcrumb }}</label>
+    <label class="pagename">{{ pageName }}</label>
+  </div>
 </section>

src/app/nav/nav.component.scss

@@ -275,4 +275,21 @@
       }
     }
   }
+
+  .nav-display {
+    .breadcrumb {
+      position: absolute;
+      // Aligns under the logo, left justified
+      left: 0rem;
+      top: 7rem;
+      opacity: 50%;
+    }
+    .pagename {
+      position: absolute;
+      // Aligns under the logo, left justified
+      left: 0rem;
+      top: 10rem;
+      font-size: x-large;
+    }
+  }
 }

src/app/nav/nav.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core'
+import { NavInfoService } from '../services/nav.service'
+import { Subscription } from 'rxjs/internal/Subscription'
 
 /**
  * Component for the navigation bar. This component encompasses the navigation
@@ -10,13 +12,43 @@ import { Component, OnInit } from '@angular/core'
   styleUrls: ['./nav.component.scss'],
 })
 export class NavComponent implements OnInit {
+  breadcrumb: string = ''
+  pageName: string = ''
+  navChangedSub: Subscription
+
   /**
-   * An empty constructor; this class is just markup and styling.
+   * Creates a new nav component.
+   *
+   * @param navInfoService: Service with a stream that contains new data to display in the nav area
    */
-  constructor() {}
+  constructor(private navInfoService: NavInfoService) {
+    this.navChangedSub = navInfoService.onNavChanged.subscribe((event) => {
+      this.onNavigationChange(event)
+    })
+  }
 
   /**
    * An empty ngOnInit to satisfy the constraints from OnInit.
    */
   ngOnInit(): void {}
+
+  /**
+   * Triggered when a page changes in a way that requires the navigation
+   * display to be updated. The new relative path and full path should be
+   * included in the fired event.
+   *
+   * @param event The navigation change event, carrying the new state information
+   */
+  onNavigationChange(event: NavEvent) {
+    this.breadcrumb = event.fullPath
+    this.pageName = event.relativePath
+  }
+}
+
+/**
+ * Template for a new navigation state
+ */
+export interface NavEvent {
+  relativePath: string
+  fullPath: string
 }

src/app/search/search.component.ts

@@ -1,11 +1,21 @@
 import { ActivatedRoute, Router } from '@angular/router'
-import { Component, OnInit, ChangeDetectorRef, ViewChild } from '@angular/core'
+import {
+  Component,
+  OnInit,
+  ChangeDetectorRef,
+  ViewChild,
+  Output,
+  EventEmitter,
+} from '@angular/core'
 import { MatTabChangeEvent } from '@angular/material/tabs'
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog'
 import { ErrorModalComponent } from '../error-modal/error-modal.component'
+import { NavEvent } from '../nav/nav.component'
+import { NavInfoService } from '../services/nav.service'
+import { Location } from '@angular/common'
 
 /**
- * A component that represents the main search page. It controls the logic for handling tab switching (ie clicking 'People', 'Places' or 'Hazards).
+ * A component that represents the main search page. It controls the logic for handling tab switching (ie clicking 'Persons', 'Places' or 'Hazards).
  * Based on the tab clicked, it renders the appropriate table component.
  */
 @Component({
@@ -38,12 +48,14 @@ export class SearchComponent implements OnInit {
   // Reference to the hazards table
   @ViewChild('hazardsTable')
   public hazardsTable: any
-  // Reference people table
+  // Reference persons table
   @ViewChild('peopleTable')
   public peopleTable: any
   // Reference to the facets component
   @ViewChild('appfacets')
   public appfacets: any
+  // Event that emitted to the parent component, to tell the navigation component to update
+  @Output() navChange = new EventEmitter<NavEvent>()
 
   /**
    * Called when a facet changes
@@ -74,16 +86,23 @@ export class SearchComponent implements OnInit {
    * @param cd The change detector reference to catch events
    * @param route: The activated route for this page
    * @param router: The global router
+   * @param navInfoService: Service for sending information to the nav component
+   * @param errorModal: A reference to the error modal dialog
+   * @param location: Angular's 'Location' object for this path
    */
   constructor(
     private cd: ChangeDetectorRef,
     private route: ActivatedRoute,
     private router: Router,
-    private errorModal: MatDialog
+    private errorModal: MatDialog,
+    private navInfoService: NavInfoService,
+    private location: Location
   ) {
     this.totalSize = 0
     this.isCounting = true
     this.isSearching = true
+    this.navInfoService = navInfoService
+    this.location = location
   }
 
   /**
@@ -140,18 +159,33 @@ export class SearchComponent implements OnInit {
         clickedTabName = 'hazard'
         break
       case 2:
-        clickedTabName = 'people'
+        clickedTabName = 'person'
     }
-    //const queryParams = { tab: clickedTabName };
+
+    this.navInfoService.onNavChanged.next({
+      fullPath: `search/${clickedTabName}`,
+      relativePath: this.capitalizeFirstLetter(clickedTabName),
+    })
+
+    const queryParams = { tab: clickedTabName }
+    this.location.replaceState(`search?tab=${clickedTabName}`)
   }
 
   /**
    * When the initialization is ready, check to see if a particular tab should be
-   * navigated to.
+   * navigated to and update the nav.
    */
   ngOnInit(): void {
     // Check to see if a particular tab should be loaded
     let tab = this.route.snapshot.queryParamMap.get('tab')
+    if (!tab) {
+      console.error('Failed to get the tab contents')
+      return
+    }
+    this.navInfoService.onNavChanged.next({
+      fullPath: `search/${tab}`,
+      relativePath: this.capitalizeFirstLetter(tab),
+    })
 
     switch (tab) {
       case 'place':
@@ -213,4 +247,13 @@ export class SearchComponent implements OnInit {
     dialogConfig.height = '200px'
     this.errorModal.open(ErrorModalComponent, dialogConfig)
   }
+
+  /**
+   * Makes the first letter in a prase upper cased
+   * @param phrase: The phrase being capitalized
+   * @returns 'phrase' but with the first letter of the first word upper cased
+   */
+  capitalizeFirstLetter(phrase: string) {
+    return phrase.charAt(0).toUpperCase() + phrase.slice(1)
+  }
 }

src/app/services/nav.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core'
+import { Subject } from 'rxjs/internal/Subject'
+
+/**
+ * Service for passing navigation page information from components to
+ * the navigation component. This is required because the navigation component
+ * lives in the app root, while other components are rendered conditionally through
+ * the router which makes it difficult to pass data to the parent app root.
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class NavInfoService {
+  // Event stream that holds new nav state
+  onNavChanged = new Subject<any>()
+
+  constructor() {}
+}