From 04ab2b197bcfb7ee78c5d73bec9018349010cde9 Mon Sep 17 00:00:00 2001 From: adkinsrs Date: Mon, 26 Aug 2024 10:04:04 -0400 Subject: [PATCH] More fixes related to #873 url parameters --- www/js/common.v2.js | 36 +++++++++++++++++++++------ www/js/projection.js | 58 ++++++++++++++++++-------------------------- 2 files changed, 52 insertions(+), 42 deletions(-) diff --git a/www/js/common.v2.js b/www/js/common.v2.js index ac296c84..7ecb51a0 100644 --- a/www/js/common.v2.js +++ b/www/js/common.v2.js @@ -2,6 +2,9 @@ let CURRENT_USER; let SIDEBAR_COLLAPSED = false; let SITE_PREFS = null; +// if certain legacy or shorthand URL parameters are passed, change the parameter to the new ones +const urlParams = new URLSearchParams(window.location.search); + // Handle unhandled promise rejections (general catch-all for anything that wasn't caught) // https://developer.mozilla.org/en-US/docs/Web/API/Window/unhandledrejection_event window.addEventListener("unhandledrejection", function (event) { @@ -24,7 +27,7 @@ document.addEventListener('DOMContentLoaded', () => { const logoSmall = document.getElementById('navbar-logo-small'); logoSmall.src = "/img/by_domain/" + SITE_PREFS.domain_label + "/logo-main-small.png" - + // Load analytics const head = document.getElementsByTagName('head')[0]; const ga_script = document.createElement('script'); @@ -255,19 +258,36 @@ const getDomainPreferences = async () => { return response.json(); } + /** - * Retrieves the value of a URL parameter. - * @param {string} sParam - The name of the parameter to retrieve. - * @returns {string|null} - The value of the parameter, or null if it doesn't exist. + * Retrieves the value of a specified URL parameter. + * + * @param {string} sParam - The name of the URL parameter. + * @param {URLSearchParams} [urlParams=null] - Optional URLSearchParams object to parse. + * @returns {string|null} - The value of the URL parameter, or null if it doesn't exist. */ -const getUrlParameter = (sParam) => { - const urlParams = new URLSearchParams(window.location.search); - if (urlParams.has(sParam)) { - return urlParams.get(sParam); +const getUrlParameter = (sParam, urlParams=null) => { + const params = urlParams || new URLSearchParams(window.location.search); + if (params.has(sParam)) { + return params.get(sParam); } return null; } +/** + * Rebinds a URL parameter to a new parameter name. + * + * @param {string} oldParam - The old parameter name to be replaced. + * @param {string} newParam - The new parameter name to replace the old parameter. + * @returns {URLSearchParams} - The updated URLSearchParams object. + */ +const rebindUrlParam = (oldParam, newParam) => { + if (urlParams.has(oldParam)) { + urlParams.set(newParam, urlParams.get(oldParam)); + urlParams.delete(oldParam); + } +} + /** * Opens a modal by adding the 'is-active' class to the specified element. * @param {HTMLElement} $el - The element to open as a modal. diff --git a/www/js/projection.js b/www/js/projection.js index fdf7ec89..1aa1b6c7 100644 --- a/www/js/projection.js +++ b/www/js/projection.js @@ -72,20 +72,11 @@ const handlePageSpecificLoginUIUpdates = async (event) => { datasetShareId = getUrlParameter('share_id'); layoutShareId = getUrlParameter('layout_id'); - // if certain legacy or shorthand URL parameters are passed, change the parameter to the new ones - const urlParams = new URLSearchParams(window.location.search); - const rebindUrlParam = (oldParam, newParam) => { - if (urlParams.has(oldParam)) { - urlParams.set(newParam, urlParams.get(oldParam)); - urlParams.delete(oldParam); - } - } - // There are some shorthand URL parameters (not on the shorthand URL) that need to be converted to the longform rebindUrlParam("multi", "multipattern_plots"); rebindUrlParam("c", "projection_source"); rebindUrlParam("ptrns", "projection_patterns"); - rebindUrlParam("algo", "projection_algo"); + rebindUrlParam("algo", "projection_algorithm"); selectedPattern = createSelectedPatternProxy(selectedPattern); @@ -124,10 +115,9 @@ const handlePageSpecificLoginUIUpdates = async (event) => { tilegrid = await setupTileGridFn; // auto-select the first pattern in the list - const first_pattern = document.getElementsByClassName('pattern-result-list-item'); - if (!isMulti && first_pattern) { - - first_pattern.click(); + const firstPattern = document.querySelector('.pattern-result-list-item'); + if (!isMulti && firstPattern) { + firstPattern.click(); } } catch (error) { @@ -144,21 +134,6 @@ const handlePageSpecificLoginUIUpdates = async (event) => { history.pushState(null, '', url); }); - // Change the svg scoring method when select element is changed - document.getElementById('svg-scoring-method').addEventListener('change', (event) => { - if (isMulti) return; // multi does not use this - - svgScoringMethod = event.target.value; - // Get pattern symbol from currently selected list item - let listItem = document.querySelector('.pattern-result-list-item.is-selected'); - if (!listItem) { - listItem = document.querySelector('.pattern-result-list-item'); - } - - const pattern = listItem.textContent; - selectPatternWeightResult(pattern); - }); - // Wait until all pending API calls have completed before checking if we need to search document.getElementById("submit-projection-search").classList.add("is-loading"); try { @@ -198,7 +173,7 @@ const handlePageSpecificLoginUIUpdates = async (event) => { if (urlParamsPassed) { if ((datasetShareId || selected_dc_share_id) && selectedPattern.shareId !== null && selectedPattern.selectedWeights.length > 0) { - document.querySelector('#submit-projection-search').click(); + document.getElementById('submit-projection-search').click(); } } @@ -304,14 +279,14 @@ const populatePatternResultsList = () => { const parsePatternCartURLParams = async () => { // if projection algorithm is passed, set it in #algorithm - const projectionAlgorithm = getUrlParameter('projection_algorithm'); + const projectionAlgorithm = getUrlParameter('projection_algorithm', urlParams); if (projectionAlgorithm) { document.getElementById('algorithm').value = projectionAlgorithm; } // single or multiple pattern view (convert to boolean)? // NOTE: This will be adjusted if the pattern only has one weight - const isMultiParam = getUrlParameter('multipattern_plots'); + const isMultiParam = getUrlParameter('multipattern_plots', urlParams); isMulti = isMultiParam === '1'; if (isMulti) { document.getElementById('single-multi-multi').checked = true; @@ -320,7 +295,7 @@ const parsePatternCartURLParams = async () => { } // handle passed pattern lists - const pattern = getUrlParameter('projection_source') + const pattern = getUrlParameter('projection_source', urlParams); if (!pattern) { return; } @@ -340,7 +315,7 @@ const parsePatternCartURLParams = async () => { const labels = Array.from(rows).map((row) => row.dataset.label); // handle manually-entered pattern symbols - const urlWeights = getUrlParameter('projection_patterns'); + const urlWeights = getUrlParameter('projection_patterns', urlParams); if (urlWeights) { // Cannot have weights without a source pattern const urlLabels = urlWeights.split(','); @@ -534,3 +509,18 @@ document.getElementById('btn-view-weighted-genes').addEventListener('click', (ev tab.document.write(htmlStream); tab.document.close(); }); + +// Change the svg scoring method when select element is changed +document.getElementById('svg-scoring-method').addEventListener('change', (event) => { + if (isMulti) return; // multi does not use this + + svgScoringMethod = event.target.value; + // Get pattern symbol from currently selected list item + let listItem = document.querySelector('.pattern-result-list-item.is-selected'); + if (!listItem) { + listItem = document.querySelector('.pattern-result-list-item'); + } + + const pattern = listItem.textContent; + selectPatternWeightResult(pattern); +});