adding data browser

src/app/app.component.ts

@@ -4,7 +4,7 @@ import { ChartComponent } from '../components/chart/chart.component';
 import { SelectComponent } from '../components/select/select.component';
 import { DataService } from '../services/data.service';
 import { TableComponent } from '../components/table/table.component';
-import { Header } from '../components/table/header';
+import { Header } from '../models/header';
 import { FilterService } from '../services/filters.service';
 import { Observable } from 'rxjs';
 import { Milestone } from '../enums/milestone';
@@ -12,6 +12,9 @@ import { ScoresComponent } from './scores/scores.component';
 import { CommonModule } from '@angular/common';
 import { CohortSectionComponent } from './cohort-section/cohort-section.component';
 import { KeyValue } from '../models/key-value';
+import { QueryComponent } from '../components/query/query.component';
+import { MetadataComponent } from '../components/metadata/metadata.component';
+import { ResultComponent } from '../components/result/result.component';
 
 @Component({
   selector: 'app-root',
@@ -24,6 +27,9 @@ import { KeyValue } from '../models/key-value';
     TableComponent,
     ScoresComponent,
     CohortSectionComponent,
+    QueryComponent,
+    MetadataComponent,
+    ResultComponent,
   ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
@@ -43,10 +49,10 @@ export class AppComponent implements OnInit {
     { label: 'School', source: Milestone.School },
     { label: 'Grade', source: Milestone.Grade },
   ].map((data) => new Header(data));
-  rows: Observable<Record<string, any>[]> = this.data.Data;
+  rows: Observable<Record<string, any>[]> = this.data.Data$;
 
   ngOnInit(): void {
-    this.data.Cohorts.subscribe((kv: KeyValue[]) => {
+    this.data.Cohorts$.subscribe((kv: KeyValue[]) => {
       this.cohorts = kv.map((i: KeyValue) => i.key);
     });
     // this.filter.filters$.subscribe((filters: KeyValue[]) => {