Add animated detector slice diagrams

doc/python_api_reference_vDev.md

@@ -1686,7 +1686,7 @@ def detector_error_model(
 # (in class stim.Circuit)
 def diagram(
     self,
-    type: Literal["timeline-text", "timeline-svg", "timeline-svg-html", "timeline-3d", "timeline-3d-html", "detslice-text", "detslice-svg", "detslice-svg-html", "matchgraph-svg", "matchgraph-svg-html", "matchgraph-3d", "matchgraph-3d-html", "timeslice-svg", "timeslice-svg-html", "detslice-with-ops-svg", "detslice-with-ops-svg-html", "interactive", "interactive-html"] = 'timeline-text',
+    type: Literal["timeline-text", "timeline-svg", "timeline-svg-html", "timeline-3d", "timeline-3d-html", "detslice-text", "detslice-svg", "detslice-svg-html", "matchgraph-svg", "matchgraph-svg-html", "matchgraph-3d", "matchgraph-3d-html", "timeslice-svg", "timeslice-svg-html", "detslice-with-ops-svg", "detslice-with-ops-svg-html", "animated-detslice-with-ops", "interactive", "interactive-html"] = 'timeline-text',
     *,
     tick: Union[None, int, range] = None,
     filter_coords: Iterable[Union[Iterable[float], stim.DemTarget]] = ((),),
@@ -1750,6 +1750,13 @@ def diagram(
                 operations were applied.
             "detslice-with-ops-svg-html": Same as detslice-with-ops-svg
                 but the SVG image is inside a resizable HTML iframe.
+            "animated-detslice-with-ops": A self-contained interactive
+                HTML animation of detslice-with-ops-svg diagrams. Exact
+                Stim SVG frames are shown at integer diagram ticks, and
+                detector region boundaries are interpolated between
+                ticks. The animation starts playing and loops
+                automatically. The HTML embeds every selected integer
+                frame, so its size grows with the selected tick range.
             "interactive" or "interactive-html": An HTML web page
                 containing Crumble (an interactive editor for 2D
                 stabilizer circuits) initialized with the given circuit
@@ -1765,6 +1772,11 @@ def diagram(
 
             Passing `range(A, B)` for a time slice will show the
             operations between tick A and tick B.
+
+            For animated-detslice-with-ops, `tick=None` animates all
+            available diagram ticks. Passing an integer shows one
+            exact frame. Passing `range(A, B)` animates the half-open
+            range containing ticks A through B-1.
         rows: In diagrams that have multiple separate pieces, such as timeslice
             diagrams and detslice diagrams, this controls how many rows of
             pieces there will be. If not specified, a number of rows that creates

doc/stim.pyi

@@ -1049,7 +1049,7 @@ class Circuit:
         """
     def diagram(
         self,
-        type: Literal["timeline-text", "timeline-svg", "timeline-svg-html", "timeline-3d", "timeline-3d-html", "detslice-text", "detslice-svg", "detslice-svg-html", "matchgraph-svg", "matchgraph-svg-html", "matchgraph-3d", "matchgraph-3d-html", "timeslice-svg", "timeslice-svg-html", "detslice-with-ops-svg", "detslice-with-ops-svg-html", "interactive", "interactive-html"] = 'timeline-text',
+        type: Literal["timeline-text", "timeline-svg", "timeline-svg-html", "timeline-3d", "timeline-3d-html", "detslice-text", "detslice-svg", "detslice-svg-html", "matchgraph-svg", "matchgraph-svg-html", "matchgraph-3d", "matchgraph-3d-html", "timeslice-svg", "timeslice-svg-html", "detslice-with-ops-svg", "detslice-with-ops-svg-html", "animated-detslice-with-ops", "interactive", "interactive-html"] = 'timeline-text',
         *,
         tick: Union[None, int, range] = None,
         filter_coords: Iterable[Union[Iterable[float], stim.DemTarget]] = ((),),
@@ -1113,6 +1113,13 @@ class Circuit:
                     operations were applied.
                 "detslice-with-ops-svg-html": Same as detslice-with-ops-svg
                     but the SVG image is inside a resizable HTML iframe.
+                "animated-detslice-with-ops": A self-contained interactive
+                    HTML animation of detslice-with-ops-svg diagrams. Exact
+                    Stim SVG frames are shown at integer diagram ticks, and
+                    detector region boundaries are interpolated between
+                    ticks. The animation starts playing and loops
+                    automatically. The HTML embeds every selected integer
+                    frame, so its size grows with the selected tick range.
                 "interactive" or "interactive-html": An HTML web page
                     containing Crumble (an interactive editor for 2D
                     stabilizer circuits) initialized with the given circuit
@@ -1128,6 +1135,11 @@ class Circuit:
 
                 Passing `range(A, B)` for a time slice will show the
                 operations between tick A and tick B.
+
+                For animated-detslice-with-ops, `tick=None` animates all
+                available diagram ticks. Passing an integer shows one
+                exact frame. Passing `range(A, B)` animates the half-open
+                range containing ticks A through B-1.
             rows: In diagrams that have multiple separate pieces, such as timeslice
                 diagrams and detslice diagrams, this controls how many rows of
                 pieces there will be. If not specified, a number of rows that creates

doc/usage_command_line.md

@@ -986,6 +986,11 @@ OPTIONS
 
             INPUT MUST BE A CIRCUIT.
 
+        "animated-detslice-with-ops": A self-contained HTML animation of
+            detslice-with-ops-svg diagrams.
+
+            INPUT MUST BE A CIRCUIT.
+
 
 EXAMPLES
     Example #1
@@ -2067,4 +2072,3 @@ EXAMPLES
         1
         1
 ```
-

file_lists/source_files_no_main

@@ -22,6 +22,7 @@ src/stim/diagram/basic_3d_diagram.cc
 src/stim/diagram/circuit_timeline_helper.cc
 src/stim/diagram/crumble.cc
 src/stim/diagram/crumble_data.cc
+src/stim/diagram/detector_slice/detector_slice_animation.cc
 src/stim/diagram/detector_slice/detector_slice_set.cc
 src/stim/diagram/diagram_util.cc
 src/stim/diagram/gate_data_3d.cc

file_lists/test_files

@@ -17,6 +17,7 @@ src/stim/dem/detector_error_model.test.cc
 src/stim/diagram/ascii_diagram.test.cc
 src/stim/diagram/base64.test.cc
 src/stim/diagram/coord.test.cc
+src/stim/diagram/detector_slice/detector_slice_animation.test.cc
 src/stim/diagram/detector_slice/detector_slice_set.test.cc
 src/stim/diagram/graph/match_graph_3d_drawer.test.cc
 src/stim/diagram/graph/match_graph_svg_drawer.test.cc

glue/python/src/stim/__init__.pyi

@@ -1049,7 +1049,7 @@ class Circuit:
         """
     def diagram(
         self,
-        type: Literal["timeline-text", "timeline-svg", "timeline-svg-html", "timeline-3d", "timeline-3d-html", "detslice-text", "detslice-svg", "detslice-svg-html", "matchgraph-svg", "matchgraph-svg-html", "matchgraph-3d", "matchgraph-3d-html", "timeslice-svg", "timeslice-svg-html", "detslice-with-ops-svg", "detslice-with-ops-svg-html", "interactive", "interactive-html"] = 'timeline-text',
+        type: Literal["timeline-text", "timeline-svg", "timeline-svg-html", "timeline-3d", "timeline-3d-html", "detslice-text", "detslice-svg", "detslice-svg-html", "matchgraph-svg", "matchgraph-svg-html", "matchgraph-3d", "matchgraph-3d-html", "timeslice-svg", "timeslice-svg-html", "detslice-with-ops-svg", "detslice-with-ops-svg-html", "animated-detslice-with-ops", "interactive", "interactive-html"] = 'timeline-text',
         *,
         tick: Union[None, int, range] = None,
         filter_coords: Iterable[Union[Iterable[float], stim.DemTarget]] = ((),),
@@ -1113,6 +1113,13 @@ class Circuit:
                     operations were applied.
                 "detslice-with-ops-svg-html": Same as detslice-with-ops-svg
                     but the SVG image is inside a resizable HTML iframe.
+                "animated-detslice-with-ops": A self-contained interactive
+                    HTML animation of detslice-with-ops-svg diagrams. Exact
+                    Stim SVG frames are shown at integer diagram ticks, and
+                    detector region boundaries are interpolated between
+                    ticks. The animation starts playing and loops
+                    automatically. The HTML embeds every selected integer
+                    frame, so its size grows with the selected tick range.
                 "interactive" or "interactive-html": An HTML web page
                     containing Crumble (an interactive editor for 2D
                     stabilizer circuits) initialized with the given circuit
@@ -1128,6 +1135,11 @@ class Circuit:
 
                 Passing `range(A, B)` for a time slice will show the
                 operations between tick A and tick B.
+
+                For animated-detslice-with-ops, `tick=None` animates all
+                available diagram ticks. Passing an integer shows one
+                exact frame. Passing `range(A, B)` animates the half-open
+                range containing ticks A through B-1.
             rows: In diagrams that have multiple separate pieces, such as timeslice
                 diagrams and detslice diagrams, this controls how many rows of
                 pieces there will be. If not specified, a number of rows that creates

src/stim.h

@@ -27,6 +27,7 @@
 #include "stim/diagram/coord.h"
 #include "stim/diagram/crumble.h"
 #include "stim/diagram/crumble_data.h"
+#include "stim/diagram/detector_slice/detector_slice_animation.h"
 #include "stim/diagram/detector_slice/detector_slice_set.h"
 #include "stim/diagram/diagram_util.h"
 #include "stim/diagram/gate_data_3d.h"

src/stim/circuit/circuit.pybind.cc

@@ -2493,7 +2493,7 @@ void stim_pybind::pybind_circuit_methods(pybind11::module &, pybind11::class_<Ci
         pybind11::arg("rows") = pybind11::none(),
         pybind11::arg("filter_coords") = pybind11::none(),
         clean_doc_string(R"DOC(
-            @signature def diagram(self, type: Literal["timeline-text", "timeline-svg", "timeline-svg-html", "timeline-3d", "timeline-3d-html", "detslice-text", "detslice-svg", "detslice-svg-html", "matchgraph-svg", "matchgraph-svg-html", "matchgraph-3d", "matchgraph-3d-html", "timeslice-svg", "timeslice-svg-html", "detslice-with-ops-svg", "detslice-with-ops-svg-html", "interactive", "interactive-html"] = 'timeline-text', *, tick: Union[None, int, range] = None, filter_coords: Iterable[Union[Iterable[float], stim.DemTarget]] = ((),), rows: int | None = None) -> 'stim._DiagramHelper':
+            @signature def diagram(self, type: Literal["timeline-text", "timeline-svg", "timeline-svg-html", "timeline-3d", "timeline-3d-html", "detslice-text", "detslice-svg", "detslice-svg-html", "matchgraph-svg", "matchgraph-svg-html", "matchgraph-3d", "matchgraph-3d-html", "timeslice-svg", "timeslice-svg-html", "detslice-with-ops-svg", "detslice-with-ops-svg-html", "animated-detslice-with-ops", "interactive", "interactive-html"] = 'timeline-text', *, tick: Union[None, int, range] = None, filter_coords: Iterable[Union[Iterable[float], stim.DemTarget]] = ((),), rows: int | None = None) -> 'stim._DiagramHelper':
             Returns a diagram of the circuit, from a variety of options.
 
             Args:
@@ -2552,6 +2552,13 @@ void stim_pybind::pybind_circuit_methods(pybind11::module &, pybind11::class_<Ci
                         operations were applied.
                     "detslice-with-ops-svg-html": Same as detslice-with-ops-svg
                         but the SVG image is inside a resizable HTML iframe.
+                    "animated-detslice-with-ops": A self-contained interactive
+                        HTML animation of detslice-with-ops-svg diagrams. Exact
+                        Stim SVG frames are shown at integer diagram ticks, and
+                        detector region boundaries are interpolated between
+                        ticks. The animation starts playing and loops
+                        automatically. The HTML embeds every selected integer
+                        frame, so its size grows with the selected tick range.
                     "interactive" or "interactive-html": An HTML web page
                         containing Crumble (an interactive editor for 2D
                         stabilizer circuits) initialized with the given circuit
@@ -2567,6 +2574,11 @@ void stim_pybind::pybind_circuit_methods(pybind11::module &, pybind11::class_<Ci
 
                     Passing `range(A, B)` for a time slice will show the
                     operations between tick A and tick B.
+
+                    For animated-detslice-with-ops, `tick=None` animates all
+                    available diagram ticks. Passing an integer shows one
+                    exact frame. Passing `range(A, B)` animates the half-open
+                    range containing ticks A through B-1.
                 rows: In diagrams that have multiple separate pieces, such as timeslice
                     diagrams and detslice diagrams, this controls how many rows of
                     pieces there will be. If not specified, a number of rows that creates

src/stim/circuit/circuit_pybind_test.py

@@ -1126,6 +1126,12 @@ def test_diagram():
     assert c.diagram("detector-slice-text", tick=1) is not None
 
     assert c.diagram("detslice-with-ops-svg", tick=1) is not None
+    animation = c.diagram("animated-detslice-with-ops", tick=range(0, 2))
+    html = str(animation)
+    assert html.startswith("<!doctype html>")
+    assert "requestAnimationFrame(animate)" in html
+    with pytest.raises(ValueError, match="rows"):
+        c.diagram("animated-detslice-with-ops", rows=2)
     assert c.diagram("timeslice-svg", tick=1) is not None
     assert c.diagram("time-slice-svg", tick=1) is not None
     assert c.diagram("time+detector-slice-svg", tick=1) is not None

src/stim/cmd/command_diagram.cc

@@ -18,6 +18,7 @@
 
 #include "command_help.h"
 #include "stim/diagram/crumble.h"
+#include "stim/diagram/detector_slice/detector_slice_animation.h"
 #include "stim/diagram/detector_slice/detector_slice_set.h"
 #include "stim/diagram/graph/match_graph_3d_drawer.h"
 #include "stim/diagram/graph/match_graph_svg_drawer.h"
@@ -40,6 +41,7 @@ enum class DiagramTypes {
     TIMELINE_3D_HTML,
     TIME_SLICE_SVG,
     TIME_SLICE_PLUS_DETECTOR_SLICE_SVG,
+    ANIMATED_DETECTOR_SLICE_WITH_OPS,
     MATCH_GRAPH_SVG,
     MATCH_GRAPH_3D,
     MATCH_GRAPH_3D_HTML,
@@ -108,6 +110,7 @@ DiagramTypes _read_diagram_type(int argc, const char **argv) {
         {"timeline-3d-html", DiagramTypes::TIMELINE_3D_HTML},
         {"timeslice-svg", DiagramTypes::TIME_SLICE_SVG},
         {"detslice-with-ops-svg", DiagramTypes::TIME_SLICE_PLUS_DETECTOR_SLICE_SVG},
+        {"animated-detslice-with-ops", DiagramTypes::ANIMATED_DETECTOR_SLICE_WITH_OPS},
         {"matchgraph-svg", DiagramTypes::MATCH_GRAPH_SVG},
         {"matchgraph-3d", DiagramTypes::MATCH_GRAPH_3D},
         {"matchgraph-3d-html", DiagramTypes::MATCH_GRAPH_3D_HTML},
@@ -211,6 +214,10 @@ int stim::command_diagram(int argc, const char **argv) {
             tick_num,
             DiagramTimelineSvgDrawerMode::SVG_MODE_TIME_DETECTOR_SLICE,
             coord_filter);
+    } else if (type == DiagramTypes::ANIMATED_DETECTOR_SLICE_WITH_OPS) {
+        auto circuit = _read_circuit(in, argc, argv);
+        auto coord_filter = _read_coord_filter(argc, argv);
+        out << make_detector_slice_animation_html(circuit, tick_start, tick_num, coord_filter);
     } else if (type == DiagramTypes::TIMELINE_3D) {
         auto circuit = _read_circuit(in, argc, argv);
         DiagramTimeline3DDrawer::circuit_to_basic_3d_diagram(circuit).to_gltf_scene().to_json().write(out);
@@ -468,6 +475,11 @@ SubCommandHelp stim::command_diagram_help() {
                 combined with the detector slices after those operations are
                 applied.
 
+                INPUT MUST BE A CIRCUIT.
+
+            "animated-detslice-with-ops": A self-contained HTML animation of
+                detslice-with-ops-svg diagrams.
+
                 INPUT MUST BE A CIRCUIT.
         )PARAGRAPH"),
         });

src/stim/cmd/command_diagram.pybind.cc

@@ -18,6 +18,7 @@
 #include "stim/dem/detector_error_model_target.pybind.h"
 #include "stim/diagram/base64.h"
 #include "stim/diagram/crumble.h"
+#include "stim/diagram/detector_slice/detector_slice_animation.h"
 #include "stim/diagram/detector_slice/detector_slice_set.h"
 #include "stim/diagram/graph/match_graph_3d_drawer.h"
 #include "stim/diagram/graph/match_graph_svg_drawer.h"
@@ -327,6 +328,14 @@ DiagramHelper stim_pybind::circuit_diagram(
         DiagramType d_type =
             type.find("html") != std::string::npos ? DiagramType::DIAGRAM_TYPE_SVG_HTML : DiagramType::DIAGRAM_TYPE_SVG;
         return DiagramHelper{d_type, out.str()};
+    } else if (type == "animated-detslice-with-ops") {
+        if (!rows.is_none()) {
+            throw std::invalid_argument("`rows` isn't used with type='animated-detslice-with-ops'");
+        }
+        return DiagramHelper{
+            DiagramType::DIAGRAM_TYPE_HTML,
+            make_detector_slice_animation_html(circuit, tick_min, num_ticks, filter_coords),
+        };
     } else if (type == "timeline-3d") {
         std::stringstream out;
         DiagramTimeline3DDrawer::circuit_to_basic_3d_diagram(circuit).to_gltf_scene().to_json().write(out);

src/stim/cmd/command_diagram.test.cc

@@ -147,6 +147,7 @@ TEST(command_diagram, run_captured_stim_main_works_various_arguments) {
         "detector-slice-svg",
         "time-slice-svg",
         "time+detector-slice-svg",
+        "animated-detslice-with-ops",
     };
     for (const auto &type : diagram_types) {
         auto actual = run_captured_stim_main(