03 update UI by danmillr · Pull Request #7 · CenterForSpatialResearch/twosides

danmillr · 2026-02-27T21:24:22Z

Anthromes detail overlay now shows a color swatch beside the title for both waffle segments and map hover/pin tooltips (meta forwarded end-to-end).
Anthromes info panel includes a non-clickable swatch list; styling simplified to remove button-like backgrounds.
Detail overlay height only expands when the history chart is present; history chart section gets extra room only when rendered.
Map tooltip pipeline now passes anthrome meta (label/color/year/code) so detail panel stays in sync with map interactions.

…romes 03 update UI anthromes

Copilot

Pull request overview

Updates the Biomes and Anthromes UIs to keep detail overlays/tooltips visually and semantically in sync (including passing “meta” like label/color/year/code end-to-end), while also refining overlay sizing and adding richer explanatory content.

Changes:

Adds/propagates anthrome “meta” into waffle + map tooltip/detail flows and updates detail overlay presentation (swatches, leader lines, conditional sizing).
Refines filter/overlay UX in Biomes (new Known/Unknown radio filter, filter layout changes) and improves robustness/perf in filter application.
Enhances the Anthromes “Zooms” panel (zoom controls, header copy, loading UI) and updates selected zoom site data; removes annotation bubbles + annotations data file.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/biomes/lib/BiomesChart.svelte	Filter/tooltip pipeline tweaks (unknown filter modes, cached leaves, exported tooltip action) and detail dispatch now includes anchor point.
src/biomes/App.svelte	UI/layout updates for nav, filters, detail overlay leader line + richer overlay copy.
src/anthromes/lib/ZoomsPanel.svelte	Adds zoom controls, header intro text, loading spinner overlay, and supports per-location description.
src/anthromes/lib/WaffleChart.svelte	Adds tooltip meta + wheel zoom behavior + UI refinements (gap ring, drag handle redesign).
src/anthromes/lib/MapCanvas.svelte	Passes tooltip meta through hover/pin pipeline and tracks isolated-cell state.
src/anthromes/lib/HistoryCircleChart.svelte	Adjusts label placement/font sizing and wraps anthrome labels into tspans.
src/anthromes/lib/AnnotationBubbles.svelte	Removes annotation bubble layer implementation.
src/anthromes/App.svelte	Detail overlay now shows swatch/title from meta, adds leader line connector, updates nav + filter rail layout, removes annotation bubbles.
public/data/zooms-selected.json	Updates the curated list of “selected” zoom locations and descriptions.
public/data/annotations.json	Removes annotations content file (no longer used after bubble removal).
index.html	Updates landing-page links for the two visualizations.

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

Copilot · 2026-02-27T21:31:18Z

 </script>

-<div class="chart-container" bind:this={chartContainer} onpointerdown={handlePanStart} onpointermove={handleContainerMove} onpointerleave={() => { hoverInCircle = false; }} class:panning class:in-circle={hoverInCircle}>
+<div class="chart-container" bind:this={chartContainer} onpointerdown={handlePanStart} onpointermove={handleContainerMove} onpointerleave={() => { hoverInCircle = false; }} onwheel={handleWheel} class:panning class:in-circle={hoverInCircle}>


onwheel={handleWheel} in Svelte is passive by default, so event.preventDefault() inside handleWheel won’t reliably prevent page scrolling/zooming (and may log a warning). Use a non-passive wheel listener (e.g. onwheel|nonpassive) for this zoom-to-cursor behavior.

Suggested change

<div class="chart-container" bind:this={chartContainer} onpointerdown={handlePanStart} onpointermove={handleContainerMove} onpointerleave={() => { hoverInCircle = false; }} onwheel={handleWheel} class:panning class:in-circle={hoverInCircle}>

<div class="chart-container" bind:this={chartContainer} onpointerdown={handlePanStart} onpointermove={handleContainerMove} onpointerleave={() => { hoverInCircle = false; }} onwheel|nonpassive={handleWheel} class:panning class:in-circle={hoverInCircle}>

Copilot · 2026-02-27T21:31:18Z

+              <a href="/src/biomes/" aria-label="Go to Biomes">
+                <textPath href="#nav-arc-bottom-left" startOffset="50%" text-anchor="middle">BIOMES →</textPath>
+              </a>
+            </text>
+          </g>
+        </svg>
+      </div>
+
+      <a class="nav-circle__home" href="/src/" aria-label="Back to home">←</a>
+    </div>


These navigation links use absolute paths (/src/biomes/ and /src/), which will break when the app is served under the configured Vite base path (/twosides/ in production). Prefer relative links or prefix with import.meta.env.BASE_URL so navigation works on GitHub Pages.

Copilot · 2026-02-27T21:31:18Z

+  <a id="leftLink" class="sideLink" href="/src/biomes/">BIOMES</a>
+  <a id="rightLink" class="sideLink" href="/src/anthromes/">ANTHROMES</a>


Root index.html now links to /src/biomes/ and /src/anthromes/ using leading slashes. Because Vite builds with base: '/twosides/' in production, these absolute paths will ignore the base and 404 on GitHub Pages. Use relative links (e.g. src/biomes/, src/anthromes/) so they resolve under the base path.

Suggested change

<a id="leftLink" class="sideLink" href="/src/biomes/">BIOMES</a>

<a id="rightLink" class="sideLink" href="/src/anthromes/">ANTHROMES</a>

<a id="leftLink" class="sideLink" href="src/biomes/">BIOMES</a>

<a id="rightLink" class="sideLink" href="src/anthromes/">ANTHROMES</a>

Copilot · 2026-02-27T21:31:19Z

+            <text class="nav-circle__text nav-circle__text--link">
+              <a href="/src/anthromes/" aria-label="Go to Anthromes">
+                <textPath href="#nav-arc-bottom-right" startOffset="50%" text-anchor="middle">ANTHROMES →</textPath>
+              </a>
+            </text>
+          </g>
+        </svg>
+      </div>
+
+      <a class="nav-circle__home" href="/src/" aria-label="Back to home">←</a>
+    </div>


The new navigation links use absolute paths (e.g. /src/anthromes/ and /src/). With vite.config.js setting base to /twosides/ in production, these will bypass the base path on GitHub Pages and break navigation. Use relative links (no leading slash) or prefix with import.meta.env.BASE_URL (e.g. ${base}src/anthromes/ and ${base}).

Copilot · 2026-02-27T21:31:19Z

-                <p class="overlay-desc">Show only uSGBs (Unknown species genome bins) when enabled.</p>
+                <div class="overlay-desc">
+                  <p><strong>Unknown (uSGB)</strong><br />Genome-defined species-level group newly identified in this study — not previously represented in reference databases.</p>
+                  <p><strong>Unknown (uSGB)</strong><br />Previously uncharacterized microbial lineage revealed through large-scale metagenomic assembly.</p>


The status overlay description repeats the same label twice (Unknown (uSGB)) for two different definitions, which reads like a copy/paste error and is confusing. Consider making the second paragraph describe the “Known” category (or adjust the heading text) so both options match the filter choices (All/Known/Unknown).

Suggested change

Unknown (uSGB) Previously uncharacterized microbial lineage revealed through large-scale metagenomic assembly.

Known (kSGB) Species-level group with representative genomes already present in existing reference databases.

adamvosburgh and others added 4 commits February 26, 2026 21:50

anthromes ui changes

2a1313b

added loading icon to zoom zoom changes

500c1ed

Merge pull request #6 from CenterForSpatialResearch/03-update-ui-anth…

7f91455

…romes 03 update UI anthromes

refinements to overall ui and layout

9f1e852

danmillr requested a review from Copilot February 27, 2026 21:24

danmillr merged commit a3bb372 into main Feb 27, 2026
2 checks passed

Copilot started reviewing on behalf of danmillr February 27, 2026 21:25 View session

Copilot AI reviewed Feb 27, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

03 update UI#7

03 update UI#7
danmillr merged 4 commits intomainfrom
03-update-ui

danmillr commented Feb 27, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 27, 2026

Uh oh!

Copilot AI Feb 27, 2026

Uh oh!

Copilot AI Feb 27, 2026

Uh oh!

Copilot AI Feb 27, 2026

Uh oh!

Copilot AI Feb 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	<div class="chart-container" bind:this={chartContainer} onpointerdown={handlePanStart} onpointermove={handleContainerMove} onpointerleave={() => { hoverInCircle = false; }} onwheel={handleWheel} class:panning class:in-circle={hoverInCircle}>
	<div class="chart-container" bind:this={chartContainer} onpointerdown={handlePanStart} onpointermove={handleContainerMove} onpointerleave={() => { hoverInCircle = false; }} onwheel\|nonpassive={handleWheel} class:panning class:in-circle={hoverInCircle}>

		<a id="leftLink" class="sideLink" href="/src/biomes/">BIOMES</a>
		<a id="rightLink" class="sideLink" href="/src/anthromes/">ANTHROMES</a>

	<p><strong>Unknown (uSGB)</strong><br />Previously uncharacterized microbial lineage revealed through large-scale metagenomic assembly.</p>
	<p><strong>Known (kSGB)</strong><br />Species-level group with representative genomes already present in existing reference databases.</p>

Conversation

danmillr commented Feb 27, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants