Hierarchy preview glyph box updates

SBOLCanvasFrontend/src/app/canvas/canvas.component.html

@@ -1 +1,3 @@
-<div #canvasContainer></div>
+<div #canvasContainer>
+
+</div>

SBOLCanvasFrontend/src/app/canvas/canvas.component.ts

@@ -1,24 +1,27 @@
-import { Component, ElementRef, OnInit, ViewChild, HostListener } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild, HostListener, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { GraphService } from '../graph.service';
 
 @Component({
     selector: 'app-canvas',
     templateUrl: './canvas.component.html',
     styleUrls: ['./canvas.component.css']
 })
-export class CanvasComponent implements OnInit {
+export class CanvasComponent implements OnInit, OnChanges {
 
     constructor(
         private graphService: GraphService
     ) { }
-
+    
     @ViewChild('canvasContainer', {static: true}) canvasContainer: ElementRef;
 
     ngOnInit() {
         const canvasContainer = this.canvasContainer.nativeElement;
         const svg = this.graphService.getGraphDOM();
         canvasContainer.appendChild(svg);
     }
+    ngOnChanges(): void {
+
+    }
 
     @HostListener('wheel', ['$event']) onMouseWheel(event: WheelEvent) {
         const zoomCoef = -1 / 1000,
@@ -35,4 +38,5 @@ export class CanvasComponent implements OnInit {
         // set the zoom
         this.graphService.setZoom(newZoom);
     }
+
 }

SBOLCanvasFrontend/src/app/graph-base.ts

@@ -90,6 +90,12 @@ export class GraphBase {
     // This object handles the hotkeys for the graph.
     keyHandler: any;
 
+
+    selectedGlyphInfoName : string;
+    selectionGlyphInfoStack: string[] = [];
+    sequenceFeatureDict = {};
+    selectedHTMLStack = [];
+    isGen :boolean = false;
     // when decoding we add any unformatted view cells to this set
     static unFormatedCells = new Set<string>();
 

SBOLCanvasFrontend/src/app/graph-edits.ts

@@ -126,6 +126,7 @@ export class GraphEdits {
                 // Zoom into the glyph
                 // get the view cell for the selected cell
                 let childViewCell;
+                console.log("glyphCell.value", this.glyphCell.value);
                 if (!this.glyphCell.value) {
                     childViewCell = this.glyphCell;
                 } else {

SBOLCanvasFrontend/src/app/graph-helpers.ts

@@ -21,6 +21,7 @@ import { CombinatorialInfo } from './combinatorialInfo';
 import { VariableComponentInfo } from './variableComponentInfo';
 import { IdentifiedInfo } from './identifiedInfo';
 import { InteractionInfo } from './interactionInfo';
+import { ignoreElements } from 'rxjs';
 // import { SystemJsNgModuleLoader } from '@angular/core';
 
 /**
@@ -1091,9 +1092,9 @@ export class GraphHelpers extends GraphBase {
         var cellsRemoved = evt.getProperty('added');
         var cellsAdded = evt.getProperty('removed');
 
-        console.debug("----handleSelectionChange-----");
+        // console.debug("----handleSelectionChange-----");
 
-        console.debug("cells removed: ");
+        // console.debug("cells removed: ");
         if (cellsRemoved) {
             for (var i = 0; i < cellsRemoved.length; i++) {
                 console.debug(cellsRemoved[i]);
@@ -1107,16 +1108,17 @@ export class GraphHelpers extends GraphBase {
             }
         }
 
-        console.debug("Current root: ");
-        console.debug(this.graph.getCurrentRoot());
+        // console.debug("Current root: ");
+        // console.debug(this.graph.getCurrentRoot());
 
-        console.debug("Undo manager: ");
-        console.debug(this.editor.undoManager);
+        // console.debug("Undo manager: ");
+        // console.debug(this.editor.undoManager);
 
-        console.debug("Graph Model: ");
-        console.debug(this.graph.getModel());
+        // console.debug("Graph Model: ");
+        // console.debug(this.graph.getModel());
 
         // Don't just use the new cells though, use all currently selected ones.
+
         this.updateAngularMetadata(this.graph.getSelectionCells());
     }
 
@@ -1161,8 +1163,14 @@ export class GraphHelpers extends GraphBase {
             let glyphInfo;
             if (!cell)
                 glyphInfo = this.getFromInfoDict(this.graph.getCurrentRoot().getId());
-            else
+            else{
                 glyphInfo = this.getFromInfoDict(cell.value);
+
+                if(cell.isCircuitContainer()){
+                    glyphInfo.partRole = 'Gen (Engineered Region)';
+                }
+
+            }
             if (glyphInfo) {
                 this.metadataService.setSelectedGlyphInfo(glyphInfo.makeCopy());
             }

SBOLCanvasFrontend/src/app/graph.service.ts

@@ -25,15 +25,16 @@ import { EmbeddedService } from './embedded.service';
 import { FilesService } from './files.service';
 import { Observable } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
-
+import { DomSanitizer } from '@angular/platform-browser';
 @Injectable({
     providedIn: 'root'
 })
 export class GraphService extends GraphHelpers {
 
-    constructor(dialog: MatDialog, metadataService: MetadataService, glyphService: GlyphService, embeddedService: EmbeddedService, fileService: FilesService) {
+    constructor(dialog: MatDialog, metadataService: MetadataService, glyphService: GlyphService, embeddedService: EmbeddedService, fileService: FilesService,
+        private sanitizer: DomSanitizer) {
         super(dialog, metadataService, glyphService);
-
+     
         // handle selection changes
         this.graph.getSelectionModel().addListener(mx.mxEvent.CHANGE, mx.mxUtils.bind(this, this.handleSelectionChange));
 
@@ -321,23 +322,51 @@ export class GraphService extends GraphHelpers {
     /**
      * "Drills in" to replace the canvas with the selected glyph's component/module view
      */
+
+    getSelectedGlyphName(){
+        return this.selectedGlyphInfoName;
+    }
+
+    getSelectedGlyphNameSet(){
+        return this.selectionGlyphInfoStack;
+    }
+    getSelectedHTMLSet(){
+        return this.selectedHTMLStack;
+    }
+
+
     enterGlyph() {
+
         let selection = this.graph.getSelectionCells();
+        console.log(selection[0].isCircuitContainer());
+        console.log("isSequenceFeatureGlyph? " , selection[0].isSequenceFeatureGlyph());
         if (selection.length != 1) {
             return;
         }
-
-        if (!selection[0].isSequenceFeatureGlyph() && !selection[0].isModule()) {
-            return;
-        }
-
+    
+        // if (!selection[0].isSequenceFeatureGlyph() && !selection[0].isModule()) {
+        //     return;
+        // }
+        
         this.graph.getModel().beginUpdate();
         try {
             let viewCell = this.graph.getModel().getCell(selection[0].getValue());
+            console.log("ViewCell", viewCell);
             // doing this in the graph edit breaks things in the undo, so we put it here
             viewCell.refreshViewCell(this.graph);
             let zoomEdit = new GraphEdits.zoomEdit(this.graph.getView(), selection[0], this);
+            let glyphInfo = (<GlyphInfo>this.getFromInfoDict(selection[0].getValue())); 
+            this.selectedGlyphInfoName = glyphInfo.partRole;
+
+            this.selectionGlyphInfoStack.push(this.selectedGlyphInfoName);
             this.graph.getModel().execute(zoomEdit);
+
+            const sequenceFeatureElts   = this.glyphService.getSequenceFeatureElements(); 
+            let svg = sequenceFeatureElts[this.selectedGlyphInfoName];
+            this.sequenceFeatureDict[this.selectedGlyphInfoName] = this.sanitizer.bypassSecurityTrustHtml(svg.innerHTML);
+            this.selectedHTMLStack.push(this.sequenceFeatureDict[this.selectedGlyphInfoName]);
+
+
         } finally {
             this.graph.getModel().endUpdate();
         }
@@ -350,9 +379,17 @@ export class GraphService extends GraphHelpers {
      */
     exitGlyph() {
         // the root view should always be left on the viewStack
+
         if (this.viewStack.length > 1) {
             let zoomEdit = new GraphEdits.zoomEdit(this.graph.getView(), null, this);
             this.graph.getModel().execute(zoomEdit);
+
+            this.selectionGlyphInfoStack.pop();
+            this.selectedHTMLStack.pop();
+
+        } 
+        else{
+            this.selectedHTMLStack = [];
         }
     }
 
@@ -416,6 +453,7 @@ export class GraphService extends GraphHelpers {
      */
     async delete() {
         const selectedCells = this.graph.getSelectionCells();
+
         if (selectedCells == null) {
             return;
         }
@@ -770,17 +808,15 @@ export class GraphService extends GraphHelpers {
             // let the graph choose an arbitrary cell from the selection,
             // we'll pretend it's the only one selected
             const selection = this.graph.getSelectionCell();
-
             // if selection is nonexistent, or is not part of a strand, there is no suitable place.
             if (!selection || !(selection.isSequenceFeatureGlyph() || selection.isCircuitContainer())) {
                 return;
             }
 
             const circuitContainer = selection.isCircuitContainer() ? selection : selection.getParent();
-
             // use y coord of the strand
             let y = circuitContainer.getGeometry().y;
-
+           
             // x depends on the exact selection
             let x;
             if (selection.isCircuitContainer()) {
@@ -791,11 +827,13 @@ export class GraphService extends GraphHelpers {
 
             // Add it
             this.addSequenceFeatureAt(name, x, y, circuitContainer);
+
         } finally {
             this.graph.getModel().endUpdate();
         }
     }
 
+
     /**
      * Adds a sequenceFeatureGlyph.
      *
@@ -843,13 +881,11 @@ export class GraphService extends GraphHelpers {
             // transform coords to be relative to parent
             x = x - circuitContainer.getGeometry().x;
             y = y - circuitContainer.getGeometry().y;
-
             // create the glyph info and add it to the dictionary
             const glyphInfo = new GlyphInfo({
                 partRole: name
             });
             this.addToInfoDict(glyphInfo);
-
             // Insert new glyph and its components
             const sequenceFeatureCell = this.graph.insertVertex(circuitContainer, null, glyphInfo.getFullURI(), x, y, GraphBase.sequenceFeatureGlyphWidth, GraphBase.sequenceFeatureGlyphHeight, GraphBase.STYLE_SEQUENCE_FEATURE + name);
 
@@ -884,7 +920,7 @@ export class GraphService extends GraphHelpers {
             this.graph.getModel().endUpdate();
         }
     }
-
+   
     /**
      * Turns the given element into a dragsource for creating molecular species glyphs
      */
@@ -1175,7 +1211,6 @@ export class GraphService extends GraphHelpers {
      */
     async setSelectedCellInfo(info: Info) {
         const selectedCell = this.graph.getSelectionCell();
-
         this.graph.getModel().beginUpdate();
         try {
             // figure out which type of info object it is

SBOLCanvasFrontend/src/app/hierarchy-preview/hierarchy-preview.component.css

@@ -10,8 +10,8 @@
 }
 
 .hierarchy-controls .level {
-    width: 4em;
-    height: 3em;
+    width: 6em;
+    height: 4em;
     margin: 8px;
     font-family: 'Roboto';
     cursor: pointer;

SBOLCanvasFrontend/src/app/hierarchy-preview/hierarchy-preview.component.html

@@ -1,8 +1,8 @@
-<div class="hierarchy-controls">
+<div class="hierarchy-controls" >
+
     <div *ngFor="let depth of getViewStack(); let i = index" (click)="switchView(i)" class="level">
         <span>
-            {{i == 0 && "Top" || i}}
-            <!-- <svg #canvasElement [attr.glyphStyle]="pair.key" width="52px" height="52px" [innerHTML]="pair.value"></svg> -->
+            <svg [innerHTML] = 'selectedHTMLStack[i]' width="52px" height="52px"></svg>
         </span>
     </div>
 </div>

SBOLCanvasFrontend/src/app/hierarchy-preview/hierarchy-preview.component.ts

@@ -1,26 +1,35 @@
-import { Component } from '@angular/core'
+import { Component, Input, OnInit } from '@angular/core'
 import { GraphService } from '../graph.service'
-
-
+import { GlyphService } from '../glyph.service';
+import { DomSanitizer } from '@angular/platform-browser';
 @Component({
     selector: 'app-hierarchy-preview',
     templateUrl: './hierarchy-preview.component.html',
     styleUrls: ['./hierarchy-preview.component.css']
 })
 
-export class HierarchyPreviewComponent {
+export class HierarchyPreviewComponent   {
+
+
+    constructor(private graphService: GraphService, private glyphService: GlyphService, private sanitizer : DomSanitizer) { }
 
-    constructor(private graphService: GraphService) { }
+    glyphName: string;
+    selectedStack = [];
+    selectedHTMLStack = [];
+
+    getViewStack() {       
+        this.glyphName = this.graphService.getSelectedGlyphName();
+        this.selectedStack = this.graphService.getSelectedGlyphNameSet();
+        this.selectedHTMLStack = this.graphService.getSelectedHTMLSet();
 
-    getViewStack() {
-        // console.log(this.glyphMenu.sequenceFeatureDict)
         return this.graphService.viewStack
     }
 
     switchView(depth) {
         let levels = this.graphService.viewStack.length - depth - 1
-
-        for (let i = 0; i < levels; i++)
+        
+        for (let i = 0; i < levels; i++){
             this.graphService.exitGlyph()
+        }
     }
 }

SBOLCanvasFrontend/src/app/toolbar/toolbar.component.css

@@ -28,4 +28,5 @@
 
 .toolbar-row-section.grow {
     flex-grow: 1;
-}
+}
+

SBOLCanvasFrontend/src/app/toolbar/toolbar.component.html

@@ -107,9 +107,10 @@
             <button mat-stroked-button class="toolbar-row-button"
                 [matTooltip]="'Focus in the selected part to view and edit its subparts'"
                 (click)="graphService.enterGlyph()">
+
                 <mat-icon>save_alt</mat-icon>
-            </button>
-
+                
+         </button>
             <button mat-stroked-button class="toolbar-row-button" [matTooltip]="'Focus out to the parent part'"
                 (click)="graphService.exitGlyph()">
                 <mat-icon>open_in_browser</mat-icon>
@@ -138,4 +139,4 @@
         </div>
 
     </mat-toolbar-row>
-</mat-toolbar>
+</mat-toolbar>