merge

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

@@ -11,7 +11,7 @@
             <th>
               <img [src]="nodeGroup.value.image" class="legend-icon"/>
             </th>
-            <td>&nbsp;{{ nodeGroup.value.groupName }}</td>
+            <td class="group-name">&nbsp;{{ nodeGroup.value.groupName }}</td>
           </ng-container>
 
           <ng-container *ngIf="!nodeGroup.value.image" [ngSwitch]="nodeGroup.value.shape">
@@ -35,7 +35,7 @@
               </span>
             </th>
             <th *ngSwitchCase="'diamond'">
-              <span class="node diamond" 
+              <span class="node diamond"
                     [style.background-color]=nodeGroup.value.color.background
               >
               </span>
@@ -51,12 +51,12 @@
               <span class="node circle" [style.background-color]=nodeGroup.value.color.background>
               ...
               </span>
-              </th>
+            </th>
             <th *ngSwitchDefault>
               <span class="node {{ nodeGroup.value.shape }}" [style.background-color]=nodeGroup.value.color.background>
               </span>
-              </th>
-            <td>&nbsp;{{ nodeGroup.value.groupName }}</td>
+            </th>
+            <td class="group-name">&nbsp;{{ nodeGroup.value.groupName }}</td>
           </ng-container>
         </ng-container>
 
@@ -70,7 +70,7 @@
             <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>
           </th>
-          <td>&nbsp;{{ edgeGroup.value.groupName }}</td>
+          <td class="group-name">&nbsp;{{ edgeGroup.value.groupName }}</td>
         </ng-container>
       </tr>
     </ng-container>

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

@@ -12,6 +12,9 @@ div.legend {
   img {
     max-width: 20vw;
   }
+  td.group-name{
+    color:var(--drgstn-text-primary);
+  }
   tr.list-item{
     line-height: calc(#{$legend-row-height} / 2);
     th{
@@ -21,6 +24,7 @@ div.legend {
       padding: 0 !important;
       .text{
         font-style: italic;
+        color:var(--drgstn-text-primary);
       }
       .diamond {
         height: $legend-diamond-size;

src/app/components/query-tile/query-tile.component.ts

@@ -24,7 +24,7 @@ export class QueryTileComponent {
 
   querySearch = (term: string, item: Wrapper) => {
     term = term.toLowerCase();
-    const data = JSON.parse(JSON.stringify(item.data));
+    const data = {...item.data}
     // add possible missing attributes to not throw errors
     if (data.ensg === undefined) {data.ensg = []};
     if (data.groupName === undefined) {data.groupName = ''};
@@ -34,9 +34,9 @@ export class QueryTileComponent {
     if (data.uniprotAc === undefined) {data.uniprotAc = ''};
     if (data.drugId === undefined) {data.drugId = ''};
 
-    return data.symbol.toLowerCase().indexOf(term) > -1 || data.uniprotAc.toLowerCase().indexOf(term) > -1 || 
-      data.label.toLowerCase().indexOf(term) > -1 || this.listStartsWith(data.ensg, term) || data.id.toLowerCase().indexOf(term) > -1 
-      || data.proteinName.toLowerCase().indexOf(term) > -1 || data.type.toLowerCase().indexOf(term) > -1 || 
+    return data.symbol.toLowerCase().indexOf(term) > -1 || data.uniprotAc.toLowerCase().indexOf(term) > -1 ||
+      data.label.toLowerCase().indexOf(term) > -1 || this.listStartsWith(data.ensg, term) || data.id.toLowerCase().indexOf(term) > -1
+      || data.proteinName.toLowerCase().indexOf(term) > -1 || data.type.toLowerCase().indexOf(term) > -1 ||
       data.groupName.toLowerCase().indexOf(term) > -1 || data.drugId.toLowerCase().indexOf(term) > -1;
   }
 

src/index.html

@@ -35,7 +35,7 @@
 
   <network-expander id="netexp1"
                     config='{
-                      "nodeGroups": {"selectedNode": {"font": {"size": "18"} }, "0.5": {"shadow":"true","font": "18px verdana blue", "type": "0.5er Instanz", "color": "green", "groupName": "0.5", "shape": "star"}, "patientgroup": {"type": "Patient", "detailShowLabel": "true", "color": "#632345", "groupName": "patient group", "shape": "dot", "size": "50"}, "pugGroup": {"type": "woof woof", "color": "grey", "groupName": "Pug Group", "shape": "triangle", "image": "https://static.raymondcamden.com/images/2016/11/pug.png"}},
+                      "nodeGroups": {"selectedNode": {"font": {"size": "18"} }, "0.5": {"shadow":"true","font": "18px verdana blue", "type": "0.5er Instanz", "color": "green", "groupName": "0.5", "shape": "star"}, "patientgroup": {"type": "Patient", "detailShowLabel": "true", "color": "#632345", "groupName": "patient group", "shape": "text", "size": "50"}, "pugGroup": {"type": "woof woof", "color": "grey", "groupName": "Pug Group", "shape": "triangle", "image": "https://static.raymondcamden.com/images/2016/11/pug.png"}},
                       "edgeGroups": {"xxx": {"color": "black", "groupName": "xxx Group", "dashes": [1, 2]}, "notdashes": {"color": "black", "groupName": "not dashes Group"}},
                       "identifier": "symbol",
                       "nodeShadow": true,

src/stylesheets/theme-styles.scss

@@ -191,6 +191,40 @@
     color: var(--drgstn-text-primary)
   }
 
+  .ng-select-container, .ng-dropdown-panel.ng-select-bottom {
+    background-color: var(--drgstn-panel-secondary);
+    border-color: var(--drgstn-border);
+    .ng-value-container {
+
+      .ng-placeholder{
+        color: var(--drgstn-text-primary);
+      }
+    }
+  }
+  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
+    background-color: var(--drgstn-panel);
+    color:var(--drgstn-text-primary);
+  }
+  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+    background-color: var(--drgstn-panel-secondary);
+    color:var(--drgstn-text-primary);
+  }
+
+  .ng-select {
+    .ng-arrow-wrapper .ng-arrow {
+      border-top-color: var(--drgstn-text-primary);
+    }
+    .ng-clear-wrapper, .ng-select-container {
+      color: var(--drgstn-text-primary);
+    }
+  }
+
+
+  .ng-select.ng-select-opened>.ng-select-container .ng-arrow{
+    border-bottom-color: var(--drgstn-text-primary);
+  }
+
+
   ::-webkit-scrollbar {
     width: 5px;
   }