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

default legend

parent 68563156
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 528 additions and 333 deletions
src/app/analysis.service.ts
+ 3
− 3
View file @ 813026c0
...@@ -68,7 +68,7 @@ export class AnalysisService { ...@@ -68,7 +68,7 @@ export class AnalysisService {
if (finishedTokens) { if (finishedTokens) {
this.finishedTokens = JSON.parse(finishedTokens); this.finishedTokens = JSON.parse(finishedTokens);
} }
this.startWatching(); // this.startWatching();
this.http.get<Tissue[]>(`${environment.backend}tissues/`).subscribe((tissues) => { this.http.get<Tissue[]>(`${environment.backend}tissues/`).subscribe((tissues) => {
this.tissues = tissues; this.tissues = tissues;
...@@ -269,7 +269,7 @@ export class AnalysisService { ...@@ -269,7 +269,7 @@ export class AnalysisService {
}).toPromise(); }).toPromise();
this.tokens.push(resp.token); this.tokens.push(resp.token);
localStorage.setItem('tokens', JSON.stringify(this.tokens)); localStorage.setItem('tokens', JSON.stringify(this.tokens));
this.startWatching(); // this.startWatching();
toast({ toast({
message: 'Quick analysis started. This may take a while.' + message: 'Quick analysis started. This may take a while.' +
...@@ -304,7 +304,7 @@ export class AnalysisService { ...@@ -304,7 +304,7 @@ export class AnalysisService {
}).toPromise(); }).toPromise();
this.tokens.push(resp.token); this.tokens.push(resp.token);
localStorage.setItem('tokens', JSON.stringify(this.tokens)); localStorage.setItem('tokens', JSON.stringify(this.tokens));
this.startWatching(); // this.startWatching();
} }
public isLaunchingQuick(): boolean { public isLaunchingQuick(): boolean {
......
src/app/app.module.ts
+ 2
− 0
View file @ 813026c0
...@@ -21,6 +21,7 @@ import {CustomProteinsComponent} from './dialogs/custom-proteins/custom-proteins ...@@ -21,6 +21,7 @@ import {CustomProteinsComponent} from './dialogs/custom-proteins/custom-proteins
import {AnalysisService} from './analysis.service'; import {AnalysisService} from './analysis.service';
import { AddExpressedProteinsComponent } from './dialogs/add-expressed-proteins/add-expressed-proteins.component'; import { AddExpressedProteinsComponent } from './dialogs/add-expressed-proteins/add-expressed-proteins.component';
import {createCustomElement} from '@angular/elements'; import {createCustomElement} from '@angular/elements';
import { NetworkLegendComponent } from './components/network-legend/network-legend.component';
@NgModule({ @NgModule({
...@@ -36,6 +37,7 @@ import {createCustomElement} from '@angular/elements'; ...@@ -36,6 +37,7 @@ import {createCustomElement} from '@angular/elements';
InfoTileComponent, InfoTileComponent,
CustomProteinsComponent, CustomProteinsComponent,
AddExpressedProteinsComponent, AddExpressedProteinsComponent,
NetworkLegendComponent,
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
......
src/app/components/network-legend/network-legend.component.html 0 → 100644
+ 32
− 0
View file @ 813026c0
<div class="legend" [class.right]="this.config.legendPos === 'right'">
<!-- default legend in html -->
<table *ngIf="!this.config.legendUrl.length">
<ng-container *ngIf="this.config.showLegendNodes">
<tr *ngFor="let nodeGroup of this.config.nodeGroups | keyvalue" class="list-item">
<td *ngIf="nodeGroup.value.shape !== 'triangle'">
<span class="node {{ nodeGroup.value.shape }}" [style.background-color]=nodeGroup.value.color>
</span>
</td>
<td *ngIf="nodeGroup.value.shape === 'triangle'">
<span class="node {{ nodeGroup.value.shape }}" [style.border-bottom-color]=nodeGroup.value.color>
</span>
</td>
<td>&nbsp;{{ nodeGroup.value.name }}</td>
</tr>
</ng-container>
<ng-container *ngIf="this.config.showLegendEdges">
<tr *ngFor="let edgeGroup of this.config.edgeGroups | keyvalue" class="list-item">
<td>
<hr class="edge" [style.background-color]=edgeGroup.value.color >
</td>
<td>&nbsp;{{ edgeGroup.value.name }}</td>
</tr>
</ng-container>
</table>
<!-- custom legend image if url given by user -->
<img *ngIf="this.config.legendUrl.length" [src]="this.config.legendUrl" [ngClass]="this.config.legendClass"/>
</div>
src/app/components/network-legend/network-legend.component.scss 0 → 100644
+ 47
− 0
View file @ 813026c0
@import "~src/variables";
div.legend {
position: absolute;
bottom: $network-footer-height;
&.right {
right: 0;
}
tr.list-item{
padding: 0;
height: 40px;
td{
height: $legend-circle-size;
vertical-align: middle !important;
padding: 0 !important;
.round{
background: $legend-default-background-color;
border-radius: 50%;
width: $legend-circle-size;
height: $legend-circle-size;
display: inline-block;
}
.triangle{
width: 0;
height: 0;
border-left: calc(#{$legend-circle-size} / 2) solid transparent;
border-right: calc(#{$legend-circle-size} / 2) solid transparent;
border-bottom: $legend-circle-size solid black;
display: inline-block;
}
.rectangle{
background: $legend-default-background-color;
border-radius: $legend-rectangle-radius;
width: $legend-rectangle-width;
height: $legend-rectangle-height;
margin-bottom: calc((#{$legend-rectangle-height} - #{$legend-rectangle-width}) / 2);
display: inline-block;
}
.edge{
width: $legend-edge-width;
height: $legend-edge-height;
}
}
}
}
src/app/components/network-legend/network-legend.component.spec.ts 0 → 100644
+ 25
− 0
View file @ 813026c0
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NetworkLegendComponent } from './network-legend.component';
describe('NetworkLegendComponent', () => {
let component: NetworkLegendComponent;
let fixture: ComponentFixture<NetworkLegendComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ NetworkLegendComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NetworkLegendComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/components/network-legend/network-legend.component.ts 0 → 100644
+ 18
− 0
View file @ 813026c0
import {Component, Input, OnInit} from '@angular/core';
import {IConfig} from '../../config';
@Component({
selector: 'app-network-legend',
templateUrl: './network-legend.component.html',
styleUrls: ['./network-legend.component.scss']
})
export class NetworkLegendComponent implements OnInit {
@Input() config: IConfig;
constructor() { }
ngOnInit(): void {
}
}
src/app/config.ts
+ 34
− 6
View file @ 813026c0
...@@ -6,12 +6,22 @@ ...@@ -6,12 +6,22 @@
// color: string; // color: string;
// } // }
type NodeGroup = any; export interface NodeGroup {
type EdgeGroup = any; name: string;
color: string;
shape: 'round' | 'triangle' | 'rectangle';
type: 'gene' | 'protein' | 'drug';
}
export interface EdgeGroup {
name: string;
color: string;
}
export interface IConfig { export interface IConfig {
legendUrl: string; legendUrl: string;
legendClass: string; legendClass: string;
legendPos: 'left' | 'right';
taskName: string; taskName: string;
showLeftSidebar: boolean; showLeftSidebar: boolean;
showOverview: boolean; showOverview: boolean;
...@@ -22,14 +32,21 @@ export interface IConfig { ...@@ -22,14 +32,21 @@ export interface IConfig {
showTasks: boolean; showTasks: boolean;
showSelection: boolean; showSelection: boolean;
showFooter: boolean; showFooter: boolean;
showLegend: boolean;
showLegendNodes: boolean;
showLegendEdges: boolean;
nodeGroups: { [key: string]: NodeGroup }; nodeGroups: { [key: string]: NodeGroup };
edgeGroups: { [key: string]: EdgeGroup }; edgeGroups: { [key: string]: EdgeGroup };
} }
export const defaultConfig: IConfig = { export const defaultConfig: IConfig = {
legendUrl: 'https://exbio.wzw.tum.de/covex/assets/leg1.png', legendUrl: '', // 'https://exbio.wzw.tum.de/covex/assets/leg1.png' show legend image if set, otherwise default legend
legendClass: 'legend', legendClass: 'legend',
legendPos: 'left',
taskName: 'Run Task X', taskName: 'Run Task X',
showLegendNodes: true,
showLegendEdges: true,
showLeftSidebar: true, showLeftSidebar: true,
showOverview: true, showOverview: true,
showQuery: true, showQuery: true,
...@@ -39,19 +56,30 @@ export const defaultConfig: IConfig = { ...@@ -39,19 +56,30 @@ export const defaultConfig: IConfig = {
showSelection: true, showSelection: true,
showTasks: true, showTasks: true,
showFooter: true, showFooter: true,
showLegend: true,
nodeGroups: { nodeGroups: {
default: { default: {
color: 'white' name: 'Default Group',
color: 'yellow',
shape: 'triangle',
type: 'gene',
}, },
protein: { protein: {
color: 'red' name: 'Resulting Proteins',
color: 'red',
shape: 'round',
type: 'protein',
}, },
drug: { drug: {
color: 'green' name: 'Possible Drugs',
color: 'green',
shape: 'rectangle',
type: 'drug',
} }
}, },
edgeGroups: { edgeGroups: {
default: { default: {
name: 'Edgy edges',
color: 'black' color: 'black'
} }
}, },
......
src/app/pages/explorer-page/explorer-page.component.html
+ 320
− 306
View file @ 813026c0
...@@ -12,509 +12,523 @@ ...@@ -12,509 +12,523 @@
[currentViewProteins]="currentViewProteins"> [currentViewProteins]="currentViewProteins">
</app-add-expressed-proteins> </app-add-expressed-proteins>
<!-- Start explorer -->
<div class="covex explorer"> <div class="covex explorer">
<div class="covex left-window"> <!-- Start left window -->
<div> <div class="covex left-window">
<div class="covex sidebar bar-left"> <div>
<div *ngIf="myConfig.showOverview" class="card bar-large"> <!-- Start left sidebar -->
<header class="card-header"> <div class="covex sidebar bar-left">
<p class="card-header-title">
<span class="icon"> <div *ngIf="myConfig.showOverview" class="card bar-large">
<i class="fas fa-info" aria-hidden="true"></i> <header class="card-header">
</span> Network Overview <p class="card-header-title">
</p> <span class="icon">
<a (click)="collapseOverview= !collapseOverview" data-action="collapse" <i class="fas fa-info" aria-hidden="true"></i>
class="card-header-icon is-hidden-fullscreen" aria-label="more options"> </span> Network Overview
</p>
<a (click)="collapseOverview= !collapseOverview" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon"> <span class="icon">
<i *ngIf="collapseOverview" class="fas fa-angle-down" aria-hidden="true"></i> <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> <i *ngIf="!collapseOverview" class="fas fa-angle-left" aria-hidden="true"></i> </span>
</a> </a>
</header> </header>
<div *ngIf="collapseOverview"> <div *ngIf="collapseOverview">
<div class="card-content"> <div class="card-content">
<nav class="level" *ngIf="proteinData"> <nav class="level" *ngIf="proteinData">
<!-- TO DO : CHANGE THIS LATER <!-- TO DO : CHANGE THIS LATER
<div class="level-item has-text-centered"> <div class="level-item has-text-centered">
<div> <div>
<p class="heading">Viral<br>Proteins</p> <p class="heading">Viral<br>Proteins</p>
<p class="title"> {{ proteinData.effects.length }}</p> <p class="title"> {{ proteinData.effects.length }}</p>
</div>
</div> </div>
</div> -->
-->
<div class="level-item has-text-centered"> <div class="level-item has-text-centered">
<div> <div>
<p class="heading">Proteins</p> <p class="heading">Proteins</p>
<p class="title">{{ proteinData.proteins.length }}</p> <p class="title">{{ proteinData.proteins.length }}</p>
</div>
</div> </div>
</div> <div class="level-item has-text-centered">
<div class="level-item has-text-centered"> <div>
<div> <p class="heading">Interactions</p>
<p class="heading">Interactions</p> <p class="title">{{ proteinData.edges.length }}</p>
<p class="title">{{ proteinData.edges.length }}</p> </div>
</div> </div>
</div> </nav>
</nav> </div>
</div> </div>
</div> </div>
</div>
<div *ngIf="myConfig.showQuery" class="card bar-large"> <div *ngIf="myConfig.showQuery" class="card bar-large">
<header class="card-header"> <header class="card-header">
<p class="card-header-title"> <p class="card-header-title">
<span class="icon"> <span class="icon">
<i class="fas fa-search" aria-hidden="true"></i> <i class="fas fa-search" aria-hidden="true"></i>
</span> Query Protein/Gene </span> Query Protein/Gene
</p> </p>
<a (click)="collapseQuery = !collapseQuery" data-action="collapse" <a (click)="collapseQuery = !collapseQuery" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options"> class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon"> <span class="icon">
<i *ngIf="collapseQuery" class="fas fa-angle-down" aria-hidden="true"></i> <i *ngIf="collapseQuery" class="fas fa-angle-down" aria-hidden="true"></i>
<i *ngIf="!collapseQuery" class="fas fa-angle-left" aria-hidden="true"></i> <i *ngIf="!collapseQuery" class="fas fa-angle-left" aria-hidden="true"></i>
</span> </span>
</a> </a>
</header> </header>
<div *ngIf="collapseQuery"> <div *ngIf="collapseQuery">
<div class="card-content"> <div class="card-content">
<div class="field"> <div class="field">
<div class="control"> <div class="control">
<app-query-tile-component (selectItem)="queryAction($event)" <app-query-tile-component (selectItem)="queryAction($event)"
[queryItems]="queryItems"></app-query-tile-component> [queryItems]="queryItems"></app-query-tile-component>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="covex network"> <!-- Start network block -->
<div class="card network"> <div class="covex network">
<header class="card-header"> <div class="card network">
<p class="card-header-title">
Protein-Protein Interaction Network <div *ngIf="myConfig.showLegend">
</p> <app-network-legend [config]="myConfig"></app-network-legend>
</header> </div>
<div class="card-content">
<div class="card-image" id="canvas-content">
<div class="parent"> <header class="card-header">
<div class="network center image1" #network> <p class="card-header-title">
<button class="button is-loading center" alt="loading...">Loading</button> Protein-Protein Interaction Network
</p>
</header>
<div class="card-content">
<div class="card-image" id="canvas-content">
<div class="parent">
<div class="network center image1" #network>
<button class="button is-loading center" alt="loading...">Loading</button>
</div>
</div> </div>
<img class="image2" [src]="myConfig.legendUrl" [ngClass]="myConfig.legendClass"/>
</div> </div>
</div>
<footer *ngIf="myConfig.showFooter" class="card-footer toolbar"> <footer *ngIf="myConfig.showFooter" class="card-footer toolbar">
<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>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">
<div class="dropdown-trigger"> <div class="dropdown-trigger">
<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.">
<span *ngIf="!selectedTissue">Tissue</span> <span *ngIf="!selectedTissue">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"
[class.fa-angle-up]="expressionExpanded" [class.fa-angle-up]="expressionExpanded"
[class.fa-angle-left]="!expressionExpanded" aria-hidden="true"></i> [class.fa-angle-left]="!expressionExpanded" aria-hidden="true"></i>
</span> </span>
</button> </button>
</div> </div>
<div class="dropdown-menu" id="dropdown-menu" role="menu"> <div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content tissue-dropdown"> <div class="dropdown-content tissue-dropdown">
<div class="scroll-area"> <div class="scroll-area">
<a (click)="selectTissue(null)" <a (click)="selectTissue(null)"
[class.is-active]="!selectedTissue" [class.is-active]="!selectedTissue"
class="dropdown-item"> class="dropdown-item">
None None
</a> </a>
<a *ngFor="let tissue of analysis.getTissues()" <a *ngFor="let tissue of analysis.getTissues()"
(click)="selectTissue(tissue)" (click)="selectTissue(tissue)"
[class.is-active]="selectedTissue && tissue.id === selectedTissue.id" [class.is-active]="selectedTissue && tissue.id === selectedTissue.id"
class="dropdown-item"> class="dropdown-item">
{{tissue.name}} {{tissue.name}}
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<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." tooltipOff="Disable the network animation and freeze nodes." tooltipOn="Enable the network animation."
[value]="physicsEnabled" (valueChange)="updatePhysicsEnabled($event)"></app-toggle> tooltipOff="Disable the network animation and freeze nodes."
</footer> [value]="physicsEnabled" (valueChange)="updatePhysicsEnabled($event)"></app-toggle>
</footer>
</div>
</div> </div>
</div> </div>
<!-- End network block -->
</div> </div>
</div>
<div class="analysis-view" *ngIf="selectedAnalysisToken"> <div class="analysis-view" *ngIf="selectedAnalysisToken">
<app-analysis-panel [(token)]="selectedAnalysisToken" <app-analysis-panel [(token)]="selectedAnalysisToken"
(showDetailsChange)="selectedWrapper = $event" (showDetailsChange)="selectedWrapper = $event"
(visibleItems)="analysisWindowChanged($event)"></app-analysis-panel> (visibleItems)="analysisWindowChanged($event)"></app-analysis-panel>
</div>
</div> </div>
</div>
<div *ngIf="myConfig.showLeftSidebar" class="covex sidebar bar-right"> <div *ngIf="myConfig.showLeftSidebar" 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">
<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>
<i *ngIf="selectedWrapper && selectedWrapper.type === 'protein'" class="fas fa-dna" aria-hidden="true"></i> <i *ngIf="selectedWrapper && selectedWrapper.type === 'protein'" class="fas fa-dna" aria-hidden="true"></i>
<i *ngIf="selectedWrapper && selectedWrapper.type === 'drug'" class="fas fa-capsules" <i *ngIf="selectedWrapper && selectedWrapper.type === 'drug'" class="fas fa-capsules"
aria-hidden="true"></i> aria-hidden="true"></i>
</span> </span>
<span *ngIf="!selectedWrapper">No item selected</span> <span *ngIf="!selectedWrapper">No item selected</span>
<span *ngIf="selectedWrapper"> <span *ngIf="selectedWrapper">
<span *ngIf="selectedWrapper.type === 'protein'">Host Protein</span> <span *ngIf="selectedWrapper.type === 'protein'">Host Protein</span>
<span *ngIf="selectedWrapper.type === 'drug'">Drug</span> <span *ngIf="selectedWrapper.type === 'drug'">Drug</span>
</span> </span>
</p> </p>
<a (click)="collapseDetails = !collapseDetails" data-action="collapse" <a (click)="collapseDetails = !collapseDetails" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options"> class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon"> <span class="icon">
<i *ngIf="collapseDetails" class="fas fa-angle-down" aria-hidden="true"></i> <i *ngIf="collapseDetails" class="fas fa-angle-down" aria-hidden="true"></i>
<i *ngIf="!collapseDetails" class="fas fa-angle-left" aria-hidden="true"></i> <i *ngIf="!collapseDetails" class="fas fa-angle-left" aria-hidden="true"></i>
</span> </span>
</a> </a>
</header> </header>
<div *ngIf="collapseDetails"> <div *ngIf="collapseDetails">
<div class="card-content"> <div class="card-content">
<app-info-tile [wrapper]="selectedWrapper"></app-info-tile> <app-info-tile [wrapper]="selectedWrapper"></app-info-tile>
</div>
</div> </div>
</div> </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">
<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>
</span> </span>
Simple Analysis Simple Analysis
</p> </p>
<a (click)="collapseAnalysisQuick = !collapseAnalysisQuick" data-action="collapse" <a (click)="collapseAnalysisQuick = !collapseAnalysisQuick" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options"> class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon"> <span class="icon">
<i *ngIf="collapseAnalysisQuick" class="fas fa-angle-down" aria-hidden="true"></i> <i *ngIf="collapseAnalysisQuick" class="fas fa-angle-down" aria-hidden="true"></i>
<i *ngIf="!collapseAnalysisQuick" class="fas fa-angle-left" aria-hidden="true"></i> <i *ngIf="!collapseAnalysisQuick" class="fas fa-angle-left" aria-hidden="true"></i>
</span> </span>
</a> </a>
</header> </header>
<div *ngIf="collapseAnalysisQuick"> <div *ngIf="collapseAnalysisQuick">
<div class="card-content quick-find"> <div class="card-content quick-find">
<div class="field"> <div class="field">
<div class="control"> <div class="control">
<div class="tile notification is-danger"> <div class="tile notification is-danger">
<div class="align-vmiddle"> <div class="align-vmiddle">
<div class="digit"><i class="fa fa-fast-forward"></i></div> <div class="digit"><i class="fa fa-fast-forward"></i></div>
<button (click)="analysis.startQuickAnalysis(true, null)" <button (click)="analysis.startQuickAnalysis(true, null)"
[disabled]="analysis.isLaunchingQuick()" [disabled]="analysis.isLaunchingQuick()"
class="button is-white is-rounded has-tooltip" data-tooltip="Find drugs for all proteins."> class="button is-white is-rounded has-tooltip" data-tooltip="Find drugs for all proteins.">
<span class="icon"> <span class="icon">
<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>
Quick Start Quick Start
</span> </span>
</button> </button>
</div>
</div> </div>
</div> <div class="divisor-rapid">
<div class="divisor-rapid"> &mdash; or &mdash;
&mdash; or &mdash; </div>
</div> <div class="tile notification is-info">
<div class="tile notification is-info"> <div class="align-vmiddle">
<div class="align-vmiddle"> <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>Select Proteins</span> </div>
</div> </div>
</div> </div>
</div> <div class="tile notification is-info">
<div class="tile notification is-info"> <div class="align-vmiddle">
<div class="align-vmiddle"> <div class="digit">2</div>
<div class="digit">2</div> <button (click)="analysis.startQuickAnalysis(false, null)"
<button (click)="analysis.startQuickAnalysis(false, null)" [disabled]="analysis.getCount() === 0 || analysis.isLaunchingQuick()"
[disabled]="analysis.getCount() === 0 || analysis.isLaunchingQuick()" class="button is-white is-rounded has-tooltip"
class="button is-white is-rounded has-tooltip" data-tooltip="Find drugs for the selected proteins.">
data-tooltip="Find drugs for the selected proteins.">
<span class="icon"> <span class="icon">
<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>
{{ myConfig.taskName }} {{ myConfig.taskName }}
</span> </span>
</button> </button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </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">
<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>
</span> </span>
Analysis Analysis
</p> </p>
<a (click)="collapseAnalysis = !collapseAnalysis" data-action="collapse" <a (click)="collapseAnalysis = !collapseAnalysis" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options"> class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon"> <span class="icon">
<i *ngIf="collapseAnalysis" class="fas fa-angle-down" aria-hidden="true"></i> <i *ngIf="collapseAnalysis" class="fas fa-angle-down" aria-hidden="true"></i>
<i *ngIf="!collapseAnalysis" class="fas fa-angle-left" aria-hidden="true"></i> <i *ngIf="!collapseAnalysis" class="fas fa-angle-left" aria-hidden="true"></i>
</span> </span>
</a> </a>
</header> </header>
<div *ngIf="collapseAnalysis"> <div *ngIf="collapseAnalysis">
<div class="card-content"> <div class="card-content">
<div class="field"> <div class="field">
<div class="control"> <div class="control">
<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">
<span class="icon"> <span class="icon">
<i class="fa fa-crosshairs"></i> <i class="fa fa-crosshairs"></i>
</span> </span>
<span> <span>
Find Drug Targets Find Drug Targets
</span> </span>
</button> </button>
</div>
</div> </div>
</div> <div class="field">
<div class="field"> <div class="control">
<div class="control"> <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">
<span class="icon"> <span class="icon">
<i class="fa fa-capsules"></i> <i class="fa fa-capsules"></i>
</span> </span>
<span> <span>
{{myConfig.taskName}} {{myConfig.taskName}}
</span> </span>
</button> </button>
</div>
</div> </div>
</div> <div class="field">
<div class="field"> <div class="control">
<div class="control"> <a *ngIf="analysis.getCount() > 0" [href]="gProfilerLink()" target="_blank"
<a *ngIf="analysis.getCount() > 0" [href]="gProfilerLink()" target="_blank" class="button is-primary is-fullwidth is-rounded has-tooltip"
class="button is-primary is-fullwidth is-rounded has-tooltip" data-tooltip="Use enrichment analysis via g:Profiler (external).">
data-tooltip="Use enrichment analysis via g:Profiler (external).">
<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>
Enrichment Analysis Enrichment Analysis
</span> </span>
</a> </a>
<a *ngIf="analysis.getCount() === 0" disabled <a *ngIf="analysis.getCount() === 0" disabled
class="button is-primary is-fullwidth is-rounded has-tooltip" class="button is-primary is-fullwidth is-rounded has-tooltip"
data-tooltip="Use enrichment analysis via g:Profiler (external)."> data-tooltip="Use enrichment analysis via g:Profiler (external).">
<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>
Enrichment Analysis Enrichment Analysis
</span> </span>
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </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">
<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>
</span> </span>
Tasks ({{analysis.tasks.length}}) Tasks ({{analysis.tasks.length}})
</p> </p>
<a (click)="collapseTask = !collapseTask" data-action="collapse" class="card-header-icon is-hidden-fullscreen" <a (click)="collapseTask = !collapseTask" data-action="collapse" class="card-header-icon is-hidden-fullscreen"
aria-label="more options"> aria-label="more options">
<span class="icon"> <span class="icon">
<i *ngIf="collapseTask" class="fas fa-angle-down" aria-hidden="true"></i> <i *ngIf="collapseTask" class="fas fa-angle-down" aria-hidden="true"></i>
<i *ngIf="!collapseTask" class="fas fa-angle-left" aria-hidden="true"></i> <i *ngIf="!collapseTask" class="fas fa-angle-left" aria-hidden="true"></i>
</span> </span>
</a> </a>
</header> </header>
<div *ngIf="collapseTask"> <div *ngIf="collapseTask">
<div class="card-content overflow" *ngIf="analysis.tasks && analysis.tasks.length > 0"> <div class="card-content overflow" *ngIf="analysis.tasks && analysis.tasks.length > 0">
<app-task-list [(token)]="selectedAnalysisToken"></app-task-list> <app-task-list [(token)]="selectedAnalysisToken"></app-task-list>
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<a *ngIf="analysis.tasks && analysis.tasks.length > 0" (click)="analysis.removeAllTasks(); selectedAnalysisToken = null;" <a *ngIf="analysis.tasks && analysis.tasks.length > 0"
class="card-footer-item has-text-danger" data-tooltip="Delete all tasks."> (click)="analysis.removeAllTasks(); selectedAnalysisToken = null;"
class="card-footer-item has-text-danger" data-tooltip="Delete all tasks.">
<span class="icon"> <span class="icon">
<i class="fa fa-trash"></i> <i class="fa fa-trash"></i>
</span> </span>
<span> <span>
Delete all Delete all
</span> </span>
</a> </a>
</footer> </footer>
</div>
</div> </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">
<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>
</span> Selection ({{analysis.getCount()}}) </span> Selection ({{analysis.getCount()}})
</p> </p>
<a (click)="collapseSelection = !collapseSelection" data-action="collapse" <a (click)="collapseSelection = !collapseSelection" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options"> class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon"> <span class="icon">
<i *ngIf="collapseSelection" class="fas fa-angle-down" aria-hidden="true"></i> <i *ngIf="collapseSelection" class="fas fa-angle-down" aria-hidden="true"></i>
<i *ngIf="!collapseSelection" class="fas fa-angle-left" aria-hidden="true"></i> <i *ngIf="!collapseSelection" class="fas fa-angle-left" aria-hidden="true"></i>
</span> </span>
</a> </a>
</header> </header>
<div *ngIf="collapseSelection" class="seed-selection"> <div *ngIf="collapseSelection" class="seed-selection">
<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>
<tr> <tr>
<td>Type</td> <td>Type</td>
<td>Name</td> <td>Name</td>
<td>Actions</td> <td>Actions</td>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let p of analysis.getSelection()"> <tr *ngFor="let p of analysis.getSelection()">
<td> <td>
<span class="icon"> <span class="icon">
<i class="fa fa-dna" *ngIf="p.type == 'protein'"></i> <i class="fa fa-dna" *ngIf="p.type == 'protein'"></i>
</span> </span>
</td> </td>
<td *ngIf="p.type == 'protein'">{{p.data.name}}</td> <td *ngIf="p.type == 'protein'">{{p.data.name}}</td>
<td> <td>
<button (click)="analysis.removeItems([p])" class="button is-small is-danger is-outlined has-tooltip" <button (click)="analysis.removeItems([p])" class="button is-small is-danger is-outlined has-tooltip"
data-tooltip="Remove from selection."> data-tooltip="Remove from selection.">
<i class="fa fa-trash"></i> <i class="fa fa-trash"></i>
</button> </button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<i *ngIf="analysis.getCount() === 0"> <i *ngIf="analysis.getCount() === 0">
Double-click on a protein to select it for the analysis. Double-click on a protein to select it for the analysis.
</i> </i>
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<a (click)="analysis.addVisibleHostProteins(currentViewNodes, currentViewProteins)" <a (click)="analysis.addVisibleHostProteins(currentViewNodes, currentViewProteins)"
class="card-footer-item has-text-success" data-tooltip="Add all visible proteins."> class="card-footer-item has-text-success" data-tooltip="Add all visible proteins.">
<span class="icon"> <span class="icon">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
</span> </span>
<span> <span>
Add proteins Add proteins
</span> </span>
</a> </a>
<a (click)="analysis.removeAllHostProteins()" <a (click)="analysis.removeAllHostProteins()"
class="card-footer-item has-text-danger" data-tooltip="Remove all proteins."> class="card-footer-item has-text-danger" data-tooltip="Remove all proteins.">
<span class="icon"> <span class="icon">
<i class="fa fa-minus"></i> <i class="fa fa-minus"></i>
</span> </span>
<span> <span>
Remove proteins Remove proteins
</span> </span>
</a> </a>
</footer> </footer>
<footer class="card-footer" *ngIf="selectedAnalysisToken"> <footer class="card-footer" *ngIf="selectedAnalysisToken">
<a (click)="analysis.addSeeds(currentViewNodes)" <a (click)="analysis.addSeeds(currentViewNodes)"
class="card-footer-item has-text-success" data-tooltip="Add all visible seeds."> class="card-footer-item has-text-success" data-tooltip="Add all visible seeds.">
<span class="icon"> <span class="icon">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
</span> </span>
<span> <span>
Add seeds Add seeds
</span> </span>
</a> </a>
<a (click)="analysis.removeSeeds(currentViewNodes)" <a (click)="analysis.removeSeeds(currentViewNodes)"
class="card-footer-item has-text-danger" data-tooltip="Remove all seeds."> class="card-footer-item has-text-danger" data-tooltip="Remove all seeds.">
<span class="icon"> <span class="icon">
<i class="fa fa-minus"></i> <i class="fa fa-minus"></i>
</span> </span>
<span> <span>
Remove seeds Remove seeds
</span> </span>
</a> </a>
</footer> </footer>
<footer class="card-footer"> <footer class="card-footer">
<a (click)="showCustomProteinsDialog = true" <a (click)="showCustomProteinsDialog = true"
class="card-footer-item has-text-primary" class="card-footer-item has-text-primary"
data-tooltip="Add a custom list of proteins."> data-tooltip="Add a custom list of proteins.">
<span class="icon"> <span class="icon">
<i class="fa fa-upload"></i> <i class="fa fa-upload"></i>
</span> </span>
<span> <span>
Custom proteins Custom proteins
</span> </span>
</a> </a>
<a (click)="showThresholdDialog = true" <a (click)="showThresholdDialog = true"
class="card-footer-item has-text-primary" class="card-footer-item has-text-primary"
data-tooltip="Add proteins expressed in the tissue."> data-tooltip="Add proteins expressed in the tissue.">
<span class="icon"> <span class="icon">
<i class="fa fa-angle-double-up"></i> <i class="fa fa-angle-double-up"></i>
</span> </span>
<span> <span>
Tissue proteins Tissue proteins
</span> </span>
</a> </a>
</footer> </footer>
<footer class="card-footer"> <footer class="card-footer">
<a (click)="analysis.invertSelection(currentViewNodes)" class="card-footer-item has-text-primary" <a (click)="analysis.invertSelection(currentViewNodes)" class="card-footer-item has-text-primary"
data-tooltip="Invert the current selection."> data-tooltip="Invert the current selection.">
<span class="icon"> <span class="icon">
<i class="fa fa-sync"></i> <i class="fa fa-sync"></i>
</span> </span>
<span> <span>
Invert Invert
</span> </span>
</a> </a>
<a (click)="analysis.resetSelection()" class="card-footer-item has-text-danger" <a (click)="analysis.resetSelection()" class="card-footer-item has-text-danger"
data-tooltip="Remove all entries from the selection."> data-tooltip="Remove all entries from the selection.">
<span class="icon"> <span class="icon">
<i class="fa fa-broom"></i> <i class="fa fa-broom"></i>
</span> </span>
<span> <span>
Reset Reset
</span> </span>
</a> </a>
</footer> </footer>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="is-hidden-tablet mobile-fallback"> <div class="is-hidden-tablet mobile-fallback">
Sorry, CoVex is not available for mobile phones. Sorry, CoVex is not available for mobile phones.
......
src/app/pages/explorer-page/explorer-page.component.ts
+ 8
− 2
View file @ 813026c0
...@@ -10,14 +10,14 @@ import { ...@@ -10,14 +10,14 @@ import {
Node, Node,
Wrapper, Wrapper,
getWrapperFromProtein, getWrapperFromProtein,
Tissue, getNodeIdsFromI Tissue
} from '../../interfaces'; } from '../../interfaces';
import {ProteinNetwork} from '../../main-network'; import {ProteinNetwork} from '../../main-network';
import {HttpClient} from '@angular/common/http'; import {HttpClient} from '@angular/common/http';
import {AnalysisService} from '../../analysis.service'; import {AnalysisService} from '../../analysis.service';
import html2canvas from 'html2canvas'; import html2canvas from 'html2canvas';
import {NetworkSettings} from '../../network-settings'; import {NetworkSettings} from '../../network-settings';
import {defaultConfig, IConfig} from '../../config'; import {defaultConfig, EdgeGroup, IConfig, NodeGroup} from '../../config';
declare var vis: any; declare var vis: any;
...@@ -288,6 +288,12 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -288,6 +288,12 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
}); });
} }
public setConfigEdgeGroup(key: string, values: EdgeGroup) {
// make sure all keys are set
this.myConfig[key] = {...this.myConfig[key], ...values};
}
private mapCustomNode(customNode: Node): any { private mapCustomNode(customNode: Node): any {
let group = customNode.group; let group = customNode.group;
if (typeof group === 'undefined' || typeof this.myConfig.nodeGroups[group] === 'undefined') { if (typeof group === 'undefined' || typeof this.myConfig.nodeGroups[group] === 'undefined') {
......
src/index.html
+ 18
− 2
View file @ 813026c0
...@@ -18,19 +18,35 @@ ...@@ -18,19 +18,35 @@
<input type="checkbox" onclick=changeConfigStr('{"showOverview":'+this.checked+'}') checked /> Show overview<br> <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('{"showQuery":'+this.checked+'}') /> Show query<br>
<input type="checkbox" onclick=changeConfigStr('{"showLeftSidebar":'+this.checked+'}') checked /> Show sidebar<br> <input type="checkbox" onclick=changeConfigStr('{"showLeftSidebar":'+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>
<input type="checkbox" onclick=changeConfigStr('{"showTasks":'+this.checked+'}') checked /> Show Tasks<br>
<input type="checkbox" onclick=changeConfigStr('{"showSelection":'+this.checked+'}') checked /> Show Selection<br>
<input type="checkbox" onclick=changeConfigStr('{"showFooter":'+this.checked+'}') checked /> Show Footer<br>
<input type="checkbox" onclick=changeConfigStr('{"showLegend":'+this.checked+'}') checked /> Show Legend<br>
<!--<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') checked /> Show SimpleAnalysis<br>-->
<br> <br>
<button onclick="setNetwork('netexp1')">Add proteins</button> <button onclick="setNetwork('netexp1')">Add proteins</button>
<!-- "legendUrl": "https://exbio.wzw.tum.de/covex/assets/leg1.png",-->
<div> <div>
<network-expander id="netexp1" config='{"showQuery": false, "nodeGroups": {"default": {"color": "grey"}}, "edgeGroups":{"default": {"color": "grey"}, "custom": {"color": "red"}}}' onload="init1()" style="height: 100vh"></network-expander> <network-expander id="netexp1" config='{
"showQuery": false,
"legendPos": "right",
"nodeGroups": {"default": {"color": "grey", "name": "Default Group", "shape": "triangle"}},
"edgeGroups":{"default": {"color": "grey", "name": "Default Edge Group"}, "custom": {"color": "red", "name": "Custom Edge Group"}}
}' onload="init1()" style="height: 100vh"></network-expander>
</div> </div>
<!-- <!--
<div> <div style="border: 3px solid red"> <div> <div style="border: 3px solid red">
<network-expander id="netexp2" config='{"legendUrl": "https://i.pinimg.com/originals/ff/72/80/ff72801189f650f11672915cda0f1bdf.png", "legendClass": "my-legend-2"}'></network-expander> <network-expander id="netexp2" config='{"legendUrl": "https://i.pinimg.com/originals/ff/72/80/ff72801189f650f11672915cda0f1bdf.png", "legendClass": "my-legend-2"}'></network-expander>
</div> </div>
--> -->
<script> <script>
......
src/styles.scss
+ 6
− 14
View file @ 813026c0
...@@ -16,7 +16,7 @@ $info: $primary; ...@@ -16,7 +16,7 @@ $info: $primary;
@import "~primeng/resources/primeng.min.css"; @import "~primeng/resources/primeng.min.css";
@import "~primeicons/primeicons.css"; @import "~primeicons/primeicons.css";
$height: '1000px'; @import "variables";
nav.navbar { nav.navbar {
height: 60px; height: 60px;
...@@ -36,10 +36,6 @@ span.icon { ...@@ -36,10 +36,6 @@ span.icon {
margin-right: 5px; margin-right: 5px;
} }
img {
margin: 10px;
}
img.inline { img.inline {
height: 30px; height: 30px;
align: middle; align: middle;
...@@ -107,11 +103,11 @@ div.covex.network { ...@@ -107,11 +103,11 @@ div.covex.network {
div.card.network { div.card.network {
width: 100%; width: 100%;
height: calc(100% - 75px); height: calc(100% - #{$network-footer-height});
} }
div.network { div.network {
height: calc(#{$height} - 200px); height: calc(#{$height} - #{$network-footer-height} - #{$navbar-height} - 48px);
} }
div.parent { div.parent {
...@@ -122,12 +118,6 @@ div.image1 { ...@@ -122,12 +118,6 @@ div.image1 {
position: relative; position: relative;
} }
img.image2 {
position: absolute;
bottom: 0px;
right: 0px;
}
div.center { div.center {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -136,7 +126,7 @@ div.center { ...@@ -136,7 +126,7 @@ div.center {
div.covex.explorer { div.covex.explorer {
height: calc(#{$height} - 70px); height: calc(#{$height} - #{$navbar-height});
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }
...@@ -221,3 +211,5 @@ body { ...@@ -221,3 +211,5 @@ body {
.mb-3 { .mb-3 {
margin-bottom: 10px; margin-bottom: 10px;
} }
src/variables.scss 0 → 100644
+ 15
− 0
View file @ 813026c0
$sidebar-width: 38vw;
$sidebar-width-max: 665px;
$navbar-height: 80px;
$row-data-selector-height: auto;
$network-footer-height: 75px;
$legend-default-background-color: #143d1f;
$legend-circle-size: 35px;
$legend-rectangle-height: 25px;
$legend-rectangle-width: 35px;
$legend-rectangle-radius: 5px;
$legend-edge-width: 20px;
$legend-edge-height: 3px;
$height: 1000px;
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