Add showAnnotationRegions config option

Author: zzzappy

src/crumpy/__init__.py

@@ -41,6 +41,9 @@ class CircuitWidget(anywidget.AnyWidget):
     curveConnectors : bool
       If connectors (e.g., the line between control and target of a CNOT) can be drawn curved.
       Defaults to True (matching Crumble).
+    showAnnotationRegions : bool
+      If detector region and observable marks are shown.
+      Defaults to True (matching Crumble).
     """
 
     _esm = bundler_output_dir / "bundle.js"
@@ -49,6 +52,7 @@ class CircuitWidget(anywidget.AnyWidget):
     )
     indentCircuitLines = traitlets.Bool(True).tag(sync=True)
     curveConnectors = traitlets.Bool(True).tag(sync=True)
+    showAnnotationRegions = traitlets.Bool(True).tag(sync=True)
 
     @staticmethod
     def from_cirq(cirq_circuit: cirq.Circuit):

src/js/crumble/draw/config.js

@@ -24,6 +24,7 @@ const OFFSET_X = -pitch + Math.floor(pitch / 4) + 0.5;
 const OFFSET_Y = -pitch + Math.floor(pitch / 4) + 0.5;
 let indentCircuitLines = true;
 let curveConnectors = true;
+let showAnnotationRegions = true;
 
 const setIndentCircuitLines = (newBool) => {
   if (typeof newBool !== "boolean") {
@@ -39,13 +40,22 @@ const setCurveConnectors = (newBool) => {
   curveConnectors = newBool;
 };
 
+const setShowAnnotationRegions = (newBool) => {
+  if (typeof newBool !== "boolean") {
+    throw new TypeError(`Expected a boolean, but got ${typeof newBool}`);
+  }
+  showAnnotationRegions = newBool;
+};
+
 export {
   pitch,
   rad,
   OFFSET_X,
   OFFSET_Y,
   indentCircuitLines,
   curveConnectors,
+  showAnnotationRegions,
   setIndentCircuitLines,
   setCurveConnectors,
+  setShowAnnotationRegions,
 };

src/js/crumble/draw/main_draw.js

@@ -18,7 +18,13 @@
  * - Refactored for CrumPy
  */
 
-import { pitch, rad, OFFSET_X, OFFSET_Y } from "./config.js";
+import {
+  pitch,
+  rad,
+  showAnnotationRegions,
+  OFFSET_X,
+  OFFSET_Y,
+} from "./config.js";
 import { marker_placement } from "../gates/gateset_markers.js";
 import { drawTimeline } from "./timeline_viewer.js";
 import { PropagatedPauliFrames } from "../circuit/propagated_pauli_frames.js";
@@ -275,11 +281,14 @@ function draw(ctx, snap) {
     batch_input,
   );
   let batch_index = 0;
-  for (let mi = 0; mi < dets.length; mi++) {
-    propagatedMarkerLayers.set(~mi, batch_output[batch_index++]);
-  }
-  for (let mi of obs.keys()) {
-    propagatedMarkerLayers.set(~mi ^ (1 << 30), batch_output[batch_index++]);
+
+  if (showAnnotationRegions) {
+    for (let mi = 0; mi < dets.length; mi++) {
+      propagatedMarkerLayers.set(~mi, batch_output[batch_index++]);
+    }
+    for (let mi of obs.keys()) {
+      propagatedMarkerLayers.set(~mi ^ (1 << 30), batch_output[batch_index++]);
+    }
   }
 
   drawTimeline(

src/js/crumble/main.js

@@ -21,7 +21,11 @@
 import { Circuit } from "./circuit/circuit.js";
 import { draw } from "./draw/main_draw.js";
 import { EditorState } from "./editor/editor_state.js";
-import { setIndentCircuitLines, setCurveConnectors } from "./draw/config.js";
+import {
+  setIndentCircuitLines,
+  setCurveConnectors,
+  setShowAnnotationRegions,
+} from "./draw/config.js";
 
 const CANVAS_W = 600;
 const CANVAS_H = 300;
@@ -48,6 +52,7 @@ function render({ model, el }) {
     getStim: () => model.get("stim"),
     getIndentCircuitLines: () => model.get("indentCircuitLines"),
     getCurveConnectors: () => model.get("curveConnectors"),
+    getShowAnnotationRegions: () => model.get("showAnnotationRegions"),
   };
 
   const canvas = initCanvas(el);
@@ -76,6 +81,10 @@ function render({ model, el }) {
     setCurveConnectors(traitlets.getCurveConnectors());
     editorState.force_redraw();
   });
+  model.on("change:showAnnotationRegions", () => {
+    setShowAnnotationRegions(traitlets.getShowAnnotationRegions());
+    editorState.force_redraw();
+  });
 
   // Listeners on editor state that trigger redraws
   editorState.rev.changes().subscribe(() => {
@@ -90,6 +99,7 @@ function render({ model, el }) {
   // Configure initial settings and stim
   setIndentCircuitLines(traitlets.getIndentCircuitLines());
   setCurveConnectors(traitlets.getCurveConnectors());
+  setShowAnnotationRegions(traitlets.getShowAnnotationRegions());
   commitStimCircuit(traitlets.getStim());
 }
 export default { render };

tests/test_widget.py

@@ -35,9 +35,11 @@ def test_has_traits():
     assert widg.has_trait("stim")
     assert widg.has_trait("indentCircuitLines")
     assert widg.has_trait("curveConnectors")
+    assert widg.has_trait("showAnnotationRegions")
     assert widg.trait_metadata("stim", "sync")
     assert widg.trait_metadata("indentCircuitLines", "sync")
     assert widg.trait_metadata("curveConnectors", "sync")
+    assert widg.trait_metadata("showAnnotationRegions", "sync")
 
 
 def test_use_case_dlink():