Update app.py

app.py

@@ -45,104 +45,84 @@ def half_sine(xs, period, amp):
     return y
 
 def build_chart(start: int, end: int):
-    """Return (Plotly figure, summary string) for the requested year range."""
+    """Return (Plotly figure, summary string) for the requested year range,
+       plus a transparent hover-trace so the cursor always shows ‘Year ####’. """
     xs = np.linspace(start, end, max(1000, (end - start) * 4))
     fig = go.Figure()
 
-    # ◼ 1) Draw gradient half-sine ‘towers’ (30 layers each, like old matplotlib version)
+    # 1) Gradient half-sine towers
     for period in ORDERED_PERIODS:
-        base_amp = AMPL[period]
-        color    = COLOR[period]
-
-        # ── gradient layers (thin, semi-transparent) ──────────────────────
+        base_amp, color = AMPL[period], COLOR[period]
         for frac in np.linspace(base_amp / 30, base_amp, 30):
-            ys = half_sine(xs, period, frac)
             fig.add_trace(go.Scatter(
-                x = xs,
-                y = ys,
-                mode = "lines",
-                line = dict(color=color, width=0.8),
-                opacity = 0.6,
-                hoverinfo = "skip",
-                showlegend = False
-            ))
-
-        # ── outer edge line (slightly thicker) ───────────────────────────
-        ys = half_sine(xs, period, base_amp)
+                x=xs, y=half_sine(xs, period, frac),
+                mode="lines",
+                line=dict(color=color, width=0.8),
+                opacity=0.6,
+                hoverinfo="skip", showlegend=False))
         fig.add_trace(go.Scatter(
-            x = xs,
-            y = ys,
-            mode = "lines",
-            line = dict(color=color, width=1.6),
-            hoverinfo = "skip",
-            showlegend = False
-        ))
-
-    # ◼ 2) Event markers with bilingual hover text ─────────────────────────
+            x=xs, y=half_sine(xs, period, base_amp),
+            mode="lines",
+            line=dict(color=color, width=1.6),
+            hoverinfo="skip", showlegend=False))
+
+    # 2) Event markers (bilingual hover)
     for year, evs in EVENTS.items():
         if start <= year <= end:
-            cycle_name = evs[0]["cycle"]
-            period     = PERIOD_BY_CYCLE.get(cycle_name, 50)
-            y_val      = float(half_sine(np.array([year]), period, AMPL[period]))
-            txt_en     = "<br>".join(e["event_en"] for e in evs)
-            txt_ko     = "<br>".join(e["event_ko"] for e in evs)
-
+            cyc = evs[0]["cycle"]; period = PERIOD_BY_CYCLE[cyc]
+            y_val = float(half_sine(np.array([year]), period, AMPL[period]))
             fig.add_trace(go.Scatter(
-                x = [year], y = [y_val],
-                mode = "markers",
-                marker = dict(color="white", size=6),
-                customdata = [[cycle_name, txt_en, txt_ko]],
-                hovertemplate = (
+                x=[year], y=[y_val], mode="markers",
+                marker=dict(color="white", size=6),
+                customdata=[[cyc,
+                             "<br>".join(e["event_en"] for e in evs),
+                             "<br>".join(e["event_ko"] for e in evs)]],
+                hovertemplate=(
                     "Year %{x} • %{customdata[0]} cycle"
                     "<br>%{customdata[1]}"
                     "<br>%{customdata[2]}<extra></extra>"
                 ),
-                showlegend = False
-            ))
-
-    # ◼ 3) Cosmetic touches: centre line, 250-yr arrow, background, axes ────
-    # centre alignment marker
-    fig.add_vline(
-        x = CENTER,
-        line_dash = "dash",
-        line_color = "white",
-        opacity = 0.6
-    )
-
-    # 250-year span arrow (↔) across the top of chart
+                showlegend=False))
+
+    # 3) Transparent hover-trace so any x shows ‘Year ####’
+    fig.add_trace(go.Scatter(
+        x=xs,
+        y=np.full_like(xs, -0.05),                 # just below baseline
+        mode="lines",
+        line=dict(color="rgba(0,0,0,0)", width=1), # invisible
+        hovertemplate="Year %{x:.0f}<extra></extra>",
+        showlegend=False))
+
+    # 4) Cosmetic touches: centre line & 250-yr arrow
+    fig.add_vline(x=CENTER, line_dash="dash", line_color="white", opacity=0.6)
     arrow_y = AMPL[250] * 1.05
     fig.add_annotation(
-        x = CENTER - 125, y = arrow_y,
-        ax = CENTER + 125, ay = arrow_y,
-        xref = "x", yref = "y", axref = "x", ayref = "y",
-        showarrow = True,
-        arrowhead = 3,
-        arrowsize = 1,
-        arrowwidth = 1.2,
-        arrowcolor = "white"
-    )
+        x=CENTER-125, y=arrow_y, ax=CENTER+125, ay=arrow_y,
+        xref="x", yref="y", axref="x", ayref="y",
+        showarrow=True, arrowhead=3, arrowsize=1,
+        arrowwidth=1.2, arrowcolor="white")
     fig.add_annotation(
-        x = CENTER, y = arrow_y + 0.15,
-        text = "250 yr",
-        showarrow = False,
-        font = dict(color="white", size=10)
-    )
+        x=CENTER, y=arrow_y+0.15, text="250 yr",
+        showarrow=False, font=dict(color="white", size=10))
 
-    # global styling
+    # 5) Layout
     fig.update_layout(
-        template = "plotly_dark",
-        paper_bgcolor = "black",
-        plot_bgcolor  = "black",
-        height = 450,
-        margin = dict(t=30, l=40, r=40, b=40),
-        hoverlabel = dict(bgcolor="#222", font_size=11)
+        template="plotly_dark",
+        paper_bgcolor="black", plot_bgcolor="black",
+        height=450,
+        margin=dict(t=30, l=40, r=40, b=40),
+        hoverlabel=dict(bgcolor="#222", font_size=11),
+        hovermode="x"                               # ← unified x-hover
     )
     fig.update_xaxes(title="Year",  range=[start, end], showgrid=False)
-    fig.update_yaxes(title="Relative amplitude", showticklabels=False, showgrid=False)
+    fig.update_yaxes(title="Relative amplitude",
+                     showticklabels=False, showgrid=False)
 
-    summary = f"Range {start}-{end} | Events plotted: {sum(1 for y in EVENTS if start <= y <= end)}"
+    summary = f"Range {start}-{end} | Events plotted: " \
+              f"{sum(1 for y in EVENTS if start <= y <= end)}"
     return fig, summary
 
+
 # ──────────────────────────
 # 4. GPT chat helper
 # ──────────────────────────