Merge pull request #203 from nadr0/auto-generate-tracers

Auto generate tracers

css/stylesheet.css

@@ -230,6 +230,7 @@ nav h3 {
 
 nav,
 section,
+.sandbox_container,
 .viewer_container,
 .editor_container {
     position: absolute;
@@ -249,6 +250,11 @@ section {
     right: 50%;
 }
 
+.sandbox_container{
+    left: 50%;
+    z-index:  100;
+}
+
 .editor_container {
     left: 50%;
 }
@@ -258,6 +264,10 @@ section {
     border: none;
 }
 
+.hide{
+    display: none;
+}
+
 .tab_container {
     top: 30px;
     background: #242424;
@@ -332,6 +342,7 @@ section {
     border-bottom: none;
 }
 
+.close_bar,
 .files_bar {
     height: 30px;
     border-bottom: 1px solid #505050;
@@ -376,6 +387,11 @@ section {
     box-shadow: inset 16px 0 16px -16px rgba(0, 0, 0, .6), inset -16px 0 16px -16px rgba(0, 0, 0, .6);
 }
 
+.close_bar {
+    width: 100%;
+    background-color: #3f3f3f;
+}
+
 .explanation_container {
     border: none;
     top: 30px;
@@ -657,4 +673,55 @@ input[type=number]::-webkit-outer-spin-button {
         top: 30px;
         left: 0;
     }
-}
\ No newline at end of file
+}
+
+.buttonContainer {
+    width: 75px;
+    height: 25px;
+    display: block;
+    position: relative;
+    z-index: 100;
+    background-color: white;
+}
+
+.inputField {
+    width: 25px;
+    border: 0;
+}
+
+.sb-button {
+    border: 1px solid #515151;
+    height: 25px;
+    margin: 0 auto;
+}
+
+.auto-gen {
+    top: 30px;
+    height: 100%;
+    width: 100%;
+    text-align: center;
+    background-color: #262626;
+    align-items: center;
+}
+
+.inputs {
+    display: inline-block;
+    border: 0;
+    background-color: #505050;
+    height: 25px;
+    width: 75px;
+}
+
+.grid {
+    width: 50%;
+    height: 50%;
+    float: left;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.fields {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}

index.html

@@ -30,6 +30,13 @@
         </h3>
     </button>
     <div class="top-menu-buttons">
+        <div class="btn" id="btn_generate">
+            <div class="wrapper">
+                <i class='fa fa-pencil' aria-hidden='true'></i>
+                <span class="btn-text">Generate</span>
+            </div>
+        </div>
+
         <div class="btn" id="btn_share">
             <div class="wrapper">
                 <i class="fa fa-share" aria-hidden="true"></i> Share <input type="text" class="collapse" id="shared">

js/create/array1d.js

+'use strict';
+
+const array2D = require('./array2d');
+const modules = require('../module');
+const util = require('./util');
+
+const getTracerName = () =>{
+    return document.getElementById("tracerName-1D").value;
+}
+
+const getNumColumns = () => {
+    var column_field = document.getElementById('numColumns-1D');
+    return column_field.value;
+};
+
+const setup = () => {
+    var button_1DMatrix = document.getElementById("button-1DMatrix");
+    var logger;
+    var arr1DTracer;
+    button_1DMatrix.addEventListener('click',function(){
+        util.clearModules();
+        arr1DTracer = new modules.Array1DTracer();
+        var arrElem = document.querySelector('.module_wrapper');
+        arrElem.addEventListener("mousewheel", array2D.mousescroll, false);
+        arrElem.addEventListener("DOMMouseScroll", array2D.mousescroll, false);
+        logger = new modules.LogTracer('Generated Javascript');
+
+        var numColumns = getNumColumns();
+        var data = array2D.fauxData(1,numColumns)[0];
+
+        arr1DTracer.setData(data);
+        array2D.tableToInputFields(1, numColumns);
+        util.positionModules();
+        arr1DTracer.refresh();
+    },false);
+    var button_JS = document.getElementById('button-generateJS-1D');
+    button_JS.addEventListener('click',function(){
+        array2D.generateJS(logger, 'Array1DTracer',getTracerName());
+    },false);
+};
+
+
+module.exports = {
+    setup
+};

js/create/array2d.js

+'use strict';
+
+const modules = require('../module');
+const util = require('./util');
+
+
+const getTracerName = () =>{
+    return document.getElementById("tracerName-2D").value;
+}
+
+const getNumRows = () => {
+    var row_field = document.getElementById('numRows-2D');
+    return row_field.value;
+}
+
+const getNumColumns = () => {
+    var column_field = document.getElementById('numColumns-2D');
+    return column_field.value;
+}
+
+const fauxData = (r, c) => {
+    var D = [];
+    for (var i = 0; i < r; i++) {
+      D.push([]);
+      for (var j = 0; j < c; j++) {
+        D[i].push(Math.floor(Math.random()* 10 + 1));
+      }
+    }
+    return D;
+}
+
+const tableToInputFields = (numRows, numColumns) => {
+    var table = document.querySelector('.mtbl-table');
+
+    for(var i = 0; i < numRows; i++){
+        for(var j = 0; j < numColumns; j++){
+            var elem = document.createElement('input');
+            elem.type = 'Number';
+            elem.value = Math.floor(Math.random() * 10 + 1);
+            elem.classList.add('mtbl-col','inputField');
+            table.childNodes[i].childNodes[j].innerHTML = '';
+            table.childNodes[i].childNodes[j].appendChild(elem);
+        }
+    }
+}
+
+const generateJS = (logger, tracer, tracerName) => {
+    if(!logger) return;
+
+    logger.clear();
+    var table = document.querySelector('.mtbl-table');
+
+    var numRows = table.childNodes.length;
+    var numColumns = table.childNodes[0].childNodes.length;
+
+    logger.print('Copy and paste this code in your data.js file!');
+    logger.print('');
+
+    logger.print('let myTable = [');
+
+    var line = '';
+    var i;
+    var j;
+    var comma = ',';
+    for(i = 0; i < numRows; i++){
+        line = '[';
+        for(j = 0; j < numColumns-1; j++){
+            line += table.childNodes[i].childNodes[j].childNodes[0].value + ',';
+        }
+        if(i === numRows - 1){comma = '';}
+        line += table.childNodes[i].childNodes[j++].childNodes[0].value + ']' + comma;
+        logger.print(line);
+    }
+    logger.print(']');
+
+
+    logger.print("let myTableTracer = new "+ tracer +" ('"+tracerName+"')");
+    logger.print('myTableTracer._setData (myTable)');
+
+    util.enabledHightlighting();
+}
+
+const mousescroll = (e) =>{
+    var colmElem = document.querySelector('.mtbl-col');
+    var delta = (e.wheelDelta !== undefined && e.wheelDelta) ||
+      (e.detail !== undefined && -e.detail);
+
+    var inputFields = document.getElementsByClassName("inputField");
+    for (var i = 0; i < inputFields.length; i++) {
+        inputFields[i].style.width = (parseFloat(colmElem.style.fontSize) * 2.5) + "px";
+     }
+
+}
+
+const setup = () => {
+    var button_2DMatrix = document.getElementById("button-2DMatrix");
+    var logger;
+    var arr2DTracer;
+    button_2DMatrix.addEventListener('click',function(){
+        util.clearModules();
+        arr2DTracer = new modules.Array2DTracer();
+        var arrElem = document.querySelector('.module_wrapper');
+        arrElem.addEventListener("mousewheel", mousescroll, false);
+        arrElem.addEventListener("DOMMouseScroll", mousescroll, false);
+        logger = new modules.LogTracer('Generated Javascript');
+
+        var numRows = getNumRows();
+        var numColumns = getNumColumns();
+        var data = fauxData(numRows, numColumns);
+
+        arr2DTracer.setData(data);
+        tableToInputFields(numRows, numColumns);
+        util.positionModules();
+        arr2DTracer.refresh();
+    },false);
+    var button_JS = document.getElementById('button-generateJS-2D');
+    button_JS.addEventListener('click',function(){
+        generateJS(logger, 'Array2DTracer', getTracerName());
+    },false);
+}
+
+module.exports = {
+    setup,
+    mousescroll,
+    fauxData,
+    tableToInputFields,
+    generateJS
+};

js/create/index.js

+'use strict';
+
+const modules = require('../module');
+const array2d = require('./array2d');
+const array1d = require('./array1d');
+const util = require('./util');
+const Server = require('../server');
+const DOM = require('../dom');
+
+const {
+  getPath
+} = require('../server/helpers');
+
+const closeCreate = () => {
+        const $btnClose = $('#btn_close');
+
+        $btnClose.click(() => {
+            $('.sandbox_container').remove();
+            util.clearModules();
+            reloadAlgorithm();
+        });
+};
+
+const reloadAlgorithm = () => {
+    const {
+      category,
+      algorithm,
+      file
+    } = getPath();
+
+    Server.loadAlgorithm(category, algorithm).then((data) => {
+      DOM.showAlgorithm(category, algorithm, data);
+    });
+};
+
+const createHTML = () => {
+    $('.workspace').append("<div class='sandbox_container'>\
+            <section class='close_bar'>\
+            <div class='btn' id='btn_close'>\
+                <div class='wrapper'>\
+                    <i class='fa fa-times' aria-hidden='true'></i>\
+                </div>\
+            </div>\
+            </section>\
+            <section class='auto-gen'>\
+                <div class='grid' id='array1D-gen'>\
+                <div> array1DTracer </div>\
+                <i class='fa fa-ellipsis-h fa-5x' aria-hidden='true'></i>\
+                <div class='fields'>\
+                # of Columns: <input class='inputs'id='numColumns-1D' type='number' value='5'>\
+                </div>\
+                <div class='fields'>\
+                Tracer Name: <input class='inputs'id='tracerName-1D' type='text' value='default'>\
+                </div>\
+                <button class='sb-button' id='button-1DMatrix'>Create 1DMatrix</button>\
+                <button class='sb-button' id='button-generateJS-1D'>Generate Javascript</button>\
+                </div>\
+                <div class='grid' id='array2D-gen'>\
+                <div> array2DTracer </div>\
+                <i class='fa fa-th fa-5x' aria-hidden='true'></i>\
+                <div class='fields'>\
+                # of Rows: <input class='inputs'id='numRows-2D' type='number' value='5'>\
+                </div>\
+                <div class='fields'>\
+                # of Columns: <input class='inputs'id='numColumns-2D' type='number' value='5'>\
+                </div>\
+                <div class='fields'>\
+                Tracer Name: <input class='inputs'id='tracerName-2D' type='text' value='default'>\
+                </div>\
+                <button class='sb-button' id='button-2DMatrix'>Create 2DMatrix</button>\
+                <button class='sb-button' id='button-generateJS-2D'>Generate Javascript</button>\
+                </div>\
+                <div class='grid' id='chart-gen'></div>\
+                <div class='grid' id='graph-gen'></div>\
+            </section>\
+    </div>");
+};
+
+const init = () => {
+
+    var check = $('.sandbox_container');
+    if(!check.length){
+        util.clearModules();
+        createHTML();
+        array2d.setup();
+        array1d.setup();
+        closeCreate();
+    }
+};
+
+module.exports = {
+    init
+};

js/create/util.js

+'use strict';
+
+const positionModules = () =>{
+    var elems = document.getElementsByClassName('module_wrapper');
+    if(elems <= 0) return;
+
+    var n = elems.length;
+    var spacing = (100/n);
+
+    for (var i = 0; i < n; i++) {
+        if( i === 0){
+            elems[i].style.bottom = (spacing * (n-1)) + '%';
+        }else if(i === n - 1){
+            elems[i].style.top = (spacing * i) + '%';
+        }else{
+            elems[i].style.top = (spacing * i) + '%';
+            elems[i].style.bottom = (spacing * i) + '%';
+        }
+    }
+}
+
+const clearModules = () =>{
+    var elems = document.getElementsByClassName('module_wrapper');
+    if(elems.length > 0){
+        var parent = elems[0].parentElement;
+        var numChild = parent.childNodes.length;
+        for(var i = 0; i < numChild; i++){
+            parent.removeChild(parent.firstChild);
+        }
+    }
+}
+
+const enabledHightlighting = () =>{
+    var elems = document.getElementsByClassName('module_wrapper');
+    var logger = elems[1];
+    var wrapper = logger.childNodes[1];
+    for (var i = 0; i < wrapper.childNodes.length; i++) {
+        wrapper.childNodes[i].style["-webkit-user-select"] = "all";
+    }
+}
+
+module.exports = {
+    enabledHightlighting,
+    positionModules,
+    clearModules
+};

js/dom/setup/setup_top_menu.js

@@ -4,6 +4,7 @@ const app = require('../../app');
 const Server = require('../../server');
 const Toast = require('../toast');
 const TopMenu = require('../top_menu');
+const create = require('../../create');
 
 module.exports = () => {
 
@@ -32,6 +33,7 @@ module.exports = () => {
   const $btnPause = $('#btn_pause');
   const $btnPrev = $('#btn_prev');
   const $btnNext = $('#btn_next');
+  const $btnGenerate = $('#btn_generate');
 
   // initially, control buttons are disabled
   TopMenu.disableFlowControl();
@@ -73,4 +75,8 @@ module.exports = () => {
     app.getTracerManager().nextStep();
   });
 
+  $btnGenerate.click(() => {
+     create.init();
+  });
+
 };

js/dom/show_algorithm.js

@@ -45,4 +45,4 @@ module.exports = (category, algorithm, data, requestedFile) => {
 
   showDescription(data);
   addFiles(category, algorithm, files, requestedFile);
-};
\ No newline at end of file
+};

js/index.js

@@ -5,7 +5,6 @@ const app = require('./app');
 const AppConstructor = require('./app/constructor');
 const DOM = require('./dom');
 const Server = require('./server');
-
 const modules = require('./module');
 
 const {
@@ -33,7 +32,6 @@ RSVP.on('error', function (reason) {
 });
 
 $(() => {
-
   // initialize the application and attach in to the instance module
   const appConstructor = new AppConstructor();
   extend(true, app, appConstructor);
@@ -72,6 +70,7 @@ $(() => {
     } else {
       DOM.showFirstAlgorithm();
     }
+
   });
 
   Server.loadWikiList().then((data) => {

js/module/index.js

@@ -7,4 +7,4 @@ const {
   extend
 } = $;
 
-module.exports = extend(true, {}, tracers, datas);
\ No newline at end of file
+module.exports = extend(true, {}, tracers, datas);