Skip to content

Commit

Permalink
wc: improvements in Research Enviroment and new study-dashboard created
Browse files Browse the repository at this point in the history
  • Loading branch information
@imedina
imedina committed Dec 4, 2024
1 parent dbb3b70 commit 5e31d0b
Show file tree
Hide file tree
Showing 6 changed files with 95 additions and 26 deletions.
44 changes: 30 additions & 14 deletions src/sites/iva/conf/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -589,7 +589,7 @@ const SUITE = {
logo: "img/iva.svg",
bottomLogo: {img: "", link: "", height: ""},
content: `
Welcome to the OpenCB Suite for whole genome variant analysis.
Welcome to the OpenCB Suite for whole genome variant analysis.
This interactive tool allows finding genes affected by deleterious variants that segregate along family pedigrees, case-controls or sporadic samples.
`,
},
Expand Down Expand Up @@ -660,8 +660,12 @@ const SUITE = {
logoWidth: "100px",
},
title: "Research Environment",
subtitle: "Explore variants in real-time and execute analysis and tools.",
content: "Welcome to the OpenCB Variant Analysis application. This interactive tool allows browse and run variant analysis.",
subtitle: "Explore variants in real-time and execute analysis.",
content: `
Variant Research Environment App implements different tools to focus on the analysis and interpretation of genomic variants
to understand their role in diseases, traits, and biological processes. It involves the use of our aggregated variant database,
bioinformatics tools, workflows, notebooks, and computational methods to identify, classify, and study variants for personalized medicine and genetic research.
`,
// links: [
// {
// title: "Documentation", url: "http://docs.opencb.org/display/iva"
Expand All @@ -675,7 +679,7 @@ const SUITE = {
icon: "fa-dna",
visibility: "public",
featured: true,
description: "Explore all variants identified by the current study.",
description: "Explore our high-performance and scalable aggregated variant database in real-time.",
},
{
id: "analysis-tools",
Expand All @@ -691,23 +695,31 @@ const SUITE = {
icon: "fa-stream",
visibility: "public",
featured: true,
description: "Manage and execute workflows in the current study.",
description: "Build, import and execute NextFlow workflows.",
},
{
id: "tool-analysis",
name: "Custom Tool",
icon: "fa-rocket",
visibility: "public",
featured: true,
description: "Execute your own custom tools easily in the cloud.",
},
{
id: "jupyter-notebook",
name: "Jupyter Notebooks",
icon: "fa-book",
visibility: "public",
featured: true,
description: "Create and execute notebooks using a Jupyter environment.",
description: "Create, share and execute Jupyter Notebooks with Python.",
},
{
id: "my-analysis",
name: "My Analysis",
icon: "fa-cog",
visibility: "public",
featured: true,
description: "Explore and manage all your analysis.",
description: "Explore and manage all your exceuted analysis.",
},
{
id: "cohort-browser",
Expand All @@ -723,7 +735,7 @@ const SUITE = {
icon: "fa-folder",
visibility: "public",
featured: true,
description: "Manage your data in OpenCGA",
description: "Manage your data in the cloud",
},
],
// fileExplorer: {
Expand Down Expand Up @@ -755,15 +767,16 @@ const SUITE = {
// },
// subtitle: "Interactive Case Interpreter",
content: `
Welcome to the OpenCB Clinical Analysis Application.
Welcome to the OpenCB Clinical Analysis Application.
This app allows clinicians to create cases, execute clinical interpretations and create clinical reports.
`,
},
menu: [
{
id: "clinical-analysis-portal",
name: "Case Interpreter Portal",
icon: "img/tools/icons/interpretation_portal.svg",
// icon: "img/tools/icons/interpretation_portal.svg",
icon: "fa-file-medical",
visibility: "public",
featured: true,
description: `
Expand All @@ -778,7 +791,8 @@ const SUITE = {
{
id: "disease-panel-browser",
name: "Disease Panels",
icon: "img/tools/icons/interpretation_portal.svg",
// icon: "img/tools/icons/interpretation_portal.svg",
icon: "fa-th-list",
visibility: "public",
featured: true,
description: `
Expand All @@ -793,7 +807,8 @@ const SUITE = {
{
id: "cvdb-browser",
name: "Clinical Variant DB",
icon: "img/tools/icons/interpretation_portal.svg",
// icon: "img/tools/icons/interpretation_portal.svg",
icon: "fa-database",
visibility: "public",
featured: true,
description: `
Expand All @@ -808,7 +823,8 @@ const SUITE = {
{
id: "clinical-configuration",
name: "Configuration",
icon: "img/tools/icons/interpretation_portal.svg",
// icon: "img/tools/icons/interpretation_portal.svg",
icon: "fa-cog",
visibility: "public",
featured: true,
description: `
Expand Down Expand Up @@ -852,7 +868,7 @@ const SUITE = {
// logo: "img/Zetta_logo.png",
// logo: "img/tools/icons/interpretation_portal.svg",
content: `
Welcome to the Data Catalog Application.
Welcome to the Data Catalog Application.
This app allows clinicians to create cases, execute clinical interpretations and create clinical reports.
`,
},
Expand Down
17 changes: 17 additions & 0 deletions src/sites/iva/iva-app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,13 +63,15 @@ import "../../webcomponents/clinical/clinical-analysis-create.js";
import "../../webcomponents/file/file-manager.js";
import "../../webcomponents/file/file-data-manager.js";
import "../../webcomponents/job/job-monitor.js";
import "../../webcomponents/job/analysis/tool-analysis.js";
import "../../webcomponents/loading-spinner.js";
import "../../webcomponents/organization/admin/organization-admin.js";
import "../../webcomponents/project/projects-admin.js";
import "../../webcomponents/study/admin/study-admin.js";
import "../../webcomponents/study/admin/study-admin-iva.js";
import "../../webcomponents/study/admin/catalog-admin.js";
import "../../webcomponents/study/admin/variant/operations-admin.js";
import "../../webcomponents/study/study-dashboard.js";
import "../../webcomponents/user/user-profile.js";
import "../../webcomponents/api/rest-api.js";
import "../../webcomponents/note/note-browser.js";
Expand Down Expand Up @@ -1606,13 +1608,28 @@ class IvaApp extends LitElement {
</analysis-tools>
`;
break;
case "tool-analysis":
content = html`
<tool-analysis
.opencgaSession="${this.opencgaSession}"
.config="${this.config.analysisTools}">
</tool-analysis>
`;
break;
case "jupyter-notebook":
content = html`
<jupyter-notebook
.opencgaSession="${this.opencgaSession}">
</jupyter-notebook>
`;
break;
case "study-dashboard":
content = html`
<study-dashboard
.opencgaSession="${this.opencgaSession}">
</study-dashboard>
`;
break;
default:
// TODO: check for extensions
// ExtensionsManager.getTools().map(tool => html`
Expand Down
17 changes: 8 additions & 9 deletions src/webcomponents/commons/analysis/jupyter-notebook.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,15 +88,14 @@ export default class JupyterNotebook extends LitElement {
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 class="p-2">
<h2>Jupyter Notebook</h2>
<div class="m-3">
<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="1600" height="720">
</iframe>
</div>
</div>
`;
}
Expand Down
2 changes: 1 addition & 1 deletion src/webcomponents/commons/layout/layout-sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export default class LayoutSidebar extends LitElement {
<!-- 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"})}
${this.renderButton({id: "study-dashboard", name: "Dashboard", icon: "fa-home"})}
${this.config?.apps?.length > 0 ? html`
${this.renderSectionSeparator("Apps")}
${this.config.apps.map(app => this.renderButton(app))}
Expand Down
4 changes: 2 additions & 2 deletions src/webcomponents/commons/pages/welcome-page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export default class WelcomePage extends LitElement {
}

return html`
<div class="container pt-5">
<div class="container pt-4">
<!-- Welcome page logo -->
${welcomePage?.logo ? html`
<div class="mb-3">
Expand Down Expand Up @@ -132,7 +132,7 @@ export default class WelcomePage extends LitElement {
<!-- Custom content -->
${welcomePage?.content ? html`
<div class="mb-5">
<div class="${welcomePage.display?.contentClass || "fs-4"}" style="${welcomePage.display?.contentStyle || "max-width:720px;"}">
<div class="${welcomePage.display?.contentClass || "fs-4"}" style="${welcomePage.display?.contentStyle || "max-width: 1200px;"}">
${UtilsNew.renderHTML(welcomePage.content)}
</div>
</div>
Expand Down
37 changes: 37 additions & 0 deletions src/webcomponents/study/study-dashboard.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import {LitElement, html, nothing} from "lit";
import UtilsNew from "../../core/utils-new.js";

export default class StudyDasboard extends LitElement {

createRenderRoot() {
return this;
}

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

render() {
return html`
<div class="container pt-3">
<h3>Fake Dashboard. Work in progress</h3>
<div>
<img src="https://c7.alamy.com/comp/2B12GXK/graphs-dashboard-infographic-data-chart-web-site-admin-panel-and-finance-charts-vector-template-2B12GXK.jpg">
</div>
</div>
`;
}

}

customElements.define("study-dashboard", StudyDasboard);

0 comments on commit 5e31d0b

Please sign in to comment.