Merge pull request #299 from SynBioDex/newChanges_angular18

Merging updates on angular 18

SBOLCanvasFrontend/angular.json

@@ -156,5 +156,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": "fb43b5e9-1232-45bc-9d12-26caf05409f2"
   }
 }

SBOLCanvasFrontend/src/app/download-graph/download-graph.component.html

@@ -6,7 +6,7 @@ <h1 *ngIf="mode != classRef.SELECT_MODE" mat-dialog-title>Download</h1>
           <mat-form-field subscriptSizing = "dynamic">
             <mat-label>Server</mat-label>
             <mat-select id="registry" [disabled]="registries == null || registries.length < 1"
-              (selectionChange)="setRegistry($event.value)">
+              (selectionChange)="setRegistry($event.value)" value="{{registry}}">
               <mat-option *ngFor="let registry of registries" [value]="registry" [matTooltip]="registry">
                 {{registry}}
               </mat-option>
@@ -28,13 +28,14 @@ <h1 *ngIf="mode != classRef.SELECT_MODE" mat-dialog-title>Download</h1>
             <mat-label>Collection</mat-label>
             <mat-select id="collection" value="{{history.length > 0 ? history[history.length-1].uri : ''}}"
             (selectionChange)="changeCollection($event.value)">
-              <mat-option value="">Root Collections</mat-option>
+              <mat-option value = "">Root collection </mat-option>
               <mat-option *ngFor="let collection of history" [value]="collection.uri">
                 {{collection.name}}
               </mat-option>
             </mat-select>
           </mat-form-field>
-
+
+
           <mat-form-field subscriptSizing = "dynamic" *ngIf="data != null && type != classRef.MODULE_TYPE">
             <mat-label>Part role</mat-label>
             <mat-select id="partRole" [disabled]="partRoles == null || partRoles.length < 1"
@@ -106,6 +107,9 @@ <h1 *ngIf="mode != classRef.SELECT_MODE" mat-dialog-title>Download</h1>
           <button mat-button [disabled]="!enterCollectionEnabled()" (click)="onEnterCollectionClick()">Enter Collection</button>
           <button *ngIf="mode != classRef.SELECT_MODE" mat-button [disabled]="!finishCheck()" (click)="onDownloadClick()">Download</button>
           <button *ngIf="mode == classRef.SELECT_MODE" mat-button [disabled]="!selectCheck()" (click)="onSelectClick()">Select</button>
+
+          <button mat-button  (click) = "reset()"> Reset </button>
+
         </div>
   </mat-card-content>
 </mat-card>

SBOLCanvasFrontend/src/app/download-graph/download-graph.component.ts

@@ -65,6 +65,16 @@ export class DownloadGraphComponent implements OnInit {
   constructor(@Inject(MAT_DIALOG_DATA) public data: any, private dialog: MatDialog, private metadataService: MetadataService, private graphService: GraphService, private filesService: FilesService, private loginService: LoginService, public dialogRef: MatDialogRef<DownloadGraphComponent>) { }
 
   ngOnInit() {
+
+    if (this.metadataService.getSavedRegistry() !== undefined) this.registry = this.metadataService.getSavedRegistry()
+      if (this.metadataService.getSavedCollection() !== undefined) {
+          this.collection = this.metadataService.getSavedCollection().collection
+          this.history = this.metadataService.getSavedCollection().history
+      } else {
+          this.collection = ""
+          this.history = []
+      }
+
     this.working = true;
     if (this.data != null) {
       if (this.data.mode != null) {
@@ -112,8 +122,8 @@ export class DownloadGraphComponent implements OnInit {
     }
     this.updateParts();
     this.parts.sort = this.sort;
-    this.history = [];
-    this.collection = "";
+    // this.history = [];
+    // this.collection = "";
   }
 
   loginDisabled(): boolean {
@@ -130,6 +140,7 @@ export class DownloadGraphComponent implements OnInit {
 
   setRegistry(registry: string) {
     this.registry = registry;
+    localStorage.setItem('1registry', this.registry)
     this.updateParts();
   }
 
@@ -174,6 +185,7 @@ export class DownloadGraphComponent implements OnInit {
     // only allowed to get here when there is one item selected, and it's a collection
     let row = this.selection.selected[0];
     this.history.push(row);
+
     this.selection.clear();
     this.updateParts();
   }
@@ -224,6 +236,9 @@ export class DownloadGraphComponent implements OnInit {
     if (row.type === DownloadGraphComponent.collectionType) {
       this.history.push(row);
       this.collection = row.uri;
+      localStorage.setItem('3collection', this.collection);
+      localStorage.setItem('3collection_history', JSON.stringify(this.history));
+
       this.selection.clear();
       this.updateParts();
     } else if (row.type === DownloadGraphComponent.componentType) {
@@ -297,23 +312,91 @@ export class DownloadGraphComponent implements OnInit {
   }
 
   changeCollection(collection: string) {
+
+
+    if(collection === ""){
+      this.collection = "";
+      localStorage.setItem("3collection", this.collection);
+    }
+
     this.selection.clear();
+
     let found = false;
+    let index;
     for (let i = 0; i < this.history.length; i++) {
-      if (this.history[i] === collection) {
+      if (this.history[i].uri === collection) {
         this.history.length = i + 1;
         found = true;
+        index = i;
         break;
       }
     }
+    if(found){
+      this.history = this.history.filter((_, i)=> i <= index);
+      this.collection = this.history[index].uri;
+      localStorage.setItem('3collection', this.collection);
+      localStorage.setItem('3collection_history', JSON.stringify(this.history));
+    }
+
+
     if (!found)
       this.history.length = 0;
-    this.collection = collection;
+      this.collection = collection;
 
     this.updateParts();
   }
 
+  checkForDuplicateCollection(){
+
+    let seen = [];
+    let namesArray = [];
+
+    for(let i = 0; i < this.history.length; i++){
+      namesArray.push(this.history[i].name);
+    }
+
+    for(let i = 0;  i < namesArray.length; i++){
+      let value = namesArray[i];
+      let index = 0;
+      if(seen.indexOf(value) !== -1){
+
+        index = seen.indexOf(value);
+        this.history = this.history.filter((_, x)=> x >= i);
+        this.collection = this.history[index].uri;
+        localStorage.setItem('3collection', this.collection);
+        localStorage.setItem('3collection_history', JSON.stringify(this.history));
+
+      }
+      seen.push(value);
+    }
+
+  }
+
+  reset(){
+
+    localStorage.clear()
+    this.collection= ''
+    this.registry = ''
+    this.history = []
+}
+
+
   updateParts() {
+    if(localStorage.getItem('1registry') != null && localStorage.getItem('1registry').length > 0)
+      this.registry = localStorage.getItem('1registry')
+
+    if(localStorage.getItem('3collection_history') != null && localStorage.getItem('3collection_history').length > 0)
+    {
+        let collection_history = localStorage.getItem('3collection_history')
+        let historyArray = JSON.parse(collection_history);
+        this.history = historyArray;
+    }
+    if(localStorage.getItem('3collection') != null && localStorage.getItem('3collection').length > 0)
+      this.collection = localStorage.getItem('3collection')
+
+
+    this.checkForDuplicateCollection();
+
     if (this.partRequest && !this.partRequest.closed) {
       this.partRequest.unsubscribe();
     }
@@ -329,8 +412,10 @@ export class DownloadGraphComponent implements OnInit {
           this.filesService.listParts(this.loginService.users[this.registry], this.registry, this.collection, this.partType, roleOrRefine, "components")
         ).subscribe(parts => {
           let partCache = [];
+
           parts[0].forEach(part => {
             part.type = DownloadGraphComponent.collectionType;
+            //console.log("parts.............", part);
             partCache.push(part);
           });
           parts[1].forEach(part => {

SBOLCanvasFrontend/src/app/files.service.ts

@@ -158,10 +158,13 @@ export class FilesService {
       headers = headers.set("Authorization", user);
     let params = new HttpParams();
     params = params.append("server", server);
+
     if (collection != null && collection.length > 0)
       params = params.append("collection", collection);
+
     if (type != null && type.length > 0)
       params = params.append("type", type);
+
     if (role != null && role.length > 0)
       params = params.append("role", role);
     params = params.append("mode", mode);

SBOLCanvasFrontend/src/app/info-editor/info-editor.component.html

@@ -34,7 +34,9 @@
     <mat-label>
       Display ID
     </mat-label>
-    <input matInput id="displayID" value="{{ glyphInfo.displayID }}" (change)="inputChange($event)" matTooltipShowDelay="1000" matTooltip="Must be composed of only alphanumeric or underscore characters and MUST NOT begin with a digit.">
+    <input matInput id="displayID" (change)="inputChange($event)" [formControl]= "glyphCtrl"  matTooltipShowDelay="1000" matTooltip="Must be composed of only alphanumeric or underscore characters and MUST NOT begin with a digit.">
+    <mat-error *ngIf = "glyphCtrl.hasError('required')"> This field is required</mat-error>
+
   </mat-form-field>
 
   <mat-form-field>

SBOLCanvasFrontend/src/app/info-editor/info-editor.component.ts

@@ -12,6 +12,7 @@ import { environment } from 'src/environments/environment';
 import { CombinatorialDesignEditorComponent } from '../combinatorial-design-editor/combinatorial-design-editor.component';
 // import { ThrowStmt } from '@angular/compiler';
 
+import { FormControl, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-info-editor',
@@ -39,6 +40,8 @@ export class InfoEditorComponent implements OnInit {
   glyphInfo: GlyphInfo;
   moduleInfo: ModuleInfo;
   interactionInfo: InteractionInfo;
+  glyphCtrl: FormControl;
+
 
   constructor(private graphService: GraphService, private metadataService: MetadataService, private filesService: FilesService, public dialog: MatDialog, private changeDetector: ChangeDetectorRef) { }
 
@@ -51,6 +54,9 @@ export class InfoEditorComponent implements OnInit {
     this.getRoles();
     this.getInteractions();
     this.getInteractionRoles();
+
+
+
   }
 
   getTypes() {
@@ -59,6 +65,7 @@ export class InfoEditorComponent implements OnInit {
 
   getRoles() {
     this.metadataService.loadRoles().subscribe(roles => this.partRoles = roles);
+
   }
 
   getRefinements(role: string) {
@@ -131,14 +138,18 @@ export class InfoEditorComponent implements OnInit {
     }
   }
 
+
   inputChange(event: any) {
     const id = event.target.id;
-
+   
     switch (id) {
       case 'displayID': {
         const replaced = event.target.value.replace(/[\W_]+/g, '_');
         if (this.glyphInfo != null) {
-          this.glyphInfo.displayID = replaced;
+          if(replaced !== ''){
+            //this.promptDisplayID();  
+            this.glyphInfo.displayID = replaced;
+          }
         } else if (this.interactionInfo != null) {
           this.interactionInfo.displayID = replaced;
         } else if (this.moduleInfo) {
@@ -213,6 +224,8 @@ export class InfoEditorComponent implements OnInit {
    */
   glyphInfoUpdated(glyphInfo: GlyphInfo) {
     this.glyphInfo = glyphInfo;
+
+    this.glyphCtrl = new FormControl( `${this.glyphInfo.displayID}`, Validators.required);
     if (glyphInfo != null) {
       if (glyphInfo.partRole != null) {
         this.getRefinements(glyphInfo.partRole);

SBOLCanvasFrontend/src/app/metadata.service.ts

@@ -65,11 +65,18 @@ export class MetadataService {
   // Definition cannot have multiple strands.
   private componentDefinitionModeSource = new BehaviorSubject(null);
   componentDefinitionMode = this.componentDefinitionModeSource.asObservable();
-
+  private savedRegistry: string;
+  private savedCollection: { collection: string, history: Array<object> };
   // TODO: DNA strand info
 
   constructor(private http: HttpClient) { }
+  getSavedRegistry() {
+    return this.savedRegistry;
+  }
 
+  getSavedCollection() {
+    return this.savedCollection;
+  }
   loadTypes(): Observable<any> {
     return this.http.get(this.typesURL);
   }