2 files changed, 49 insertions, 30 deletions
diff --git a/app/client/common/buttonGrid.component.js b/app/client/common/buttonGrid.component.js
index 4b86d62..6c7c105 100644
--- a/app/client/common/buttonGrid.component.js
+++ b/app/client/common/buttonGrid.component.js
@@ -1,32 +1,51 @@
 import { h, Component } from 'preact'
 
-export default function ButtonGrid(props) {
-  const max = props.max || Infinity
-  return (
-    <table className='buttonGrid'>
-      <tr className='row'>
-        <th>{" "}</th>
-        {props.x.map(x => (
-          <th>{x}</th>
-        ))}
-      </tr>          
-      {props.y.map(y => (
+export default class ButtonGrid extends Component {
+  state = {
+    x: 0, y: 0,
+  }
+
+  render() {
+    const {
+      x: _x,
+      y: _y,
+    } = this.state
+    const {
+      x: X,
+      y: Y,
+      max = Infinity,
+      onClick,
+      onHover,
+    } = this.props
+    return (
+      <table className='buttonGrid'>
         <tr className='row'>
-          <th>{y}</th>
-          {props.x.map(x => (
-            <td>
-              {x * y > max ? " " :
-                <button
-                  onClick={() => props.onClick(x, y)}
-                  onMouseEnter={() => props.onHover(x, y)}
-                >
-                  {" "}
-                </button>
-              }
-            </td>
+          <th>{" "}</th>
+          {X.map(x => (
+            <th className={x === _x && 'bold'}>{x}</th>
           ))}
-        </tr>
-      ))}
-    </table>
-  )
+        </tr>          
+        {Y.map(y => (
+          <tr className='row'>
+            <th className={y === _y && 'bold'}>{y}</th>
+            {X.map(x => (
+              <td>
+                {x * y > max ? " " :
+                  <button
+                    onClick={() => onClick(x, y)}
+                    onMouseEnter={() => {
+                      this.setState({ x, y })
+                      onHover(x, y)
+                    }}
+                  >
+                    {" "}
+                  </button>
+                }
+              </td>
+            ))}
+          </tr>
+        ))}
+      </table>
+    )
+  }
 }
diff --git a/app/client/common/currentTask.component.js b/app/client/common/currentTask.component.js
index a4d9750..3c71a88 100644
--- a/app/client/common/currentTask.component.js
+++ b/app/client/common/currentTask.component.js
@@ -22,10 +22,10 @@ function CurrentTask ({ cpu, gpu, processor }) {
   const { last_message, pid, task } = p
   const { activity, epoch, epochs, dataset, module } = task
   return (
-    <div>
+    <div className='currentTask'>
       #{pid}: <b>{module} {activity}</b> <i>{dataset}</i>
-      {epochs
-        ? <span>{epoch} epoch{util.courtesy_s(epoch)}</span>
+      {!!epochs
+        ? <span>{epochs} epoch{util.courtesy_s(epochs)}</span>
         : ""}
       {epoch
         ? <span>(currently #{epoch})</span>