feat: templated external links (draft)

scripts/generate-nestjs-sdk.bash

@@ -1,13 +1,39 @@
 #!/bin/bash
 #
-#
+
+# Note: This script is meant to be run from the project root, e.g.
+# ./scripts/generate-nestjs-sdk.bash
+if [ ! -d "node_modules" ]; then
+  echo "Error: No node_modules folder found. This script is means to be run from the project root."
+  exit 1
+fi
+
+# This default is for when developing with a backend running directly on localhost
+SWAGGER_API_URL="http://localhost:3000/explorer-json"
+while [[ "$#" -gt 0 ]]; do
+	case "$1" in
+		--swagger-url)
+			shift
+			SWAGGER_API_URL=$1
+			shift
+			;;
+		*)
+			echo "Unknown argument: $1"
+			exit 1
+			;;
+	esac
+done
 
 USER=`who am i | cut -d\  -f1`
 echo -e "\nUser running the script: ${USER}"
 
 echo -e "\nCleanup old files..."
 rm -rf node_modules/@scicatproject/scicat-sdk-ts-angular
 rm -rf @scicatproject/scicat-sdk-ts-angular
+rm local-api-for-generator.json
+
+echo -e "\nFetching the Swagger API from the back end..."
+curl ${SWAGGER_API_URL} > local-api-for-generator.json
 
 echo -e "\nGenerating the new sdk..."
 
@@ -17,14 +43,25 @@ echo -e "\nGenerating the new sdk..."
 ##
 docker run \
 	--rm \
-	--add-host host.docker.internal:host-gateway \
 	-v "`pwd`:/local" \
-	openapitools/openapi-generator-cli:v7.13.0 generate \
-	-i http://host.docker.internal:3000/explorer-json \
+	openapitools/openapi-generator-cli:v7.14.0 generate \
+	-i /local/local-api-for-generator.json \
 	-g typescript-angular \
 	-o local/@scicatproject/scicat-sdk-ts-angular \
 	--additional-properties=ngVersion=19.0.0,npmName=@scicatproject/scicat-sdk-ts-angular,supportsES6=true,withInterfaces=true  --skip-validate-spec
 
+rm local-api-for-generator.json
+
+# Check if the docker command resulted in any output.
+# If we don't do this, we'll try to cd into a missing folder,
+# and then we'd be invoking 'npm run build' as root in the main project folder,
+# which would create a bunch of stuff in ./dist belonging to root,
+# causing problems for things like SciCat Live.
+if [ ! -d "@scicatproject/scicat-sdk-ts-angular" ]; then
+  echo "Error: OpenApi output not found."
+  exit 1
+fi
+
 REMOVE_NPM_LINK=0
 if ! command -v npm 2>&1 1>/dev/null
 then
@@ -46,17 +83,23 @@ echo -e "\nInstalling dependencies and building the sdk..."
 cd @scicatproject/scicat-sdk-ts-angular 
 npm install
 npm run build
-
-echo -e "\nCopying the build files in node_modules..."
 cd ../..
-cp -rv @scicatproject/scicat-sdk-ts-angular/dist node_modules/@scicatproject/scicat-sdk-ts-angular
+
+if [ ! -d "@scicatproject/scicat-sdk-ts-angular/dist" ]; then
+  echo "Error: Build ouput not found."
+  exit 1
+fi
+
+echo -e "\nCopying the build files into node_modules..."
+mkdir -p node_modules/@scicatproject/scicat-sdk-ts-angular
+cp -rv @scicatproject/scicat-sdk-ts-angular/dist/ node_modules/@scicatproject/scicat-sdk-ts-angular/
 
 echo -e "\nAdjusting ownership to user ${USER}"
 chown -Rv ${USER} node_modules/@scicatproject/scicat-sdk-ts-angular
 
 echo -e "\nFinal cleanup..."
 echo -e "Removing sdk folder"
-rm -rfv @scicatproject
+rm -rf @scicatproject
 
 if [ $REMOVE_NPM_LINK -eq 1 ];
 then
@@ -65,3 +108,4 @@ then
 	rm -fv "/usr/local/bin/node"
 fi
 
+echo -e "\nDone."

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";
@@ -57,6 +58,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 }}</mat-card-title>
         </mat-card-header>
@@ -167,7 +167,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 }}</mat-card-title>
         </mat-card-header>
@@ -207,7 +207,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 }}</mat-card-title>
         </mat-card-header>
@@ -231,7 +231,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 }}</mat-card-title>
         </mat-card-header>
@@ -321,7 +321,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>
@@ -346,11 +346,29 @@
         </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>
+
       <mat-card>
-        <mat-card-header   
-        class="scientific-header">
-         <mat-icon class="section-icon"> science </mat-icon>
-         <mat-card-title class="section-title">{{ "Scientific Metadata" | translate }}</mat-card-title>
+        <mat-card-header class="dataset-scientific-header">
+          <mat-icon class="section-icon"> science </mat-icon>
+          <mat-card-title class="section-title">{{ "Scientific Metadata" | translate }}</mat-card-title>
         </mat-card-header>
         <mat-card-content>
           <ng-template

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,
@@ -126,8 +127,9 @@ export class DatasetDetailsDashboardComponent
       this.route.params.pipe(pluck("id")).subscribe((id: string) => {
         if (id) {
           this.resetTabs();
-          // Fetch dataset details
+          // Fetch dataset details, as well as external links
           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");
     }
   }
 }