Dashboard: Add documentation sidebar (#836)

* Add sidebar for documentation

Instead of opening a new tab to the documentation when users click on the info button on a section header, the documentation is integrated onto the dashboard and is shown through a drawer style ui

* update documentation

still may be wrong link

* remove unused styling

* fix importing issues

* move function to GeneralFunctions

Future pr needs to split up generalFunctions

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: proy30

src/python/impactx/dashboard/Input/components.py

@@ -6,6 +6,9 @@
 
 server, state, ctrl = setup_server()
 
+state.documentation_drawer_open = False
+state.documentation_url = ""
+
 
 class CardComponents:
     """
@@ -41,7 +44,7 @@ def documentation_icon(section_name: str) -> vuetify.VIcon:
         return vuetify.VIcon(
             "mdi-information",
             style="color: #00313C;",
-            click=lambda: generalFunctions.documentation(section_name),
+            click=lambda: generalFunctions.open_documentation(section_name),
         )
 
     @staticmethod
@@ -187,3 +190,21 @@ def create_dialog_tabs(name: str, num_tabs: int, tab_names: list[str]) -> None:
                 for tab_name in tab_names:
                     vuetify.VTab(tab_name)
             vuetify.VDivider()
+
+    @staticmethod
+    def create_documentation_drawer():
+        with vuetify.VNavigationDrawer(
+            v_model=("documentation_drawer_open",),
+            absolute=True,
+            right=True,
+            hide_overlay=True,
+            style="width: 30vw; top: 64px !important;  position: fixed;",
+        ):
+            with vuetify.VContainer(
+                fluid=True,
+                classes="pa-0 fill-height",
+            ):
+                html.Iframe(
+                    src=("documentation_url",),
+                    style="width: 100%; height: 100%; border: none;",
+                )

src/python/impactx/dashboard/Input/defaults.py

@@ -119,6 +119,14 @@ class DashboardDefaults:
         "emitt": "m",
     }
 
+    DOCUMENTATION = {
+        "input_parameters": "https://impactx.readthedocs.io/en/latest/usage/python.html#impactx.ImpactX",
+        "lattice_configuration": "https://impactx.readthedocs.io/en/latest/usage/python.html#lattice-elements",
+        "distribution_parameters": "https://impactx.readthedocs.io/en/latest/usage/python.html#initial-beam-distributions",
+        "space_charge": "https://impactx.readthedocs.io/en/latest/usage/parameters.html#space-charge",
+        "csr": "https://impactx.readthedocs.io/en/latest/usage/parameters.html#coherent-synchrotron-radiation-csr",
+    }
+
 
 class TooltipDefaults:
     """

src/python/impactx/dashboard/Input/generalFunctions.py

@@ -7,10 +7,7 @@
 """
 
 import inspect
-import os
 import re
-import subprocess
-import webbrowser
 
 from .. import setup_server
 from .defaults import DashboardDefaults
@@ -24,27 +21,20 @@
 
 class generalFunctions:
     @staticmethod
-    def documentation(section_name):
+    def open_documentation(section_name):
         """
-        Opens a tab to the specified section link in the documentation.
-        :param section_name (str): The name of the documentation section to open.
+        Retrieves the documentation link with the provided section_name
+        and opens the documentation sidebar on the dashoard.
+
+        :param section_name: The name for the input section.
         """
-        url_dict = {
-            "input_parameters": "https://impactx.readthedocs.io/en/latest/usage/python.html#general",
-            "lattice_configuration": "https://impactx.readthedocs.io/en/latest/usage/python.html#lattice-elements",
-            "distribution_parameters": "https://impactx.readthedocs.io/en/latest/usage/python.html#initial-beam-distributions",
-            "space_charge": "https://impactx.readthedocs.io/en/latest/usage/parameters.html#space-charge",
-            "csr": "https://impactx.readthedocs.io/en/latest/usage/parameters.html#coherent-synchrotron-radiation-csr",
-        }
-
-        url = url_dict.get(section_name)
-        if url is None:
-            raise ValueError(f"Invalid section name: {section_name}")
-
-        if "WSL_DISTRO_NAME" in os.environ:
-            subprocess.run(["explorer.exe", url])
+
+        new_url = DashboardDefaults.DOCUMENTATION.get(section_name)
+        if state.documentation_drawer_open and state.documentation_url == new_url:
+            state.documentation_drawer_open = False
         else:
-            webbrowser.open_new_tab(url)
+            state.documentation_url = new_url
+            state.documentation_drawer_open = True
 
     @staticmethod
     def get_default(parameter, type):

src/python/impactx/dashboard/__init__.py

@@ -22,6 +22,7 @@
     "html",
     "JupyterApp",
     "setup_server",
+    "html",
     "vuetify",
     "AnalyzeSimulation",
     "NavigationComponents",

src/python/impactx/dashboard/__main__.py

@@ -90,6 +90,7 @@ def application():
             NavigationComponents.create_route("Analyze", "mdi-chart-box-multiple")
 
         with layout.content:
+            NavigationComponents.create_documentation_drawer()
             router.RouterView()
             init_terminal()
     return layout