feat: add Relationships tab

src/app/admin/schema/frontend.config.jsonforms.json

@@ -25,6 +25,7 @@
       "addDatasetEnabled": { "type": "boolean" },
       "archiveWorkflowEnabled": { "type": "boolean" },
       "datasetReduceEnabled": { "type": "boolean" },
+      "datasetRelationshipsEnabled": { "type": "boolean" },
       "datasetJsonScientificMetadata": { "type": "boolean" },
       "datasetPageSizeOptions": {
         "type": "array",
@@ -460,6 +461,7 @@
           { "type": "Control", "scope": "#/properties/allowConfigOverrides" },
           { "type": "Control", "scope": "#/properties/archiveWorkflowEnabled" },
           { "type": "Control", "scope": "#/properties/datasetReduceEnabled" },
+          { "type": "Control", "scope": "#/properties/datasetRelationshipsEnabled" },
           {
             "type": "Control",
             "scope": "#/properties/datasetJsonScientificMetadata"

src/app/app-config.service.spec.ts

@@ -19,6 +19,7 @@ const appConfig: AppConfigInterface = {
   addDatasetEnabled: true,
   archiveWorkflowEnabled: true,
   datasetReduceEnabled: true,
+  datasetRelationshipsEnabled: true,
   datasetJsonScientificMetadata: true,
   datasetPageSizeOptions: [5, 10, 25, 100],
   editDatasetEnabled: true,

src/app/app-config.service.ts

@@ -86,6 +86,7 @@ export interface AppConfigInterface {
   datasetJsonScientificMetadata: boolean;
   datasetPageSizeOptions?: number[];
   datasetReduceEnabled: boolean;
+  datasetRelationshipsEnabled: boolean;
   datasetDetailsShowMissingProposalId: boolean;
   datasetActionsEnabled: boolean;
   datasetActions: any[];

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

@@ -12,6 +12,7 @@ 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";
 import { DatasetDetailWrapperComponent } from "datasets/dataset-detail/dataset-detail-wrapper.component";
+import { RelationshipsComponent } from "datasets/relationships/relationships.component";
 
 const routes: Routes = [
   {
@@ -30,6 +31,10 @@ const routes: Routes = [
     path: "relatedDatasets",
     component: RelatedDatasetsComponent,
   },
+  {
+    path: "relationships",
+    component: RelationshipsComponent,
+  },
   // 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/datasets/dataset-details-dashboard/dataset-details-dashboard.component.ts

@@ -61,6 +61,7 @@ enum TAB {
   jsonScientificMetadata = "Scientific Metadata (JSON)",
   datafiles = "Datafiles",
   relatedDatasets = "Related Datasets",
+  relationships = "Relationships",
   reduce = "Reduce",
   logbook = "Logbook",
   attachments = "Attachments",
@@ -184,6 +185,12 @@ export class DatasetDetailsDashboardComponent
               icon: "folder",
               enabled: true,
             },
+            {
+              location: "./relationships",
+              label: TAB.relationships,
+              icon: "device_hub",
+              enabled: this.appConfig.datasetRelationshipsEnabled,
+            },
             {
               location: "./reduce",
               label: TAB.reduce,

src/app/datasets/datasets.module.ts

@@ -92,6 +92,8 @@ import { TitleCasePipe } from "shared/pipes/title-case.pipe";
 import { ConfigurableActionsModule } from "shared/modules/configurable-actions/configurable-actions.module";
 import { OverlayModule } from "@angular/cdk/overlay";
 import { SharedConditionModule } from "shared/modules/shared-condition/shared-condition.module";
+import { RelationshipsComponent } from "./relationships/relationships.component";
+import { RelatedIdentifierCellComponent } from "./relationships/related-identifier-cell/related-identifier-cell.component";
 
 @NgModule({
   imports: [
@@ -186,6 +188,8 @@ import { SharedConditionModule } from "shared/modules/shared-condition/shared-co
     DatasetFileUploaderComponent,
     AdminTabComponent,
     RelatedDatasetsComponent,
+    RelationshipsComponent,
+    RelatedIdentifierCellComponent,
     DatasetsFilterSettingsComponent,
   ],
   providers: [

src/app/datasets/relationships/related-identifier-cell/related-identifier-cell.component.html

@@ -0,0 +1,9 @@
+@switch (entry.identifierType) {
+    @case ('URL') {
+        <a [href]="entry.identifier">{{entry.externalId ?? entry.identifier}}</a>
+    } @case ('DOI') {
+        <a [href]="doiUrl(entry.identifier)">{{entry.identifier}}</a>
+    } @default {
+        {{entry.identifier}}
+    }
+}

src/app/datasets/relationships/related-identifier-cell/related-identifier-cell.component.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { RelatedIdentifierCellComponent } from "./related-identifier-cell.component";
+import { TableRow } from "shared/modules/dynamic-material-table/models/table-row.model";
+
+describe("RelatedIdentifierCellComponent", () => {
+  let component: RelatedIdentifierCellComponent;
+  let fixture: ComponentFixture<RelatedIdentifierCellComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [RelatedIdentifierCellComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RelatedIdentifierCellComponent);
+    component = fixture.componentInstance;
+    component.row = {
+      identifier: "test-prefix/test-doi",
+      identifierType: "DOI",
+      relationship: "IsReferencedBy",
+      entityType: "JournalArticle",
+    } as unknown as TableRow;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/datasets/relationships/related-identifier-cell/related-identifier-cell.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { RelationshipClass } from "@scicatproject/scicat-sdk-ts-angular";
+import { TableField } from "shared/modules/dynamic-material-table/models/table-field.model";
+import { TableRow } from "shared/modules/dynamic-material-table/models/table-row.model";
+import {
+  DynamicMatTableComponent,
+  IDynamicCell,
+} from "shared/modules/dynamic-material-table/table/dynamic-mat-table.component";
+
+@Component({
+  selector: "app-related-identifier-cell",
+  templateUrl: "./related-identifier-cell.component.html",
+  styleUrl: "./related-identifier-cell.component.scss",
+  standalone: false,
+})
+export class RelatedIdentifierCellComponent implements IDynamicCell, OnInit {
+  @Input() row: TableRow;
+  @Input() column: TableField<any>;
+  @Input() parent: DynamicMatTableComponent<any>;
+
+  entry: RelationshipClass;
+  ngOnInit() {
+    this.entry = this.row as RelationshipClass;
+  }
+  doiUrl(doi: string) {
+    return `https://doi.org/${doi}`;
+  }
+}

src/app/datasets/relationships/relationships.component.html

@@ -0,0 +1,12 @@
+<dynamic-mat-table
+  [tableName]="'relationships'"
+  [columns]="columns"
+  [dataSource]="dataSource"
+  [pagingMode]="'client-side'"
+  [pagination]="paginationConfig"
+  [showGlobalTextSearch]="false"
+  [showReload]="false"
+  [emptyMessage]="'No relationships'"
+  [emptyIcon]="'device_hub'"
+>
+</dynamic-mat-table>

src/app/datasets/relationships/relationships.component.spec.ts

@@ -0,0 +1,41 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { RelationshipsComponent } from "./relationships.component";
+import { provideMockStore } from "@ngrx/store/testing";
+import { selectCurrentRelationships } from "state-management/selectors/datasets.selectors";
+import { DynamicMatTableModule } from "shared/modules/dynamic-material-table/table/dynamic-mat-table.module";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { SharedScicatFrontendModule } from "shared/shared.module";
+import { AppConfigService } from "app-config.service";
+import { TranslateService } from "@ngx-translate/core";
+
+describe("RelationshipsComponent", () => {
+  let component: RelationshipsComponent;
+  let fixture: ComponentFixture<RelationshipsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [RelationshipsComponent],
+      imports: [
+        BrowserAnimationsModule,
+        DynamicMatTableModule.forRoot({}),
+        SharedScicatFrontendModule,
+      ],
+      providers: [
+        provideMockStore({
+          selectors: [{ selector: selectCurrentRelationships, value: [] }],
+        }),
+        { provide: AppConfigService, useValue: { getConfig: () => ({}) } },
+        { provide: TranslateService, useValue: { instant: (k: string) => k } },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RelationshipsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/datasets/relationships/relationships.component.ts

@@ -0,0 +1,47 @@
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import { Store } from "@ngrx/store";
+import { CreateRelationshipDto } from "@scicatproject/scicat-sdk-ts-angular";
+import { BehaviorSubject, Subscription } from "rxjs";
+import { TableField } from "shared/modules/dynamic-material-table/models/table-field.model";
+import { TablePagination } from "shared/modules/dynamic-material-table/models/table-pagination.model";
+import { selectCurrentRelationships } from "state-management/selectors/datasets.selectors";
+import { RelatedIdentifierCellComponent } from "./related-identifier-cell/related-identifier-cell.component";
+
+@Component({
+  selector: "app-relationships",
+  templateUrl: "./relationships.component.html",
+  styleUrl: "./relationships.component.scss",
+  standalone: false,
+})
+export class RelationshipsComponent implements OnInit, OnDestroy {
+  relationships$ = this.store.select(selectCurrentRelationships);
+
+  dataSource = new BehaviorSubject<CreateRelationshipDto[]>([]);
+
+  columns: TableField<unknown>[] = [
+    { name: "relationship" },
+    { name: "entityType" },
+    { name: "identifierType" },
+    {
+      name: "identifier",
+      dynamicCellComponent: RelatedIdentifierCellComponent,
+    },
+  ];
+
+  paginationConfig: TablePagination = {};
+
+  subscription: Subscription;
+
+  constructor(private store: Store) {}
+
+  ngOnInit(): void {
+    this.subscription = this.relationships$.subscribe({
+      next: (rel) => this.dataSource.next(rel),
+      error: (err) => console.log("error in subscription: ", err),
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+}

src/app/state-management/selectors/datasets.selectors.spec.ts

@@ -126,6 +126,14 @@ describe("test dataset selectors", () => {
     });
   });
 
+  describe("selectCurrentRelationships", () => {
+    it("should select the relationships from the current dataset", () => {
+      expect(
+        fromDatasetSelectors.selectCurrentRelationships.projector(dataset),
+      ).toEqual([]);
+    });
+  });
+
   describe("selectFilters", () => {
     it("should select the dataset filters", () => {
       const filters = initialDatasetState.filters;

src/app/state-management/selectors/datasets.selectors.ts

@@ -65,6 +65,11 @@ export const selectCurrentAttachments = createSelector(
   (dataset) => (dataset ? dataset.attachments : []),
 );
 
+export const selectCurrentRelationships = createSelector(
+  selectCurrentDataset,
+  (dataset) => dataset?.relationships ?? [],
+);
+
 export const selectPagination = createSelector(
   selectDatasetState,
   (state) => state.pagination,

src/assets/config.json

@@ -5,6 +5,7 @@
   "allowConfigOverrides": true,
   "archiveWorkflowEnabled": false,
   "datasetReduceEnabled": true,
+  "datasetRelationshipsEnabled": true,
   "datasetJsonScientificMetadata": true,
   "datasetPageSizeOptions": [
     5,