Add save to file functionality.

src/app/app.module.ts

@@ -52,6 +52,7 @@ import { MainProjectComponent } from './components/main-project/main-project.com
 import {DragDropModule, CDK_DRAG_CONFIG} from '@angular/cdk/drag-drop';
 import { LoginComponent } from './components/login/login.component';
 import { LogoutComponent } from './components/logout/logout.component';
+import { ModalLinkProjectComponent } from './components/modal-link-project/modal-link-project.component';
 
 @NgModule({
   declarations: [
@@ -87,6 +88,7 @@ import { LogoutComponent } from './components/logout/logout.component';
     MainProjectComponent,
     LoginComponent,
     LogoutComponent,
+    ModalLinkProjectComponent,
   ],
   imports: [
     CommonModule,
@@ -151,6 +153,7 @@ import { LogoutComponent } from './components/logout/logout.component';
     ModalCreatePointCloudComponent,
     ModalCreateOverlayComponent,
     ModalCreateTileServerComponent,
-    ModalPointCloudInfoComponent]
+    ModalPointCloudInfoComponent,
+    ModalLinkProjectComponent]
 })
 export class AppModule { }

src/app/components/control-bar/control-bar.component.html

@@ -7,6 +7,9 @@
     </div>
     <div *ngIf="!loadingActiveProject && !loadingActiveProjectFailed" class="cell small-8 align-middle grid-x">
         <span style="margin-left: 1rem">{{isPublicView? 'Public Map': 'Map'}}: {{ activeProject.name }}</span>
+        <div *ngIf="activeProject.system_name" style="padding-left: 30px">
+          <span>Project: {{activeProject.system_name}}</span>
+        </div>
         <div *ngIf="loadingData" style="margin-left: 1rem">
             <i class="fas fa-spin fa-spinner" style="margin-right: 0.3rem"></i>
             <span>Loading Data</span>

src/app/components/control-bar/control-bar.component.ts

@@ -1,11 +1,14 @@
 import {Component, OnInit, OnDestroy, Input} from '@angular/core';
 import { ProjectsService } from '../../services/projects.service';
 import { Project } from '../../models/models';
+import { BsModalRef, BsModalService } from 'ngx-foundation';
 import { GeoDataService } from '../../services/geo-data.service';
 import {LatLng} from 'leaflet';
 import {skip} from 'rxjs/operators';
 import {combineLatest, Subscription} from 'rxjs';
 import {NotificationsService} from '../../services/notifications.service';
+import { ModalFileBrowserComponent } from '../modal-file-browser/modal-file-browser.component';
+import { ModalLinkProjectComponent } from '../modal-link-project/modal-link-project.component';
 
 @Component({
   selector: 'app-control-bar',
@@ -20,8 +23,10 @@ export class ControlBarComponent implements OnInit, OnDestroy {
   private loadingActiveProject = true;
   private loadingActiveProjectFailed = false;
   private loadingData = false;
+  modalRef: BsModalRef;
 
   constructor(private projectsService: ProjectsService,
+              private bsModalService: BsModalService,
               private geoDataService: GeoDataService,
               private notificationsService: NotificationsService,
               ) { }

src/app/components/file-browser/file-browser.component.ts

@@ -25,6 +25,8 @@ export class FileBrowserComponent implements OnInit {
   @Input() helpText = 'Note: Only files are selectable, not folders. Double click on a folder to navigate into it.';
   @Input() allowedExtensions: Array<string> = [];
   @Output() selection: EventEmitter<Array<RemoteFile>> = new EventEmitter<Array<RemoteFile>>();
+  @Output() systemSelection: EventEmitter<any> = new EventEmitter<any>();
+  @Output() currentPath: EventEmitter<string> = new EventEmitter<string>();
 
   private currentUser: AuthenticatedUser;
   private currentDirectory: RemoteFile;
@@ -65,8 +67,9 @@ export class FileBrowserComponent implements OnInit {
         this.myDataSystem = systems.find( (sys) => sys.id === 'designsafe.storage.default');
         this.communityDataSystem = systems.find( (sys) => sys.id === 'designsafe.storage.community');
         this.publishedDataSystem = systems.find( (sys) => sys.id === 'designsafe.storage.published');
-        this.selectedSystem = this.myDataSystem;
         this.projects = projects;
+        this.selectedSystem = this.myDataSystem;
+        this.systemSelection.next(this.myDataSystem);
         this.currentUser = user;
         const init = <RemoteFile> {
           system: this.myDataSystem.id,
@@ -86,6 +89,7 @@ export class FileBrowserComponent implements OnInit {
       type: 'dir',
       path: pth
     };
+    this.systemSelection.next(system)
     this.browse(init);
   }
 
@@ -119,6 +123,7 @@ export class FileBrowserComponent implements OnInit {
                   // This removes the first item in the listing, which in Agave
                   // is always a reference to self '.' and replaces with '..'
                   const current = files.shift();
+                  this.currentPath.next(current.path);
                   current.path = this.tapisFilesService.getParentPath(current.path);
                   current.name = '..';
                   files.unshift(current);

src/app/components/main-welcome/main-welcome.component.html

@@ -9,11 +9,14 @@
 
     <div class="grid-x align-center">
       <div id=welcome-projects-list class="grid-y align-center">
-        <div class="welcome-project-header grid-x align-justify">
-          <div>
+        <div class="welcome-project-header grid-x">
+          <div class="map-column">
             <b>Maps</b>
           </div>
-          <div>
+          <div class="project-column">
+            <b>Linked Project</b>
+          </div>
+          <div class="button-column" style="text-align: right">
             <div id="new-map" (click)="openCreateProjectModal()">
               <i class="fas fa-plus"></i>
               Create a New Map
@@ -40,22 +43,37 @@
 
           <ng-template #projectDisconnected>
             <div *ngIf="projects.length > 0; else noProject" class="project-list-container">
-              <div *ngFor="let p of projects; let indexOfelement=index;">
+              <div *ngFor="let p of projects; let indexOfElement=index;">
                 <div (dblclick)="routeToProject(p.uuid)"
                      class="project-list-item"
                      [ngClass]="{
-                                 'welcome-project-light': (indexOfelement % 2) == 0,
-                                 'welcome-project-dark': (indexOfelement % 2) == 1,
+                                 'welcome-project-light': (indexOfElement % 2) == 0,
+                                 'welcome-project-dark': (indexOfElement % 2) == 1,
                                  'welcome-project': true,
-                                 'grid-x': true,
-                                 'align-justify' :true
+                                 'grid-x': true
                                  }">
-                  {{p.name}}
-                  <div>
+
+                  <div class="map-column">
+                    {{p.name}}
+                  </div>
+
+                  <div class="project-column">
+                    <ng-container *ngIf="p.system_name && p.system_id.includes('project'); else noSystem" class="list-column link-hover">
+                      <a [href]="'https://www.designsafe-ci.org/data/browser/projects/' + p.system_id + '/'">
+                        <span class="project-name">
+                          {{p.dsName}} | {{p.system_name}}
+                        </span>
+                      </a>
+                    </ng-container>
+                    <ng-template #noSystem>
+                      ----------
+                    </ng-template>
+                  </div>
+                  <div class="button-column" style="text-align: right">
                     <button class="project-list-item-button" (click)="routeToProject(p.uuid)">
                       <i class="fas fa-folder-open"></i>
                     </button>
-                    <button class="project-list-item-button" (click)=deleteProject(p)>
+                    <button class="project-list-item-button" (click)=openDeleteProjectModal(p)>
                       <i class="fas fa-trash"></i>
                     </button>
                   </div>
@@ -88,8 +106,16 @@
       </div>
     </div>
 
-    <div class="grid-x" id="sponsor">Powered by
-      <img src="assets/nsf.png" width="50px">
+    <div class="grid-x" id="sponsor">
+      <a href="https://www.nsf.gov/">
+        <img src="assets/nsf.png" width="60px">
+      </a>
+      <a href="https://www.designsafe-ci.org/">
+        <img src="assets/designsafe.svg" width="200px">
+      </a>
+      <a href="https://www.designsafe-ci.org/about/">
+        <img src="assets/nheri.png" width="150px">
+      </a>
     </div>
 
   </div>

src/app/components/main-welcome/main-welcome.component.styl

@@ -12,64 +12,74 @@
     padding: 20px
     margin-bottom: 50px
     #user-guide
-      width: 550px
+      width: 100%
       text-align: right
-
+  .map-column
+    width: 200px
+  .project-column
+    width: 100%
+  .button-column
+    width: 250px
+  .project-name
+    display: inline-block
+    text-overflow: ellipsis
+    overflow: hidden
+    width: 90%
+    white-space: nowrap
   #sponsor
     height: 50px
     display: flex
     align-items: center
     justify-content: center
     background-color: #f7f7f7
     img
-      padding-left: 5px
+      padding-left: 10px
   #welcome-background
     background-color: #f7f7f7
     height: calc(100% - 40px)
     #welcome-projects-list
       background-color: #ffffff
-      width: 600px
+      width: 100%
     .project-list-container
       height: 270px
       overflow-y: scroll
       .project-list-item
         font-size: 14px
         padding: 12px
         display: flex
+        flex-wrap: nowrap
         jusitfy-content: space-between
         .project-list-item-button
           cursor: pointer
           margin: 0px 10px
+          :hover
+            color: #fff
     .welcome-project-header
       font-size: 14px
       padding: 12px
+      display: flex
+      flex-wrap: nowrap
       background-color: #d0d0d0
     .welcome-project-light
-      font-size: 14px
-      padding: 12px
       background-color: #ffffff
     .welcome-project-dark
-      font-size: 14px
-      padding: 12px
       background-color: #eeeeee
     .welcome-project:hover
       color: #ffffff
       background-color: #3c6fdb
+      a
+        color: #ADDFFF
     #welcome-no-information
-      height: 100%
       display: flex
       flex-direction: column
       font-size: 24px
       padding: 90px
       height: 270px
       align-items: center
+      width: 100%
     #welcome-information
       background-color: #f7f7f7
-      // padding: 150px 300px
-      // padding: 50px
-      // margin-bottom: 20px
-      width: 800px
-      // width: calc(100% - 400px)
+      width: 100%
       #welcome-logo
         display: flex
         flex-direction: column

src/app/components/main-welcome/main-welcome.component.ts

@@ -1,10 +1,13 @@
 import { Component, OnInit } from '@angular/core';
 import { Project } from '../../models/models';
-import {GeoDataService} from '../../services/geo-data.service';
 import {ProjectsService} from '../../services/projects.service';
-import {BsModalService} from 'ngx-foundation';
+import {BsModalRef, BsModalService} from 'ngx-foundation';
+import {AgaveSystemsService} from '../../services/agave-systems.service';
 import {ModalCreateProjectComponent} from '../modal-create-project/modal-create-project.component';
 import { Router, ActivatedRoute } from '@angular/router';
+import { ModalService } from 'src/app/services/modal.service';
+import { combineLatest } from 'rxjs';
+import { take } from 'rxjs/operators';
 
 @Component({
   selector: 'app-main-welcome',
@@ -16,48 +19,71 @@ export class MainWelcomeComponent implements OnInit {
   release_url = 'https://github.com/TACC-cloud/hazmapper';
   guide_url = 'https://www.designsafe-ci.org/rw/user-guide/workspace/hazmapper/';
 
-  spinner: boolean;
+  spinner: boolean = true;
   connected: boolean;
 
-  public projects: Project[] = [];
+  public projects = [];
   public activeProject: Project;
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private geoDataService: GeoDataService,
     private projectsService: ProjectsService,
-    private bsModalService: BsModalService
+    private bsModalService: BsModalService,
+    private modalService: ModalService,
+    private agaveSystemsService: AgaveSystemsService
   ) { }
 
   ngOnInit() {
-    this.projectsService.loadingProjects.subscribe((isLoading) => {
-      this.spinner = isLoading;
-    });
+
+    this.projectsService.getProjects();
+    this.agaveSystemsService.getDSProjectId();
 
     this.projectsService.loadingProjectsFailed.subscribe((connected) => {
       this.connected = connected;
     });
 
-    this.projectsService.projects.subscribe( (projects) => {
-      this.projects = projects;
-    });
-
-    this.projectsService.getProjects();
+    combineLatest(
+      this.projectsService.projects,
+      this.agaveSystemsService.dsProjects).pipe(take(1))
+        .subscribe(([projects, dsProjects]) => {
+          if (dsProjects) {
+            if (projects.length > 0) {
+              this.projects = dsProjects.length > 0
+                ? projects.map(p => {
+                  const pDir = dsProjects.find(dp => dp.id === p.system_id);
+                  p.dsName = pDir ? pDir.dsId : null;
+                  return p;
+                })
+                : projects;
+              this.spinner = false;
+            } else {
+              this.spinner = true;
+            }
+          }
+        });
   }
 
-  routeToProject(projectId: number) {
-    this.router.navigate(['project', projectId], { relativeTo: this.route });
+  routeToProject(projectUUID: string) {
+    this.router.navigate(['project', projectUUID], { relativeTo: this.route });
   }
 
   openCreateProjectModal() {
-    const modal = this.bsModalService.show(ModalCreateProjectComponent);
-    modal.content.onClose.subscribe( (project) => {
+    const modal: BsModalRef = this.bsModalService.show(ModalCreateProjectComponent);
+    modal.content.onClose.subscribe( (project: Project) => {
       this.routeToProject(project.uuid);
     });
   }
 
-  deleteProject(p: Project) {
-    this.projectsService.deleteProject(p);
+  openDeleteProjectModal(p: Project) {
+    this.modalService.confirm(
+      'Delete map',
+      'Are you sure you want to delete this map?  All associated features, metadata, and saved files will be deleted. THIS CANNOT BE UNDONE.',
+      ['Cancel', 'Delete']).subscribe( (answer) => {
+      if (answer === 'Delete') {
+        this.projectsService.deleteProject(p);
+
+      }
+    });
   }
 }

src/app/components/modal-confirmation-body/modal-confirmation-body.component.ts

@@ -14,8 +14,8 @@ export class ModalConfirmationBodyComponent {
 
   constructor(public bsModalRef: BsModalRef) { }
 
-  closeModal(answer) {
-    this.answer = answer;
-    this.bsModalRef.hide();
-  }
-}
+ closeModal(answer) {
+   this.answer = answer;
+   this.bsModalRef.hide();
+ }
+}