Skip to content
Snippets Groups Projects
Commit e8af877d authored by Michael Hartung's avatar Michael Hartung
Browse files

merge sidebars, sidebar selection by user, legend smaller

parent f49102f6
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 285 additions and 323 deletions
src/app/components/network-legend/network-legend.component.html
+ 4
− 4
View file @ e8af877d
<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 }">&nbsp;{{ nodeGroup.value.groupName }}</td>
<td class="group-name">&nbsp;{{ 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 }">&nbsp;{{ nodeGroup.value.groupName }}</td>
<td class="group-name">&nbsp;{{ 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 }">&nbsp;{{ edgeGroup.value.groupName }}</td>
<td class="group-name">&nbsp;{{ edgeGroup.value.groupName }}</td>
</ng-container>
</tr>
</ng-container>
......
src/app/components/network-legend/network-legend.component.scss
+ 43
− 29
View file @ e8af877d
@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;
}
}
}
src/app/config.ts
+ 4
− 5
View file @ e8af877d
......@@ -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!
......
src/app/pages/explorer-page/explorer-page.component.html
+ 223
− 230
View file @ e8af877d
......@@ -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
......
src/app/pages/explorer-page/explorer-page.component.ts
+ 0
− 16
View file @ e8af877d
......@@ -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
......
src/index.html
+ 4
− 3
View file @ e8af877d
......@@ -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>
......
src/stylesheets/styles.scss
+ 3
− 29
View file @ e8af877d
......@@ -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 {
......
src/stylesheets/variables.scss
+ 4
− 7
View file @ e8af877d
......@@ -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
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment