Skip to content
Snippets Groups Projects
Commit c2ea1bea authored by AndiMajore's avatar AndiMajore
Browse files

adaptive styling

parent acd0e73a
No related branches found
No related tags found
No related merge requests found
...@@ -37,7 +37,7 @@ import { NetworkLegendComponent } from './components/network-legend/network-lege ...@@ -37,7 +37,7 @@ import { NetworkLegendComponent } from './components/network-legend/network-lege
InfoTileComponent, InfoTileComponent,
CustomProteinsComponent, CustomProteinsComponent,
AddExpressedProteinsComponent, AddExpressedProteinsComponent,
NetworkLegendComponent NetworkLegendComponent,
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
......
<div class="field has-addons"> <div class="field has-addons">
<p class="control has-tooltip"> <p class="control has-tooltip">
<button class="button is-rounded has-tooltip" [attr.data-tooltip]="tooltipOn" [class.is-primary]="value" (click)="toggle(true)"> <button class="button is-rounded has-tooltip" [attr.data-tooltip]="tooltipOn" [class.is-primary]="value" (click)="toggle(true)" [ngClass]="{'button-small':smallStyle}">
<span class="icon is-small"> <span class="icon is-small">
<i class="fa {{iconOn}}"></i> <i class="fa {{iconOn}}"></i>
</span> </span>
<span>{{textOn}}</span> <span [ngClass]="{'text-small':smallStyle}" >{{textOn}}</span>
</button> </button>
</p> </p>
<p class="control"> <p class="control">
<button class="button is-rounded has-tooltip" [attr.data-tooltip]="tooltipOff" [class.is-primary]="!value" (click)="toggle(false)"> <button class="button is-rounded has-tooltip" [attr.data-tooltip]="tooltipOff" [class.is-primary]="!value" (click)="toggle(false)" [ngClass]="{'button-small':smallStyle}">
<span>{{textOff}}</span> <span [ngClass]="{'text-small':smallStyle}">{{textOff}}</span>
<span *ngIf="iconOff" class="icon is-small"> <span *ngIf="iconOff" class="icon is-small">
<i class="fa {{iconOff}}"></i> <i class="fa {{iconOff}}"></i>
</span> </span>
......
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; import {Component, Directive, EventEmitter, Input, OnInit, Output} from '@angular/core';
@Component({ @Component({
selector: 'app-toggle', selector: 'app-toggle',
templateUrl: './toggle.component.html', templateUrl: './toggle.component.html',
styleUrls: ['./toggle.component.scss'] styleUrls: ['./toggle.component.scss', '../../pages/explorer-page/explorer-page.component.scss']
}) })
export class ToggleComponent implements OnInit { export class ToggleComponent implements OnInit {
...@@ -15,6 +15,8 @@ export class ToggleComponent implements OnInit { ...@@ -15,6 +15,8 @@ export class ToggleComponent implements OnInit {
@Input() tooltipOn: string; @Input() tooltipOn: string;
@Input() tooltipOff: string; @Input() tooltipOff: string;
@Input() smallStyle: boolean;
@Input() value: boolean; @Input() value: boolean;
@Output() valueChange = new EventEmitter<boolean>(); @Output() valueChange = new EventEmitter<boolean>();
......
<div class="is-hidden-mobile fullheight" [style.color]="textColor"> <div id="appWindow" class="is-hidden-mobile fullheight" [style.color]="textColor" (window:resize)="onResize($event)">
<app-launch-analysis [(show)]="showAnalysisDialog" <app-launch-analysis [(show)]="showAnalysisDialog"
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<!-- Start left sidebar --> <!-- Start left sidebar -->
<div *ngIf="myConfig.showLeftSidebar" class="covex sidebar bar-left"> <div *ngIf="myConfig.showLeftSidebar" class="covex sidebar bar-left">
<div *ngIf="myConfig.showOverview" class="card bar-large"> <div *ngIf="myConfig.showOverview" class="card bar-large" [ngClass]="{'b-text-small':smallStyle}">
<header class="card-header"> <header class="card-header">
<p class="card-header-title"> <p class="card-header-title">
<span class="icon"> <span class="icon">
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
</div> </div>
</div> </div>
<div *ngIf="myConfig.showQuery" class="card bar-large"> <div *ngIf="myConfig.showQuery" class="card bar-large" [ngClass]="{'b-text-small':smallStyle}">
<header class="card-header"> <header class="card-header">
<p class="card-header-title"> <p class="card-header-title">
<span class="icon"> <span class="icon">
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
</div> </div>
<!-- Start network block --> <!-- Start network block -->
<div class="covex network" id="main-column"> <div class="covex network center-panel" id="main-column">
<div class="analysis-view" *ngIf="selectedAnalysisToken"> <div class="analysis-view" *ngIf="selectedAnalysisToken">
<app-analysis-panel [(token)]="selectedAnalysisToken" <app-analysis-panel [(token)]="selectedAnalysisToken"
...@@ -123,12 +123,13 @@ ...@@ -123,12 +123,13 @@
</div> </div>
<footer *ngIf="myConfig.showFooter" class="card-footer toolbar explorer-footer"> <footer *ngIf="myConfig.showFooter" class="card-footer toolbar explorer-footer center-panel" [ngClass]="{'footer-small':smallStyle}">
<button (click)="toCanvas()" class="button is-primary is-rounded has-tooltip" <button (click)="toCanvas()" class="button is-primary is-rounded has-tooltip"
data-tooltip="Take a screenshot of the current network."> data-tooltip="Take a screenshot of the current network.">
<span class="icon"> <span class="icon">
<i class="fas fa-camera" aria-hidden="true"></i> <i class="fas fa-camera" aria-hidden="true"></i>
</span> <span>Screenshot</span> </span>
<span [ngClass]="{'text-normal':smallStyle}">Screenshot</span>
</button> </button>
<div class="footer-buttons dropdown is-up" [class.is-active]="expressionExpanded"> <div class="footer-buttons dropdown is-up" [class.is-active]="expressionExpanded">
...@@ -136,8 +137,8 @@ ...@@ -136,8 +137,8 @@
<button (click)="expressionExpanded=!expressionExpanded" <button (click)="expressionExpanded=!expressionExpanded"
class="button is-rounded is-primary" [class.is-outlined]="!selectedTissue" class="button is-rounded is-primary" [class.is-outlined]="!selectedTissue"
aria-haspopup="true" aria-controls="dropdown-menu" aria-haspopup="true" aria-controls="dropdown-menu"
data-tooltip="Tissue expression data is provided by the GTEx project."> data-tooltip="Tissue expression data is provided by the GTEx project." [ngClass]="{'button-small':smallStyle}">
<span *ngIf="!selectedTissue">Tissue</span> <span *ngIf="!selectedTissue" [ngClass]="{'text-small':smallStyle}">Tissue</span>
<span *ngIf="selectedTissue">{{selectedTissue.name}}</span> <span *ngIf="selectedTissue">{{selectedTissue.name}}</span>
<span class="icon is-small"> <span class="icon is-small">
<i class="fas" <i class="fas"
...@@ -168,6 +169,7 @@ ...@@ -168,6 +169,7 @@
<app-toggle class="footer-buttons" textOn="Animation On" textOff="Off" <app-toggle class="footer-buttons" textOn="Animation On" textOff="Off"
tooltipOn="Enable the network animation." tooltipOn="Enable the network animation."
tooltipOff="Disable the network animation and freeze nodes." tooltipOff="Disable the network animation and freeze nodes."
[smallStyle]="smallStyle"
[value]="physicsEnabled" (valueChange)="updatePhysicsEnabled($event)"></app-toggle> [value]="physicsEnabled" (valueChange)="updatePhysicsEnabled($event)"></app-toggle>
</footer> </footer>
</div> </div>
...@@ -178,7 +180,7 @@ ...@@ -178,7 +180,7 @@
<div *ngIf="myConfig.showRightSidebar" class="covex sidebar bar-right"> <div *ngIf="myConfig.showRightSidebar" class="covex sidebar bar-right">
<div *ngIf="myConfig.showItemSelector" class="card bar-large"> <div *ngIf="myConfig.showItemSelector" class="card bar-large">
<header class="card-header"> <header class="card-header" [ngClass]="{'b-text-small':smallStyle}">
<p class="card-header-title"> <p class="card-header-title">
<span class="icon"> <span class="icon">
<i *ngIf="!selectedWrapper" class="fas fa-info" aria-hidden="true"></i> <i *ngIf="!selectedWrapper" class="fas fa-info" aria-hidden="true"></i>
...@@ -208,7 +210,7 @@ ...@@ -208,7 +210,7 @@
</div> </div>
<div *ngIf="myConfig.showSimpleAnalysis" class="card bar-large"> <div *ngIf="myConfig.showSimpleAnalysis" class="card bar-large">
<header class="card-header"> <header class="card-header" [ngClass]="{'b-text-small':smallStyle}">
<p class="card-header-title"> <p class="card-header-title">
<span class="icon"> <span class="icon">
<i class="fas fa-flask" aria-hidden="true"></i> <i class="fas fa-flask" aria-hidden="true"></i>
...@@ -237,7 +239,7 @@ ...@@ -237,7 +239,7 @@
<i class="fa fa-capsules" *ngIf="!analysis.isLaunchingQuick()"></i> <i class="fa fa-capsules" *ngIf="!analysis.isLaunchingQuick()"></i>
<i class="fa fa-spin fa-spinner" *ngIf="analysis.isLaunchingQuick()"></i> <i class="fa fa-spin fa-spinner" *ngIf="analysis.isLaunchingQuick()"></i>
</span> </span>
<span> <span [ngClass]="{'text-normal':smallStyle}">
Quick Start Quick Start
</span> </span>
</button> </button>
...@@ -251,7 +253,7 @@ ...@@ -251,7 +253,7 @@
<div class="digit" *ngIf="analysis.getCount() == 0">1</div> <div class="digit" *ngIf="analysis.getCount() == 0">1</div>
<div class="digit" *ngIf="analysis.getCount() > 0"><i class="fa fa-check"></i></div> <div class="digit" *ngIf="analysis.getCount() > 0"><i class="fa fa-check"></i></div>
<div> <div>
<span>Select Proteins</span> <span [ngClass]="{'text-normal':smallStyle}">Select Proteins</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -266,7 +268,7 @@ ...@@ -266,7 +268,7 @@
<i class="fa fa-capsules" *ngIf="!analysis.isLaunchingQuick()"></i> <i class="fa fa-capsules" *ngIf="!analysis.isLaunchingQuick()"></i>
<i class="fa fa-spin fa-spinner" *ngIf="analysis.isLaunchingQuick()"></i> <i class="fa fa-spin fa-spinner" *ngIf="analysis.isLaunchingQuick()"></i>
</span> </span>
<span> <span [ngClass]="{'text-normal':smallStyle}">
{{ myConfig.taskName }} {{ myConfig.taskName }}
</span> </span>
</button> </button>
...@@ -279,7 +281,7 @@ ...@@ -279,7 +281,7 @@
</div> </div>
<div *ngIf="myConfig.showAdvAnalysis" class="card bar-large"> <div *ngIf="myConfig.showAdvAnalysis" class="card bar-large">
<header class="card-header"> <header class="card-header" [ngClass]="{'b-text-small':smallStyle}">
<p class="card-header-title"> <p class="card-header-title">
<span class="icon"> <span class="icon">
<i class="fas fa-flask" aria-hidden="true"></i> <i class="fas fa-flask" aria-hidden="true"></i>
...@@ -301,7 +303,7 @@ ...@@ -301,7 +303,7 @@
<button (click)="analysisDialogTarget = 'drug-target'; showAnalysisDialog = true;" <button (click)="analysisDialogTarget = 'drug-target'; showAnalysisDialog = true;"
class="button is-primary is-fullwidth is-rounded has-tooltip" class="button is-primary is-fullwidth is-rounded has-tooltip"
data-tooltip="Find drug targets for the selected proteins." data-tooltip="Find drug targets for the selected proteins."
[disabled]="analysis.getCount() === 0"> [disabled]="analysis.getCount() === 0" [ngClass]="{'text-small':smallStyle}">
<span class="icon"> <span class="icon">
<i class="fa fa-crosshairs"></i> <i class="fa fa-crosshairs"></i>
</span> </span>
...@@ -316,7 +318,7 @@ ...@@ -316,7 +318,7 @@
<button (click)="analysisDialogTarget = 'drug'; showAnalysisDialog = true;" <button (click)="analysisDialogTarget = 'drug'; showAnalysisDialog = true;"
class="button is-primary is-fullwidth is-rounded has-tooltip" class="button is-primary is-fullwidth is-rounded has-tooltip"
data-tooltip="Find drugs for the selected proteins." data-tooltip="Find drugs for the selected proteins."
[disabled]="analysis.getCount() === 0"> [disabled]="analysis.getCount() === 0" [ngClass]="{'text-small':smallStyle}">
<span class="icon"> <span class="icon">
<i class="fa fa-capsules"></i> <i class="fa fa-capsules"></i>
</span> </span>
...@@ -334,7 +336,7 @@ ...@@ -334,7 +336,7 @@
<span class="icon"> <span class="icon">
<i class="fa fa-external-link-alt"></i> <i class="fa fa-external-link-alt"></i>
</span> </span>
<span> <span [ngClass]="{'text-small':smallStyle}">
Enrichment Analysis Enrichment Analysis
</span> </span>
</a> </a>
...@@ -344,7 +346,7 @@ ...@@ -344,7 +346,7 @@
<span class="icon"> <span class="icon">
<i class="fa fa-external-link-alt"></i> <i class="fa fa-external-link-alt"></i>
</span> </span>
<span> <span [ngClass]="{'text-small':smallStyle}">
Enrichment Analysis Enrichment Analysis
</span> </span>
</a> </a>
...@@ -355,7 +357,7 @@ ...@@ -355,7 +357,7 @@
</div> </div>
<div *ngIf="myConfig.showTasks" class="card bar-large"> <div *ngIf="myConfig.showTasks" class="card bar-large">
<header class="card-header"> <header class="card-header" [ngClass]="{'b-text-small':smallStyle}">
<p class="card-header-title"> <p class="card-header-title">
<span class="icon"> <span class="icon">
<i class="fas fa-tasks" aria-hidden="true"></i> <i class="fas fa-tasks" aria-hidden="true"></i>
...@@ -390,7 +392,7 @@ ...@@ -390,7 +392,7 @@
</div> </div>
<div *ngIf="myConfig.showSelection" class="card bar-large"> <div *ngIf="myConfig.showSelection" class="card bar-large">
<header class="card-header"> <header class="card-header" [ngClass]="{'b-text-small':smallStyle}">
<p class="card-header-title"> <p class="card-header-title">
<span class="icon"> <span class="icon">
<i class="fas fa-filter" aria-hidden="true"></i> <i class="fas fa-filter" aria-hidden="true"></i>
...@@ -405,7 +407,7 @@ ...@@ -405,7 +407,7 @@
</a> </a>
</header> </header>
<div *ngIf="collapseSelection" class="seed-selection"> <div *ngIf="collapseSelection" class="seed-selection" [ngClass]="{'text-normal':smallStyle}">
<div class="card-content overflow"> <div class="card-content overflow">
<table class="table selection-table" *ngIf="analysis.getCount() > 0"> <table class="table selection-table" *ngIf="analysis.getCount() > 0">
<thead> <thead>
......
...@@ -48,3 +48,22 @@ ...@@ -48,3 +48,22 @@
padding: 3px; padding: 3px;
} }
} }
.text-small {
font-size: 11px;
}
.text-normal{
font-size:12px;
}
.b-text-small{
font-size:14px
}
.b-text-smaller{
font-size:12px
}
.button-small{
padding: 3px 10px 3px 10px;
}
import { import {
AfterViewInit, AfterViewInit,
Component, Component, Directive,
ElementRef, Input, ElementRef, HostListener, Input,
OnInit, OnInit,
ViewChild ViewChild
} from '@angular/core'; } from '@angular/core';
...@@ -29,6 +29,7 @@ declare var vis: any; ...@@ -29,6 +29,7 @@ declare var vis: any;
templateUrl: './explorer-page.component.html', templateUrl: './explorer-page.component.html',
styleUrls: ['./explorer-page.component.scss'], styleUrls: ['./explorer-page.component.scss'],
}) })
export class ExplorerPageComponent implements OnInit, AfterViewInit { export class ExplorerPageComponent implements OnInit, AfterViewInit {
private networkJSON = '{"nodes": [], "edges": []}'; private networkJSON = '{"nodes": [], "edges": []}';
...@@ -49,27 +50,24 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -49,27 +50,24 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
if (key === 'nodeGroups' || key === 'edgeGroups') { if (key === 'nodeGroups' || key === 'edgeGroups') {
this.myConfig[key] = {...this.myConfig[key], ...configObj[key]}; this.myConfig[key] = {...this.myConfig[key], ...configObj[key]};
continue; continue;
} } else if (key === 'interactions') {
else if (key === 'interactions') {
this.getInteractions(); this.getInteractions();
continue; continue;
} } else if (key === 'showLeftSidebar') {
else if (key === 'showLeftSidebar') {
if (configObj[key]) { if (configObj[key]) {
// shrink main column // shrink main column
document.getElementById('main-column').classList.remove('leftgone') document.getElementById('main-column').classList.remove('leftgone');
} else { } else {
// extend main column // extend main column
document.getElementById('main-column').classList.add('leftgone') document.getElementById('main-column').classList.add('leftgone');
} }
} } else if (key === 'showRightSidebar') {
else if (key === 'showRightSidebar') {
if (configObj[key]) { if (configObj[key]) {
// shrink main column // shrink main column
document.getElementById('main-column').classList.remove('rightgone') document.getElementById('main-column').classList.remove('rightgone');
} else { } else {
// extend main column // extend main column
document.getElementById('main-column').classList.add('rightgone') document.getElementById('main-column').classList.add('rightgone');
} }
...@@ -92,6 +90,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -92,6 +90,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
return this.networkJSON; return this.networkJSON;
} }
public windowWidth = 0;
public smallStyle = false;
public showDetails = false; public showDetails = false;
public selectedWrapper: Wrapper | null = null; public selectedWrapper: Wrapper | null = null;
...@@ -179,7 +180,13 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -179,7 +180,13 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
}); });
} }
@HostListener('window:resize', ['$event'])
onResize(event) {
this.setWindowWidth(event.target.innerWidth);
}
ngOnInit() { ngOnInit() {
this.setWindowWidth(document.getElementById('appWindow').getBoundingClientRect().width);
} }
async ngAfterViewInit() { async ngAfterViewInit() {
...@@ -208,7 +215,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -208,7 +215,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
console.log( this.myConfig.identifier) console.log( this.myConfig.identifier)
console.log(network.nodes) console.log(network.nodes)
if (network.nodes.length) { if (network.nodes.length) {
network.nodes = await this.netex.mapNodes(network.nodes, this.myConfig.identifier) network.nodes = await this.netex.mapNodes(network.nodes, this.myConfig.identifier);
} }
console.log('after') console.log('after')
console.log(network.nodes) console.log(network.nodes)
...@@ -217,6 +224,11 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -217,6 +224,11 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.edges = network.edges; this.edges = network.edges;
} }
private setWindowWidth(width: number) {
this.windowWidth = width;
this.smallStyle = this.windowWidth < 1250;
}
private zoomToNode(id: string) { private zoomToNode(id: string) {
this.nodeData.nodes.getIds(); this.nodeData.nodes.getIds();
const coords = this.networkInternal.getPositions(id)[id]; const coords = this.networkInternal.getPositions(id)[id];
...@@ -368,9 +380,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -368,9 +380,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
node.id = customNode.id; node.id = customNode.id;
node.x = customNode.x; node.x = customNode.x;
node.y = customNode.y; node.y = customNode.y;
node.uniprotAc = customNode.uniprotAc node.uniprotAc = customNode.uniprotAc;
node.netexId = customNode.netexId node.netexId = customNode.netexId;
console.log(node) // console.log(node)
return node; return node;
} }
...@@ -385,7 +397,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -385,7 +397,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
return edge; return edge;
} }
private mapDataToNodes(data: ProteinNetwork): { nodes: any[], edges: any[] } { private mapDataToNodes(data: ProteinNetwork): { nodes: any[], edges: any[]; } {
const nodes = []; const nodes = [];
const edges = []; const edges = [];
......
...@@ -4,7 +4,8 @@ ...@@ -4,7 +4,8 @@
export const environment = { export const environment = {
production: false, production: false,
backend: 'http://10.162.163.20:8001/', // backend: 'http://10.162.163.20:8001/',
backend: 'http://localhost:8001/'
}; };
/* /*
...@@ -14,4 +15,4 @@ export const environment = { ...@@ -14,4 +15,4 @@ export const environment = {
* This import should be commented out in production mode because it will have a negative impact * This import should be commented out in production mode because it will have a negative impact
* on performance if an error is thrown. * on performance if an error is thrown.
*/ */
// import 'zone.js/dist/zone-error'; // Included with Angular CLI. import 'zone.js/dist/zone-error'; // Included with Angular CLI.
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
"legendUrl": "https://exbio.wzw.tum.de/covex/assets/leg1.png" "legendUrl": "https://exbio.wzw.tum.de/covex/assets/leg1.png"
}' }'
network= '{"nodes": [{"Name": "SFTPD", "d": 2.1770573418095793, "color": "rgb(51, 204, 51)", "type": "square", "label": "SFTPD", "x": -0.31956085006193347, "y": -0.7406466643934345, "size": 10, "id": "SFTPD", "group": 1.5, "name": "SFTPD"}, {"Name": "FGG", "d": 3.0919984753400342, "color": "rgb(51, 204, 51)", "type": "square", "label": "FGG", "x": 0.07173702374771213, "y": -0.5272230319152038, "size": 10, "id": "FGG", "group": 1.5, "name": "FGG"}, {"Name": "FGB", "d": 1.7586794205006901, "color": "rgb(51, 204, 51)", "type": "square", "label": "FGB", "x": 0.1862980578421022, "y": -0.5379861465902673, "size": 10, "id": "FGB", "group": 1.5, "name": "FGB"}, {"Name": "CFI", "d": 1.6225326254583097, "color": "rgb(51, 204, 51)", "type": "square", "label": "CFI", "x": 0.6812917849238023, "y": -0.2648075564231581, "size": 10, "id": "CFI", "group": 1.5, "name": "CFI"}, {"Name": "C5", "d": 1.9059032485708656, "color": "rgb(51, 204, 51)", "type": "square", "label": "C5", "x": 0.20310846566736865, "y": -0.14000473240635625, "size": 10, "id": "C5", "group": 1.5, "name": "C5"}, {"Name": "C3", "d": 1.2907638114922122, "color": "rgb(102, 255, 51)", "type": "square", "label": "C3", "x": 0.41046161409628396, "y": -0.22972594268593455, "size": 10, "id": "C3", "group": 1.5, "name": "C3"}, {"Name": "C4BPA", "d": 2.8208380551350274, "color": "rgb(51, 204, 51)", "type": "square", "label": "C4BPA", "x": 0.32691273713760793, "y": -0.44002575152714773, "size": 10, "id": "C4BPA", "group": 1.5, "name": "C4BPA"}, {"Name": "CPB2", "d": 1.7868069138182534, "color": "rgb(51, 204, 51)", "type": "square", "label": "CPB2", "x": 0.005918725090868364, "y": -0.21370077890922853, "size": 10, "id": "CPB2", "group": 1.5, "name": "CPB2"}, {"Name": "FN1", "d": 0.5457280631776094, "color": "rgb(153, 255, 51)", "type": "square", "label": "FN1", "x": 0.10773970106896563, "y": -0.26910493560594656, "size": 10, "id": "FN1", "group": 0.5, "name": "FN1"}, {"Name": "DCN", "d": 0.07523726540508413, "color": "rgb(204, 255, 51)", "type": "square", "label": "DCN", "x": -0.1449109959561148, "y": -0.5406452007869201, "size": 10, "id": "DCN", "group": 0.5, "name": "DCN"}, {"Name": "KRT13", "d": -5.884559807904592, "color": "rgb(255, 0, 0)", "type": "circle", "label": "KRT13", "x": -0.5462663294859071, "y": 0.2179240739679362, "size": 10, "id": "KRT13", "group": 2.0, "name": "KRT13"}, {"Name": "KRT14", "d": -5.979503966095012, "color": "rgb(255, 0, 0)", "type": "circle", "label": "KRT14", "x": 0.20723970121617027, "y": 0.3335529310573068, "size": 10, "id": "KRT14", "group": 2.0, "name": "KRT14"}, {"Name": "KRT5", "d": -7.3912122103291935, "color": "rgb(255, 0, 0)", "type": "circle", "label": "KRT5", "x": 0.001680558082502895, "y": 0.1554556904769493, "size": 10, "id": "KRT5", "group": 2.0, "name": "KRT5"}, {"Name": "KRT6A", "d": -7.364973261442935, "color": "rgb(255, 0, 0)", "type": "circle", "label": "KRT6A", "x": -0.3511002998605662, "y": 0.3925879058088128, "size": 10, "id": "KRT6A", "group": 2.0, "name": "KRT6A"}, {"Name": "CSTA", "d": -3.8792306737039226, "color": "rgb(255, 0, 0)", "type": "circle", "label": "CSTA", "x": -0.010849204611034656, "y": 0.7467591168222204, "size": 10, "id": "CSTA", "group": 2.0, "name": "CSTA"}, {"Name": "DSP", "d": -1.7563342206781023, "color": "rgb(255, 153, 51)", "type": "circle", "label": "DSP", "x": -0.0678748213735474, "y": 0.39925246533037617, "size": 10, "id": "DSP", "group": -2.0, "name": "DSP"}, {"Name": "PI3", "d": -4.265528188882317, "color": "rgb(255, 0, 0)", "type": "circle", "label": "PI3", "x": 0.031056762567423294, "y": 1.0, "size": 10, "id": "PI3", "group": 2.0, "name": "PI3"}, {"Name": "KRT16", "d": -4.794121223753202, "color": "rgb(255, 0, 0)", "type": "circle", "label": "KRT16", "x": 0.03152510498669397, "y": 0.06575226291390532, "size": 10, "id": "KRT16", "group": 2.0, "name": "KRT16"}, {"Name": "KRT15", "d": -4.518290478769958, "color": "rgb(255, 0, 0)", "type": "circle", "label": "KRT15", "x": -0.2895261348950512, "y": 0.2654866500427342, "size": 10, "id": "KRT15", "group": 2.0, "name": "KRT15"}, {"Name": "KRT6B", "d": -5.5864948168835005, "color": "rgb(255, 0, 0)", "type": "circle", "label": "KRT6B", "x": -0.5348816001833466, "y": 0.32709964482335674, "size": 10, "id": "KRT6B", "group": 2.0, "name": "KRT6B"}], "edges": [{"from": "SFTPD", "to": "DCN", "group": "custom"}, {"from": "FGG", "to": "FGB", "group": "custom"}, {"from": "FGG", "to": "FN1", "group": "custom"}, {"from": "FGB", "to": "FN1", "group": "custom"}, {"from": "CFI", "to": "C3", "group": "custom"}, {"from": "C5", "to": "CPB2", "group": "custom"}, {"from": "C5", "to": "C3", "group": "custom"}, {"from": "C3", "to": "FN1", "group": "custom"}, {"from": "C4BPA", "to": "FN1", "group": "custom"}, {"from": "CPB2", "to": "FN1", "group": "custom"}, {"from": "FN1", "to": "KRT5", "group": "custom"}, {"from": "FN1", "to": "KRT16", "group": "custom"}, {"from": "FN1", "to": "DCN", "group": "custom"}, {"from": "KRT13", "to": "KRT6B", "group": "custom"}, {"from": "KRT13", "to": "KRT6A", "group": "custom"}, {"from": "KRT14", "to": "KRT5", "group": "custom"}, {"from": "KRT5", "to": "KRT15", "group": "custom"}, {"from": "KRT5", "to": "KRT16", "group": "custom"}, {"from": "KRT5", "to": "DSP", "group": "custom"}, {"from": "KRT6A", "to": "KRT15", "group": "custom"}, {"from": "KRT6A", "to": "DSP", "group": "custom"}, {"from": "CSTA", "to": "DSP", "group": "custom"}, {"from": "CSTA", "to": "PI3", "group": "custom"}, {"from": "DSP", "to": "KRT16", "group": "custom"}, {"from": "KRT15", "to": "KRT6B", "group": "custom"}]}' network= '{"nodes": [{"Name": "SFTPD", "d": 2.1770573418095793, "color": "rgb(51, 204, 51)", "type": "square", "label": "SFTPD", "x": -0.31956085006193347, "y": -0.7406466643934345, "size": 10, "id": "SFTPD", "group": 1.5, "name": "SFTPD"}, {"Name": "FGG", "d": 3.0919984753400342, "color": "rgb(51, 204, 51)", "type": "square", "label": "FGG", "x": 0.07173702374771213, "y": -0.5272230319152038, "size": 10, "id": "FGG", "group": 1.5, "name": "FGG"}, {"Name": "FGB", "d": 1.7586794205006901, "color": "rgb(51, 204, 51)", "type": "square", "label": "FGB", "x": 0.1862980578421022, "y": -0.5379861465902673, "size": 10, "id": "FGB", "group": 1.5, "name": "FGB"}, {"Name": "CFI", "d": 1.6225326254583097, "color": "rgb(51, 204, 51)", "type": "square", "label": "CFI", "x": 0.6812917849238023, "y": -0.2648075564231581, "size": 10, "id": "CFI", "group": 1.5, "name": "CFI"}, {"Name": "C5", "d": 1.9059032485708656, "color": "rgb(51, 204, 51)", "type": "square", "label": "C5", "x": 0.20310846566736865, "y": -0.14000473240635625, "size": 10, "id": "C5", "group": 1.5, "name": "C5"}, {"Name": "C3", "d": 1.2907638114922122, "color": "rgb(102, 255, 51)", "type": "square", "label": "C3", "x": 0.41046161409628396, "y": -0.22972594268593455, "size": 10, "id": "C3", "group": 1.5, "name": "C3"}, {"Name": "C4BPA", "d": 2.8208380551350274, "color": "rgb(51, 204, 51)", "type": "square", "label": "C4BPA", "x": 0.32691273713760793, "y": -0.44002575152714773, "size": 10, "id": "C4BPA", "group": 1.5, "name": "C4BPA"}, {"Name": "CPB2", "d": 1.7868069138182534, "color": "rgb(51, 204, 51)", "type": "square", "label": "CPB2", "x": 0.005918725090868364, "y": -0.21370077890922853, "size": 10, "id": "CPB2", "group": 1.5, "name": "CPB2"}, {"Name": "FN1", "d": 0.5457280631776094, "color": "rgb(153, 255, 51)", "type": "square", "label": "FN1", "x": 0.10773970106896563, "y": -0.26910493560594656, "size": 10, "id": "FN1", "group": 0.5, "name": "FN1"}, {"Name": "DCN", "d": 0.07523726540508413, "color": "rgb(204, 255, 51)", "type": "square", "label": "DCN", "x": -0.1449109959561148, "y": -0.5406452007869201, "size": 10, "id": "DCN", "group": 0.5, "name": "DCN"}, {"Name": "KRT13", "d": -5.884559807904592, "color": "rgb(255, 0, 0)", "type": "circle", "label": "KRT13", "x": -0.5462663294859071, "y": 0.2179240739679362, "size": 10, "id": "KRT13", "group": 2.0, "name": "KRT13"}, {"Name": "KRT14", "d": -5.979503966095012, "color": "rgb(255, 0, 0)", "type": "circle", "label": "KRT14", "x": 0.20723970121617027, "y": 0.3335529310573068, "size": 10, "id": "KRT14", "group": 2.0, "name": "KRT14"}, {"Name": "KRT5", "d": -7.3912122103291935, "color": "rgb(255, 0, 0)", "type": "circle", "label": "KRT5", "x": 0.001680558082502895, "y": 0.1554556904769493, "size": 10, "id": "KRT5", "group": 2.0, "name": "KRT5"}, {"Name": "KRT6A", "d": -7.364973261442935, "color": "rgb(255, 0, 0)", "type": "circle", "label": "KRT6A", "x": -0.3511002998605662, "y": 0.3925879058088128, "size": 10, "id": "KRT6A", "group": 2.0, "name": "KRT6A"}, {"Name": "CSTA", "d": -3.8792306737039226, "color": "rgb(255, 0, 0)", "type": "circle", "label": "CSTA", "x": -0.010849204611034656, "y": 0.7467591168222204, "size": 10, "id": "CSTA", "group": 2.0, "name": "CSTA"}, {"Name": "DSP", "d": -1.7563342206781023, "color": "rgb(255, 153, 51)", "type": "circle", "label": "DSP", "x": -0.0678748213735474, "y": 0.39925246533037617, "size": 10, "id": "DSP", "group": -2.0, "name": "DSP"}, {"Name": "PI3", "d": -4.265528188882317, "color": "rgb(255, 0, 0)", "type": "circle", "label": "PI3", "x": 0.031056762567423294, "y": 1.0, "size": 10, "id": "PI3", "group": 2.0, "name": "PI3"}, {"Name": "KRT16", "d": -4.794121223753202, "color": "rgb(255, 0, 0)", "type": "circle", "label": "KRT16", "x": 0.03152510498669397, "y": 0.06575226291390532, "size": 10, "id": "KRT16", "group": 2.0, "name": "KRT16"}, {"Name": "KRT15", "d": -4.518290478769958, "color": "rgb(255, 0, 0)", "type": "circle", "label": "KRT15", "x": -0.2895261348950512, "y": 0.2654866500427342, "size": 10, "id": "KRT15", "group": 2.0, "name": "KRT15"}, {"Name": "KRT6B", "d": -5.5864948168835005, "color": "rgb(255, 0, 0)", "type": "circle", "label": "KRT6B", "x": -0.5348816001833466, "y": 0.32709964482335674, "size": 10, "id": "KRT6B", "group": 2.0, "name": "KRT6B"}], "edges": [{"from": "SFTPD", "to": "DCN", "group": "custom"}, {"from": "FGG", "to": "FGB", "group": "custom"}, {"from": "FGG", "to": "FN1", "group": "custom"}, {"from": "FGB", "to": "FN1", "group": "custom"}, {"from": "CFI", "to": "C3", "group": "custom"}, {"from": "C5", "to": "CPB2", "group": "custom"}, {"from": "C5", "to": "C3", "group": "custom"}, {"from": "C3", "to": "FN1", "group": "custom"}, {"from": "C4BPA", "to": "FN1", "group": "custom"}, {"from": "CPB2", "to": "FN1", "group": "custom"}, {"from": "FN1", "to": "KRT5", "group": "custom"}, {"from": "FN1", "to": "KRT16", "group": "custom"}, {"from": "FN1", "to": "DCN", "group": "custom"}, {"from": "KRT13", "to": "KRT6B", "group": "custom"}, {"from": "KRT13", "to": "KRT6A", "group": "custom"}, {"from": "KRT14", "to": "KRT5", "group": "custom"}, {"from": "KRT5", "to": "KRT15", "group": "custom"}, {"from": "KRT5", "to": "KRT16", "group": "custom"}, {"from": "KRT5", "to": "DSP", "group": "custom"}, {"from": "KRT6A", "to": "KRT15", "group": "custom"}, {"from": "KRT6A", "to": "DSP", "group": "custom"}, {"from": "CSTA", "to": "DSP", "group": "custom"}, {"from": "CSTA", "to": "PI3", "group": "custom"}, {"from": "DSP", "to": "KRT16", "group": "custom"}, {"from": "KRT15", "to": "KRT6B", "group": "custom"}]}'
style="height: 100%; display: block;"></network-expander> style="height: 100%; width: 100vw; display: block;"></network-expander>
</div> </div>
<br> <br>
<br> <br>
......
...@@ -27,7 +27,9 @@ $info: $primary; ...@@ -27,7 +27,9 @@ $info: $primary;
} }
.explorer-footer{ .explorer-footer{
position: absolute; //position: absolute;
//overflow: auto;
width: $main-width;
bottom: 0; bottom: 0;
} }
...@@ -71,6 +73,8 @@ div.covex.sidebar { ...@@ -71,6 +73,8 @@ div.covex.sidebar {
div.covex.bar-left { div.covex.bar-left {
float: left; float: left;
width: $sidebar-left-width; width: $sidebar-left-width;
max-width:300px;
min-width:$sidebar-left-min-width;
height: 100%; height: 100%;
} }
...@@ -78,7 +82,8 @@ div.covex.bar-left { ...@@ -78,7 +82,8 @@ div.covex.bar-left {
div.covex.bar-right { div.covex.bar-right {
float: left; float: left;
width: $sidebar-right-width; width: $sidebar-right-width;
max-width:450px;
min-width:$sidebar-right-min-width;
/* Hide scrollbar for Chrome, Safari and Opera */ /* Hide scrollbar for Chrome, Safari and Opera */
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
...@@ -112,18 +117,22 @@ div.card-content.overflow { ...@@ -112,18 +117,22 @@ div.card-content.overflow {
} }
div.covex.network { div.covex.network {
width: $main-width;
height: 100%; height: 100%;
float: left; float: left;
position: relative; position: relative;
}
.center-panel{
width: $main-width;
&.leftgone{ &.leftgone{
width: calc(#{$main-width} + #{$sidebar-left-width}); width: calc(#{$main-width} + max(#{$sidebar-left-width},#{$sidebar-left-min-width}));
} }
&.rightgone{ &.rightgone{
width: calc(#{$main-width} + #{$sidebar-right-width}); width: calc(#{$main-width} + max(#{$sidebar-right-width},#{$sidebar-right-min-width}));
} }
&.rightgone.leftgone{ &.rightgone.leftgone{
width: calc(#{$main-width} + #{$sidebar-left-width} + #{$sidebar-right-width}); width: calc(#{$main-width} + max(#{$sidebar-left-width},#{$sidebar-left-min-width}) + max(#{$sidebar-right-width},#{$sidebar-right-min-width}));
} }
} }
......
...@@ -13,6 +13,8 @@ $height: 100%; ...@@ -13,6 +13,8 @@ $height: 100%;
$sidebar-right-width: 25%; $sidebar-right-width: 25%;
$sidebar-right-min-width: 210px;
$sidebar-left-width: 18%; $sidebar-left-width: 18%;
$main-width: calc(100% - #{$sidebar-left-width} - #{$sidebar-right-width}); $sidebar-left-min-width: 200px;
$main-width: calc(100% - (max(#{$sidebar-left-width},#{$sidebar-left-min-width}) + max(#{$sidebar-right-width},#{$sidebar-right-min-width})));
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment