From 93ae0f3e376ca798cc727f0b4439999bf2ca7fa4 Mon Sep 17 00:00:00 2001
From: "Hartung, Michael" <michael.hartung@uni-hamburg.de>
Date: Thu, 20 Oct 2022 14:54:16 +0200
Subject: [PATCH] analysis fullscreen
---
.../analysis-panel.component.html | 356 ++++++++++--------
.../analysis-panel.component.scss | 9 +
.../analysis-panel.component.ts | 7 +
src/app/config.ts | 2 +-
.../explorer-page/explorer-page.component.ts | 2 +-
src/stylesheets/styles.scss | 2 +
6 files changed, 219 insertions(+), 159 deletions(-)
diff --git a/src/app/components/analysis-panel/analysis-panel.component.html b/src/app/components/analysis-panel/analysis-panel.component.html
index d19df5f5..7d433bfb 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.html
+++ b/src/app/components/analysis-panel/analysis-panel.component.html
@@ -1,5 +1,5 @@
<div *ngIf="token">
- <div class="card analysis">
+ <div class="card analysis" [ngClass]="{'fullscreen': fullscreen}">
<header class="card-header">
<p class="card-header-title">
<span class="icon">
@@ -12,17 +12,50 @@
(click)="analysis.removeTask(token); close()"
class="card-header-icon"
aria-label="delete"
+ pTooltip="Delete analysis"
+ [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
+ tooltipPosition="left"
>
<span class="icon has-text-danger" title="Delete analysis">
<i class="fas fa-trash" aria-hidden="true"></i>
</span>
</a>
- <a (click)="close()" class="card-header-icon" aria-label="close">
+ <a
+ (click)="close()"
+ class="card-header-icon"
+ aria-label="close"
+ pTooltip="Close analysis"
+ [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
+ tooltipPosition="left"
+ >
<span class="icon" title="Close analysis">
<i class="fas fa-times color-danger" aria-hidden="true"></i>
</span>
</a>
+
+ <a
+ pTooltip="Open in fullscreen"
+ [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
+ tooltipPosition="left"
+ *ngIf="!fullscreen"
+ (click)="toggleFullscreen()"
+ class="card-header-icon"
+ >
+ <span class="icon is-small">
+ <i class="fas fa-expand"></i>
+ </span>
+ </a>
+ <a
+ title="close fullscreen"
+ *ngIf="fullscreen"
+ (click)="toggleFullscreen()"
+ class="card-header-icon"
+ >
+ <span class="icon is-small">
+ <i class="fas fa-compress"></i>
+ </span>
+ </a>
</header>
<div
class="card-content tab-header-small"
@@ -49,13 +82,17 @@
<div *ngIf="task">
<div class="columns m-1">
<div class="column content">
- <h4
- class="is-4 has-text-weight-bold"
- >
- <span class="icon">
- <i class="fas fa-wrench" aria-hidden="true"></i>
- </span>
- {{(['quick', 'super', 'connect', 'connectSelected'].indexOf(task.info.algorithm) === -1) ? 'Algorithm:' : 'Method:' }}
+ <h4 class="is-4 has-text-weight-bold">
+ <span class="icon">
+ <i class="fas fa-wrench" aria-hidden="true"></i>
+ </span>
+ {{
+ ["quick", "super", "connect", "connectSelected"].indexOf(
+ task.info.algorithm
+ ) === -1
+ ? "Algorithm:"
+ : "Method:"
+ }}
{{ algorithmNames[task.info.algorithm] }}
</h4>
</div>
@@ -64,169 +101,177 @@
<div class="column">
<table class="table is-narrow">
<tbody>
- <tr
- *ngIf="
+ <tr
+ *ngIf="
result && result.geneInteractionDataset !== undefined
"
- >
- <td>Protein-Protein Interaction Dataset</td>
- <td>
- {{ result.geneInteractionDataset.name }} (Version
- {{ result.geneInteractionDataset.version }})
- </td>
- </tr>
- <tr
- *ngIf="
+ >
+ <td>Protein-Protein Interaction Dataset</td>
+ <td>
+ {{ result.geneInteractionDataset.name }} (Version
+ {{ result.geneInteractionDataset.version }})
+ </td>
+ </tr>
+ <tr
+ *ngIf="
result && result.drugInteractionDataset !== undefined
"
- >
- <td>Protein-Drug Interaction Dataset</td>
- <td>
- {{ result.drugInteractionDataset.name }} (Version
- {{ result.drugInteractionDataset.version }})
- </td>
- </tr>
- <tr *ngIf="task.info.parameters.resultSize !== undefined">
- <td>Result Size</td>
- <td>{{ task.info.parameters.resultSize }}</td>
- </tr>
- <tr *ngIf="task.info.parameters.k !== undefined">
- <td>K</td>
- <td>{{ task.info.parameters.k }}</td>
- </tr>
- <tr *ngIf="task.info.parameters.numTrees !== undefined">
- <td>Number of trees</td>
- <td>{{ task.info.parameters.numTrees }}</td>
- </tr>
- <tr *ngIf="task.info.parameters.tolerance !== undefined">
- <td>Tolerance</td>
- <td>{{ task.info.parameters.tolerance }}</td>
- </tr>
- <tr *ngIf="task.info.parameters.dampingFactor !== undefined">
- <td>Damping Factor</td>
- <td>{{ task.info.parameters.dampingFactor }}</td>
- </tr>
- <tr *ngIf="task.info.parameters.maxDeg !== undefined">
- <td>Maximum Degree</td>
- <td>{{ task.info.parameters.maxDeg }}</td>
- </tr>
- <tr *ngIf="task.info.parameters.hubPenalty !== undefined">
- <td>Hub Penality</td>
- <td>{{ task.info.parameters.hubPenalty }}</td>
- </tr>
- <tr
- *ngIf="
+ >
+ <td>Protein-Drug Interaction Dataset</td>
+ <td>
+ {{ result.drugInteractionDataset.name }} (Version
+ {{ result.drugInteractionDataset.version }})
+ </td>
+ </tr>
+ <tr *ngIf="task.info.parameters.resultSize !== undefined">
+ <td>Result Size</td>
+ <td>{{ task.info.parameters.resultSize }}</td>
+ </tr>
+ <tr *ngIf="task.info.parameters.k !== undefined">
+ <td>K</td>
+ <td>{{ task.info.parameters.k }}</td>
+ </tr>
+ <tr *ngIf="task.info.parameters.numTrees !== undefined">
+ <td>Number of trees</td>
+ <td>{{ task.info.parameters.numTrees }}</td>
+ </tr>
+ <tr *ngIf="task.info.parameters.tolerance !== undefined">
+ <td>Tolerance</td>
+ <td>{{ task.info.parameters.tolerance }}</td>
+ </tr>
+ <tr *ngIf="task.info.parameters.dampingFactor !== undefined">
+ <td>Damping Factor</td>
+ <td>{{ task.info.parameters.dampingFactor }}</td>
+ </tr>
+ <tr *ngIf="task.info.parameters.maxDeg !== undefined">
+ <td>Maximum Degree</td>
+ <td>{{ task.info.parameters.maxDeg }}</td>
+ </tr>
+ <tr *ngIf="task.info.parameters.hubPenalty !== undefined">
+ <td>Hub Penality</td>
+ <td>{{ task.info.parameters.hubPenalty }}</td>
+ </tr>
+ <tr
+ *ngIf="
task.info.parameters.includeIndirectDrugs !== undefined &&
task.info.target === 'drug'
"
- >
- <td>Include indirect drugs</td>
- <td>
- <i
- *ngIf="task.info.parameters.includeIndirectDrugs"
- class="fa fa-check"
- ></i>
- <i
- *ngIf="!task.info.parameters.includeIndirectDrugs"
- class="fa fa-times color-danger"
- ></i>
- </td>
- </tr>
- <tr
- *ngIf="
+ >
+ <td>Include indirect drugs</td>
+ <td>
+ <i
+ *ngIf="task.info.parameters.includeIndirectDrugs"
+ class="fa fa-check"
+ ></i>
+ <i
+ *ngIf="!task.info.parameters.includeIndirectDrugs"
+ class="fa fa-times color-danger"
+ ></i>
+ </td>
+ </tr>
+ <tr
+ *ngIf="
task.info.parameters.includeNonApprovedDrugs !==
undefined && task.info.target === 'drug'
"
- >
- <td>Include non-approved drugs</td>
- <td>
- <i
- *ngIf="task.info.parameters.includeNonApprovedDrugs"
- class="fa fa-check"
- ></i>
- <i
- *ngIf="!task.info.parameters.includeNonApprovedDrugs"
- class="fa fa-times color-danger"
- ></i>
- </td>
- </tr>
- <tr *ngIf="task.info.parameters.customEdges !== undefined">
- <td>Include all displayed edges</td>
- <td>
- <i
- *ngIf="task.info.parameters.customEdges"
- class="fa fa-check"
- ></i>
- <i
- *ngIf="!task.info.parameters.customEdges"
- class="fa fa-times color-danger"
- ></i>
- </td>
- </tr>
+ >
+ <td>Include non-approved drugs</td>
+ <td>
+ <i
+ *ngIf="task.info.parameters.includeNonApprovedDrugs"
+ class="fa fa-check"
+ ></i>
+ <i
+ *ngIf="!task.info.parameters.includeNonApprovedDrugs"
+ class="fa fa-times color-danger"
+ ></i>
+ </td>
+ </tr>
+ <tr *ngIf="task.info.parameters.customEdges !== undefined">
+ <td>Include all displayed edges</td>
+ <td>
+ <i
+ *ngIf="task.info.parameters.customEdges"
+ class="fa fa-check"
+ ></i>
+ <i
+ *ngIf="!task.info.parameters.customEdges"
+ class="fa fa-times color-danger"
+ ></i>
+ </td>
+ </tr>
</tbody>
</table>
</div>
</div>
- <div class="columns m-1"
- *ngIf="['quick','super','connect','connectSelected'].indexOf(task.info.algorithm) > -1"
+ <div
+ class="columns m-1"
+ *ngIf="
+ ['quick', 'super', 'connect', 'connectSelected'].indexOf(
+ task.info.algorithm
+ ) > -1
+ "
>
<div class="column">
<h4 class="is-4 has-text-weight-bold">
- <span class="icon">
- <i class="fas fa-wrench" aria-hidden="true"></i>
- </span>
+ <span class="icon">
+ <i class="fas fa-wrench" aria-hidden="true"></i>
+ </span>
Algorithm:
{{ algorithmNames["multisteiner"] }}
</h4>
<table class="table is-narrow">
<tbody>
- <tr>
- <td>Number of Trees</td>
- <td>1</td>
- </tr>
- <tr>
- <td>Tolerance</td>
- <td>0</td>
- </tr>
- <tr>
- <td>Hub Penality</td>
- <td>1</td>
- </tr>
+ <tr>
+ <td>Number of Trees</td>
+ <td>1</td>
+ </tr>
+ <tr>
+ <td>Tolerance</td>
+ <td>0</td>
+ </tr>
+ <tr>
+ <td>Hub Penality</td>
+ <td>1</td>
+ </tr>
</tbody>
</table>
</div>
</div>
- <div class="columns m-1" *ngIf="['quick','super'].indexOf(task.info.algorithm) > -1">
+ <div
+ class="columns m-1"
+ *ngIf="['quick', 'super'].indexOf(task.info.algorithm) > -1"
+ >
<div class="column">
<h4 class="is-4 has-text-weight-bold">
- <span class="icon">
- <i class="fas fa-wrench" aria-hidden="true"></i>
- </span>
+ <span class="icon">
+ <i class="fas fa-wrench" aria-hidden="true"></i>
+ </span>
Algorithm:
{{ algorithmNames["closeness"] }}
</h4>
<table class="table is-narrow">
<tbody>
- <tr>
- <td>Include indirect drugs</td>
- <td>
- <i class="fa fa-times"></i>
- </td>
- </tr>
- <tr>
- <td>Include non-approved drugs</td>
- <td>
- <i class="fa fa-check"></i>
- </td>
- </tr>
- <tr>
- <td>Hub Penality</td>
- <td>1</td>
- </tr>
- <tr>
- <td>Result Size</td>
- <td>10</td>
- </tr>
+ <tr>
+ <td>Include indirect drugs</td>
+ <td>
+ <i class="fa fa-times"></i>
+ </td>
+ </tr>
+ <tr>
+ <td>Include non-approved drugs</td>
+ <td>
+ <i class="fa fa-check"></i>
+ </td>
+ </tr>
+ <tr>
+ <td>Hub Penality</td>
+ <td>1</td>
+ </tr>
+ <tr>
+ <td>Result Size</td>
+ <td>10</td>
+ </tr>
</tbody>
</table>
</div>
@@ -236,10 +281,7 @@
<div class="tab-content" [class.is-visible]="tab === 'network'">
<!-- network start -->
- <app-network
- networkType="analysis"
- [nodeData]="nodeData"
- ></app-network>
+ <app-network networkType="analysis" [nodeData]="nodeData"></app-network>
<!-- network end -->
</div>
<div
@@ -276,16 +318,16 @@
class="button is-rounded has-tooltip is-small"
pTooltip="Normalize the scores"
[tooltipStyleClass]="
- 'drgstn drgstn-tooltip drgstn-tooltip-top'
- "
+ 'drgstn drgstn-tooltip drgstn-tooltip-top'
+ "
tooltipPosition="top"
[class.is-primary]="tableNormalize"
(click)="toggleNormalization(true)"
[ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
>
- <span class="icon is-small">
- <i class="fa fa-ruler-vertical"></i>
- </span>
+ <span class="icon is-small">
+ <i class="fa fa-ruler-vertical"></i>
+ </span>
<span>Normalization On</span>
</button>
</p>
@@ -294,8 +336,8 @@
class="button is-rounded has-tooltip is-small"
pTooltip="Disable normalization of the scores."
[tooltipStyleClass]="
- 'drgstn drgstn-tooltip drgstn-tooltip-top'
- "
+ 'drgstn drgstn-tooltip drgstn-tooltip-top'
+ "
tooltipPosition="top"
[class.is-primary]="!tableNormalize"
(click)="toggleNormalization(false)"
@@ -352,16 +394,16 @@
class="button is-rounded has-tooltip is-small"
pTooltip="Normalize the scores"
[tooltipStyleClass]="
- 'drgstn drgstn-tooltip drgstn-tooltip-top'
- "
+ 'drgstn drgstn-tooltip drgstn-tooltip-top'
+ "
tooltipPosition="top"
[class.is-primary]="tableNormalize"
(click)="toggleNormalization(true)"
[ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
>
- <span class="icon is-small">
- <i class="fa fa-ruler-vertical"></i>
- </span>
+ <span class="icon is-small">
+ <i class="fa fa-ruler-vertical"></i>
+ </span>
<span>Normalization On</span>
</button>
</p>
@@ -370,8 +412,8 @@
class="button is-rounded has-tooltip is-small"
pTooltip="Disable normalization of the scores."
[tooltipStyleClass]="
- 'drgstn drgstn-tooltip drgstn-tooltip-top'
- "
+ 'drgstn drgstn-tooltip drgstn-tooltip-top'
+ "
tooltipPosition="top"
[class.is-primary]="!tableNormalize"
(click)="toggleNormalization(false)"
diff --git a/src/app/components/analysis-panel/analysis-panel.component.scss b/src/app/components/analysis-panel/analysis-panel.component.scss
index 92b3e138..8794e59b 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.scss
+++ b/src/app/components/analysis-panel/analysis-panel.component.scss
@@ -6,6 +6,15 @@
width: 100% !important;
}
+.fullscreen{
+ position: fixed !important;
+ height: 100vh !important;
+ width: 100vw !important;
+ top: 0 !important;
+ left: 0 !important;
+ z-index: $fullscreen-z;
+}
+
.tab-header-small {
padding: 0 !important;
}
diff --git a/src/app/components/analysis-panel/analysis-panel.component.ts b/src/app/components/analysis-panel/analysis-panel.component.ts
index 1745bcba..23ff59ce 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.ts
+++ b/src/app/components/analysis-panel/analysis-panel.component.ts
@@ -80,6 +80,8 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
public result: any = null;
public myConfig: IConfig = JSON.parse(JSON.stringify(defaultConfig));
+ public fullscreen = false;
+
public network: any;
public nodeData: { nodes: any, edges: any } = {nodes: null, edges: null};
// private drugNodes: any[] = [];
@@ -505,4 +507,9 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
this.analysis.addItems(addItems);
this.analysis.removeItems(removeItems);
}
+
+ public toggleFullscreen() {
+ this.fullscreen = !this.fullscreen;
+ console.log('this.fullscreen', this.fullscreen)
+ }
}
diff --git a/src/app/config.ts b/src/app/config.ts
index a0726e73..0eb92e71 100644
--- a/src/app/config.ts
+++ b/src/app/config.ts
@@ -163,7 +163,7 @@ export const defaultConfig: IConfig = {
networkMenuButtonAnimationLabel: 'Animation',
identifier: 'symbol',
selfReferences: false,
- customEdges: {default: true, selectable: false},
+ customEdges: {default: true, selectable: true},
interactionDrugProtein: 'NeDRex',
interactionProteinProtein: 'NeDRex',
indicationDrugDisorder: 'NeDRex',
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index f43a78c2..6a521aff 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -466,7 +466,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
* @param key
* @param values
*/
- public setConfigNodeGroup(key: string, nodeGroups: { [key: string]: NodeGroup }) {
+ public setConfigNodeGroup(key: string, nodeGroups: { [key: string]: NodeGroup } | {}) {
// make sure that return-groups (seeds, drugs, found nodes) are set
const defaultNodeGroups = JSON.parse(JSON.stringify(defaultConfig.nodeGroups));
// user merge function to do deep merge
diff --git a/src/stylesheets/styles.scss b/src/stylesheets/styles.scss
index 1acb530f..c0a751a1 100644
--- a/src/stylesheets/styles.scss
+++ b/src/stylesheets/styles.scss
@@ -255,3 +255,5 @@
padding: 0.5rem 1rem;
line-height: 24px;
}
+
+
--
GitLab