Link raw derived datasets

src/app/app-routing/lazy/dataset-details-dashboard-routing/dataset-details-dashboard.routing.module.ts

@@ -10,6 +10,7 @@ import { DatasetDetailComponent } from "datasets/dataset-detail/dataset-detail.c
 import { DatasetFileUploaderComponent } from "datasets/dataset-file-uploader/dataset-file-uploader.component";
 import { DatasetLifecycleComponent } from "datasets/dataset-lifecycle/dataset-lifecycle.component";
 import { ReduceComponent } from "datasets/reduce/reduce.component";
+import { RelatedDatasetsComponent } from "datasets/related-datasets/related-datasets.component";
 import { LogbooksDashboardComponent } from "logbooks/logbooks-dashboard/logbooks-dashboard.component";
 const routes: Routes = [
   {
@@ -22,6 +23,10 @@ const routes: Routes = [
     component: DatafilesComponent,
 
   },
+  {
+    path: "related-datasets",
+    component: RelatedDatasetsComponent,
+  },
   // For reduce && logbook this is a work around because guard priority somehow doesn't work and this work around make guards excuted sequencial
   // Expected behavior should be that ServiceGuard return false should have higher priority than AuthGuard therefore it shoulds navigate to /404 instead of /login
   {

src/app/app.module.ts

@@ -19,6 +19,7 @@ import { MatSnackBarModule } from "@angular/material/snack-bar";
 import { LayoutModule } from "_layout/layout.module";
 import { AppConfigService } from "app-config.service";
 import { AppThemeService } from "app-theme.service";
+import { LazyChildService } from "lazy-child.service";
 
 const appConfigInitializerFn = (appConfig: AppConfigService) => {
   return () => appConfig.loadAppConfig();
@@ -74,6 +75,7 @@ const appThemeInitializerFn = (appTheme: AppThemeService) => {
       deps: [AppThemeService],
     },
     AppThemeService,
+    LazyChildService,
     UserApi,
     SampleApi,
     Title,

src/app/datasets/dataset-detail/dataset-detail.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit, OnDestroy } from "@angular/core";
+import { Component, OnInit, OnDestroy } from "@angular/core";
 import { Dataset, Proposal, Sample } from "shared/sdk/models";
 import { ENTER, COMMA, SPACE } from "@angular/cdk/keycodes";
 import { MatChipInputEvent } from "@angular/material/chips";
@@ -74,7 +74,7 @@ export class DatasetDetailComponent
     public dialog: MatDialog,
     private store: Store,
     private router: Router
-  ) { }
+  ) {}
 
   ngOnInit() {
     this.subscriptions.push(

src/app/datasets/dataset-details-dashboard/dataset-details-dashboard.component.spec.ts

@@ -18,6 +18,7 @@ import { MatIconModule } from "@angular/material/icon";
 import { MatButtonModule } from "@angular/material/button";
 import { MockStore } from "@ngrx/store/testing";
 import { AppConfigService } from "app-config.service";
+import { LazyChildService } from "lazy-child.service";
 
 describe("DetailsDashboardComponent", () => {
   let component: DatasetDetailsDashboardComponent;
@@ -32,38 +33,37 @@ describe("DetailsDashboardComponent", () => {
     editMetadataEnabled: true,
   });
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        schemas: [NO_ERRORS_SCHEMA],
-        declarations: [DatasetDetailsDashboardComponent],
-        imports: [
-          MatButtonModule,
-          MatIconModule,
-          MatSlideToggleModule,
-          MatTabsModule,
-          SharedScicatFrontendModule,
-          StoreModule.forRoot({}),
-        ],
-      });
-      TestBed.overrideComponent(DatasetDetailsDashboardComponent, {
-        set: {
-          providers: [
-            { provide: Router, useValue: router },
-            {
-              provide: AppConfigService,
-              useValue: {
-                getConfig,
-              },
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      schemas: [NO_ERRORS_SCHEMA],
+      declarations: [DatasetDetailsDashboardComponent],
+      imports: [
+        MatButtonModule,
+        MatIconModule,
+        MatSlideToggleModule,
+        MatTabsModule,
+        SharedScicatFrontendModule,
+        StoreModule.forRoot({}),
+      ],
+      providers: [LazyChildService],
+    });
+    TestBed.overrideComponent(DatasetDetailsDashboardComponent, {
+      set: {
+        providers: [
+          { provide: Router, useValue: router },
+          {
+            provide: AppConfigService,
+            useValue: {
+              getConfig,
             },
-            { provide: ActivatedRoute, useClass: MockActivatedRoute },
-            { provide: UserApi, useClass: MockUserApi },
-          ],
-        },
-      });
-      TestBed.compileComponents();
-    })
-  );
+          },
+          { provide: ActivatedRoute, useClass: MockActivatedRoute },
+          { provide: UserApi, useClass: MockUserApi },
+        ],
+      },
+    });
+    TestBed.compileComponents();
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DatasetDetailsDashboardComponent);

src/app/datasets/dataset-details-dashboard/dataset-details-dashboard.component.ts

@@ -23,6 +23,7 @@ import {
   fetchDatablocksAction,
   fetchDatasetAction,
   fetchOrigDatablocksAction,
+  fetchRelatedDatasetsAction,
 } from "state-management/actions/datasets.actions";
 import {
   clearLogbookAction,
@@ -39,6 +40,7 @@ import {
 import { MatDialog } from "@angular/material/dialog";
 import { AppConfigService } from "app-config.service";
 import { fetchInstrumentAction } from "state-management/actions/instruments.actions";
+import { LazyChildService } from "lazy-child.service";
 
 export interface JWT {
   jwt: string;
@@ -51,6 +53,7 @@ export interface FileObject {
 enum TAB {
   details = "Details",
   datafiles = "Datafiles",
+  relatedDatasets = "Related Datasets",
   reduce = "Reduce",
   logbook = "Logbook",
   attachments = "Attachments",
@@ -81,6 +84,10 @@ export class DatasetDetailsDashboardComponent
   }[] = [];
   fetchDataActions: { [tab: string]: { action: any; loaded: boolean } } = {
     [TAB.details]: { action: fetchDatasetAction, loaded: false },
+    [TAB.relatedDatasets]: {
+      action: fetchRelatedDatasetsAction,
+      loaded: false,
+    },
     [TAB.datafiles]: { action: fetchOrigDatablocksAction, loaded: false },
     [TAB.logbook]: { action: fetchLogbookAction, loaded: false },
     [TAB.attachments]: { action: fetchAttachmentsAction, loaded: false },
@@ -95,23 +102,24 @@ export class DatasetDetailsDashboardComponent
   constructor(
     public appConfigService: AppConfigService,
     private cdRef: ChangeDetectorRef,
+    private lazyChildService: LazyChildService,
     private route: ActivatedRoute,
     private store: Store,
     private userApi: UserApi,
     public dialog: MatDialog
   ) {}
 
   ngOnInit() {
-    this.route.params
-      .pipe(pluck("id"))
-      .subscribe((id: string) => {
+    this.subscriptions.push(
+      this.route.params.pipe(pluck("id")).subscribe((id: string) => {
         if (id) {
           // Fetch dataset details
           this.store.dispatch(fetchDatasetAction({ pid: id }));
           this.fetchDataActions[TAB.details].loaded = true;
         }
       })
-      .unsubscribe();
+    );
+
     const datasetSub = this.dataset$
       .pipe(takeWhile((dataset) => !dataset, true))
       .subscribe((dataset) => {
@@ -134,6 +142,12 @@ export class DatasetDetailsDashboardComponent
                   icon: "cloud_download",
                   enabled: true,
                 },
+                {
+                  location: "./related-datasets",
+                  label: TAB.relatedDatasets,
+                  icon: "folder",
+                  enabled: true,
+                },
                 {
                   location: "./reduce",
                   label: TAB.reduce,
@@ -181,28 +195,19 @@ export class DatasetDetailsDashboardComponent
             })
             .unsubscribe();
 
-          if ("proposalId" in dataset) {
-            this.store.dispatch(
-              fetchProposalAction({ proposalId: dataset["proposalId"] })
-            );
-          } else {
-            this.store.dispatch(clearLogbookAction());
-          }
-          if ("sampleId" in dataset) {
-            this.store.dispatch(
-              fetchSampleAction({ sampleId: dataset["sampleId"] })
-            );
-          }
-          if ("instrumentId" in dataset) {
-            this.store.dispatch(
-              fetchInstrumentAction({ pid: dataset["instrumentId"] })
-            );
-          }
+         this.fetchDatasetRelatedDocuments();
         }
       });
     this.subscriptions.push(datasetSub);
     this.jwt$ = this.userApi.jwt();
-  };
+
+    this.lazyChildService.childChanges().subscribe((tabName) => {
+      console.log({ tabName });
+
+      this.fetchDataActions[tabName].loaded = false;
+      this.fetchDatasetRelatedDocuments();
+    });
+  }
   onTabSelected(tab: string) {
     this.fetchDataForTab(tab);
   }
@@ -239,6 +244,29 @@ export class DatasetDetailsDashboardComponent
       }
     }
   }
+
+  fetchDatasetRelatedDocuments(): void {
+    if (this.dataset) {
+      if ("proposalId" in this.dataset) {
+        this.store.dispatch(
+          fetchProposalAction({ proposalId: this.dataset["proposalId"] })
+        );
+      } else {
+        this.store.dispatch(clearLogbookAction());
+      }
+      if ("sampleId" in this.dataset) {
+        this.store.dispatch(
+          fetchSampleAction({ sampleId: this.dataset["sampleId"] })
+        );
+      }
+      if ("instrumentId" in this.dataset) {
+        this.store.dispatch(
+          fetchInstrumentAction({ pid: this.dataset["instrumentId"] })
+        );
+      }
+    }
+  }
+
   ngAfterViewChecked() {
     this.cdRef.detectChanges();
   }

src/app/datasets/dataset-lifecycle/dataset-lifecycle.component.ts

@@ -59,7 +59,7 @@ export class DatasetLifecycleComponent implements OnInit, OnChanges {
   ) {}
 
   private parseHistoryItems(): HistoryItem[] {
-    if (this.dataset) {
+    if (this.dataset && this.dataset.history) {
       const history = this.dataset.history.map(
         ({ updatedAt, updatedBy, id, ...properties }) =>
           Object.keys(properties).map(

src/app/datasets/datasets.module.ts

@@ -79,6 +79,7 @@ import { DatasetFileUploaderComponent } from "./dataset-file-uploader/dataset-fi
 import { AdminTabComponent } from "./admin-tab/admin-tab.component";
 import { instrumentsReducer } from "state-management/reducers/instruments.reducer";
 import { InstrumentEffects } from "state-management/effects/instruments.effects";
+import { RelatedDatasetsComponent } from "./related-datasets/related-datasets.component";
 
 @NgModule({
   imports: [
@@ -155,6 +156,7 @@ import { InstrumentEffects } from "state-management/effects/instruments.effects"
     ShareDialogComponent,
     DatasetFileUploaderComponent,
     AdminTabComponent,
+    RelatedDatasetsComponent,
   ],
   providers: [
     ArchivingService,

src/app/datasets/related-datasets/related-datasets.component.html

@@ -0,0 +1,12 @@
+<div class="dataset-table" *ngIf="vm$ | async as vm">
+  <app-table
+    [data]="vm.relatedDatasets"
+    [columns]="tableColumns"
+    [paginate]="tablePaginate"
+    [currentPage]="vm.relatedDatasetsFilters.skip"
+    [dataCount]="vm.relatedDatasetsCount"
+    [dataPerPage]="vm.relatedDatasetsFilters.limit"
+    (pageChange)="onPageChange($event)"
+    (rowClick)="onRowClick($event)"
+  ></app-table>
+</div>

src/app/datasets/related-datasets/related-datasets.component.scss

@@ -0,0 +1,3 @@
+.dataset-table {
+  margin-top: 5em;
+}