Added visual cues for multi-direction options in the matrix

GridBuilder.js

@@ -255,17 +255,18 @@ var GridBuilder = (function () {
         displayTooltip($table, pos.left + targetDom.width() + 10, pos.top - targetDom.height() / 2);
     }
 
-    function dirToArrow(d) {
-        switch (d) {
-            case 'u':
-                return ' ⇑ ';
-            case 's':
-                return ' ⇐ ';
-            case 'd':
-                return ' ⇖';
-            default:
-                return '';
+    function getCssClassesFromDirection(directions) {
+
+        var cssClasses = "";
+
+        if(!Array.isArray(directions)){
+            return cssClasses;
         }
+
+        cssClasses = directions.join(' ');
+
+        return cssClasses;
+
     }
 
     function constructNRow(n) {
@@ -276,45 +277,42 @@ var GridBuilder = (function () {
         var $th = null;
 
         if (charIndex >= 0) {
-            $th = $('<th />');
-            $th.addClass("seq-header");
-            $th.addClass("side-header");
-            $th.attr('id', 'side_seq_' + charIndex);
-            $th.html(mSideSequence[charIndex]);
+            $th = $('<th />')
+                .addClass("seq-header")
+                .addClass("side-header")
+                .attr('id', 'side_seq_' + charIndex)
+                .html(mSideSequence[charIndex]);
             $tr.append($th);
         } else {
             $th = $('<th />');
             $tr.append($th);
         }
 
-        var $td = $('<td />');
-        $td.html(
-            //0 + "_" + n
-            dirToArrow(mCellMap[0 + "_" + n].direction) +
-            mCellMap[0 + "_" + n].winningScore
-        );
-        $td.attr('data-x', 0);
-        $td.attr('data-y', n);
-        $td.attr('id', 0 + "_" + n);
+        var $td = $('<td />')
+            .html(mCellMap[0 + "_" + n].winningScore)
+            .attr('data-x', 0)
+            .attr('data-y', n)
+            .attr('id', 0 + "_" + n);
         $tr.append($td);
 
         for (var idx in mTopSequence) {
             idx = parseInt(idx, 10);
             var dataPointIndex = (idx + 1) + '_' + (charIndex + 1);
-            $td = $('<td />');
-            //console.log(dataPointIndex);
-            $td.html(
-                //dataPointIndex
-                dirToArrow(mCellMap[dataPointIndex].direction) +
-                mCellMap[dataPointIndex].winningScore
-            );
-            $td.attr('data-x', (idx + 1));
-            $td.attr('data-y', (charIndex + 1));
-            $td.attr('data-dg', mCellMap[dataPointIndex].diagonalScoreText);
-            $td.attr('data-up', mCellMap[dataPointIndex].upScoreText);
-            $td.attr('data-sd', mCellMap[dataPointIndex].sideScoreText);
+
+            var cssClasses = "";
+            if(n > 0){
+                cssClasses = getCssClassesFromDirection(mCellMap[(idx+1) + "_" + (charIndex+ 1)].direction);
+            }
 
-            $td.attr('id', dataPointIndex);
+            $td = $('<td />')
+                .addClass(cssClasses)
+                .html(mCellMap[dataPointIndex].winningScore)
+                .attr('data-x', (idx + 1))
+                .attr('data-y', (charIndex + 1))
+                .attr('data-dg', mCellMap[dataPointIndex].diagonalScoreText)
+                .attr('data-up', mCellMap[dataPointIndex].upScoreText)
+                .attr('data-sd', mCellMap[dataPointIndex].sideScoreText)
+                .attr('id', dataPointIndex);
             $tr.append($td);
         }
 
@@ -377,8 +375,8 @@ var GridBuilder = (function () {
             if (x < 1 || y < 1) {
                 return;
             }
-            console.log(           "#side_seq_" + (y -1));
-            console.log(           "#top_seq_" + (x -1));
+            //console.log(           "#side_seq_" + (y -1));
+            //console.log(           "#top_seq_" + (x -1));
             $("#side_seq_" + (y-1)).addClass('highlight');
             $("#top_seq_" + (x-1)).addClass('highlight');
 
@@ -426,15 +424,22 @@ var GridBuilder = (function () {
             var currentX = width - 1;
             var currentY = height - 1;
             while (currentX > -1 && currentY > -1) {
+
                 var currentCell = mCellMap[currentX + '_' + currentY];
                 var currentDom = $('#' + currentX + '_' + currentY);
 
                 currentDom.click();
-                switch (currentCell.direction) {
+
+                var direction = null;
+                if(currentCell.direction){
+                    direction = currentCell.direction[currentCell.direction.length-1];
+                }
+
+                switch (direction) {
                     default:
-                        case 'd':
+                    case 'd':
                         currentX--;
-                    currentY--;
+                        currentY--;
                     break;
                     case 's':
                             currentX--;
@@ -443,10 +448,9 @@ var GridBuilder = (function () {
                             currentY--;
                         break;
                 }
-
+                
             }
 
-
         },
 
         startCustomPath: function() {
@@ -529,13 +533,30 @@ var GridBuilder = (function () {
                     It assigns the diagonal the lowest priority, then the up score and then the side scores
                     
                     */
+
+                    /*
                     var direction = 'd';
                     if (mPathTable[i][j] === moveUpScore) {
                         direction = 'u';
                     } else if (mPathTable[i][j] === moveSdScore) {
                         direction = 's';
                     }
+                    */
+
+                    var direction = [];
 
+                    if(mPathTable[i][j] === moveDgScore){
+                        direction.push('d');
+                    }
+
+                    if (mPathTable[i][j] === moveUpScore) {
+                        direction.push('u');
+                    }
+
+                    if (mPathTable[i][j] === moveSdScore) {
+                        direction.push('s');
+                    }
+
                     mCellMap[i + "_" + j] = {
                         'sideScoreText': mPathTable[i - 1][j] + " + " + gapScore + " (The Gap score) = " + moveSdScore,
                         'upScoreText': mPathTable[i][j - 1] + " + " + gapScore + " (The Gap score) = " + moveUpScore,

index.html

@@ -68,12 +68,12 @@ <h2>Interactive demo for Needleman-Wunsch algorithm</h2>
 <table>
 <tr>
     <td><label>Sequence 1</label></td>
-    <td colspan="4"><input id="seq_1" class='seq' value="GAAC" maxlength="20" /></label></td>
+    <td colspan="4"><input id="seq_1" class='seq' value="GATTACA" maxlength="20" /></label></td>
     <td rowspan="10" id="result"></td>
 </tr>
 <tr>
     <td><label>Sequence 2</label></td>
-    <td colspan="4"><input id="seq_2" class='seq' value="CAAGAC" maxlength="20" /></td>
+    <td colspan="4"><input id="seq_2" class='seq' value="GTCGACG" maxlength="20" /></td>
  </tr>
 <tr colspan="4">
     <th><label>Match Score</label></th>

style.css

@@ -12,7 +12,6 @@
     background-color:green;
 }
 #grid td{
-    border-radius:5px;
     width:50px;
     cursor:pointer;
     text-align:center;
@@ -26,13 +25,14 @@
     background-color:gold;
 }
 #grid td.highlight-main{
-    border: 1px solid green;
+    border: 1px solid green !important;
     background-color:green;
     color:white;
 
 }
 #grid td.highlight{
-    border: 1px solid green;
+    border: 1px solid green !important; 
+    background-color:gold;
 }
 #grid tr{
     height:50px;
@@ -85,4 +85,39 @@ label{
     max-width:170px;
     padding:5px;
     vertical-align:top;
+}
+
+td{
+    background-repeat:no-repeat;
+}
+
+#grid td.s {
+    background-image:url('images/s.png');
+    border:1px solid black;
+}
+
+#grid td.u {
+    background-image:url('images/u.png');
+    border:1px solid black;
+}
+
+#grid td.d {
+    background-image:url('images/d.png');
+    border:1px solid black;
+}
+
+td.d.s {
+    background-image:url('images/ds.png');
+}
+
+td.d.u {
+    background-image:url('images/du.png');
+}
+
+td.s.u {
+    background-image:url('images/su.png');
+}
+
+td.d.s.u {
+    background-image:url('images/dsu.png');
 }