Merge pull request #356 from SynBioDex/update-tutorial

Updated tutorial

.gitignore

@@ -1,3 +1,4 @@
 desktop.ini
 *.war
-*.class
+*.class
+.vscode/tasks.json 

SBOLCanvasFrontend/src/app/graph-helpers.ts

@@ -901,9 +901,17 @@ export class GraphHelpers extends GraphBase {
         let options = []
         if (viewCell.children) {
             for (let viewChild of viewCell.children) {
-                if (viewChild.isCircuitContainer() || viewChild.isMolecularSpeciesGlyph()) {
-                    let info = <GlyphInfo>this.getFromInfoDict(viewChild.getValue()).makeCopy()
+                if (viewChild.isCircuitContainer()) {
+                    for (let child of viewChild.children){
+                        if (child.isSequenceFeatureGlyph() && !(child.isCircularBackbone() || child.isChromosomalLocus())){
+                            let info = <GlyphInfo>this.getFromInfoDict(child.getValue()).makeCopy()
+                            options.push({ id: viewChild.getId(), info: info })
+                        }
+                    }
                     //TODO if(info.visibility == public && (info.direction == in || inout && from == false) || out)
+                }
+                else if(viewChild.isMolecularSpeciesGlyph()){
+                    let info = <GlyphInfo>this.getFromInfoDict(viewChild.getValue()).makeCopy()
                     options.push({ id: viewChild.getId(), info: info })
                 }
                 //TODO what do we do if it's a module?

SBOLCanvasFrontend/src/app/tutorial/tutorial.component.html

@@ -191,11 +191,13 @@ <h2 id="substructure">
           There are two forms of substructure in SBOLCanvas. Substructure for sequence features, and substructure for modules. Both can be accessed by selecting the part you wish to modify and clicking the enter part button on the toolbar. In this case I will modify our Terminator.
           <br>
           <img src="assets/tutorial_pics/Substructure/terminator.png" />
-          <img src="assets/tutorial_pics/Substructure/enterPart.png" />
+          <img src="assets/tutorial_pics/Substructure/enterPart.png" style="margin-left: 1rem;" />
           <br>
           From here we are now in a component view representing our selected terminator. We can only add parts that are allowed inside a component (e.g. sequence features and text boxes). For this example I will add two terminators to have our top level terminator signify a double terminator.
+          We can also see what part we are currently in by looking at the Hierarchy Preview on the bottom right.
           <br>
           <img src="assets/tutorial_pics/Substructure/terminatorSubParts.png" />
+          <img src="assets/tutorial_pics/Substructure/subPartHierarchy.png" style="margin-left: 1rem;">
           <br>
           When we zoom back out you can now see that our terminator has substructure by the composite indicator beneath it.
           <br>
@@ -204,8 +206,8 @@ <h2 id="substructure">
           This can also be done with modules. Once you've entered a module, you are now in a module view and can add parts that are allowed inside modules (e.g. backbones, modules, molecular species, interactions, and text boxes). For this example I'll add a basic circuit.
           <br>
           <img src="assets/tutorial_pics/Substructure/module.png" />
-          <img src="assets/tutorial_pics/Substructure/enterPart.png" />
-          <img src="assets/tutorial_pics/Substructure/moduleSubstructure.png" />
+          <img src="assets/tutorial_pics/Substructure/enterPart.png" style="margin-left: 1rem;" />
+          <img src="assets/tutorial_pics/Substructure/moduleSubstructure.png" style="margin-left: 1rem;" />
         </p>
       </ul>
 
@@ -221,9 +223,9 @@ <h2 id="addingInteractions">
           The other way of adding interactions is by selecting two parts and then clicking an interaction in the glyph menu. The first part selected will be the source of the interaction.
           <br>
           <img src="assets/tutorial_pics/AddingInteractions/selectionBefore.png" />
-          <img src="assets/tutorial_pics/AddingInteractions/selectionAfter.png" />
+          <img src="assets/tutorial_pics/AddingInteractions/selectionAfter.png" style="margin-left: 1rem;" />
           <br>
-          If you are connecting an interaction to a module, a list of parts within the module is displayed for your selection. In this case the module has two molecular species in it with DisplayID's id11 and id13
+          If you are connecting an interaction to a module, a list of parts within the module is displayed for your selection. In this case the module has two molecular species in it. 
           <br>
           <img src="assets/tutorial_pics/AddingInteractions/moduleInteraction.png" />
         </p>