feat: templated external links

scripts/generate-nestjs-sdk.bash

@@ -2,12 +2,38 @@
 #
 #
 
+USING_SCICAT_LIVE=0
+while [[ "$#" -gt 0 ]]; do
+	case "$1" in
+		--scicatlive)
+			USING_SCICAT_LIVE=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 API from local instance of back end..."
+
+if [ $USING_SCICAT_LIVE -eq 1 ];
+then
+	# For when developing with SciCat Live:
+	curl http://backend.localhost/explorer-json > local-api-for-generator.json
+else
+	# For when developing with a backend running directly on localhost:
+	curl http://host.docker.internal:3000/explorer-json > local-api-for-generator.json
+fi
 
 echo -e "\nGenerating the new sdk..."
 
@@ -17,14 +43,23 @@ 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 \
+	-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
 
+# 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
@@ -65,3 +100,5 @@ then
 	rm -fv "/usr/local/bin/node"
 fi
 
+rm local-api-for-generator.json
+

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>
@@ -165,7 +165,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>
@@ -205,7 +205,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>
@@ -229,7 +229,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>
@@ -319,7 +319,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>
@@ -345,10 +345,99 @@
       </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-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 *ngIf="dataset['proposalId'] && proposal">
+              <th>{{ "Proposal" | translate }}</th>
+              <td>
+                <a (click)="onClickProposal(proposal.proposalId)">{{
+                  proposal.title
+                }}</a>
+              </td>
+            </tr>
+            <tr
+              *ngIf="
+                dataset['proposalId'] &&
+                !proposal &&
+                appConfig.datasetDetailsShowMissingProposalId
+              "
+            >
+              <th>{{ "Proposal Id" | translate }}</th>
+              <td>{{ dataset["proposalId"] }}</td>
+            </tr>
+            <tr *ngIf="dataset['sampleId'] && sample">
+              <th>{{ "Sample" | translate }}</th>
+              <td>
+                <a (click)="onClickSample(sample.sampleId)">
+                  <span>{{ sample.description }}</span>
+                </a>
+              </td>
+            </tr>
+            <tr *ngIf="dataset['instrumentId'] && instrument">
+              <th>{{ "Instrument" | translate }}</th>
+              <td>
+                <a (click)="onClickInstrument(instrument.pid)">
+                  {{ instrument.name }}
+                </a>
+              </td>
+            </tr>
+            <tr *ngIf="dataset['creationLocation'] as value">
+              <th>{{ "Creation Location" | translate }}</th>
+              <td>{{ value }}</td>
+            </tr>
+            <tr *ngIf="dataset.techniques && dataset.techniques.length > 0">
+              <th>{{ "Techniques" | translate }}</th>
+              <td>
+                <div *ngFor="let technique of dataset.techniques">
+                  <span>
+                    {{ technique.name }}
+                  </span>
+                  <span
+                    *ngIf="
+                      dataset.techniques.indexOf(technique) <
+                      dataset.techniques.length - 1
+                    "
+                    >,
+                  </span>
+                </div>
+              </td>
+            </tr>
+            <tr
+              *ngIf="
+                dataset['inputDatasets'] && dataset['inputDatasets'].length > 0
+              "
+            >
+              <th>{{ "Input Datasets" | translate }}</th>
+              <td>
+                <div *ngFor="let datasetPid of dataset['inputDatasets']">
+                  <span>
+                    <a [routerLink]="['/datasets/', datasetPid]">
+                      {{ datasetPid }}
+                    </a>
+                  </span>
+                  <span
+                    *ngIf="
+                      dataset['inputDatasets'].indexOf(datasetPid) <
+                      dataset['inputDatasets'].length - 1
+                    "
+                    >,
+                  </span>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </mat-card-content>
+      </mat-card>
+
+      <mat-card>
+        <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/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="60">
     <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>
@@ -39,7 +39,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>
@@ -72,7 +72,7 @@
     </mat-card>
 
     <mat-card>
-      <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>
@@ -102,7 +102,7 @@
     </mat-card>
 
     <mat-card>
-      <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>
@@ -143,7 +143,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>