From 50b289eef562a494ab300d1f03793946db4cd260 Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 26 Nov 2024 13:30:45 +0100 Subject: [PATCH 01/14] wc: Open app home when clicking on the app name in the secondary bar #TASK-7216 #TASK-7100 --- src/webcomponents/commons/layout/layout-secondary-bar.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/webcomponents/commons/layout/layout-secondary-bar.js b/src/webcomponents/commons/layout/layout-secondary-bar.js index c0c8a009b..c5762ede7 100644 --- a/src/webcomponents/commons/layout/layout-secondary-bar.js +++ b/src/webcomponents/commons/layout/layout-secondary-bar.js @@ -37,10 +37,10 @@ export default class LayoutSecondaryBar extends LitElement { render() { return html`
-
+ ${this.app.name || "-"} -
+ From d507ef48b3a59638ac6a9bd2526206a3b4667bfd Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 26 Nov 2024 13:31:36 +0100 Subject: [PATCH 02/14] iva-app: Fix updating url when changing active study #TASK-7216 #TASK-7100 --- src/sites/iva/iva-app.js | 34 +++++++++++++--------------------- 1 file changed, 13 insertions(+), 21 deletions(-) diff --git a/src/sites/iva/iva-app.js b/src/sites/iva/iva-app.js index 4c0bf0d5a..60d4b23a2 100644 --- a/src/sites/iva/iva-app.js +++ b/src/sites/iva/iva-app.js @@ -820,34 +820,26 @@ class IvaApp extends LitElement { lastStudy: studyFqn }); - // 2. Set the new Hash URL - const hashItems = window.location.hash.replace(/^#/, "").split("/"); + // 2. set the new Hash URL + const [hashFragments, hashQuery] = window.location.hash.replace("#", "").split("?"); + const hashItems = hashFragments.split("/"); + let newHashFragmentUrl = ""; + // 2.1. If the hash fragment only contains one or three items, it is a single tool URL if (hashItems.length === 1 || hashItems.length === 3) { - window.location.hash = `${hashItems[0]}/${this.opencgaSession.project.id}/${this.opencgaSession.study.id}`; + newHashFragmentUrl = `${hashItems[0]}/${this.opencgaSession.project.id}/${this.opencgaSession.study.id}`; } - // 2.2 if the hash fragment contains two or more than three items, it is an app/tool URL - else if (hashItems.length === 1 || hashItems.length > 3) { + + // 2.2 if the hash fragment contains two or four items, it is an app/tool URL + else if (hashItems.length === 2 || hashItems.length === 4) { // NOTE: if we change current sudy in the interpreter, we must remove the clinical analysis id from the hash fragment // and redirect to case portal const tool = hashItems[1] !== "interpreter" ? hashItems[1] : "clinical-analysis-portal"; - let newHashFragmentUrl = `${hashItems[0]}/${tool}/${this.opencgaSession.project.id}/${this.opencgaSession.study.id}`; - // add the rest of the items to the hash fragment - if (hashItems.length > 4 && hashItems[1] !== "interpreter") { - for (let i = 4; i < hashItems.length; i++) { - newHashFragmentUrl += "/" + hashItems[i]; - } - } - window.location.hash = newHashFragmentUrl; + newHashFragmentUrl = `${hashItems[0]}/${tool}/${this.opencgaSession.project.id}/${this.opencgaSession.study.id}`; } - // let newHashFragmentUrl = this.tool !== "#interpreter" ? this.tool : "#clinicalAnalysisPortal"; - // if (this.opencgaSession?.project) { - // newHashFragmentUrl += "/" + this.opencgaSession.project.id; - // if (this.opencgaSession.study) { - // newHashFragmentUrl += "/" + this.opencgaSession.study.id; - // } - // } - // window.location.hash = newHashFragmentUrl; + + // 2.3. reset hash including queries (if any) + window.location.hash = newHashFragmentUrl + (hashQuery ? `?${hashQuery}` : ""); // 3. Reset queries from old studies this.queries = {}; From 95222021c8f6db069faea8c37af46687f643300c Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 26 Nov 2024 13:33:13 +0100 Subject: [PATCH 03/14] iva-app: Remove unused method changeTool from iva-app #TASK-7216 #TASK-7100 --- src/sites/iva/iva-app.js | 22 ---------------------- 1 file changed, 22 deletions(-) diff --git a/src/sites/iva/iva-app.js b/src/sites/iva/iva-app.js index 60d4b23a2..ccd79cd9a 100644 --- a/src/sites/iva/iva-app.js +++ b/src/sites/iva/iva-app.js @@ -713,27 +713,6 @@ class IvaApp extends LitElement { } } - changeTool(e) { - // prevents the hash change to "#" and allows to manipulate the hash fragment as needed - // e.preventDefault(); - - // const target = e.currentTarget; - // $(".navbar-zetta ul > li > a", this).removeClass("active"); - // $(target).addClass("active"); - // if ($(target).closest("ul").hasClass("dropdown-menu")) { - // $(target).closest("ul").closest("li > a").addClass("active"); - // } - - // if (target?.attributes?.href) { - // this.tool = target.attributes.href.value; - // } else { - // this.tool = "#home"; - // } - - // // this.renderHashFragments(); - // this.hashFragmentListener(); - } - hashFragmentListener() { console.log("HASH_LISTENER", window.location.hash); this.app = null; @@ -2037,7 +2016,6 @@ class IvaApp extends LitElement { .opencgaSession="${this.opencgaSession}" .config="${this.config}" @logout="${() => this.logout()}" - @changeTool="${e => this.changeTool(e.detail.value)}" @studySelect="${e => this.onStudySelect(e.detail.event, e.detail.study)}" @jobSelected="${e => this.onJobSelected(e)}"> From 62fa787718788abd1c02b26c78841db20e91be00 Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 26 Nov 2024 13:35:03 +0100 Subject: [PATCH 04/14] wc: Remove unused property loggedIn from primary bar #TASK-7216 #TASK-7100 --- src/webcomponents/commons/layout/layout-primary-bar.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/webcomponents/commons/layout/layout-primary-bar.js b/src/webcomponents/commons/layout/layout-primary-bar.js index 293d16f41..ba12794d1 100644 --- a/src/webcomponents/commons/layout/layout-primary-bar.js +++ b/src/webcomponents/commons/layout/layout-primary-bar.js @@ -18,9 +18,6 @@ export default class LayoutPrimaryBar extends LitElement { opencgaSession: { type: Object }, - loggedIn: { - type: Boolean - }, app: { type: Object }, From 71a850eb3dab59f1669c8223cdca6d5284940788 Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 26 Nov 2024 13:38:19 +0100 Subject: [PATCH 05/14] wc: Fix condition to check if tool is active in secondary bar #TASK-7216 #TASK-7100 --- src/webcomponents/commons/layout/layout-secondary-bar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webcomponents/commons/layout/layout-secondary-bar.js b/src/webcomponents/commons/layout/layout-secondary-bar.js index c5762ede7..20fbc012e 100644 --- a/src/webcomponents/commons/layout/layout-secondary-bar.js +++ b/src/webcomponents/commons/layout/layout-secondary-bar.js @@ -22,7 +22,7 @@ export default class LayoutSecondaryBar extends LitElement { } renderTool(tool) { - const active = this.currentUrl.startsWith(`#${tool.id}`); + const active = this.currentUrl.startsWith(`#${this.app.id}/${tool.id}`); return html`
  • From 1de64cb916c9c34a17bffd42620572c297aaff60 Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 26 Nov 2024 13:41:19 +0100 Subject: [PATCH 06/14] iva-app: Remove unused methods and commented code #TASK-7216 #TASK-7100 --- src/sites/iva/iva-app.js | 104 +-------------------------------------- 1 file changed, 1 insertion(+), 103 deletions(-) diff --git a/src/sites/iva/iva-app.js b/src/sites/iva/iva-app.js index ccd79cd9a..3f081227d 100644 --- a/src/sites/iva/iva-app.js +++ b/src/sites/iva/iva-app.js @@ -181,18 +181,6 @@ class IvaApp extends LitElement { this.hashFragmentListener(); }; - // Remember the tool that was previously set - // this.tool = window.location.hash.split("/")[0]; - // if (UtilsNew.isEmpty(this.tool)) { - // this.tool = "#home"; - // // this.app = null; - // } - - // Go to the page that tool has - // if (window.location.hash !== this.tool) { - // window.location.hash = this.tool; - // } - // Notifications this.notificationManager = new NotificationManager({}); @@ -620,35 +608,6 @@ class IvaApp extends LitElement { window.clearInterval(this.intervalCheckSession); } - // async saveLastStudy(newStudy) { - // const userConfig = await this.opencgaClient.updateUserConfig({ - // ...this.opencgaSession.user.configs.IVA, - // lastStudy: newStudy.fqn - // }); - // this.opencgaSession.user.configs.IVA = userConfig.responses[0].results[0]; - // } - - // onUrlChange(e) { - // let hashFrag = e.detail.id; - // if (UtilsNew.isNotUndefined(this.opencgaSession.project) && UtilsNew.isNotEmpty(this.opencgaSession.project.alias)) { - // - // hashFrag += "/" + this.opencgaSession.project.alias; - // if (UtilsNew.isNotUndefined(this.opencgaSession.study) && UtilsNew.isNotEmpty(this.opencgaSession.study.alias)) { - // hashFrag += "/" + this.opencgaSession.study.alias; - // } - // } - // - // const myQueryParams = []; - // for (const key in e.detail.query) { - // myQueryParams.push(key + "=" + e.detail.query[key]); - // } - // if (myQueryParams.length > 0) { - // hashFrag += `?${myQueryParams.join("&")}`; - // } - // - // window.location.hash = hashFrag; - // } - // TODO: we should move this code to an OpenCGA Utils checkSessionActive() { // We check if refresh token has updated session id cookie @@ -851,26 +810,6 @@ class IvaApp extends LitElement { } } - // updateProject(e) { - // this.project = this.projects.find(project => project.name === e.detail.project.name); - // // this.tool = "#project"; - // this.renderHashFragments("project"); - // // this.renderBreadcrumb(); - // } - - // updateStudy(e) { - // if (e.detail.project?.name) { - // this.project = e.detail.project; - // } - // this.study = this.project.studies.find(study => study.name === e.detail.study.name); - // - // // TODO: Opencga study will be shown later. For now variant browser is shown when the study changes - // // this.tool = "studyInformation"; - // // this.tool = "#variant-browser"; - // this.renderHashFragments("variant-browser"); - // // this.renderBreadcrumb(); - // } - onSampleChange(e) { // if (UtilsNew.isNotUndefinedOrNull(this.samples) && UtilsNew.isNotUndefinedOrNull(e.detail)) { // this.samples = e.detail.samples; @@ -879,22 +818,6 @@ class IvaApp extends LitElement { // } } - // quickSearch(e) { - // this.tool = "#variant-browser"; - // window.location.hash = "variant-browser/" + this.opencgaSession.project.id + "/" + this.opencgaSession.study.id; - // // this.browserQuery = {xref: e.detail.value}; - // - // this.browserSearchQuery = e.detail; - // } - - // quickFacetSearch(e) { - // console.log("IVA-APP quickfacetsearch"); - // this.tool = "#facet"; - // window.location.hash = "facet/" + this.opencgaSession.project.id + "/" + this.opencgaSession.study.id; - // // this.browserQuery = {xref: e.detail.value}; - // this.browserSearchQuery = e.detail; - // } - onJobSelected(e) { this.jobSelected = e.detail.jobId; this.requestUpdate(); @@ -925,17 +848,6 @@ class IvaApp extends LitElement { this.clinicalAnalysis = e.detail.clinicalAnalysis; } - onChangeApp(appId) { - // If an App ID exists we display the corresponding app. If not we just show the Suite - if (appId) { - this.app = this.config.apps.find(app => app.id === appId); - } else { - this.app = this.getActiveAppConfig(); - } - // force to redirect to the home page - window.location.hash = "home"; - } - getActiveAppConfig() { const visibleApps = this.config.apps.filter(app => app.visibility === "public"); // If there is only ona visible App we DO NOT need to show the Suite welcome, just the App. @@ -959,18 +871,6 @@ class IvaApp extends LitElement { return !!this?.opencgaSession?.token; } - // createAboutLink(link, button) { - // const url = link.url ? `${link.url}` : `#${link.id}`; - // const iconHtml = link.icon ? html`` : null; - // if (link.url) { - // return html` - // ${iconHtml} ${link.name}`; - // } else { - // return html` - // ${iconHtml} ${link.name}`; - // } - // } - onSessionUpdateRequest() { NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_SUCCESS, { title: "Refresh Session: Session Update Request", @@ -1058,8 +958,7 @@ class IvaApp extends LitElement { .app="${this.app}" .config="${this.config}" .opencgaSession="${this.opencgaSession}" - .version="${this.config.version}" - @changeApp="${e => this.onChangeApp(e.detail.e, false)}"> + .version="${this.config.version}">
    • `; @@ -2012,7 +1911,6 @@ class IvaApp extends LitElement { Date: Tue, 26 Nov 2024 13:42:26 +0100 Subject: [PATCH 07/14] iva-app: Fix event listening to hash changes #TASK-7216 #TASK-7100 --- src/sites/iva/iva-app.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/sites/iva/iva-app.js b/src/sites/iva/iva-app.js index 3f081227d..4cf1f12af 100644 --- a/src/sites/iva/iva-app.js +++ b/src/sites/iva/iva-app.js @@ -175,11 +175,9 @@ class IvaApp extends LitElement { this.tool = "#home"; // We need to listen to hash fragment changes to update the URL - window.onhashchange = e => { - // e.preventDefault(); - console.log("URL Hash changed: ", e); + window.addEventListener("hashchange", () => { this.hashFragmentListener(); - }; + }); // Notifications this.notificationManager = new NotificationManager({}); From 7394bdeb69f329a6c710b0ff7cbde2ba67bcb99b Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 26 Nov 2024 13:51:13 +0100 Subject: [PATCH 08/14] iva-app: Add opencgaSession property to sidebar component #TASK-7216 #TASK-7100 --- src/sites/iva/iva-app.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/sites/iva/iva-app.js b/src/sites/iva/iva-app.js index 4cf1f12af..fd43256ce 100644 --- a/src/sites/iva/iva-app.js +++ b/src/sites/iva/iva-app.js @@ -1919,6 +1919,7 @@ class IvaApp extends LitElement {
    From 39c8ea1494ebc79dedd0df9de1877e0e86da6648 Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 26 Nov 2024 13:51:34 +0100 Subject: [PATCH 09/14] wc: Initial implementation of favourites in sidebar #TASK-7216 #TASK-7100 --- .../commons/layout/layout-sidebar.js | 45 +++++++++++++------ 1 file changed, 32 insertions(+), 13 deletions(-) diff --git a/src/webcomponents/commons/layout/layout-sidebar.js b/src/webcomponents/commons/layout/layout-sidebar.js index 5972112e8..fafe0f66c 100644 --- a/src/webcomponents/commons/layout/layout-sidebar.js +++ b/src/webcomponents/commons/layout/layout-sidebar.js @@ -4,6 +4,7 @@ export default class LayoutSidebar extends LitElement { constructor() { super(); + this.#init(); } createRenderRoot() { @@ -12,15 +13,22 @@ export default class LayoutSidebar extends LitElement { static get properties() { return { + opencgaSession: { + type: Object, + }, currentUrl: { type: String, }, config: { - type: Object - } + type: Object, + }, }; } + #init() { + this._config = this.getDefaultConfig(); + } + renderSectionSeparator(text) { return html`
    ${text}
    `; } @@ -49,6 +57,8 @@ export default class LayoutSidebar extends LitElement { } render() { + // TODO: get favourites from user configuration + const favourites = this._config.favourites; return html`
    @@ -58,20 +68,20 @@ export default class LayoutSidebar extends LitElement { ${this.renderSectionSeparator("Apps")} ${this.config.apps.map(app => this.renderButton(app))} `: nothing} -
    + ${favourites.length > 0 ? html` +
    +
    + +
    Favourites
    +
    +
    + ${favourites.map(link => this.renderLink(link))} +
    +
    + ` : nothing} ${this.config?.about?.dropdown && this.config?.about?.links?.length > 0 ? html`
    @@ -95,6 +105,15 @@ export default class LayoutSidebar extends LitElement { `; } + getDefaultConfig() { + return { + favourites: [ + {id: "file-data-manager", name: "File Data Manager"}, + {id: "workflow-manager", name: "Workflow Manager"}, + ], + }; + } + } customElements.define("layout-sidebar", LayoutSidebar); From 273e2822c10dbed52b4fb30062e1226503f08518 Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 26 Nov 2024 13:53:46 +0100 Subject: [PATCH 10/14] wc: Remove favourites from primary bar and add notifications button #TASK-7216 #TASK-7100 --- .../commons/layout/layout-primary-bar.js | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/src/webcomponents/commons/layout/layout-primary-bar.js b/src/webcomponents/commons/layout/layout-primary-bar.js index ba12794d1..df20f3f22 100644 --- a/src/webcomponents/commons/layout/layout-primary-bar.js +++ b/src/webcomponents/commons/layout/layout-primary-bar.js @@ -93,16 +93,6 @@ export default class LayoutPrimaryBar extends LitElement {
    ${this.renderStudiesDropdown()} - - - - ${this.renderSeparator()}
    +
    + +
    From 123ae7a23d180a0f1b3db79658868e8e1a1cc34b Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 26 Nov 2024 14:15:06 +0100 Subject: [PATCH 11/14] styles: Change default background color to a light gray #TASK-7216 #TASK-7100 --- styles/jsorolla-ui.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/styles/jsorolla-ui.scss b/styles/jsorolla-ui.scss index b95660a6f..98c966d37 100644 --- a/styles/jsorolla-ui.scss +++ b/styles/jsorolla-ui.scss @@ -9,7 +9,7 @@ $spacer: 1rem; // gray color palette // https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss#L24-L34 -// $gray-50: #f9fafa; +$gray-50: #f9fafa; $gray-100: #f3f4f5; $gray-200: #d5d9dc; $gray-300: #b7bdc3; @@ -26,13 +26,18 @@ $primary: #0456C8; $warning: #cc9900; $light: $gray-100; $dark: $gray-900; +$white: #fff; -// custom border variables +// custom body configuration +$body-bg: $gray-50; + +// custom border configuration $border-color: $gray-200; $border-width: 1px; // custom configuration for dropdowns // https://getbootstrap.com/docs/5.3/components/dropdowns/#sass-variables +$dropdown-bg: $white; $dropdown-border-color: var(--bs-border-color); $dropdown-padding-x: 0.25 * $spacer; $dropdown-padding-y: 0.25 * $spacer; From 61b3eebb73046a942478d5a8c7cc02d18f3213d4 Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 26 Nov 2024 14:21:05 +0100 Subject: [PATCH 12/14] wc: Fix style of secondary bar #TASK-7216 #TASK-7100 --- src/webcomponents/commons/layout/layout-secondary-bar.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/webcomponents/commons/layout/layout-secondary-bar.js b/src/webcomponents/commons/layout/layout-secondary-bar.js index 20fbc012e..7659a8eff 100644 --- a/src/webcomponents/commons/layout/layout-secondary-bar.js +++ b/src/webcomponents/commons/layout/layout-secondary-bar.js @@ -26,7 +26,7 @@ export default class LayoutSecondaryBar extends LitElement { return html`
  • -
    +
    ${tool.name || tool.id || "-"}
    @@ -36,7 +36,7 @@ export default class LayoutSecondaryBar extends LitElement { render() { return html` -
    +
    ${this.app.name || "-"} From f4130fef5a09d1d82c71af03a006a7e6c66e6015 Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 26 Nov 2024 14:27:12 +0100 Subject: [PATCH 13/14] wc: Fix margin and padding of secondary bar #TASK-7216 #TASK-7100 --- src/webcomponents/commons/layout/layout-secondary-bar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webcomponents/commons/layout/layout-secondary-bar.js b/src/webcomponents/commons/layout/layout-secondary-bar.js index 7659a8eff..c6650b6d1 100644 --- a/src/webcomponents/commons/layout/layout-secondary-bar.js +++ b/src/webcomponents/commons/layout/layout-secondary-bar.js @@ -36,7 +36,7 @@ export default class LayoutSecondaryBar extends LitElement { render() { return html` -
    +
    ${this.app.name || "-"} From 87d30a12fe2701705316a0c9bb0ff8131f31f4b1 Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 26 Nov 2024 14:29:36 +0100 Subject: [PATCH 14/14] wc: Fix sidebar styles #TASK-7216 #TASK-7100 --- src/webcomponents/commons/layout/layout-sidebar.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/webcomponents/commons/layout/layout-sidebar.js b/src/webcomponents/commons/layout/layout-sidebar.js index fafe0f66c..aaa1000f5 100644 --- a/src/webcomponents/commons/layout/layout-sidebar.js +++ b/src/webcomponents/commons/layout/layout-sidebar.js @@ -47,7 +47,7 @@ export default class LayoutSidebar extends LitElement { const active = this.currentUrl.startsWith(`#${app.id}`); // url always start with the app ID return html` @@ -60,7 +60,7 @@ export default class LayoutSidebar extends LitElement { // TODO: get favourites from user configuration const favourites = this._config.favourites; return html` -
    +
    ${this.renderButton({id: "dashboard", name: "Dashboard", icon: "fa-home"})} @@ -73,7 +73,7 @@ export default class LayoutSidebar extends LitElement {
    ${favourites.length > 0 ? html`
    -
    +
    Favourites
    @@ -84,7 +84,7 @@ export default class LayoutSidebar extends LitElement { ` : nothing} ${this.config?.about?.dropdown && this.config?.about?.links?.length > 0 ? html`
    -
    +
    About
    @@ -94,7 +94,7 @@ export default class LayoutSidebar extends LitElement {
    ` : nothing}
    -
    +