diff --git a/src/app/components/network-legend/network-legend.component.html b/src/app/components/network-legend/network-legend.component.html
index bb1703f764071d8bb54182721da27916f4e415a1..fb7fbeaf89aaac69f7b05c648c2474722e204363 100644
--- a/src/app/components/network-legend/network-legend.component.html
+++ b/src/app/components/network-legend/network-legend.component.html
@@ -1,4 +1,4 @@
-<div class="legend" [class.right]="this.config.legendPos === 'right'">
+<div class="legend" [class.right]="this.config.legendPos === 'right'" [ngClass]="{ 'legend-small': smallStyle }">
<!-- default legend in html -->
<table *ngIf="!this.config.legendUrl.length">
@@ -11,7 +11,7 @@
<th>
<img [src]="nodeGroup.value.image" class="legend-icon"/>
</th>
- <td class="group-name" [ngClass]="{ 'text-normal': smallStyle }"> {{ nodeGroup.value.groupName }}</td>
+ <td class="group-name"> {{ nodeGroup.value.groupName }}</td>
</ng-container>
<ng-container *ngIf="!nodeGroup.value.image" [ngSwitch]="nodeGroup.value.shape">
@@ -56,7 +56,7 @@
<span class="node {{ nodeGroup.value.shape }}" [style.background-color]=nodeGroup.value.color.background>
</span>
</th>
- <td class="group-name" [ngClass]="{ 'text-normal': smallStyle }"> {{ nodeGroup.value.groupName }}</td>
+ <td class="group-name"> {{ nodeGroup.value.groupName }}</td>
</ng-container>
</ng-container>
</tr>
@@ -69,7 +69,7 @@
<hr *ngIf="!edgeGroup.value.dashes" class="edge" [style.background-color]=edgeGroup.value.color>
<hr *ngIf="edgeGroup.value.dashes" class="edge dashes" [style.color]=edgeGroup.value.color>
</th>
- <td class="group-name" [ngClass]="{ 'text-normal': smallStyle }"> {{ edgeGroup.value.groupName }}</td>
+ <td class="group-name"> {{ edgeGroup.value.groupName }}</td>
</ng-container>
</tr>
</ng-container>
diff --git a/src/app/components/network-legend/network-legend.component.scss b/src/app/components/network-legend/network-legend.component.scss
index ad520fcc25d965129b8cb34b2bf71360d5b33f06..cbe91cfc8aa0330460eaa6ce4561d40c360c2c0c 100644
--- a/src/app/components/network-legend/network-legend.component.scss
+++ b/src/app/components/network-legend/network-legend.component.scss
@@ -1,32 +1,47 @@
@import "src/stylesheets/variables";
-
div.legend {
position: absolute;
bottom: 0;
margin-left: 1rem;
+ width: auto;
+ max-width: 11rem;
z-index: $explorer-networklegend-z;
&.right {
right: 0;
}
+ &.legend-small {
+ transform-origin: bottom left;
+ zoom: 0.8;
+ -moz-transform: scale(0.8);
+ }
+ table tr:first-child {
+ // no border line on top of first element
+ border-top: none;
+ }
img {
max-width: 20vw;
// margin-bottom: 1rem;
}
- td.group-name{
- color:var(--drgstn-text-primary) !important;
+ th {
+ // make all nodes a bit smaller
+ zoom: 0.8;
+ -moz-transform: scale(0.8);
+ }
+ td.group-name {
+ color: var(--drgstn-text-primary) !important;
}
- tr.list-item{
+ tr.list-item {
line-height: calc(#{$legend-row-height} / 2);
border-top: var(--drgstn-text-primary) 1px solid;
- th{
+ th {
height: $legend-row-height;
width: $legend-row-height;
vertical-align: middle !important;
padding: 2px !important;
- .text{
+ .text {
font-style: italic;
- color:var(--drgstn-text-primary) !important;
+ color: var(--drgstn-text-primary) !important;
}
.diamond {
height: $legend-diamond-size;
@@ -36,27 +51,27 @@ div.legend {
margin-left: 12.5%;
display: inline-block;
}
- .box{
+ .box {
// class "box" exists in bulma css, only small changes needed
height: 100%;
width: 100%;
display: inline-block;
padding: unset;
}
- .ellipse{
+ .ellipse {
height: 75%;
width: 100%;
border-radius: 50%;
display: inline-block;
}
- .dot{
+ .dot {
background: $legend-default-background-color;
border-radius: 50%;
width: $legend-circle-size;
height: $legend-circle-size;
display: inline-block;
}
- .circle{
+ .circle {
background: $legend-default-background-color;
border-radius: 50%;
width: $legend-circle-size;
@@ -65,12 +80,12 @@ div.legend {
text-align: center;
line-height: $legend-circle-line-height;
}
- .triangle{
+ .triangle {
width: 0;
height: 0;
border-left: calc(#{$legend-triangle-size} / 2) solid transparent;
border-right: calc(#{$legend-triangle-size} / 2) solid transparent;
- border-bottom: $legend-triangle-height solid black; // default color will be changed by user input
+ border-bottom: $legend-triangle-height solid black; // default color will be changed by user input
display: inline-block;
}
.triangleDown {
@@ -78,7 +93,7 @@ div.legend {
height: 0;
border-left: calc(#{$legend-triangle-size} / 2) solid transparent;
border-right: calc(#{$legend-triangle-size} / 2) solid transparent;
- border-top: $legend-triangle-height solid black; // default color will be changed by user input
+ border-top: $legend-triangle-height solid black; // default color will be changed by user input
display: inline-block;
}
.star {
@@ -86,32 +101,33 @@ div.legend {
display: inline-block;
width: 0;
height: 0;
- margin-left: .5em;
- margin-right: .9em;
+ margin-left: 0.5em;
+ margin-right: 0.9em;
margin-bottom: 1.2em;
- border-right: .3em solid transparent;
- border-bottom: .7em solid $legend-star-color;
- border-left: .3em solid transparent;
+ border-right: 0.3em solid transparent;
+ border-bottom: 0.7em solid $legend-star-color;
+ border-left: 0.3em solid transparent;
/* Controlls the size of the stars. */
font-size: $legend-star-size;
- &:before, &:after {
- content: '';
+ &:before,
+ &:after {
+ content: "";
display: block;
width: 0;
height: 0;
position: absolute;
- top: .6em;
+ top: 0.6em;
left: -1em;
- border-right: 1em solid transparent;
- border-bottom: .7em solid;
- border-left: 1em solid transparent;
+ border-right: 1em solid transparent;
+ border-bottom: 0.7em solid;
+ border-left: 1em solid transparent;
transform: rotate(-35deg);
}
&:after {
transform: rotate(35deg);
}
}
- .square{
+ .square {
background: $legend-default-background-color;
width: $legend-square-width;
height: $legend-square-width;
@@ -125,7 +141,7 @@ div.legend {
width: $legend-row-height;
height: $legend-row-height;
}
- hr.edge{
+ hr.edge {
width: $legend-edge-width;
height: $legend-edge-height;
/* Center edge icon */
@@ -141,7 +157,5 @@ div.legend {
vertical-align: middle !important;
padding: 0 !important;
}
-
}
}
-
diff --git a/src/app/config.ts b/src/app/config.ts
index d581c050678d2fc6ab80d23af4902555e392ea50..3714371f9e2a70e7a189f08f4da8a5df8d73185c 100644
--- a/src/app/config.ts
+++ b/src/app/config.ts
@@ -37,8 +37,7 @@ export interface IConfig {
legendPos: 'left' | 'right';
taskTargetName: string,
taskDrugName: string,
- showLeftSidebar: boolean;
- showRightSidebar: boolean;
+ // showSidebar: boolean;
showOverview: boolean;
showQuery: boolean;
showItemSelector: boolean;
@@ -58,6 +57,7 @@ export interface IConfig {
interactionDrugProtein: InteractionDrugProteinDB;
interactionProteinProtein: InteractionProteinProteinDB;
autofillEdges: boolean;
+ sidebarPos: 'left' | 'right';
interactions?: InteractionDatabase;
identifier?: Identifier;
nodeShadow?: boolean;
@@ -67,7 +67,6 @@ export interface IConfig {
/**
* Provide default values
*/
-
export const defaultConfig: IConfig = {
title: 'Drugst.one',
legendUrl: '', // 'https://exbio.wzw.tum.de/covex/assets/leg1.png' show legend image if set, otherwise default legend
@@ -77,8 +76,7 @@ export const defaultConfig: IConfig = {
taskDrugName: 'Drug Search',
showLegendNodes: true,
showLegendEdges: true,
- showLeftSidebar: true,
- showRightSidebar: true,
+ // showSidebar: true,
showOverview: true,
showQuery: true,
showItemSelector: true,
@@ -97,6 +95,7 @@ export const defaultConfig: IConfig = {
nodeShadow: true,
edgeShadow: true,
autofillEdges: true,
+ sidebarPos: 'right',
nodeGroups: {
// all NodeGroups but the default group must be set, if not provided by the user, they will be taken from here
// IMPORTANT: node color must be hexacode!
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index 774e6032938e0eb70acc634fbf90ade1b29d6e28..98f2b945a52155454ae6967d2f0cc908e018a04b 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -4,7 +4,7 @@
[(show)]="showAnalysisDialog"
[target]="analysisDialogTarget"
[config]="myConfig"
- [inputNetwork]="inputNetwork"
+ [inputNetwork]="{ nodes: proteins, edges: edges }"
(taskEvent)="emitTaskEvent($event)"
>
</app-launch-analysis>
@@ -27,7 +27,48 @@
<!-- Start explorer -->
<div class="covex explorer">
<!-- Start left sidebar -->
- <div *ngIf="myConfig.showLeftSidebar" class="covex sidebar bar-left">
+ <div class="covex sidebar" [ngClass]="{ 'is-pulled-right': myConfig.sidebarPos === 'right' }">
+ <div *ngIf="myConfig.showItemSelector" class="card bar-large">
+ <header
+ class="card-header"
+ [ngClass]="{ 'b-text-small': smallStyle }"
+ >
+ <p class="card-header-title">
+ <span *ngIf="!selectedWrapper" class="icon">
+ <i class="fas fa-info" aria-hidden="true"></i>
+ </span>
+ <!-- <i *ngIf="selectedWrapper && selectedWrapper.data.netexId && selectedWrapper.data.netexId.startsWith('p')" class="fas fa-dna" aria-hidden="true"></i>
+ <i *ngIf="selectedWrapper && selectedWrapper.data.netexId && selectedWrapper.data.netexId.startsWith('d')" class="fas fa-capsules"
+ aria-hidden="true"></i> -->
+ <span *ngIf="!selectedWrapper">No item selected</span>
+ <span *ngIf="selectedWrapper">
+ <span>{{ selectedWrapper.data.type }}</span>
+ </span>
+ </p>
+ <a
+ (click)="collapseDetails = !collapseDetails"
+ data-action="collapse"
+ class="card-header-icon is-hidden-fullscreen"
+ aria-label="more options"
+ >
+ <span *ngIf="collapseDetails" class="icon">
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
+ </span>
+ <span *ngIf="!collapseDetails" class="icon">
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
+ </span>
+ </a>
+ </header>
+ <div *ngIf="collapseDetails">
+ <div class="card-content">
+ <app-info-tile
+ [wrapper]="selectedWrapper"
+ [smallStyle]="smallStyle"
+ ></app-info-tile>
+ </div>
+ </div>
+ </div>
+
<div
*ngIf="myConfig.showOverview"
class="card bar-large"
@@ -132,230 +173,6 @@
</div>
</div>
</div>
- </div>
-
- <!-- Start network block -->
- <div class="covex network center-panel" id="main-column">
- <div class="analysis-view" *ngIf="selectedAnalysisToken">
- <app-analysis-panel
- [(token)]="selectedAnalysisToken"
- (showDetailsChange)="selectedWrapper = $event"
- (visibleItems)="analysisWindowChanged($event)"
- (setInputNetwork)="setInputNetwork($event)"
- [config]="myConfig"
- [smallStyle]="smallStyle"
- ></app-analysis-panel>
- </div>
-
- <div class="card network">
- <header class="card-header network-header">
- <p class="card-header-title">
- {{ myConfig.title }}
- </p>
- </header>
- <div class="card-content explorer-network-view-settings">
- <div class="card-image canvas-content" #networkWithLegend>
- <div *ngIf="myConfig.showLegend">
- <app-network-legend
- [config]="myConfig"
- [context]="legendContext"
- [smallStyle]="smallStyle"
- ></app-network-legend>
- </div>
- <div class="center image1 fullheight" #network>
- <button class="button is-loading center" alt="loading...">
- Loading
- </button>
- </div>
- </div>
-
- <footer
- *ngIf="myConfig.showFooter"
- class="card-footer toolbar network-footer-toolbar"
- >
- <div class="network-footer-toolbar-inner-container">
- <ng-container *ngIf="myConfig.showFooterButtonScreenshot">
- <div class="footer-buttons network-footer-toolbar-element">
- <button
- (click)="toImage()"
- class="button is-primary is-rounded has-tooltip"
- pTooltip="Take a screenshot of the current network."
- [ngClass]="{ 'button-small': smallStyle }"
- [tooltipStyleClass]="'drgstn drgstn-tooltip'"
- tooltipPosition="top"
- >
- <span class="icon">
- <i class="fas fa-camera" aria-hidden="true"></i>
- </span>
- <span [ngClass]="{ 'text-normal': smallStyle }"
- >Screenshot</span
- >
- </button>
- </div>
- </ng-container>
-
- <ng-container *ngIf="myConfig.showFooterButtonExportGraphml">
- <app-download-button
- [nodeData]="nodeData"
- [smallStyle]="smallStyle"
- [buttonId]="'explorer-download'"
- ></app-download-button>
- </ng-container>
-
- <ng-container *ngIf="myConfig.showFooterButtonExpression">
- <div
- class="
- footer-buttons
- dropdown
- is-up
- network-footer-toolbar-element
- "
- [class.is-active]="expressionExpanded"
- >
- <div class="dropdown-trigger">
- <button
- (click)="expressionExpanded = !expressionExpanded"
- class="button is-rounded is-primary"
- [class.is-outlined]="!selectedTissue"
- aria-haspopup="true"
- aria-controls="dropdown-menu"
- pTooltip="Tissue expression data is provided by the GTEx project."
- [tooltipStyleClass]="'drgstn drgstn-tooltip'"
- tooltipPosition="top"
- [ngClass]="{ 'button-small': smallStyle }"
- >
- <span
- *ngIf="!selectedTissue"
- [ngClass]="{ 'text-small': smallStyle }"
- >Tissue</span
- >
- <span *ngIf="selectedTissue">{{
- selectedTissue.name
- }}</span>
- <span *ngIf="expressionExpanded" class="icon is-small">
- <i class="fas fa-angle-up" aria-hidden="true"></i>
- </span>
- <span *ngIf="!expressionExpanded" class="icon is-small">
- <i class="fas fa-angle-left" aria-hidden="true"></i>
- </span>
- </button>
- </div>
- <div class="dropdown-menu" id="dropdown-menu" role="menu">
- <div class="dropdown-content tissue-dropdown">
- <div class="scroll-area">
- <a
- (click)="selectTissue(null)"
- [class.is-active]="!selectedTissue"
- class="dropdown-item"
- >
- None
- </a>
- <a
- *ngFor="let tissue of analysis.getTissues()"
- (click)="selectTissue(tissue)"
- [class.is-active]="
- selectedTissue &&
- tissue.netexId === selectedTissue.netexId
- "
- class="dropdown-item"
- >
- {{ tissue.name }}
- </a>
- </div>
- </div>
- </div>
- </div>
- </ng-container>
- <app-toggle
- class="footer-buttons network-footer-toolbar-element"
- textOn="Drugs"
- textOff="Off"
- tooltipOn="Display adjacent drugs ON."
- tooltipOff="Display adjacent drugs OFF."
- [smallStyle]="smallStyle"
- [value]="adjacentDrugs"
- (valueChange)="updateAdjacentDrugs($event)"
- ></app-toggle>
- <app-toggle
- class="footer-buttons network-footer-toolbar-element"
- textOn="Disorders (protein)"
- textOff="Off"
- tooltipOn="Show disorders adjacent to all currently displayed proteins/genes ON."
- tooltipOff="Show disorders adjacent to all currently displayed proteins/genes OFF."
- [smallStyle]="smallStyle"
- [value]="adjacentDisordersProtein"
- (valueChange)="updateAdjacentProteinDisorders($event)"
- ></app-toggle>
- <app-toggle
- class="footer-buttons network-footer-toolbar-element"
- textOn="Disorders (drugs)"
- textOff="Off"
- tooltipOn="Show disorders adjacent to all currently displayed drugs ON."
- tooltipOff="Show disorders adjacent to all currently displayed drugs OFF."
- [smallStyle]="smallStyle"
- [value]="adjacentDisordersDrug"
- [disabled]="!hasDrugsLoaded()"
- (valueChange)="updateAdjacentDrugDisorders($event)"
- ></app-toggle>
- <app-toggle
- class="footer-buttons network-footer-toolbar-element"
- textOn="Animation"
- textOff="Off"
- tooltipOn="Enable the network animation."
- tooltipOff="Disable the network animation and freeze nodes."
- [smallStyle]="smallStyle"
- [value]="physicsEnabled"
- (valueChange)="updatePhysicsEnabled($event)"
- ></app-toggle>
- </div>
- </footer>
- </div>
- </div>
- </div>
-
- <!-- End network block -->
-
- <div *ngIf="myConfig.showRightSidebar" class="covex sidebar bar-right">
- <div *ngIf="myConfig.showItemSelector" class="card bar-large">
- <header
- class="card-header"
- [ngClass]="{ 'b-text-small': smallStyle }"
- >
- <p class="card-header-title">
- <span *ngIf="!selectedWrapper" class="icon">
- <i class="fas fa-info" aria-hidden="true"></i>
- </span>
- <!-- <i *ngIf="selectedWrapper && selectedWrapper.data.netexId && selectedWrapper.data.netexId.startsWith('p')" class="fas fa-dna" aria-hidden="true"></i>
- <i *ngIf="selectedWrapper && selectedWrapper.data.netexId && selectedWrapper.data.netexId.startsWith('d')" class="fas fa-capsules"
- aria-hidden="true"></i> -->
- <span *ngIf="!selectedWrapper">No item selected</span>
- <span *ngIf="selectedWrapper">
- <span>{{ selectedWrapper.data.type }}</span>
- </span>
- </p>
- <a
- (click)="collapseDetails = !collapseDetails"
- data-action="collapse"
- class="card-header-icon is-hidden-fullscreen"
- aria-label="more options"
- >
- <span *ngIf="collapseDetails" class="icon">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
- </span>
- <span *ngIf="!collapseDetails" class="icon">
- <i class="fas fa-angle-left" aria-hidden="true"></i>
- </span>
- </a>
- </header>
- <div *ngIf="collapseDetails">
- <div class="card-content">
- <app-info-tile
- [wrapper]="selectedWrapper"
- [smallStyle]="smallStyle"
- ></app-info-tile>
- </div>
- </div>
- </div>
<div *ngIf="myConfig.showSimpleAnalysis" class="card bar-large">
<header
@@ -693,10 +510,7 @@
class="card-content overflow task-list-container"
*ngIf="analysis.tasks && analysis.tasks.length > 0"
>
- <app-task-list
- [(token)]="selectedAnalysisToken"
- [smallStyle]="smallStyle"
- ></app-task-list>
+ <app-task-list [(token)]="selectedAnalysisToken"></app-task-list>
</div>
<footer class="card-footer">
<a
@@ -875,6 +689,185 @@
</div>
</div>
+ <!-- Start network block -->
+ <div class="covex network center-panel" id="main-column">
+ <div class="analysis-view" *ngIf="selectedAnalysisToken">
+ <app-analysis-panel
+ [(token)]="selectedAnalysisToken"
+ (showDetailsChange)="selectedWrapper = $event"
+ (visibleItems)="analysisWindowChanged($event)"
+ [config]="myConfig"
+ [smallStyle]="smallStyle"
+ ></app-analysis-panel>
+ </div>
+
+ <div class="card network">
+ <header class="card-header network-header">
+ <p class="card-header-title">
+ {{ myConfig.title }}
+ </p>
+ </header>
+ <div class="card-content explorer-network-view-settings">
+ <div class="card-image canvas-content" #networkWithLegend>
+ <div *ngIf="myConfig.showLegend">
+ <app-network-legend
+ [config]="myConfig"
+ [context]="legendContext"
+ [smallStyle]="smallStyle"
+ ></app-network-legend>
+ </div>
+ <div class="center image1 fullheight" #network>
+ <button class="button is-loading center" alt="loading...">
+ Loading
+ </button>
+ </div>
+ </div>
+
+ <footer
+ *ngIf="myConfig.showFooter"
+ class="card-footer toolbar network-footer-toolbar"
+ >
+ <div class="network-footer-toolbar-inner-container">
+ <ng-container *ngIf="myConfig.showFooterButtonScreenshot">
+ <div class="footer-buttons network-footer-toolbar-element">
+ <button
+ (click)="toImage()"
+ class="button is-primary is-rounded has-tooltip"
+ pTooltip="Take a screenshot of the current network."
+ [ngClass]="{ 'button-small': smallStyle }"
+ [tooltipStyleClass]="'drgstn drgstn-tooltip'"
+ tooltipPosition="top"
+ >
+ <span class="icon">
+ <i class="fas fa-camera" aria-hidden="true"></i>
+ </span>
+ <span [ngClass]="{ 'text-normal': smallStyle }"
+ >Screenshot</span
+ >
+ </button>
+ </div>
+ </ng-container>
+
+ <ng-container *ngIf="myConfig.showFooterButtonExportGraphml">
+ <app-download-button
+ [nodeData]="nodeData"
+ [smallStyle]="smallStyle"
+ [buttonId]="'explorer-download'"
+ ></app-download-button>
+ </ng-container>
+
+ <ng-container *ngIf="myConfig.showFooterButtonExpression">
+ <div
+ class="
+ footer-buttons
+ dropdown
+ is-up
+ network-footer-toolbar-element
+ "
+ [class.is-active]="expressionExpanded"
+ >
+ <div class="dropdown-trigger">
+ <button
+ (click)="expressionExpanded = !expressionExpanded"
+ class="button is-rounded is-primary"
+ [class.is-outlined]="!selectedTissue"
+ aria-haspopup="true"
+ aria-controls="dropdown-menu"
+ pTooltip="Tissue expression data is provided by the GTEx project."
+ [tooltipStyleClass]="'drgstn drgstn-tooltip'"
+ tooltipPosition="top"
+ [ngClass]="{ 'button-small': smallStyle }"
+ >
+ <span
+ *ngIf="!selectedTissue"
+ [ngClass]="{ 'text-small': smallStyle }"
+ >Tissue</span
+ >
+ <span *ngIf="selectedTissue">{{
+ selectedTissue.name
+ }}</span>
+ <span *ngIf="expressionExpanded" class="icon is-small">
+ <i class="fas fa-angle-up" aria-hidden="true"></i>
+ </span>
+ <span *ngIf="!expressionExpanded" class="icon is-small">
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
+ </span>
+ </button>
+ </div>
+ <div class="dropdown-menu" id="dropdown-menu" role="menu">
+ <div class="dropdown-content tissue-dropdown">
+ <div class="scroll-area">
+ <a
+ (click)="selectTissue(null)"
+ [class.is-active]="!selectedTissue"
+ class="dropdown-item"
+ >
+ None
+ </a>
+ <a
+ *ngFor="let tissue of analysis.getTissues()"
+ (click)="selectTissue(tissue)"
+ [class.is-active]="
+ selectedTissue &&
+ tissue.netexId === selectedTissue.netexId
+ "
+ class="dropdown-item"
+ >
+ {{ tissue.name }}
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </ng-container>
+ <app-toggle
+ class="footer-buttons network-footer-toolbar-element"
+ textOn="Drugs"
+ textOff="Off"
+ tooltipOn="Display adjacent drugs ON."
+ tooltipOff="Display adjacent drugs OFF."
+ [smallStyle]="smallStyle"
+ [value]="adjacentDrugs"
+ (valueChange)="updateAdjacentDrugs($event)"
+ ></app-toggle>
+ <app-toggle
+ class="footer-buttons network-footer-toolbar-element"
+ textOn="Disorders (protein)"
+ textOff="Off"
+ tooltipOn="Show disorders adjacent to all currently displayed proteins/genes ON."
+ tooltipOff="Show disorders adjacent to all currently displayed proteins/genes OFF."
+ [smallStyle]="smallStyle"
+ [value]="adjacentDisordersProtein"
+ (valueChange)="updateAdjacentProteinDisorders($event)"
+ ></app-toggle>
+ <app-toggle
+ class="footer-buttons network-footer-toolbar-element"
+ textOn="Disorders (drugs)"
+ textOff="Off"
+ tooltipOn="Show disorders adjacent to all currently displayed drugs ON."
+ tooltipOff="Show disorders adjacent to all currently displayed drugs OFF."
+ [smallStyle]="smallStyle"
+ [value]="adjacentDisordersDrug"
+ [disabled]="!hasDrugsLoaded()"
+ (valueChange)="updateAdjacentDrugDisorders($event)"
+ ></app-toggle>
+ <app-toggle
+ class="footer-buttons network-footer-toolbar-element"
+ textOn="Animation"
+ textOff="Off"
+ tooltipOn="Enable the network animation."
+ tooltipOff="Disable the network animation and freeze nodes."
+ [smallStyle]="smallStyle"
+ [value]="physicsEnabled"
+ (valueChange)="updatePhysicsEnabled($event)"
+ ></app-toggle>
+ </div>
+ </footer>
+ </div>
+ </div>
+ </div>
+ <!-- End network block -->
+
<div class="is-hidden-tablet mobile-fallback">
Sorry, CoVex is not available for mobile phones. To find information
about CoVex, please check the <a routerLink="/about">About</a> page or
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 0f6822b9bbd51614f9178e41208849d2a8549554..cbc9220e7bb9d04381f60d9778eb7d8f17c1d1d6 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -77,22 +77,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
updateNetworkFlag = true;
} else if (key === 'interactions') {
this.getInteractions(configObj[key]);
- } else if (key === 'showLeftSidebar') {
- if (configObj[key]) {
- // shrink main column
- document.getElementById('main-column').classList.remove('leftgone');
- } else {
- // extend main column
- document.getElementById('main-column').classList.add('leftgone');
- }
- } else if (key === 'showRightSidebar') {
- if (configObj[key]) {
- // shrink main column
- document.getElementById('main-column').classList.remove('rightgone');
- } else {
- // extend main column
- document.getElementById('main-column').classList.add('rightgone');
- }
}
}
// trigger updates on config e.g. in legend
diff --git a/src/index.html b/src/index.html
index 95e57fd83241aee46db6a9c08ac0eb17ea12783c..374002608794686c2894db9504fb431bd4f7f94b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,8 +12,7 @@
<input type="checkbox" onclick=changeConfigStr('{"showOverview":'+this.checked+'}') checked /> Show overview<br>
<input type="checkbox" onclick=changeConfigStr('{"showQuery":'+this.checked+'}') /> Show query<br>
-<input type="checkbox" onclick=changeConfigStr('{"showLeftSidebar":'+this.checked+'}') checked /> Show left sidebar<br>
-<input type="checkbox" onclick=changeConfigStr('{"showRightSidebar":'+this.checked+'}') checked /> Show right sidebar<br>
+<!-- <input type="checkbox" onclick=changeConfigStr('{"showSidebar":'+this.checked+'}') checked /> Show sidebar<br> -->
<input type="checkbox" onclick=changeConfigStr('{"showItemSelector":'+this.checked+'}') checked /> Show ItemSelector<br>
<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') /> Show SimpleAnalysis<br>
<input type="checkbox" onclick=changeConfigStr('{"showAdvAnalysis":'+this.checked+'}') checked /> Show Advanced Analysis<br>
@@ -29,6 +28,8 @@
<button onclick=changeConfigStr('{"legendPos":"left"}') > Legend to Left </button> <br>
<button onclick=changeConfigStr('{"legendPos":"right"}') > Legend to Right </button> <br>
<button onclick=changeConfigStr('{"interactions":"omnipath"}') >Get Omnipath Interactions </button> <br>
+<button onclick=changeConfigStr('{"sidebarPos":"left"}') > Mode sidebar to left</button><br>
+<button onclick=changeConfigStr('{"sidebarPos":"right"}') > Move sidebr to right</button><br>
<button onclick="initTaskEventListener()">Init Task-Eventlistener</button> <br>
<input id="taskID" type="text" /> <button onclick=loadTaskID(document.getElementById("taskID").value) class="button is-primary" >Load TaskID</button> <br>
@@ -44,7 +45,7 @@
<network-expander id="netexp1"
pluginId="2"
- config='{"showSimpleAnalysis":true, "nodeGroups":{"patient":{"type":"patient","color":"black","font":{"color":"#ffffff"},"groupName":"Patient","shape":"image","image":"https://static.thenounproject.com/png/22780-200.png"},"condition":{"type":"condition","color":"black","font":{"color":"black"},"groupName":"Condition","shape":"text"},"important":{"type":"gene","color":"#ff881f","font":{"color":"#000000"},"groupName":"Important Gene","shape":"star"},"gene":{"type":"gene","color":"#4da300","font":{"color":"#000000"},"groupName":"Gene","shape":"circle"},"foundDrug":{"type":"drug","color":{"border":"#F12590","background":"#F12590","highlight":{"border":"#F12590","background":"#F12590"}},"font":{"color":"#f0f0f0"},"groupName":"Drug","shape":"diamond"}},"edgeGroups":{"genotype":{"color":"black","groupName":"Relevant Gene"},"has-condition":{"color":"#000000","groupName":"Has Condition","dashes":[2,2]},"default":{"color":"#000000","groupName":"default edge"},"ggi":{"color":"#000000","groupName":"Interaction","dashes":[3,2]}},"identifier":"symbol","title":"Breast cancer example network","nodeShadow":true,"edgeShadow":false,"autofillEdges":false,"showLegend":true}'
+ config='{"showLeftSidebar": true, "showSimpleAnalysis":true, "nodeGroups":{"patient":{"type":"patient","color":"black","font":{"color":"#ffffff"},"groupName":"Patient","shape":"image","image":"https://static.thenounproject.com/png/22780-200.png"},"condition":{"type":"condition","color":"black","font":{"color":"black"},"groupName":"Condition","shape":"text"},"important":{"type":"gene","color":"#ff881f","font":{"color":"#000000"},"groupName":"Important Gene","shape":"star"},"gene":{"type":"gene","color":"#4da300","font":{"color":"#000000"},"groupName":"Gene","shape":"circle"},"foundDrug":{"type":"drug","color":{"border":"#F12590","background":"#F12590","highlight":{"border":"#F12590","background":"#F12590"}},"font":{"color":"#f0f0f0"},"groupName":"Drug","shape":"diamond"}},"edgeGroups":{"genotype":{"color":"black","groupName":"Relevant Gene"},"has-condition":{"color":"#000000","groupName":"Has Condition","dashes":[2,2]},"default":{"color":"#000000","groupName":"default edge"},"ggi":{"color":"#000000","groupName":"Interaction","dashes":[3,2]}},"identifier":"symbol","title":"Breast cancer example network","nodeShadow":true,"edgeShadow":false,"autofillEdges":false,"showLegend":true}'
network='{"nodes":[{"id":"patient-1","group":"patient","x":592,"y":446},{"id":"patient-2","group":"patient","x":235,"y":87},{"id":"patient-3","group":"patient","x":105,"y":369},{"id":"ATM","label":"ATM","group":"gene","x":289,"y":242},{"id":"BARD1","label":"BARD1","group":"gene","x":44,"y":250},{"id":"BRCA1","label":"BRCA1","group":"gene","x":466,"y":576},{"id":"BRCA2","label":"BRCA2","group":"gene","x":507,"y":285},{"id":"BRIP1","label":"BRIP1","group":"gene","x":54,"y":474},{"id":"CHEK2","label":"CHEK2","group":"gene","x":216,"y":590},{"id":"CDH1","label":"CDH1","group":"gene","x":320,"y":-57},{"id":"NF1","label":"NF1","group":"gene","x":481,"y":111},{"id":"NBN","label":"NBN","group":"gene","x":-57,"y":314},{"id":"PALB2","label":"PALB2","group":"gene","x":450,"y":190},{"id":"PTEN","label":"PTEN","group":"important","x":305,"y":494},{"id":"RAD51C","label":"RAD51C","group":"gene","x":182,"y":-90},{"id":"RAD51D","label":"RAD51D","group":"gene","x":368,"y":73},{"id":"STK11","label":"STK11","group":"gene","x":686,"y":330},{"id":"TP53","label":"TP53","group":"important","x":333,"y":316},{"id":"subtype-1","label":"Subtype 1","group":"condition","x":556,"y":171},{"id":"subtype-2","label":"Subtype 2","group":"condition","x":-87,"y":221}],"edges":[{"from":"BRCA1","to":"BRCA2","group":"ggi"},{"from":"ATM","to":"BARD1","group":"ggi"},{"from":"BRCA1","to":"CHEK2","group":"ggi"},{"from":"RAD51C","to":"RAD51D","group":"ggi"},{"from":"STK11","to":"TP53","group":"ggi"},{"from":"TP53","to":"PALB2","group":"ggi"},{"from":"TP53","to":"RAD51D","group":"ggi"},{"from":"TP53","to":"NF1","group":"ggi"},{"from":"TP53","to":"BRCA1","group":"ggi"},{"from":"TP53","to":"BRCA2","group":"ggi"},{"from":"PTEN","to":"BRCA1","group":"ggi"},{"from":"PTEN","to":"BRCA2","group":"ggi"},{"from":"TP53","to":"PTEN","group":"ggi"},{"from":"ATM","to":"PTEN","group":"ggi"},{"from":"CDH1","to":"RAD51D","group":"ggi"},{"from":"CDH1","to":"PALB2","group":"ggi"},{"from":"NBN","to":"BRIP1","group":"ggi"},{"from":"BRIP1","to":"PTEN","group":"ggi"},{"from":"patient-1","to":"BRCA1","group":"genotype"},{"from":"patient-1","to":"TP53","group":"genotype"},{"from":"patient-1","to":"BRCA2","group":"genotype"},{"from":"patient-1","to":"PTEN","group":"genotype"},{"from":"patient-2","to":"TP53","group":"genotype"},{"from":"patient-2","to":"NF1","group":"genotype"},{"from":"patient-2","to":"BARD1","group":"genotype"},{"from":"patient-3","to":"TP53","group":"genotype"},{"from":"patient-3","to":"PTEN","group":"genotype"},{"from":"patient-3","to":"NBN","group":"genotype"},{"from":"patient-1","to":"subtype-1","group":"has-condition"},{"from":"patient-2","to":"subtype-1","group":"has-condition"},{"from":"patient-3","to":"subtype-2","group":"has-condition"}]}'>
}'></network-expander>
</div>
diff --git a/src/stylesheets/styles.scss b/src/stylesheets/styles.scss
index 7d7f848fe3c09655c10c3cc913f16bfcf45dfa86..ca6de85d304263e71913cf8e395b813ca3b6d462 100644
--- a/src/stylesheets/styles.scss
+++ b/src/stylesheets/styles.scss
@@ -104,38 +104,24 @@
margin-left: 15px;
}
-
div.covex.sidebar {
height: $height;
overflow-y: auto;
overflow-x: hidden;
- }
-
- div.covex.bar-left {
float: left;
- width: $sidebar-left-width;
- max-width: $sidebar-left-max-width;
- min-width: $sidebar-left-min-width;
+ width: $sidebar-width;
+ max-width: $sidebar-max-width;
+ min-width: $sidebar-min-width;
height: 100%;
- }
-
- div.covex.bar-right {
- float: left;
- width: $sidebar-right-width;
- max-width: $sidebar-right-max-width;
- min-width: $sidebar-right-min-width;
/* Hide scrollbar for Chrome, Safari and Opera */
&::-webkit-scrollbar {
display: none;
}
-
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
-
}
-
div.card.bar-small {
margin-bottom: 15px;
word-wrap: break-word;
@@ -169,18 +155,6 @@
.center-panel {
width: $main-width;
-
- &.leftgone {
- width: calc(#{$main-width} + max(#{$sidebar-left-width},#{$sidebar-left-min-width}));
- }
-
- &.rightgone {
- width: calc(#{$main-width} + max(#{$sidebar-right-width},#{$sidebar-right-min-width}));
- }
-
- &.rightgone.leftgone {
- width: calc(#{$main-width} + max(#{$sidebar-left-width},#{$sidebar-left-min-width}) + max(#{$sidebar-right-width},#{$sidebar-right-min-width}));
- }
}
div.card.network {
diff --git a/src/stylesheets/variables.scss b/src/stylesheets/variables.scss
index 03d7e80c7baa236d738382479774d3d708365401..37489817eceb9e414a59dc305ddc6d74d085507a 100644
--- a/src/stylesheets/variables.scss
+++ b/src/stylesheets/variables.scss
@@ -35,13 +35,10 @@ $legend-diamond-size: 25px;
$height: 100%;
// Settings Interface Components
-$sidebar-right-width: 25%;
-$sidebar-right-min-width: 235px;
-$sidebar-right-max-width: 320px;
-$sidebar-left-width: 18%;
-$sidebar-left-min-width: 200px;
-$sidebar-left-max-width: 260px;
-$main-width: calc(100% - (max(#{$sidebar-left-width},#{$sidebar-left-min-width}) + max(#{$sidebar-right-width},#{$sidebar-right-min-width})));
+$sidebar-width: 25%;
+$sidebar-min-width: 235px;
+$sidebar-max-width: 320px;
+$main-width: calc(100% - (max(#{$sidebar-width},#{$sidebar-min-width})));
// settings for different screen sizes