WDT Paper Link Map

Interactive cross-reference graph of all 26 WDT papers — hover to explore connections, click to open.

<div class="lm-ctrl-section">
  <div id="lm-subtitle">Loading&hellip;</div>
</div>

<div class="lm-ctrl-section">
  <h3>Filter by Group</h3>
  <div class="lm-group-filter" id="lm-group-filters"></div>
</div>

<div class="lm-ctrl-section">
  <h3>Edge Direction</h3>
  <div class="lm-edge-mode">
    <label><input type="radio" name="lmedgemode" value="all" checked> All edges</label>
    <label><input type="radio" name="lmedgemode" value="out"> Outbound only</label>
    <label><input type="radio" name="lmedgemode" value="in"> Inbound only</label>
  </div>
</div>

<div class="lm-ctrl-section">
  <h3>Layout</h3>
  <button class="lm-ctrl-btn" id="lm-btn-reset">&#x21BA; Reset layout</button>
  <button class="lm-ctrl-btn" id="lm-btn-freeze">&#x2758;&#x2758; Freeze</button>
</div>

<div class="lm-ctrl-section">
  <h3>Legend</h3>
  <div class="lm-legend-item">
    <div class="lm-legend-line" style="background:#FFD700;"></div>
    <span>Outbound ref</span>
  </div>
  <div class="lm-legend-item">
    <div class="lm-legend-line" style="background:#888;"></div>
    <span>Inbound ref</span>
  </div>
</div>

<div class="lm-ctrl-section">
  <h3>Graph</h3>
  <div id="lm-stats">
    Papers: <span id="lm-stat-papers">&#x2014;</span><br>
    Links: <span id="lm-stat-links">&#x2014;</span><br>
    Shown: <span id="lm-stat-shown">&#x2014;</span>
  </div>
</div>

<svg id="lm-graph-svg">
  <defs>
    <marker id="lm-arrow-gold" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto">
      <path d="M0,0 L0,6 L8,3 z" fill="#C0A000"/>
    </marker>
    <marker id="lm-arrow-silver" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto">
      <path d="M0,0 L0,6 L8,3 z" fill="#888"/>
    </marker>
    <marker id="lm-arrow-highlight" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto">
      <path d="M0,0 L0,6 L8,3 z" fill="#FFD700"/>
    </marker>
  </defs>
  <g id="lm-zoom-g">
    <g id="lm-links-layer"></g>
    <g id="lm-nodes-layer"></g>
  </g>
</svg>
<div id="lm-tooltip"></div>
<div id="lm-zoom-hint">scroll to zoom &middot; drag to pan &middot; drag nodes to reposition</div>

<div id="lm-info-panel-header">Paper Detail</div>

<!-- Placeholder: shown when nothing is selected -->
<div id="lm-info-placeholder">
  <p>Click any node to see details about that paper.</p>
  <p>Hover to highlight its connections. Drag nodes to reposition them.</p>
  <p>Let the map settle &mdash; it will freeze automatically once it finds a stable layout.</p>
</div>

<!-- Detail: shown when a node is selected -->
<div id="lm-info-detail">
  <div id="lm-info-title"></div>
  <div id="lm-info-body"></div>
  <a id="lm-info-link" href="#" target="_blank">Open paper &#x2192;</a>
</div>

{=html}