adapt row height to syntax tree

Author: hmsklee

index.html

@@ -34,14 +34,11 @@
   <div id="tooltip">
   </div>
 </div>
-<div id="graph">
-</div>
 
-<script src="libs/d3.min.js"></script>
 <script src="libs/svg.js"></script>
 <script src="libs/svg.draggable.js"></script>
 
-<script src="js/panel.js"></script>
+<script src="js/ymljson.js"></script>
 <script src="js/parser.js"></script>
 <script src="js/main.js"></script>
 <script src="js/managers/tooltip.js"></script>

js/components/row.js

@@ -6,7 +6,7 @@ class Row {
     this.rw = 0;
     this.words = [];
     this.maxSlot = 0;
-    this.paddingTop = 0;
+    this.minSlot = 0;
 
     // svg elements
     this.svg = null;    // group
@@ -133,28 +133,9 @@ class Row {
     this.wordGroup.removeElement(word.svg);
     return word;
   }
-  calculateMaxSlot() {
-    // get max slot
-    function fn(acc, anchor) {
-      if (anchor.links.length === 0) {
-        return Math.max(acc, anchor.slot);
-      }
-      return anchor.links.reduce(fn, 0);
-    }
-    this.maxSlot = this.words.reduce(fn, 0);
-  }
-  calculateMinSlot() {
-    function fn(acc, anchor) {
-      if (anchor.links.length === 0) {
-        return Math.min(acc, anchor.slot);
-      }
-      return anchor.links.reduce(fn, 0);
-    }
-    this.minSlot = this.words.reduce(fn, 0);
-  }
 
-  get ry2() { return this.ry + this.rh; }
+  get ry2() { return this.ry + this.rh + 20 - this.minSlot * 15; }
   get minHeight() {
-    return 90 + (this.maxSlot - this.paddingTop) * 15;
+    return 60 + this.maxSlot * 15;
   }
 }

js/main.js

@@ -1,7 +1,6 @@
 const Main = (function() {
   // classes
   let parser;
-  let panel;
 
   // main svg element
   let svg;
@@ -28,7 +27,6 @@ const Main = (function() {
 
     tooltip = new Tooltip('tooltip', svg);
     parser  = new Parser();
-    panel   = new Panel('graph');
     rm      = new RowManager(svg);
     lm      = new LabelManager(svg);
 
@@ -71,9 +69,11 @@ const Main = (function() {
   function changeDataset(index = 1) {
     parser.readJson(`./data/data${index}.json`, function() {
       clear();
-      [words, links, clusters] = buildWordsAndLinks();
-      populateOptions();
-      draw();
+      ymlToJson.convert('taxonomy.yml.txt', function(taxonomy) {
+        [words, links, clusters] = buildWordsAndLinks();
+        populateOptions();
+        draw();
+      });
     });
   };
 

js/managers/rowmanager.js

@@ -8,24 +8,24 @@ const RowManager = (function() {
     }
 
     resizeAll() {
-      _rows.forEach((row, i) => {
-        row.calculateMaxSlot();
-        row.calculateMinSlot();
-        if (i > 0) {
-          row.paddingTop = _rows[i - 1].minSlot;
-        }
-        let dy = row.minHeight - row.rh;
-        if (dy > 0) { this.resizeRow(row.idx, dy); }
+      _rows.forEach(row => {
+        this.recalculateRowSlots(row);
+        this.resizeRow(row.idx);
       });
     }
 
-    resizeRow(i, dy) {
+    resizeRow(i, dy = 0) {
       let row = _rows[i];
       dy = Math.max(-row.rh + row.minHeight, dy);
       row.height(row.rh + dy);
       row.words.forEach(word => word.redrawLinks());
       for (let j = i + 1; j < _rows.length; ++j) {
-        _rows[j].dy(dy);
+        if (_rows[j - 1].ry2 + ROW_PADDING > _rows[j].ry + dy) {
+          _rows[j].move(_rows[j - 1].ry2 + ROW_PADDING);
+        }
+        else {
+          _rows[j].dy(dy);
+        }
         _rows[j].words.forEach(word => word.redrawLinks());
       }
       _svg.height(this.lastRow.ry2 + ROW_PADDING + 20);
@@ -60,15 +60,23 @@ const RowManager = (function() {
 
     addWordToRow(word, row, i, ignorePosition) {
       if (isNaN(i)) { i = row.words.length; }
-      if (word.row && word.row !== row) { word.row.calculateMaxSlot(); }
+
+      // get word slots
+      let slots = this.getSlotRange([0,0], word);
+      if (word.row && word.row !== row &&
+        (slots[0] === word.row.minSlot || word.row.maxSlot === slots[1])) {
+        this.recalculateRowSlots(word.row);
+      }
+      if (row.minSlot > slots[0] || row.maxSlot < slots[1]) {
+        if (row.minSlot > slots[0]) { row.minSlot = slots[0]; }
+        if (row.maxSlot < slots[1]) { row.maxSlot = slots[1]; }
+        this.resizeRow(row.idx);
+      }
 
       let overflow = row.addWord(word, i, ignorePosition);
       while (overflow < row.words.length) {
         this.moveWordDownARow(row.idx);
       }
-      row.calculateMaxSlot();
-      let dy = row.minHeight - row.rh;
-      if (dy > 0) { this.resizeRow(row.idx, dy); }
     }
 
     moveWordOnRow(word, dx) {
@@ -183,6 +191,19 @@ const RowManager = (function() {
       this.addWordToRow(_rows[index].removeLastWord(), nextRow, 0);
     }
 
+    getSlotRange(acc, anchor) {
+      if (anchor.links.length === 0) {
+        return [Math.min(acc[0], anchor.slot), Math.max(acc[1], anchor.slot)];
+      }
+      let a = anchor.links.reduce((acc, val) => this.getSlotRange(acc, val), [0, 0]);
+      return [Math.min(acc[0], a[0]), Math.max(acc[1], a[1])];
+    }
+
+    recalculateRowSlots(row) {
+      [row.minSlot, row.maxSlot] = row.words
+        .reduce((acc, val) => this.getSlotRange(acc, val), [0, 0]);
+    }
+
     get lastRow() { return _rows[_rows.length - 1]; }
     get rows() { return _rows; }
   }

js/ymljson.js

@@ -0,0 +1,52 @@
+// non-comprehensive function to convert yml file to json
+const ymlToJson = (function() {
+  function convert(url, callback) {
+    var xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = function() {
+      if (xhr.readyState === 4 && xhr.status === 200) {
+        let taxonomy = [];
+        let arr = taxonomy;
+        const text = xhr.responseText;
+        const lines = text.split('\n');
+        let depths = [];
+
+        lines.forEach(line => {
+          let comment = line.indexOf('#');
+          let lineStart = line.indexOf('-');
+          if (lineStart < 0 || (comment >= 0 && comment < lineStart)) {
+            return;
+          }
+
+          line = ((comment >= 0) ? line.slice(lineStart + 1, comment) : line.slice(lineStart + 1)).trim();
+
+          while (depths.length > 0 && depths[depths.length - 1].i >= lineStart) {
+            arr = depths.pop().arr;
+          }
+          if (depths.length === 0) { arr = taxonomy; }
+
+          if (line.endsWith(':')) {
+            depths.push({ arr, i: lineStart });
+
+            let newArray = [];
+            let child = {};
+            child[line.slice(0, -1).trim()] = newArray;
+            arr.push(child);
+            arr = newArray;
+          }
+          else {
+            arr.push(line);
+          }
+        });//end forEach
+        if (callback) {
+          callback(taxonomy);
+        }
+      }
+    }
+    xhr.open("GET", url);
+    xhr.send();
+  };
+
+  return {
+    convert
+  };
+})();

taxonomy.yml.txt

@@ -0,0 +1,102 @@
+- Alias
+- ModificationTrigger
+- Site
+- Context:
+    - Species
+    - CellLine
+    - Organ
+    - CellType
+    - Cellular_component
+    - TissueType
+    - ContextDirection
+    - ContextLocation
+    - ContextPossessive
+- Modification:
+    - PTM
+    - Mutant:
+        - GenericMutant
+        - SubstitutionMutant
+        - DeletionMutant
+        - DuplicationMutant
+        - InsertionMutant
+        - FrameshiftMutant
+    - EventSite
+    - Negation
+- PossibleController:
+    - Event:
+        - SimpleEvent:
+            - Binding
+            - Generic_event
+            - Translocation
+            - Amount:
+              - IncreaseAmount:
+                - Transcription
+              - DecreaseAmount
+            - AdditionEvent:
+                - Acetylation
+                - Farnesylation
+                - Glycosylation
+                - Hydrolysis
+                - Hydroxylation
+                - Methylation
+                - Phosphorylation:
+                    - AutoPhosphorylation
+                - Ribosylation
+                - Sumoylation
+                - Ubiquitination
+            - RemovalEvent:
+                - Deacetylation
+                - Defarnesylation
+                - Deglycosylation
+                - Dehydrolysis
+                - Dehydroxylation
+                - Demethylation
+                - Dephosphorylation
+                - Deribosylation
+                - Desumoylation
+                - Deubiquitination
+        - ComplexEvent:
+            - Regulation:
+                - Positive_regulation
+                - Negative_regulation
+            - ActivationEvent:
+                - Positive_activation
+                - Negative_activation
+    - Entity:
+      # Any BioEntity may appear as the controlled in an Activation
+      - BioEntity:
+          - BioProcess   # ex. "apoptosis"
+          - BioChemicalEntity:
+              - Generic_entity
+              - Simple_chemical
+              - Equivalable: #TODO: Better name
+                  - Family
+                  - MacroMolecule:
+                      - Protein
+                      - Gene_or_gene_product
+                      - Complex
+                      - GENE
+# a preliminary taxonomy for assembly (precedence relations)
+- Precedence:
+    # for pairs that are directly (immediately) connected
+    # difficult to know from odin rules alone, but not impossible
+    - DirectConnection
+    # for pairs that are indirectly (not immediately) connected
+    - IndirectConnection
+    # Between-sentence precedence
+    - BetweenSentence:
+        - TimexAfter
+        - TimexBefore
+        - SentenceInitialEvent
+        - InterAfter
+        - InterBefore
+    # tense and aspect detection
+    - TAM:
+        - Aux
+        - Tense:
+            - PastTense
+            - PresentTense
+            - FutureTense
+        - Aspect:
+            - Perfective
+            - Progressive