From 8ba0096a833babc0875d142cb73afad3cd075b6c Mon Sep 17 00:00:00 2001
From: asadeg02 <arezu.sadeghi@gmail.com>
Date: Sun, 18 Nov 2018 02:33:52 -0500
Subject: [PATCH 01/12] Fix rendering for rna and sbgn-complex degradation

---
 font/sbolv/complex.js                          | 18 +++++++++---------
 .../interaction-arrows/degradationArrow.js     | 16 ++++++++--------
 lib/segment.js                                 |  2 +-
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/font/sbolv/complex.js b/font/sbolv/complex.js
index 5edf8e6..17069a9 100644
--- a/font/sbolv/complex.js
+++ b/font/sbolv/complex.js
@@ -4,17 +4,17 @@ var Rect = require('../../lib/geom/rect')
 function createGeometry(boxSize) {
   var x = boxSize.x;
   var y = boxSize.y;
-  console.log(boxSize.x)
+  
 return {
 
-  topLeft: Vec2(-0.25*x,y*0.2),
-    leftOne: Vec2(-0.5*x,y*0.4),
-    leftTwo: Vec2(-0.5*x,y*0.8),
-  bottomLeft: Vec2(-0.25*x,y),
-  bottomRight: Vec2(x,y),
-    rightOne: Vec2(1.25*x,y*0.4),
-    rightTwo: Vec2(1.25*x,y*0.8),
-  topRight: Vec2(x,y*0.2),
+  topLeft: Vec2(0.25*x,y*0.2),
+    leftOne: Vec2(0,y*0.4),
+    leftTwo: Vec2(0,y*0.8),
+  bottomLeft: Vec2(0.25*x,y),
+  bottomRight: Vec2(1.5 *x,y),
+    rightOne: Vec2(1.75*x,y*0.4),
+    rightTwo: Vec2(1.75*x,y*0.8),
+  topRight: Vec2(1.5 * x,y*0.2),
 
 };
 }
diff --git a/font/sbolv/interaction-arrows/degradationArrow.js b/font/sbolv/interaction-arrows/degradationArrow.js
index b4b67df..ee93f06 100644
--- a/font/sbolv/interaction-arrows/degradationArrow.js
+++ b/font/sbolv/interaction-arrows/degradationArrow.js
@@ -6,13 +6,13 @@ function createGeometry(boxSize) {
    
     return {
          
-        left: Vec2(boxSize.x,boxSize.y * 0.5),
-        right: Vec2(1.5*boxSize.x, boxSize.y * 0.5),
-        arrowTop:Vec2(1.5 * boxSize.x, boxSize.y * 0.4), 
-        arrowBottom:Vec2(1.5 * boxSize.x, boxSize.y * 0.6),
-        arrowPick:Vec2(boxSize.x * 1.6, boxSize.y * 0.5),
-        lineTop:Vec2(boxSize.x * 2, boxSize.y/2 - boxSize.y/8),
-        lineBottom:Vec2(boxSize.x * 1.7, boxSize.y/2 + boxSize.y/8)
+        left: Vec2(0,boxSize.y * 0.5),
+        right: Vec2(0.5*boxSize.x, boxSize.y * 0.5),
+        arrowTop:Vec2(0.5 * boxSize.x, boxSize.y * 0.4), 
+        arrowBottom:Vec2(0.5 * boxSize.x, boxSize.y * 0.6),
+        arrowPick:Vec2(boxSize.x * 0.6, boxSize.y * 0.5),
+        lineTop:Vec2(boxSize.x * 1.05, boxSize.y/2 - boxSize.y/8),
+        lineBottom:Vec2(boxSize.x * 0.8, boxSize.y/2 + boxSize.y/8)
     };
 }
 
@@ -43,7 +43,7 @@ function renderGlyph(design, glyphObject, boxSize) {
     glyph.attr('stroke-width', glyphObject.thickness || '3px');
     glyph.attr('fill', '#000080');
 
-    circle.center(boxSize.x * 1.85, boxSize.y/2)
+    circle.center(boxSize.x * (0.6 + 1/3), boxSize.y/2)
     circle.attr('stroke', '#000080');
     circle.attr('fill', 'none');
     circle.attr('stroke-width', glyphObject.thickness || '3px');
diff --git a/lib/segment.js b/lib/segment.js
index 7cdd58c..efead70 100755
--- a/lib/segment.js
+++ b/lib/segment.js
@@ -292,7 +292,7 @@ function renderSegment(design, segment, interactions) {
         else if (segment.role === "degradationReactant") {
 
            var arrowPos = Matrix();
-           var arrowOffset = Vec2(0, -boundingBoxSize.y);
+           var arrowOffset = Vec2(group.bbox().width + 5, -boundingBoxSize.y);
            var arrowTransform = Matrix.multiply( Matrix.translation(arrowOffset), arrowPos );
            var arrowProps = Arrows.DegradationArrow.render(design, glyphObject, boundingBoxSize );
            var arrowGlyph = arrowProps.glyph;

From bc65b9ac9ccf3de57d44e7fac83a558977436616 Mon Sep 17 00:00:00 2001
From: Stephanie Gomez <stephanie.a.gomez95@gmail.com>
Date: Tue, 24 Jul 2018 14:54:36 -0400
Subject: [PATCH 02/12] added protein-protein complex and rna-protein complex

---
 font/sbolv/protein-protein-complex.js |  74 ++++++++++++
 font/sbolv/rna-protein-complex.js     | 158 ++++++++++++++++++++++++++
 2 files changed, 232 insertions(+)
 create mode 100644 font/sbolv/protein-protein-complex.js
 create mode 100644 font/sbolv/rna-protein-complex.js

diff --git a/font/sbolv/protein-protein-complex.js b/font/sbolv/protein-protein-complex.js
new file mode 100644
index 0000000..504792e
--- /dev/null
+++ b/font/sbolv/protein-protein-complex.js
@@ -0,0 +1,74 @@
+var Vec2 = require('../../lib/geom/vec2')
+var Rect = require('../../lib/geom/rect')
+
+function renderGlyph(design, glyphObject, boxSize) {
+
+var largeCircle = design.surface.circle(boxSize.x/2);
+var largeCircle2 = design.surface.circle(boxSize.x/2);
+var smallCircle = design.surface.circle(boxSize.x/4);
+var smallCircle2 = design.surface.circle(boxSize.x/4);
+var smallBox = design.surface.rect(boxSize.x/6,boxSize.y/9);
+var smallBox2 = design.surface.rect(boxSize.x/3,boxSize.y/7);
+var group = design.surface.group();
+
+largeCircle.attr('stroke','black');
+largeCircle.attr('fill', glyphObject.color || '#F1948A');
+largeCircle.attr('stroke-width', glyphObject.thickness ||'2px');
+largeCircle.attr('stroke-linejoin', 'round');
+largeCircle.attr({ cx: boxSize.x/2, cy: boxSize.y/2})
+largeCircle.radius(20)
+
+largeCircle2.attr('stroke','black');
+largeCircle2.attr('fill', glyphObject.color || '#F1948A');
+largeCircle2.attr('stroke-width', glyphObject.thickness ||'2px');
+largeCircle2.attr('stroke-linejoin', 'round');
+largeCircle2.attr({ cx: 0, cy: boxSize.y/2})
+largeCircle2.radius(20)
+
+smallCircle.attr('stroke','black');
+smallCircle.attr('fill', glyphObject.color || '#F1948A');
+smallCircle.attr('stroke-width', glyphObject.thickness ||'2px');
+smallCircle.attr('stroke-linejoin', 'round');
+smallCircle.attr({ cx: boxSize.x/5, cy: boxSize.y/1.1 })
+
+smallCircle2.attr('stroke','black');
+smallCircle2.attr('fill', glyphObject.color || '#F1948A');
+smallCircle2.attr('stroke-width', glyphObject.thickness ||'2px');
+smallCircle2.attr('stroke-linejoin', 'round');
+smallCircle2.attr({ cx: -boxSize.x/4, cy: boxSize.y/1.1 })
+
+smallBox.attr('stroke','dark gray');
+smallBox.attr('fill', glyphObject.color || '#F1948A');
+smallBox.attr('stroke-width', glyphObject.thickness ||'2px');
+smallBox.attr('stroke-linejoin', 'round');
+smallBox.attr({ x: boxSize.x/4.8, y: boxSize.y/1.32 })
+
+smallBox2.attr('stroke','dark gray');
+smallBox2.attr('fill', glyphObject.color || '#F1948A');
+smallBox2.attr('stroke-width', glyphObject.thickness ||'2px');
+smallBox2.attr('stroke-linejoin', 'round');
+smallBox2.attr({ x: -boxSize.x/3.5, y: boxSize.y/1.35 })
+
+group.add(largeCircle);
+group.add(smallCircle);
+group.add(smallBox);
+group.add(largeCircle2);
+group.add(smallCircle2);
+group.add(smallBox2);
+
+
+if(glyphObject.uri){
+    group.attr('data-uri', glyphObject.uri)
+  }
+
+return {
+    glyph: group,
+    backboneOffset: boxSize.y
+};
+}
+
+module.exports = {
+
+render: renderGlyph
+
+};
diff --git a/font/sbolv/rna-protein-complex.js b/font/sbolv/rna-protein-complex.js
new file mode 100644
index 0000000..63dbfe9
--- /dev/null
+++ b/font/sbolv/rna-protein-complex.js
@@ -0,0 +1,158 @@
+
+var Vec2 = require('../../lib/geom/vec2')
+var Rect = require('../../lib/geom/rect')
+
+function createGeometry(boxSize) {
+
+    function createTangentLine(pointA, pointB) {
+
+      var lengthX = pointB.x - pointA.x;
+      var lengthY = pointB.y - pointA.y;
+
+      return {
+          length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
+          angle: Math.atan2(lengthY, lengthX)
+      };
+
+    }
+
+    function createControlPoint(current, previous, next) {
+
+         const smoothing = 0.2;
+         var p = (previous === null) ? current : previous;
+         var n = (next === null) ? current: next;
+
+         var line = createTangentLine(n,p);
+
+         return {
+             x: current.x + (Math.cos(line.angle + Math.PI) * line.length * smoothing),
+             y: current.y + (Math.sin(line.angle + Math.PI) * line.length * smoothing)
+         };
+    }
+    // Coordinates of Points to Connect
+    var x = boxSize.x;
+    var y = boxSize.y;
+    var stepSize = 3*x/14
+    var pointA = Vec2(5*x/4, y);
+    var pointB = Vec2(pointA.x - stepSize, 3*y/4);
+    var pointC = Vec2(pointA.x - 2*stepSize, y );
+    var pointD = Vec2(pointA.x - 3*stepSize, 3*y/4);
+    var pointE = Vec2(pointA.x - 4*stepSize, y );
+    var pointF = Vec2(pointA.x - 5*stepSize, 3*y/4);
+    var pointG = Vec2(pointA.x - 6*stepSize, y );
+    var pointH = Vec2(pointA.x - 7*stepSize, 3*y/4);
+
+
+    //Coordinates of Control Points
+    var controlPoint1 = createControlPoint(pointA, pointB, null);
+    var controlPoint2 = createControlPoint(pointB, pointC, pointA);
+    var controlPoint3 = createControlPoint(pointC, pointD, pointB );
+    var controlPoint4 = createControlPoint(pointD, pointE, pointC);
+    var controlPoint5 = createControlPoint(pointE, pointF, pointD);
+    var controlPoint6 = createControlPoint(pointF, pointG, pointE);
+    var controlPoint7 = createControlPoint(pointG, pointH, pointF);
+    var controlPoint8 = createControlPoint(pointH, null, pointG);
+
+
+
+    return {
+
+
+       //coordinate of pick
+        pointA:  pointA,
+        pointB:  pointB,
+        pointC:  pointC,
+        pointD:  pointD,
+        pointE:  pointE,
+        pointF:  pointF,
+        pointG:  pointG,
+        pointH:  pointH,
+
+      //coordiantes of control ponits
+      controlPoint1: controlPoint1,
+      controlPoint2: controlPoint2,
+      controlPoint3: controlPoint3,
+      controlPoint4: controlPoint4,
+      controlPoint5: controlPoint5,
+      controlPoint6: controlPoint6,
+      controlPoint7: controlPoint7,
+      controlPoint8: controlPoint8,
+
+
+
+    };
+    }
+    function renderGlyph(design, glyphObject, boxSize) {
+
+      var largeCircle = design.surface.circle(boxSize.x/2);
+      var smallCircle = design.surface.circle(boxSize.x/4);
+      var smallBox = design.surface.rect(boxSize.x/3,boxSize.y/5.5);
+      var group = design.surface.group();
+
+      largeCircle.attr('stroke','black');
+      largeCircle.attr('fill', glyphObject.color || '#F1948A');
+      largeCircle.attr('stroke-width', glyphObject.thickness ||'2px');
+      largeCircle.attr('stroke-linejoin', 'round');
+      largeCircle.attr({ cx: boxSize.x/2, cy: 4*boxSize.y/5})
+      largeCircle.radius(20)
+
+      smallCircle.attr('stroke','black');
+      smallCircle.attr('fill', glyphObject.color || '#F1948A');
+      smallCircle.attr('stroke-width', glyphObject.thickness ||'2px');
+      smallCircle.attr('stroke-linejoin', 'round');
+      smallCircle.attr({ cx: boxSize.x/5, cy: 1.15*boxSize.y })
+
+      smallBox.attr('stroke','dark gray');
+      smallBox.attr('fill', glyphObject.color || '#F1948A');
+      smallBox.attr('stroke-width', glyphObject.thickness ||'2px');
+      smallBox.attr('stroke-linejoin', 'round');
+      smallBox.attr({ x: boxSize.x/6, y: 0.98*boxSize.y })
+
+    var geom = createGeometry(boxSize);
+
+
+    var path = [
+        'M' + Vec2.toPathString(geom.pointA),
+        'C' + Vec2.toPathString(geom.controlPoint1) + ' ' +  Vec2.toPathString(geom.controlPoint2) + ' ' + Vec2.toPathString(geom.pointB),
+        'S' + Vec2.toPathString(geom.controlPoint3) + ' ' + Vec2.toPathString(geom.pointC),
+        'S' + Vec2.toPathString(geom.controlPoint4) + ' ' + Vec2.toPathString(geom.pointD),
+        'S' + Vec2.toPathString(geom.controlPoint5) + ' ' + Vec2.toPathString(geom.pointE),
+        'S' + Vec2.toPathString(geom.controlPoint6) + ' ' + Vec2.toPathString(geom.pointF),
+        'S' + Vec2.toPathString(geom.controlPoint7) + ' ' + Vec2.toPathString(geom.pointG),
+        'S' + Vec2.toPathString(geom.controlPoint8) + ' ' + Vec2.toPathString(geom.pointH),
+
+     ].join('');
+
+    var glyph = design.surface.path(path);
+    var group = design.surface.group()
+
+    glyph.attr('stroke', glyphObject.color || '#000000');
+    glyph.attr('stroke-width', glyphObject.thickness || '3px');
+    glyph.attr('stroke-linecap', 'round');
+    glyph.attr('fill-opacity', 0);
+
+    group.add(largeCircle);
+    group.add(smallCircle);
+    group.add(smallBox);
+    group.add(glyph);
+
+    boundingBox = design.surface.rect(boxSize.x, boxSize.y);
+    boundingBox.attr('fill-opacity', 0);
+
+    if(glyphObject.uri) {
+        boundingBox.attr('data-uri', glyphObject.uri);
+}
+    group.add(boundingBox);
+
+    return {
+        glyph: group,
+        backboneOffset: boxSize.y
+    };
+}
+
+module.exports = {
+
+    render: renderGlyph,
+
+
+};

From 11586cbacfa3df056cd57b14f05cd7f0ff16353d Mon Sep 17 00:00:00 2001
From: asadeg02 <arezu.sadeghi@gmail.com>
Date: Sun, 18 Nov 2018 17:29:11 -0500
Subject: [PATCH 03/12] fix non-covelant-binding for rna-protein complex

---
 font/sbolv/main.js                |  4 +++-
 font/sbolv/rna-protein-complex.js | 10 +++++-----
 font/sbolv/rna.js                 | 20 ++++++++++----------
 lib/complexInformation.js         | 24 ++++++++++++++++--------
 lib/getInteractionList.js         | 29 +++--------------------------
 lib/segment.js                    |  3 ++-
 6 files changed, 39 insertions(+), 51 deletions(-)

diff --git a/font/sbolv/main.js b/font/sbolv/main.js
index edd305a..e4c217d 100644
--- a/font/sbolv/main.js
+++ b/font/sbolv/main.js
@@ -41,5 +41,7 @@ module.exports = {
 'dna': require('./dna'),
 //this is the glyph for complex when we can't specify its type
 'complex': require('./complex'),
-'molecule_protein_complex': require('./small-molecule-complex')
+'molecule-protein-complex': require('./small-molecule-complex'),
+'protein-protein-complex':require('./protein-protein-complex'),
+'rna-protein-complex':require('./rna-protein-complex')
 }
diff --git a/font/sbolv/rna-protein-complex.js b/font/sbolv/rna-protein-complex.js
index 63dbfe9..a12f6cc 100644
--- a/font/sbolv/rna-protein-complex.js
+++ b/font/sbolv/rna-protein-complex.js
@@ -126,7 +126,7 @@ function createGeometry(boxSize) {
     var glyph = design.surface.path(path);
     var group = design.surface.group()
 
-    glyph.attr('stroke', glyphObject.color || '#000000');
+    glyph.attr('stroke', glyphObject.color || 'purple');
     glyph.attr('stroke-width', glyphObject.thickness || '3px');
     glyph.attr('stroke-linecap', 'round');
     glyph.attr('fill-opacity', 0);
@@ -143,16 +143,16 @@ function createGeometry(boxSize) {
         boundingBox.attr('data-uri', glyphObject.uri);
 }
     group.add(boundingBox);
-
+    console.log("hello")
     return {
         glyph: group,
-        backboneOffset: boxSize.y
+        backboneOffset: 1.2 * boxSize.y
     };
 }
 
 module.exports = {
 
-    render: renderGlyph,
-
+    render: renderGlyph
 
 };
+
diff --git a/font/sbolv/rna.js b/font/sbolv/rna.js
index 0d00f79..7d316b4 100644
--- a/font/sbolv/rna.js
+++ b/font/sbolv/rna.js
@@ -33,14 +33,14 @@ function createGeometry(boxSize) {
     var x = boxSize.x;
     var y = boxSize.y;
     var stepSize = 3*x/14
-    var pointA = Vec2(5*x/4, y);
-    var pointB = Vec2(pointA.x - stepSize, 3*y/4);
-    var pointC = Vec2(pointA.x - 2*stepSize, y );
-    var pointD = Vec2(pointA.x - 3*stepSize, 3*y/4);
-    var pointE = Vec2(pointA.x - 4*stepSize, y );
-    var pointF = Vec2(pointA.x - 5*stepSize, 3*y/4);
-    var pointG = Vec2(pointA.x - 6*stepSize, y );
-    var pointH = Vec2(pointA.x - 7*stepSize, 3*y/4);
+    var pointA = Vec2(3*x/4, 3*y/4);
+    var pointB = Vec2(pointA.x - stepSize, 2*y/4);
+    var pointC = Vec2(pointA.x - 2*stepSize, 3*y/4 );
+    var pointD = Vec2(pointA.x - 3*stepSize, 2*y/4);
+    var pointE = Vec2(pointA.x - 4*stepSize, 3*y/4 );
+    var pointF = Vec2(pointA.x - 5*stepSize, 2*y/4);
+    var pointG = Vec2(pointA.x - 6*stepSize, 3*y/4 );
+    var pointH = Vec2(pointA.x - 7*stepSize, 2*y/4);
 
 
     //Coordinates of Control Points
@@ -101,7 +101,7 @@ function createGeometry(boxSize) {
     var glyph = design.surface.path(path);
     var group = design.surface.group()
 
-    glyph.attr('stroke', glyphObject.color || '#000000');
+    glyph.attr('stroke', glyphObject.color || 'purple');
     glyph.attr('stroke-width', glyphObject.thickness || '3px');
     glyph.attr('stroke-linecap', 'round');
    glyph.attr('fill', glyphObject.color || '#FFFFFF');
@@ -119,7 +119,7 @@ function createGeometry(boxSize) {
 
     return {
         glyph: group,
-        backboneOffset: boxSize.y
+        backboneOffset: 1.2 * boxSize.y
     };
 }
 
diff --git a/lib/complexInformation.js b/lib/complexInformation.js
index d71304d..f35b811 100644
--- a/lib/complexInformation.js
+++ b/lib/complexInformation.js
@@ -6,9 +6,9 @@
 */
 const complexType = {
 
-  "protein_protein_complex": "protein_protein_complex",
-  "molecule_protein_complex": "molecule_protein_complex",
-  "rna_protein_complex": "rna_protein_complex",
+  "protein-protein-complex": "protein-protein-complex",
+  "molecule-protein-complex": "molecule-protein-complex",
+  "rna-protein-complex": "rna-protein-complex",
   "SBGN": "complex"
 };
 
@@ -18,6 +18,8 @@ const complexType = {
 */
 function getComplexType(interaction){
 
+   
+
    //if interaction is null, there's no way to determine type of complex
    if (interaction === null || interaction === undefined) {
      return "SBGN";
@@ -27,35 +29,41 @@ function getComplexType(interaction){
    let reactant = undefined;
 
     /*
-     *  we know that one of the reactants is always one we just need to find the other one
+     *  we know that one of the reactants is always protein we just need to find the other one
      *  as soon as we find Rna or SmallMolecule we exit the loop
     */ 
     for (let i in reactantTypes) {
               
       reactant = interaction.participants.find(function(participant) {
+      
         return participant.type === reactantTypes[i];
       });
  
+      
       // it means that one of rectants is of type either SmallMolecule or Rna so no need to continue
       if (reactant !== undefined) 
          break; 
     }
     
+    
+
+    if (reactant ==undefined)
+       return "SBGN";
     /*
      *it mean that couldn't find any of "SmallMolecule", "Rna" 
      * which means both of reactants are of type protein
     */ 
     if (reactant.type === undefined) {
 
-       return "protein_protein_complex";
+       return "protein-protein-complex";
     }
     else if (reactant.type === "SmallMolecule") {
 
-       return "molecule_protein_complex";
+       return "molecule-protein-complex";
     }
     else if (reactant.type === "Rna") {
 
-       return "rna_protein_complex";
+       return "rna-protein-complex";
     }
 
 };
@@ -72,7 +80,7 @@ function findInteractionForComplex(interactions, complexObject) {
 
        //this is the SBO for non-covelant-binding, the interaction from which we can extract type of participants 
        if (interaction.SBO === "SBO:0000177") {
-       
+        
          for (participant of interaction.participants) {
        
            if (participant.displayId === complexObject.name) {
diff --git a/lib/getInteractionList.js b/lib/getInteractionList.js
index ff5d865..cfc6224 100644
--- a/lib/getInteractionList.js
+++ b/lib/getInteractionList.js
@@ -33,7 +33,7 @@ function getInteractionList(moduleDefinition) {
               participantObj.name = participation.participant.definition.displayId;
 
               //Attaching type when participant is Non-DNA
-              if( participation.participant.definition.roles.length === 0 ) {
+              if( /*participation.participant.definition.roles.length === 0 */participation.participant.definition.types[0]._parts.fragment != "DnaRegion") {
  
                 if (participation.participant.definition.types.length === 1) {
                   //Attaching type
@@ -43,32 +43,8 @@ function getInteractionList(moduleDefinition) {
        
              //Attaching type when participant is DNA 
               else if( participation.participant.definition.roles.length === 1 ) {
-  
                  
-                 /*var SOCode = null;
-                 //attaching type
-                 let components = participation.participant.definition.components;
-
-                 for (let i in components) {
-                   
-                   if (participation._displayId === components[i]._definition.displayId) {
-                      SOCode = components[i]._definition._roles[0]._parts.path.split("/").pop(); 
-                      participantObj.SO = components[i]._definition._roles[0]._parts.path.split("/").pop();
-                      participantObj.type = soToGlyphType(participantObj.SO); 
-                   }
-                   else {
-                     const displayId = participation._displayId.split("_");
-                     if (displayId[0] === components[i]._definition.displayId) {
-                       participantObj.SO = components[i]._definition._roles[0]._parts.path.split("/").pop();
-                       participantObj.type = soToGlyphType(participantObj.SO); 
-                     } 
-                   }
-                 }
-                 if (!participantObj.SO) {
-                    participantObj.displayId = participation._displayId;
-                 
-                 }*/
-                  
+                
                 var SOCode = participation.participant.definition.roles[0]._parts.path.split('/').pop();
                  //var SOCode = participation._roles[0]._parts.path.split('/').pop();
                 // This property only exists for DNA parts 
@@ -97,3 +73,4 @@ function getInteractionList(moduleDefinition) {
  
  
 module.exports = getInteractionList
+
diff --git a/lib/segment.js b/lib/segment.js
index efead70..1057539 100755
--- a/lib/segment.js
+++ b/lib/segment.js
@@ -40,10 +40,11 @@ function renderSegment(design, segment, interactions) {
           else {
 
             complexInteraction = ComplexInfo.findInteractionForComplex(interactions, glyphObject);
-
+            
             //case when we can't find any interactions in which this complex is a participant
             if (complexInteraction === null || complexInteraction === undefined) {
 
+              
               //general rendering for complex types
               glyphObject.type = ComplexInfo.complexType["SBGN"];
               //to hide the backBone, need to set it to true

From 251ac5c3364fc8cb50a4e373a97b0d4948f714fc Mon Sep 17 00:00:00 2001
From: asadeg02 <arezu.sadeghi@gmail.com>
Date: Sun, 18 Nov 2018 21:17:18 -0500
Subject: [PATCH 04/12] map segments to participants by passing their component
 definitions to getDisplayListSegment

---
 browser.js                               |  2 +-
 lib/design.js                            |  2 +-
 lib/displayList.js                       |  6 +++---
 lib/getDisplayList.js                    |  6 +++++-
 lib/getInteractionList.js                |  4 +++-
 lib/interaction.js                       | 12 ++++++------
 lib/interactions/degradation.js          |  4 ++--
 lib/interactions/inhibition.js           |  6 +++---
 lib/interactions/non-covelant-binding.js |  4 ++--
 lib/interactions/production.js           |  6 +++---
 lib/interactions/simulation.js           |  6 +++---
 11 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/browser.js b/browser.js
index 5c1dcb7..cf25846 100644
--- a/browser.js
+++ b/browser.js
@@ -11,7 +11,7 @@ var soToGlyphType = require('./lib/soToGlyphType')
 var pigeon = require('./lib/pigeon-parser')
 var genbank = require('./lib/genbank')
 
-var getDisplayList = require('./lib/getDisplayList')
+var getDisplayList = require('./lib/getDisplayList').getDisplayList
 var getInteractionList = require('./lib/getInteractionList')
 
 
diff --git a/lib/design.js b/lib/design.js
index cb70fa3..a37df72 100755
--- a/lib/design.js
+++ b/lib/design.js
@@ -143,7 +143,7 @@ Design.prototype = {
         let componentBoxHeight = this.geom.componentBoxHeight;
         this.interactions = this.displayList.interactions.map(function(interactionObject) {
                      
-           var interaction = Interaction.render(design, interactionObject);
+           var interaction = Interaction.render(design, interactionObject, design.displayList.interactions);
            let interactionPosition = design.geom.interactionPosition;
            
            if (interaction) {
diff --git a/lib/displayList.js b/lib/displayList.js
index 3b396a3..42b5f22 100755
--- a/lib/displayList.js
+++ b/lib/displayList.js
@@ -35,13 +35,13 @@ function DisplayList(displayListObject) {
    /*
    * Add rendering Info to participants of the interaction, right now it's just for inhibition
    */
-    if(displayListObject.interactions !== undefined) {
+   if(displayListObject.interactions !== undefined) {
       
 
         this.interactions = displayListObject.interactions.map(function(interaction) {
 
             //this is the set of interaction types that currently our code is able to rende
-            let AvailableInteractions = ["SBO:0000169", "SBO:0000170", "SBO:0000177", "SBO:0000179", "SBO:0000589"];
+            /*let AvailableInteractions = ["SBO:0000169", "SBO:0000170", "SBO:0000177", "SBO:0000179", "SBO:0000589"];
 
             if (AvailableInteractions.indexOf(interaction.SBO) !== -1) {
               for (let i in interaction.participants) {
@@ -54,7 +54,7 @@ function DisplayList(displayListObject) {
                    }
                 } 
               }
-            }
+            }*/
         return interaction;    
       });
    }
diff --git a/lib/getDisplayList.js b/lib/getDisplayList.js
index 4c976dd..fcde465 100644
--- a/lib/getDisplayList.js
+++ b/lib/getDisplayList.js
@@ -437,4 +437,8 @@ function sortedSubComponents(componentDefinition) {
 }
 
 
-module.exports = getDisplayList
+module.exports = {
+    getDisplayList: getDisplayList,
+    getDisplayListSegment: getDisplayListSegment
+
+}
diff --git a/lib/getInteractionList.js b/lib/getInteractionList.js
index cfc6224..2cf642b 100644
--- a/lib/getInteractionList.js
+++ b/lib/getInteractionList.js
@@ -1,6 +1,7 @@
 var soToGlyphType = require('./soToGlyphType')
 var sboToInteractionType = require('./sboToInteractionType')
 var sboToRole = require('./sboToRole')
+var getDisplayListSegment = require('./getDisplayList').getDisplayListSegment
 
 function getInteractionList(moduleDefinition) {
   
@@ -27,9 +28,10 @@ function getInteractionList(moduleDefinition) {
            //Making participation objects
            interaction.participations.forEach(function(participation) {
 
+              
               let participantObj = {};
               participantObj.displayId = participation.displayId;
-                     
+              participantObj.segment = getDisplayListSegment(participation.participant.definition)     
               participantObj.name = participation.participant.definition.displayId;
 
               //Attaching type when participant is Non-DNA
diff --git a/lib/interaction.js b/lib/interaction.js
index 5de17c5..4816fe6 100644
--- a/lib/interaction.js
+++ b/lib/interaction.js
@@ -11,7 +11,7 @@ var Segment = require('./segment'),
     Matrix = require('./geom/matrix')
 
    
-function renderInteraction(design, interaction) {
+function renderInteraction(design, interaction, interactions) {
          
     var interactionPos = Matrix();
     var segments =  []; 
@@ -19,30 +19,30 @@ function renderInteraction(design, interaction) {
      
     if (interaction.SBO === "SBO:0000169") {
    
-      Inhibition.render(design, interaction, segments); 
+      Inhibition.render(design, interaction, segments, interactions); 
     }
 
     else if (interaction.SBO === "SBO:0000589") {
        
-      Production.render(design, interaction, segments); 
+      Production.render(design, interaction, segments, interactions); 
        
     }
   
     else if (interaction.SBO === "SBO:0000170") {
       
-      Simulation.render(design, interaction, segments);       
+      Simulation.render(design, interaction, segments, interactions);       
        
     }
 
     else if (interaction.SBO === "SBO:0000177") {
       
-      nonCovelantBinding.render(design, interaction, segments); 
+      nonCovelantBinding.render(design, interaction, segments, interactions); 
        
     }
   
      else if (interaction.SBO === "SBO:0000179") {
       
-      Degradation.render(design, interaction, segments); 
+      Degradation.render(design, interaction, segments, interactions); 
     }
 
     else {
diff --git a/lib/interactions/degradation.js b/lib/interactions/degradation.js
index 5270585..b709499 100644
--- a/lib/interactions/degradation.js
+++ b/lib/interactions/degradation.js
@@ -1,7 +1,7 @@
 
 var Segment = require('../segment')
         
-function render(design, interaction, segments) {
+function render(design, interaction, segments, interactions) {
 
       //make sure right type of interaction is passed to the function
       if (interaction.SBO !== "SBO:0000179") {
@@ -20,7 +20,7 @@ function render(design, interaction, segments) {
         }
           
         interaction.participants[i].segment.isParticipant = true;
-        var segment = Segment.render(design, interaction.participants[i].segment);
+        var segment = Segment.render(design, interaction.participants[i].segment, interactions);
         segments.push(segment);
     }
 }
diff --git a/lib/interactions/inhibition.js b/lib/interactions/inhibition.js
index cd88e29..99eb6fc 100644
--- a/lib/interactions/inhibition.js
+++ b/lib/interactions/inhibition.js
@@ -2,7 +2,7 @@
 var Segment = require('../segment'),
     Helper = require('./helper')
 
-function render(design, interaction, segments) {
+function render(design, interaction, segments, interactions) {
 
       //make sure right type of interaction is passed to the function
       if (interaction.SBO !== "SBO:0000169") {
@@ -34,7 +34,7 @@ function render(design, interaction, segments) {
 
           //update participant offset       
           design.geom.participantOffset = Helper.find_participant_offset(interaction.participants[i], interaction.displayId, "inhibition"); 
-          var segment = Segment.render(design, interaction.participants[i].segment);  
+          var segment = Segment.render(design, interaction.participants[i].segment, interactions);  
         }
         
         if (!interaction.participants[i].SO) {
@@ -42,7 +42,7 @@ function render(design, interaction, segments) {
           //need to set the role for the segment to be able to add the rendering for inhibition arrow in reder segment
           interaction.participants[i].segment.role = "inhibition_nonDNA";
           interaction.participants[i].segment.participantRole = interaction.participants[i].role;
-          var segment = Segment.render(design, interaction.participants[i].segment);
+          var segment = Segment.render(design, interaction.participants[i].segment, interactions);
            
           //move the nonDNA part vertically
           segment.dy(-90);
diff --git a/lib/interactions/non-covelant-binding.js b/lib/interactions/non-covelant-binding.js
index 4e91529..1bc954f 100644
--- a/lib/interactions/non-covelant-binding.js
+++ b/lib/interactions/non-covelant-binding.js
@@ -2,7 +2,7 @@
 var Segment = require('../segment'),
     Helper = require('./helper')
 
-function render(design, interaction, segments) {
+function render(design, interaction, segments, interactions) {
 
       //make sure right type of interaction is passed to the function
       if (interaction.SBO !== "SBO:0000177") {
@@ -29,7 +29,7 @@ function render(design, interaction, segments) {
           }
           
           interaction.participants[i].segment.isParticipant = true;
-          var segment = Segment.render(design, interaction.participants[i].segment);
+          var segment = Segment.render(design, interaction.participants[i].segment, interactions);
 
           if (interaction.participants[i].role === "product") {
 
diff --git a/lib/interactions/production.js b/lib/interactions/production.js
index 6e3cb26..75d50fc 100644
--- a/lib/interactions/production.js
+++ b/lib/interactions/production.js
@@ -2,7 +2,7 @@
 var Segment = require('../segment'),
     Helper = require('./helper')
 
-function render(design, interaction, segments) {
+function render(design, interaction, segments, interactions) {
 
       //make sure right type of interaction is passed to the function
       if (interaction.SBO !== "SBO:0000589") {
@@ -35,14 +35,14 @@ function render(design, interaction, segments) {
 
              //update participant offset       
              design.geom.participantOffset = Helper.find_participant_offset(interaction.participants[i], interaction.displayId, "production");
-             var segment = Segment.render(design, interaction.participants[i].segment);   
+             var segment = Segment.render(design, interaction.participants[i].segment, interactions);   
           }
           
           if (!interaction.participants[i].SO) {
              
             interaction.participants[i].segment.role = "production_nonDNA";
             interaction.participants[i].segment.participantRole = interaction.participants[i].role;
-            var segment = Segment.render(design, interaction.participants[i].segment);
+            var segment = Segment.render(design, interaction.participants[i].segment, interactions);
            
             //move the nonDNA part vertically
             segment.dy(-90);
diff --git a/lib/interactions/simulation.js b/lib/interactions/simulation.js
index ab769bc..1faa684 100644
--- a/lib/interactions/simulation.js
+++ b/lib/interactions/simulation.js
@@ -2,7 +2,7 @@
 var Segment = require('../segment'),
     Helper = require('./helper')
 
-function render(design, interaction, segments) {
+function render(design, interaction, segments, interactions) {
 
       //make sure right type of interaction is passed to the function
       if (interaction.SBO !== "SBO:0000170") {
@@ -35,7 +35,7 @@ function render(design, interaction, segments) {
           
             //update participant offset       
             design.geom.participantOffset = Helper.find_participant_offset(interaction.participants[i], interaction.displayId, "simulation"); 
-            var segment = Segment.render(design, interaction.participants[i].segment);       
+            var segment = Segment.render(design, interaction.participants[i].segment, interactions);       
           }
 
           if (!interaction.participants[i].SO) {
@@ -43,7 +43,7 @@ function render(design, interaction, segments) {
             //need to set the role for the segment to be able to add the rendering for inhibition arrow in reder segment
             interaction.participants[i].segment.role = "simulation_nonDNA";
             interaction.participants[i].segment.participantRole = interaction.participants[i].role;
-            var segment = Segment.render(design, interaction.participants[i].segment);
+            var segment = Segment.render(design, interaction.participants[i].segment, interactions);
            
             segment.dy(-120);
             if (design.geom.participantOffset !== 0 ) {

From b9e22a5942f9846d0fc347bddee2d13812fb222c Mon Sep 17 00:00:00 2001
From: asadeg02 <arezu.sadeghi@gmail.com>
Date: Sun, 18 Nov 2018 23:48:02 -0500
Subject: [PATCH 05/12] rename simulation to stimulation

---
 lib/interaction.js                                 | 6 +++---
 lib/interactions/non-covelant-binding.js           | 9 +++++++--
 lib/interactions/{simulation.js => stimulation.js} | 1 +
 lib/sboToInteractionType.js                        | 2 +-
 lib/sboToRole.js                                   | 4 ++--
 lib/segment.js                                     | 4 ++--
 6 files changed, 16 insertions(+), 10 deletions(-)
 rename lib/interactions/{simulation.js => stimulation.js} (99%)

diff --git a/lib/interaction.js b/lib/interaction.js
index 4816fe6..b54ee43 100644
--- a/lib/interaction.js
+++ b/lib/interaction.js
@@ -2,7 +2,7 @@
 var Segment = require('./segment'),
     Inhibition = require('./interactions/inhibition'),
     Production = require('./interactions/production'),
-    Simulation = require('./interactions/simulation'),
+    Stimulation = require('./interactions/stimulation'),
     nonCovelantBinding = require('./interactions/non-covelant-binding'),
     Degradation = require('./interactions/degradation'),
     Entity = require('./entity'),
@@ -18,7 +18,7 @@ function renderInteraction(design, interaction, interactions) {
     let pos = 0 
      
     if (interaction.SBO === "SBO:0000169") {
-   
+      
       Inhibition.render(design, interaction, segments, interactions); 
     }
 
@@ -30,7 +30,7 @@ function renderInteraction(design, interaction, interactions) {
   
     else if (interaction.SBO === "SBO:0000170") {
       
-      Simulation.render(design, interaction, segments, interactions);       
+      Stimulation.render(design, interaction, segments, interactions);       
        
     }
 
diff --git a/lib/interactions/non-covelant-binding.js b/lib/interactions/non-covelant-binding.js
index 1bc954f..194818f 100644
--- a/lib/interactions/non-covelant-binding.js
+++ b/lib/interactions/non-covelant-binding.js
@@ -18,8 +18,10 @@ function render(design, interaction, segments, interactions) {
       Helper.sortParticipants(interaction.participants, "non-covelant-binding");  
      
       let reactantNumber = 0;
+      let offset = 0;
+      let width = 0;
       for (let i in interaction.participants) {
-          
+              
           //clear all the previous rolles attached to participant segment
           interaction.participants[i].segment.role = null;
 
@@ -31,13 +33,16 @@ function render(design, interaction, segments, interactions) {
           interaction.participants[i].segment.isParticipant = true;
           var segment = Segment.render(design, interaction.participants[i].segment, interactions);
 
+          
           if (interaction.participants[i].role === "product") {
 
              segment.dx(110);
+            
           }
 
-          if (interaction.participants[i].segment.role === "reactant2") {
+          else if (interaction.participants[i].segment.role === "reactant2") {
             segment.dx(220);
+            
           }
 
         segments.push(segment);
diff --git a/lib/interactions/simulation.js b/lib/interactions/stimulation.js
similarity index 99%
rename from lib/interactions/simulation.js
rename to lib/interactions/stimulation.js
index 1faa684..73cb270 100644
--- a/lib/interactions/simulation.js
+++ b/lib/interactions/stimulation.js
@@ -4,6 +4,7 @@ var Segment = require('../segment'),
 
 function render(design, interaction, segments, interactions) {
 
+      
       //make sure right type of interaction is passed to the function
       if (interaction.SBO !== "SBO:0000170") {
          return;
diff --git a/lib/sboToInteractionType.js b/lib/sboToInteractionType.js
index ef92132..89b915f 100644
--- a/lib/sboToInteractionType.js
+++ b/lib/sboToInteractionType.js
@@ -5,7 +5,7 @@ function sboToInteractionType(sbo) {
 
     return ({
       "SBO:0000169": "inhibition",
-      "SBO:0000170": "simulation",
+      "SBO:0000170": "stimulation",
       "SBO:0000176": "biochemical-reaction",
       "SBO:0000177": "non-covelant-binding",
       "SBO:0000179": "degradation",
diff --git a/lib/sboToRole.js b/lib/sboToRole.js
index b6f76ba..b2ab94a 100644
--- a/lib/sboToRole.js
+++ b/lib/sboToRole.js
@@ -6,8 +6,8 @@ function sboToRole(sbo) {
     return ({
       "SBO:0000020": "inhibitor",
       "SBO:0000642": "inhibited",
-      "SBO:0000459": "simulator",
-      "SBO:0000643": "simulated",
+      "SBO:0000459": "stimulator",
+      "SBO:0000643": "stimulated",
       "SBO:0000010": "reactant",
       "SBO:0000011": "product",
       "SBO:0000598": "promoter",
diff --git a/lib/segment.js b/lib/segment.js
index 1057539..b427a50 100755
--- a/lib/segment.js
+++ b/lib/segment.js
@@ -267,7 +267,7 @@ function renderSegment(design, segment, interactions) {
            group.add(arrowGlyph);
         }
 
-        //if glyph is the first reactant in a non-covelant-binding-reaction update the offset of the second reactant
+        //if glyph is the first reactant in a non-covelant-binding-reaction add the arrow
         else if (segment.role === "reactant1") {
            var arrowPos = Matrix();
            var arrowOffset = Vec2(0, -boundingBoxSize.y);
@@ -278,7 +278,7 @@ function renderSegment(design, segment, interactions) {
            group.add(arrowGlyph);
         }
 
-        //if glyph is the first reactant in a non-covelant-binding-reaction update the offset of the second reactant
+        //if glyph is the first reactant in a non-covelant-binding-reaction modify direction of arrow
         else if (segment.role === "reactant2") {
 
            var arrowPos = Matrix();

From ba6d4c4f1c13321adf02b565776e7f432983e173 Mon Sep 17 00:00:00 2001
From: asadeg02 <arezu.sadeghi@gmail.com>
Date: Mon, 19 Nov 2018 14:06:10 -0500
Subject: [PATCH 06/12] fix problem wih rna layout when participating in
 degradation

---
 font/sbolv/rna.js | 7 +++----
 lib/segment.js    | 4 +++-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/font/sbolv/rna.js b/font/sbolv/rna.js
index 7d316b4..1125620 100644
--- a/font/sbolv/rna.js
+++ b/font/sbolv/rna.js
@@ -119,13 +119,12 @@ function createGeometry(boxSize) {
 
     return {
         glyph: group,
-        backboneOffset: 1.2 * boxSize.y
+        backboneOffset: 1.2 * boxSize.y,
+        glyphLength: createGeometry(boxSize).pointA.x
     };
 }
 
 module.exports = {
 
-    render: renderGlyph,
-
-
+    render: renderGlyph
 };
diff --git a/lib/segment.js b/lib/segment.js
index b427a50..40eb9aa 100755
--- a/lib/segment.js
+++ b/lib/segment.js
@@ -293,7 +293,9 @@ function renderSegment(design, segment, interactions) {
         else if (segment.role === "degradationReactant") {
 
            var arrowPos = Matrix();
-           var arrowOffset = Vec2(group.bbox().width + 5, -boundingBoxSize.y);
+           //deponding on the implementation of the glyph, (if it starts from negative x area) we set the offset of degradation arrow
+           var effectiveOffset = glyphProps.glyphLength ? glyphProps.glyphLength : Math.max(glyph.bbox().width, glyphLength);
+           var arrowOffset = Vec2(effectiveOffset + 5, -boundingBoxSize.y);
            var arrowTransform = Matrix.multiply( Matrix.translation(arrowOffset), arrowPos );
            var arrowProps = Arrows.DegradationArrow.render(design, glyphObject, boundingBoxSize );
            var arrowGlyph = arrowProps.glyph;

From 0186409287ad721b134c93ade66ce821dcfab60f Mon Sep 17 00:00:00 2001
From: asadeg02 <arezu.sadeghi@gmail.com>
Date: Wed, 28 Nov 2018 02:32:14 -0500
Subject: [PATCH 07/12] put cd in dotted box when participating in interactions

---
 browser.js                      |  3 ++-
 lib/interactions/inhibition.js  | 16 ++++++++++------
 lib/interactions/production.js  | 17 +++++++++++------
 lib/interactions/stimulation.js | 15 ++++++++++-----
 lib/segment.js                  | 22 ++++++++++++++++++++++
 5 files changed, 55 insertions(+), 18 deletions(-)

diff --git a/browser.js b/browser.js
index cf25846..e0a38d6 100644
--- a/browser.js
+++ b/browser.js
@@ -236,7 +236,8 @@ var editors = [
 
            //processing module definition
            sbol.moduleDefinitions.forEach(function(moduleDefinition) {
-
+           
+               console.log(moduleDefinition)
                currentInteractions = getInteractionList(moduleDefinition);
                for (let i in currentInteractions) {
 
diff --git a/lib/interactions/inhibition.js b/lib/interactions/inhibition.js
index 99eb6fc..77ab2b0 100644
--- a/lib/interactions/inhibition.js
+++ b/lib/interactions/inhibition.js
@@ -21,6 +21,8 @@ function render(design, interaction, segments, interactions) {
       */
       Helper.sortParticipants(interaction.participants);
      
+      nonDNAsVerticalOffset = 0;
+      nonDNAshorizontalOffset = 0;
       for (let i in interaction.participants) {
 
         //clear all the previous rolles attached to participant segment
@@ -32,9 +34,12 @@ function render(design, interaction, segments, interactions) {
          //if participant is a Dna part or circuit
         if (interaction.participants[i].SO) {
 
+          interaction.participants[i].segment.isCircuit = true;
           //update participant offset       
           design.geom.participantOffset = Helper.find_participant_offset(interaction.participants[i], interaction.displayId, "inhibition"); 
-          var segment = Segment.render(design, interaction.participants[i].segment, interactions);  
+          var segment = Segment.render(design, interaction.participants[i].segment, interactions);
+          nonDNAVerticalOffset = segment.bbox().height + 8;
+          nonDNAshorizontalOffset = (segment.bbox().width)/2;
         }
         
         if (!interaction.participants[i].SO) {
@@ -43,18 +48,17 @@ function render(design, interaction, segments, interactions) {
           interaction.participants[i].segment.role = "inhibition_nonDNA";
           interaction.participants[i].segment.participantRole = interaction.participants[i].role;
           var segment = Segment.render(design, interaction.participants[i].segment, interactions);
-           
           //move the nonDNA part vertically
-          segment.dy(-90);
+          segment.dy(-nonDNAVerticalOffset);
 
           //move the nonDna part horizontally to put it above the DNA part interacting with it  
           if (design.geom.participantOffset !== 0 ) {
-            segment.dx( (design.geom.participantOffset -1) * (design.geom.defaultGlyphSize.x + design.geom.glyphPadding)
-                                                          + design.geom.glyphPadding + design.geom.defaultGlyphSize.x/2 + 25)
+            //segment.dx( (design.geom.participantOffset -1) * (design.geom.defaultGlyphSize.x + design.geom.glyphPadding) + design.geom.glyphPadding + design.geom.defaultGlyphSize.x/2 + 25)
+            segment.dx(nonDNAshorizontalOffset - segment.bbox().width) 
           }
           //case when we don't need to move the non-DNA part horizontally
             else if (design.geom.participantOffset === 0) {
-              segment.dx(0)
+              segment.dx(nonDNAshorizontalOffset - segment.bbox().width) 
           }
         }
       
diff --git a/lib/interactions/production.js b/lib/interactions/production.js
index 75d50fc..8a287b0 100644
--- a/lib/interactions/production.js
+++ b/lib/interactions/production.js
@@ -21,7 +21,8 @@ function render(design, interaction, segments, interactions) {
       *interactions.participants we always find DNA part first
       */
        Helper.sortParticipants(interaction.participants);
-            
+       nonDNAsVerticalOffset = 0;
+       nonDNAshorizontalOffset = 0;       
        for (let i in interaction.participants) {
         
            //clear all the previous rolles attached to participant segment
@@ -33,9 +34,12 @@ function render(design, interaction, segments, interactions) {
           //if participant is a Dna part or circuit
           if (interaction.participants[i].SO) {
 
+             interaction.participants[i].segment.isCircuit = true;
              //update participant offset       
              design.geom.participantOffset = Helper.find_participant_offset(interaction.participants[i], interaction.displayId, "production");
-             var segment = Segment.render(design, interaction.participants[i].segment, interactions);   
+             var segment = Segment.render(design, interaction.participants[i].segment, interactions);
+             nonDNAVerticalOffset = segment.bbox().height + 30;
+             nonDNAshorizontalOffset = (segment.bbox().width)/2;     
           }
           
           if (!interaction.participants[i].SO) {
@@ -45,13 +49,14 @@ function render(design, interaction, segments, interactions) {
             var segment = Segment.render(design, interaction.participants[i].segment, interactions);
            
             //move the nonDNA part vertically
-            segment.dy(-90);
+            segment.dy(-nonDNAVerticalOffset);
             if (design.geom.participantOffset !== 0 ) {
-              segment.dx( (design.geom.participantOffset -1) * (design.geom.defaultGlyphSize.x + design.geom.glyphPadding)
-                                                         + design.geom.glyphPadding + design.geom.defaultGlyphSize.x/2)
+              //segment.dx( (design.geom.participantOffset -1) * (design.geom.defaultGlyphSize.x + design.geom.glyphPadding) + design.geom.glyphPadding + design.geom.defaultGlyphSize.x/2)
+              segment.dx(nonDNAshorizontalOffset - segment.bbox().width)
             }
             else if (design.geom.participantOffset === 0) {
-              segment.dx(0)
+              //segment.dx(0)
+              segment.dx(nonDNAshorizontalOffset - segment.bbox().width)
             }
           }
          segments.push(segment);
diff --git a/lib/interactions/stimulation.js b/lib/interactions/stimulation.js
index 73cb270..5396a5d 100644
--- a/lib/interactions/stimulation.js
+++ b/lib/interactions/stimulation.js
@@ -22,7 +22,8 @@ function render(design, interaction, segments, interactions) {
       *interactions.participants we always find DNA part first
       */
        Helper.sortParticipants(interaction.participants);       
-            
+       nonDNAsVerticalOffset = 0;
+       nonDNAshorizontalOffset = 0;     
        for (let i in interaction.participants) {
         
           //clear all the previous rolles attached to participant segment
@@ -34,9 +35,12 @@ function render(design, interaction, segments, interactions) {
           //if participant is a Dna part or circuit
           if (interaction.participants[i].SO) {
           
+            interaction.participants[i].segment.isCircuit = true;
             //update participant offset       
             design.geom.participantOffset = Helper.find_participant_offset(interaction.participants[i], interaction.displayId, "simulation"); 
-            var segment = Segment.render(design, interaction.participants[i].segment, interactions);       
+            var segment = Segment.render(design, interaction.participants[i].segment, interactions);
+            nonDNAVerticalOffset = segment.bbox().height + 30;
+            nonDNAshorizontalOffset = (segment.bbox().width)/2;       
           }
 
           if (!interaction.participants[i].SO) {
@@ -46,13 +50,14 @@ function render(design, interaction, segments, interactions) {
             interaction.participants[i].segment.participantRole = interaction.participants[i].role;
             var segment = Segment.render(design, interaction.participants[i].segment, interactions);
            
-            segment.dy(-120);
+            segment.dy(-nonDNAVerticalOffset);
             if (design.geom.participantOffset !== 0 ) {
-              segment.dx( (design.geom.participantOffset -1) * (design.geom.defaultGlyphSize.x + design.geom.glyphPadding)
-                                                         + design.geom.glyphPadding + design.geom.defaultGlyphSize.x/2)
+              //segment.dx( (design.geom.participantOffset -1) * (design.geom.defaultGlyphSize.x + design.geom.glyphPadding) + design.geom.glyphPadding + design.geom.defaultGlyphSize.x/2)
+              segment.dx(nonDNAshorizontalOffset - segment.bbox().width);
             }
             else if (design.geom.participantOffset === 0) {
               segment.dx(0)
+              segment.dx(nonDNAshorizontalOffset - segment.bbox().width)
             }
           }
          segments.push(segment);
diff --git a/lib/segment.js b/lib/segment.js
index 40eb9aa..7cf4406 100755
--- a/lib/segment.js
+++ b/lib/segment.js
@@ -355,6 +355,25 @@ function renderSegment(design, segment, interactions) {
 
    }
 
+    if (segment.isCircuit) {
+
+            var boundingBox = Rect.expand(Rect(group.bbox()), design.geom.componentBoxPadding);
+
+            var box = surface.rect(Rect.width(boundingBox), Rect.height(boundingBox) - 5);
+
+           box.transform({ matrix:Matrix.toSVGString(Matrix.translation(boundingBox.topLeft)) });
+
+           box.radius(8);
+
+          //box.attr('stroke', '#330936');
+          box.attr('stroke','#941034');
+          box.attr('stroke-dasharray', "3,5");
+          box.attr('stroke-width', '2px');
+          box.attr('stroke-linejoin', 'round');
+          box.attr('fill', 'none');
+          group.add(box);
+
+        }
 
     if(segment.name !== undefined) {
 
@@ -378,6 +397,9 @@ function renderSegment(design, segment, interactions) {
         if (!segment.isParticipant) {
           group.add(labelText);
         }
+ 
+       
+        
     }
 
     group.displayList = segment;

From 73b830dc11ea0b2dfcb9af509b2c700b05920d69 Mon Sep 17 00:00:00 2001
From: asadeg02 <arezu.sadeghi@gmail.com>
Date: Mon, 3 Dec 2018 03:57:08 -0500
Subject: [PATCH 08/12] Fix rendering bugs

---
 .../sbolv/interaction-arrows/reactantArrow.js | 10 ++++-----
 font/sbolv/rna-protein-complex.js             |  2 +-
 font/sbolv/rna.js                             |  3 ++-
 lib/interactions/helper.js                    |  4 ++--
 lib/interactions/non-covelant-binding.js      | 21 ++++++++++++-------
 lib/segment.js                                | 17 +++++++++------
 6 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/font/sbolv/interaction-arrows/reactantArrow.js b/font/sbolv/interaction-arrows/reactantArrow.js
index 590cf77..2ea94ad 100644
--- a/font/sbolv/interaction-arrows/reactantArrow.js
+++ b/font/sbolv/interaction-arrows/reactantArrow.js
@@ -6,11 +6,11 @@ function createGeometry(boxSize) {
    
     return {
          
-        left: Vec2(boxSize.x,boxSize.y * 0.5),
-        right: Vec2(1.7*boxSize.x, boxSize.y * 0.5),
-        arrowTop:Vec2(1.7 * boxSize.x, boxSize.y * 0.4), 
-        arrowBottom:Vec2(1.7 * boxSize.x, boxSize.y * 0.6),
-        arrowPick:Vec2(boxSize.x * 1.8, boxSize.y * 0.5),
+        left: Vec2(0,boxSize.y * 0.5),
+        right: Vec2(0.7*boxSize.x, boxSize.y * 0.5),
+        arrowTop:Vec2(0.7 * boxSize.x, boxSize.y * 0.4), 
+        arrowBottom:Vec2(0.7 * boxSize.x, boxSize.y * 0.6),
+        arrowPick:Vec2(boxSize.x * 0.8, boxSize.y * 0.5),
     };
 }
 
diff --git a/font/sbolv/rna-protein-complex.js b/font/sbolv/rna-protein-complex.js
index a12f6cc..c68498d 100644
--- a/font/sbolv/rna-protein-complex.js
+++ b/font/sbolv/rna-protein-complex.js
@@ -143,7 +143,7 @@ function createGeometry(boxSize) {
         boundingBox.attr('data-uri', glyphObject.uri);
 }
     group.add(boundingBox);
-    console.log("hello")
+    
     return {
         glyph: group,
         backboneOffset: 1.2 * boxSize.y
diff --git a/font/sbolv/rna.js b/font/sbolv/rna.js
index 1125620..355de97 100644
--- a/font/sbolv/rna.js
+++ b/font/sbolv/rna.js
@@ -33,7 +33,7 @@ function createGeometry(boxSize) {
     var x = boxSize.x;
     var y = boxSize.y;
     var stepSize = 3*x/14
-    var pointA = Vec2(3*x/4, 3*y/4);
+    var pointA = Vec2(5 *x/4, 3*y/4);
     var pointB = Vec2(pointA.x - stepSize, 2*y/4);
     var pointC = Vec2(pointA.x - 2*stepSize, 3*y/4 );
     var pointD = Vec2(pointA.x - 3*stepSize, 2*y/4);
@@ -43,6 +43,7 @@ function createGeometry(boxSize) {
     var pointH = Vec2(pointA.x - 7*stepSize, 2*y/4);
 
 
+
     //Coordinates of Control Points
     var controlPoint1 = createControlPoint(pointA, pointB, null);
     var controlPoint2 = createControlPoint(pointB, pointC, pointA);
diff --git a/lib/interactions/helper.js b/lib/interactions/helper.js
index 9d63391..d212252 100644
--- a/lib/interactions/helper.js
+++ b/lib/interactions/helper.js
@@ -80,10 +80,10 @@ function sortParticipants(participants, interactionType) {
           if (participants[i].role === "product" && i === 1) {
             break;
           }
-          else if ([i].role === "product") {
+          else if (participants[i].role === "product") {
             let temp = participants[1]
             participants[1] = participants[i];
-            participants[1] = temp
+            participants[i] = temp
           }  
         }
       }       
diff --git a/lib/interactions/non-covelant-binding.js b/lib/interactions/non-covelant-binding.js
index 194818f..b251d29 100644
--- a/lib/interactions/non-covelant-binding.js
+++ b/lib/interactions/non-covelant-binding.js
@@ -16,9 +16,9 @@ function render(design, interaction, segments, interactions) {
       }
       
       Helper.sortParticipants(interaction.participants, "non-covelant-binding");  
-     
+      
       let reactantNumber = 0;
-      let offset = 0;
+      let productOffset = 0;
       let width = 0;
       for (let i in interaction.participants) {
               
@@ -31,14 +31,21 @@ function render(design, interaction, segments, interactions) {
           }
           
           interaction.participants[i].segment.isParticipant = true;
-          var segment = Segment.render(design, interaction.participants[i].segment, interactions);
 
+         
+          var segment = Segment.render(design, interaction.participants[i].segment, interactions);
+         
+           if (i == 0) {
+            productOffset = interaction.participants.segmentWidth;
+            
+           }
           
-          if (interaction.participants[i].role === "product") {
+         if (interaction.participants[i].role === "product") {
 
-             segment.dx(110);
-            
-          }
+             //segment.dx(110);
+             segment.dx(productOffset);
+             
+         }
 
           else if (interaction.participants[i].segment.role === "reactant2") {
             segment.dx(220);
diff --git a/lib/segment.js b/lib/segment.js
index 7cf4406..68fdcd5 100755
--- a/lib/segment.js
+++ b/lib/segment.js
@@ -7,14 +7,16 @@ var Rect = require('./geom/rect'),
     nonDNATypes = require('./nonDNATypes'),
     Arrows = require('../font/sbolv/interaction-arrows/main')
 
-function renderSegment(design, segment, interactions) {
+
+function renderSegment(design, segment, interactions,) {
 
     var surface = design.surface;
 
     var glyphOffset = 0;
 
     var boundingBoxSize;
-
+    
+        
     /*
     *This flag is set to true if the nonDNA part is going to be displayed in a sequense of length 1
     * the purpose is to hide the backBone
@@ -269,13 +271,16 @@ function renderSegment(design, segment, interactions) {
 
         //if glyph is the first reactant in a non-covelant-binding-reaction add the arrow
         else if (segment.role === "reactant1") {
+           //deponding on the implementation of the glyph, (if it starts from negative x area) we set the offset of degradation arrow
+           var effectiveOffset = glyphProps.glyphLength ? glyphProps.glyphLength : Math.max(glyph.bbox().width, glyphLength);
            var arrowPos = Matrix();
-           var arrowOffset = Vec2(0, -boundingBoxSize.y);
+           var arrowOffset = Vec2(effectiveOffset + 5, -boundingBoxSize.y);
            var arrowTransform = Matrix.multiply( Matrix.translation(arrowOffset), arrowPos );
            var arrowProps = Arrows.ReactantArrow.render(design, glyphObject, boundingBoxSize );
            var arrowGlyph = arrowProps.glyph;
            arrowGlyph.transform({ matrix: Matrix.toSVGString(arrowTransform) });
            group.add(arrowGlyph);
+           interaction.participants.segmentWidth =  group.bbox().width
         }
 
         //if glyph is the first reactant in a non-covelant-binding-reaction modify direction of arrow
@@ -283,11 +288,12 @@ function renderSegment(design, segment, interactions) {
 
            var arrowPos = Matrix();
            var arrowOffset = Vec2(0, -boundingBoxSize.y);
-           var arrowTransform = Matrix.rotate(arrowPos, 180, { x: 20, y: 0 });
+           var arrowTransform = Matrix.rotate(arrowPos, 180, { x: 0, y: 0 });
            var arrowProps = Arrows.ReactantArrow.render(design, glyphObject, boundingBoxSize );
            var arrowGlyph = arrowProps.glyph;
            arrowGlyph.transform({ matrix: Matrix.toSVGString(arrowTransform) });
            group.add(arrowGlyph);
+   
         }
 
         else if (segment.role === "degradationReactant") {
@@ -403,9 +409,8 @@ function renderSegment(design, segment, interactions) {
     }
 
     group.displayList = segment;
+    //segment width before adding label
     segment.svg = group;
-
-    return group;
 }
 
 module.exports = {

From 24970e67096dd516bba37fc1c8fc72faacec708c Mon Sep 17 00:00:00 2001
From: asadeg02 <arezu.sadeghi@gmail.com>
Date: Mon, 3 Dec 2018 12:03:06 -0500
Subject: [PATCH 09/12] put border around cds only for engineered region type
 of CDS

---
 lib/interactions/production.js | 19 ++++++++++++-------
 lib/segment.js                 |  3 ++-
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/lib/interactions/production.js b/lib/interactions/production.js
index 8a287b0..37c9253 100644
--- a/lib/interactions/production.js
+++ b/lib/interactions/production.js
@@ -22,7 +22,11 @@ function render(design, interaction, segments, interactions) {
       */
        Helper.sortParticipants(interaction.participants);
        nonDNAsVerticalOffset = 0;
-       nonDNAshorizontalOffset = 0;       
+       nonDNAshorizontalOffset = 0;
+       isCircuit = true;
+       if (interaction.participants[0].type !== "engineered-region") {
+           isCircuit = false;
+       }       
        for (let i in interaction.participants) {
         
            //clear all the previous rolles attached to participant segment
@@ -33,8 +37,9 @@ function render(design, interaction, segments, interactions) {
 
           //if participant is a Dna part or circuit
           if (interaction.participants[i].SO) {
-
-             interaction.participants[i].segment.isCircuit = true;
+             if (isCircuit) {
+                 interaction.participants[i].segment.isCircuit = true;
+             }
              //update participant offset       
              design.geom.participantOffset = Helper.find_participant_offset(interaction.participants[i], interaction.displayId, "production");
              var segment = Segment.render(design, interaction.participants[i].segment, interactions);
@@ -50,13 +55,13 @@ function render(design, interaction, segments, interactions) {
            
             //move the nonDNA part vertically
             segment.dy(-nonDNAVerticalOffset);
-            if (design.geom.participantOffset !== 0 ) {
+            if (isCircuit) {
               //segment.dx( (design.geom.participantOffset -1) * (design.geom.defaultGlyphSize.x + design.geom.glyphPadding) + design.geom.glyphPadding + design.geom.defaultGlyphSize.x/2)
               segment.dx(nonDNAshorizontalOffset - segment.bbox().width)
             }
-            else if (design.geom.participantOffset === 0) {
-              //segment.dx(0)
-              segment.dx(nonDNAshorizontalOffset - segment.bbox().width)
+            else if (!isCircuit) {
+              segment.dx(0)
+              //segment.dx(nonDNAshorizontalOffset - segment.bbox().width)
             }
           }
          segments.push(segment);
diff --git a/lib/segment.js b/lib/segment.js
index 68fdcd5..1be2e46 100755
--- a/lib/segment.js
+++ b/lib/segment.js
@@ -409,8 +409,9 @@ function renderSegment(design, segment, interactions,) {
     }
 
     group.displayList = segment;
-    //segment width before adding label
     segment.svg = group;
+
+   return group;
 }
 
 module.exports = {

From 5a017737cbcb784cda3281c333e624e03fc434e1 Mon Sep 17 00:00:00 2001
From: asadeg02 <arezu.sadeghi@gmail.com>
Date: Mon, 3 Dec 2018 12:16:27 -0500
Subject: [PATCH 10/12] add constrains for border around CDs for inhibition and
 stimulation

---
 lib/interactions/inhibition.js  | 14 ++++++++++----
 lib/interactions/stimulation.js | 17 ++++++++++++-----
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/lib/interactions/inhibition.js b/lib/interactions/inhibition.js
index 77ab2b0..48b4dba 100644
--- a/lib/interactions/inhibition.js
+++ b/lib/interactions/inhibition.js
@@ -23,6 +23,10 @@ function render(design, interaction, segments, interactions) {
      
       nonDNAsVerticalOffset = 0;
       nonDNAshorizontalOffset = 0;
+      isCircuit = true;
+       if (interaction.participants[0].type !== "engineered-region") {
+           isCircuit = false;
+       }   
       for (let i in interaction.participants) {
 
         //clear all the previous rolles attached to participant segment
@@ -34,7 +38,9 @@ function render(design, interaction, segments, interactions) {
          //if participant is a Dna part or circuit
         if (interaction.participants[i].SO) {
 
-          interaction.participants[i].segment.isCircuit = true;
+           if (isCircuit) {
+                 interaction.participants[i].segment.isCircuit = true;
+           }
           //update participant offset       
           design.geom.participantOffset = Helper.find_participant_offset(interaction.participants[i], interaction.displayId, "inhibition"); 
           var segment = Segment.render(design, interaction.participants[i].segment, interactions);
@@ -52,13 +58,13 @@ function render(design, interaction, segments, interactions) {
           segment.dy(-nonDNAVerticalOffset);
 
           //move the nonDna part horizontally to put it above the DNA part interacting with it  
-          if (design.geom.participantOffset !== 0 ) {
+          if (isCircuit) {
             //segment.dx( (design.geom.participantOffset -1) * (design.geom.defaultGlyphSize.x + design.geom.glyphPadding) + design.geom.glyphPadding + design.geom.defaultGlyphSize.x/2 + 25)
             segment.dx(nonDNAshorizontalOffset - segment.bbox().width) 
           }
           //case when we don't need to move the non-DNA part horizontally
-            else if (design.geom.participantOffset === 0) {
-              segment.dx(nonDNAshorizontalOffset - segment.bbox().width) 
+            else if (!isCircuit) {
+              segment.dx(0) 
           }
         }
       
diff --git a/lib/interactions/stimulation.js b/lib/interactions/stimulation.js
index 5396a5d..de2fbc1 100644
--- a/lib/interactions/stimulation.js
+++ b/lib/interactions/stimulation.js
@@ -23,7 +23,11 @@ function render(design, interaction, segments, interactions) {
       */
        Helper.sortParticipants(interaction.participants);       
        nonDNAsVerticalOffset = 0;
-       nonDNAshorizontalOffset = 0;     
+       nonDNAshorizontalOffset = 0;
+       isCircuit = true;
+       if (interaction.participants[0].type !== "engineered-region") {
+           isCircuit = false;
+       }      
        for (let i in interaction.participants) {
         
           //clear all the previous rolles attached to participant segment
@@ -35,7 +39,10 @@ function render(design, interaction, segments, interactions) {
           //if participant is a Dna part or circuit
           if (interaction.participants[i].SO) {
           
-            interaction.participants[i].segment.isCircuit = true;
+            if (isCircuit) {
+                 interaction.participants[i].segment.isCircuit = true;
+             }
+            
             //update participant offset       
             design.geom.participantOffset = Helper.find_participant_offset(interaction.participants[i], interaction.displayId, "simulation"); 
             var segment = Segment.render(design, interaction.participants[i].segment, interactions);
@@ -51,13 +58,13 @@ function render(design, interaction, segments, interactions) {
             var segment = Segment.render(design, interaction.participants[i].segment, interactions);
            
             segment.dy(-nonDNAVerticalOffset);
-            if (design.geom.participantOffset !== 0 ) {
+            if (isCircuit ) {
               //segment.dx( (design.geom.participantOffset -1) * (design.geom.defaultGlyphSize.x + design.geom.glyphPadding) + design.geom.glyphPadding + design.geom.defaultGlyphSize.x/2)
               segment.dx(nonDNAshorizontalOffset - segment.bbox().width);
             }
-            else if (design.geom.participantOffset === 0) {
+            else if (!isCircuit) {
               segment.dx(0)
-              segment.dx(nonDNAshorizontalOffset - segment.bbox().width)
+              //segment.dx(nonDNAshorizontalOffset - segment.bbox().width)
             }
           }
          segments.push(segment);

From b5c9887c4af4fc9be26d9952327d677deb4bace8 Mon Sep 17 00:00:00 2001
From: asadeg02 <arezu.sadeghi@gmail.com>
Date: Wed, 5 Dec 2018 20:38:59 -0500
Subject: [PATCH 11/12] temporary changes

---
 lib/interactions/inhibition.js  | 9 ++++++---
 lib/interactions/production.js  | 8 ++++++--
 lib/interactions/stimulation.js | 5 ++++-
 lib/segment.js                  | 2 +-
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/lib/interactions/inhibition.js b/lib/interactions/inhibition.js
index 48b4dba..38d6163 100644
--- a/lib/interactions/inhibition.js
+++ b/lib/interactions/inhibition.js
@@ -54,17 +54,20 @@ function render(design, interaction, segments, interactions) {
           interaction.participants[i].segment.role = "inhibition_nonDNA";
           interaction.participants[i].segment.participantRole = interaction.participants[i].role;
           var segment = Segment.render(design, interaction.participants[i].segment, interactions);
-          //move the nonDNA part vertically
-          segment.dy(-nonDNAVerticalOffset);
+          
 
           //move the nonDna part horizontally to put it above the DNA part interacting with it  
           if (isCircuit) {
             //segment.dx( (design.geom.participantOffset -1) * (design.geom.defaultGlyphSize.x + design.geom.glyphPadding) + design.geom.glyphPadding + design.geom.defaultGlyphSize.x/2 + 25)
             segment.dx(nonDNAshorizontalOffset - segment.bbox().width) 
+            //move the nonDNA part vertically
+            segment.dy(-nonDNAVerticalOffset);
           }
           //case when we don't need to move the non-DNA part horizontally
             else if (!isCircuit) {
-              segment.dx(0) 
+              segment.dx(0)
+              //move the nonDNA part vertically
+              segment.dy(-90); 
           }
         }
       
diff --git a/lib/interactions/production.js b/lib/interactions/production.js
index 37c9253..29700b8 100644
--- a/lib/interactions/production.js
+++ b/lib/interactions/production.js
@@ -44,6 +44,7 @@ function render(design, interaction, segments, interactions) {
              design.geom.participantOffset = Helper.find_participant_offset(interaction.participants[i], interaction.displayId, "production");
              var segment = Segment.render(design, interaction.participants[i].segment, interactions);
              nonDNAVerticalOffset = segment.bbox().height + 30;
+             console.log(segment.bbox().height)
              nonDNAshorizontalOffset = (segment.bbox().width)/2;     
           }
           
@@ -53,14 +54,17 @@ function render(design, interaction, segments, interactions) {
             interaction.participants[i].segment.participantRole = interaction.participants[i].role;
             var segment = Segment.render(design, interaction.participants[i].segment, interactions);
            
-            //move the nonDNA part vertically
-            segment.dy(-nonDNAVerticalOffset);
+            
             if (isCircuit) {
               //segment.dx( (design.geom.participantOffset -1) * (design.geom.defaultGlyphSize.x + design.geom.glyphPadding) + design.geom.glyphPadding + design.geom.defaultGlyphSize.x/2)
               segment.dx(nonDNAshorizontalOffset - segment.bbox().width)
+              //move the nonDNA part vertically
+              segment.dy(-nonDNAVerticalOffset);
             }
             else if (!isCircuit) {
               segment.dx(0)
+              //move the nonDNA part vertically
+              segment.dy(-90);
               //segment.dx(nonDNAshorizontalOffset - segment.bbox().width)
             }
           }
diff --git a/lib/interactions/stimulation.js b/lib/interactions/stimulation.js
index de2fbc1..7f2f731 100644
--- a/lib/interactions/stimulation.js
+++ b/lib/interactions/stimulation.js
@@ -46,6 +46,7 @@ function render(design, interaction, segments, interactions) {
             //update participant offset       
             design.geom.participantOffset = Helper.find_participant_offset(interaction.participants[i], interaction.displayId, "simulation"); 
             var segment = Segment.render(design, interaction.participants[i].segment, interactions);
+            console.log(sgment.bbox().height)
             nonDNAVerticalOffset = segment.bbox().height + 30;
             nonDNAshorizontalOffset = (segment.bbox().width)/2;       
           }
@@ -57,13 +58,15 @@ function render(design, interaction, segments, interactions) {
             interaction.participants[i].segment.participantRole = interaction.participants[i].role;
             var segment = Segment.render(design, interaction.participants[i].segment, interactions);
            
-            segment.dy(-nonDNAVerticalOffset);
+            
             if (isCircuit ) {
               //segment.dx( (design.geom.participantOffset -1) * (design.geom.defaultGlyphSize.x + design.geom.glyphPadding) + design.geom.glyphPadding + design.geom.defaultGlyphSize.x/2)
               segment.dx(nonDNAshorizontalOffset - segment.bbox().width);
+              segment.dy(-nonDNAVerticalOffset - segment.bbox().height);
             }
             else if (!isCircuit) {
               segment.dx(0)
+              segment.dy(-90);
               //segment.dx(nonDNAshorizontalOffset - segment.bbox().width)
             }
           }
diff --git a/lib/segment.js b/lib/segment.js
index 1be2e46..84263c7 100755
--- a/lib/segment.js
+++ b/lib/segment.js
@@ -410,7 +410,7 @@ function renderSegment(design, segment, interactions,) {
 
     group.displayList = segment;
     segment.svg = group;
-
+   console.log(group.bbox().height)
    return group;
 }
 

From d629fa9b3d6abf5cd060136729921aebd1fb2a5d Mon Sep 17 00:00:00 2001
From: asadeg02 <arezu.sadeghi@gmail.com>
Date: Thu, 6 Dec 2018 01:59:29 -0500
Subject: [PATCH 12/12] resolve the bug regarding non-covelant-binding

---
 lib/interactions/non-covelant-binding.js | 11 ++++++++---
 lib/interactions/stimulation.js          |  3 +--
 lib/segment.js                           |  3 ++-
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/lib/interactions/non-covelant-binding.js b/lib/interactions/non-covelant-binding.js
index b251d29..3417c9f 100644
--- a/lib/interactions/non-covelant-binding.js
+++ b/lib/interactions/non-covelant-binding.js
@@ -21,9 +21,14 @@ function render(design, interaction, segments, interactions) {
       let productOffset = 0;
       let width = 0;
       for (let i in interaction.participants) {
-              
+           
+          if (!interaction.participants[i].segment) {
+              console.log(interaction.participants[i], "partcipant")
+              console.log(interaction, "interaction")
+          }   
           //clear all the previous rolles attached to participant segment
           interaction.participants[i].segment.role = null;
+          
 
           if (interaction.participants[i].role === "reactant") {
               reactantNumber++;
@@ -36,7 +41,7 @@ function render(design, interaction, segments, interactions) {
           var segment = Segment.render(design, interaction.participants[i].segment, interactions);
          
            if (i == 0) {
-            productOffset = interaction.participants.segmentWidth;
+            productOffset = interaction.segmentWidth;
             
            }
           
@@ -44,7 +49,7 @@ function render(design, interaction, segments, interactions) {
 
              //segment.dx(110);
              segment.dx(productOffset);
-             
+                          
          }
 
           else if (interaction.participants[i].segment.role === "reactant2") {
diff --git a/lib/interactions/stimulation.js b/lib/interactions/stimulation.js
index 7f2f731..1cae515 100644
--- a/lib/interactions/stimulation.js
+++ b/lib/interactions/stimulation.js
@@ -46,7 +46,6 @@ function render(design, interaction, segments, interactions) {
             //update participant offset       
             design.geom.participantOffset = Helper.find_participant_offset(interaction.participants[i], interaction.displayId, "simulation"); 
             var segment = Segment.render(design, interaction.participants[i].segment, interactions);
-            console.log(sgment.bbox().height)
             nonDNAVerticalOffset = segment.bbox().height + 30;
             nonDNAshorizontalOffset = (segment.bbox().width)/2;       
           }
@@ -62,7 +61,7 @@ function render(design, interaction, segments, interactions) {
             if (isCircuit ) {
               //segment.dx( (design.geom.participantOffset -1) * (design.geom.defaultGlyphSize.x + design.geom.glyphPadding) + design.geom.glyphPadding + design.geom.defaultGlyphSize.x/2)
               segment.dx(nonDNAshorizontalOffset - segment.bbox().width);
-              segment.dy(-nonDNAVerticalOffset - segment.bbox().height);
+              segment.dy(-nonDNAVerticalOffset);
             }
             else if (!isCircuit) {
               segment.dx(0)
diff --git a/lib/segment.js b/lib/segment.js
index 84263c7..9257a95 100755
--- a/lib/segment.js
+++ b/lib/segment.js
@@ -280,7 +280,8 @@ function renderSegment(design, segment, interactions,) {
            var arrowGlyph = arrowProps.glyph;
            arrowGlyph.transform({ matrix: Matrix.toSVGString(arrowTransform) });
            group.add(arrowGlyph);
-           interaction.participants.segmentWidth =  group.bbox().width
+           //interaction.participants.segmentWidth =  group.bbox().width
+           interaction.segmentWidth =  group.bbox().width
         }
 
         //if glyph is the first reactant in a non-covelant-binding-reaction modify direction of arrow