SBGN Brick: Translation #671

iVis-at-Bilkent · May 25, 2021 · aa9a2fe · aa9a2fe
1 parent 696e406
commit aa9a2fe
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 15 deletions.
diff --git a/app/js/backbone-views.js b/app/js/backbone-views.js
@@ -3450,6 +3450,13 @@ var ReactionTemplateView = Backbone.View.extend({
         const params = self.getTranscriptionParameters();
         self.chiseInstance.createTranscription(params.label, params.orientation);
       }
+      else if (brickType === "translation") {
+        const params = self.getTranslationParameters();
+        self.chiseInstance.createTranslation(params.regulatorLabel, params.outputLabel, params.orientation);
+      }
+      else {
+        console.error("SBGN Bricks Modal - updatePreview() - brick type not found");
+      }
       const padding = 5;
       self.cy.fit(self.cy.elements(), padding);
     },500);
@@ -3870,6 +3877,17 @@ var ReactionTemplateView = Backbone.View.extend({
       orientation: orientation
     }
   },
+  getTranslationParameters: function() {
+    const regulatorLabel = $("#translation-regulator-name").val();
+    const outputLabel = $("#translation-output-name").val();
+    const orientation = $("#metabolic-reaction-orientation-select").val();
+
+    return {
+      regulatorLabel: regulatorLabel,
+      outputLabel: outputLabel,
+      orientation: orientation
+    }
+  },
   enableImageButtons: function(jQueryElements) {
     jQueryElements.removeClass("image-button-disabled-appearance")
                   .addClass("image-button-enabled-appearance");
@@ -4034,6 +4052,14 @@ var ReactionTemplateView = Backbone.View.extend({
       self.updatePreview();
     });
 
+    $(document).on("input", "#translation-regulator-name", function() {
+      self.updatePreview();
+    });
+
+    $(document).on("input", "#translation-output-name", function() {
+      self.updatePreview();
+    });
+
     $(document).on("change", "#conversion-reaction-selector", function() {
       const conversionType = $(this).val();
 
@@ -4237,6 +4263,10 @@ var ReactionTemplateView = Backbone.View.extend({
         const params = self.getTranscriptionParameters();
         chiseInstance.createTranscription(params.label, params.orientation);
       }
+      else if (templateType === "translation") {
+        const params = self.getTranslationParameters();
+        chiseInstance.createTranslation(params.regulatorLabel, params.outputLabel, params.orientation);
+      }
       else { 
         console.error("SBGN Bricks - ReactionTemplateView - Create: Reaction type doesn't exist.")
       }
@@ -4285,57 +4315,49 @@ var ReactionTemplateView = Backbone.View.extend({
         "input-side-html": $('#reaction-template-left-td').html(),
         "output-side-html": $("#reaction-template-right-td").html(),
         "top-input-row": $("#reaction-top-input-row").html(),
-        "input-types": ["Simple Chemical"],
-        "output-types": ["Simple Chemical"],
         "help-link": ["http://sbgnbricks.org/BKO/full/entry/all/BKO:0000585/"]
       },
       "conversion": {
         "input-side-html": $('#conversion-template-left-td').html(),
         "output-side-html": $("#conversion-template-right-td").html(),
         "top-input-row": $("#conversion-top-input-row").html(),
-        "input-types": ["Macromolecule"],
-        "output-types": ["Macromolecule"],
         "help-link": ["http://sbgnbricks.org/BKO/full/entry/all/BKO:0000570/"]
       },
       "multimerization": {
         "input-side-html": $('#multimerization-template-left-td').html(),
         "output-side-html": $("#multimerization-template-right-td").html(),
         "top-input-row": $("#multimerization-top-input-row").html(),
-        "input-types": ["Macromolecule"],
-        "output-types": ["Macromolecule"],
         "help-link": ["http://sbgnbricks.org/BKO/full/entry/all/BKO:0000221/"]
       },
       "association": {
         "input-side-html": $('#association-template-left-td').html(),
         "output-side-html": $("#association-template-right-td").html(),
         "top-input-row": $("#association-top-input-row").html(),
-        "input-types": ["Macromolecule"],
-        "output-types": ["Macromolecule"],
         "help-link": ["http://sbgnbricks.org/BKO/full/entry/all/SBO:0000526/"]
       },
       "dissociation": {
         "input-side-html": $('#dissociation-template-left-td').html(),
         "output-side-html": $("#dissociation-template-right-td").html(),
         "top-input-row": $("#dissociation-top-input-row").html(),
-        "input-types": ["Macromolecule"],
-        "output-types": ["Macromolecule"],
         "help-link": ["http://sbgnbricks.org/BKO/full/entry/all/BKO:0000166/"]
       },
       "degradation": {
         "input-side-html": $('#degradation-template-left-td').html(),
         "output-side-html": $("#degradation-template-right-td").html(),
         "top-input-row": $("#degradation-top-input-row").html(),
-        "input-types": ["Macromolecule"],
-        "output-types": ["Source and Sink"],
         "help-link": ["http://sbgnbricks.org/BKO/full/entry/all/SBO:0000179/"]
       },
       "transcription": {
         "input-side-html": $('#transcription-template-left-td').html(),
         "output-side-html": $("#transcription-template-right-td").html(),
         "top-input-row": $("#transcription-top-input-row").html(),
-        "input-types": ["Source and Sink"],
-        "output-types": ["Nucleic Acid Feature"],
         "help-link": ["http://sbgnbricks.org/BKO/full/entry/all/SBO:0000183/"]
+      },
+      "translation": {
+        "input-side-html": $('#translation-template-left-td').html(),
+        "output-side-html": $("#translation-template-right-td").html(),
+        "top-input-row": $("#translation-top-input-row").html(),
+        "help-link": ["http://sbgnbricks.org/BKO/full/entry/all/BKO:0000481/"]
       }
     }
     return this;

diff --git a/index.html b/index.html
@@ -2394,6 +2394,7 @@ <h4 class="modal-title">SBGN Bricks</h4>
             <option id="brick-type-dissociation" value="dissociation">Dissociation</option>
             <option id="brick-type-degradation" value="degradation">Degradation</option>
             <option id="brick-type-transcription" value="transcription">Transcription</option>
+            <option id="brick-type-translation" value="translation">Translation</option>
             </select>
             <!-- Display help image, leads to SBGN Bricks page of the selected brick type -->
             <a id="reaction-template-help-link" href="http://sbgnbricks.org/BKO/full/entry/all/BKO:0000585/" target="_blank">
@@ -2865,6 +2866,60 @@ <h4 class="modal-title">SBGN Bricks</h4>
             </div>
             </td>
 
+            <tr id="translation-top-input-row" class="hide" align="center" style="height: 40px; vertical-align: bottom;">   
+            <td colspan='100%'>
+            <div class="thin-blue-border" style="padding: 10px; margin-bottom: 20px; width: fit-content;">
+            <label for='translation-regulator-name' class="layout-text" style="font: inherit;"></label>
+            <input id='translation-regulator-name' type='text' class='sbgn-input-medium layout-text' value='' class="text-input-enabled"></input>
+
+            <select id="translation-regulator-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content; margin-left: 10px;'>
+            <option value="macromolecule" selected>Nucleic Acid Feature</option>
+            </select>
+            <select id="translation-regulator-edge-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content; margin-left: 10px;'>
+            <option value="stimulation" selected>Necessary Stimulation</option>
+            </select>
+            </div>
+            </td>
+            </tr>
+
+            <td id='translation-template-left-td' class="hide">
+            <div class="thin-blue-border">
+            <div style="margin-bottom: 5px;">Input</div>
+            <table id='translation-input-table'>
+            <tr>
+            <td>
+            <input id='translation-input-name' type='text' class='template-reaction-textbox sbgn-input-medium layout-text' style="cursor: not-allowed;" disabled></input>
+            </td>
+            <td>
+            <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content'>
+            <option value="source and sink">Source and Sink</option>
+            </td>
+            </tr>
+            </table>
+            </div>
+            </td>
+
+            <!-- Blank space between input and output
+            <td style="width: 50px; margin-left: 50%;"></td> -->
+
+
+            <td id='translation-template-right-td' class="hide">
+            <div class="thin-blue-border">
+            <div style="margin-bottom: 5px;">Output</div>
+            <table id='translation-output-table'>
+            <tr>
+            <td>
+            <input id='translation-output-name' type='text' class='template-reaction-textbox sbgn-input-medium layout-text'></input>
+            </td>
+            <td>
+            <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content;'>
+            <option value="Macromolecule">Macromolecule</option>
+            </td>
+            </tr>
+            </table>
+            </div>
+            </td>
+
             </tr>
             <tr id="conversion-bottom-row" class="hide">
             <td colspan="100%" align="center">

diff --git a/package-lock.json b/package-lock.json