improving the web visualizer

tooling/web/index.html

@@ -13,8 +13,8 @@
   <script language="javascript">
     window.onload = function() {
       console.log("onload!");
-      // let fname = "json/fibonacci_witness.json";
+      let fname = "json/fibonacci_witness.json";
-      let fname = "json/lookup_witness.json";
+      // let fname = "json/lookup_witness.json";
       // let fname = "json/outer_witness.json";
       load_witness(fname);
     }
@@ -51,6 +51,7 @@
         <tr>
           <th>index</th>
           <th width="200px">gate type</th>
+          <th>count</th>
         </tr>
       </table>
     </div>
@@ -61,12 +62,12 @@
 
     <div class="horiz">
       <table id="cell-properties">
-        <tr><th>property</th><th width="200px">value (hover!)</th></tr>
+        <tr><th>property </th><th width="200px">value (hover!)</th></tr>
-        <tr><td>row     </td><td id="cell-row"   ></td></tr>
+        <tr><td>gate     </td><td id="cell-gate"  ></td></tr>
-        <tr><td>column  </td><td id="cell-column"></td></tr>
+        <tr><td>position </td><td id="cell-pos"   ></td></tr>
-        <tr><td>value   </td><td id="cell-value" ></td></tr>
+        <tr><td>value    </td><td id="cell-value" ></td></tr>
-        <tr><td>gate    </td><td id="cell-gate"  ></td></tr>
+        <tr><td>role     </td><td id="cell-role"  ></td></tr>
-        <tr><td>equation</td><td id="cell-equ"   ></td></tr>
+        <tr><td>equation </td><td id="cell-equ"   ></td></tr>
       </table>
     </div>  
 

tooling/web/witness_view.js

@@ -39,12 +39,142 @@ const the_gate_colors =
   , "#c060c0"     // ReducingExtensionGate       -> medium purple
   ];
 
+function div(a,b) { return Math.floor(a/b); }
+
+function role_Unknown(i,params) { return "n/a"; }
+
+function role_ArithmeticGate(i,params) { 
+  let numops = params[0];
+  if (i>=4*numops) return "unused"; 
+  let k = div(i,4);
+  switch(i%4) { 
+    case 0: return "x" + k;
+    case 1: return "y" + k;
+    case 2: return "z" + k;
+    case 3: return "w" + k;
+  }
+}
+
+function role_ArithmeticExtensionGate(i,params) { 
+  let numops = params[0];
+  if (i>=8*numops) return "unused"; 
+  let k  = div(i,8);
+  let ir = ((i%2) == 0) ? 'r' : 'i';
+  let j  = div(i,2);
+  switch(j%4) { 
+    case 0: return "x" + ir + k;
+    case 1: return "y" + ir + k;
+    case 2: return "z" + ir + k;
+    case 3: return "w" + ir + k;
+  }
+}
+
+function role_LookupGate(i,params) { 
+  let numops = params[0];
+  if (i>=2*numops) return "unused";
+  let k = div(i,2);
+  switch(i%2) { 
+    case 0: return "inp" + k;
+    case 1: return "out" + k;
+  }
+}
+
+function role_LookupTableGate(i,params) {
+  let numops = params[0];
+  if (i>=3*numops) return "unused";
+  let k = div(i,3);
+  switch(i%3) { 
+    case 0: return "inp"  + k;
+    case 1: return "out"  + k;
+    case 2: return "mult" + k;
+  }
+}
+
+function role_NoopGate(i,params) { return "unused"; }
+
+function role_ConstantGate(i,params) { 
+  let nconsts = params[0]
+  if (i>=nconsts) return "unused"
+  return ("x" + i);
+}
+
+function role_PoseidonGate(i,params) {
+  if (i< 12) { return "input"  + (i   ); }
+  if (i< 24) { return "output" + (i-12); }
+  if (i==24) { return "swap_flag";       }
+  if (i< 29) { return "delta" + (i-25);  }
+  if (i< 65) { return "round=" + (div((i-29),12)+1) + " sbox" + ((i-29)%12) + "_in"; }
+  if (i< 87) { return "round=" + (i-65+4) + " sbox_in"; } 
+  return "round=" + (div((i-87),12)+26) + " sbox" + ((i-87)%12) + "_in"; 
+}
+
+function role_BaseSumGate(i,params) {
+  let radix = params[0];
+  if (i>=radix+1) return "unused";
+  if (i==0) return "sum";
+  return ("limb" + (i-1));
+}
+
+function role_MultiplicationExtensionGate(i,params) { 
+  let numops = params[0];
+  if (i>=6*numops) return "unused"; 
+  let k  = div(i,6);
+  let ir = ((i%2) == 0) ? 'r' : 'i';
+  let j  = div(i,2);
+  switch(j%3) { 
+    case 0: return "x" + ir + k;
+    case 1: return "y" + ir + k;
+    case 2: return "z" + ir + k;
+  }
+}
+
+function role_PublicInputGate(i,params) {
+  if (i>=4) return "unused";
+  return ("hash" + i); 
+}
+
+function role_ExponentiationGate(i,params) {
+  let exp_bits = params[0];
+  if (i==0)            return "base";
+  if (i<=exp_bits)     return "expo" + (i-1);
+  if (i==exp_bits+1)   return "output"
+  if (i< 2*exp_bits+2) return "tmp" + (i-exp_bits-2);
+  return "unused";
+}
+
+function role_CosetInterpolationGate      (i,params) { return "dunno"; }
+function role_MultiplicationExtensionGate (i,params) { return "dunno"; }
+function role_PoseidonMdsGate             (i,params) { return "dunno"; }
+function role_RandomAccessGate            (i,params) { return "dunno"; }
+function role_ReducingGate                (i,params) { return "dunno"; }
+function role_ReducingExtensionGate       (i,params) { return "dunno"; }
+
+const the_roles = 
+  [ role_Unknown
+  , role_ArithmeticGate
+  , role_ArithmeticExtensionGate
+  , role_BaseSumGate
+  , role_ConstantGate
+  , role_CosetInterpolationGate
+  , role_ExponentiationGate
+  , role_LookupGate
+  , role_LookupTableGate
+  , role_MultiplicationExtensionGate 
+  , role_NoopGate
+  , role_PoseidonGate
+  , role_PoseidonMdsGate
+  , role_PublicInputGate
+  , role_RandomAccessGate
+  , role_ReducingGate
+  , role_ReducingExtensionGate
+  ];
+
 const the_gate_equations = 
   [ "???"                  // UnknownGate   
   , "w = c0*x*y + c1*z"    // ArithmeticGate
   , "w = c0*x*y + c1*z"    // ArithmeticExtensionGate 
   , "y = sum_i 2^i*b_i"    // BaseSumGate    
-  , "x=c0, y=c1"           // ConstantGate                
+  , "x0=c0, x1=c1"         // ConstantGate                
   , "..."                  // CosetInterpolationGate      
   , "y = x^k"              // ExponentiationGate          
   , "(x,y) in T"           // LookupGate                  
@@ -64,15 +194,17 @@ function findGateIndex(gate) {
   return ((k<0) ? 0 : k);
 } 
 
-function add_table_row(table, idx, text, color) {
+function add_table_row(table, idx, text, count, color) {
   let tr = document.createElement("tr");
   tr.style.background = (color)?color:"#fffff";
 
   let td1 = document.createElement("td"); td1.innerHTML = idx.toString();
   let td2 = document.createElement("td"); td2.innerHTML = text;
+  let td3 = document.createElement("td"); td3.innerHTML = count.toString();
 
   tr.appendChild(td1);
   tr.appendChild(td2);
+  tr.appendChild(td3);
   table.appendChild(tr);
 }
 
@@ -95,22 +227,28 @@ var ncolumns;
 var ncells;
 
 var gates_base   = []; 
+var gates_params = []; 
 var gate_colors  = [];
 var gate_indices = [];       // index into our tables from the selector index
-
+var gate_counts  = [];  
 
 function cell_hover(row,column) {
-  let el_row  = document.getElementById("cell-row"   );
+  let el_pos  = document.getElementById("cell-pos"   );
-  let el_col  = document.getElementById("cell-column");
   let el_val  = document.getElementById("cell-value" );
   let el_gate = document.getElementById("cell-gate"  );
   let el_equ  = document.getElementById("cell-equ"   );
-  let sel = selectors[row];
+  let el_role = document.getElementById("cell-role"  );
-  el_row.innerHTML  = row.toString();
+  let sel    = selectors[row];
-  el_col.innerHTML  = column.toString();
+  let gate   = gate_indices[sel];
+  let params = gates_params[sel];
+  //console.log(gates[sel] + " : " + params);
+  el_pos.innerHTML  = "row=" + row.toString() + " , col=" + column.toString();
   el_val.innerHTML  = matrix[column][row].toString();
   el_gate.innerHTML = gates[sel];
-  el_equ.innerHTML  = the_gate_equations[gate_indices[sel]];
+  el_equ.innerHTML  = the_gate_equations[gate];
+  el_role.innerHTML = the_roles[gate](column,params);
+
+  el_gate.style.background = gate_colors[sel];
 }
 
 function initialize_from_witness(fname,json) {
@@ -133,21 +271,26 @@ function initialize_from_witness(fname,json) {
   el_num_rows.innerHTML = nrows.toString();
   el_num_cols.innerHTML = ncolumns.toString();
 
-
   for(let i=0; i<gates.length; i++) {
-    let full = gates[i];
+    let full  = gates[i];
-    let base = full.split(":")[0];
+    let parts = full.split(":");
-    gates_base[i] = base;
+    let base  = parts[0];
-
+    parts.shift();              // remove the first element
+    gates_base[i]   = base;
+    gates_params[i] = parts.map(parseInt);
     k = findGateIndex(base);
     gate_indices[i] = k;
     gate_colors[i]  = the_gate_colors[k];
+    gate_counts[i]  = 0;
+  }
 
+  for(let i=0; i<nrows; i++) {
+    gate_counts[selectors[i]] ++;
   }
 
   let el_table = document.getElementById("gates");
   for(let i=0; i<ngates; i++) {
-    add_table_row(el_table, i, gates[i], gate_colors[i]);
+    add_table_row(el_table, i, gates[i], gate_counts[i], gate_colors[i]);
   }
 
   let el_svg = document.getElementById("matrix");