visualization: minor improvements

codex-storage · Dec 5, 2024 · 2916b99 · 2916b99
1 parent ac10061
commit 2916b99
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 15 deletions.
diff --git a/tooling/web/index.html b/tooling/web/index.html
@@ -13,7 +13,8 @@
   <script language="javascript">
     window.onload = function() {
       console.log("onload!");
-      load_witness("fibonacci_witness.json");
+      let fname = "fibonacci_witness.json";
+      load_witness(fname);
     }
   </script>  
 </head>
@@ -29,33 +30,51 @@ <h2>Plonky2 witness visualizer</h2>
   <br/>
 
   <div id="top-container">
-    <div id="left">
+
+    <div class="horiz">
+      <table id="cell-properties">
+        <tr><th>parameter</th><th width="50px">value</th></tr>
+        <tr><td>number of columns       </td><td id="num-cols"      >0</td></tr>
+        <tr><td>number of rows          </td><td id="num-rows"      >0</td></tr>
+        <tr><td>ratio of non-empty cells</td><td id="nonempty-ratio">0</td></tr>
+      </table>
+    </div>
+
+    <div class="horiz">
+      &nbsp;&nbsp;
+    </div>
+
+    <div class="horiz">
       <table id="gates">
         <tr>
           <th>index</th>
           <th width="200px">gate type</th>
         </tr>
       </table>
     </div>
-    <div id="middle">
+
+    <div class="horiz">
       &nbsp;&nbsp;
     </div>
-    <div id="right">
+
+    <div class="horiz">
       <table id="cell-properties">
         <tr><th>property</th><th width="200px">value (hover!)</th></tr>
         <tr><td>row     </td><td id="cell-row"   ></td></tr>
         <tr><td>column  </td><td id="cell-column"></td></tr>
         <tr><td>value   </td><td id="cell-value" ></td></tr>
         <tr><td>gate    </td><td id="cell-gate"  ></td></tr>
-        </tr>
       </table>
     </div>  
+
   </div>
 
   <br/>
 
-  <svg id="matrix" width="1350" height="1000" xmlns="http://www.w3.org/2000/svg">
-  </svg>
+  <div id="" style="overflow:scroll; width:1400px; height:600px;">
+    <svg id="matrix" width="1350" height="1000" xmlns="http://www.w3.org/2000/svg">
+    </svg>
+  <div>
 
 <!--  
   <svg width="320" height="130" xmlns="http://www.w3.org/2000/svg">
@@ -66,11 +85,6 @@ <h2>Plonky2 witness visualizer</h2>
  </svg> 
 -->
 
-  <br/>
-
-  <div>
-    ratio of non-empty cells: <input id="nonempty-ratio" type="text" placeholder="100" disabled=true/>
-  </div> 
 
 </body>
 </html>
diff --git a/tooling/web/styles.css b/tooling/web/styles.css
@@ -10,7 +10,7 @@ th, td {
   padding: 5px;
 }
 
-#left, #middle, #right {
+.horiz {
   display: inline-block; 
   *display: inline; 
   vertical-align: top;

diff --git a/tooling/web/witness_view.js b/tooling/web/witness_view.js
@@ -99,6 +99,11 @@ function initialize_from_witness(fname,json) {
   ncolumns  = matrix.length
   ncells    = ncolumns * nrows;
 
+  let el_num_rows = document.getElementById("num-rows");
+  let el_num_cols = document.getElementById("num-cols");
+  el_num_rows.innerHTML = nrows.toString();
+  el_num_cols.innerHTML = ncolumns.toString();
+
   let gates_base   = [];
   let gate_colors  = [];
 
@@ -148,9 +153,9 @@ function initialize_from_witness(fname,json) {
     }
   }
 
-  el_ratio = document.getElementById("nonempty-ratio");
+  let el_ratio = document.getElementById("nonempty-ratio");
   let ratio = Math.round( 100 * (ncells - empty_counter) / ncells);
-  el_ratio.value = ratio.toString() + "%";
+  el_ratio.innerHTML = ratio.toString() + "%";
 }
 
 function handle_error(res) {