change MCTS visualization to table format

Author: nicolodavis

package-lock.json

@@ -131,6 +131,7 @@
     "superagent": "^3.8.3",
     "supertest": "^3.1.0",
     "svelte": "^3.12.1",
+    "svelte-icons": "^1.1.0",
     "ts-jest": "^24.0.2",
     "ts-transformer-imports": "^0.4.3",
     "ttypescript": "^1.5.7",
@@ -168,7 +169,7 @@
       "^.+\\.svelte$": "jest-transform-svelte"
     },
     "transformIgnorePatterns": [
-      "node_modules/(?!(boardgame.io|flatted)/)"
+      "node_modules/(?!(boardgame.io|flatted|svelte-icons)/)"
     ],
     "testPathIgnorePatterns": [
       "examples/",

package.json

@@ -379,6 +379,11 @@ describe('MCTSBot', () => {
       expect(bot.opts()['iterations'].value).toBe(1);
     });
 
+    test('setOpt works on invalid key', () => {
+      const bot = new RandomBot({ game: TicTacToe, enumerate: jest.fn() });
+      bot.setOpt('unknown', 1);
+    });
+
     test('functions', () => {
       const state = InitializeGame({ game: TicTacToe });
 

src/ai/ai.test.js

@@ -32,7 +32,9 @@ export class Bot {
   }
 
   setOpt(key, value) {
-    this._opts[key].value = value;
+    if (key in this._opts) {
+      this._opts[key].value = value;
+    }
   }
 
   opts() {

src/ai/bot.js

@@ -246,7 +246,11 @@ export class MCTSBot extends Bot {
           this.backpropagate(child, result);
           this.iterationCounter++;
         }
-        this.iterationCallback(this.iterationCounter, numIterations);
+        this.iterationCallback({
+          iterationCounter: this.iterationCounter,
+          numIterations,
+          metadata: root,
+        });
       };
 
       this.iterationCounter = 0;

src/ai/mcts-bot.js

@@ -72,6 +72,7 @@
 
   .secondary-pane {
     background: #fefefe;
+    overflow-y: scroll;
   }
 
   .debug-panel :global(button, select) {

src/client/debug/Debug.svelte

@@ -17,11 +17,26 @@
     'Random': RandomBot,
   };
 
+  let debug = false;
   let progress = null;
   let iterationCounter = 0;
-  const iterationCallback = (counter, numIterations) => {
-    iterationCounter = counter;
-    progress = counter / numIterations;
+  let metadata = null;
+  const iterationCallback = ({ iterationCounter: c, numIterations, metadata: m }) => {
+    iterationCounter = c;
+    progress = c / numIterations;
+    metadata = m;
+
+    if (debug && metadata) {
+      secondaryPane.set({ component: MCTS, metadata });
+    }
+  }
+
+  function OnDebug() {
+    if (debug && metadata) {
+      secondaryPane.set({ component: MCTS, metadata });
+    } else {
+      secondaryPane.set(null);
+    }
   }
 
   let bot;
@@ -46,19 +61,27 @@
     });
     bot.setOpt('async', true);
     botAction = null;
+    metadata = null;
+    secondaryPane.set(null);
     iterationCounter = 0;
   }
 
   async function Step() {
     botAction = null;
+    metadata = null;
     iterationCounter = 0;
+
     const t = await _Step(client, bot);
-    botAction = t.payload.type;
-    botActionArgs = t.payload.args;
+
+    if (t) {
+      botAction = t.payload.type;
+      botActionArgs = t.payload.args;
+    }
   }
 
   function Simulate(iterations = 10000, sleepTimeout = 100) {
     botAction = null;
+    metadata = null;
     iterationCounter = 0;
     const step = async () => {
       for (let i = 0; i < iterations; i++) {
@@ -71,27 +94,16 @@
     return step();
   }
 
-  function DebugLastMove() {
-    const { log } = client.getState();
-    const renderedLogEntries = log.filter(e => e.action.type == MAKE_MOVE);
-
-    if (renderedLogEntries.length > 0) {
-      const index = renderedLogEntries.length - 1;
-      const { metadata } = renderedLogEntries[index].action.payload;
-      if (metadata) {
-        secondaryPane.set({ component: MCTS, metadata });
-      }
-    }
-  }
-
   function Exit() {
     client.overrideGameState(null);
     secondaryPane.set(null);
+    debug = false;
   }
 
   function Reset() {
     client.reset();
     botAction = null;
+    metadata = null;
     iterationCounter = 0;
     Exit();
   }
@@ -116,6 +128,15 @@
   h3 {
     text-transform: uppercase;
   }
+
+  label {
+    font-weight: bold;
+    color: #999;
+  }
+
+  input[type='checkbox'] {
+    vertical-align: middle;
+  }
 </style>
 
 <svelte:window on:keydown={OnKeyDown}/>
@@ -147,6 +168,8 @@
     {#if Object.keys(bot.opts()).length}
       <section>
         <h3>Options</h3>
+        <label>debug</label>
+        <input type=checkbox bind:checked={debug} on:change={OnDebug}>
         <Options bot={bot}/>
       </section>
     {/if}
@@ -161,9 +184,6 @@
       {#if botAction}
         <li>Action: {botAction}</li>
         <li>Args: {JSON.stringify(botActionArgs)}</li>
-        <p>
-        <button on:click={DebugLastMove}>Debug</button>
-        </p>
       {/if}
     </section>
     {/if}

src/client/debug/ai/AI.svelte

@@ -0,0 +1,22 @@
+<script>
+  export let action;
+
+  let text;
+
+  $: {
+    const { type, args } = action.payload;
+    const argsFormatted = (args || []).join(',');
+    text = `${type}(${argsFormatted})`;
+  }
+</script>
+
+<style>
+  div {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 500px;
+  }
+</style>
+
+<div alt={text}>{text}</div>

src/client/debug/mcts/Action.svelte

@@ -1,6 +1,78 @@
 <script>
   export let metadata;
-  import Tree from './Tree.svelte';
+
+  import Arrow from 'svelte-icons/fa/FaArrowAltCircleDown.svelte'
+
+  let nodes = [];
+  let prevNodes = [];
+  let preview = null;
+
+  import Table from './Table.svelte';
+
+  $: {
+    prevNodes = [];
+    nodes = [{ node: metadata }];
+  }
+
+  function SelectNode({ node, selectedIndex }, i) {
+    preview = null;
+    nodes[i].selectedIndex = selectedIndex;
+    nodes = [...nodes.slice(0, i + 1), { node }];
+  }
+
+  function PreviewNode({ node }, i) {
+    preview = node;
+  }
 </script>
 
-<Tree root={metadata} />
+<style>
+.visualizer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 50px;
+}
+
+.preview {
+  opacity: 0.5;
+}
+
+.icon {
+  color: #777;
+  width: 32px;
+  height: 32px;
+  margin-bottom: 20px;
+}
+</style>
+
+<div class="visualizer">
+  {#each nodes as { node, selectedIndex }, i}
+    {#if i !== 0}
+    <div class="icon">
+      <Arrow/>
+    </div>
+    {/if}
+
+    <section>
+      {#if i === nodes.length - 1}
+        <Table on:select={e => SelectNode(e.detail, i)}
+               on:preview={e => PreviewNode(e.detail, i)}
+               root={node}/>
+      {:else}
+        <Table on:select={e => SelectNode(e.detail, i)}
+          root={node}
+          selectedIndex={selectedIndex}/>
+      {/if}
+    </section>
+  {/each}
+
+  {#if preview}
+    <div class="icon">
+      <Arrow/>
+    </div>
+
+    <section class="preview">
+      <Table root={preview}/>
+    </section>
+  {/if}
+</div>