diff --git a/src/app/components/network-legend/network-legend.component.html b/src/app/components/network-legend/network-legend.component.html index 3262490fae32e1783fbbf3f3ceb16f314ffc514b..3afa1d410f2b40287c44bf1a9d30fd9d89cadcca 100644 --- a/src/app/components/network-legend/network-legend.component.html +++ b/src/app/components/network-legend/network-legend.component.html @@ -14,23 +14,28 @@ <td> {{ nodeGroup.value.groupName }}</td> </ng-container> - <ng-container *ngIf="!nodeGroup.value.image"> + <ng-container *ngIf="!nodeGroup.value.image" [ngSwitch]="nodeGroup.value.shape"> <!-- 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 *ngSwitchCase="'text'"> + <span class="node {{ nodeGroup.value.shape }}"> + text + </span> </td> - <td *ngIf="nodeGroup.value.shape === 'triangle'"> + <td *ngSwitchCase="'triangle'"> <span class="node {{ nodeGroup.value.shape }}" [style.border-bottom-color]=nodeGroup.value.color> </span> </td> - <td *ngIf="nodeGroup.value.shape === 'star'"> + <td *ngSwitchCase="'star'"> <span class="node {{ nodeGroup.value.shape }}" [style.border-bottom-color]=nodeGroup.value.color [style.color]=nodeGroup.value.color > </span> </td> + <td *ngSwitchDefault> + <span class="node {{ nodeGroup.value.shape }}" [style.background-color]=nodeGroup.value.color> + </span> + </td> <td> {{ nodeGroup.value.groupName }}</td> </ng-container> </ng-container> diff --git a/src/app/components/network-legend/network-legend.component.scss b/src/app/components/network-legend/network-legend.component.scss index 86e388e902204cb7f445574aa71c3a26c2df46d4..8e67aa2c770c7fe7c137adf6cf73f1487cf4deab 100644 --- a/src/app/components/network-legend/network-legend.component.scss +++ b/src/app/components/network-legend/network-legend.component.scss @@ -16,6 +16,15 @@ div.legend { height: $legend-circle-size; vertical-align: middle !important; padding: 0 !important; + .text{ + font-style: italic; + } + .ellipse{ + height: 75%; + width: 100%; + border-radius: 50%; + display: inline-block; + } .circle{ background: $legend-default-background-color; border-radius: 50%; diff --git a/src/app/config.ts b/src/app/config.ts index f20b9ff9739eb66dee4142f418a34eaae710dbf3..005a41fee872c603822003f8a8d3f7aeed95a9ed 100644 --- a/src/app/config.ts +++ b/src/app/config.ts @@ -1,7 +1,7 @@ export interface NodeGroup { groupName: string; color: string; - shape: 'circle' | 'triangle' | 'star' | 'square' | 'image'; + shape: 'circle' | 'triangle' | 'star' | 'square' | 'image' | 'text' | 'ellipse'; type: string; image?: string; detailShowLabel?: boolean; diff --git a/src/index.html b/src/index.html index f0652fe56129b3ad2e64dff03ce331fa101b31b4..0283828dfbb973ea37562129b9dbb13e563ae0e9 100644 --- a/src/index.html +++ b/src/index.html @@ -36,9 +36,9 @@ <network-expander id="netexp1" config='{ - "nodeGroups": {"0.5": {"type": "0.5er Instanz", "color": "rgb(204, 255, 51)", "groupName": "0.5", "shape": "circle"}, "patientgroup": {"type": "Patient", "detailShowLabel": "true", "color": "red", "groupName": "patient group", "shape": "circle"}}, + "nodeGroups": {"0.5": {"type": "0.5er Instanz", "color": "rgb(204, 255, 51)", "groupName": "0.5", "shape": "ellipse"}, "patientgroup": {"type": "Patient", "detailShowLabel": "true", "color": "red", "groupName": "patient group", "shape": "circle"}}, "edgeGroups": {"dashes": {"color": "black", "groupName": "dashes Group", "dashes": [1, 2]}, "notdashes": {"color": "black", "groupName": "not dashes Group"}}, - "identifier": "symbol","legendUrl": "https://exbio.wzw.tum.de/covex/assets/leg1.png" + "identifier": "symbol" }' network='{ "nodes": [{"id": "MYC", "label": "node w/o group"}, {"id": "TP53", "group": "0.5"}, {"id": "C5", "group": "0.5"}, {"id": "Patient No. 5", "group": "patientgroup"}, {"label": "PTEN", "id": "PTEN", "group": 0.5}],