From 10716f98741c500f8b96c1e85eef8ffd296fe7bd Mon Sep 17 00:00:00 2001
From: Edward Betts <edward@4angle.com>
Date: Sat, 14 Mar 2026 11:02:55 +0000
Subject: [PATCH] Add bidirectional hover highlight between Gantt chart and
 table

Each Gantt bar and table row gets a data-conf-key attribute
(ISO start date + conference name). A small JS lookup map connects
them so hovering either element highlights both simultaneously:
- Gantt bar: filter brightness + inset white box-shadow
- Table row: yellow tint via background-color

Hovering a Gantt bar also scrolls the matching table row into view
(scrollIntoView nearest) so future conferences are reachable without
manual scrolling. The key field is pre-computed in
build_conference_timeline() to keep the template simple.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 templates/conference_list.html | 43 ++++++++++++++++++++++++++++++++--
 web_view.py                    |  1 +
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/templates/conference_list.html b/templates/conference_list.html
index 6aef0f0..11828ba 100644
--- a/templates/conference_list.html
+++ b/templates/conference_list.html
@@ -57,6 +57,16 @@
   text-decoration: none;
 }
 
+/* Bidirectional hover highlight */
+.conf-tl-bar.conf-hl {
+  filter: brightness(1.25);
+  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.8);
+  z-index: 15;
+}
+tr.conf-hl > td {
+  background-color: rgba(255, 193, 7, 0.25) !important;
+}
+
 /* Conference table */
 .conf-month-row td {
   background: #e9ecef !important;
@@ -99,7 +109,8 @@
       {% set top_px = conf.lane * row_h + header_h %}
       <div class="conf-tl-bar"
            style="left: {{ conf.left_pct }}%; width: {{ conf.width_pct }}%; top: {{ top_px }}px; background: {{ color }};"
-           title="{{ conf.label }}">
+           title="{{ conf.label }}"
+           data-conf-key="{{ conf.key }}">
         {% if conf.url %}<a href="{{ conf.url }}">{{ conf.name }}</a>
         {% else %}<span>{{ conf.name }}</span>{% endif %}
       </div>
@@ -143,7 +154,7 @@
           <td colspan="6">{{ month_label }}</td>
         </tr>
       {% endif %}
-      <tr{% if item.going %} class="conf-going"{% endif %}>
+      <tr{% if item.going %} class="conf-going"{% endif %} data-conf-key="{{ item.start_date.isoformat() }}|{{ item.name }}">
         <td class="text-nowrap text-muted small">
           {%- if item.start_date == item.end_date -%}
             {{ item.start_date.strftime("%-d %b %Y") }}
@@ -213,4 +224,32 @@
   {{ conf_table("Past", past|reverse|list, "went") }}
 </div>
 
+<script>
+(function () {
+  // Build a map from conf-key → all matching elements (bars + rows)
+  const map = new Map();
+  document.querySelectorAll('[data-conf-key]').forEach(el => {
+    const k = el.dataset.confKey;
+    if (!map.has(k)) map.set(k, []);
+    map.get(k).push(el);
+  });
+
+  function setHighlight(key, on) {
+    (map.get(key) || []).forEach(el => el.classList.toggle('conf-hl', on));
+    // When hovering a Gantt bar, scroll the matching table row into view
+    if (on) {
+      const row = (map.get(key) || []).find(el => el.tagName === 'TR');
+      if (row) row.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+  }
+
+  map.forEach((els, key) => {
+    els.forEach(el => {
+      el.addEventListener('mouseenter', () => setHighlight(key, true));
+      el.addEventListener('mouseleave', () => setHighlight(key, false));
+    });
+  });
+})();
+</script>
+
 {% endblock %}
diff --git a/web_view.py b/web_view.py
index acdf4d2..8ba8b25 100755
--- a/web_view.py
+++ b/web_view.py
@@ -482,6 +482,7 @@ def build_conference_timeline(
                 "lane": lane,
                 "left_pct": left_pct,
                 "width_pct": width_pct,
+                "key": f"{conf['start_date'].isoformat()}|{conf['name']}",
                 "label": (
                     f"{conf['name']}"
                     f" ({conf['start_date'].strftime('%-d %b')}–"