[ui]: Make crticial path slices clickable

We previously checked that the debug slice meets the following
requirements:
1. Has and id and utid
2. The ts and dur of the thread_state from a query with thread_state
id matches the debug slice ts and dur.

The second condition fails with critical path debug slices because the
ts and dur are modified to avoid overlaps with bounding spans in the
critical path.

To fix, we weakened the second constraint by checking for an explicit
table argument in the debug slice.

While at it, did the same for the debug slices from the slice table.
This would be of use for the flattened slices that get their original
ts and dur modified as well.

Test: Manual
Change-Id: I2a8048fc54738668072bbb50f5e03e3d3f5a49e5

ui/src/frontend/thread_state_tab.ts

diff --git a/ui/src/frontend/thread_state_tab.ts b/ui/src/frontend/thread_state_tab.ts
index 3aedd4b..c68530e 100644
--- a/ui/src/frontend/thread_state_tab.ts
+++ b/ui/src/frontend/thread_state_tab.ts
@@ -230,6 +230,43 @@
       name,
     });
     const sliceColumns = {ts: 'ts', dur: 'dur', name: 'thread_name'};
+    const sliceSliceColumns = {ts: 'ts', dur: 'dur', name: 'slice_name'};
+    const sliceColumnNames = [
+      'ts',
+      'dur',
+      'id',
+      'utid',
+      'thread_name',
+      'process_name',
+      'height',
+      'table_name',
+    ];
+
+    const sliceColumnThreadStateNames = [
+      'ts',
+      'dur',
+      'id',
+      'utid',
+      'thread_name',
+      'process_name',
+      'state',
+      'blocked_function',
+      'height',
+      'table_name'
+    ];
+
+    const sliceColumnSliceNames = [
+      'ts',
+      'dur',
+      'id',
+      'utid',
+      'thread_name',
+      'process_name',
+      'slice_name',
+      'slice_depth',
+      'height',
+      'table_name',
+    ];
 
     const nameForNextOrPrev = (state: ThreadState) =>
         `${state.state} for ${Duration.humanise(state.dur)}`;
@@ -277,15 +314,54 @@
                   {
                     sqlSource:
                   `
-                     SELECT ts, dur, thread_name, process_name, height
+                   SELECT ts, dur, id, utid, thread_name, process_name, height,
+                   "thread_state" AS table_name
                      FROM experimental_thread_executing_span_critical_path(
                        NULL, ${this.state?.thread?.utid})
                   `,
-                  columns: ['ts', 'dur', 'thread_name', 'process_name', 'height'],
+                  columns: sliceColumnNames,
                   },
                `${this.state?.thread?.name}`,
                   sliceColumns,
-                  ['ts', 'dur', 'thread_name', 'process_name', 'height'])),
+                  sliceColumnNames)),
+      },
+      ), m(Button,
+           {
+          label: 'Critical path thread states',
+          onclick: () => runQuery(`SELECT IMPORT('experimental.thread_executing_span');`, this.engine)
+              .then(() => addDebugTrack(
+              this.engine,
+                  {
+                    sqlSource:
+                  `
+                   SELECT ts, dur, thread_state_id AS id, utid, thread_name, process_name, state, blocked_function, height,
+                   "thread_state" AS table_name
+                     FROM experimental_thread_executing_span_critical_path_thread_states(${this.state?.thread?.utid})
+                  `,
+                  columns: sliceColumnThreadStateNames,
+                  },
+               `${this.state?.thread?.name}`,
+                  sliceColumns,
+                  sliceColumnThreadStateNames)),
+      },
+      ), m(Button,
+           {
+          label: 'Critical path slices',
+          onclick: () => runQuery(`SELECT IMPORT('experimental.thread_executing_span');`, this.engine)
+              .then(() => addDebugTrack(
+              this.engine,
+                  {
+                    sqlSource:
+                  `
+                   SELECT ts, dur, slice_id AS id, utid, thread_name, process_name, slice_name, slice_depth, height,
+                   "slice" AS table_name
+                     FROM experimental_thread_executing_span_critical_path_slices(${this.state?.thread?.utid})
+                  `,
+                  columns: sliceColumnSliceNames,
+                  },
+               `${this.state?.thread?.name}`,
+                  sliceSliceColumns,
+                  sliceColumnSliceNames)),
       },
       )];
   }