Skip to content
This repository was archived by the owner on Jun 16, 2026. It is now read-only.

Add timeline playback for animated protocol history#12

Closed
cmehat wants to merge 1 commit into
mainfrom
feat/timeline-playback
Closed

Add timeline playback for animated protocol history#12
cmehat wants to merge 1 commit into
mainfrom
feat/timeline-playback

Conversation

@cmehat

@cmehat cmehat commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Refactor marker rendering into addMarker/clearAll/showAll helpers
  • Add play/pause button (top-left Leaflet control) that animates markers appearing chronologically
  • Wrap title text in <span id="title-text"> for safe updates without destroying the GitHub link
  • Include voting data support in popup builder

Note: Merge after PR #11 (voting data) for clean integration, or independently — voting popup code gracefully handles missing data.

Test plan

  • Open map — all markers visible, play button shows ▶
  • Click ▶ — markers appear one-by-one with trail growing, button shows ⏸
  • Click ⏸ mid-stream — playback stops, all markers shown, button shows ▶
  • Click ▶ again — restarts from beginning
  • Title count updates on each step during playback

Refactor marker rendering into addMarker/clearAll/showAll helpers.
Add play/pause button (top-left) that animates markers appearing
one-by-one in chronological order with a growing trail line. Also
includes voting data in popups and title-text span for safe updates.
Copilot AI review requested due to automatic review settings June 9, 2026 19:37

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds an interactive “timeline playback” mode to the Leaflet map so protocol markers can be animated in chronological order, while also refactoring marker rendering into reusable helpers and expanding popup content to include optional voting data.

Changes:

  • Refactors marker + trail rendering into addMarker, clearAll, and showAll, and adds title updates via #title-text.
  • Adds a top-left play/pause Leaflet control that animates markers appearing over time.
  • Extends popup rendering to show voting metadata when present in protocols.json.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread docs/index.html
@@ -12,14 +12,18 @@
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
#title { height: 36px; display: flex; align-items: center; padding: 0 14px; background: #1a1a2e; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.3px; }
#title span { opacity: 0.6; margin-left: 8px; font-weight: 400; }
Comment thread docs/index.html
</head>
<body>
<div id="title">Tezos Protocol Cities</div>
<div id="title"><span id="title-text">Tezos Protocol Cities</span><a href="https://github.com/cotezos/tezosprotocolmap" target="_blank" rel="noopener" aria-label="GitHub"><svg height="20" width="20" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.64 7.64 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg></a></div>
Comment thread docs/index.html
Comment on lines +113 to +119
function updateTitle(count) {
var text = "Tezos Protocol Cities";
if (typeof count === "number") {
text += " \u2014 " + count + " protocol" + (count !== 1 ? "s" : "");
}
document.getElementById("title-text").textContent = text;
}
Comment thread docs/index.html
Comment on lines +66 to +71
if (d.voting) {
html += "<br>Voted: Epoch " + esc(String(d.voting.epoch)) +
" \u2014 " + esc(d.voting.result) +
"<br>Ballots: " + d.voting.yayBallots + " yay, " +
d.voting.nayBallots + " nay, " + d.voting.passBallots + " pass";
}
Comment thread docs/index.html
Comment on lines +192 to +195
playBtn.title = "Play/Pause timeline";
playBtn.textContent = "\u25B6";
playBtn.setAttribute("role", "button");
L.DomEvent.disableClickPropagation(container);
@cmehat

cmehat commented Jun 16, 2026

Copy link
Copy Markdown
Contributor Author

This project has moved to oyatrino/tezosprotocolmap, where this work has already been merged. Closing as part of deprecating this repository.

@cmehat cmehat closed this Jun 16, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants