tinygrad 0.10.2__py3-none-any.whl → 0.11.0__py3-none-any.whl

tinygrad/viz/index.html

@@ -4,21 +4,19 @@
   <title>tinygrad viz</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="data:;base64,iVBORw0KGgo=">
-  <script src="assets/d3js.org/d3.v5.min.js" charset="utf-8"></script>
-  <script src="assets/dagrejs.github.io/project/dagre-d3/latest/dagre-d3.min.js"></script>
+  <script src="assets/d3js.org/d3.v7.min.js" charset="utf-8"></script>
+  <script src="assets/dagrejs.github.io/project/dagre/latest/dagre.min.js"></script>
   <link rel="stylesheet" href="assets/cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/default.min.css">
   <script src="assets/cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script>
   <script src="assets/cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/languages/python.min.js"></script>
   <script src="assets/cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/languages/cpp.min.js"></script>
+  <script src="assets/cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/languages/x86asm.min.js"></script>
   <link rel="stylesheet" href="assets/unpkg.com/@highlightjs/cdn-assets@11.10.0/styles/tokyo-night-dark.min.css" />
   <style>
   * {
     box-sizing: border-box;
-    margin-block-start: initial;
-    margin-block-end: initial;
-  }
-  button {
-    outline: none;
+    margin: 0;
+    padding: 0;
   }
   html, body {
     color: #f0f0f5;
@@ -33,6 +31,7 @@
     font-variation-settings: "wdth" 100;
     font-size: 14px;
     overflow: hidden;
+    background-color: #08090e;
   }
   a {
     color: #4a90e2;
@@ -46,11 +45,22 @@
   ul.active {
     opacity: 1;
   }
+  ul > ul {
+    display: none;
+  }
+  ul.expanded > ul {
+    display: block;
+  }
   ul.disabled {
     opacity: 0.4;
     pointer-events: none;
   }
-  svg {
+  label {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+  .graph svg {
     width: 100%;
     height: 100%;
   }
@@ -58,19 +68,26 @@
     cursor: default;
     user-select: none;
   }
-  .node rect {
-    stroke: #4a4b57;
-    stroke-width: 1.4px;
-    rx: 8px;
-    ry: 8px;
+  g.clickable * {
+    cursor: pointer;
+    user-select: auto;
+  }
+  g.tag circle {
+    fill: #FFD700;
+    stroke: #B8860B;
+    stroke-width: 0.8;
+  }
+  g.tag text {
+    text-anchor: middle;
+    font-size: 6px;
+    fill: #08090e;
   }
   .label :is(text, p) {
-    color: #08090e;
     font-weight: 350;
   }
-  .edgePath path {
+  .edgePath {
     stroke: #4a4b57;
-    fill: #4a4b57;
+    fill: none;
     stroke-width: 1.4px;
   }
   .main-container {
@@ -80,42 +97,60 @@
     position: relative;
   }
   .container {
+    flex: 0 0 auto;
     background-color: #0f1018;
+    padding: 20px;
+    z-index: 2;
+    position: relative;
+    height: 100%;
   }
-  .container > * + *, .rewrite-container > * + * {
+  .metadata > * + *, .rewrite-container > * + *, .ctx-list > * + * {
     margin-top: 12px;
   }
+  .stats-list > * + * {
+    margin-top: 8px;
+  }
+  .stats-list > p > * + * {
+    margin-top: 12px;
+  }
+  .stats-list {
+    width: 100%;
+    max-height: 240px;
+    overflow: auto;
+  }
+  .ctx-list > ul > * + * {
+    margin-top: 4px;
+  }
   .graph {
-    background-color: #08090e;
     position: absolute;
     inset: 0;
     z-index: 1;
   }
-  .kernel-list-parent {
-    position: relative;
+  .profiler {
+    flex: 1 1 auto;
+    min-width: 0;
+    width: 100%;
+    height: calc(100% - 50px);
+    margin-top: 50px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-gutter: stable;
+  }
+  .ctx-list-parent {
     width: 15%;
-    padding: 50px 20px 20px 20px;
+    padding-top: 50px;
     border-right: 1px solid #4a4b56;
-    z-index: 2;
   }
-  .kernel-list {
+  .ctx-list, .metadata {
     width: 100%;
     height: 100%;
     overflow-y: auto;
+    scrollbar-gutter: stable;
   }
-  .kernel-list > ul > * + * {
-    margin-top: 4px;
-  }
-  .metadata {
-    position: relative;
+  .metadata-parent {
     width: 20%;
-    padding: 20px;
-    background-color: #0f1018;
     border-left: 1px solid #4a4b56;
-    z-index: 2;
     margin-left: auto;
-    height: 100%;
-    overflow-y: auto;
   }
   .resize-handle {
     position: absolute;
@@ -127,13 +162,6 @@
     z-index: 3;
     background-color: transparent;
   }
-  #kernel-resize-handle {
-    right: 0;
-  }
-  #metadata-resize-handle {
-    margin-top: 0;
-    left: 0;
-  }
   .floating-container {
     position: fixed;
     top: 10px;
@@ -143,402 +171,174 @@
     flex-direction: row;
     gap: 8px;
   }
-  .nav-btn {
+  .btn {
+    outline: none;
     background-color: #1a1b26;
     border: 1px solid #4a4b56;
     color: #f0f0f5;
-    height: 32px;
-    border-radius: 8px;
+    border-radius: 4px;
+    padding: 6px;
     cursor: pointer;
-    text-decoration: none;
+    height: 32px;
     display: flex;
     align-items: center;
-    padding: 0 6px;
-    font-weight: bold;
-  }
-  .collapse-btn {
-    width: 32px;
-    padding: 6px;
-  }
-  .btn {
-    height: 32px;
-    background-color: #1a1b26;
-    border: 1px solid #4a4b56;
-    color: #f0f0f5;
-    border-radius: 8px;
-    cursor: pointer;
-    transition-duration: .5s;
+    justify-content: center;
+    text-decoration: none;
   }
   .btn:hover {
     background-color: #2a2b36;
-    border-color: #5a5b66;
-    color: #ffffff;
-    transform: translateY(-1px);
   }
-  .collapsed .kernel-list, .collapsed .metadata {
-    width: 0;
-    padding: 0;
-    overflow: hidden;
+  .collapsed .container {
+    display: none;
   }
   .rewrite-list {
     display: flex;
     flex-wrap: wrap;
   }
-  .rewrite-list > * + * {
-    margin-left: 4px;
+  .rewrite-list > ul {
+    padding: 2px;
   }
   .wrap {
     word-wrap: break-word;
     white-space: pre-wrap;
   }
-  .code-block.hljs {
+  pre code.hljs {
     overflow-y: auto;
     max-height: 30vh;
-    border-radius: 8px;
     padding: 8px;
   }
+  #progress-message {
+    position: absolute;
+    z-index: 2;
+    left: 50%;
+    top: 2%;
+    color: #ffd230;
+    display: none;
+  }
+  #tooltip {
+    position: absolute;
+    z-index: 4;
+    background-color: #1e2029;
+    padding: 4px 8px;
+    border-radius: 4px;
+    pointer-events: none;
+    display: none;
+    font-size: 10px;
+    white-space: pre;
+  }
+  #device-list > div {
+    min-height: 32px;
+    max-width: 132px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+    display: flex;
+  }
+  #device-list > div:hover {
+    background-color: rgba(20, 23, 35, 0.3);
+  }
+  .raw-text {
+    padding: 0 8px;
+    width: 100%;
+    height: 100%;
+    max-height: 100vh;
+    overflow-x: auto;
+  }
+  .raw-text code {
+    max-height: none !important;
+  }
+  table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    background-color: #1a1b26;
+    color: #f0f0f5;
+    font-size: 0.95em;
+  }
+  table td {
+    border-bottom: 1px solid #4a4b56;
+    vertical-align: top;
+  }
+  table tr:last-child > td {
+     border-bottom: none;
+  }
+  tr.main-row:hover {
+    background-color: #2a2d3a;
+  }
+  tr.sub-row {
+    max-width: 150px;
+  }
+  tr.main-row > td, tr.sub-row > td {
+    padding: 8px 12px;
+  }
+  tr.code-row > td:first-child {
+    font-family: monospace;
+  }
+  td.pct-row > div {
+    height: 12px;
+    width: 100%;
+    display: flex;
+  }
+  td.pct-row > div > div {
+    height: 100%;
+  }
+  thead {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background-color: #20222e;
+  }
+  thead th {
+    text-align: left;
+    padding: 10px 12px;
+    font-weight: 600;
+    border-bottom: 1px solid #4a4b56;
+    font-size: 0.95em;
+    letter-spacing: 0.03em;
+  }
+  .legend {
+    display: flex;
+    align-items: center;
+  }
+  .legend > div {
+    width: 0.95em;
+    height: 0.95em;
+    margin-right: 4px;
+  }
   </style>
 </head>
 <body>
   <div class="main-container">
     <div class="floating-container">
       <button class="btn collapse-btn">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20"><path d="M15 19l-7-7 7-7"/></svg>
+      </button>
+      <button class="btn" id="zoom-to-fit-btn" aria-label="Fit graph">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="20">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 3.75H6A2.25 2.25 0 0 0 3.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0 1 20.25 6v1.5m0 9V18A2.25 2.25 0 0 1 18 20.25h-1.5m-9 0H6A2.25 2.25 0 0 1 3.75 18v-1.5M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+        </svg>
       </button>
-      <a class="btn nav-btn" href="/profiler">Profiler</a>
     </div>
-    <div class="container kernel-list-parent"><div class="container kernel-list"></div></div>
-    <div class="graph">
-      <svg id="graph-svg">
-        <g id="render"></g>
+    <div id="progress-message"></div>
+    <div class="container ctx-list-parent"><div class="ctx-list"></div></div>
+    <div class="view profiler"></div>
+    <div class="view graph">
+      <svg id="graph-svg" preserveAspectRatio="xMidYMid meet">
+        <g id="render">
+          <g id="edges"></g>
+          <g id="nodes"></g>
+          <g id="edge-labels"></g> <!-- NOTE: this ensures edge labels are always on top -->
+        </g>
+        <defs>
+          <marker id="arrowhead" viewBox="0 -5 10 10" refX="10" refY="0" markerWidth="6" markerHeight="6" orient="auto">
+            <path d="M0,-5L10,0L0,5" fill="#4a4b57"></path>
+          </marker>
+        </defs>
       </svg>
     </div>
-    <div class="container metadata"></div>
+    <div class="container metadata-parent"><div class="metadata"></div></div>
   </div>
-  <script>
-  // **** hljs extra definitions for UOps and float4
-  hljs.registerLanguage("python", (hljs) => ({
-    ...hljs.getLanguage("python"),
-    case_insensitive: false,
-    contains: [
-      { begin: 'dtypes\\.[a-zA-Z_][a-zA-Z0-9_-]*(\\.[a-zA-Z_][a-zA-Z0-9_-]*)*' + '(?=[.\\s\\n[:,(])', className: "type" },
-      { begin: 'dtypes\\.[a-zA-Z_][a-zA-Z0-9_-].vec*' + '(?=[.\\s\\n[:,(])', className: "type" },
-      { begin: '[a-zA-Z_][a-zA-Z0-9_-]*\\.[a-zA-Z_][a-zA-Z0-9_-]*' + '(?=[.\\s\\n[:,()])',  className: "operator" },
-      { begin: '[A-Z][a-zA-Z0-9_]*(?=\\()', className: "section", ignoreEnd: true },
-      ...hljs.getLanguage("python").contains,
-    ]
-  }));
-  hljs.registerLanguage("cpp", (hljs) => ({
-    ...hljs.getLanguage('cpp'),
-    contains: [{ begin: '\\b(?:float|half)[0-9]+\\b', className: 'type' }, ...hljs.getLanguage('cpp').contains]
-  }));
-
-  // **** D3
-  function recenterRects(svg, zoom) {
-    const svgBounds = svg.node().getBoundingClientRect();
-    for (const rect of svg.node().querySelectorAll("rect")) {
-      const rectBounds = rect.getBoundingClientRect();
-      const outOfBounds = rectBounds.top < svgBounds.top || rectBounds.left < svgBounds.left ||
-        rectBounds.bottom > svgBounds.bottom || rectBounds.right > svgBounds.right;
-      // if there's at least one rect in view we don't do anything
-      if (!outOfBounds) return;
-    }
-    svg.call(zoom.transform, d3.zoomIdentity)
-  }
-  function renderGraph(graph, additions) {
-    const g = new dagreD3.graphlib.Graph({ compound: true }).setGraph({ rankdir: "LR" }).setDefaultEdgeLabel(function() { return {}; });
-    g.setNode("addition", {label: "", clusterLabelPos: "top", style: additions.length !== 0 ? "fill: rgba(26, 27, 38, 0.5);" : "display: none;"});
-    for (const [k,u] of Object.entries(graph)) {
-      let node = {label: u[0], labelType: "text", style: `fill: ${u[2]};`};
-      // for PROGRAM UOp we render the node with a code block
-      if (u[0].includes("PROGRAM")) {
-        const [name, ...rest] = u[0].split("\n");
-        const label = Object.assign(document.createElement("div"));
-        label.appendChild(Object.assign(document.createElement("p"), {innerText: name, className: "label", style: "margin-bottom: 2px" }))
-        label.appendChild(highlightedCodeBlock(rest.join("\n"), "cpp", true));
-        node = {label, labelType: "html", style: `fill: ${u[2]}`};
-      }
-      g.setNode(k, node);
-      for (const src of u[1]) {
-        g.setEdge(src, k, {curve: d3.curveBasis})
-      }
-      if (additions.includes(parseInt(k))) {
-        g.setParent(k, "addition");
-      }
-    }
-    const svg = d3.select("#graph-svg");
-    const inner = svg.select("g");
-    var zoom = d3.zoom()
-      .scaleExtent([0.05, 2])
-      .on("zoom", () => {
-        const transform = d3.event.transform;
-        inner.attr("transform", transform);
-      });
-    recenterRects(svg, zoom);
-    svg.call(zoom);
-    const render = new dagreD3.render();
-    render(inner, g);
-  }
-
-  // **** extra helpers
-  const toPath = ([fp, lineno]) => `${fp.replaceAll("\\", "/").split("/").pop()}:${lineno}`;
-  const vsCodeOpener = (parts) => Object.assign(document.createElement("a"), { textContent: parts[parts.length-1]+"\n\n",
-      href: "vscode://file"+parts.join("/"), style: "font-family: monospace; margin: 4px 0;" });
-  const highlightedCodeBlock = (code, lang, wrap) => {
-    const pre = Object.assign(document.createElement("pre"), {className: wrap ? "wrap" : ""});
-    // NOTE: since code is in textContent, we don't need DOMPurify
-    const codeEl = Object.assign(document.createElement("code"), { className: `language-${lang} code-block`, textContent: code});
-    pre.appendChild(codeEl);
-    hljs.highlightElement(codeEl);
-    return pre;
-  };
-  const coloredToHTML = (str) => {
-    const colors = ['gray','red','green','yellow','blue','magenta','cyan','white'];
-    return str.replace(/\u001b\[(\d+)m(.*?)\u001b\[0m/g, (_, code, st) => {
-      return `<span style="${`color: color-mix(in srgb, ${colors[(parseInt(code)-30+60)%60]} 60%, white)`}">${st}</span>`;
-    })
-  }
-
-  // **** main loop
-  var ret = [];
-  var cache = {};
-  var kernels = null;
-  var currentUOp = 0;
-  var currentKernel = -1;
-  var currentRewrite = 0;
-  var expandKernel = true;
-  const evtSources = [];
-  async function main() {
-    const mainContainer = document.querySelector('.main-container');
-    // ***** LHS kernels list
-    if (kernels == null) {
-      kernels = await (await fetch("/kernels")).json();
-      currentKernel = -1;
-    }
-    const kernelListParent = document.querySelector(".container.kernel-list-parent");
-    const kernelList = document.querySelector(".container.kernel-list");
-    kernelList.innerHTML = "";
-    kernels.forEach(([key, items], i) => {
-      const kernelUl = Object.assign(document.createElement("ul"), { key: `kernel-${i}`, className: i === currentKernel ? "active" : "",
-        style: "overflow-x: auto; cursor: initial;" });
-      if (i === currentKernel) {
-        requestAnimationFrame(() => kernelUl.scrollIntoView({ behavior: "auto", block: "nearest" }));
-      }
-      const p = Object.assign(document.createElement("p"), { id: `kernel-${key}`, innerHTML: coloredToHTML(key), style: "cursor: pointer;"});
-      kernelUl.appendChild(p)
-      items.forEach((u, j) => {
-        const rwUl = Object.assign(document.createElement("ul"), {
-          innerText: u.name ? `${u.name} - ${u.match_count}` : `${toPath(u.loc)} - ${u.match_count}`, key: `uop-rewrite-${j}`,
-          className: (j === currentUOp && i == currentKernel) ? "active" : "" })
-        if (j === currentUOp) {
-          requestAnimationFrame(() => rwUl.scrollIntoView({ behavior: "auto", block: "nearest" }));
-        }
-        rwUl.style.display = i === currentKernel && expandKernel ? "block" : "none";
-        rwUl.onclick = (e) => {
-          e.stopPropagation();
-          currentUOp = j;
-          currentKernel = i;
-          currentRewrite = 0;
-          main();
-        }
-        kernelUl.appendChild(rwUl)
-      })
-      p.onclick = () => {
-        if (i === currentKernel) {
-          expandKernel = !expandKernel;
-          main();
-          return;
-        }
-        currentKernel = i;
-        currentUOp = 0;
-        currentRewrite = 0;
-        expandKernel = true;
-        main();
-      }
-      kernelList.appendChild(kernelUl);
-    });
-    // ***** UOp graph
-    if (currentKernel == -1) return;
-    const kernel = kernels[currentKernel][1][currentUOp];
-    const cacheKey = `kernel=${currentKernel}&idx=${currentUOp}`;
-    // close any pending event sources
-    let activeSrc = null;
-    for (const e of evtSources) {
-      if (e.url.split("?")[1] !== cacheKey) e.close();
-      else if (e.readyState === EventSource.OPEN) activeSrc = e;
-    }
-    if (cacheKey in cache) {
-      ret = cache[cacheKey];
-    }
-    // if we don't have a complete cache yet we start streaming this kernel
-    if (!(cacheKey in cache) || (cache[cacheKey].length !== kernel.match_count+1 && activeSrc == null)) {
-      ret = [];
-      cache[cacheKey] = ret;
-      const eventSource = new EventSource(`/kernels?kernel=${currentKernel}&idx=${currentUOp}`);
-      evtSources.push(eventSource);
-      eventSource.onmessage = (e) => {
-        if (e.data === "END") return eventSource.close();
-        const chunk = JSON.parse(e.data);
-        ret.push(chunk);
-        // if it's the first one render this new rgaph
-        if (ret.length === 1) return main();
-        // otherwise just enable the graph selector
-        const gUl = document.getElementById(`rewrite-${ret.length-1}`);
-        if (gUl != null) gUl.classList.remove("disabled");
-      };
-    }
-    if (ret.length === 0) return;
-    renderGraph(ret[currentRewrite].graph, ret[currentRewrite].changed_nodes || []);
-    // ***** RHS metadata
-    const metadata = document.querySelector(".container.metadata");
-    metadata.innerHTML = "";
-    metadata.appendChild(vsCodeOpener(kernel.loc.join(":").split("/")));
-    metadata.appendChild(highlightedCodeBlock(kernel.code_line, "python", true));
-    // ** code blocks
-    let code = ret[currentRewrite].uop;
-    let lang = "python"
-    if (kernel.kernel_code != null) {
-      code = kernel.kernel_code;
-      lang = "cpp";
-    }
-    const codeBlock = highlightedCodeBlock(code, lang, false);
-    metadata.appendChild(codeBlock);
-    // ** rewrite list
-    if (kernel.match_count >= 1) {
-      const rewriteList = Object.assign(document.createElement("div"), { className: "rewrite-list" })
-      metadata.appendChild(rewriteList);
-      for (let i=0; i<=kernel.match_count; i++) {
-        const gUl = Object.assign(document.createElement("ul"), { innerText: i, id: `rewrite-${i}` });
-        rewriteList.appendChild(gUl);
-        if (i > ret.length-1) gUl.classList.add("disabled");
-        if (i === currentRewrite) {
-          gUl.classList.add("active");
-          if (i !== 0) {
-            const diff = ret[i].diff;
-            const [loc, pattern] = ret[i].upat;
-            const parts = loc.join(":").split("/");
-            const div = Object.assign(document.createElement("div"), { className: "rewrite-container" });
-            const link = vsCodeOpener(parts);
-            div.appendChild(link);
-            const pre = highlightedCodeBlock(pattern, "python", true);
-            div.appendChild(pre);
-            metadata.appendChild(div);
-            const diffHtml = diff.map((line) => {
-              const color = line.startsWith("+") ? "#3aa56d" : line.startsWith("-") ? "#d14b4b" : "#f0f0f5";
-              return `<span style="color: ${color};">${line}</span>`;
-            }).join("<br>");
-            metadata.appendChild(Object.assign(document.createElement("pre"), { innerHTML: `<code>${diffHtml}</code>`, className: "wrap" }));
-          }
-        }
-        gUl.addEventListener("click", () => {
-          currentRewrite = i;
-          main();
-        });
-      }
-    } else {
-      metadata.appendChild(Object.assign(document.createElement("p"), { textContent: `No rewrites in ${toPath(kernel.loc)}.` }));
-    }
-    // ***** collapse/expand
-    let isCollapsed = false;
-    const collapseBtn = document.querySelector(".collapse-btn");
-    collapseBtn.addEventListener("click", () => {
-      isCollapsed = !isCollapsed;
-      mainContainer.classList.toggle("collapsed", isCollapsed);
-      kernelListParent.style.display = isCollapsed ? "none" : "block";
-      metadata.style.display = isCollapsed ? "none" : "block";
-      collapseBtn.style.transform = isCollapsed ? "rotate(180deg)" : "rotate(0deg)";
-    });
-    // ***** resizer
-    function createResizer(element, width, type) {
-      const { minWidth, maxWidth } = width;
-      const handle = Object.assign(document.createElement("div"), { id: `${type}-resize-handle`, className: "resize-handle" });
-      element.appendChild(handle);
-
-      const resize = (e) => {
-        const change = e.clientX - element.dataset.startX;
-        const adjustedChange = type === "kernel" ? change : -change;
-        const newWidth = ((Number(element.dataset.startWidth) + adjustedChange) / Number(element.dataset.containerWidth)) * 100;
-        if (newWidth >= minWidth && newWidth <= maxWidth) {
-          element.style.width = `${newWidth}%`;
-        }
-      };
-
-      handle.addEventListener("mousedown", (e) => {
-        e.preventDefault();
-        element.dataset.startX = e.clientX;
-        element.dataset.containerWidth = mainContainer.getBoundingClientRect().width;
-        element.dataset.startWidth = element.getBoundingClientRect().width;
-
-        document.documentElement.addEventListener("mousemove", resize, false);
-        document.documentElement.addEventListener("mouseup", () => {
-          document.documentElement.removeEventListener("mousemove", resize, false);
-          element.style.userSelect = "initial";
-        }, { once: true });
-      });
-    }
-    createResizer(kernelListParent, { minWidth: 15, maxWidth: 50 }, "kernel"); // left resizer
-    createResizer(metadata, { minWidth: 20, maxWidth: 50 }, "metadata"); // right resizer
-  }
-
-  // **** keyboard shortcuts
-  document.addEventListener("keydown", async function(event) {
-    // up and down change the UOp or kernel from the list
-    if (!expandKernel) {
-      if (event.key == "ArrowUp") {
-        event.preventDefault()
-        currentUOp = 0;
-        currentRewrite = 0;
-        currentKernel = Math.max(0, currentKernel-1)
-       return main()
-      }
-      if (event.key == "ArrowDown") {
-        event.preventDefault()
-        currentUOp = 0;
-        currentRewrite = 0;
-        currentKernel = Math.min(kernels.length-1, currentKernel+1);
-       return main()
-      }
-    }
-    if (event.key == "Enter") {
-      event.preventDefault()
-      if (currentKernel === -1) {
-        currentKernel = 0;
-        expandKernel = true;
-      }
-      else {
-        expandKernel = !expandKernel;
-      }
-      currentUOp = 0;
-      currentRewrite = 0;
-      main();
-    }
-    if (event.key == "ArrowUp") {
-      event.preventDefault()
-      currentRewrite = 0;
-      currentUOp = Math.max(0, currentUOp-1)
-      main()
-    }
-    if (event.key == "ArrowDown") {
-      event.preventDefault()
-      currentRewrite = 0;
-      const totalUOps = kernels[currentKernel][1].length-1;
-      currentUOp = Math.min(totalUOps, currentUOp+1)
-      main()
-    }
-    // left and right go through rewrites in a single UOp
-    if (event.key == "ArrowLeft") {
-      event.preventDefault()
-      currentRewrite = Math.max(0, currentRewrite-1)
-      main()
-    }
-    if (event.key == "ArrowRight") {
-      event.preventDefault()
-      const totalRewrites = ret.length-1;
-      currentRewrite = Math.min(totalRewrites, currentRewrite+1)
-      main()
-    }
-  })
-  main()
-  </script>
-  </body>
+  <div id="tooltip"></div>
+  <script src="/js/index.js"></script>
+</body>
 </html>