added node styles ellipse and text to legend

src/app/components/network-legend/network-legend.component.html

@@ -14,23 +14,28 @@
             <td>&nbsp;{{ 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>&nbsp;{{ nodeGroup.value.groupName }}</td>
           </ng-container>
         </ng-container>

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%;

src/app/config.ts

 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;

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}],