revert dashed to dashes

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

@@ -39,8 +39,8 @@
     <ng-container *ngIf="this.config.showLegendEdges">
       <tr *ngFor="let edgeGroup of this.config.edgeGroups | keyvalue" class="list-item">
         <td>
-          <hr *ngIf="!edgeGroup.value.dashed" class="edge" [style.background-color]=edgeGroup.value.color>
-          <hr *ngIf="edgeGroup.value.dashed" class="edge dashed" [style.color]=edgeGroup.value.color>
+          <hr *ngIf="!edgeGroup.value.dashes" class="edge" [style.background-color]=edgeGroup.value.color>
+          <hr *ngIf="edgeGroup.value.dashes" class="edge dashes" [style.color]=edgeGroup.value.color>
         </td>
         <td>&nbsp;{{ edgeGroup.value.groupName }}</td>
       </tr>

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

@@ -76,7 +76,7 @@ div.legend {
         height: $legend-edge-height;
         /* Center edge icon */
         margin: 0 auto; 
-        &.dashed {
+        &.dashes {
           border-top: dotted;
         }
 

src/app/config.ts

@@ -2,6 +2,7 @@ export interface NodeGroup {
   groupName: string;
   color: string;
   shape: 'circle' | 'triangle' | 'star' | 'square' | 'image';
+  type: string;
   image?: string;
   detailShowLabel?: boolean;
 }
@@ -10,7 +11,7 @@ export interface EdgeGroup {
   groupName: string;
   color: string;
   // see https://visjs.github.io/vis-network/docs/network/edges.html
-  dashed?: false | Array<number>; 
+  dashes?: false | Array<number>; 
 }
 
 export type Identifier = 'symbol'|'uniprot'|'ensg';
@@ -77,17 +78,20 @@ export const defaultConfig: IConfig = {
       groupName: 'Default Node Group',
       color: 'yellow',
       shape: 'triangle',
+      type: 'default type',
       detailShowLabel: false,
     },
     default_protein: {
       groupName: 'Resulting Proteins',
       color: 'red',
       shape: 'circle',
+      type: 'default protein type',
     },
     default_drug: {
       groupName: 'Possible Drugs',
       color: 'green',
       shape: 'star',
+      type: 'default drug type',
     }
   },
   edgeGroups: {
@@ -95,7 +99,7 @@ export const defaultConfig: IConfig = {
       // this default group is used for default edge group values
       groupName: 'Default Edge Group',
       color: 'black',
-      dashed: false
+      dashes: false
     }
   },
 };

src/app/interfaces.ts

@@ -4,6 +4,7 @@ export interface Node {
   label: string;
   symbol: string;
   id: string;
+  type: string;
   netexId?: string;
   uniprotAc?: string;
   ensg?: Array<string>;
@@ -160,6 +161,7 @@ export interface Wrapper {
   data: {
     id: string;
     label: string;
+    type?: string;
     symbol?: string;
     netexId?: string;
     ensg?: Array<string>;

src/app/pages/explorer-page/explorer-page.component.html

@@ -189,9 +189,8 @@
                aria-hidden="true"></i> -->
           </span>
             <span *ngIf="!selectedWrapper">No item selected</span>
-            <span *ngIf="selectedWrapper && selectedWrapper.data.netexId">
-              <!-- <span *ngIf="selectedWrapper.data.type">selectedWrapper.data.type</span> -->
-              <span *ngIf="selectedWrapper.data.netexId.startsWith('d')">Drug</span>
+            <span *ngIf="selectedWrapper">
+              <span>selectedWrapper.data.type</span>
             </span>
           </p>
           <a (click)="collapseDetails = !collapseDetails" data-action="collapse"

src/app/pages/explorer-page/explorer-page.component.ts

@@ -392,9 +392,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
     }
     // make sure all keys are set
     Object.entries(edgeGroups).forEach(([key, value]) => {
-      if (!('dashed' in value)) {
-        // use dashed default value if not set
-        value['dashed'] = defaultConfig.edgeGroups.default.dashed;
+      if (!('dashes' in value)) {
+        // use dashes default value if not set
+        value['dashes'] = defaultConfig.edgeGroups.default.dashes;
       }
     })
     // override default node groups

src/index.html

@@ -38,14 +38,14 @@
 
   <network-expander id="netexp1"
                     config='{
-                      "nodeGroups": {"0.5": {"color": "rgb(204, 255, 51)", "groupName": "0.5", "shape": "circle"}, "patient_group": {"detailShowLabel": "true", "color": "red", "groupName": "patient group", "shape": "circle"}},
-                      "edgeGroups": {"dashed": {"color": "black", "groupName": "Dashed Group", "dashed": [1, 2]}, "notdashed": {"color": "black", "groupName": "not Dashed Group"}},
+                      "nodeGroups": {"0.5": {"type": "0.5er Instanz", "color": "rgb(204, 255, 51)", "groupName": "0.5", "shape": "circle"}, "patient_group": {"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"
                     }'
                     network='{
-                      "nodes": [{"id": "MYC", "label": "node w/o group"}, {"id": "TP53", "group": "0.5"}, {"id": "C5", "group": "0.5"}, {"id": "Patient", "group": "patient_group"}, {"label": "PTEN", "id": "PTEN", "group": 0.5}],
+                      "nodes": [{"id": "MYC", "label": "node w/o group"}, {"id": "TP53", "group": "0.5"}, {"id": "C5", "group": "0.5"}, {"id": "Patient No. 5", "group": "patient_group"}, {"label": "PTEN", "id": "PTEN", "group": 0.5}],
                       "edges": [
-                      {"from": "TP53","to": "C5","group": "dashed", "label": "this is a label", "title": "this is a title"},
+                      {"from": "TP53","to": "C5","group": "dashes", "label": "this is a label", "title": "this is a title"},
                       {"from": "Patient No. 5","to": "C5","label": "w/o group"}
                       ]
                     }'