feat: templated external links (draft)

src/app/datasets/datafiles-actions/datafiles-action.component.ts

@@ -101,6 +101,8 @@ export class DatafilesActionComponent implements OnInit, OnChanges {
     this.prepare_disabled_condition();
 
     const expr = this.disabled_condition;
+    // Note: 'with' has been deprecated and is considered harmful.
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with
     const fn = new Function("ctx", `with (ctx) { return (${expr}); }`);
 
     return fn({

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

@@ -7,6 +7,7 @@ import { Subscription } from "rxjs";
 import { showMessageAction } from "state-management/actions/user.actions";
 import {
   selectCurrentAttachments,
+  selectCurrentDatasetExternalLinks,
   selectCurrentDataset,
   selectCurrentDatasetWithoutFileInfo,
 } from "state-management/selectors/datasets.selectors";
@@ -58,6 +59,7 @@ export class DatasetDetailDynamicComponent implements OnInit, OnDestroy {
   dataset$ = this.store.select(selectCurrentDataset);
   datasetWithout$ = this.store.select(selectCurrentDatasetWithoutFileInfo);
   attachments$ = this.store.select(selectCurrentAttachments);
+  externalLinks$ = this.store.select(selectCurrentDatasetExternalLinks);
   loading$ = this.store.select(selectIsLoading);
   show = false;
 

src/app/datasets/dataset-detail/dataset-detail/_dataset-detail-theme.scss

@@ -10,29 +10,33 @@
   $header-3: map.get($color-config, "header-3");
   $header-4: map.get($color-config, "header-4");
   mat-card {
-    .general-header {
+    .dataset-general-header {
       background-color: mat.m2-get-color-from-palette($primary, "lighter");
     }
 
-    .creator-header {
+    .dataset-creator-header {
       background-color: mat.m2-get-color-from-palette($header-1, "lighter");
     }
 
-    .file-header {
-      background-color: mat.m2-get-color-from-palette($accent, "lighter");
+    .dataset-file-header {
+      background-color: mat.m2-get-color-from-palette($header-2, "lighter");
     }
 
-    .related-header {
-      background-color: mat.m2-get-color-from-palette($header-2, "lighter");
+    .dataset-related-header {
+      background-color: mat.m2-get-color-from-palette($accent, "lighter");
     }
 
-    .derived-header {
+    .dataset-derived-header {
       background-color: mat.m2-get-color-from-palette($header-3, "lighter");
     }
 
-    .scientific-header {
+    .dataset-links-header {
       background-color: mat.m2-get-color-from-palette($header-4, "lighter");
     }
+
+    .dataset-scientific-header {
+      background-color: mat.m2-get-color-from-palette($header-1, "lighter");
+    }
   }
 }
 

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

@@ -26,7 +26,7 @@
   <div fxLayout="row" fxLayout.xs="column" *ngIf="dataset">
     <div [fxFlex]="(attachments$ | async)?.length > 0 ? '90%' : '100%'">
       <mat-card [formGroup]="form" data-cy="general-info">
-        <mat-card-header class="general-header">
+        <mat-card-header class="dataset-general-header">
           <mat-icon class="section-icon"> description </mat-icon>
           <mat-card-title class="section-title">{{
             "General Information" | translate: localization
@@ -173,7 +173,7 @@
       </mat-card>
 
       <mat-card>
-        <mat-card-header class="creator-header">
+        <mat-card-header class="dataset-creator-header">
           <mat-icon class="section-icon"> person </mat-icon>
           <mat-card-title class="section-title">{{
             "Creator Information" | translate: localization
@@ -215,7 +215,7 @@
       </mat-card>
 
       <mat-card>
-        <mat-card-header class="file-header">
+        <mat-card-header class="dataset-file-header">
           <mat-icon class="section-icon"> folder </mat-icon>
           <mat-card-title class="section-title">{{
             "File Information" | translate: localization
@@ -241,7 +241,7 @@
       </mat-card>
 
       <mat-card>
-        <mat-card-header class="related-header">
+        <mat-card-header class="dataset-related-header">
           <mat-icon class="section-icon"> library_books </mat-icon>
           <mat-card-title class="section-title">{{
             "Related Documents" | translate: localization
@@ -333,7 +333,7 @@
       </mat-card>
 
       <mat-card *ngIf="dataset.type === 'derived'">
-        <mat-card-header class="derived-header">
+        <mat-card-header class="dataset-derived-header">
           <div mat-card-avatar class="section-icon">
             <mat-icon> analytics </mat-icon>
           </div>
@@ -357,9 +357,29 @@
           </table>
         </mat-card-content>
       </mat-card>
+
+      <mat-card *ngIf="externalLinks$ | async as externalLinks">
+        <mat-card-header class="dataset-links-header">
+          <mat-icon class="section-icon"> link </mat-icon>
+          <mat-card-title class="section-title">{{ "Links" | translate }}</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          <table>
+            <tr *ngFor="let externalLink of externalLinks">
+              <th>{{ externalLink.title }}</th>
+              <td>
+                <a href="{{ externalLink.url }}" target="blank"
+                  >{{ externalLink.description }}</a
+                >
+              </td>
+            </tr>
+          </table>
+        </mat-card-content>
+      </mat-card>
+
       <ng-container *ngIf="emptyMetadataTable()">
         <mat-card>
-          <mat-card-header class="scientific-header">
+          <mat-card-header class="dataset-scientific-header">
             <mat-icon class="section-icon"> science </mat-icon>
             <mat-card-title class="section-title">{{
               "Scientific Metadata" | translate: localization

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

@@ -1,7 +1,7 @@
 mat-card {
   margin: 1em;
 
-  .scientific-header, .related-header, .creator-header, .file-header, .general-header {
+  .dataset-scientific-header, .dataset-related-header, .dataset-creator-header, .dataset-file-header, .dataset-links-header, .dataset-general-header {
     display: flex;
     align-items: center;
     padding: 1em;

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

@@ -10,6 +10,7 @@ import { Store } from "@ngrx/store";
 import { showMessageAction } from "state-management/actions/user.actions";
 import {
   selectCurrentAttachments,
+  selectCurrentDatasetExternalLinks,
   selectCurrentDataset,
   selectCurrentDatasetWithoutFileInfo,
 } from "state-management/selectors/datasets.selectors";
@@ -77,6 +78,7 @@ export class DatasetDetailComponent implements OnInit, OnDestroy {
   dataset: OutputDatasetObsoleteDto | undefined;
   datasetWithout$ = this.store.select(selectCurrentDatasetWithoutFileInfo);
   attachments$ = this.store.select(selectCurrentAttachments);
+  externalLinks$ = this.store.select(selectCurrentDatasetExternalLinks);
   loading$ = this.store.select(selectIsLoading);
   instrument: Instrument | undefined;
   proposal: ProposalClass | undefined;

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

@@ -27,6 +27,7 @@ import {
   fetchDatasetAction,
   fetchOrigDatablocksAction,
   fetchRelatedDatasetsAction,
+  fetchExternalLinksAction,
 } from "state-management/actions/datasets.actions";
 import {
   clearLogbookAction,
@@ -130,6 +131,7 @@ export class DatasetDetailsDashboardComponent
             this.resetTabs();
             // Fetch dataset details
             this.store.dispatch(fetchDatasetAction({ pid: id }));
+            this.store.dispatch(fetchExternalLinksAction({ pid: id }));
             this.fetchDataActions[TAB.details].loaded = true;
           }
         }),

src/app/datasets/reduce/_reduce-theme.scss

@@ -6,11 +6,11 @@
   $primary: map.get($color-config, "primary");
   $accent: map.get($color-config, "accent");
   mat-card {
-    .action-header {
+    .reduce-action-header {
       background-color: mat.m2-get-color-from-palette($primary, "lighter");
     }
 
-    .derived-header {
+    .reduce-derived-header {
       background-color: mat.m2-get-color-from-palette($accent, "lighter");
     }
   }

src/app/datasets/reduce/reduce.component.html

@@ -2,7 +2,7 @@
   <div fxLayout="row" fxLayout.xs="column">
     <div fxFlex="70">
       <mat-card>
-        <mat-card-header class="action-header"> New Action </mat-card-header>
+        <mat-card-header class="reduce-action-header"> New Action </mat-card-header>
 
         <mat-card-content>
           <ng-template [ngIf]="(result$ | async) || derivedDatasets.length > 0">
@@ -176,7 +176,7 @@ <h4>Description</h4>
       </mat-card>
 
       <mat-card *ngIf="derivedDatasets">
-        <mat-card-header class="derived-header">
+        <mat-card-header class="reduce-derived-header">
           Derived Datasets
         </mat-card-header>
 

src/app/publisheddata/publisheddata-details/_publisheddata-details-theme.scss

@@ -9,24 +9,24 @@
   $accent: map.get($color-config, "accent");
   $header-2: map.get($color-config, "header-2");
   mat-card {
-    .status-header {
+    .publisheddata-status-header {
       background-color: mat.m2-get-color-from-palette($warn, "lighter");
     }
 
-    .general-header {
+    .publisheddata-general-header {
       background-color: mat.m2-get-color-from-palette($primary, "lighter");
     }
 
-    .creator-header {
+    .publisheddata-creator-header {
       background-color: mat.m2-get-color-from-palette($header-1, "lighter");
     }
 
-    .file-header {
-      background-color: mat.m2-get-color-from-palette($accent, "lighter");
+    .publisheddata-file-header {
+      background-color: mat.m2-get-color-from-palette($header-2, "lighter");
     }
 
-    .related-header {
-      background-color: mat.m2-get-color-from-palette($header-2, "lighter");
+    .publisheddata-related-header {
+      background-color: mat.m2-get-color-from-palette($accent, "lighter");
     }
   }
 }

src/app/publisheddata/publisheddata-details/publisheddata-details.component.html

@@ -1,7 +1,7 @@
 <div fxLayout="row" fxLayout.xs="column" *ngIf="publishedData">
   <div fxFlex="80">
     <mat-card>
-      <mat-card-header class="status-header">
+      <mat-card-header class="publisheddata-status-header">
         <div mat-card-avatar class="section-icon">
           <mat-icon> info </mat-icon>
         </div>
@@ -57,7 +57,7 @@
     </mat-card>
 
     <mat-card>
-      <mat-card-header class="general-header">
+      <mat-card-header class="publisheddata-general-header">
         <div mat-card-avatar class="section-icon">
           <mat-icon> description </mat-icon>
         </div>
@@ -90,7 +90,7 @@
     </mat-card>
 
     <mat-card *ngIf="publishedData.metadata?.creators as creators">
-      <mat-card-header class="creator-header">
+      <mat-card-header class="publisheddata-creator-header">
         <div mat-card-avatar class="section-icon">
           <mat-icon> person </mat-icon>
         </div>
@@ -139,7 +139,7 @@
         publishedData.metadata?.dataDescription
       "
     >
-      <mat-card-header class="file-header">
+      <mat-card-header class="publisheddata-file-header">
         <div mat-card-avatar class="section-icon">
           <mat-icon> folder </mat-icon>
         </div>
@@ -180,7 +180,7 @@
     </mat-card>
 
     <mat-card>
-      <mat-card-header class="related-header">
+      <mat-card-header class="publisheddata-related-header">
         <div mat-card-avatar class="section-icon">
           <mat-icon> library_books </mat-icon>
         </div>

src/app/shared/modules/table/table.component.html

@@ -53,16 +53,19 @@
             </div>
           </div>
         </mat-header-cell>
+        <!-- If we have a date format, use it to pipe the data value through the date formatter.  -->
         <div *ngIf="column.dateFormat">
           <mat-cell *matCellDef="let data">
             {{ data[column.name] | date: column.dateFormat }}</mat-cell
           >
         </div>
+        <!-- If we have a pipe (but no date format), pipe the data value through it.  -->
         <div *ngIf="!column.dateFormat && column.pipe">
           <mat-cell *matCellDef="let data">
             {{ data[column.name] | dynamicPipe: column.pipe : [] }}</mat-cell
           >
         </div>
+        <!-- If we have neither, render the data as-is.  -->
         <div *ngIf="!column.dateFormat && !column.pipe">
           <mat-cell *matCellDef="let data"> {{ data[column.name] }}</mat-cell>
         </div>

src/app/shared/modules/table/table.component.spec.ts

@@ -11,6 +11,8 @@ import { NO_ERRORS_SCHEMA } from "@angular/core";
 import { MatCheckboxChange } from "@angular/material/checkbox";
 import { TableModule } from "./table.module";
 
+// Jasmine testing framework descriptions for Angular component TableComponent
+
 describe("TableComponent", () => {
   let component: TableComponent;
   let fixture: ComponentFixture<TableComponent>;

src/app/shared/modules/table/table.component.ts

@@ -9,6 +9,8 @@ import {
 import { SelectionModel } from "@angular/cdk/collections";
 import { MatCheckboxChange } from "@angular/material/checkbox";
 
+// Accessory types and definition for Angular component TableComponent
+
 export interface TableColumn {
   name: string;
   icon: string;

src/app/shared/modules/table/table.module.ts

@@ -11,6 +11,8 @@ import { MatPaginatorModule } from "@angular/material/paginator";
 import { MatSortModule } from "@angular/material/sort";
 import { MatTableModule } from "@angular/material/table";
 
+// NgModule declaration for Angular component TableComponent
+
 @NgModule({
   declarations: [TableComponent],
   imports: [

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

@@ -6,6 +6,7 @@ import {
   OutputDatasetObsoleteDto,
   DatasetsControllerCreateV3Request,
   OutputAttachmentV3Dto,
+  ExternalLinkClass,
 } from "@scicatproject/scicat-sdk-ts-angular";
 import { FacetCounts } from "state-management/state/datasets.store";
 import {
@@ -119,6 +120,18 @@ export const changeRelatedDatasetsPageAction = createAction(
   props<{ page: number; limit: number }>(),
 );
 
+export const fetchExternalLinksAction = createAction(
+  "[Dataset] Fetch External Links",
+  props<{ pid: string }>(),
+);
+export const fetchExternalLinksCompleteAction = createAction(
+  "[Dataset] Fetch External Links Complete",
+  props<{ externallinks: ExternalLinkClass[] }>(),
+);
+export const fetchExternalLinksFailedAction = createAction(
+  "[Dataset] Fetch External Links Failed",
+);
+
 export const prefillBatchAction = createAction("[Dataset] Prefill Batch");
 export const prefillBatchCompleteAction = createAction(
   "[Dataset] Prefill Batch Complete",