From c2ea1beaa6f36c4fcb22f929266a3c39438feeda Mon Sep 17 00:00:00 2001
From: AndiMajore <andi.majore@googlemail.com>
Date: Thu, 27 May 2021 16:06:47 +0200
Subject: [PATCH] adaptive styling
---
src/app/app.module.ts | 2 +-
.../components/toggle/toggle.component.html | 8 +-
src/app/components/toggle/toggle.component.ts | 6 +-
.../explorer-page.component.html | 148 +++++++++---------
.../explorer-page.component.scss | 19 +++
.../explorer-page/explorer-page.component.ts | 72 +++++----
src/environments/environment.ts | 5 +-
src/index.html | 4 +-
src/styles.scss | 23 ++-
src/variables.scss | 4 +-
10 files changed, 169 insertions(+), 122 deletions(-)
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 24036dea..f643e12b 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -37,7 +37,7 @@ import { NetworkLegendComponent } from './components/network-legend/network-lege
InfoTileComponent,
CustomProteinsComponent,
AddExpressedProteinsComponent,
- NetworkLegendComponent
+ NetworkLegendComponent,
],
imports: [
BrowserModule,
diff --git a/src/app/components/toggle/toggle.component.html b/src/app/components/toggle/toggle.component.html
index ae728a9a..2dd13a83 100644
--- a/src/app/components/toggle/toggle.component.html
+++ b/src/app/components/toggle/toggle.component.html
@@ -1,15 +1,15 @@
<div class="field has-addons">
<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">
<i class="fa {{iconOn}}"></i>
</span>
- <span>{{textOn}}</span>
+ <span [ngClass]="{'text-small':smallStyle}" >{{textOn}}</span>
</button>
</p>
<p class="control">
- <button class="button is-rounded has-tooltip" [attr.data-tooltip]="tooltipOff" [class.is-primary]="!value" (click)="toggle(false)">
- <span>{{textOff}}</span>
+ <button class="button is-rounded has-tooltip" [attr.data-tooltip]="tooltipOff" [class.is-primary]="!value" (click)="toggle(false)" [ngClass]="{'button-small':smallStyle}">
+ <span [ngClass]="{'text-small':smallStyle}">{{textOff}}</span>
<span *ngIf="iconOff" class="icon is-small">
<i class="fa {{iconOff}}"></i>
</span>
diff --git a/src/app/components/toggle/toggle.component.ts b/src/app/components/toggle/toggle.component.ts
index 555e10dd..c3644b4a 100644
--- a/src/app/components/toggle/toggle.component.ts
+++ b/src/app/components/toggle/toggle.component.ts
@@ -1,9 +1,9 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Component, Directive, EventEmitter, Input, OnInit, Output} from '@angular/core';
@Component({
selector: 'app-toggle',
templateUrl: './toggle.component.html',
- styleUrls: ['./toggle.component.scss']
+ styleUrls: ['./toggle.component.scss', '../../pages/explorer-page/explorer-page.component.scss']
})
export class ToggleComponent implements OnInit {
@@ -15,6 +15,8 @@ export class ToggleComponent implements OnInit {
@Input() tooltipOn: string;
@Input() tooltipOff: string;
+ @Input() smallStyle: boolean;
+
@Input() value: boolean;
@Output() valueChange = new EventEmitter<boolean>();
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index f65146ad..54e118b0 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -1,4 +1,4 @@
-<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"
@@ -17,84 +17,84 @@
<!-- Start explorer -->
<div class="covex explorer">
- <!-- Start left sidebar -->
- <div *ngIf="myConfig.showLeftSidebar" class="covex sidebar bar-left">
+ <!-- Start left sidebar -->
+ <div *ngIf="myConfig.showLeftSidebar" class="covex sidebar bar-left">
- <div *ngIf="myConfig.showOverview" class="card bar-large">
- <header class="card-header">
- <p class="card-header-title">
+ <div *ngIf="myConfig.showOverview" class="card bar-large" [ngClass]="{'b-text-small':smallStyle}">
+ <header class="card-header">
+ <p class="card-header-title">
<span class="icon">
<i class="fas fa-info" aria-hidden="true"></i>
</span> Network Overview
- </p>
- <a (click)="collapseOverview= !collapseOverview" data-action="collapse"
- class="card-header-icon is-hidden-fullscreen" aria-label="more options">
+ </p>
+ <a (click)="collapseOverview= !collapseOverview" data-action="collapse"
+ class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
<i *ngIf="collapseOverview" class="fas fa-angle-down" aria-hidden="true"></i>
<i *ngIf="!collapseOverview" class="fas fa-angle-left" aria-hidden="true"></i> </span>
- </a>
- </header>
- <div *ngIf="collapseOverview">
- <div class="card-content">
- <nav class="level" *ngIf="proteinData">
-
- <!-- TO DO : CHANGE THIS LATER
- <div class="level-item has-text-centered">
- <div>
- <p class="heading">Viral<br>Proteins</p>
- <p class="title"> {{ proteinData.effects.length }}</p>
- </div>
- </div>
- -->
-
- <div class="level-item has-text-centered">
- <div>
- <p class="heading">Proteins</p>
- <p class="title">{{ proteinData.proteins.length }}</p>
- </div>
- </div>
- <div class="level-item has-text-centered">
- <div>
- <p class="heading">Interactions</p>
- <p class="title">{{ proteinData.edges.length }}</p>
- </div>
- </div>
- </nav>
+ </a>
+ </header>
+ <div *ngIf="collapseOverview">
+ <div class="card-content">
+ <nav class="level" *ngIf="proteinData">
+
+ <!-- TO DO : CHANGE THIS LATER
+ <div class="level-item has-text-centered">
+ <div>
+ <p class="heading">Viral<br>Proteins</p>
+ <p class="title"> {{ proteinData.effects.length }}</p>
+ </div>
+ </div>
+ -->
+
+ <div class="level-item has-text-centered">
+ <div>
+ <p class="heading">Proteins</p>
+ <p class="title">{{ proteinData.proteins.length }}</p>
+ </div>
</div>
- </div>
+ <div class="level-item has-text-centered">
+ <div>
+ <p class="heading">Interactions</p>
+ <p class="title">{{ proteinData.edges.length }}</p>
+ </div>
+ </div>
+ </nav>
</div>
+ </div>
+ </div>
- <div *ngIf="myConfig.showQuery" class="card bar-large">
- <header class="card-header">
- <p class="card-header-title">
+ <div *ngIf="myConfig.showQuery" class="card bar-large" [ngClass]="{'b-text-small':smallStyle}">
+ <header class="card-header">
+ <p class="card-header-title">
<span class="icon">
<i class="fas fa-search" aria-hidden="true"></i>
</span> Query Protein/Gene
- </p>
- <a (click)="collapseQuery = !collapseQuery" data-action="collapse"
- class="card-header-icon is-hidden-fullscreen" aria-label="more options">
+ </p>
+ <a (click)="collapseQuery = !collapseQuery" data-action="collapse"
+ class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
<i *ngIf="collapseQuery" class="fas fa-angle-down" aria-hidden="true"></i>
<i *ngIf="!collapseQuery" class="fas fa-angle-left" aria-hidden="true"></i>
</span>
- </a>
- </header>
- <div *ngIf="collapseQuery">
- <div class="card-content">
- <div class="field">
- <div class="control">
- <app-query-tile-component (selectItem)="queryAction($event)"
- [queryItems]="queryItems"></app-query-tile-component>
- </div>
- </div>
+ </a>
+ </header>
+ <div *ngIf="collapseQuery">
+ <div class="card-content">
+ <div class="field">
+ <div class="control">
+ <app-query-tile-component (selectItem)="queryAction($event)"
+ [queryItems]="queryItems"></app-query-tile-component>
</div>
</div>
</div>
</div>
+ </div>
+ </div>
<!-- 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">
<app-analysis-panel [(token)]="selectedAnalysisToken"
(showDetailsChange)="selectedWrapper = $event"
@@ -123,12 +123,13 @@
</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"
data-tooltip="Take a screenshot of the current network.">
<span class="icon">
<i class="fas fa-camera" aria-hidden="true"></i>
- </span> <span>Screenshot</span>
+ </span>
+ <span [ngClass]="{'text-normal':smallStyle}">Screenshot</span>
</button>
<div class="footer-buttons dropdown is-up" [class.is-active]="expressionExpanded">
@@ -136,8 +137,8 @@
<button (click)="expressionExpanded=!expressionExpanded"
class="button is-rounded is-primary" [class.is-outlined]="!selectedTissue"
aria-haspopup="true" aria-controls="dropdown-menu"
- data-tooltip="Tissue expression data is provided by the GTEx project.">
- <span *ngIf="!selectedTissue">Tissue</span>
+ data-tooltip="Tissue expression data is provided by the GTEx project." [ngClass]="{'button-small':smallStyle}">
+ <span *ngIf="!selectedTissue" [ngClass]="{'text-small':smallStyle}">Tissue</span>
<span *ngIf="selectedTissue">{{selectedTissue.name}}</span>
<span class="icon is-small">
<i class="fas"
@@ -168,6 +169,7 @@
<app-toggle class="footer-buttons" textOn="Animation On" textOff="Off"
tooltipOn="Enable the network animation."
tooltipOff="Disable the network animation and freeze nodes."
+ [smallStyle]="smallStyle"
[value]="physicsEnabled" (valueChange)="updatePhysicsEnabled($event)"></app-toggle>
</footer>
</div>
@@ -178,7 +180,7 @@
<div *ngIf="myConfig.showRightSidebar" class="covex sidebar bar-right">
<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">
<span class="icon">
<i *ngIf="!selectedWrapper" class="fas fa-info" aria-hidden="true"></i>
@@ -208,7 +210,7 @@
</div>
<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">
<span class="icon">
<i class="fas fa-flask" aria-hidden="true"></i>
@@ -237,7 +239,7 @@
<i class="fa fa-capsules" *ngIf="!analysis.isLaunchingQuick()"></i>
<i class="fa fa-spin fa-spinner" *ngIf="analysis.isLaunchingQuick()"></i>
</span>
- <span>
+ <span [ngClass]="{'text-normal':smallStyle}">
Quick Start
</span>
</button>
@@ -251,7 +253,7 @@
<div class="digit" *ngIf="analysis.getCount() == 0">1</div>
<div class="digit" *ngIf="analysis.getCount() > 0"><i class="fa fa-check"></i></div>
<div>
- <span>Select Proteins</span>
+ <span [ngClass]="{'text-normal':smallStyle}">Select Proteins</span>
</div>
</div>
</div>
@@ -266,7 +268,7 @@
<i class="fa fa-capsules" *ngIf="!analysis.isLaunchingQuick()"></i>
<i class="fa fa-spin fa-spinner" *ngIf="analysis.isLaunchingQuick()"></i>
</span>
- <span>
+ <span [ngClass]="{'text-normal':smallStyle}">
{{ myConfig.taskName }}
</span>
</button>
@@ -279,7 +281,7 @@
</div>
<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">
<span class="icon">
<i class="fas fa-flask" aria-hidden="true"></i>
@@ -301,7 +303,7 @@
<button (click)="analysisDialogTarget = 'drug-target'; showAnalysisDialog = true;"
class="button is-primary is-fullwidth is-rounded has-tooltip"
data-tooltip="Find drug targets for the selected proteins."
- [disabled]="analysis.getCount() === 0">
+ [disabled]="analysis.getCount() === 0" [ngClass]="{'text-small':smallStyle}">
<span class="icon">
<i class="fa fa-crosshairs"></i>
</span>
@@ -316,7 +318,7 @@
<button (click)="analysisDialogTarget = 'drug'; showAnalysisDialog = true;"
class="button is-primary is-fullwidth is-rounded has-tooltip"
data-tooltip="Find drugs for the selected proteins."
- [disabled]="analysis.getCount() === 0">
+ [disabled]="analysis.getCount() === 0" [ngClass]="{'text-small':smallStyle}">
<span class="icon">
<i class="fa fa-capsules"></i>
</span>
@@ -334,7 +336,7 @@
<span class="icon">
<i class="fa fa-external-link-alt"></i>
</span>
- <span>
+ <span [ngClass]="{'text-small':smallStyle}">
Enrichment Analysis
</span>
</a>
@@ -344,7 +346,7 @@
<span class="icon">
<i class="fa fa-external-link-alt"></i>
</span>
- <span>
+ <span [ngClass]="{'text-small':smallStyle}">
Enrichment Analysis
</span>
</a>
@@ -355,7 +357,7 @@
</div>
<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">
<span class="icon">
<i class="fas fa-tasks" aria-hidden="true"></i>
@@ -390,7 +392,7 @@
</div>
<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">
<span class="icon">
<i class="fas fa-filter" aria-hidden="true"></i>
@@ -405,7 +407,7 @@
</a>
</header>
- <div *ngIf="collapseSelection" class="seed-selection">
+ <div *ngIf="collapseSelection" class="seed-selection" [ngClass]="{'text-normal':smallStyle}">
<div class="card-content overflow">
<table class="table selection-table" *ngIf="analysis.getCount() > 0">
<thead>
diff --git a/src/app/pages/explorer-page/explorer-page.component.scss b/src/app/pages/explorer-page/explorer-page.component.scss
index a8f8f2de..5eb59072 100644
--- a/src/app/pages/explorer-page/explorer-page.component.scss
+++ b/src/app/pages/explorer-page/explorer-page.component.scss
@@ -48,3 +48,22 @@
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;
+}
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 6a43a293..f1cbc9a2 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -1,7 +1,7 @@
import {
AfterViewInit,
- Component,
- ElementRef, Input,
+ Component, Directive,
+ ElementRef, HostListener, Input,
OnInit,
ViewChild
} from '@angular/core';
@@ -19,7 +19,7 @@ import {OmnipathControllerService} from '../../services/omnipath-controller/omni
import html2canvas from 'html2canvas';
import {NetworkSettings} from '../../network-settings';
import {defaultConfig, EdgeGroup, IConfig, NodeGroup} from '../../config';
-import { NetexControllerService } from 'src/app/services/netex-controller/netex-controller.service';
+import {NetexControllerService} from 'src/app/services/netex-controller/netex-controller.service';
declare var vis: any;
@@ -29,6 +29,7 @@ declare var vis: any;
templateUrl: './explorer-page.component.html',
styleUrls: ['./explorer-page.component.scss'],
})
+
export class ExplorerPageComponent implements OnInit, AfterViewInit {
private networkJSON = '{"nodes": [], "edges": []}';
@@ -49,32 +50,29 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
if (key === 'nodeGroups' || key === 'edgeGroups') {
this.myConfig[key] = {...this.myConfig[key], ...configObj[key]};
continue;
- }
- else if (key === 'interactions') {
+ } else if (key === 'interactions') {
this.getInteractions();
continue;
- }
- else if (key === 'showLeftSidebar') {
+ } else if (key === 'showLeftSidebar') {
if (configObj[key]) {
// shrink main column
- document.getElementById('main-column').classList.remove('leftgone')
+ document.getElementById('main-column').classList.remove('leftgone');
} else {
// 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]) {
// shrink main column
- document.getElementById('main-column').classList.remove('rightgone')
+ document.getElementById('main-column').classList.remove('rightgone');
} else {
// extend main column
- document.getElementById('main-column').classList.add('rightgone')
+ document.getElementById('main-column').classList.add('rightgone');
}
-
+
}
-
+
this.myConfig[key] = configObj[key];
}
}
@@ -92,6 +90,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
return this.networkJSON;
}
+ public windowWidth = 0;
+ public smallStyle = false;
+
public showDetails = false;
public selectedWrapper: Wrapper | null = null;
@@ -141,8 +142,8 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
@ViewChild('network', {static: false}) networkEl: ElementRef;
constructor(
- public omnipath: OmnipathControllerService,
- public analysis: AnalysisService,
+ public omnipath: OmnipathControllerService,
+ public analysis: AnalysisService,
public netex: NetexControllerService) {
this.showDetails = false;
@@ -179,7 +180,13 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
});
}
+ @HostListener('window:resize', ['$event'])
+ onResize(event) {
+ this.setWindowWidth(event.target.innerWidth);
+ }
+
ngOnInit() {
+ this.setWindowWidth(document.getElementById('appWindow').getBoundingClientRect().width);
}
async ngAfterViewInit() {
@@ -190,11 +197,11 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
eval(this.onload);
}
}
-
+
async getInteractions() {
- const names = this.nodeData.nodes.map( (node) => node.label);
+ const names = this.nodeData.nodes.map((node) => node.label);
const nameToNetworkId = {};
- this.nodeData.nodes.map( (node) => nameToNetworkId[node.label] = node.id);
+ this.nodeData.nodes.map((node) => nameToNetworkId[node.label] = node.id);
const edges = await this.omnipath.getInteractions(names, this.myConfig.identifier, nameToNetworkId);
this.nodeData.edges.update(edges);
@@ -204,11 +211,11 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
const network = JSON.parse(this.networkJSON);
// map data to nodes in backend
- console.log('before')
+ console.log('before')
console.log( this.myConfig.identifier)
console.log(network.nodes)
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(network.nodes)
@@ -217,6 +224,11 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.edges = network.edges;
}
+ private setWindowWidth(width: number) {
+ this.windowWidth = width;
+ this.smallStyle = this.windowWidth < 1250;
+ }
+
private zoomToNode(id: string) {
this.nodeData.nodes.getIds();
const coords = this.networkInternal.getPositions(id)[id];
@@ -338,10 +350,10 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.myConfig[key] = {...this.myConfig[key], ...values};
}
- /** Convert input nodes into node objects
- *
- * @param customNode
- * @returns
+ /** Convert input nodes into node objects
+ *
+ * @param customNode
+ * @returns
*/
private mapCustomNode(customNode: any): Node {
let group = customNode.group;
@@ -368,9 +380,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
node.id = customNode.id;
node.x = customNode.x;
node.y = customNode.y;
- node.uniprotAc = customNode.uniprotAc
- node.netexId = customNode.netexId
- console.log(node)
+ node.uniprotAc = customNode.uniprotAc;
+ node.netexId = customNode.netexId;
+ // console.log(node)
return node;
}
@@ -385,7 +397,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
return edge;
}
- private mapDataToNodes(data: ProteinNetwork): { nodes: any[], edges: any[] } {
+ private mapDataToNodes(data: ProteinNetwork): { nodes: any[], edges: any[]; } {
const nodes = [];
const edges = [];
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index a20d4fe9..d2aa767e 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -4,7 +4,8 @@
export const environment = {
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 = {
* This import should be commented out in production mode because it will have a negative impact
* 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.
diff --git a/src/index.html b/src/index.html
index 4794bbd0..d6815099 100644
--- a/src/index.html
+++ b/src/index.html
@@ -42,12 +42,12 @@
<network-expander id="netexp1"
config='{
- "nodeGroups": {"0.5": {"type": "gene", "color": "rgb(204, 255, 51)", "name": "0.5", "shape": "circle"}, "1.5": {"type": "gene", "color": "rgb(102, 255, 51)", "name": "1.5", "shape": "circle"}, "2.0": {"type": "gene", "color": "rgb(51, 204, 51)", "name": "2.0", "shape": "circle"}, "-2.0": {"type": "gene", "color": "rgb(255, 0, 0)", "name": "-2.0", "shape": "circle"}},
+ "nodeGroups": {"0.5": {"type": "gene", "color": "rgb(204, 255, 51)", "name": "0.5", "shape": "circle"}, "1.5": {"type": "gene", "color": "rgb(102, 255, 51)", "name": "1.5", "shape": "circle"}, "2.0": {"type": "gene", "color": "rgb(51, 204, 51)", "name": "2.0", "shape": "circle"}, "-2.0": {"type": "gene", "color": "rgb(255, 0, 0)", "name": "-2.0", "shape": "circle"}},
"edgeGroups": {"custom": {"color": "black", "name": "Custom Group"}}, "idientifier": "hugo",
"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"}]}'
- style="height: 100%; display: block;"></network-expander>
+ style="height: 100%; width: 100vw; display: block;"></network-expander>
</div>
<br>
<br>
diff --git a/src/styles.scss b/src/styles.scss
index 79453391..3f6a47cf 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -27,7 +27,9 @@ $info: $primary;
}
.explorer-footer{
- position: absolute;
+ //position: absolute;
+ //overflow: auto;
+ width: $main-width;
bottom: 0;
}
@@ -71,6 +73,8 @@ div.covex.sidebar {
div.covex.bar-left {
float: left;
width: $sidebar-left-width;
+ max-width:300px;
+ min-width:$sidebar-left-min-width;
height: 100%;
}
@@ -78,7 +82,8 @@ div.covex.bar-left {
div.covex.bar-right {
float: left;
width: $sidebar-right-width;
-
+ max-width:450px;
+ min-width:$sidebar-right-min-width;
/* Hide scrollbar for Chrome, Safari and Opera */
&::-webkit-scrollbar {
display: none;
@@ -86,7 +91,7 @@ div.covex.bar-right {
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
-
+
}
div.card.bar-small {
@@ -112,18 +117,22 @@ div.card-content.overflow {
}
div.covex.network {
- width: $main-width;
height: 100%;
float: left;
position: relative;
+
+}
+
+.center-panel{
+ width: $main-width;
&.leftgone{
- width: calc(#{$main-width} + #{$sidebar-left-width});
+ width: calc(#{$main-width} + max(#{$sidebar-left-width},#{$sidebar-left-min-width}));
}
&.rightgone{
- width: calc(#{$main-width} + #{$sidebar-right-width});
+ width: calc(#{$main-width} + max(#{$sidebar-right-width},#{$sidebar-right-min-width}));
}
&.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}));
}
}
diff --git a/src/variables.scss b/src/variables.scss
index ab207d9e..d5b43d5f 100644
--- a/src/variables.scss
+++ b/src/variables.scss
@@ -13,6 +13,8 @@ $height: 100%;
$sidebar-right-width: 25%;
+$sidebar-right-min-width: 210px;
$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})));
--
GitLab