Skip to content

Fix mobile chart scrolling and navigation state #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LukasWallrich merged 2 commits into from
Oct 21, 2026
Merged

Fix mobile chart scrolling and navigation state #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
07f1669
Fix mobile chart scrolling and navigation state
LukasWallrich Oct 21, 2026
abeeaa0
Address review comments
LukasWallrich Oct 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 5 additions & 26 deletions assets/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -773,6 +773,7 @@ function initDataTable(data) {
createdRow: (row, d, dataIndex) => { $(row).attr('data-index', dataIndex); row.querySelector('.study-details').setAttribute('aria-label', 'Show evidence for ' + (data[dataIndex].title_o || 'original report')); }
});

dataTable.on('draw.dt', syncBrowseUrl);
dataTable.on('order.dt', () => { if (bmInitialized) updateBrowseResults(false); syncBrowseUrl(); });

$('#flora-table tbody').on('click', 'button.study-details', function() {
Expand Down Expand Up @@ -859,8 +860,8 @@ function setupBrowseMobile(data) {
const next = document.getElementById('bm-next');
let debounceTimer;
input.addEventListener('input', () => { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => bmApplySearch(input.value), 200); });
prev.addEventListener('click', () => { if (bmPage > 0) { bmPage--; bmRender(); document.querySelector('.app-main').scrollTo({ top: 0, behavior: 'smooth' }); } });
next.addEventListener('click', () => { bmPage++; bmRender(); document.querySelector('.app-main').scrollTo({ top: 0, behavior: 'smooth' }); });
prev.addEventListener('click', () => { if (bmPage > 0) { bmPage--; bmRender(); syncBrowseUrl(); document.querySelector('.app-main').scrollTo({ top: 0, behavior: 'smooth' }); } });
next.addEventListener('click', () => { bmPage++; bmRender(); syncBrowseUrl(); document.querySelector('.app-main').scrollTo({ top: 0, behavior: 'smooth' }); });
input.value = browseQuery; bmApplySearch(browseQuery);
}

Expand Down Expand Up @@ -924,11 +925,7 @@ document.getElementById('bm-sort')?.addEventListener('change', e => {
if (dataTable && direction) dataTable.order([[Number(column), direction]]).draw();
});
function syncBrowseUrl() {
const url = new URL(location.href);
browseQuery ? url.searchParams.set('q', browseQuery) : url.searchParams.delete('q');
browseKind !== 'all' ? url.searchParams.set('kind', browseKind) : url.searchParams.delete('kind');
if (dataTable) url.searchParams.set('sort', dataTable.order()[0].join(':'));
history.replaceState(null, '', url);
window.FloraView?.recordState();
}

// ===== Browse kind filter =====
Expand Down Expand Up @@ -2158,28 +2155,10 @@ const TAB_ID_TO_PARAM = {
// tab fires shown.bs.tab, which lazy-loads that tab's content as usual.
function applyTabFromUrl() {
const tab = (new URLSearchParams(window.location.search).get('tab') || '').toLowerCase();
if (!tab) return;
const btn = document.getElementById(TAB_PARAM_MAP[tab] || '');
const btn = document.getElementById(TAB_PARAM_MAP[tab] || 'overview-tab');
if (btn && window.bootstrap) bootstrap.Tab.getOrCreateInstance(btn).show();
}

// Reflect the active tab in the address bar so it stays shareable as the user
// navigates. Fires for both clicks and programmatic shows.
function syncTabToUrl(tabId) {
const name = TAB_ID_TO_PARAM[tabId];
if (!name) return;
const params = new URLSearchParams(window.location.search);
if (name !== 'citations') params.delete('doi'); // doi only applies to Citation Impact
if (name === 'overview') params.delete('tab'); // keep the home URL clean
else params.set('tab', name);
const qs = params.toString();
history.replaceState(null, '', new URL('./' + (qs ? '?' + qs : ''), window.location.href).href);
}
Object.keys(TAB_ID_TO_PARAM).forEach(id => {
const btn = document.getElementById(id);
if (btn) btn.addEventListener('shown.bs.tab', () => syncTabToUrl(id));
});

// Called directly (not via $(document).ready) so the CSV fetch starts as soon as this
// script runs, rather than waiting for the whole document - including later, lazily-used
// libraries like Plotly - to finish loading. Safe because this tag sits at the end of
Expand Down
4 changes: 4 additions & 0 deletions assets/chart-accessibility.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,10 @@ window.FloraCharts = (() => {
const plotHeight = (layout.height || el.clientHeight || 380) - (layout.margin.t || 0) - layout.margin.b;
layout.legend={...layout.legend,yanchor:'top',y:-axisSpace/Math.max(100,plotHeight)};
el.style.height = layout.height ? layout.height+'px' : heights.get(id);
// Charts keep hover details, while page swipes and drags never zoom or pan.
layout.dragmode = false;
for (const key of Object.keys(layout)) if (/^[xy]axis\d*$/.test(key)) layout[key] = {...layout[key],fixedrange:true};
config = {...config,scrollZoom:false,doubleClick:false};
const title = layout.title ? plain(layout.title.text || layout.title) : visibleTitle(el);
el.setAttribute('role','img');el.setAttribute('aria-label',title+'. Values in the following data table.');
if (comparisonIds.has(id)) {
Expand Down
21 changes: 13 additions & 8 deletions assets/citation-impact.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -486,7 +486,7 @@
<a href="https://doi.org/${escapeHtml(entry.doi)}" target="_blank">${escapeHtml(entry.doi)}</a></p>`;
}

async function showStudy(doi) {
async function showStudy(doi, fromDeepLink = false) {
const entry = CI.index && CI.index.find(s => s.doi === doi);
if (!entry) return;
CI.currentDoi = doi;
Expand All @@ -498,8 +498,9 @@
document.getElementById('ci-modal').hidden = false;
setBackgroundInert(true);
document.getElementById('ci-modal-close').focus();
// Reflect the open chart in the address bar so it's directly shareable.
history.replaceState(null, '', citationLink(doi));
// Add a closable history entry for user opens; keep initial share links in place.
if (fromDeepLink) history.replaceState(null, '', citationLink(doi));
else history.pushState(null, '', citationLink(doi));

let s;
try {
Expand Down Expand Up @@ -555,18 +556,21 @@
document.querySelectorAll('body > .top-bar, body > main, body > .footer-bar').forEach(el => el.inert = value);
}

function closeModal() {
function closeModal(updateUrl = true) {
const modal = document.getElementById('ci-modal');
if (modal.hidden) return;
modal.hidden = true;
setBackgroundInert(false);
CI.currentDoi = null;
// Drop ?doi= but keep the user on the Citation Impact tab.
const url = new URL(location.href);url.searchParams.delete('doi');url.searchParams.set('tab','citations');history.replaceState(null,'',url);
// Return focus to whatever opened the modal.
if (CI.lastFocus && typeof CI.lastFocus.focus === 'function') CI.lastFocus.focus();
if (updateUrl) {
const url = new URL(location.href);url.searchParams.delete('doi');history.replaceState(null,'',url);
}
// History restoration focuses the destination pane after switching tabs.
if (updateUrl && CI.lastFocus && typeof CI.lastFocus.focus === 'function') CI.lastFocus.focus();
CI.lastFocus = null;
}
document.addEventListener('flora-history', () => closeModal(false));
Comment thread
LukasWallrich marked this conversation as resolved.

const TIMELINE_NARROW = 600;
// Label style and collision spacing depend on the current chart width.
Expand Down Expand Up @@ -731,11 +735,12 @@
// study's chart popup. Returns true if a matching study was found.
async function openStudyByDoi(doi) {
await ensureInit();
if (normalizeDoi(new URLSearchParams(location.search).get('doi')) !== normalizeDoi(doi)) return false;
Comment thread
LukasWallrich marked this conversation as resolved.
const matchDoi = findStudyDoi(doi);
if (!matchDoi) return false;
const tabBtn = document.getElementById('citation-tab');
if (tabBtn && window.bootstrap) bootstrap.Tab.getOrCreateInstance(tabBtn).show();
await showStudy(matchDoi);
await showStudy(matchDoi, true);
return true;
}

Expand Down
11 changes: 8 additions & 3 deletions assets/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -447,7 +447,7 @@ tr.shown td.details-control .study-details::before { transform: rotate(90deg); }
#search-input:focus { outline: none; border-color: var(--color-primary); }
#filter-outcome, #sort-by { padding: 0.55rem 0.7rem; border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.9rem; background: var(--color-surface-raised); color: var(--color-text); }

.table-wrap { background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.table-wrap { background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: 8px; overflow-x: auto; }
#originals-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
#originals-table thead { background: var(--color-surface-subtle); }
#originals-table th, #originals-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--color-border); }
Expand Down Expand Up @@ -506,11 +506,13 @@ tr.shown td.details-control .study-details::before { transform: rotate(90deg); }
.modal-backdrop[hidden] { display: none; }
.modal-card {
background: var(--color-surface-raised); color: var(--color-text);
border-radius: 10px; padding: 1.75rem 2rem; max-width: 1000px;
border-radius: 10px; padding: 0; max-width: 1000px; max-height: calc(100dvh - 80px); overflow-y: auto;
width: 100%; position: relative; box-shadow: var(--shadow-lg);
}
.modal-toolbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 1rem; background: var(--color-surface-raised); border-bottom: 1px solid var(--color-border); }
#ci-modal-body { padding: 0.75rem 1rem; }
.modal-close {
position: absolute; top: 12px; right: 16px; background: none; border: none;
min-width: 44px; min-height: 44px; background: none; border: none;
font-size: 1.75rem; cursor: pointer; color: var(--color-muted-fg);
}
.modal-close:hover { color: var(--color-text); }
Expand Down Expand Up @@ -637,6 +639,9 @@ h1,.card-header,.mc-chart-title {font-family:var(--font-display);}
.badge-other,.badge-unknown,.badge-inconclusive {background:#626875!important;color:#fff!important;}
.bm-evidence {margin-top:.8rem;}
.mobile-navigation {display:none;}
.top-bar.navigation-collapsed .mobile-navigation {display:flex;gap:.5rem;align-items:center;color:white;flex:1;min-width:0;}
.mobile-navigation select {max-width:100%;min-width:0;width:100%;padding:.4rem;background:#333;color:white;border:1px solid #aaa;border-radius:.3rem;}
.top-bar.navigation-collapsed .nav-tabs {display:none;}
.coefficient-plot {min-height:340px;margin-top:1rem;}
.tab-cite-block {margin:1rem 0;}
.tab-cite-block:not([open]) {padding:.6rem 1rem;}
Expand Down
Loading
Loading