Fetching only requested data instead

src/app/home/home.component.html

@@ -5,16 +5,12 @@
 
 
 <div *ngIf="login.isLoggedIn">
-    <rb-form-multi-select name="groupSelect" idField="id" [items]="keys" [(ngModel)]="isActiveKey" label="Groups"
+    <rb-form-multi-select name="groupSelect" idField="id" [items]="keys" [(ngModel)]="isActiveKey" label="Groups" class="selection">
-                        class="selection" (ngModelChange)="updateGroups($event)">
         <span *rbFormMultiSelectOption="let key">{{key.id}}</span>
-    </rb-form-multi-select>
+    </rb-form-multi-select> 
-
+    <rb-icon-button icon="forward-right" mode="primary" (click)="updateGroups(isActiveKey)">
-    <!--
-    <rb-icon-button icon="forward-right" mode="primary" (click)="updateGroups()">
         Apply groups 
     </rb-icon-button>
-    -->
 
     <div id="divChart">
         <canvas id="myChart">

src/app/home/home.component.scss

@@ -6,3 +6,8 @@ app-login {
   width: 70%;
   float: right;
 }
+
+.selection{
+  float: left;
+  width: 20%;
+}

src/app/home/home.component.ts

@@ -29,7 +29,6 @@ export class HomeComponent implements OnInit {
   ngOnInit() {
     // fetch all available groups  
     this.fetchData('/material/groups', data => this.createGroup(data));
-    //console.log(this.login.username);
   }
 
   // api access with callback
@@ -44,16 +43,33 @@ export class HomeComponent implements OnInit {
     let temp: KeyInterface[] = [];
 
     for (var i = 0; i < data.length; i++) {
-      temp.push({ id: data[i], count: 0, active: true });
+      temp.push({ id: data[i], count: 0, active: false });
     }
     this.keys = temp; // invoke update in rb-multiselect
+    this.initChart();
+
     this.calcFieldSelectKeys();
     // fetch all samples populated with according group
-    this.fetchData('/samples?status%5B%5D=validated&status=new&sort=_id-asc&fields%5B%5D=material.group', data => this.countSamples(data));
+    this.getSamples();
+  }
+
+  getSamples(){
+    let query = '/samples?status%5B%5D=validated&status=new&filters%5B%5D=%7B%22mode%22%3A%22in%22%2C%22field%22%3A%22material.group%22%2C%22values%22%3A%5B';
+    let temp = '';
+    this.keys.forEach(key =>{
+      temp += key.active ? '%22' + key.id.split("%").join("%25") + '%22%2C': ""; // replace split().join() with replaceAll() 
+    });
+    if (temp === ''){
+      this.countSamples('');
+    }else{
+      query = query + temp.substr(0, temp.length-3) + '%5D%7D&fields%5B%5D=material.group'; 
+      this.fetchData(query, data => this.countSamples(data));
+    }
   }
 
   // loop through samples and count
   countSamples(data: any) {
+    this.keys.map(key => key.count = 0);
     for (var i = 0; i < data.length; i++) {
       this.keys.forEach(key => {
         if (key.id === data[i].material.group) {
@@ -61,6 +77,7 @@ export class HomeComponent implements OnInit {
         }
       });
     }
+    this.myChart.destroy();
     this.initChart();
   }
 
@@ -72,14 +89,13 @@ export class HomeComponent implements OnInit {
   }
 
   // update keys based on select
-  updateGroups(event: any) {
+  updateGroups(activeKeys: any) {
     this.keys.forEach(key => {
-      if (event.hasOwnProperty(key.id)) {
+      if (activeKeys.hasOwnProperty(key.id)) {
-        key.active = event[key.id];
+        key.active = activeKeys[key.id];
       }
     });
-    this.myChart.destroy();
+    this.getSamples();
-    this.initChart();
   }
 
   // get data for graph based on active keys