Skip to content
Snippets Groups Projects
Commit 9f590c3b authored by Michael Hartung's avatar Michael Hartung
Browse files

images in nodes and legend

parent 813026c0
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/app/components/network-legend/network-legend.component.html
+ 28
− 8
View file @ 9f590c3b
......@@ -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>&nbsp;{{ 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>&nbsp;{{ 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>&nbsp;{{ 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>&nbsp;{{ edgeGroup.value.name }}</td>
</tr>
......
src/app/components/network-legend/network-legend.component.scss
+ 42
− 6
View file @ 9f590c3b
@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;
......
src/app/config.ts
+ 4
− 3
View file @ 9f590c3b
......@@ -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',
}
},
......
src/app/interfaces.ts
+ 0
− 1
View file @ 9f590c3b
......@@ -5,7 +5,6 @@ export interface Node {
id: string;
access: string;
group?: string;
interactions?: Node[];
x?: number;
y?: number;
......
src/app/pages/explorer-page/explorer-page.component.ts
+ 4
− 0
View file @ 9f590c3b
......@@ -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;
......
src/index.html
+ 13
− 1
View file @ 9f590c3b
......@@ -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: [
......
src/variables.scss
+ 3
− 3
View file @ 9f590c3b
......@@ -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;
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