[Draft] Dashboard: add plotly lattice visualizer

src/python/impactx/dashboard/Input/visualization/lattice/__init__.py

@@ -1,7 +1,9 @@
+from .dialogs import LatticeVisualizerDialogs as Dialogs
 from .statistics import LatticeVisualizerStatisticComponents as StatComponents
 from .statistics import LatticeVisualizerStatisticUtils as StatUtils
 
 __all__ = [
+    "Dialogs",
     "StatComponents",
     "StatUtils",
 ]

src/python/impactx/dashboard/Input/visualization/lattice/dialogs.py

@@ -0,0 +1,50 @@
+"""
+This file is part of ImpactX
+
+Copyright 2025 ImpactX contributors
+Authors: Parthib Roy
+License: BSD-3-Clause-LBNL
+"""
+
+from .... import vuetify
+from ....Input.components.card import CardComponents
+
+
+class LatticeVisualizerDialogs:
+    @staticmethod
+    def settings():
+        """
+        A button to open the settings dialog for the lattice visualizer.
+        """
+        CardComponents.card_button(
+            "mdi-cog",
+            color="white",
+            click="lattice_visualizer_dialog_settings = true",
+            description="Settings",
+        )
+
+    @staticmethod
+    def element_colors_tab():
+        """
+        A tab inside of the settings dialog to manage element colors.
+        """
+
+        with vuetify.VCardText():
+            with vuetify.VRow():
+                with vuetify.VCol(cols=12):
+                    vuetify.VCardSubtitle(
+                        "Element Color Mapping",
+                    )
+
+    @staticmethod
+    def general_settings_tab():
+        """
+        A tab inside of the settings dialog for general settings.
+        """
+
+        with vuetify.VCardText():
+            with vuetify.VRow():
+                with vuetify.VCol(cols=12):
+                    vuetify.VCardSubtitle(
+                        "Settings",
+                    )

src/python/impactx/dashboard/Input/visualization/lattice/statistics.py

@@ -26,6 +26,7 @@
         """
         Helper function to extract parameter values from the lattice list.
 
+
         :param parameter_name: Name of the parameter to extract (case-insensitive)
         :param value_type: Type to convert values to (float, int, etc.)
         :return: List of extracted values
@@ -42,6 +43,8 @@
 
         return values
 
+        return values
+
     @staticmethod
     def update_length_statistics() -> None:
         """
@@ -67,11 +70,11 @@
             state.length_stats_content = []
 
     @staticmethod
-    def update_element_counts() -> dict[str, int]:
+    def update_element_counts() -> list[tuple[str, int]]:
         """
         Computes the element counts in the lattice list.
 
-        :return: Dictionary of element names and their counts, sorted by count descending.
+        :return: List of (element name, count) tuples, sorted by count descending.
         """
         counts = {}
         for element in state.selected_lattice_list:

src/python/impactx/dashboard/Input/visualization/lattice/ui.py

@@ -6,9 +6,13 @@
 License: BSD-3-Clause-LBNL
 """
 
-from .... import html, state, vuetify
-from ....Input.components import CardBase
-from . import StatComponents, StatUtils
+from trame.widgets import plotly
+
+from .... import ctrl, html, state, vuetify
+from ....Input.components.card import CardBase
+from ....Input.components.navigation import NavigationComponents
+from . import Dialogs, StatComponents, StatUtils
+from .visualization.plot import lattice_visualizer
 
 
 def _update_statistics() -> None:
@@ -21,9 +25,17 @@ def _update_statistics() -> None:
     StatUtils.update_length_statistics()
 
 
+def _update_lattice_visualization() -> None:
+    """
+    Updates the plotly figure with an updated lattice visualization.
+    """
+    ctrl.lattice_figure_update(lattice_visualizer())
+
+
 @state.change("selected_lattice_list")
 def on_lattice_list_change(**kwargs):
     _update_statistics()
+    _update_lattice_visualization()
 
 
 class LatticeVisualizer(CardBase):
@@ -38,6 +50,10 @@ def card_content(self):
         """
         The content of the lattice visualizer.
         """
+        with vuetify.VDialog(
+            v_model=("lattice_visualizer_dialog_settings", False), max_width="33.33vw"
+        ):
+            self.dialog_settings()
 
         with vuetify.VCard():
             with vuetify.VCard(
@@ -50,4 +66,24 @@ def card_content(self):
                 with vuetify.VCardTitle(classes="d-flex align-center"):
                     html.Div("Lattice Statistics")
                     vuetify.VSpacer()
+                    Dialogs.settings()
                 StatComponents.statistics()
+
+            with vuetify.VCard(color="#002949"):
+                with vuetify.VCardText():
+                    ctrl.lattice_figure_update = plotly.Figure(
+                        display_mode_bar="true", style="width: 100%; height: 50vh"
+                    ).update
+
+    @staticmethod
+    def dialog_settings():
+        dialog_name = "lattice_visualizer_dialog_tab_settings"
+
+        with NavigationComponents.create_dialog_tabs(
+            dialog_name, 2, ["Element Colors", "General Settings"]
+        ):
+            with vuetify.VTabsWindow(v_model=(dialog_name, 0)):
+                with vuetify.VTabsWindowItem():
+                    Dialogs.element_colors_tab()
+                with vuetify.VTabsWindowItem():
+                    Dialogs.general_settings_tab()

src/python/impactx/dashboard/Input/visualization/lattice/visualization/__init__.py

@@ -0,0 +1,7 @@
+from .elements.elements import LatticeVisualizerElements
+from .utils import LatticeVisualizerUtils
+
+__all__ = [
+    "LatticeVisualizerElements",
+    "LatticeVisualizerUtils",
+]

src/python/impactx/dashboard/Input/visualization/lattice/visualization/elements/calculations.py

@@ -0,0 +1,58 @@
+"""
+This file is part of ImpactX
+
+Copyright 2025 ImpactX contributors
+Authors: Parthib Roy
+License: BSD-3-Clause-LBNL
+
+Mathematical calculations for lattice element positioning and transformations.
+"""
+
+import numpy as np
+
+
+def transform(x, y, rotation_deg, dx):
+    """
+    Transform coordinates based on angle and displacement.
+    """
+    rotation_rad = np.radians(rotation_deg)
+    x_new = x + dx * np.cos(rotation_rad)
+    y_new = y + dx * np.sin(rotation_rad)
+    return x_new, y_new
+
+
+def rotate_corners(
+    x: float, y: float, rotation_deg: float, ds: float = 1.0, width: float = 0.1
+) -> np.ndarray:
+    """
+    Generates rectangle's corners after applying rotation matrix.
+    This is utilized to properly visualize a rotated lattice element in Plotly.
+
+    :param x: starting x-coordinate before the rotation
+    :param y: starting y-coordinate before the rotation
+    :param rotation_deg: Rotation angle in degrees, counterclockwise.
+    :param ds: Length of the rectangle along the local X-axis (default is 1.0).
+    :param width: Half of the rectangle's height (default is 0.1).
+    :return: A NumPy array of shape (5, 2) with rotated (x, y) corner coordinates, closed for polygon plotting.
+    """
+    rotation_rad = np.radians(rotation_deg)
+
+    corners = np.array(
+        [
+            [0, -width],
+            [ds, -width],
+            [ds, width],
+            [0, width],
+            [0, -width],  # close polygon
+        ]
+    )
+
+    R = np.array(
+        [
+            [np.cos(rotation_rad), -np.sin(rotation_rad)],
+            [np.sin(rotation_rad), np.cos(rotation_rad)],
+        ]
+    )
+
+    rotated = corners @ R.T + [x, y]
+    return rotated