diff --git a/src/sites/iva/iva-app.js b/src/sites/iva/iva-app.js index 4c0bf0d5a..fd43256ce 100644 --- a/src/sites/iva/iva-app.js +++ b/src/sites/iva/iva-app.js @@ -175,23 +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(); - }; - - // 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 +606,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 @@ -713,27 +670,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; @@ -820,34 +756,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 = {}; @@ -880,26 +808,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; @@ -908,22 +816,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(); @@ -954,17 +846,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. @@ -988,18 +869,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", @@ -1087,8 +956,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}"> `; @@ -2041,11 +1909,9 @@ class IvaApp extends LitElement { @@ -2053,6 +1919,7 @@ class IvaApp extends LitElement {
diff --git a/src/webcomponents/commons/layout/layout-primary-bar.js b/src/webcomponents/commons/layout/layout-primary-bar.js index 293d16f41..df20f3f22 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 }, @@ -96,16 +93,6 @@ export default class LayoutPrimaryBar extends LitElement {
${this.renderStudiesDropdown()} - - - - ${this.renderSeparator()}
+
+ +
diff --git a/src/webcomponents/commons/layout/layout-secondary-bar.js b/src/webcomponents/commons/layout/layout-secondary-bar.js index c0c8a009b..c6650b6d1 100644 --- a/src/webcomponents/commons/layout/layout-secondary-bar.js +++ b/src/webcomponents/commons/layout/layout-secondary-bar.js @@ -22,11 +22,11 @@ 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`
  • -
    +
    ${tool.name || tool.id || "-"}
    @@ -36,11 +36,11 @@ export default class LayoutSecondaryBar extends LitElement { render() { return html` -
    -
    +
    + ${this.app.name || "-"} -
    +
      ${(this.app?.menu || []).map(tool => this.renderTool(tool))}
    diff --git a/src/webcomponents/commons/layout/layout-sidebar.js b/src/webcomponents/commons/layout/layout-sidebar.js index 5972112e8..aaa1000f5 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}
    `; } @@ -39,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` @@ -49,8 +57,10 @@ export default class LayoutSidebar extends LitElement { } render() { + // TODO: get favourites from user configuration + const favourites = this._config.favourites; return html` -
    +
    ${this.renderButton({id: "dashboard", name: "Dashboard", icon: "fa-home"})} @@ -58,23 +68,23 @@ 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`
    -
    +
    About
    @@ -84,7 +94,7 @@ export default class LayoutSidebar extends LitElement {
    ` : nothing}
    -
    +
    @@ -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); 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;