feat: QOL features and alignment fixes for plots

Author: Linked-Liszt

assets/05-peakindex-viz.css

@@ -232,13 +232,23 @@
 .pi-viz-main {
   flex: 1;
   min-width: 0;
+  min-height: 0;
   height: 100%;
-  position: relative;
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
 }
 
-/* Pass height through dcc.Loading wrapper divs (but not .pi-viz-details) */
-.pi-viz-main > div:not(.pi-viz-details)  { height: 100%; }
+/* Graph wrapper: the dcc.Loading wrapper around the dcc.Graph is the only
+   non-details child of .pi-viz-main.  It must flex to fill remaining space
+   so the bottom .pi-viz-details panel never overlaps the plot. */
+.pi-viz-main > div:not(.pi-viz-details) {
+  flex: 1 1 auto;
+  min-height: 0;
+  position: relative;
+}
+/* Pass height through dcc.Loading's nested wrapper divs so the Plotly
+   figure can fill the flex item. */
 .pi-viz-main > div:not(.pi-viz-details) > div  { height: 100%; }
 .pi-viz-main > div:not(.pi-viz-details) > div > div { height: 100%; }
 
@@ -249,16 +259,12 @@
   color: var(--pi-blue);
 }
 
-/* Details panel (absolute-positioned at bottom of graph) */
+/* Details panel (normal flow, bottom of the visualization column) */
 .pi-viz-details {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 10;
+  flex: 0 0 auto;
   padding: .4rem .75rem;
   border-top: 1px solid #dce1e3;
-  background: rgba(255, 255, 255, .92);
+  background: var(--pi-white);
   max-height: 140px;
   overflow-y: auto;
 }

laue_portal/components/visualization/stereo_plot.py

@@ -487,6 +487,30 @@ def make_pole_figure(
         )
     )
 
+    # Crosshair (+) at the global pole-figure center (origin), matching the
+    # style/size of the selected-point crosshair below.
+    _origin_arm = pole_figure_color_radius(0.0, 0.0, color_rad_deg) * 0.1
+    fig.add_trace(
+        go.Scattergl(
+            x=[-_origin_arm, _origin_arm],
+            y=[0.0, 0.0],
+            mode="lines",
+            line=dict(color="black", width=2),
+            showlegend=False,
+            hoverinfo="skip",
+        )
+    )
+    fig.add_trace(
+        go.Scattergl(
+            x=[0.0, 0.0],
+            y=[-_origin_arm, _origin_arm],
+            mode="lines",
+            line=dict(color="black", width=2),
+            showlegend=False,
+            hoverinfo="skip",
+        )
+    )
+
     # Crosshair (+) on the selected reference point, scaled to color radius
     if center_xy is not None:
         cx, cy = float(center_xy[0]), float(center_xy[1])
@@ -536,7 +560,6 @@ def make_pole_figure(
         paper_bgcolor="white",
         margin=dict(l=40, r=40, t=40, b=40),
         autosize=True,
-        title=f"Pole Figure: {{{_format_hkl(*hkl)}}}",
         showlegend=True,
         legend=dict(orientation="h", yanchor="bottom", y=1.02),
         dragmode="lasso",  # enable lasso select for ROI picking (Stage 3)

laue_portal/pages/peakindexing.py

@@ -949,7 +949,7 @@ def show_point_details(click_data, xml_path):
         detail_card = dbc.Card(
             dbc.CardBody(
                 [
-                    html.H6("Selected Point Details", className="card-title"),
+                    html.H6("Clicked Point Details", className="card-title"),
                     html.P(
                         [
                             html.Strong(f"Step #{step_idx}"),