Fix some of eslint errors

.eslintrc.js

@@ -3,5 +3,8 @@ module.exports = {
   'rules': {
     'no-plusplus': 'off',
     'no-mixed-operators': 'off',
+    'no-bitwise': 'off',
+    'import/no-unresolved': 'off',
+    'import/extensions': 'off',
   }
 };
\ No newline at end of file

bin/temporary_action.js

 const path = require('path');
 const fs = require('fs');
+const lebab = require('lebab');
 
 const categories = fs.readdirSync(path.resolve(__dirname, '..', 'algorithm'));
 for (const category of categories) {
@@ -8,19 +9,13 @@ for (const category of categories) {
   for (const algorithm of algorithms) {
     if (algorithm.startsWith('.')) continue;
     const filepath = path.resolve(__dirname, '..', 'algorithm', category, algorithm, 'code.js');
-    const code = fs.readFileSync(filepath, 'utf-8');
-    const tracers = [
-      'Array1DTracer',
-      'Array2DTracer',
-      'ChartTracer',
-      'GraphTracer',
-      'LogTracer',
-      'Randomize',
-      'Tracer',
-    ];
-    const used = tracers.filter(tracer => code.includes(tracer));
-    const importLine = `import { ${used.join(', ')} } from 'algorithm-visualizer';\n\n`;
-    const newCode = importLine + code;
-    fs.writeFileSync(filepath, newCode, 'utf-8');
+    const oldCode = fs.readFileSync(filepath, 'utf-8');
+    try {
+      const { code: newCode, warnings } = lebab.transform(oldCode, ['let', 'arrow', 'multi-var', 'template', 'default-param', 'includes']);
+//      fs.writeFileSync(filepath, newCode, 'utf-8');
+    } catch (e) {
+      console.log(filepath);
+      console.error(e);
+    }
   }
 }
\ No newline at end of file

src/frontend/core/Randomize.js

@@ -2,6 +2,15 @@ const integer = (min = 1, max = 9) => {
   return (Math.random() * (max - min + 1) | 0) + min;
 };
 
+const string = length => {
+  const choices = 'abcdefghijklmnopqrstuvwxyz';
+  let text = '';
+  for (let i = 0; i < length; i++) {
+    text += choices[integer(0, choices.length - 1)];
+  }
+  return text;
+};
+
 const array1D = (N, options) => {
   return array2D(1, N, options)[0];
 };
@@ -41,6 +50,7 @@ const graph = (N = 5, options = {}) => {
 
 export default {
   integer,
+  string,
   array1D,
   array2D,
   graph,

src/frontend/core/datas/GraphData.js

@@ -33,16 +33,16 @@ class GraphData extends Data {
     for (let i = 0; i < array2d.length; i++) {
       const id = i;
       const weight = null;
-      const visited = false;
-      this.graph.addNode(id, weight, visited);
+      const visitedCount = 0;
+      this.graph.addNode(id, weight, visitedCount);
       for (let j = 0; j < array2d.length; j++) {
         const value = array2d[i][j];
         if (value) {
           const source = i;
           const target = j;
           const weight = weighted ? value : null;
-          const visited = false;
-          this.graph.addEdge(source, target, weight, visited);
+          const visitedCount = 0;
+          this.graph.addEdge(source, target, weight, visitedCount);
         }
       }
     }
@@ -80,10 +80,10 @@ class GraphData extends Data {
 
   visitOrLeave(target, source, weight, visit) {
     const edge = this.graph.findEdge(source, target);
-    if (edge) edge.visited = visit;
+    if (edge) edge.visitedCount += visit ? 1 : -1;
     const node = this.graph.findNode(target);
     node.weight = weight;
-    node.visited = visit;
+    node.visitedCount += visit ? 1 : -1;
     this.render();
     if (this.logData) {
       this.logData.print(visit ? (source || '') + ' -> ' + target : (source || '') + ' <- ' + target);
@@ -108,14 +108,14 @@ class Graph {
     this.directed = directed;
   }
 
-  addNode(id, weight, visited, x = 0, y = 0) {
+  addNode(id, weight, visitedCount, x = 0, y = 0) {
     if (this.findNode(id)) return;
-    this.nodes.push({ id, weight, visited, x, y });
+    this.nodes.push({ id, weight, visitedCount, x, y });
   }
 
-  addEdge(source, target, weight, visited) {
+  addEdge(source, target, weight, visitedCount) {
     if (this.findEdge(source, target)) return;
-    this.edges.push({ source, target, weight, visited });
+    this.edges.push({ source, target, weight, visitedCount });
   }
 
   findNode(id) {

src/frontend/core/renderers/Array2DRenderer/index.jsx

@@ -8,23 +8,25 @@ class Array2DRenderer extends Renderer {
     const { data } = this.props.data;
 
     return (
-      <div className={styles.array_2d}
-           style={{ marginLeft: -this.centerX * 2, marginTop: -this.centerY * 2, fontSize: this.zoom }}>
+      <table className={styles.array_2d}
+             style={{ marginLeft: -this.centerX * 2, marginTop: -this.centerY * 2, fontSize: this.zoom }}>
+        <tbody>
         {
           data.map((row, i) => (
-            <div className={styles.row} key={i}>
+            <tr className={styles.row} key={i}>
               {
                 row.map((col, j) => (
-                  <div className={classes(styles.col, col.selected && styles.selected, col.notified && styles.notified)}
-                       key={j}>
-                    <span className={styles.value}>{col.value}</span>
-                  </div>
+                  <td className={classes(styles.col, col.selected && styles.selected, col.notified && styles.notified)}
+                      key={j}>
+                    <span className={styles.value}>{this.toString(col.value)}</span>
+                  </td>
                 ))
               }
-            </div>
+            </tr>
           ))
         }
-      </div>
+        </tbody>
+      </table>
     );
   }
 }

src/frontend/core/renderers/Array2DRenderer/stylesheet.scss

@@ -12,12 +12,13 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 28em;
+      min-width: 28em;
       height: 28em;
       background-color: $theme-normal;
       border: 1em solid $theme-light;
       margin-right: -1em;
       margin-bottom: -1em;
+      padding: 0 4em;
 
       .value {
         font-size: 12em;

src/frontend/core/renderers/GraphRenderer/index.jsx

@@ -58,8 +58,8 @@ class GraphRenderer extends Renderer {
           </marker>
         </defs>
         {
-          graph.edges.sort((a, b) => a.visited - b.visited).map(edge => {
-            const { source, target, weight, visited } = edge;
+          graph.edges.sort((a, b) => a.visitedCount - b.visitedCount).map(edge => {
+            const { source, target, weight, visitedCount } = edge;
             const { x: sx, y: sy } = graph.findNode(source);
             let { x: ex, y: ey } = graph.findNode(target);
             const mx = (sx + ex) / 2;
@@ -76,12 +76,13 @@ class GraphRenderer extends Renderer {
             }
 
             return (
-              <g className={classes(styles.edge, visited && styles.visited)} key={`${source}-${target}`}>
+              <g className={classes(styles.edge, visitedCount && styles.visited)} key={`${source}-${target}`}>
                 <path d={`M${sx},${sy} L${ex},${ey}`} className={classes(styles.line, directed && styles.directed)} />
                 {
                   weighted &&
                   <g transform={`translate(${mx},${my})`}>
-                    <text className={styles.weight} transform={`rotate(${degree})`} y={-edgeWeightGap}>{weight}</text>
+                    <text className={styles.weight} transform={`rotate(${degree})`}
+                          y={-edgeWeightGap}>{this.toString(weight)}</text>
                   </g>
                 }
               </g>
@@ -90,15 +91,15 @@ class GraphRenderer extends Renderer {
         }
         {
           graph.nodes.map(node => {
-            const { id, x, y, weight, visited } = node;
+            const { id, x, y, weight, visitedCount } = node;
             return (
-              <g className={classes(styles.node, visited && styles.visited)} key={id}
+              <g className={classes(styles.node, visitedCount && styles.visited)} key={id}
                  transform={`translate(${x},${y})`}>
                 <circle className={styles.circle} r={nodeRadius} />
                 <text className={styles.id}>{id}</text>
                 {
                   weighted &&
-                  <text className={styles.weight} x={nodeRadius + nodeWeightGap}>{weight}</text>
+                  <text className={styles.weight} x={nodeRadius + nodeWeightGap}>{this.toString(weight)}</text>
                 }
               </g>
             );

src/frontend/core/renderers/Renderer/index.jsx

@@ -89,6 +89,17 @@ class Renderer extends React.Component {
     this.refresh();
   }
 
+  toString(value) {
+    switch (typeof(value)) {
+      case 'number':
+        return value === Infinity ? '∞' : Number.isInteger(value) ? value.toString() : value.toFixed(3);
+      case 'boolean':
+        return value ? 'T' : 'F';
+      default:
+        return value;
+    }
+  }
+
   refresh() {
     this.forceUpdate();
   }