Merge pull request #286 from USGS-WiM/staging

Staging into Master Release v1.40-beta

CHANGELOG.md

@@ -27,9 +27,34 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Fixed  
 
 - 
+
 ### Security  
 
 - 
+
+## [v1.4.0-beta](https://github.com/USGS-WiM/StreamStats-National/releases/tag/v1.4.0-beta) - 2023-03-15
+
+### Added 
+
+- "WFIGS - Wildland Fire Perimeters Full History" layer to fire hydrology workflows
+- "Interagency Fire Perimeter History - All Years" layer to fire hydrology workflows
+
+### Changed  
+
+- The Report tab now automatically opens after completing a workflow
+- Fire map services due to NIFC updates
+- Unavailable grid query service values are evaluated as null rather than -9999
+- Improved notification when dependent services are unavailable
+
+### Removed 
+
+- "2021 Fire Perimeters" layer from fire hydrology workflows
+
+### Fixed  
+
+- In "Delineation" workflow, only return Basin Characteristics that are available at the clicked point
+- In "Query by Fire Perimeter", fixed bug causes it to not select a perimeter
+- Query strings used to query fire perimeter map layer geometry in queryBurnedArea function 
 ## [v1.3.0-beta](https://github.com/USGS-WiM/StreamStats-National/releases/tag/v1.3.0-beta) - 2023-01-11
 
 ### Added 

code.json

@@ -3,7 +3,7 @@
     "name": "StreamStats National",
     "organization": "U.S. Geological Survey",
     "description": "Web-based Geographic Information Systems application that provides users with access to hydrologic data and analytical tools",
-    "version": "1.3.0-beta",
+    "version": "1.4.0-beta",
     "status": "Beta",
 
     "permissions": {
@@ -43,7 +43,7 @@
     },
 
     "date": {
-      "metadataLastUpdated": "2023-01-11"
+      "metadataLastUpdated": "2023-03-15"
     }
   }
 ]

src/app/app.component.html

@@ -29,7 +29,7 @@
 				<i class="fas fa-bars" alt="Open Sidebar"></i>
 			</button>
 			<!-- Close sidebar - when open -->
-			<button (click)="sidebarView = 'none'" *ngIf="sidebarView != 'none'">
+			<button (click)="sidebarView = 'none'; closeSidebar" *ngIf="sidebarView != 'none'">
 				<i class="fas fa-times" alt="Close Sidebar"></i>
 			</button>
 		</div>
@@ -41,7 +41,7 @@
 		<app-content-right></app-content-right>
 	</div>
 
-  </div>
+</div>
 
 </div>
 
@@ -53,6 +53,14 @@
 <!-- About & Help Modal -->
 <div class="usa-modal usa-modal--lg" id="helpModal" aria-labelledby="helpModalHeading" aria-describedby="helpModalDescription">
 	<div class="usa-modal__content">
+
+		<!-- Floating close button -->
+		<div class="modal-x" data-close-modal>
+			<i class="fal fa-times"></i>
+		</div>
+
+
+
 		<div class="usa-modal__main">
 			<h2 class="usa-modal__heading" id="helpModalHeading">
 				About & Help
@@ -121,7 +129,7 @@ <h3>USGS Product Names Disclaimer</h3>
 				<ul class="usa-button-group">
 					<li class="usa-button-group__item">
 						<button type="button" class="usa-button usa-button--outline" data-close-modal>
-							Close
+							Close Popup
 						</button>
 					</li>
 				</ul>

src/app/app.component.scss

@@ -17,11 +17,12 @@
 #splitLayoutLeft{
 	flex-grow: 3;
 	position: relative;
+	transition: 0.15s;
 
 	#viewControlButtons{
 		position: absolute;
 		box-sizing: border-box;
-		padding-right: 10px;
+		padding-right: 0;
 		top: 0;
 		right: 0;
 		z-index: 50;
@@ -31,13 +32,13 @@
 		margin-bottom: 1px;
 
 		button{
-			background-color: transparent;
+			background-color: var(--grey);
 			border: none;
 			height: 100%;
 			font-size: 1.3em;
-			padding: 0 8px;
-			color: var(--text);
-			opacity: 0.8;
+			padding: 0 15px;
+			color: var(--textFade);
+			opacity: 1;
 
 			&.active{
 				color: var(--primary);
@@ -46,9 +47,13 @@
 			&:hover,
 			&:focus{
 				opacity: 1;
-				transform: scale(1.1);
+				color: var(--text);
 				cursor: pointer;
 			}
+
+			&:first-child{
+				border-left: 1px solid var(--borderLight);
+			}
 		}
 
 		// Float right on mobile
@@ -68,7 +73,7 @@
 		right: 0;
 		z-index: 5000;
 		height: 100%;
-		background-color: rgba(255,255,255,0.75);
+		background-color: var(--background);
 		width: 95vw;
 		max-width: 440px;
 		min-width: 320px;
@@ -89,12 +94,12 @@
 	}
 	&.none{
 		#splitLayoutRight{
-			display: none;
+			width: 0;
 		}
 	}
 	&.visible{
 		#splitLayoutRight{
 			width: 33%;
 		}
 	}
-}
+}

src/app/app.component.ts

@@ -8,35 +8,58 @@ import { MapService } from './shared/services/map.service';
 import USWDS from "../../node_modules/uswds/src/js/components";
 const { modal } = USWDS;
 
+
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+	selector: 'app-root',
+	templateUrl: './app.component.html',
+	styleUrls: ['./app.component.scss']
 })
+
+
+
+
+
 export class AppComponent implements OnInit{
-  title = 'StreamStats-National';
-  private configSettings: Config;
-  public version: string;
+	title = 'StreamStats-National';
+	private configSettings: Config;
+	public version: string;
 
-  sidebarView = "visible";
+	sidebarView = "none";
 
 	constructor(private titleService: Title, private metaService: Meta, public mapService: MapService, private _configService: ConfigService) {
-    	this.configSettings = this._configService.getConfiguration();
+		this.configSettings = this._configService.getConfiguration();
 	}
 
-  ngOnInit() {
-    this.titleService.setTitle(this.title);
-    this.metaService.addTags([
-      {name: 'keywords', content: 'USGS, US Geological Survey, United States Geological Survey, Stream Stats, StreamStats, watershed, basin characteristics, delineation, wildland fire, fire hydrology'},
-      {name: 'description', content: 'The StreamStats National application provides users with access to analytical tools that are useful for a variety of purposes, including water-resources planning, management, engineering, and design.'}
-    ]);
-    this.version = this.configSettings.version;
+	ngOnInit() {
+		this.showSidebar();
+
+
+		this.titleService.setTitle(this.title);
+		this.metaService.addTags([
+			{name: 'keywords', content: 'USGS, US Geological Survey, United States Geological Survey, Stream Stats, StreamStats, watershed, basin characteristics, delineation, wildland fire, fire hydrology'},
+			{name: 'description', content: 'The StreamStats National application provides users with access to analytical tools that are useful for a variety of purposes, including water-resources planning, management, engineering, and design.'}
+		]);
+		this.version = this.configSettings.version;
 		// initialize USWDS components
 		modal.on(true);
+
+
+
+
 	}
+
+// Show sidebar.
+showSidebar() {
+	setTimeout(() => {
+	this.sidebarView = "visible";
+	}, 500);
+}
 
-  // remove event listeners when component un-mounts.
-  ngOnDestroy() {
-	modal.off();
-  }
+
+
+
+ 	 // remove event listeners when component un-mounts.
+	ngOnDestroy() {
+		modal.off();
+	}
 }

src/app/content-right/content-right.component.ts

@@ -23,6 +23,9 @@ export class ContentRightComponent implements OnInit {
         }
 
         this._workflowService.formData.subscribe(data => {
+            if (this.formData && data == null) {
+                this.tab = 2; // Switch to Report tab after a workflow has completed
+            }
             this.formData = data;
         })
 
@@ -35,6 +38,7 @@ export class ContentRightComponent implements OnInit {
     public removeWorkFlow() {
         this._workflowService.setSelectedWorkflow(null);
         this._workflowService.setFormData(null);
+        this.tab = 1; // Keep the tab on "Build Report" when exiting a workflow
     }
 
 }

src/app/content-right/report/report.component.html

@@ -47,7 +47,7 @@ <h4>{{data.title}}</h4>
 							</tr>
 						</table>
 					</div>
-					<div *ngIf="output.key=='geologyInfo'">Surficial Geology:
+					<div *ngIf="output.key=='geologyInfo' && workflowData[i].outputs.geologyInfo">Surficial Geology:
 						<table id="reportTableSG">
 							<tr>
 								<th><span>Geologic Unit</span></th>
@@ -61,7 +61,9 @@ <h4>{{data.title}}</h4>
 							</tr>
 						</table>
 					</div>
-					<div *ngIf="output.key=='streamflowEstimates'">Streamflow Estimates:
+					<div *ngIf="output.key=='geologyInfo' && !workflowData[i].outputs.geologyInfo">Surficial Geology: Not available
+					</div>
+					<div *ngIf="output.key=='streamflowEstimates' && workflowData[i].outputs.streamflowEstimates">Streamflow Estimates:
 						<table id="reportTableSE">
 							<tr>
 								<th>Equation</th>
@@ -75,6 +77,8 @@ <h4>{{data.title}}</h4>
 							</tr>
 						</table>
 					</div>
+					<div *ngIf="output.key=='streamflowEstimates' && !workflowData[i].outputs.streamflowEstimates">Streamflow Estimates: Not available
+					</div>
 					<!-- Fire Hydrology: Query by Fire Perimeters-->
 					<div *ngIf="output.key=='downstreamDist'">Downstream Trace Distance (kilometers): {{output.value}}</div>
 					<div *ngIf="output.key=='selectedPerimetersInfo'"><br>Selected Perimeter Information:
@@ -179,13 +183,13 @@ <h4>{{data.title}}</h4>
 							<tr *ngFor="let basin_characteristic of output.value">
 								<td>{{basin_characteristic.fcpg_parameter}}</td>
 								<td><span>{{basin_characteristic["description"]}}</span></td>
-								<td>{{basin_characteristic["value"]}}</td>
+								<td>{{basin_characteristic["value"] | number : '1.2'}}</td>
 								<td><span>{{basin_characteristic["units"]}}</span></td>
 								</tr>
 							</table>
 						</ul>
 					</li>
-					<li *ngIf="output.key=='geologyInfo'">Surficial Geology:
+					<li *ngIf="output.key=='geologyInfo' && workflowData[i].outputs.geologyInfo">Surficial Geology:
 						<ul>
 							<table>
 								<tr>
@@ -201,7 +205,8 @@ <h4>{{data.title}}</h4>
 							</table>
 						</ul>
 					</li>
-					<li *ngIf="output.key=='streamflowEstimates'">Streamflow Estimates:
+					<li *ngIf="output.key=='geologyInfo' && !workflowData[i].outputs.geologyInfo">Surficial Geology: Not available</li>
+					<li *ngIf="output.key=='streamflowEstimates' && workflowData[i].outputs.streamflowEstimates">Streamflow Estimates:
 						<ul>
 							<table>
 								<tr>
@@ -217,6 +222,7 @@ <h4>{{data.title}}</h4>
 							</table>
 						</ul>
 					</li>
+					<li *ngIf="output.key=='streamflowEstimates' && !workflowData[i].outputs.streamflowEstimates">Streamflow Estimates: Not available</li>
 					<!-- Fire Hydrology: Query by Fire Perimeters-->	
 					<li *ngIf="output.key=='downstreamDist'">Downstream Trace Distance (kilometers): {{output.value}}</li>					
 					<li *ngIf="output.key=='selectedPerimetersInfo'">Selected Perimeter Information:

src/app/map-actions/map-actions.component.html

@@ -2,19 +2,19 @@
 	<nav id="mapActionButtons">
 		<!-- Basemaps -->
 		<button (click)="popout == 'map' ? popout = '' : popout = 'map'" [ngClass]="{'active': popout == 'map'}" aria-label="Base Maps">
-			<span><i [ngClass]="popout == 'map' ? 'fas fa-times' : 'fas fa-map' "></i>Base Maps</span>
+			<span><i [ngClass]="popout == 'map' ? 'fas fa-times' : 'fas fa-map' "></i> <b>Base Maps</b></span>
 		</button>
 		<!-- Map Layers -->
 		<button (click)="popout == 'layers' ? popout = '' : popout = 'layers'" [ngClass]="{'active': popout == 'layers'}" aria-label="Map Layers">
-			<span><i [ngClass]="popout == 'layers' ? 'fas fa-times' : 'fas fa-layer-group' "></i>Map Layers</span>
+			<span><i [ngClass]="popout == 'layers' ? 'fas fa-times' : 'fas fa-layer-group' "></i> <b>Map Layers</b></span>
 		</button>
 		<!-- Geosearch -->
 		<button (click)="popout == 'geosearch' ? popout = '' : popout = 'geosearch'; geosearch();" [ngClass]="{'active': popout == 'geosearch'}" aria-label="Location Search">
-			<span><i [ngClass]="popout == 'geosearch' ? 'fas fa-times' : 'fas fa-search' "></i>Geosearch</span>
+			<span><i [ngClass]="popout == 'geosearch' ? 'fas fa-times' : 'fas fa-search' "></i> <b>Geosearch</b></span>
 		</button>
 		<!-- Your Location -->
 		<button (click)="zoomLocation()" aria-label="Zoom to Your Location" id="geolocate">
-			<span><i class="fas fa-crosshairs"></i>Your Location</span>
+			<span><i class="fas fa-crosshairs"></i> <b>Your Location</b></span>
 		</button>
 	</nav>
 </header>
@@ -29,7 +29,11 @@
 			<label class="basemap-option">
 				<input type="radio" name="basemap" value="item[0]" (click)="SetBaselayer(item[0])">
 				<img src="assets/images/{{item[1]}}"> 
-				<span>{{item[0]}}</span>
+				<span><div>
+					{{item[0]}}
+					<!-- TODO - Write conditional if base layer is active -->
+					<i class="fas fa-check-circle" *ngIf="currentBaseLayer == item[0]" aria-label="Active Layer"></i>
+				</div></span>
 			</label>
 		</div>
 

src/app/map-actions/map-actions.component.scss

@@ -32,6 +32,10 @@
 				margin-right: 3px;
 			}
 
+			b{
+				font-weight: 500;
+			}
+
 			&:hover{
 				text-decoration: underline;
 				cursor: pointer;
@@ -43,6 +47,17 @@
 			}
 
 		}
+
+		// Mobile changes
+		@media(max-width : 1000px) {
+			gap: 0;
+
+			button{
+				b{
+					display: none;
+				}
+			}
+		}
 	}
 }