From 9f590c3b35f492017f6bcc56bc57861720e64119 Mon Sep 17 00:00:00 2001
From: Michael Hartung <hartungmichael@outlook.com>
Date: Wed, 7 Apr 2021 15:04:28 +0200
Subject: [PATCH] images in nodes and legend
---
.../network-legend.component.html | 36 ++++++++++----
.../network-legend.component.scss | 48 ++++++++++++++++---
src/app/config.ts | 7 +--
src/app/interfaces.ts | 1 -
.../explorer-page/explorer-page.component.ts | 4 ++
src/index.html | 14 +++++-
src/variables.scss | 6 +--
7 files changed, 94 insertions(+), 22 deletions(-)
diff --git a/src/app/components/network-legend/network-legend.component.html b/src/app/components/network-legend/network-legend.component.html
index c568d40b..6a394eec 100644
--- a/src/app/components/network-legend/network-legend.component.html
+++ b/src/app/components/network-legend/network-legend.component.html
@@ -4,22 +4,42 @@
<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'">
+
+ <ng-container *ngIf="nodeGroup.value.image">
+ <!-- group icon given, use icon in legend -->
+ <td>
+ <img [src]="nodeGroup.value.image" class="legend-icon"/>
+ </td>
+ <td> {{ nodeGroup.value.name }}</td>
+ </ng-container>
+
+ <ng-container *ngIf="!nodeGroup.value.image">
+ <!-- no image given, create icon programmatically -->
+ <td *ngIf="nodeGroup.value.shape !== 'triangle' && nodeGroup.value.shape !== 'star'">
<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> {{ nodeGroup.value.name }}</td>
+ </td>
+ <td *ngIf="nodeGroup.value.shape === 'triangle'">
+ <span class="node {{ nodeGroup.value.shape }}" [style.border-bottom-color]=nodeGroup.value.color>
+ </span>
+ </td>
+ <td *ngIf="nodeGroup.value.shape === 'star'">
+ <span class="node {{ nodeGroup.value.shape }}"
+ [style.border-bottom-color]=nodeGroup.value.color
+ [style.color]=nodeGroup.value.color
+ >
+ </span>
+ </td>
+ <td> {{ nodeGroup.value.name }}</td>
+ </ng-container>
+
</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 >
+ <hr class="edge" [style.background-color]=edgeGroup.value.color>
</td>
<td> {{ edgeGroup.value.name }}</td>
</tr>
diff --git a/src/app/components/network-legend/network-legend.component.scss b/src/app/components/network-legend/network-legend.component.scss
index aca175ad..eb49be2b 100644
--- a/src/app/components/network-legend/network-legend.component.scss
+++ b/src/app/components/network-legend/network-legend.component.scss
@@ -1,11 +1,15 @@
@import "~src/variables";
+
div.legend {
position: absolute;
bottom: $network-footer-height;
&.right {
right: 0;
}
+ img {
+ max-width: 20vw;
+ }
tr.list-item{
padding: 0;
height: 40px;
@@ -13,7 +17,7 @@ div.legend {
height: $legend-circle-size;
vertical-align: middle !important;
padding: 0 !important;
- .round{
+ .circle{
background: $legend-default-background-color;
border-radius: 50%;
width: $legend-circle-size;
@@ -28,14 +32,46 @@ div.legend {
border-bottom: $legend-circle-size solid black;
display: inline-block;
}
- .rectangle{
+ .star {
+ position: relative;
+ display: inline-block;
+ width: 0;
+ height: 0;
+ margin-left: .5em;
+ margin-right: .9em;
+ margin-bottom: 1.2em;
+ border-right: .3em solid transparent;
+ border-bottom: .7em solid $legend-star-color;
+ border-left: .3em solid transparent;
+ /* Controlls the size of the stars. */
+ font-size: $legend-star-size;
+ &:before, &:after {
+ content: '';
+ display: block;
+ width: 0;
+ height: 0;
+ position: absolute;
+ top: .6em;
+ left: -1em;
+ border-right: 1em solid transparent;
+ border-bottom: .7em solid;
+ border-left: 1em solid transparent;
+ transform: rotate(-35deg);
+ }
+ &:after {
+ transform: rotate(35deg);
+ }
+ }
+ .square{
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);
+ width: $legend-square-width;
+ height: $legend-square-width;
display: inline-block;
}
+ .legend-icon {
+ width: $legend-circle-size;
+ height: $legend-circle-size;
+ }
.edge{
width: $legend-edge-width;
height: $legend-edge-height;
diff --git a/src/app/config.ts b/src/app/config.ts
index 1f7354d7..fd1b4a94 100644
--- a/src/app/config.ts
+++ b/src/app/config.ts
@@ -9,8 +9,9 @@
export interface NodeGroup {
name: string;
color: string;
- shape: 'round' | 'triangle' | 'rectangle';
+ shape: 'circle' | 'triangle' | 'star' | 'square' | 'image';
type: 'gene' | 'protein' | 'drug';
+ image?: string;
}
export interface EdgeGroup {
@@ -67,13 +68,13 @@ export const defaultConfig: IConfig = {
protein: {
name: 'Resulting Proteins',
color: 'red',
- shape: 'round',
+ shape: 'circle',
type: 'protein',
},
drug: {
name: 'Possible Drugs',
color: 'green',
- shape: 'rectangle',
+ shape: 'star',
type: 'drug',
}
},
diff --git a/src/app/interfaces.ts b/src/app/interfaces.ts
index e03acc01..6aac71ab 100644
--- a/src/app/interfaces.ts
+++ b/src/app/interfaces.ts
@@ -5,7 +5,6 @@ export interface Node {
id: string;
access: string;
group?: string;
-
interactions?: Node[];
x?: number;
y?: number;
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 4c826024..8351e40b 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -208,6 +208,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.selectedWrapper = null;
this.getNetwork();
this.proteinData = new ProteinNetwork(this.proteins, this.edges);
+ console.log(this.proteinData)
this.proteinData.linkNodes();
// Populate baits
@@ -304,6 +305,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
if (customNode.name.length === 0) {
nodeLabel = customNode.id;
}
+ if (node.image) {
+ node.shape = 'image';
+ }
node.label = nodeLabel;
node.id = customNode.id;
node.x = customNode.x;
diff --git a/src/index.html b/src/index.html
index 9405cd07..c73e0b13 100644
--- a/src/index.html
+++ b/src/index.html
@@ -37,7 +37,7 @@
<network-expander id="netexp1" config='{
"showQuery": false,
"legendPos": "right",
- "nodeGroups": {"default": {"color": "grey", "name": "Default Group", "shape": "triangle"}},
+ "nodeGroups": {"default": {"color": "grey", "name": "Default Group", "shape": "triangle", "image": "https://i.ibb.co/vmLV1tB/dna.png"}, "pug-group": {"color": "grey", "name": "Pug Group", "shape": "triangle", "image": "https://static.raymondcamden.com/images/2016/11/pug.png"} },
"edgeGroups":{"default": {"color": "grey", "name": "Default Edge Group"}, "custom": {"color": "red", "name": "Custom Edge Group"}}
}' onload="init1()" style="height: 100vh"></network-expander>
</div>
@@ -86,6 +86,18 @@
id: "3",
access: "C",
group: "drug"
+ },
+ {
+ name: "Gene abz",
+ id: "4",
+ access: "D",
+ group: "default"
+ },
+ {
+ name: "Pug abz",
+ id: "5",
+ access: "D",
+ group: "pug-group"
}
],
edges: [
diff --git a/src/variables.scss b/src/variables.scss
index 0c9a900f..fc3ece90 100644
--- a/src/variables.scss
+++ b/src/variables.scss
@@ -6,10 +6,10 @@ $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-star-size: 20px;
+$legend-square-width: 35px;
$legend-edge-width: 20px;
$legend-edge-height: 3px;
+$legend-star-color: #FC0;
$height: 1000px;
--
GitLab