added node style triangleDown to legend

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

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

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

@@ -58,11 +58,19 @@ div.legend {
       .triangle{
         width: 0;
         height: 0;
-        border-left: calc(#{$legend-circle-size} / 2) solid transparent;
-        border-right: calc(#{$legend-circle-size} / 2) solid transparent;
-        border-bottom: $legend-circle-size solid black;
+        border-left: calc(#{$legend-triangle-size} / 2) solid transparent;
+        border-right: calc(#{$legend-triangle-size} / 2) solid transparent;
+        border-bottom: $legend-triangle-height solid black;  // default color will be changed by user input
         display: inline-block;
       }
+      .triangleDown {
+        width: 0;
+        height: 0;
+        border-left: calc(#{$legend-triangle-size} / 2) solid transparent;
+        border-right: calc(#{$legend-triangle-size} / 2) solid transparent;
+        border-top: $legend-triangle-height solid black;  // default color will be changed by user input
+        display: inline-block;
+      }  
       .star {
         position: relative;
         display: inline-block;
@@ -100,8 +108,8 @@ div.legend {
         display: inline-block;
       }
       .legend-icon {
-        width: $legend-circle-size;
-        height: $legend-circle-size;
+        width: $legend-row-height;
+        height: $legend-row-height;
       }
       hr.edge{
         width: $legend-edge-width;

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": "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": "triangleDown"}, "patientgroup": {"type": "Patient", "detailShowLabel": "true", "color": "red", "groupName": "patient group", "shape": "triangle"}},
                       "edgeGroups": {"dashes": {"color": "black", "groupName": "dashes Group", "dashes": [1, 2]}, "notdashes": {"color": "black", "groupName": "not dashes Group"}},
                       "identifier": "symbol"
                     }'

src/variables.scss

 $row-data-selector-height: auto;
 $network-footer-height: 90px;
 
+// Settings Legend
 $legend-default-background-color: #143d1f;
-$legend-circle-size: 35px;
+$legend-row-height: 35px;
+$legend-circle-size: $legend-row-height;
 $legend-star-size: 20px;
-$legend-square-width: 35px;
+$legend-square-width: $legend-row-height;
 $legend-edge-width: 20px;
 $legend-edge-height: 3px;
 $legend-star-color: #FC0;
+$legend-triangle-size: $legend-row-height;
+$legend-triangle-height: 29px;
 
 $height: 100%;
 
-
+// Settings Interface Components
 $sidebar-right-width: 25%;
 $sidebar-right-min-width: 210px;
 $sidebar-left-width: 18%;