Show indices on array tracers

Author: 64json

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Renderer } from '/core/renderers';
+import { Array1DRenderer, Renderer } from '/core/renderers';
 import styles from './stylesheet.scss';
 import { classes } from '/common/util';
 
@@ -14,13 +14,35 @@ class Array2DRenderer extends Renderer {
   renderData() {
     const { data } = this.props.data;
 
+    const isArray1D = this instanceof Array1DRenderer;
+    let longestRow = data.reduce((longestRow, row) => longestRow.length < row.length ? row : longestRow, []);
+
     return (
       <table className={styles.array_2d}
              style={{ marginLeft: -this.centerX * 2, marginTop: -this.centerY * 2, fontSize: this.zoom }}>
         <tbody>
+        <tr className={styles.row}>
+          {
+            !isArray1D &&
+            <td className={classes(styles.col, styles.index)} />
+          }
+          {
+            longestRow.map((_, i) => (
+              <td className={classes(styles.col, styles.index)}>
+                <span className={styles.value}>{i}</span>
+              </td>
+            ))
+          }
+        </tr>
         {
           data.map((row, i) => (
             <tr className={styles.row} key={i}>
+              {
+                !isArray1D &&
+                <td className={classes(styles.col, styles.index)}>
+                  <span className={styles.value}>{i}</span>
+                </td>
+              }
               {
                 row.map((col, j) => (
                   <td className={classes(styles.col, col.selected && styles.selected, col.patched && styles.patched)}

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

@@ -9,12 +9,6 @@
     display: table-row;
     height: 28em;
 
-    &:empty:after {
-      content: '';
-      display: table-cell;
-      border-left: 1em solid $theme-light;
-    }
-
     .col {
       display: table-cell;
       text-align: center;
@@ -34,6 +28,12 @@
       &.patched {
         background-color: $color-patched;
       }
+
+      &.index {
+        background: none;
+        border: none;
+        color: $theme-light;
+      }
     }
   }
 }