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

started with themes

parent 9a3809bd
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 89 additions and 46 deletions
angular.json
+ 2
− 2
View file @ 88d1be89
......@@ -97,7 +97,7 @@
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
"maximumError": "500kb"
}
]
},
......@@ -124,7 +124,7 @@
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
"maximumError": "500kb"
}
]
}
......
build-netex.js
+ 0
− 1
View file @ 88d1be89
......@@ -5,7 +5,6 @@ const concat = require('concat');
'./dist/netex/runtime-es5.js',
'./dist/netex/polyfills-es5.js',
'./scripts/vis-network.min.js',
// './scripts/3ad4fe992f.js',
// './dist/netex/scripts.js',
'./dist/netex/main-es5.js'
];
......
drugsTone-build/drugsTone.js
+ 1
− 1
View file @ 88d1be89
This diff is collapsed.
drugstone-test.html
+ 5
− 4
View file @ 88d1be89
<!doctype html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/gh/AndiMajore/drugstone-releases@0.6.6/remote/drugsTone.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AndiMajore/drugstone-releases@0.6.6/remote/styles.css">
<script src="https://cdn.jsdelivr.net/gh/AndiMajore/drugstone-releases@0.7.0-rc2/remote/drugsTone.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AndiMajore/drugstone-releases@0.7.0-rc2/remote/styles.css">
</head>
<body>
<div style="height: 700px; width: 1300px;">
<network-expander
id='drugstone-panel-1'
config='{"nodeGroups":{"0.5":{"type":"gene","color":"#CCFF33FF","groupName":"0.5","shape":"star"},"patientGroup":{"type":"gene","color":"#FF0000FF","groupName":"Patients","shape":"circle"},"Group1":{"type":"someType","color":"#e900f5","groupName":"genes","shape":"circle","id":"Group1"}},"edgeGroups":{"normal":{"color":"black","groupName":"Custom Group"},"dashed":{"color":"#000857","groupName":"Dashed","dashes":[3,2]}},"identifier":"symbol","showFooter":false,"showQuery":false,"legendPos":"right","showLegendEdges":false}'
network='{"nodes":[{"id":"EGFR","group":"Group1"},{"id":"MYC","group":"Group1"},{"id":"ACE2","group":"Group1"}],"edges":[{"from":"TP53","to":"C5","group":"dashed"},{"from":"TP53","to":"PTEN","group":"dashed"},{"from":"Patient","to":"C5","group":"normal"},{"from":"Patient","to":"PTEN","group":"normal"}]}'>
theme='{"background":"#212a4a","panel-background":"#1829c4","panel-border":"#c928c9","network-background":"#d93bd9","color1":"#00D1B2","color2":"#3273DC","text-primary":"#000000","text-secondary":"#FFFFFF","success":"#48C774","warn":"#C78E48","error":"#F14668"}'
config='{"nodeGroups":{"0.5":{"type":"gene","color":"#CCFF33FF","groupName":"0.5","shape":"star"},"1.5":{"type":"gene","color":"#66FF33FF","groupName":"1.5","shape":"circle"},"2.0":{"type":"gene","color":"#33CC33FF","groupName":"2.0","shape":"circle"},"patientGroup":{"type":"gene","color":"#FF0000FF","groupName":"Patients","shape":"circle"}},"edgeGroups":{"normal":{"color":"black","groupName":"Custom Group"},"dashed":{"color":"#000857","groupName":"Dashed","dashes":[3,2]}},"identifier":"symbol","legendUrl":"https://exbio.wzw.tum.de/covex/assets/leg1.png"}'
network='{"nodes":[{"id":"TP53","group":"0.5","x":4,"y":6},{"id":"C5","group":"0.5","x":6,"y":4},{"id":"Patient","group":"patientGroup"},{"label":"PTEN","id":"PTEN","group":0.5}],"edges":[{"from":"TP53","to":"C5","group":"dashed"},{"from":"TP53","to":"PTEN","group":"dashed"},{"from":"Patient","to":"C5","group":"normal"},{"from":"Patient","to":"PTEN","group":"normal"}]}'>
</network-expander>
</div>
</body>
......
releases/release_tag.sh
+ 11
− 11
View file @ 88d1be89
......@@ -21,17 +21,17 @@ echo "Cloning Release Repo..."
git clone git@github.com:AndiMajore/drugstone-releases.git
echo "Updating Repo..."
#echo "Building release..."
#cd frontend || exit
#npm run build:netex
#cd ../
#cp frontend/drugsTone-build/* drugstone-releases/releases/
#
#echo "Building dev..."
#cd frontend || exit
#npm run build:netex-dev
#cd ../
#cp frontend/drugsTone-build/* drugstone-releases/dev/
echo "Building release..."
cd frontend || exit
npm run build:netex
cd ../
cp frontend/drugsTone-build/* drugstone-releases/releases/
echo "Building dev..."
cd frontend || exit
npm run build:netex-dev
cd ../
cp frontend/drugsTone-build/* drugstone-releases/dev/
echo "Building remote..."
cd frontend || exit
......
src/app/components/task-list/task-list.component.html
+ 1
− 1
View file @ 88d1be89
......@@ -62,7 +62,7 @@
<span class="icon is-pulled-right"><i class="fas fa-exclamation-triangle" aria-hidden="true"></i></span>
</p>
<p class="has-text-danger">
<small class="status-field">{{task.info.status}}</small>
<small [style.background-color]="colorTheme['panel-background']" [style.border-color]="colorTheme['panel-border']" class="status-field">{{task.info.status}}</small>
<a (click)="analysis.removeTask(task.token)" class="is-pulled-right has-text-danger">
<span class="icon is-pulled-right">
<i class="fa fa-trash"></i>
......
src/app/components/task-list/task-list.component.ts
+ 2
− 0
View file @ 88d1be89
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {AnalysisService, algorithmNames} from '../../services/analysis/analysis.service';
import {Theme} from '../../theme';
@Component({
......@@ -10,6 +11,7 @@ import {AnalysisService, algorithmNames} from '../../services/analysis/analysis.
export class TaskListComponent implements OnInit {
@Input() colorTheme: Theme;
@Input() token: string;
@Output() tokenChange: EventEmitter<string> = new EventEmitter();
......
src/app/pages/explorer-page/explorer-page.component.html
+ 23
− 23
View file @ 88d1be89
<div id="appWindow" class="is-hidden-mobile fullheight" [style.color]="textColor" (window:resize)="onResize($event)">
<div id="appWindow" class="is-hidden-mobile fullheight" [style.color]="textColor" (window:resize)="onResize($event)" [style.background-color]="colorTheme.background" >
<app-launch-analysis [(show)]="showAnalysisDialog"
......@@ -22,7 +22,7 @@
<!-- Start left sidebar -->
<div *ngIf="myConfig.showLeftSidebar" class="covex sidebar bar-left">
<div *ngIf="myConfig.showOverview" class="card bar-large" [ngClass]="{'b-text-small':smallStyle}">
<div *ngIf="myConfig.showOverview" class="card bar-large" [ngClass]="{'b-text-small':smallStyle}" [style.background-color]="colorTheme['panel-background']">
<header class="card-header">
<p class="card-header-title">
<span class="icon">
......@@ -69,7 +69,7 @@
</div>
</div>
<div *ngIf="myConfig.showQuery" class="card bar-large" [ngClass]="{'b-text-small':smallStyle}">
<div *ngIf="myConfig.showQuery" class="card bar-large" [ngClass]="{'b-text-small':smallStyle}" [style.background-color]="colorTheme['panel-background']">
<header class="card-header">
<p class="card-header-title">
<span class="icon">
......@@ -102,7 +102,7 @@
</div>
<!-- Start network block -->
<div class="covex network center-panel" id="main-column">
<div class="covex network center-panel" id="main-column" [style.background-color]="colorTheme['panel-background']">
<div class="analysis-view" *ngIf="selectedAnalysisToken">
<app-analysis-panel [(token)]="selectedAnalysisToken"
......@@ -111,7 +111,7 @@
[smallStyle]="smallStyle"></app-analysis-panel>
</div>
<div class="card network">
<div class="card network" [style.background-color]="colorTheme['network-background']">
<header class="card-header">
<p class="card-header-title">
......@@ -188,7 +188,7 @@
<!-- End network block -->
<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" [style.background-color]="colorTheme['panel-background']">
<header class="card-header" [ngClass]="{'b-text-small':smallStyle}">
<p class="card-header-title">
<span class="icon">
......@@ -219,7 +219,7 @@
</div>
</div>
<div *ngIf="myConfig.showSimpleAnalysis" class="card bar-large">
<div *ngIf="myConfig.showSimpleAnalysis" class="card bar-large" [style.background-color]="colorTheme['panel-background']">
<header class="card-header" [ngClass]="{'b-text-small':smallStyle}">
<p class="card-header-title">
<span class="icon">
......@@ -237,7 +237,7 @@
</span>
</a>
</header>
<div *ngIf="collapseAnalysisQuick">
<div *ngIf="collapseAnalysisQuick" [style.background-color]="colorTheme['panel-background']">
<div class="card-content quick-find">
<div class="field">
<div class="control">
......@@ -292,7 +292,7 @@
</div>
</div>
<div *ngIf="myConfig.showAdvAnalysis" class="card bar-large">
<div *ngIf="myConfig.showAdvAnalysis" class="card bar-large" [style.background-color]="colorTheme['panel-background']">
<header class="card-header" [ngClass]="{'b-text-small':smallStyle}">
<p class="card-header-title">
<span class="icon">
......@@ -310,7 +310,7 @@
</span>
</a>
</header>
<div *ngIf="collapseAnalysis">
<div *ngIf="collapseAnalysis" >
<div class="card-content">
<div class="field">
<div class="control">
......@@ -370,7 +370,7 @@
</div>
</div>
<div *ngIf="myConfig.showTasks" class="card bar-large">
<div *ngIf="myConfig.showTasks" class="card bar-large" [style.background-color]="colorTheme['panel-background']">
<header class="card-header" [ngClass]="{'b-text-small':smallStyle}">
<p class="card-header-title">
<span class="icon">
......@@ -390,9 +390,9 @@
</header>
<div *ngIf="collapseTask">
<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" [colorTheme]="colorTheme"></app-task-list>
</div>
<footer class="card-footer">
<footer class="card-footer" [style.border-color]="colorTheme['panel-border']">
<a *ngIf="analysis.tasks && analysis.tasks.length > 0"
(click)="analysis.removeAllTasks(); selectedAnalysisToken = null;"
class="card-footer-item has-text-danger" data-tooltip="Delete all tasks.">
......@@ -407,7 +407,7 @@
</div>
</div>
<div *ngIf="myConfig.showSelection" class="card bar-large">
<div *ngIf="myConfig.showSelection" class="card bar-large" [style.background-color]="colorTheme['panel-background']" [style.border-color]="colorTheme['panel-border']">
<header class="card-header" [ngClass]="{'b-text-small':smallStyle}">
<p class="card-header-title">
<span class="icon">
......@@ -426,7 +426,7 @@
</a>
</header>
<div *ngIf="collapseSelection" class="seed-selection" [ngClass]="{'text-normal':smallStyle}">
<div class="card-content overflow">
<div class="card-content overflow" [style.background-color]="colorTheme['panel-background']">
<table class="table selection-table" *ngIf="analysis.getCount() > 0">
<thead>
<tr>
......@@ -453,7 +453,7 @@
</i>
</div>
<footer class="card-footer" *ngIf="selectedAnalysisToken">
<footer class="card-footer" *ngIf="selectedAnalysisToken" [style.background-color]="colorTheme['panel-background']" [style.border-color]="colorTheme['panel-border']">
<a (click)="analysis.addSeeds(currentViewNodes)"
class="card-footer-item has-text-success" data-tooltip="Add all visible seeds.">
......@@ -475,10 +475,10 @@
</a>
</footer>
<footer class="card-footer">
<footer class="card-footer" [style.background-color]="colorTheme['panel-background']" [style.border-color]="colorTheme['panel-border']">
<a (click)="showCustomProteinsDialog = true"
class="card-footer-item has-text-primary"
data-tooltip="Add a custom list of proteins.">
data-tooltip="Add a custom list of proteins." [style.border-color]="colorTheme['panel-border']">
<span class="icon">
<i class="fa fa-upload"></i>
</span>
......@@ -488,7 +488,7 @@
</a>
<a (click)="showThresholdDialog = true"
class="card-footer-item has-text-primary"
data-tooltip="Add proteins expressed in the tissue.">
data-tooltip="Add proteins expressed in the tissue." [style.border-color]="colorTheme['panel-border']">
<span class="icon">
<i class="fa fa-angle-double-up"></i>
</span>
......@@ -498,9 +498,9 @@
</a>
</footer>
<footer class="card-footer">
<footer class="card-footer" [style.background-color]="colorTheme['panel-background']" [style.border-color]="colorTheme['panel-border']">
<a (click)="analysis.invertSelection(currentViewNodes)" class="card-footer-item has-text-primary"
data-tooltip="Invert the current selection.">
data-tooltip="Invert the current selection." [style.border-color]="colorTheme['panel-border']">
<span class="icon">
<i class="fa fa-sync"></i>
</span>
......@@ -509,7 +509,7 @@
</span>
</a>
<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." [style.border-color]="colorTheme['panel-border']">
<span class="icon">
<i class="fa fa-broom"></i>
</span>
......@@ -525,7 +525,7 @@
</div>
</div>
<div class="is-hidden-tablet mobile-fallback">
<div class="is-hidden-tablet mobile-fallback" [style.background-color]="colorTheme.background">
Sorry, CoVex is not available for mobile phones.
To find information about CoVex, please check the <a routerLink="/about">About</a> page or visit this page
with another device with a larger screen.
......
src/app/pages/explorer-page/explorer-page.component.ts
+ 16
− 3
View file @ 88d1be89
......@@ -6,6 +6,7 @@ import {OmnipathControllerService} from '../../services/omnipath-controller/omni
import domtoimage from 'dom-to-image';
import {NetworkSettings} from '../../network-settings';
import {defaultConfig, EdgeGroup, IConfig, NodeGroup} from '../../config';
import {defaultTheme, Theme} from '../../theme';
import {NetexControllerService} from 'src/app/services/netex-controller/netex-controller.service';
// import * as 'vis' from 'vis-network';
// import {DataSet} from 'vis-data';
......@@ -30,6 +31,18 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
@Input()
public onload: undefined | string;
public colorTheme: Theme = defaultTheme;
@Input()
public set theme(config: string | undefined) {
if (config == null) {
return;
}
const theme = JSON.parse(config);
for (const key of Object.keys(theme)) {
this.colorTheme[key] = theme[key];
}
}
@Input()
public set config(config: string | undefined) {
......@@ -417,10 +430,10 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
public toImage() {
this.downloadDom(this.networkWithLegendEl.nativeElement).catch(error => {
console.error("Falling back to network only screenshot. Some components seem to be inaccessable, most likely the legend is a custom image with CORS access problems on the host server side.")
console.error('Falling back to network only screenshot. Some components seem to be inaccessable, most likely the legend is a custom image with CORS access problems on the host server side.');
this.downloadDom(this.networkEl.nativeElement).catch(e => {
console.error("Some network content seems to be inaccessable for saving as a screenshot. This can happen due to custom images used as nodes. Please ensure correct CORS accessability on the images host server.")
console.error(e)
console.error('Some network content seems to be inaccessable for saving as a screenshot. This can happen due to custom images used as nodes. Please ensure correct CORS accessability on the images host server.');
console.error(e);
});
});
}
......
src/app/theme.ts 0 → 100644
+ 27
− 0
View file @ 88d1be89
export interface Theme {
background: string;
'panel-background': string;
'panel-border': string;
'network-background': string;
color1: string;
color2: string;
'text-primary': string;
'text-secondary': string;
success: string;
warn: string;
error: string;
}
export const defaultTheme: Theme = {
background : '#fff',
'panel-background': '#fff',
'panel-border': '#ededed',
'network-background': '#fff',
color1: '#00d1b2',
color2: '#3273dc',
'text-primary': '#000',
'text-secondary': '#fff',
success: '#48c774',
warn: '#C78E48',
error: '#f14668'
};
src/index.html
+ 1
− 0
View file @ 88d1be89
......@@ -47,6 +47,7 @@
{"from": "Patient No. 5","to": "C5","label": "w/o group"}
]
}'
theme='{"background":"#cd3de6", "panel-background":"#C78E48", "panel-border":"black"}'
style="height: 100%; width: 100vw; display: block;"
></network-expander>
</div>
......
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