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

fixed screenshot position

parent 0471a21c
Branches
Tags
No related merge requests found
Source diff could not be displayed: it is too large. Options to address this: view the blob.
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<script src="https://cdn.jsdelivr.net/gh/AndiMajore/drugstone-releases@0.6.1/remote/drugsTone.js"></script> <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.3/remote/styles.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AndiMajore/drugstone-releases@0.6.6/remote/styles.css">
</head> </head>
<body> <body>
<div style="height: 700px; width: 1300px;"> <div style="height: 700px; width: 1300px;">
<network-expander <network-expander
id='drugstone-panel-1' id='drugstone-panel-1'
config='{"nodeGroups":{"0.5":{"type":"gene","color":"#CCFF33FF","groupName":"0.5","shape":"circle"},"1.5":{"type":"gene","color":"#66FF33FF","groupName":"1.5","shape":"circle"},"2.0":{"type":"gene","color":"#33CC33FF","groupName":"2.0","shape":"circle"},"patient_group":{"type":"gene","color":"#FF0000FF","groupName":"-2.0","shape":"circle"}},"edgeGroups":{"normal":{"color":"black","groupName":"Custom Group"},"dashed":{"color":"#000857","groupName":"Dashed","dashes":[18,2]}},"identifier":"symbol","legendUrl":"https://exbio.wzw.tum.de/covex/assets/leg1.png"}' 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":"TP53","group":"0.5"},{"id":"C5","group":"0.5"},{"id":"Patient","group":"patient_group"},{"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='{"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"}]}'>
</network-expander> </network-expander>
</div> </div>
</body> </body>
......
...@@ -21,17 +21,17 @@ echo "Cloning Release Repo..." ...@@ -21,17 +21,17 @@ echo "Cloning Release Repo..."
git clone git@github.com:AndiMajore/drugstone-releases.git git clone git@github.com:AndiMajore/drugstone-releases.git
echo "Updating Repo..." echo "Updating Repo..."
echo "Building release..." #echo "Building release..."
cd frontend || exit #cd frontend || exit
npm run build:netex #npm run build:netex
cd ../ #cd ../
cp frontend/drugsTone-build/* drugstone-releases/releases/ #cp frontend/drugsTone-build/* drugstone-releases/releases/
#
echo "Building dev..." #echo "Building dev..."
cd frontend || exit #cd frontend || exit
npm run build:netex-dev #npm run build:netex-dev
cd ../ #cd ../
cp frontend/drugsTone-build/* drugstone-releases/dev/ #cp frontend/drugsTone-build/* drugstone-releases/dev/
echo "Building remote..." echo "Building remote..."
cd frontend || exit cd frontend || exit
......
import {Component, Injector} from '@angular/core'; import {Component, ViewEncapsulation} from '@angular/core';
import {ExplorerPageComponent} from './pages/explorer-page/explorer-page.component';
import {createCustomElement} from '@angular/elements';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
template: `<div></div>`, template: `<div></div>`,
styleUrls: ['./app.component.scss'] styleUrls: ['./app.component.scss'],
// encapsulation: ViewEncapsulation.ShadowDom
}) })
export class AppComponent { export class AppComponent {
mobileWindowExpanded = false; mobileWindowExpanded = false;
......
...@@ -111,7 +111,7 @@ ...@@ -111,7 +111,7 @@
</p> </p>
</header> </header>
<div class="card-content fullheight"> <div class="card-content fullheight">
<div class="card-image" id="canvas-content"> <div class="card-image" id="canvas-content" #networkWithLegend>
<div *ngIf="myConfig.showLegend"> <div *ngIf="myConfig.showLegend">
<app-network-legend [config]="myConfig" [analysis]="false"></app-network-legend> <app-network-legend [config]="myConfig" [analysis]="false"></app-network-legend>
</div> </div>
......
...@@ -60,12 +60,11 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -60,12 +60,11 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
// dont set the key here, will be set in function // dont set the key here, will be set in function
continue; continue;
} else if (key === 'edgeGroups') { } else if (key === 'edgeGroups') {
this.setConfigEdgeGroup(key, configObj[key]) this.setConfigEdgeGroup(key, configObj[key]);
updateNetworkFlag = true; updateNetworkFlag = true;
// dont set the key here, will be set in function // dont set the key here, will be set in function
continue; continue;
} } else if (key === 'interactions') {
else if (key === 'interactions') {
this.getInteractions(); this.getInteractions();
updateNetworkFlag = true; updateNetworkFlag = true;
// dont set the key here, will be set in function // dont set the key here, will be set in function
...@@ -160,6 +159,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -160,6 +159,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
public textColor = 'red'; public textColor = 'red';
@ViewChild('network', {static: false}) networkEl: ElementRef; @ViewChild('network', {static: false}) networkEl: ElementRef;
@ViewChild('networkWithLegend', {static: false}) networkWithLegendEl: ElementRef;
constructor( constructor(
public omnipath: OmnipathControllerService, public omnipath: OmnipathControllerService,
...@@ -300,7 +300,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -300,7 +300,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
const wrapper = getWrapperFromNode(node); const wrapper = getWrapperFromNode(node);
if (wrapper.data.netexId === undefined || !wrapper.data.netexId.startsWith('p')) { if (wrapper.data.netexId === undefined || !wrapper.data.netexId.startsWith('p')) {
// skip if node is not a protein mapped to backend // skip if node is not a protein mapped to backend
return return;
} }
if (this.analysis.inSelection(node)) { if (this.analysis.inSelection(node)) {
this.analysis.removeItems([wrapper]); this.analysis.removeItems([wrapper]);
...@@ -375,7 +375,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -375,7 +375,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
// if node groups are not set or empty, use default node group(s) // if node groups are not set or empty, use default node group(s)
this.myConfig[key] = defaultConfig.nodeGroups; this.myConfig[key] = defaultConfig.nodeGroups;
// stop if nodeGroups do not contain any information // stop if nodeGroups do not contain any information
return return;
} }
// // do not allow '_' in node Group names since it causes problems with backend // // do not allow '_' in node Group names since it causes problems with backend
...@@ -387,14 +387,14 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -387,14 +387,14 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
// use detailShowLabel default value if not set // use detailShowLabel default value if not set
group['detailShowLabel'] = defaultConfig.nodeGroups.default.detailShowLabel; group['detailShowLabel'] = defaultConfig.nodeGroups.default.detailShowLabel;
} }
}) });
// make sure that return-groups (seeds, drugs, found nodes) are set // make sure that return-groups (seeds, drugs, found nodes) are set
const defaultNodeGroups = JSON.parse(JSON.stringify(defaultConfig.nodeGroups)); const defaultNodeGroups = JSON.parse(JSON.stringify(defaultConfig.nodeGroups));
// if user has set nodeGroups, do not use group "default" // if user has set nodeGroups, do not use group "default"
delete defaultNodeGroups.default; delete defaultNodeGroups.default;
// if user has not set the return-groups, take the defaults // if user has not set the return-groups, take the defaults
nodeGroups = {...defaultNodeGroups, ...nodeGroups} nodeGroups = {...defaultNodeGroups, ...nodeGroups};
// override default node groups // override default node groups
this.myConfig[key] = nodeGroups; this.myConfig[key] = nodeGroups;
...@@ -411,7 +411,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -411,7 +411,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
// if edge groups are not set or empty, use default edge group(s) // if edge groups are not set or empty, use default edge group(s)
this.myConfig[key] = defaultConfig.edgeGroups; this.myConfig[key] = defaultConfig.edgeGroups;
// stop if edgeGroups do not contain any information // stop if edgeGroups do not contain any information
return return;
} }
// // do not allow '_' in node Group names since it causes problems with backend // // do not allow '_' in node Group names since it causes problems with backend
...@@ -423,13 +423,17 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -423,13 +423,17 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
// use dashes default value if not set // use dashes default value if not set
value['dashes'] = defaultConfig.edgeGroups.default.dashes; value['dashes'] = defaultConfig.edgeGroups.default.dashes;
} }
}) });
// override default node groups // override default node groups
this.myConfig[key] = edgeGroups; this.myConfig[key] = edgeGroups;
} }
public toCanvas() { public toCanvas() {
html2canvas(this.networkEl.nativeElement).then((canvas) => { let element = this.networkWithLegendEl.nativeElement;
let offsetY = element.getBoundingClientRect().top + document.documentElement.scrollTop;
let offsetX = document.documentElement.scrollLeft + element.getBoundingClientRect().left;
html2canvas(element, {y: (offsetY), x: (offsetX)}
).then((canvas) => {
const generatedImage = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream'); const generatedImage = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
const a = document.createElement('a'); const a = document.createElement('a');
a.href = generatedImage; a.href = generatedImage;
......
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<button onclick="setNetwork('netexp1')">Add nodes</button> <button onclick="setNetwork('netexp1')">Add nodes</button>
<div style="height: 700px; width: 1300px;"> <div style="height: 700px; width: 1300px">
<network-expander id="netexp1" <network-expander id="netexp1"
config='{ config='{
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment