From bf08763baf719eaa02ac6eb58a198835a1e3afd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20Sp=C3=A4th?= <julian.spaeth@wzw.tum.de>
Date: Mon, 30 Mar 2020 22:50:29 +0200
Subject: [PATCH] Connect backend
---
src/app/api.service.ts | 18 +++++
src/app/app.module.ts | 5 +-
.../explorer-page/explorer-page.component.ts | 78 +++++--------------
3 files changed, 43 insertions(+), 58 deletions(-)
create mode 100644 src/app/api.service.ts
diff --git a/src/app/api.service.ts b/src/app/api.service.ts
new file mode 100644
index 00000000..f91427a5
--- /dev/null
+++ b/src/app/api.service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../environments/environment';
+
+
+const networkUrl = `${environment.backend}` + 'network';
+@Injectable({
+ providedIn: 'root'
+})
+export class ApiService {
+
+ constructor(private http: HttpClient) { }
+
+ async getNetwork() {
+ return this.http.get(networkUrl).toPromise();
+ }
+
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9847797a..c57f5f28 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -9,6 +9,8 @@ import { AppComponent } from './app.component';
import {ExplorerPageComponent} from './pages/explorer-page/explorer-page.component';
import {AboutPageComponent} from './pages/about-page/about-page.component';
import {HomePageComponent} from './pages/home-page/home-page.component';
+import { HttpClientModule } from '@angular/common/http';
+
@NgModule({
declarations: [
@@ -21,7 +23,8 @@ import {HomePageComponent} from './pages/home-page/home-page.component';
BrowserModule,
AppRoutingModule,
FormsModule,
- CommonModule
+ CommonModule,
+ HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index b7b63484..02422ebd 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -1,6 +1,9 @@
import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../../environments/environment';
import {Effect, ProteinNetwork} from '../protein-network';
+import { ApiService } from '../../api.service';
declare var vis: any;
@@ -23,14 +26,20 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
public proteinData: ProteinNetwork;
+ public proteinGroups: any;
+ public effects: any;
+ public edges: any;
+
private network: any;
private nodeData: { nodes: any, edges: any } = {nodes: null, edges: null};
+ private networkData: any = [];
+
private seed = 1; // TODO: Remove this
@ViewChild('network', {static: false}) networkEl: ElementRef;
- constructor(private route: ActivatedRoute, private router: Router) {
+ constructor(private route: ActivatedRoute, private router: Router, private api: ApiService) {
this.groupId = 'IFI16';
this.geneNames.push('IFI16');
this.proteinNames.push('Gamma-interface-inducible protein 16');
@@ -70,12 +79,21 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
ngOnInit() {
}
+
+
async ngAfterViewInit() {
if (!this.network) {
await this.createNetwork();
}
}
+ private async getNetwork() {
+ const data: any = await this.api.getNetwork();
+ this.proteinGroups = data.proteinGroups;
+ this.effects = data.effects;
+ this.edges = data.edges;
+ }
+
public zoomToNode(id: string) {
const coords = this.network.getPositions(id)[id];
this.network.moveTo({
@@ -99,8 +117,8 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
}
private async createNetwork() {
- const {proteinGroups, effects, edges: proteinEdges} = await this.loadNetwork();
- this.proteinData = new ProteinNetwork(proteinGroups, effects, proteinEdges);
+ await this.getNetwork();
+ this.proteinData = new ProteinNetwork(this.proteinGroups, this.effects, this.edges);
this.proteinData.loadPositions();
this.proteinData.linkNodes();
@@ -114,8 +132,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
const {nodes, edges} = this.mapDataToNodes(this.proteinData);
- console.log(nodes, edges);
-
this.nodeData.nodes = new vis.DataSet(nodes);
this.nodeData.edges = new vis.DataSet(edges);
@@ -203,58 +219,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.nodeData.nodes.add(Array.from(addNodes.values()));
}
- private async loadNetwork(): Promise<any> {
- // TODO: Load from backend instead of generating random stuff here...
-
- const proteinGroupCount = 10000;
- const effectCount = 50;
- const edgeCount = 2000;
-
- const proteinGroups = [];
- const effects = [];
- const edges = [];
-
- for (let i = 0; i < effectCount; i++) {
- effects.push({
- id: i,
- name: `eff${i}`,
- });
- }
-
- const proteinGroupIds = [];
- for (let i = 0; i < edgeCount; i++) {
- const proteinGroupId = Math.floor(this.random() * proteinGroupCount);
- const effectId = Math.floor(this.random() * effects.length);
- let found = false;
- for (const edge of edges) {
- if (edge.proteinGroupId === proteinGroupId && edge.effectId === effectId) {
- found = true;
- break;
- }
- }
- if (!found) {
- edges.push({
- proteinGroupId, effectId
- });
- if (proteinGroupIds.indexOf(proteinGroupId) === -1) {
- proteinGroupIds.push(proteinGroupId);
- }
- }
- }
-
- for (const proteinGroupId of proteinGroupIds) {
- proteinGroups.push({
- id: proteinGroupId,
- name: `pg${proteinGroupId}`,
- });
- }
-
- return {
- proteinGroups,
- effects,
- edges
- };
- }
private mapProteinGroupToNode(proteinGroup: any): any {
return {
--
GitLab