added node style diamond to legend

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

@@ -25,6 +25,12 @@
               <span class="node {{ nodeGroup.value.shape }}" [style.border-bottom-color]=nodeGroup.value.color>
               </span>
             </td>
+            <td *ngSwitchCase="'diamond'">
+              <span class="node {{ nodeGroup.value.shape }}" 
+                    [style.background-color]=nodeGroup.value.color
+              >
+              </span>
+            </td>
             <td *ngSwitchCase="'star'">
               <span class="node {{ nodeGroup.value.shape }}"
                     [style.border-bottom-color]=nodeGroup.value.color

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

@@ -19,6 +19,14 @@ div.legend {
       .text{
         font-style: italic;
       }
+      .diamond {
+        height: 75%;
+        text-align: center;
+        transform: rotate(45deg);
+        width: 75%;
+        margin-left: 12.5%;
+        display: inline-block;
+      }
       .box{
         // class "box" exists in bulma css, we need only small changes
         height: 100%;

src/app/config.ts

 export interface NodeGroup {
   groupName: string;
   color: string;
-  shape: 'circle' | 'triangle' | 'star' | 'square' | 'image' | 'text' | 'ellipse' | 'box';
+  shape: 'circle' | 'triangle' | 'star' | 'square' | 'image' | 'text' | 'ellipse' | 'box' | 'diamond';
   type: string;
   image?: string;
   detailShowLabel?: boolean;

src/index.html

@@ -36,7 +36,7 @@
 
   <network-expander id="netexp1"
                     config='{
-                      "nodeGroups": {"0.5": {"type": "0.5er Instanz", "color": "rgb(204, 255, 51)", "groupName": "0.5", "shape": "box"}, "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": "diamond"}, "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"
                     }'