Add full screen button

aiidateam · Aug 23, 2024 · 486505b · 486505b
1 parent 76a5dab
commit 486505b
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 9 deletions.
diff --git a/aiida_workgraph/utils/__init__.py b/aiida_workgraph/utils/__init__.py
@@ -163,10 +163,31 @@ def svg_to_html(svg_xml: str, width: str = "100%", height: str = "100vh") -> str
                 width: {width};
                 height: {height};
             }}
+            #fullscreen-btn {{
+                margin-left: 10px;
+            }}
+            #fullscreen-btn:hover {{
+                background-color: #0056b3;
+            }}
         </style>
     </head>
     <body>
+        <button id="fullscreen-btn">Fullscreen</button>
         {svg_xml}
+        <script>
+            const fullscreenButton = document.getElementById('fullscreen-btn');
+            const svgElement = document.querySelector('svg');
+
+            fullscreenButton.addEventListener('click', () => {{
+                if (!document.fullscreenElement) {{
+                    svgElement.requestFullscreen().catch(err => {{
+                        alert(`Error attempting to enable full-screen mode: ${{err.message}} (${{err.name}})`);
+                    }});
+                }} else {{
+                    document.exitFullscreen();
+                }}
+            }});
+        </script>
     </body>
     </html>
     """

diff --git a/docs/gallery/autogen/quick_start.py b/docs/gallery/autogen/quick_start.py
@@ -455,13 +455,17 @@ def add_multiply(x, y, z):
 # What’s Next
 # -----------
 #
-# +------------------------------------+------------------------------------------------------+
-# | `Concepts <concept/index.rst>`__   | A brief introduction of WorkGraph’s main concepts.   |
-# +------------------------------------+------------------------------------------------------+
-# | `Tutorials <tutorial/index.rst>`__ | Real-world examples in computational                 |
-# |                                    | materials science and more.                          |
-# +---------------------------+---------------------------------------------------------------+
-# | `HowTo <howto/index.rst>`__        | Advanced topics and tips, e.g., flow control using   |
-# |                                    | ``if``, ``for``, ``while``, and ``context``.         |
-# +------------------------------------+------------------------------------------------------+
+# +-----------------------------------------+------------------------------------------------------+
+# | `Concepts <../concept/index.rst>`__        | A brief introduction of WorkGraph’s main concepts.   |
+# |                                         |                                                      |
+# |                                         |                                                      |
+# +-----------------------------------------+------------------------------------------------------+
+# | `Tutorials <../tutorial/index.rst>`__      | Real-world examples in computational materials       |
+# |                                         | science and more.                                    |
+# |                                         |                                                      |
+# +-----------------------------------------+------------------------------------------------------+
+# | `HowTo <../howto/index.rst>`__             | Advanced topics and tips, e.g flow control using     |
+# |                                         | ``if``, ``for``, ``while`` and ``context``.          |
+# |                                         |                                                      |
+# +-----------------------------------------+------------------------------------------------------+
 #