1c52aaa92828b6ecc18dd5800fe6650b91daf696
max
Fri Sep 18 07:22:10 2026 -0700
hgSession: the new Sessions page also lists the sessions saved on our other servers
#Preview2 week - bugs introduced now will need a build patch to fix
Every geo mirror node keeps its own namedSessionDb, so a session saved on
genome-euro is invisible on genome.ucsc.edu and people do not find it again.
The table now holds the sessions from every node, with a new Server column
saying where each one lives, and the session name links to the server that
holds it.
Two new hgSession actions, both answered in main() before the cart is built,
so that a request from another node leaves no cart, userDb or sessionDb row
behind:
hgS_doSessionListJson returns this server's sessions for the user named by
the login cookie, as JSON. This is what the other
nodes call.
hgS_doMirrorSessions asks every other gbNode for that list and returns
what came back. It sends all of the requests before
reading any of the answers, so the wait is the
slowest node rather than the sum of them.
The fetch goes through our own server rather than from the browser to the
other nodes, which keeps cross-origin requests out of it: apache handles the
CORS headers differently on every node, and the two mirrors are administered
by Bielefeld and RIKEN, while CGI code reaches them with the release. The
user's login cookies, and only those, are passed on (wikiLinkLoginCookieHeader),
which works because the nodes share a cookie salt.
The page never waits for any of this: the table is drawn from this server's
own sessions and the rows from the other servers are merged in as they
arrive, keeping the current sort, search and page. A node that does not
answer, times out, or runs a release without the endpoint is named in a line
under the toolbar instead, and costs nothing else.
Sessions from another server are shown but not managed here: no Share, Edit,
Overwrite or Delete, no bulk-select checkbox, and the Update now shortcut
keeps ignoring them. Table rows are keyed by a new uid rather than by the
session name, since the same name can now be in the table twice, once per
server.
geoMirrorThisNode() and geoMirrorOtherNodes() read the node list from the
hgcentral gbNode table, so nothing new has to be configured: browser.node
already says which node a server is.
diff --git src/hg/js/hgSession.js src/hg/js/hgSession.js
index 15160be5b58..fae84c8c90f 100644
--- src/hg/js/hgSession.js
+++ src/hg/js/hgSession.js
@@ -1,925 +1,1056 @@
// hgSession.js - the experimental client-rendered "My Sessions" page.
//
// An opt-in modern alternative to the classic server-rendered hgSession page, applying hgBlat's
// facelift strategy (#37996): hgSession.c emits the session list and page config as an inline JSON
// global (hgSessionData) into an empty #sessionApp container, and this file builds the UI - a
// save-current-view card, a searchable/sortable DataTable of saved sessions with inline
// Overwrite/Share/Edit/Delete, and an "Advanced" panel for loading and backup.
//
// The inline table actions POST to small JSON endpoints in hgSession.c (hgS_doDeleteJson, etc.) and
// update the table in place. Navigation actions (load a session, load from URL/file, save to file,
// reset) are ordinary form submits/links against the existing hgSession actions.
//
// Styling: shared house-style components in gbModern.css (.gbPill, .gbCard, .gbModal*, .gbTable,
// .gbBanner, .gbSection), session-specific layout in hgSession.css.
/* global $, hgSessionData, convertTitleTagsToMouseovers, titleTagToMouseover, addMouseover */
/* global htmlEncode, commify, gbShowTimingDialog */
// Cart action variables (must match the hgs* defines in hgSession.h; hgSessionPrefix is "hgS_").
var SESS_ACT = {
save: 'hgS_doSaveSessionJson',
rename: 'hgS_doRenameSessionJson',
del: 'hgS_doDeleteJson',
share: 'hgS_doShareJson',
gallery: 'hgS_doGalleryJson',
overwrite: 'hgS_doOverwriteJson',
describe: 'hgS_doDescribeJson'
};
var SESS_P = {
oldName: 'hgS_oldSessionName',
newName: 'hgS_newSessionName',
share: 'hgS_newSessionShare',
descr: 'hgS_newSessionDescription',
shareAnon:'hgS_shareAnon',
failIfExists: 'hgS_failIfExists'
};
var sessData = null; // set in sessionBuild: {config, sessions}
var sessDt = null; // the DataTable API
var sessSelectMode = false; // bulk-select (checkbox column) shown?
function sessEnc(s) {
// HTML-escape via the shared utils.js helper (escapes quotes too, so it is attribute-safe).
return (typeof htmlEncode === 'function') ? htmlEncode(String(s == null ? '' : s)) : String(s);
}
function sessNum(n) {
return (typeof commify === 'function') ? commify(n) : String(n);
}
function sessRandomShareName() {
// Auto-name convention for machine-generated session names: a leading "_" (which marks the name
// as internally generated, and is kept verbatim by the short-link encoder) followed by 8 URL-safe
// alphanumeric chars. This is the single source of the convention: the top-right "Share a link"
// menu (topLinks.js) and hgSession.c both defer to a name generated here.
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var s = '';
for (var i = 0; i < 8; i++) {
s += chars.charAt(Math.floor(Math.random() * chars.length));
}
return '_' + s;
}
function sessMbpPos(pos) {
// Shorten a position to megabases to save horizontal space:
// "chr7:155799529-155812871" -> "chr7:155.80-155.81 Mbp". Falls back to the raw string
// if it doesn't parse.
var m = /^(.+):([0-9,]+)-([0-9,]+)$/.exec(String(pos));
if (!m) { return String(pos); }
var s = parseInt(m[2].replace(/,/g, ''), 10);
var e = parseInt(m[3].replace(/,/g, ''), 10);
if (isNaN(s) || isNaN(e)) { return String(pos); }
return m[1] + ':' + (s / 1e6).toFixed(2) + '-' + (e / 1e6).toFixed(2) + ' Mbp';
}
function sessMsg(text, cls) {
// Show a transient status line at the top of the app (cls: 'ok' | 'err' | '').
var el = document.getElementById('sessMsg');
if (!el) { return; }
el.className = 'sessMsg' + (cls ? ' ' + cls : '');
el.innerHTML = text ? sessEnc(text) : '';
}
// ---- AJAX ----------------------------------------------------------------
// Post an action to hgSession and get JSON back. Always carry the session id so the CGI loads the
// right cart. onOk(resp) is called for {success:true,...} or {name,url}; onErr(msg) for {error}.
function sessAjax(params, onOk, onErr) {
var data = $.extend({}, params);
data[sessData.config.cartVar] = sessData.config.hgsid;
$.ajax({
type: 'POST',
url: 'hgSession',
data: data,
dataType: 'json',
cache: false,
success: function(resp) {
if (resp && resp.error) {
if (onErr) { onErr(resp.error); } else { sessMsg(resp.error, 'err'); }
} else {
if (onOk) { onOk(resp); }
}
},
error: function() {
var m = 'Sorry, that action could not be completed. Please try again.';
if (onErr) { onErr(m); } else { sessMsg(m, 'err'); }
}
});
}
// ---- modal (generic) -----------------------------------------------------
// One reusable overlay lives inside #sessionApp (so the gbModern tokens inherit into it). Open on
// backdrop click and Esc close, matching hgBlat's modal behavior.
function sessModalEnsure() {
if (document.getElementById('sessModalBg')) { return; }
var bg = document.createElement('div');
bg.id = 'sessModalBg';
bg.className = 'gbModalBg';
bg.style.display = 'none';
bg.innerHTML = '';
document.getElementById('sessionApp').appendChild(bg);
$(bg).on('click', function(ev) { if (ev.target === this) { sessModalClose(); } });
$(document).on('keydown.sessModal', function(ev) {
var b = document.getElementById('sessModalBg');
if (b && b.style.display !== 'none' && ev.key === 'Escape') { sessModalClose(); }
});
}
function sessModalOpen(html) {
sessModalEnsure();
document.getElementById('sessModal').innerHTML = html;
document.getElementById('sessModalBg').style.display = 'flex';
}
function sessModalClose() {
var bg = document.getElementById('sessModalBg');
if (bg) { bg.style.display = 'none'; }
}
// A confirmation dialog with Cancel + a primary/danger OK. opts: {title, bodyHtml, okLabel,
// okClass, onOk}. bodyHtml is caller-built safe HTML. The OK button is focused on open so the
// user can confirm with just the Enter key.
function sessConfirm(opts) {
var okClass = opts.okClass || 'primary';
sessModalOpen(
'
' + sessEnc(opts.title) + '
' +
'
' + opts.bodyHtml + '
' +
'
' +
'' +
'
');
$('#sessCfCancel').on('click', sessModalClose);
$('#sessCfOk').on('click', function() { opts.onOk(); });
document.getElementById('sessCfOk').focus();
}
// A notice with one button, for something the user has to see before the page reloads underneath
// them and takes the status line with it. bodyHtml is caller-built safe HTML.
function sessAlert(title, bodyHtml, onOk) {
sessModalOpen(
'
' + sessEnc(title) + '
' +
'
' + bodyHtml + '
' +
'
' +
'
');
$('#sessAlertOk').on('click', function() {
sessModalClose();
if (onOk) { onOk(); }
});
document.getElementById('sessAlertOk').focus();
}
// ---- session lookup / row helpers ---------------------------------------
-function sessByEnc(enc) {
+function sessByKey(key) {
+ // Rows are keyed by uid, not by session name: the table also holds sessions merged in from our
+ // other servers, and the same name can exist on more than one of them.
var list = sessData.sessions;
for (var i = 0; i < list.length; i++) {
- if (list[i].encName === enc) { return list[i]; }
+ if (list[i].uid === key) { return list[i]; }
}
return null;
}
-function sessRowByEnc(enc) {
- // Return the DataTables row API for the session with this encName, or null.
+function sessRowByKey(key) {
+ // Return the DataTables row API for the session with this uid, or null.
var found = null;
sessDt.rows().every(function() {
- if (this.data().encName === enc) { found = this; }
+ if (this.data().uid === key) { found = this; }
});
return found;
}
function sessApplyTooltips() {
// Runs after every table draw, because DataTables renders rows on demand (page two, a re-sort)
// and the one-time conversion utils.js does at page load never sees those. Two jobs:
// - give the plain title attributes in the new rows the same styled mouseovers as the rest of
// the page, skipping whatever has already been converted;
// - hand each info bubble its session description. The description is the user's own text and
// the tooltip is inserted with innerHTML, so it is passed already escaped: markup in a
// description then reads as the characters that were typed instead of being parsed as HTML.
if (typeof titleTagToMouseover !== 'function' || typeof addMouseover !== 'function') { return; }
var $table = $('#sessionAppTable');
$table.find('[title]').each(function() {
if (this.title && this.getAttribute('mouseoverText') === null) { titleTagToMouseover(this); }
});
- $table.find('span.sessInfo[data-enc]').each(function() {
- var row = sessByEnc(this.getAttribute('data-enc'));
+ $table.find('span.sessInfo[data-key]').each(function() {
+ var row = sessByKey(this.getAttribute('data-key'));
if (row && row.description) { addMouseover(this, sessEnc(row.description)); }
});
}
// ---- table cell rendering ------------------------------------------------
// Inline icons (Font Awesome solid paths, embedded as SVG so they do not depend on the site's Font
// Awesome version). fill:currentColor picks up the button's text/danger color.
var SESS_TRASH_SVG = '';
// Font Awesome "floppy-disk" (save) regular/outline path - reads more clearly as a save icon.
var SESS_SAVE_SVG = '';
// Font Awesome "lock" solid path - marks a private (not-shared) session, since sharing is the default.
var SESS_LOCK_SVG = '';
function sessActionsHtml(row) {
// Order: Share, Edit, then the icon-only Overwrite (floppy) and Delete (trash).
- var e = sessEnc(row.encName);
- return '';
+ }
+ var e = sessEnc(row.uid);
+ return '' +
- '' +
- '' +
- '';
}
function sessNameCellHtml(row) {
var html = '' + sessEnc(row.name) + '';
if (row.description) {
// No title attribute here: the description is the user's own text and the tooltip machinery
// in utils.js inserts its text with innerHTML, so a title would have markup in a description
// parsed as HTML. sessApplyTooltips() attaches it, escaped, after the row is drawn.
- html += ' ⓘ';
+ html += ' ⓘ';
}
// Sessions are shared by default; mark only the exceptions: a lock for private, a badge for the
// public gallery. A plain shared-by-link session gets no marker.
if (row.shared === 0) {
html += ' ' +
SESS_LOCK_SVG + '';
} else if (row.shared >= 2) {
html += ' Public';
}
return html;
}
// ---- Overwrite -----------------------------------------------------------
function sessDoOverwrite(row) {
sessAjax(sessActParams(SESS_ACT.overwrite, row), function(resp) {
row.useCount = resp.useCount;
if (resp.created) { row.created = resp.created; }
if (resp.db) { row.db = resp.db; }
- var r = sessRowByEnc(row.encName);
+ var r = sessRowByKey(row.uid);
if (r) { r.data(row).draw(false); }
sessModalClose();
sessMsg('Overwrote “' + row.name + '” with your current browser view.', 'ok');
});
}
function sessOpenOverwrite(row) {
sessConfirm({
title: 'Overwrite session',
bodyHtml: 'Replace the saved session ' + sessEnc(row.name) + ' with the view you are ' +
'looking at now? The name and description stay the same; the previously saved view is lost.',
okLabel: 'Overwrite',
onOk: function() { sessDoOverwrite(row); }
});
}
// ---- Delete --------------------------------------------------------------
function sessOpenDelete(row) {
sessConfirm({
title: 'Delete session',
bodyHtml: 'Delete the session ' + sessEnc(row.name) + '? This cannot be undone. ' +
'Any shared links to it will stop working.',
okLabel: 'Delete',
okClass: 'danger',
onOk: function() {
sessAjax(sessActParams(SESS_ACT.del, row), function() {
- var r = sessRowByEnc(row.encName);
+ var r = sessRowByKey(row.uid);
if (r) { r.remove().draw(false); }
var list = sessData.sessions;
for (var i = 0; i < list.length; i++) {
- if (list[i].encName === row.encName) { list.splice(i, 1); break; }
+ if (list[i].uid === row.uid) { list.splice(i, 1); break; }
}
sessModalClose();
sessMsg('Deleted “' + row.name + '”.', 'ok');
});
}
});
}
// ---- Edit (rename + description) ----------------------------------------
function sessOpenEdit(row) {
var html = '
Edit session
' +
'' +
'' +
'' +
'' +
'' +
'' +
'
' +
'' +
'
';
sessModalOpen(html);
document.getElementById('sessEditName').value = row.name;
document.getElementById('sessEditDesc').value = row.description || '';
document.getElementById('sessEditPrivate').checked = (row.shared === 0);
document.getElementById('sessEditName').focus();
$('#sessEditCancel').on('click', sessModalClose);
$('#sessEditOk').on('click', function() { sessSaveEdit(row); });
}
function sessSaveEdit(row) {
var newName = document.getElementById('sessEditName').value.trim();
var newDesc = document.getElementById('sessEditDesc').value;
if (!newName) {
var err = document.getElementById('sessEditErr');
err.style.display = 'block';
err.innerHTML = sessEnc('Please enter a name.');
return;
}
var descChanged = (newDesc !== (row.description || ''));
var nameChanged = (newName !== row.name);
var wantPrivate = document.getElementById('sessEditPrivate').checked;
var privChanged = (wantPrivate !== (row.shared === 0));
// Order matters: apply description and privacy while the session still has its OLD name, then
// rename last (renaming changes the DB key the other endpoints look up by).
function finish() {
if (nameChanged) {
// encName changes on rename; reload for authoritative state.
window.location.reload();
} else {
- var r = sessRowByEnc(row.encName);
+ var r = sessRowByKey(row.uid);
if (r) { r.data(row).draw(false); }
sessModalClose();
sessMsg('Saved changes to “' + row.name + '”.', 'ok');
}
}
function doRename() {
if (nameChanged) {
var rp = sessActParams(SESS_ACT.rename, row);
rp[SESS_P.newName] = newName;
// A rename moves the public-listing thumbnail, which can fail on its own (a mirror with
// no ImageMagick); say so before the reload takes the message away.
sessAjax(rp, function(resp) {
if (resp && resp.warning) {
sessAlert('Session renamed', sessEnc(resp.warning), finish);
} else { finish(); }
}, function(m) { sessEditError(m); });
} else { finish(); }
}
function doPriv() {
if (privChanged) {
var sp = sessActParams(SESS_ACT.share, row);
sp[SESS_P.share] = wantPrivate ? 0 : 1;
sessAjax(sp, function(resp) { row.shared = resp.shared; doRename(); },
function(m) { sessEditError(m); });
} else { doRename(); }
}
function doDesc() {
if (descChanged) {
var dp = sessActParams(SESS_ACT.describe, row);
dp[SESS_P.descr] = newDesc;
sessAjax(dp, function() { row.description = newDesc; doPriv(); },
function(m) { sessEditError(m); });
} else { doPriv(); }
}
doDesc();
}
function sessEditError(msg) {
var err = document.getElementById('sessEditErr');
if (err) { err.style.display = 'block'; err.innerHTML = sessEnc(msg); }
else { sessMsg(msg, 'err'); }
}
// ---- Share (copy link + sharing level) ----------------------------------
function sessOpenShare(row) {
var mailBody = encodeURIComponent('Here is a UCSC Genome Browser session I would like to ' +
'share with you: ') + encodeURIComponent(row.shareUrl);
var mailto = 'mailto:?subject=' + encodeURIComponent('UCSC Genome Browser session ' + row.name) +
'&body=' + mailBody;
var html = '
Sessions are loadable by anyone with the ' +
'link by default; use Edit to make one private.
' +
'' +
'' +
'
' +
'
';
sessModalOpen(html);
var inp = document.getElementById('sessShareUrl');
inp.value = row.shareUrl;
document.getElementById('sessGalleryChk').checked = (row.shared >= 2);
$('#sessShareClose').on('click', sessModalClose);
$('#sessShareCopy').on('click', function() {
inp.focus(); inp.select();
if (navigator.clipboard) { navigator.clipboard.writeText(row.shareUrl); }
else { try { document.execCommand('copy'); } catch (e) { /* ignore */ } }
this.textContent = 'Copied';
});
$('#sessGalleryChk').on('change', function() { sessSetGallery(row, this.checked ? 1 : 0); });
}
function sessShareErr(msg) {
var err = document.getElementById('sessShareErr');
if (err) { err.style.display = 'block'; err.innerHTML = sessEnc(msg); }
}
function sessAfterSharedChange(row, newShared) {
row.shared = newShared;
var g = document.getElementById('sessGalleryChk');
if (g) { g.checked = (newShared >= 2); }
- var r = sessRowByEnc(row.encName);
+ var r = sessRowByKey(row.uid);
if (r) { r.data(row).draw(false); }
}
function sessSetGallery(row, want) {
var p = sessActParams(SESS_ACT.gallery, row);
p[SESS_P.share] = want;
sessAjax(p, function(resp) {
sessAfterSharedChange(row, resp.shared);
// The listing itself worked; the picture for it may not have (e.g. a mirror without
// ImageMagick convert). Show what the server said rather than a bare success.
if (resp && resp.warning) { sessShareErr(resp.warning); }
}, function(m) {
sessShareErr(m);
document.getElementById('sessGalleryChk').checked = (row.shared >= 2);
});
}
// Build the base params for an action on a given session (decoded name; the CGI re-encodes it).
function sessActParams(action, row) {
var p = {};
p[action] = '1';
p[SESS_P.oldName] = row.name;
return p;
}
// ---- Save current view ---------------------------------------------------
function sessDoSave() {
var name = document.getElementById('sessSaveName').value.trim();
if (!name) {
// Empty name: offer to save under a random internal "_XXXXXXXX" name, after
// confirming the user really meant to leave it blank.
var rand = sessRandomShareName();
sessConfirm({
title: 'Save without a name?',
bodyHtml: 'You left the session name empty. Your session will be saved under the ' +
'randomly generated name ' + sessEnc(rand) + '.
You can also create ' +
'these quick share links any time from the Share a link option at the top ' +
'right of every Genome Browser page.',
okLabel: 'Save session',
onOk: function() { sessModalClose(); sessDoSaveWithName(rand); }
});
return;
}
sessDoSaveWithName(name);
}
function sessDoSaveWithName(name) {
var priv = document.getElementById('sessSavePrivate').checked;
var descEl = document.getElementById('sessSaveDesc');
var desc = descEl ? descEl.value.trim() : '';
var p = {};
p[SESS_ACT.save] = '1';
p[SESS_P.newName] = name;
// Saving under a name you are already using replaces that session's contents, so ask first.
// With failIfExists set the CGI answers {exists: true} instead of saving, which is how the
// top-right "Share a link" menu handles the same collision.
p[SESS_P.failIfExists] = '1';
// doSaveSessionJson always saves shared-by-link (the default); chain the optional description
// and, if the user asked for "only I can load it", make it private, then reload to show the row.
// The session is saved by the time those run, so a failure in one of them has to be reported: a
// silent reload would leave a session sitting there shared by link, or with no description, and
// tell the user nothing.
function reload() { window.location.reload(); }
function partlySaved(problem) {
sessAlert('Session saved, with a problem',
'Your session ' + sessEnc(name) + ' was saved, but ' + sessEnc(problem),
reload);
}
function afterDesc() {
if (!priv) { reload(); return; }
var sp = {};
sp[SESS_ACT.share] = '1';
sp[SESS_P.oldName] = name;
sp[SESS_P.share] = 0;
sessAjax(sp, reload, function(m) {
partlySaved('it could not be made private, so anyone with the link can still load it. ' +
m);
});
}
function afterSave() {
if (!desc) { afterDesc(); return; }
var dp = {};
dp[SESS_ACT.describe] = '1';
dp[SESS_P.oldName] = name;
dp[SESS_P.descr] = desc;
sessAjax(dp, afterDesc, function(m) {
partlySaved('the description could not be saved. ' + m);
});
}
function replace() {
// Replace goes through the overwrite endpoint rather than saving again. A save always
// writes the session as shared by link, which would take a session out of the public
// gallery, or make a private one loadable by anyone holding the link. Overwrite keeps
// whatever sharing level the session already had, and the chained steps below still apply
// the description and the "only I can load it" box if the user set them.
var op = {};
op[SESS_ACT.overwrite] = '1';
op[SESS_P.oldName] = name;
sessAjax(op, afterSave);
}
sessAjax(p, function(resp) {
if (resp && resp.exists) {
sessConfirm({
title: 'Replace this session?',
bodyHtml: 'You already have a session named ' + sessEnc(name) + '. Replacing ' +
'it points that name at the view you are looking at now, and what the session ' +
'held before is gone.' +
(priv ? '' : ' Who can load it stays as it is.'),
okLabel: 'Replace it',
onOk: function() { sessModalClose(); replace(); }
});
return;
}
afterSave();
});
}
// ---- Advanced panel (navigation forms) ----------------------------------
function sessAdvancedHtml(C) {
var sid = '';
var loadUser = '';
if (C.loggedIn) {
loadUser =
'
';
}
// ---- build the whole page -----------------------------------------------
function sessAccountHtml(C) {
// The signed-in account line (Signed in as X · Sign out · Change password) now lives in the
// top-right menu bar, so it is intentionally not rendered here. Kept commented out so QA can
// add it back if wanted:
/*
if (C.loggedIn) {
var s = 'Signed in as ' + sessEnc(C.userName) + '';
if (C.logoutUrl) { s += ' · Sign out'; }
if (C.changePasswordUrl) {
s += ' · Change password';
}
return s;
}
*/
if (!C.loggedIn && C.loginAvail && C.loginUrl) {
return 'You are not signed in. Sign in to save and manage named sessions.';
}
return '';
}
function sessSaveCardHtml(C) {
if (!C.loggedIn) { return ''; }
// Assembly and position separated by a colon (e.g. "hg38: chr7:1-1,000"); assembly is already
// the accession for hubs (trackHubSkipHubName on the server).
var loc = '';
if (C.db && C.position) { loc = sessEnc(C.db) + ': ' + sessEnc(C.position); }
else if (C.db) { loc = sessEnc(C.db); }
else if (C.position) { loc = sessEnc(C.position); }
if (loc && C.trackCount) {
loc += ', ' + sessNum(C.trackCount) + ' track' + (C.trackCount === 1 ? '' : 's') + ' shown';
}
var what = loc ? '' + loc + '' : '';
return '
' +
'
' +
'Save the current view as a stable session link' + what + '
' +
'
' +
'' +
'' +
'' +
'
' +
'' +
'
';
}
function sessRecentHtml(recent) {
// A quick shortcut to re-save the session the user most recently saved, keeping its name and
// description. Hidden when there are no saved sessions.
if (!recent) { return ''; }
return '
';
}
+function sessScrollToTable() {
+ // Arriving from another server's Server column or "Go to" button, on a #sessions link. The
+ // browser cannot act on that anchor by itself: the table is built here, long after it has
+ // given up looking for the element, so scroll to it once it exists.
+ if (window.location.hash !== '#sessions') { return; }
+ var el = document.getElementById('sessions');
+ if (el) { el.scrollIntoView(); }
+}
+
+function sessMirrorLinks(mirrors) {
+ // "genome-euro", or "genome-euro or genome-asia", each linking to that server's own hgSession.
+ var links = mirrors.map(function(m) {
+ return '' + sessEnc(m.label) + '';
+ });
+ return links.length > 1 ?
+ links.slice(0, -1).join(', ') + ' or ' + links[links.length - 1] : links[0];
+}
+
+function sessMirrorNoteHtml(C) {
+ // Placeholder in the table toolbar, filled in by sessMergeMirrors() once the other servers
+ // have answered - or not answered.
+ return (C.mirrors || []).length ? '' : '';
+}
+
+function sessMirrorStatus(html) {
+ var el = document.querySelector('#sessionApp .sessMirrorNote');
+ if (el) { el.innerHTML = html; }
+}
+
+function sessMergeMirrors() {
+ // Each of our servers keeps its own sessions, so the ones saved on the others are fetched
+ // after this server's table is already on the screen, and merged into it - every row marked
+ // in the Server column with the server it lives on. One request: our own hgSession is what
+ // asks the other nodes, so nothing here depends on cross-origin requests.
+ var C = sessData.config;
+ var mirrors = C.mirrors || [];
+ if (!C.loggedIn || !mirrors.length) { return; }
+ sessMirrorStatus('Also looking for your sessions on ' + sessMirrorLinks(mirrors) + '…');
+ $.ajax({
+ type: 'GET',
+ url: 'hgSession',
+ data: { hgS_doMirrorSessions: 1 },
+ dataType: 'json',
+ cache: false,
+ success: function(resp) {
+ var added = [], failed = [], n = 0;
+ (resp.mirrors || []).forEach(function(m) {
+ if (!m.sessions) { failed.push(m); return; }
+ m.sessions.forEach(function(row) {
+ row.uid = 'R' + (n++);
+ row.remote = true;
+ row.server = m.label;
+ row.serverTitle = m.title;
+ row.serverUrl = m.url;
+ added.push(row);
+ });
+ });
+ if (added.length) {
+ sessData.sessions = sessData.sessions.concat(added);
+ sessDt.rows.add(added).draw(false); // keeps the current sort, search and page
+ }
+ // Only a server that did not answer is worth a word: one that did has its sessions in
+ // the table now, named in the Server column.
+ sessMirrorStatus(failed.length ?
+ 'Missing a session? We could not reach ' + sessMirrorLinks(failed) + '.' : '');
+ },
+ error: function() {
+ sessMirrorStatus('Missing a session? We could not reach ' +
+ sessMirrorLinks(mirrors) + '.');
+ }
+ });
+}
+
function sessTableHtml(C) {
if (!C.loggedIn) { return ''; }
- return '
Your saved sessions
' +
+ // id="sessions" is the anchor a link from one of our other servers arrives on, see
+ // sessScrollToTable().
+ return '
Your saved sessions
' +
'
';
}
function sessionBuild() {
sessData = hgSessionData;
// When the page was loaded with &measureTiming=1 the C side attaches sessData.timing; time the
// client-side render too so the dialog shows the full server+client picture.
var tBuildStart = (sessData.timing && window.performance) ? performance.now() : 0;
var C = sessData.config;
var app = $('#sessionApp');
var intro = '
' + sessAccountHtml(C) +
(sessAccountHtml(C) ? ' ' : '') +
'A session is a stable link to a Genome Browser view that you can save, load later, share ' +
'or copy into a manuscript. See the ' +
'Sessions User’s Guide and the ' +
'Session Gallery.
';
+ // Every row carries the server it lives on; at this point they are all this server's own.
+ // The sessions merged in later from the other nodes get theirs in sessMergeMirrors().
+ (sessData.sessions || []).forEach(function(s, i) {
+ s.uid = 'L' + i;
+ s.server = C.thisServer ? C.thisServer.label : '';
+ s.serverTitle = C.thisServer ? C.thisServer.title : '';
+ s.serverUrl = ''; // this is that server, so the Server cell here is text, not a link
+ });
+
// The session most recently saved/overwritten (max lastUse), for the one-click "Update now".
+ // Only this server's own sessions: "Update now" saves through this server's cart.
var recent = null;
(sessData.sessions || []).forEach(function(s) {
+ if (s.remote) { return; }
if (!recent || s.lastUseEpoch > recent.lastUseEpoch) { recent = s; }
});
app.html(
intro +
'' +
sessRecentHtml(recent) +
sessSaveCardHtml(C) +
sessAdvancedHtml(C) +
sessTableHtml(C)
);
// Save current view. Enter in either the name or the description field saves.
$('#sessSaveBtn').on('click', sessDoSave);
$('#sessSaveName, #sessSaveDesc').on('keydown', function(ev) {
if (ev.key === 'Enter') { ev.preventDefault(); sessDoSave(); }
});
// One-click update of the most recently saved session.
if (recent) {
$('#sessUpdateNow').on('click', function() {
sessConfirm({
title: 'Update session',
bodyHtml: 'Overwrite ' + sessEnc(recent.name) + ' with the view you are ' +
'looking at now? The session name and description stay the same.',
okLabel: 'Update now',
onOk: function() { sessDoOverwrite(recent); }
});
});
}
// Advanced toggle.
$('#sessAdvHead').on('click', function() {
var body = document.getElementById('sessAdvBody');
var open = body.style.display !== 'none';
body.style.display = open ? 'none' : 'grid';
$(this).find('.caret').html(open ? '▸' : '▾');
});
- // Session table.
- if (C.loggedIn) { sessBuildTable(); }
+ // Session table, then the sessions our other servers hold, merged in as they arrive.
+ if (C.loggedIn) { sessBuildTable(); sessScrollToTable(); sessMergeMirrors(); }
if (typeof convertTitleTagsToMouseovers === 'function') { convertTitleTagsToMouseovers(); }
if (C.loggedIn) { sessApplyTooltips(); }
// Timing report (only when loaded with &measureTiming=1): a pill that opens the shared dialog.
if (sessData.timing) {
var clientRows = [{ label: 'build page (JS)',
ms: Math.round(performance.now() - tBuildStart) }];
var pill = document.createElement('button');
pill.type = 'button';
pill.className = 'gbPill';
pill.id = 'sessTimingBtn';
pill.innerHTML = '⏱ Timing';
pill.title = 'Show where this page spent its time (server and browser)';
pill.addEventListener('click', function() {
gbShowTimingDialog(sessData.timing, clientRows);
});
var bar = document.querySelector('#sessionApp .sessToolbar') ||
document.getElementById('sessionApp');
bar.appendChild(pill);
// measureTiming=1 on the URL is an explicit request to see the numbers, so open the dialog
// right away; the pill stays for reopening it after Close.
gbShowTimingDialog(sessData.timing, clientRows);
}
}
// ---- bulk select / delete ------------------------------------------------
function sessToggleSelect() {
if (sessSelectMode) { sessDeleteSelected(); } else { sessSetSelectMode(true); }
}
function sessSetSelectMode(on) {
sessSelectMode = on;
sessDt.column(0).visible(on); // the leading checkbox column
var b = document.getElementById('sessSelectBtn');
+ var cancel = document.getElementById('sessSelCancelBtn');
+ if (cancel) { cancel.style.display = on ? '' : 'none'; }
if (on) {
b.textContent = 'Delete all selected';
b.classList.add('primary');
} else {
b.textContent = 'Select';
b.classList.remove('primary');
$('#sessionAppTable .sessSelChk, #sessSelAll').prop('checked', false);
}
}
function sessDeleteSelected() {
- var encs = [];
+ var keys = [];
$('#sessionAppTable tbody .sessSelChk:checked').each(function() {
- encs.push(this.getAttribute('data-enc'));
+ keys.push(this.getAttribute('data-key'));
});
- if (encs.length === 0) { sessSetSelectMode(false); return; } // nothing picked: just exit
+ if (keys.length === 0) { sessSetSelectMode(false); return; } // nothing picked: just exit
sessConfirm({
title: 'Delete selected sessions',
- bodyHtml: 'Delete ' + encs.length + ' selected session' +
- (encs.length === 1 ? '' : 's') + '? This cannot be undone.',
- okLabel: 'Delete ' + encs.length,
+ bodyHtml: 'Delete ' + keys.length + ' selected session' +
+ (keys.length === 1 ? '' : 's') + '? This cannot be undone.',
+ okLabel: 'Delete ' + keys.length,
okClass: 'danger',
onOk: function() {
sessModalClose();
- var remaining = encs.length;
+ var remaining = keys.length;
function done() { if (--remaining === 0) { window.location.reload(); } }
- encs.forEach(function(enc) {
- var row = sessByEnc(enc);
+ keys.forEach(function(key) {
+ var row = sessByKey(key);
if (!row) { done(); return; }
sessAjax(sessActParams(SESS_ACT.del, row), done, done);
});
}
});
}
function sessBuildTable() {
sessDt = $('#sessionAppTable').DataTable({
data: sessData.sessions,
pageLength: 15,
lengthChange: true,
lengthMenu: [[15, 50, 100, -1], [15, 50, 100, 'All']],
order: [[3, 'desc']], // newest (Created) first by default
dom: '<"sessToolbar"fl>rt<"sessFoot"ip>',
language: { searchPlaceholder: 'Search sessions', search: '', lengthMenu: 'Show _MENU_',
emptyTable: 'No saved sessions yet.' },
columns: [
{ title: '',
className: 'sessSelCol', data: null, orderable: false, searchable: false, visible: false,
render: function(d, type, row) {
- return ''; } },
+ if (row.remote) { return ''; }
+ return ''; } },
{ title: 'Session', className: 'sessNameCol', data: 'name',
render: function(d, type, row) {
return (type === 'display') ? sessNameCellHtml(row) : row.name; } },
{ title: 'Assembly', data: 'db',
render: function(d, type, row) {
if (type !== 'display') { return row.db || ''; }
var html = sessEnc(row.db || 'n/a');
// Region: band, locus (gene) and the position shortened to Mbp, so it all fits.
var region = [];
if (row.band) { region.push(sessEnc(row.band)); }
if (row.locus) { region.push(sessEnc(row.locus)); }
if (row.position) { region.push(sessEnc(sessMbpPos(row.position))); }
if (region.length) {
html += ' ' + region.join(' ') + '';
}
return html; } },
{ title: 'Created', data: 'createdEpoch',
render: function(d, type, row) {
return (type === 'display') ?
'' +
sessEnc(row.created) + '' : row.createdEpoch; } },
{ title: 'Last used', data: 'lastUseEpoch',
render: function(d, type, row) {
return (type === 'display') ?
'' +
sessEnc(row.lastUseDate || row.lastUse) + '' : row.lastUseEpoch; } },
{ title: 'Views', data: 'useCount',
render: function(d, type) { return (type === 'display') ? sessNum(d) : d; } },
+ { title: 'Server', data: 'server',
+ render: function(d, type, row) {
+ if (type !== 'display') { return row.server || ''; }
+ // The session lives on that server and only there. Another server's name links
+ // to its own sessions page; this one's is plain text, it is where you already
+ // are. Either way the gbNode label ("European Server") is the mouseover.
+ var label = sessEnc(row.server || ''), title = sessEnc(row.serverTitle || '');
+ if (!row.remote || !row.serverUrl) {
+ return '' + label + '';
+ }
+ return '' + label + ''; } },
{ title: 'Actions', className: 'sessActionsCol', data: null, orderable: false,
searchable: false,
render: function(d, type, row) { return (type === 'display') ? sessActionsHtml(row) : ''; } }
]
});
// Every redraw brings rows the tooltip conversion has not seen yet.
$('#sessionAppTable').on('draw.dt', sessApplyTooltips);
// Delegate the row action buttons.
$('#sessionAppTable tbody').on('click', 'button[data-act]', function() {
var act = this.getAttribute('data-act');
- var row = sessByEnc(this.getAttribute('data-enc'));
+ var row = sessByKey(this.getAttribute('data-key'));
if (!row) { return; }
if (act === 'overwrite') { sessOpenOverwrite(row); }
else if (act === 'share') { sessOpenShare(row); }
else if (act === 'edit') { sessOpenEdit(row); }
else if (act === 'delete') { sessOpenDelete(row); }
+ else if (act === 'server' && row.serverUrl) { window.location.href = row.serverUrl; }
});
// Bulk-select control: a "Select" button after the length dropdown reveals a checkbox column and
// becomes a primary "Delete all selected" button.
var selBtn = document.createElement('button');
selBtn.type = 'button';
selBtn.id = 'sessSelectBtn';
selBtn.className = 'gbPill';
selBtn.textContent = 'Select';
selBtn.title = 'Select multiple sessions to delete them at once';
document.querySelector('#sessionApp .sessToolbar').appendChild(selBtn);
$(selBtn).on('click', sessToggleSelect);
+ // Way out of select mode: without it the only exit is "Delete all selected" with nothing
+ // checked. Only shown while select mode is on.
+ var cancelBtn = document.createElement('button');
+ cancelBtn.type = 'button';
+ cancelBtn.id = 'sessSelCancelBtn';
+ cancelBtn.className = 'gbPill';
+ cancelBtn.textContent = 'Cancel';
+ cancelBtn.title = 'Leave select mode and clear the checkboxes';
+ cancelBtn.style.display = 'none';
+ document.querySelector('#sessionApp .sessToolbar').appendChild(cancelBtn);
+ $(cancelBtn).on('click', function() { sessSetSelectMode(false); });
+ // The "missing a session?" note rides along at the end of the toolbar, after the buttons, so
+ // that it does not take a line of its own above the table.
+ var note = sessMirrorNoteHtml(sessData.config);
+ if (note) {
+ document.querySelector('#sessionApp .sessToolbar').insertAdjacentHTML('beforeend', note);
+ }
// Header "select all" toggles every checkbox on the current page.
$('#sessionAppTable').on('change', '#sessSelAll', function() {
$('#sessionAppTable tbody .sessSelChk').prop('checked', this.checked);
});
// Column-header tooltips (set title, then let utils.js convert to styled mouseovers).
var tips = {
'Session': 'Click a name to load that session in the Genome Browser',
'Assembly': 'The genome assembly this session was saved on',
'Created': 'When the session was first saved',
'Last used': 'When the session was last saved or loaded',
'Views': 'How many times this session has been loaded',
'Actions': 'Overwrite with your current view, share, edit, or delete'
};
$('#sessionAppTable thead th').each(function() {
var t = tips[$(this).text().trim()];
if (t) { $(this).attr('title', t); }
});
}
$(document).ready(function() {
if (typeof hgSessionData !== 'undefined' && document.getElementById('sessionApp')) {
sessionBuild();
}
});