viz minor stuff (#6515)

* some style cleanups

* wrap rewrites

viz/index.html

@@ -10,6 +10,9 @@
   <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
   <script src="https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.min.js"></script>
   <style>
+  * {
+    box-sizing: border-box;
+  }
   html, body {
     background-color: #191919;
     color: #EEEEEE;
@@ -17,7 +20,6 @@
     padding: 0;
     width: 100%;
     height: 100%;
-    box-sizing: border-box;
     font-family: "Noto Sans", sans-serif;
     font-optical-sizing: auto;
     font-weight: 400px;
@@ -26,6 +28,14 @@
     font-size: 14px;
     overflow: hidden;
   }
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+  svg * {
+    cursor: default;
+    user-select: none;
+  }
   .node rect {
     stroke: #313131;
     stroke-width: 1.5px;
@@ -35,13 +45,9 @@
     font-weight: 350;
   }
   .edgePath path {
-    stroke: #3A3A3A;
+    stroke: #606060;
     stroke-width: 1.5px;
   }
-  pre {
-    max-height: 40%;
-    overflow-y: auto;
-  }
   .main-container {
     display: grid;
     grid-template-columns: repeat(14, 1fr);
@@ -64,7 +70,7 @@
     grid-column: span 3;
     display: flex;
     flex-direction: column;
-    overflow: auto;
+    overflow-y: auto;
   }
   .uop-list {
     grid-column: span 1;
@@ -73,7 +79,6 @@
     overflow-y: auto;
   }
   .uop-el {
-    margin-bottom: 8px;
     padding: 8px 0;
     color: #7B7B7B;
     cursor: pointer;
@@ -86,6 +91,7 @@
   }
   .rewrite-counter {
     display: flex;
+    flex-wrap: wrap;
   }
   .rewrite-counter > * + * {
     margin-left: 4px;
@@ -94,13 +100,13 @@
     word-wrap: break-word;
     white-space: pre-wrap;
   }
-  svg {
-    width: 100%;
-    height: 100%;
-  }
-  svg * {
-    cursor: default;
-    user-select: none;
+  .code-block {
+    max-height: 30%;
+    min-height: 30%;
+    background-color: #191919;
+    overflow-y: auto;
+    border-radius: 8px;
+    padding: 8px;
   }
   </style>
 </head>
@@ -125,7 +131,7 @@
     totalUOps = rest.length-1;
     totalRewrites = graphs.length-1;
     // graph
-    const g = new dagreD3.graphlib.Graph().setGraph({}).setDefaultEdgeLabel(function() { return {}; });
+    const g = new dagreD3.graphlib.Graph().setGraph({ rankdir: "LR" }).setDefaultEdgeLabel(function() { return {}; });
     const [graph, pattern] = graphs[currentRewrite];
     for ([k,u] of Object.entries(graph)) {
       g.setNode(k, {label: u[0], style: `fill: ${u[4]}; rx: 8; ry: 8;` });
@@ -147,8 +153,12 @@
     // metadata
     const container = document.querySelector(".container.metadata");
     container.innerHTML = "";
-    container.appendChild(Object.assign(document.createElement("p"), { textContent: location }));
-    blocks.forEach((b) => container.appendChild(Object.assign(document.createElement("pre"), { innerHTML: `<code>${b}</code>` })))
+    container.appendChild(Object.assign(document.createElement("pre"), { textContent: location }));
+    blocks.forEach((b) => {
+      if (b.length == 0) return;
+      const pre = Object.assign(document.createElement("pre"), { innerHTML: `<code>${b}</code>`, className: "code-block" });
+      container.appendChild(pre);
+    })
     if (graphs.length > 1) {
       const rewriteCounter = Object.assign(document.createElement("div"), { className: "rewrite-counter" });
       container.appendChild(rewriteCounter)