From 2dc60856046cf6a5440d5c38b181af7e5e149b96 Mon Sep 17 00:00:00 2001
From: AndiMajore <andi.majore@googlemail.com>
Date: Fri, 11 Nov 2022 20:13:56 +0100
Subject: [PATCH] routing fix
---
src/app/app.component.ts | 4 +-
.../doc-subheader.component.html | 2 +-
src/app/pages/doc/doc.component.ts | 12 +-
src/app/pages/home/home.component.html | 171 ++++++++++--------
src/app/pages/home/home.component.ts | 4 -
.../motivation/motivation.component.html | 2 +-
.../pages/motivation/motivation.component.ts | 6 +-
src/app/pages/pages.component.html | 12 +-
.../standalone/standalone.component.html | 14 +-
.../standalone/standalone.component.ts | 18 +-
10 files changed, 139 insertions(+), 106 deletions(-)
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 90f33a9..2c10e1d 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -10,8 +10,8 @@ import { ThemeService } from 'src/app/services/theme.service';
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
- public version = "1.0.8"
- public cdnVersion = "prod/v1.0.8"
+ public version = "1.0.11"
+ public cdnVersion = "prod/v1.0.11"
public host = "https://drugst.one"
public cdn = "https://cdn.drugst.one"
public backendPath = "https://api.drugst.one/"
diff --git a/src/app/components/documentation/doc-subheader/doc-subheader.component.html b/src/app/components/documentation/doc-subheader/doc-subheader.component.html
index c16501f..8890e1d 100644
--- a/src/app/components/documentation/doc-subheader/doc-subheader.component.html
+++ b/src/app/components/documentation/doc-subheader/doc-subheader.component.html
@@ -1,4 +1,4 @@
-<a id='{{ id }}'></a>
+<!--<a id='{{ id }}'></a>-->
<h2 class='doc-subheader mt-5'>{{ text }} <span><app-git-link *ngIf="link.length>0 && !python" [link]="link"></app-git-link>
<a *ngIf="python" target="_blank" [href]="link">
<button pButton pRipple class="p-button git-btn" icon="fab fa-python" pTooltip="Open pypi page!"
diff --git a/src/app/pages/doc/doc.component.ts b/src/app/pages/doc/doc.component.ts
index aae9656..c928fd5 100644
--- a/src/app/pages/doc/doc.component.ts
+++ b/src/app/pages/doc/doc.component.ts
@@ -22,10 +22,12 @@ export class DocComponent implements OnInit {
}
ngOnInit(): void {
- }
-
- navigateToId(id: string) {
- // @ts-ignore
- this.navigationEvent(this.idMap[id]);
+ if (window.location.href.indexOf('doc#') > -1) {
+ setTimeout(() => {
+ const el = document.getElementById(window.location.href.split('#')[1])
+ // @ts-ignore
+ el.scrollIntoView()
+ }, 500)
+ }
}
}
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index e2fe5ea..db38bda 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -1,83 +1,98 @@
<div class="container">
- <div class="px-4 py-4 text-center">
- <img
- class="d-block mx-auto mb-4 home-logo"
- [src]="isDark() ? '/assets/logo_white.png' : '/assets/logo_black.png'"
- alt="drugstone logo"
- />
- <!-- <h1 class="display-5 fw-bold">Centered hero</h1> -->
- <div class="col-lg-6 mx-auto">
- <p class="lead">
- Visualize protein interactions with one click or integrate Drugst.One
- with 3 lines of code.
- <br />
- Close the link between Proteins and Drugs on your website!
- </p>
- </div>
- </div>
- <img />
- <div class="row align-items-start text-center">
- <div class="col">
- <span style="width: 360px; height: 240px"> Video coming soon </span>
- <!-- <iframe-->
- <!-- width="360"-->
- <!-- height="240"-->
- <!-- src="https://www.youtube.com/embed/ScMzIvxBSi4"-->
- <!-- title="YouTube video player"-->
- <!-- frameborder="0"-->
- <!-- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"-->
- <!-- allowfullscreen-->
- <!-- class="video"-->
- <!-- ></iframe>-->
- <div class="row">
- <p-button
- label="Integrate drugst.one"
- icon="pi pi-fw pi-th-large"
- (onClick)="switchTab('idea')"
- ></p-button>
- </div>
- </div>
- <div class="col">
- <span style="width: 360px; height: 240px"> Video coming soon </span>
- <!-- <iframe-->
- <!-- width="360"-->
- <!-- height="240"-->
- <!-- src="https://www.youtube.com/embed/oznr-1-poSU"-->
- <!-- title="YouTube video player"-->
- <!-- frameborder="0"-->
- <!-- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"-->
- <!-- allowfullscreen-->
- <!-- class="video"-->
- <!-- ></iframe>-->
+ <div class="px-4 py-4">
- <div class="row">
- <a href="/doc#basic_integration">
- <p-button
- label="Start using URL-config"
- icon="pi pi-fw pi-send"
- ></p-button>
- </a>
- </div>
+ <!-- <h1 class="display-5 fw-bold">Centered hero</h1> -->
+ <div class="row mt-10">
+ <div class="col-lg-7 col-md-12 text-lg-start text-sm-center" >
+ <img
+ class="ml-auto mr-0 mb-4 home-logo"
+ [src]="isDark() ? '/assets/logo_white.png' : '/assets/logo_black.png'"
+ alt="drugstone logo"
+ />
+ <p class="lead">
+ Give context to your result protein lists and integrate Drugst.One
+ with only 3 lines of code.
+ <br>
+ <br>
+ Close the link between proteins and drugs on your website!
+ </p>
+ </div>
+ <div class="col-lg-5 col-md-12 d-flex justify-content-end">
+ <iframe
+ width="480"
+ height="320"
+ src="https://www.youtube.com/embed/ScMzIvxBSi4"
+ title="YouTube video player"
+ frameborder="0"
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+ allowfullscreen
+ class="video"
+ ></iframe>
+ </div>
+ </div>
</div>
- <div class="col">
- <span style="width: 360px; height: 240px"> Video coming soon </span>
- <!-- <iframe-->
- <!-- width="360"-->
- <!-- height="240"-->
- <!-- src="https://www.youtube.com/embed/NpEaa2P7qZI"-->
- <!-- title="YouTube video player"-->
- <!-- frameborder="0"-->
- <!-- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"-->
- <!-- allowfullscreen-->
- <!-- class="video"-->
- <!-- ></iframe>-->
- <div class="row">
- <p-button
- label="Use drugst.online"
- icon="pi pi-fw pi-send"
- (onClick)="switchTab('standalone')"
- ></p-button>
- </div>
+ <div class="row align-items-start text-center">
+ <div class="col">
+ <span style="width: 360px; height: 240px"> Video coming soon </span>
+ <!-- <iframe-->
+ <!-- width="360"-->
+ <!-- height="240"-->
+ <!-- src="https://www.youtube.com/embed/ScMzIvxBSi4"-->
+ <!-- title="YouTube video player"-->
+ <!-- frameborder="0"-->
+ <!-- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"-->
+ <!-- allowfullscreen-->
+ <!-- class="video"-->
+ <!-- ></iframe>-->
+ <div class="row">
+ <p-button
+ label="Integrate drugst.one"
+ icon="pi pi-fw pi-th-large"
+ (onClick)="switchTab('idea')"
+ ></p-button>
+ </div>
+ </div>
+ <div class="col">
+ <span style="width: 360px; height: 240px"> Video coming soon </span>
+ <!-- <iframe-->
+ <!-- width="360"-->
+ <!-- height="240"-->
+ <!-- src="https://www.youtube.com/embed/oznr-1-poSU"-->
+ <!-- title="YouTube video player"-->
+ <!-- frameborder="0"-->
+ <!-- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"-->
+ <!-- allowfullscreen-->
+ <!-- class="video"-->
+ <!-- ></iframe>-->
+
+ <div class="row">
+ <a href="/doc#basic_integration">
+ <p-button
+ label="Start using URL-config"
+ icon="pi pi-fw pi-send"
+ ></p-button>
+ </a>
+ </div>
+ </div>
+ <div class="col">
+ <span style="width: 360px; height: 240px"> Video coming soon </span>
+ <!-- <iframe-->
+ <!-- width="360"-->
+ <!-- height="240"-->
+ <!-- src="https://www.youtube.com/embed/NpEaa2P7qZI"-->
+ <!-- title="YouTube video player"-->
+ <!-- frameborder="0"-->
+ <!-- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"-->
+ <!-- allowfullscreen-->
+ <!-- class="video"-->
+ <!-- ></iframe>-->
+ <div class="row">
+ <p-button
+ label="Use drugst.online"
+ icon="pi pi-fw pi-send"
+ (onClick)="switchTab('standalone')"
+ ></p-button>
+ </div>
+ </div>
</div>
- </div>
</div>
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
index 539b9c5..9a1ffdf 100644
--- a/src/app/pages/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -22,10 +22,6 @@ export class HomeComponent implements OnInit {
this.router.navigate([dest]);
}
- switchToDoc(docPage: string) {
- this.navigateDoc.emit(docPage)
- }
-
isDark() {
return localStorage.getItem("darkTheme") === 'true';
}
diff --git a/src/app/pages/motivation/motivation.component.html b/src/app/pages/motivation/motivation.component.html
index ba094e9..bbaecc6 100644
--- a/src/app/pages/motivation/motivation.component.html
+++ b/src/app/pages/motivation/motivation.component.html
@@ -22,7 +22,7 @@
should consider giving <b><i>drugst.one</i></b> a try. This project is still
under development so bugs or other issues might occur, but together with you
we hope to get rid of all of those and to further improve the
- <i><b>drugst.one</b></i> plugin (link contact?).
+ <i><b>drugst.one</b></i> plugin (<a (click)="switchToDoc('contact_us')" class="link-primary">Contact</a>).
</p-card>
<p-card class="dt-card card mb-3" header="What Data does drugst.one use?">
Detailed information about the data sources will be added in the future.<br />
diff --git a/src/app/pages/motivation/motivation.component.ts b/src/app/pages/motivation/motivation.component.ts
index b62de94..6828ee7 100644
--- a/src/app/pages/motivation/motivation.component.ts
+++ b/src/app/pages/motivation/motivation.component.ts
@@ -26,6 +26,9 @@ export class MotivationComponent implements OnInit {
}
ngOnInit(): void {
+ // @ts-ignore
+ // document.scrollTop(0);
+ window.scroll({top:document.body.offsetTop})
this.general.plugin = "" +
"<head>\n" +
" <script src=\""+this.cdn+"/latest/drugstone.js\"></script>\n" +
@@ -53,7 +56,8 @@ export class MotivationComponent implements OnInit {
}
switchToDoc(docPage: string) {
- this.navigateDoc.emit(docPage)
+ window.location.replace("/doc#"+docPage)
+ // this.navigateDoc.emit(docPage)
}
getKeys(map: object){
diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html
index fd8aac9..d383285 100644
--- a/src/app/pages/pages.component.html
+++ b/src/app/pages/pages.component.html
@@ -1,10 +1,8 @@
-<app-home [hidden]="currentTabId!==0" (tabChangeEvent)="switchTab($event); tabChange($event)"
- (navigateDoc)="switchTab(4); tabChange(4); doc.navigateToId($event)"></app-home>
+<app-home [hidden]="currentTabId!==0" (tabChangeEvent)="switchTab($event); tabChange($event)"></app-home>
<app-motivation [hidden]="currentTabId!==1" [theme]="theme" [host]="host" [api]="backendPath" [cdn]="cdn"
- (tabChangeEvent)="switchTab($event); tabChange($event)"
- (navigateDoc)="switchTab(4); tabChange(4); doc.navigateToId($event)"></app-motivation>
-<app-standalone #standalone *ngIf="currentTabId!==3" [api]="backendPath" [hidden]="currentTabId!==2"></app-standalone>
-<app-playground #playground *ngIf="currentTabId===3" [theme]="theme" [api]="backendPath"></app-playground>
-<app-doc #doc [hidden]="currentTabId!==4" [api]="backendPath" [version]="cdnVersion" [cdn]="cdn"
+ (tabChangeEvent)="switchTab($event); tabChange($event)"></app-motivation>
+<app-standalone #standalone *ngIf="currentTabId==2" [api]="backendPath" [hidden]="currentTabId!==2"></app-standalone>
+<app-playground #playground *ngIf="currentTabId===3" [theme]="theme" [hidden]="currentTabId!==3" [api]="backendPath"></app-playground>
+<app-doc [hidden]="currentTabId!==4" [api]="backendPath" [version]="cdnVersion" [cdn]="cdn"
[host]="host"></app-doc>
diff --git a/src/app/pages/standalone/standalone/standalone.component.html b/src/app/pages/standalone/standalone/standalone.component.html
index 1d65318..5a8c720 100644
--- a/src/app/pages/standalone/standalone/standalone.component.html
+++ b/src/app/pages/standalone/standalone/standalone.component.html
@@ -1,4 +1,12 @@
-<div class="container-fluid">
+<div class="container">
+ <div class="row">
+ <div class="col-lg-12">
+ <h1>Standalone</h1>
+ <p>
+ Use Drugst.One as if it was integrated on your one website! Below you have the Drugst.One app based on the configuration below. This page can be the target of URL based requests to visualize specific genes. You can read more about how to create such URLs <a class="link-primary" (click)="switchToDoc('standalone')">here</a>.
+ </p>
+ </div>
+ </div>
<div class="accordion" id="accordionPanelsStandalone">
<div
class="accordion-item"
@@ -14,7 +22,7 @@
type="button"
data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseThree"
- aria-expanded="false"
+ aria-expanded="true"
aria-controls="panelsStayOpen-collapseThree"
[ngClass]="{
'text-light bg-dark': themeService.theme === 'theme-dark',
@@ -26,7 +34,7 @@
</h2>
<div
id="panelsStayOpen-collapseThree"
- class="accordion-collapse collapse"
+ class="accordion-collapse collapse show"
aria-labelledby="panelspanelsDrugstone"
>
<div class="accordion-body" #standalonePlugin>
diff --git a/src/app/pages/standalone/standalone/standalone.component.ts b/src/app/pages/standalone/standalone/standalone.component.ts
index a29d1e4..948c9e5 100644
--- a/src/app/pages/standalone/standalone/standalone.component.ts
+++ b/src/app/pages/standalone/standalone/standalone.component.ts
@@ -58,13 +58,19 @@ export class StandaloneComponent implements OnInit {
label: 'Ensemble',
value: 'ensg'
}, {label: 'Entrez', value: 'entrez'}],
- drugProtInterList: [{label: 'DrugBank', value: {name:'DrugBank',licenced:true}}, {label: 'ChEMBL', value: {name:'ChEMBL',licenced:true}}, {
+ drugProtInterList: [{label: 'DrugBank', value: {name: 'DrugBank', licenced: true}}, {
+ label: 'ChEMBL',
+ value: {name: 'ChEMBL', licenced: true}
+ }, {
label: 'DGIdb',
- value: {name:'DGIdb',licenced:true}
+ value: {name: 'DGIdb', licenced: true}
}],
- protProtInterList: [{label: 'STRING', value: {name: 'STRING',licenced:true}}, {label: 'BioGRID', value: {name:'BioGRID',licenced:true}}, {
+ protProtInterList: [{label: 'STRING', value: {name: 'STRING', licenced: true}}, {
+ label: 'BioGRID',
+ value: {name: 'BioGRID', licenced: true}
+ }, {
label: 'APID',
- value: {name:'APID',licenced:true}
+ value: {name: 'APID', licenced: true}
}],
drugDisList: [],
protDisList: []
@@ -109,6 +115,10 @@ export class StandaloneComponent implements OnInit {
this.switchTheme(true);
}
+ switchToDoc(id: string) {
+ window.location.replace("/doc#" + id)
+ }
+
async loadDatasets() {
this.drugstone.getDatasources(this.api).then(response => {
this.dataLists = {
--
GitLab