added node style dot to legend

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

@@ -38,6 +38,11 @@
               >
               </span>
             </td>
+            <td *ngSwitchCase="'circle'">
+              <span class="node {{ nodeGroup.value.shape }}" [style.background-color]=nodeGroup.value.color>
+              ...
+              </span>
+              </td>
             <td *ngSwitchDefault>
               <span class="node {{ nodeGroup.value.shape }}" [style.background-color]=nodeGroup.value.color>
               </span>

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

@@ -28,7 +28,7 @@ div.legend {
         display: inline-block;
       }
       .box{
-        // class "box" exists in bulma css, we need only small changes
+        // class "box" exists in bulma css, only small changes needed
         height: 100%;
         width: 100%;
         display: inline-block;
@@ -39,13 +39,21 @@ div.legend {
         width: 100%;
         border-radius: 50%;
         display: inline-block;
-    }
+      }
+      .dot{
+        background: $legend-default-background-color;
+        border-radius: 50%;
+        width: $legend-circle-size;
+        height: $legend-circle-size;
+        display: inline-block;
+      }
       .circle{
         background: $legend-default-background-color;
         border-radius: 50%;
         width: $legend-circle-size;
         height: $legend-circle-size;
         display: inline-block;
+        text-align: center;
       }
       .triangle{
         width: 0;

src/app/config.ts

 export interface NodeGroup {
   groupName: string;
   color: string;
-  shape: 'circle' | 'triangle' | 'star' | 'square' | 'image' | 'text' | 'ellipse' | 'box' | 'diamond';
+  shape: 'circle' | 'triangle' | 'star' | 'square' | 'image' | 'text' | 'ellipse' | 'box' | 'diamond' | 'dot';
   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": "diamond"}, "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": "circle"}, "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"
                     }'

src/styles.scss

@@ -44,7 +44,6 @@ img.menu-icon.is-hoverable.navbar-item.logo {
     overflow-y: scroll;
     padding-right: 5px;
   }
-
 }
 
 div.navbar-menu {