Skip to content

Commit

Permalink
core: add initial jupyter-notebook component
Browse files Browse the repository at this point in the history
  • Loading branch information
imedina committed Dec 3, 2024
1 parent 85da7ef commit 3b74c9a
Show file tree
Hide file tree
Showing 6 changed files with 204 additions and 34 deletions.
30 changes: 15 additions & 15 deletions src/core/clients/opencga/opencga-client.js
Original file line number Diff line number Diff line change
Expand Up @@ -511,21 +511,21 @@ export class OpenCGAClient {

// Fetch the Workflows for each Study
console.log("Fetching Workflows");
const workflowPromises = [];
for (const study of studies) {
const promise = this.workflows()
.search({
study: study,
limit: 1000,
});
workflowPromises.push(promise);
}
const workflowResponses = await Promise.all(workflowPromises);
for (let i = 0, t = 0; i < session.projects.length; i++) {
for (let x = 0; x < session.projects[i].studies.length; x++, t++) {
session.projects[i].studies[x].workflows = workflowResponses[t].getResults();
}
}
// const workflowPromises = [];
// for (const study of studies) {
// const promise = this.workflows()
// .search({
// study: study,
// limit: 1000,
// });
// workflowPromises.push(promise);
// }
// const workflowResponses = await Promise.all(workflowPromises);
// for (let i = 0, t = 0; i < session.projects.length; i++) {
// for (let x = 0; x < session.projects[i].studies.length; x++, t++) {
// session.projects[i].studies[x].workflows = workflowResponses[t].getResults();
// }
// }
}
resolve(session);
} catch (e) {
Expand Down
14 changes: 7 additions & 7 deletions src/sites/iva/conf/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const hosts = [
},
{
id: "reference",
url: "https://test.app.zettagenomics.com/TASK-6445/opencga"
url: "https://test.app.zettagenomics.com/TASK-6757a/opencga"
},
];

Expand Down Expand Up @@ -521,16 +521,16 @@ const SUITE = {
about: {
dropdown: true,
links: [
{id: "code", name: "Source code", url: "https://github.com/opencb/iva", icon: "fa fa-code"},
{id: "documentation", name: "Documentation", url: "http://docs.opencb.org/display/iva", icon: "fa fa-book"},
{id: "tutorial", name: "Tutorial", url: "http://docs.opencb.org/display/iva/Tutorials", icon: "fa fa-question-circle"},
{id: "releases", name: "Releases", url: "https://github.com/opencb/iva/releases", icon: "fa fa-archive"},
// {id: "code", name: "Source code", url: "https://github.com/opencb/iva", icon: "fa fa-code"},
// {id: "documentation", name: "Documentation", url: "http://docs.opencb.org/display/iva", icon: "fa fa-book"},
// {id: "tutorial", name: "Tutorial", url: "http://docs.opencb.org/display/iva/Tutorials", icon: "fa fa-question-circle"},
// {id: "releases", name: "Releases", url: "https://github.com/opencb/iva/releases", icon: "fa fa-archive"},
{id: "about", name: "About", url: "#about", icon: "fa fa-info-circle"},
{id: "terms", name: "Terms", url: "#terms", icon: "fa fa-file-alt"},
{id: "contact", name: "Contact", url: "#contact", icon: "fa fa-envelope"},
{id: "faq", name: "FAQ", url: "#faq", icon: "fa fa-question"},
{id: "rest-api", name: "OpenCGA REST API", icon: "fas fa-book-open"},
{id: "getting-started", name: "Getting Started", tab: false, url: "#getting-started", icon: "fa fa-book"}
// {id: "rest-api", name: "OpenCGA REST API", icon: "fas fa-book-open"},
// {id: "getting-started", name: "Getting Started", tab: false, url: "#getting-started", icon: "fa fa-book"}
]
},
fileExplorer: {
Expand Down
8 changes: 8 additions & 0 deletions src/sites/iva/iva-app.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ import "../../webcomponents/user/user-profile.js";
import "../../webcomponents/api/rest-api.js";
import "../../webcomponents/note/note-browser.js";
import "../../webcomponents/commons/analysis/analysis-tools.js";
import "../../webcomponents/commons/analysis/jupyter-notebook.js";

import "../../webcomponents/commons/layouts/custom-footer.js";
import "../../webcomponents/commons/layouts/custom-navbar.js";
Expand Down Expand Up @@ -1606,6 +1607,13 @@ class IvaApp extends LitElement {
</analysis-tools>
`;
break;
case "jupyter-notebook":
content = html`
<jupyter-notebook
.opencgaSession="${this.opencgaSession}">
</jupyter-notebook>
`;
break;
default:
// TODO: check for extensions
// ExtensionsManager.getTools().map(tool => html`
Expand Down
106 changes: 106 additions & 0 deletions src/webcomponents/commons/analysis/jupyter-notebook.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
/*
* Copyright 2015-2016 OpenCB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import {LitElement, html} from "lit";
import UtilsNew from "../../../core/utils-new.js";
import {guardPage} from "../html-utils.js";
import "../../text-icon.js";
import "./opencga-analysis-tool-form.js";

export default class JupyterNotebook extends LitElement {

constructor() {
super();

this._init();
}

createRenderRoot() {
return this;
}

static get properties() {
return {
opencgaSession: {
type: Object
},
config: {
type: Object
}
};
}

_init() {
this._prefix = UtilsNew.randomString(8);
}

connectedCallback() {
super.connectedCallback();
}

update(changedProperties) {
if (changedProperties.has("config")) {
this._config = {
...this.config
};
// this.requestUpdate();
}
super.update(changedProperties);
}

onAnalysisRun(e) {
// Execute function provided in the configuration
/* if (this.analysisClass.execute) {
this.analysisClass.execute(this.opencgaSession, e.detail.data, e.detail.params);
} else {
console.error(`No execute() function provided for analysis: ${this._config.id}`)
}*/

// TODO NOTE onAnalysisRun at the moment just forwards the `analysisRun` event fired in opencga-analysis-tool-form
this.dispatchEvent(new CustomEvent("execute", {
detail: e.detail
}));
}

render() {
// Check Project exists
if (!this.opencgaSession.study) {
return guardPage("No OpenCGA study available to run an analysis. Please login to continue.");
}

const userId = this.opencgaSession.user.id;
const organizationId = this.opencgaSession.organization.id;
const serverUrl = this.opencgaSession.server.host.replace("/opencga", "");
const jupyterLoginUrl = serverUrl + "/jupyter/hub/login";
const token = this.opencgaSession.token;
debugger
return html`
<div class="opencga-analysis-tool">
</div>
<div class="m-4">
<iframe src="https://test.app.zettagenomics.com/task-6757a/jupyter/hub/login?userId=${userId}&organizationId=${organizationId}&opencgaUrl=${serverUrl}&logoutUrl=https:%2F%2Fwww.google.com&token=${token}"
width="1440" height="800">
</iframe>
</div>
`;
}

}

customElements.define("jupyter-notebook", JupyterNotebook);
69 changes: 60 additions & 9 deletions src/webcomponents/commons/layout/layout-primary-bar.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

import {html, LitElement, nothing} from "lit";
import UtilsNew from "../../../core/utils-new.js";
import LitUtils from "../utils/lit-utils.js";
Expand Down Expand Up @@ -30,6 +31,16 @@ export default class LayoutPrimaryBar extends LitElement {
};
}

onSearch(e) {
const value = document.querySelector("#PrimaryBarInputSearch")?.value;
if (value?.length > 3) {
// if (value.include(":")) {
//
// }
}
debugger
}

onStudySelect(e, study) {
LitUtils.dispatchCustomEvent(this, "studySelect", "", {event: e, study: study}, null);
}
Expand Down Expand Up @@ -74,7 +85,6 @@ export default class LayoutPrimaryBar extends LitElement {
`)}
</div>
</div>
${this.renderSeparator()}
`;
}
return nothing;
Expand All @@ -85,14 +95,57 @@ export default class LayoutPrimaryBar extends LitElement {
<nav class="bg-gray-900 py-2">
<div class="container-fluid d-flex">
<div class="d-flex align-items-center gap-3 me-auto">
<a href="#home">
${this.config?.logo ? html`
<img src="${this.config?.logo}" height="20px" alt="logo">
` : nothing}
</a>
<div class="d-flex">
<a href="#home">
${this.config?.logo ? html`
<img src="${this.config?.logo}" height="20px" alt="logo">
` : nothing}
</a>
</div>
</div>
<div class="d-flex align-items-stretch gap-2 ms-auto">
<div class="input-group">
<div class="input-group-text" id="btnGroupAddon">
<i class="fas fa-search" aria-hidden="true"></i>
</div>
<input
id="PrimaryBarInputSearch"
type="text"
class="form-control"
placeholder="Search ..."
aria-label="Input group example" aria-describedby="btnGroupAddon"
style="width: 240px;"
@input="${this.onSearch}">
</div>
</div>
<div class="d-flex align-items-stretch gap-2 ms-auto">
${this.renderStudiesDropdown()}
${this.renderSeparator()}
<div class="d-flex">
<a href="#research/file-data-manager" class="d-flex align-items-center btn border border-gray-700 hover:bg-gray-800 text-white">
<i class="fas fa-folder lh-1"></i>
</a>
</div>
<div class="d-flex">
<a href="#research/workflow-manager" class="d-flex align-items-center btn border border-gray-700 hover:bg-gray-800 text-white">
<i class="fas fa-project-diagram lh-1"></i>
</a>
</div>
<div class="d-flex">
<a href="#research/jupyter-notebook" class="d-flex align-items-center btn border border-gray-700 hover:bg-gray-800 text-white">
<i class="fas fa-file-code lh-1"></i>
</a>
</div>
<div class="d-flex">
<a href="#rest-api" class="d-flex align-items-center btn border border-gray-700 hover:bg-gray-800 text-white">
<i class="fas fa-code lh-1"></i>
</a>
</div>
${this.renderSeparator()}
<div class="d-flex dropdown">
<button class="d-flex gap-1 align-items-center btn border border-gray-700 hover:bg-gray-800 text-white" data-bs-toggle="dropdown">
<i class="fas fa-rocket lh-1"></i>
Expand All @@ -108,9 +161,7 @@ export default class LayoutPrimaryBar extends LitElement {
<i class="fas fa-bell lh-1"></i>
</button>
</div>
<a href="#rest-api" class="d-flex align-items-center btn border border-gray-700 hover:bg-gray-800 text-white">
<i class="fas fa-code lh-1"></i>
</a>
${this.renderSeparator()}
<div class="dropdown">
<button class="btn d-flex align-items-center gap-2 border border-gray-700 hover:bg-gray-800 text-white dropdown-toggle" data-bs-toggle="dropdown">
Expand Down
11 changes: 8 additions & 3 deletions src/webcomponents/commons/layout/layout-sidebar.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default class LayoutSidebar extends LitElement {
const url = link.url || `#${link.id}`;
return html`
<a class="dropdown-item" data-cy="${link.id}" href="${url}" target="${link.tab ? "_blank" : "_self"}">
${link.icon ? `` : nothing}
${link.icon ? html`<i class="fas ${link.icon} pe-1"></i>` : nothing}
<span>${link.name}</span>
</a>
`;
Expand All @@ -61,6 +61,7 @@ export default class LayoutSidebar extends LitElement {
const favourites = this._config.favourites;
return html`
<div class="d-flex flex-column justify-content-between flex-shrink-0 border-end bg-white position-relative h-full" style="width:72px">
<!-- TOP options -->
<div class="d-flex flex-column">
<div class="d-flex flex-column gap-1 user-select-none p-2">
${this.renderButton({id: "dashboard", name: "Dashboard", icon: "fa-home"})}
Expand All @@ -70,6 +71,8 @@ export default class LayoutSidebar extends LitElement {
`: nothing}
</div>
</div>
<!-- BOTTOM options -->
<div class="d-flex flex-column gap-1 px-2 py-3 mt-auto">
${favourites.length > 0 ? html`
<div class="d-flex flex-column dropup dropend">
Expand All @@ -82,6 +85,7 @@ export default class LayoutSidebar extends LitElement {
</div>
</div>
` : nothing}
${this.config?.about?.dropdown && this.config?.about?.links?.length > 0 ? html`
<div class="d-flex flex-column dropup dropend">
<div class="d-flex flex-column justify-content-center align-items-center p-2 gap-2 hover:bg-gray-100 rounded-2 cursor-pointer" data-bs-toggle="dropdown">
Expand All @@ -93,14 +97,15 @@ export default class LayoutSidebar extends LitElement {
</div>
</div>
` : nothing}
${this.config?.sidebar?.organisation ? html`
<div class="d-flex flex-column dropup dropend">
<div class="d-flex align-items-center justify-content-center gap-1 hover:bg-gray-100 py-2 rounded-2 cursor-pointer border" data-bs-toggle="dropdown">
<div class="d-flex">
<img src="${this.config?.sidebar?.organisation?.logo?.img || ""}" height="32px" />
<img src="${this.config.sidebar.organisation.logo?.img || ""}" height="32px" />
</div>
</div>
${this.config.sidebar?.organisation?.menu?.length > 0 ? html`
${this.config.sidebar.organisation.menu?.length > 0 ? html`
<div class="dropdown-menu">
${this.config.sidebar.organisation.menu.map(link => this.renderLink(link))}
</div>
Expand Down

0 comments on commit 3b74c9a

Please sign in to comment.