glyph images on hierarchy views

SBOLCanvasFrontend/src/app/app.module.ts

@@ -11,6 +11,7 @@ import { DesignMenuComponent } from './design-menu/design-menu.component';
 import { InfoEditorComponent } from './info-editor/info-editor.component';
 import { ProblemsComponent } from './problems/problems.component'
 import { HierarchyPreviewComponent } from './hierarchy-preview/hierarchy-preview.component';
+import { HierarchyGlyphPreviewComponent } from './hierarchy-glyph-preview/hierarchy-glyph-preview.component';
 import { ZoomControlsComponent } from './zoom-controls/zoom-controls.component';
 import { HomeComponent } from './home/home.component';
 import { AppRoutingModule } from './app-routing.module';
@@ -58,6 +59,7 @@ import { EmbeddedService } from './embedded.service';
         InfoEditorComponent,
         ProblemsComponent,
         HierarchyPreviewComponent,
+        HierarchyGlyphPreviewComponent,
         ZoomControlsComponent,
         HomeComponent,
         BannerComponent,

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

@@ -1 +1,5 @@
-<div #canvasContainer></div>
+<div #canvasContainer>
+    <div *ngIf = onHierarchy()>
+        <app-hierarchy-glyph-preview></app-hierarchy-glyph-preview>
+      </div>
+</div>

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

@@ -35,4 +35,7 @@ export class CanvasComponent implements OnInit {
         // set the zoom
         this.graphService.setZoom(newZoom);
     }
+    onHierarchy(){
+        return this.graphService.onhierarchyOpen();
+      }
 }

SBOLCanvasFrontend/src/app/graph-base.ts

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

SBOLCanvasFrontend/src/app/graph-helpers.ts

@@ -1091,30 +1091,30 @@ 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]);
             }
         }
 
-        console.debug("cells added: ");
+        // console.debug("cells added: ");
         if (cellsAdded) {
             for (var i = 0; i < cellsAdded.length; i++) {
                 console.debug(cellsAdded[i]);
             }
         }
 
-        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());

SBOLCanvasFrontend/src/app/graph.service.ts

@@ -33,7 +33,7 @@ export class GraphService extends GraphHelpers {
 
     constructor(dialog: MatDialog, metadataService: MetadataService, glyphService: GlyphService, embeddedService: EmbeddedService, fileService: FilesService) {
         super(dialog, metadataService, glyphService);
-
+     
         // handle selection changes
         this.graph.getSelectionModel().addListener(mx.mxEvent.CHANGE, mx.mxUtils.bind(this, this.handleSelectionChange));
 
@@ -73,6 +73,7 @@ export class GraphService extends GraphHelpers {
         })
     }
 
+
     isSelectedAGlyph(): boolean {
         let selected = this.graph.getSelectionCells();
         if (selected.length != 1) {
@@ -321,23 +322,52 @@ export class GraphService extends GraphHelpers {
     /**
      * "Drills in" to replace the canvas with the selected glyph's component/module view
      */
+    onhierarchyOpen(){
+        return this.should_open;
+    }
+
+    onhierarchyOpenAgain(){
+        return this.should_open_more;
+    }
+
+    getSelectedGlyphName(){
+        return this.selectedGlyphInfoName;
+    }
+
+    getSelectedGlyphNameSet(){
+        return this.selectionGlyphInfoStack;
+    }
+
     enterGlyph() {
+
+        this.should_open = true;
         let selection = this.graph.getSelectionCells();
+        console.log("stack size----", this.viewStack.length);
+
+
         if (selection.length != 1) {
             return;
         }
-
+        if(this.viewStack.length == 2){
+            this.should_open_more = true;
+        }
         if (!selection[0].isSequenceFeatureGlyph() && !selection[0].isModule()) {
             return;
         }
-
+        
         this.graph.getModel().beginUpdate();
         try {
             let viewCell = this.graph.getModel().getCell(selection[0].getValue());
             // 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);
+            console.log("selection[0]", selection[0]);
+            console.log("selection stack: ", this.selectionStack);
+            console.log("selectedGlyphInfo Name", this.selectionGlyphInfoStack);
         } finally {
             this.graph.getModel().endUpdate();
         }
@@ -350,10 +380,14 @@ export class GraphService extends GraphHelpers {
      */
     exitGlyph() {
         // the root view should always be left on the viewStack
+
+        if(this.selectionStack.length == 1){
+            this.should_open = false;
+        }
         if (this.viewStack.length > 1) {
             let zoomEdit = new GraphEdits.zoomEdit(this.graph.getView(), null, this);
             this.graph.getModel().execute(zoomEdit);
-        }
+        } 
     }
 
     /**
@@ -770,17 +804,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 +823,13 @@ export class GraphService extends GraphHelpers {
 
             // Add it
             this.addSequenceFeatureAt(name, x, y, circuitContainer);
+
         } finally {
             this.graph.getModel().endUpdate();
         }
     }
 
+
     /**
      * Adds a sequenceFeatureGlyph.
      *
@@ -843,7 +877,6 @@ 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
@@ -884,6 +917,32 @@ export class GraphService extends GraphHelpers {
             this.graph.getModel().endUpdate();
         }
     }
+    addSequenceFeaturesNoBackBone(name){
+
+        this.addSequenceFeaturesAtWithOutBackBoneAt(name, 350, -300);
+    }
+
+    addSequenceFeaturesAtWithOutBackBoneAt(name, x, y) {
+        this.graph.getModel().beginUpdate();
+        try {
+            const glyphInfo = new GlyphInfo({
+                partRole: name
+            });
+            this.addToInfoDict(glyphInfo);
+            //TODO partRoles for proteins
+
+            const sequenceFeatureCell = this.graph.insertVertex(this.graph.getDefaultParent(), null, glyphInfo.getFullURI(), x, y, GraphBase.sequenceFeatureGlyphWidth, GraphBase.sequenceFeatureGlyphHeight, GraphBase.STYLE_SEQUENCE_FEATURE + name);
+
+            this.createViewCell(glyphInfo.getFullURI());
+            sequenceFeatureCell.setConnectable(true);
+
+            // The new glyph should be selected
+            this.graph.clearSelection();
+            this.graph.setSelectionCell(sequenceFeatureCell);
+        } finally {
+            this.graph.getModel().endUpdate();
+        }
+    }
 
     /**
      * Turns the given element into a dragsource for creating molecular species glyphs

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

@@ -0,0 +1,15 @@
+.hierarchy-glyphs {
+    position: absolute;
+    top : 60px;
+    bottom: 10;
+    right: 15px;
+    width: 70px;
+    height : 70px;
+    border-radius: 8px;
+    background-color: white;
+    border: 3px solid #ddd;
+    color: grey;
+    display: flex;
+    align-items: left;
+    justify-content: right;
+}

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

@@ -0,0 +1,3 @@
+<div class="hierarchy-glyphs" >
+  <svg #glyphContent [innerHTML]='svgHTML'></svg>
+</div>

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

@@ -0,0 +1,75 @@
+
+import {Component, OnInit, OnChanges, ViewChildren, QueryList, ElementRef, ViewEncapsulation, Input} from '@angular/core';
+import {GraphService} from '../graph.service';
+import {GlyphService} from '../glyph.service';
+import {DomSanitizer} from '@angular/platform-browser';
+import {MetadataService} from '../metadata.service';
+
+
+@Component({
+  selector: 'app-hierarchy-glyph-preview',
+  templateUrl: './hierarchy-glyph-preview.component.html',
+  styleUrl: './hierarchy-glyph-preview.component.css'
+})
+export class HierarchyGlyphPreviewComponent implements OnChanges, OnInit {
+    constructor(private graphService: GraphService, private glyphService: GlyphService, private sanitizer: DomSanitizer) { }
+
+    @Input() glyphName: string; 
+    public sequenceFeatureDict = {};
+    public svgHTML  : string;
+    public glyphStack: string[] = [];
+
+    ngOnInit(): void {
+      if(this.graphService.onhierarchyOpen()) {
+        this.registerSVGfirst();
+      }
+    }
+    ngOnChanges(): void {
+
+      if(this.graphService.onhierarchyOpen()) {
+        console.log("updates!!!!", this.glyphName);
+        this.svgHTML = "";
+        this.registerSVGelements();
+      }
+    }
+
+    showGlyph(){
+
+        console.log("showing glyph", this.graphService.getSelectedGlyphName());
+        this.graphService.addSequenceFeaturesNoBackBone(this.graphService.getSelectedGlyphName());
+        //this.registerSVGelements();
+    }
+
+    registerSVGfirst(){
+      const sequenceFeatureElts   = this.glyphService.getSequenceFeatureElements();
+      let name = this.graphService.getSelectedGlyphName();
+      const svg = sequenceFeatureElts[name];
+      this.sequenceFeatureDict[name] = this.sanitizer.bypassSecurityTrustHtml(svg.innerHTML);
+      this.svgHTML = this.sequenceFeatureDict[name];
+    }
+    onHierarchyAgain(){
+      return this.graphService.onhierarchyOpenAgain();
+    }
+
+
+    registerSVGelements(){
+      this.svgHTML = "";
+      const sequenceFeatureElts   = this.glyphService.getSequenceFeatureElements();
+      let name = this.glyphName;
+      const svg = sequenceFeatureElts[name];
+      console.log("selected svg!!!!", name);
+
+      this.sequenceFeatureDict[name] = this.sanitizer.bypassSecurityTrustHtml(svg.innerHTML);
+      console.log("selected svg dict!!", this.sequenceFeatureDict[name]);
+      this.svgHTML = this.sequenceFeatureDict[name];
+      console.log("svg image html", this.svgHTML);
+      let selectedStack = this.graphService.getSelectedGlyphNameSet();
+      // for(const selectedGlyphName in selectedStack){
+
+      // }
+
+    }
+
+
+
+}

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

@@ -106,10 +106,11 @@
 
             <button mat-stroked-button class="toolbar-row-button"
                 [matTooltip]="'Focus in the selected part to view and edit its subparts'"
-                (click)="graphService.enterGlyph()">
+                (click)="enterGlyph()">
+                <app-hierarchy-glyph-preview [glyphName] = "newGlyphName"></app-hierarchy-glyph-preview>
                 <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>

SBOLCanvasFrontend/src/app/toolbar/toolbar.component.ts

@@ -25,11 +25,11 @@ export interface LoadDialogData {
 export class ToolbarComponent implements OnInit, AfterViewInit {
 
   @ViewChild('backbone') backbone: ElementRef;
-
+  @ViewChild('canvasContainer', {static: true}) canvasContainer: ElementRef;
   filename: string;
   popupOpen: boolean;
   users: {};
-
+  newGlyphName: string;
   constructor(public graphService: GraphService, private filesService: FilesService,
               public dialog: MatDialog, public embeddedService: EmbeddedService) {
   }
@@ -129,4 +129,10 @@ export class ToolbarComponent implements OnInit, AfterViewInit {
     this.graphService.addMolecularSpecies("replacement-glyph");
     this.graphService.addInteractionNode("replacement-glyph");
   }
+
+  enterGlyph(){
+    this.graphService.enterGlyph();
+    this.newGlyphName = this.graphService.getSelectedGlyphName();
+    console.log("tool bar updated glyph name", this.graphService.getSelectedGlyphName());
+  }
 }