index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Actor-Lane Timeline</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div id="app-shell">
    <section id="left-workspace">
      <header id="app-toolbar">
        <div id="title-row">
          <button id="back-to-rounds" style="display: none;">Back to all rounds</button>
          <h2 id="view-title" aria-live="polite">All rounds overview</h2>
        </div>

        <div id="controls">
          <label for="agent-filter">Agent:</label>
          <select id="agent-filter">
            <option value="All">All</option>
          </select>

          <label for="action-filter-button">Action:</label>
          <div class="multi-filter" id="action-filter">
            <button id="action-filter-button" class="multi-filter-button" type="button" aria-expanded="false">All actions</button>
            <div id="action-filter-menu" class="multi-filter-menu"></div>
          </div>

          <label for="date-filter-button">Date:</label>
          <div class="multi-filter" id="date-filter">
            <button id="date-filter-button" class="multi-filter-button" type="button" aria-expanded="false">All dates</button>
            <div id="date-filter-menu" class="multi-filter-menu">
              <button class="date-filter-option" type="button" data-date-filter="All">All dates</button>
              <button class="date-filter-option" type="button" data-date-filter="breach-day">Breach day: Jun 5</button>
            </div>
          </div>

          <label for="keyword-filter-button">Keyword:</label>
          <div class="multi-filter" id="keyword-filter">
            <button id="keyword-filter-button" class="multi-filter-button" type="button" aria-expanded="false">All keywords</button>
            <div id="keyword-filter-menu" class="multi-filter-menu"></div>
          </div>

          <button id="help-toggle" type="button">Help</button>
        </div>
      </header>

      <div id="left-views">
        <main id="main-chart-area" class="view-panel">
          <div class="section-header-row">
            <h3>Timeline</h3>
          </div>
          <div id="timeline"></div>
          <div id="bottom-support-area">
            <section id="agent-activity-panel">
              <h3>Selected round agent activity</h3>
              <p id="agent-activity-placeholder">Select a round to view message counts by agent.</p>
              <div id="agent-activity"></div>
            </section>
          </div>
        </main>

        <div id="bottom-views">
          <section id="causal-graph-section" class="view-panel">
            <div class="section-header-row">
              <h3>Causal decision graph</h3>
              <button id="expand-causal" class="expand-view-button" type="button">Expand</button>
            </div>

            <p id="causal-placeholder">Select a timeline message to generate a candidate causal graph.</p>
            <div id="causal-controls" class="causal-controls" style="display: none;">
              <label class="causal-toggle">
                <input id="causal-inferred-toggle" type="checkbox" />
                <span>Inferred evidence</span>
              </label>
              <button id="causal-focus-reset" class="toggle-button" type="button">Clear focus</button>
              <div class="causal-zoom-controls" aria-label="Causal graph navigation">
                <button id="causal-zoom-out" class="toggle-button" type="button" aria-label="Zoom out">-</button>
                <button id="causal-zoom-reset" class="toggle-button" type="button">Fit</button>
                <button id="causal-zoom-in" class="toggle-button" type="button" aria-label="Zoom in">+</button>
              </div>
            </div>
            <div id="causal-graph"></div>
          </section>

          <section id="view3-section" class="view-panel">
            <div class="section-header-row">
              <h3>Agent behavior</h3>
              <button id="expand-agent" class="expand-view-button" type="button">Expand</button>
            </div>

            <div id="agent-behavior-toggle" class="view-toggle">
              <button type="button" class="toggle-button active" data-agent-view="bar">Bar chart</button>
              <button type="button" class="toggle-button" data-agent-view="heatmap">Heatmap</button>
            </div>

            <div class="controls">
              <label>Agent:</label>
              <select id="agentFilter">
                <option value="All">All</option>
              </select>

              <label>Metric:</label>
              <select id="metricFilter">
                <option value="channel">Channel risk</option>
              </select>
            </div>

            <div class="dashboard">
              <div class="main">
                <div id="agent-bar-view" class="agent-chart-view active">
                  <svg id="barChart" width="1120" height="250"></svg>
                </div>

                <div id="agent-heatmap-view" class="agent-chart-view">
                  <div class="heatmap-row">
                    <svg id="heatmap" width="1250" height="250"></svg>
                  </div>
                </div>
              </div>

              <div id="detailsPanel">
                <h2>Agent details</h2>
                <p>Click a bar or heatmap cell to inspect details.</p>
                <hr>
                <p><b>No selection</b></p>
                <p>Select an agent or a channel to view details and example messages.</p>
              </div>
            </div>
          </section>
        </div>
      </div>
    </section>

    <aside id="evidence-panel">
      <h3>Event details</h3>
      <div id="detail-round-summary">
        <h4 id="detail-round-title">All rounds overview</h4>
        <p><strong>NEWS:</strong> <span id="detail-round-news">Select a round to view context.</span></p>
        <p><strong>NARRATIVE:</strong> <span id="detail-round-narrative"></span></p>
      </div>
      <p id="evidence-placeholder">Click an event to inspect its evidence.</p>
      <div id="evidence-content" style="display: none;">
        <p id="evidence-round-row"><strong>Round:</strong> <span id="evidence-round"></span></p>
        <p id="evidence-time-row"><strong>Time:</strong> <span id="evidence-time"></span></p>
        <p id="evidence-agent-row"><strong>Agent:</strong> <span id="evidence-agent"></span></p>
        <p id="evidence-role-row"><strong>Role:</strong> <span id="evidence-role"></span></p>
        <p id="evidence-type-row"><strong>Action:</strong> <span id="evidence-type"></span></p>
        <p id="evidence-channel-row"><strong>Message type:</strong> <span id="evidence-channel"></span></p>
        <p id="evidence-responding-row"><strong>Responding to:</strong> <span id="evidence-responding-to"></span></p>
        <p id="evidence-thread-links-row"><strong>Thread links:</strong> <span id="evidence-thread-links"></span></p>
        <p id="evidence-acknowledgements-row"><strong>Short acknowledgements:</strong> <span id="evidence-acknowledgements"></span></p>
        <div id="thread-navigation-row">
          <strong>Thread position:</strong> <span id="thread-position">Not selected</span>
          <button id="thread-prev" type="button">Previous</button>
          <button id="thread-next" type="button">Next</button>
          <span id="thread-navigation-hint">Arrow keys also work.</span>
        </div>
        <p><strong>Content:</strong></p><div id="evidence-message"></div>
      </div>
    </aside>
  </div>

  <div id="help-panel" class="help-overlay" aria-hidden="true">
    <div class="help-dialog" role="dialog" aria-modal="true" aria-labelledby="help-title">
      <div class="help-header">
        <h2 id="help-title">View help</h2>
        <button id="help-close" type="button">Close</button>
      </div>

      <div class="help-tabs" role="tablist" aria-label="Help topics">
        <button type="button" class="help-tab active" data-help-view="timeline">Timeline</button>
        <button type="button" class="help-tab" data-help-view="causal">Causal graph</button>
        <button type="button" class="help-tab" data-help-view="agent">Agent behavior</button>
      </div>

      <section class="help-pane active" data-help-pane="timeline">
        <p>Overview circles aggregate one agent in one round. Size shows message count and dot colour shows dominant action.</p>
        <p>In detail mode, solid lines are exact replies and dashed blue lines are @agent references.</p>
        <section id="legend-panel">
          <div>
            <strong>Dot colour:</strong> action
            <div id="message-legend"></div>
          </div>
          <div>
            <strong>Round colour:</strong> market sentiment
            <div id="sentiment-legend"></div>
          </div>
          <div>
            <strong>Thread links:</strong>
            <div id="thread-link-legend">
              <div class="legend-item"><span class="thread-legend-line exact"></span><span>Exact reply</span></div>
              <div class="legend-item"><span class="thread-legend-line directed"></span><span>@agent reference</span></div>
            </div>
          </div>
        </section>
      </section>

      <section class="help-pane" data-help-pane="causal">
        <p>Candidate influence graph for the selected timeline event. It is a reliability aid, not proof of causation: solid reply links are observed evidence, while inferred links are modelled from timing, shared topics, and state changes.</p>
        <p>Expanded mode opens a larger workspace. Drag blank graph space to pan, scroll to zoom, use Fit to re-center the graph, and click nodes or links to inspect the evidence behind each relationship.</p>
        <p>The red dominant path is the strongest currently visible route into the selected outcome. Toggle inferred evidence to compare the observed chain against lower-confidence supporting context.</p>
        <div id="causal-legend"></div>
      </section>

      <section class="help-pane" data-help-pane="agent">
        <p>Bars compare pre-crisis public posting with breach-day activity. The heatmap shows which communication channels increased most.</p>
        <p><strong>Baseline:</strong> May 17 - June 4. <strong>Breach day:</strong> June 5.</p>
        <div class="legendBox heatmapLegend">
          <b>Risk level key</b><br><br>
          <span class="swatch white"></span> Normal / no increase<br>
          <span class="swatch low"></span> Low / small increase<br>
          <span class="swatch med"></span> Medium / moderate increase<br>
          <span class="swatch high"></span> Extreme / large increase
        </div>
      </section>
    </div>
  </div>

  <script src="https://d3js.org/d3.v7.min.js"></script>
  <script src="script.js?v=heatmap-details-7"></script>
  <script src="view3.js?v=heatmap-details-7"></script>
  <script>
    function setupDashboardControls() {
      const body = d3.select("body");
      let activeAgentView = "bar";

      function mirrorAgentDetailsToEvidencePanel() {
        // Agent details are synced directly by view3.js when a bar or heatmap cell is selected.
      }

      function applyAgentToggle() {
        d3.selectAll("#agent-behavior-toggle .toggle-button")
          .classed("active", function () {
            return d3.select(this).attr("data-agent-view") === activeAgentView;
          });

        d3.select("#agent-bar-view").classed("active", activeAgentView === "bar");
        d3.select("#agent-heatmap-view").classed("active", activeAgentView === "heatmap");
      }

      function setExpandedView(viewName) {
        const isCausal = viewName === "causal" && !body.classed("causal-expanded");
        const isAgent = viewName === "agent" && !body.classed("agent-expanded");

        body
          .classed("causal-expanded", isCausal)
          .classed("agent-expanded", isAgent);

        d3.select("#expand-causal").text(isCausal ? "Collapse" : "Expand");
        d3.select("#expand-agent").text(isAgent ? "Collapse" : "Expand");
        applyAgentToggle();
        window.dispatchEvent(new CustomEvent("causal-expanded-change", { detail: { expanded: isCausal } }));
      }

      function setHelpOpen(isOpen) {
        d3.select("#help-panel")
          .classed("open", isOpen)
          .attr("aria-hidden", String(!isOpen));
        body.classed("help-open", isOpen);
      }

      d3.selectAll("#agent-behavior-toggle .toggle-button").on("click", function () {
        activeAgentView = d3.select(this).attr("data-agent-view");
        applyAgentToggle();
      });

      d3.select("#expand-agent").on("click", () => setExpandedView("agent"));
      d3.select("#expand-causal").on("click", () => setExpandedView("causal"));

      d3.select("#help-toggle").on("click", () => setHelpOpen(true));
      d3.select("#help-close").on("click", () => setHelpOpen(false));
      d3.select("#help-panel").on("click", event => {
        if (event.target.id === "help-panel") {
          setHelpOpen(false);
        }
      });

      d3.selectAll(".help-tab").on("click", function () {
        const viewName = d3.select(this).attr("data-help-view");

        d3.selectAll(".help-tab").classed("active", false);
        d3.select(this).classed("active", true);
        d3.selectAll(".help-pane")
          .classed("active", function () {
            return d3.select(this).attr("data-help-pane") === viewName;
          });
      });

      d3.select(window).on("keydown.help", event => {
        if (event.key === "Escape") {
          setHelpOpen(false);
        }
      });

      mirrorAgentDetailsToEvidencePanel();
      applyAgentToggle();
    }

    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", setupDashboardControls);
    } else {
      setupDashboardControls();
    }
  </script>
</body>
</html>