dev.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Replaced by tools/build.mjs with the tag being built; see docs/VERSIONS.md. -->
<meta name="q-vis-version" content="dev">
<title>q-vis — MTBDD state evolution</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%223.4%22%20r%3D%222.4%22%20fill%3D%22none%22%20stroke%3D%22%2314202a%22%20stroke-width%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M6.6%205.4%204.2%2010.2%22%20stroke%3D%22%2314202a%22%20stroke-width%3D%221.2%22%20stroke-dasharray%3D%222%201.4%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M9.4%205.4%2011.8%2010.2%22%20stroke%3D%22%2314202a%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%2F%3E%3Crect%20x%3D%221.4%22%20y%3D%2210.8%22%20width%3D%225.4%22%20height%3D%224.2%22%20rx%3D%220.8%22%20fill%3D%22none%22%20stroke%3D%22%2314202a%22%20stroke-width%3D%221.2%22%2F%3E%3Crect%20x%3D%229.2%22%20y%3D%2210.8%22%20width%3D%225.4%22%20height%3D%224.2%22%20rx%3D%220.8%22%20fill%3D%22none%22%20stroke%3D%22%23a8175f%22%20stroke-width%3D%221.2%22%2F%3E%3C%2Fsvg%3E">
<link rel="stylesheet" href="src/app.css">
</head>
<body>
<div class="app">
  <header class="masthead">
    <span class="wordmark">q<span>-</span>vis</span>
    <a id="version" class="version"></a>
    <span class="tagline">how the decision diagram of a quantum state changes, gate by gate</span>
    <span class="spacer"></span>
    <select id="ampFormat" title="how amplitudes are written">
      <option value="exact">exact</option>
      <option value="rect">decimal</option>
      <option value="polar-deg">polar (°)</option>
      <option value="polar-rad">polar (rad)</option>
      <option value="polar-pi">polar (π)</option>
      <option value="tuple">tuple (a,b,c,d)</option>
    </select>
    <label class="pick" id="canonPick">factor
      <select id="canon" title="which edge the normalisation factor is taken from"></select>
    </label>
    <select id="view" title="what the diagram puts on its edges">
      <option value="reduced">MTBDD</option>
      <option value="edge-valued">EVDD</option>
      <option value="limdd">Pauli-LIMDD</option>
    </select>
    <label class="toggle"><input type="checkbox" id="tree" title="draw the same thing with nothing shared, so the sharing can be seen for what it saves"> full tree</label>
    <label class="toggle"><input type="checkbox" id="hideZero" title="hide the 0 terminal, and in the edge-valued form the 0-weighted edges — a zero subfunction has no node there"> hide zeros</label>
    <button id="theme" type="button" title="theme">◐</button>
  </header>

  <section class="inputs" id="inputs">
    <div class="panel" id="panelCircuit" data-flex="1 1 auto" style="flex:1 1 auto">
      <header>
        <span class="label">Circuit</span>
        <span class="spacer"></span>
        <select id="random" aria-label="write a random circuit"
          title="write a random circuit — pick the gate set to draw it from, or let that be drawn too"></select>
        <button id="help" type="button" title="which gates are supported, and how to write them">gates</button>
        <a id="toQuedit" class="button" href="https://quantum.fit.vut.cz/quedit/" target="_blank" rel="noopener" title="open this circuit in quedit, the drag-and-drop circuit editor">quedit ↗</a>
      </header>
      <div class="pickers">
        <select id="example" aria-label="load an example"></select>
        <select id="size" aria-label="how many qubits" title="how many qubits to build this example on"></select>
      </div>
      <textarea id="qasm" spellcheck="false" aria-label="circuit in OpenQASM 2.0"></textarea>
      <details class="fold" id="orderBox">
        <summary title="which qubit each level of the diagram decides — the rows move, the notation does not">
          <span class="fold-label">order</span>
          <span class="fold-now" id="orderNow"></span>
          <span class="fold-warn" id="orderBad" hidden>not applied</span>
        </summary>
        <div class="pickers">
          <select id="order" aria-label="which qubit each level decides"></select>
          <button id="sift" type="button"
            title="search for an order that makes the widest frame of the run smaller">sift</button>
          <label class="toggle"><input type="checkbox" id="circuitFollows" checked
            title="draw the circuit's wires in this order too, so each wire is level with the row it decides"> circuit too</label>
        </div>
        <input id="orderText" type="text" spellcheck="false" hidden
          aria-label="the qubits, top level first"
          title="the qubits in the order you want them, top level first">
        <p class="order-note" id="orderNote"></p>
      </details>
    </div>

    <div class="hsplit" role="separator" aria-orientation="horizontal" tabindex="0"
      aria-label="resize the panel above" title="drag to resize · double-click to even out"></div>
    <div class="panel" id="panelState">
      <header>
        <span class="label">Input state</span>
        <span class="spacer"></span>
        <button id="zeroState" type="button"
          title="set the input to the all-zero basis state, |0…0⟩ with amplitude 1">|0…0⟩</button>
        <button id="symbolic" type="button">all symbolic</button>
        <span class="hint" title="One line per basis pattern. '-' matches either value of a qubit. '?' as the amplitude gives every matched state its own symbol: a, b, c, ... while the letters last, then named after the basis state. Amplitudes: integers, i, sqrt2, omega (= e^(iπ/4)) and free symbols with + - * / ^; division must stay exact.">basis : amplitude</span>
      </header>
      <textarea id="stateText" spellcheck="false" aria-label="input state"></textarea>
      <p class="error" id="error" role="alert"></p>
    </div>

    <div class="hsplit" role="separator" aria-orientation="horizontal" tabindex="0"
      aria-label="resize the panel above" title="drag to resize · double-click to even out"></div>
    <details class="panel foldable" id="panelAmps" open>
      <summary>
        <span class="label">Amplitudes</span>
        <span class="spacer"></span>
        <span class="hint">– is either value</span>
      </summary>
      <div id="readout"></div>
    </details>
  </section>

  <div class="vsplit" id="vsplit" role="separator" aria-orientation="vertical" tabindex="0"
    aria-label="resize the input column" title="drag to resize · double-click to reset"></div>

  <main class="plate">
    <nav class="circuit" id="circuit" data-min="36" data-fit
      aria-label="circuit; click a column to jump to that step"></nav>
    <div class="psplit" id="psplit" role="separator" aria-orientation="horizontal" tabindex="0"
      aria-label="resize the circuit against the diagram"
      title="drag to resize · double-click to fit the circuit"></div>
    <div class="canvas" id="canvas"></div>
  </main>

  <footer class="transport">
    <button id="first" title="back to the input state (Home)" aria-label="back to the input state"><svg class="glyph" viewBox="0 0 12 12" aria-hidden="true"><path d="M1.6 1.8h1.5v8.4H1.6zM10.4 1.8 4 6l6.4 4.2z"/></svg></button>
    <button id="prev" title="previous gate (←)">‹</button>
    <button id="play" title="play through the circuit (space)">▶</button>
    <button id="next" title="next gate (→)">›</button>
    <button id="last" title="on to the end of the circuit (End)" aria-label="on to the end of the circuit"><svg class="glyph" viewBox="0 0 12 12" aria-hidden="true"><path d="M1.6 1.8 8 6l-6.4 4.2zM8.9 1.8h1.5v8.4H8.9z"/></svg></button>
    <span class="stat" id="position"></span>
    <a class="footnote" href="https://ondrik.github.io/" target="_blank" rel="noopener"
       title="questions, requests and bugs — Ondřej Lengál">requests? ondrik.github.io</a>
    <span class="spacer"></span>
    <span class="stat" id="stats"></span>
    <span class="spacer"></span>
    <button id="zoomOut" title="zoom out (−)">−</button>
    <button id="zoomLevel" title="fit the whole diagram in view (0)">fit</button>
    <button id="zoomIn" title="zoom in (+)">+</button>
    <button id="permalink" title="copy a link to this circuit, state and step">copy link</button>
    <button id="export" title="save the current diagram as an SVG file">export SVG</button>
    <button id="tikzDiagram" title="the diagram as TikZ, for a paper">TikZ diagram</button>
    <button id="tikzCircuit" title="the circuit as quantikz, for a paper">TikZ circuit</button>
    <button id="entangle" title="how entangled this state is: the finest product partition, and the Schmidt decomposition of a split you choose">entanglement</button>
    <button id="tableau" title="the stabilizer group of every node in this step">tableau</button>
  </footer>

  <dialog id="helpDialog" aria-labelledby="helpTitle">
    <header>
      <span class="label" id="helpTitle">Gates and syntax</span>
      <span class="spacer"></span>
      <button id="helpClose" type="button">close</button>
    </header>
    <div id="helpBody"></div>
  </dialog>

  <dialog id="codeDialog" aria-labelledby="codeTitle">
    <header>
      <span class="label" id="codeTitle">TikZ</span>
      <span class="spacer"></span>
      <button id="codeCopy" type="button">copy</button>
      <button id="codeClose" type="button">close</button>
    </header>
    <pre id="codeBody" class="code"></pre>
    <div id="codeRich" class="tableau" hidden></div>
  </dialog>
</div>
<script type="module">
  import { boot } from './src/ui.js';
  boot();
</script>
</body>
</html>