diff --git a/src/app/components/network-legend/network-legend.component.html b/src/app/components/network-legend/network-legend.component.html
index c568d40b21f3e282856cba8678a2301ae01ba9c9..6a394eec473cb536ec41687a7a1bc736163f8bec 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 aca175ad5890b72b8421017608fb4d743a764989..eb49be2ba991695249608dafc912fd99e272d16b 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 1f7354d79c0a3381463e00b66d16f8ff49de5365..fd1b4a943e7561e82e2012aaeaf4f6f621e90f08 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 e03acc016cc4c8846b9407d13bb31bd845f703ec..6aac71ab712f6d351a90a519f2cfdea24c9cde38 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 4c8260240c90c51893f81c03807c7a3589dd4da7..8351e40ba48f1177719555cb20d4fc220b41da08 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 9405cd071b384910f5d832bf522dfedf904503b2..c73e0b13a0991078f26d373453072b4dd01b200f 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 0c9a900ff5f0e345b154083cd7c2a397e0df49f1..fc3ece902ffacb8d3836ecd5d08f73391bab11c4 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;