Skip to content

feat: templated external links (draft) #1910

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 27 commits into
base: master
Choose a base branch
from
+144 −41
Draft

feat: templated external links (draft) #1910

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
a5a3c28
Merge pull request #3 from SciCatProject/master
GBirkel Jun 3, 2025
9bc67e1
Merge pull request #4 from SciCatProject/master
GBirkel Jun 23, 2025
0e97ce2
Dealing with CSS name collisions in browser space. Slight re-orderin…
GBirkel Jun 24, 2025
004482b
Adding a header style for links.
GBirkel Jun 24, 2025
7255794
Draft dataset links card.
GBirkel Jun 24, 2025
237d4a1
Changing this color to one that matches the saturation and luminance …
GBirkel Jun 24, 2025
f263e26
Seems to be a typo. Can't find any reason why this would be here fro…
GBirkel Jun 24, 2025
946f145
Oops; fixing a typo.
GBirkel Jul 15, 2025
67671bb
Merge commit '5f56da2d2a8f1b981ecbe1fa875971af64a58194' into template…
GBirkel Jul 17, 2025
0f7c8e8
Adapting the newly introduced style class names.
GBirkel Jul 17, 2025
3cbeb67
Patching the local SDK generator to support SciCat live. (Cannot fet…
GBirkel Jul 22, 2025
16c4dec
Minor comment to patched script.
GBirkel Jul 22, 2025
584613f
Development SDK generation script patches, for playing nice with SciC…
GBirkel Jul 23, 2025
6b407e3
Just some minor code commentary.
GBirkel Jul 23, 2025
12c11b8
Merge branch 'refs/heads/master' into templated-external-links
GBirkel Aug 5, 2025
e9b65e3
Accepting an alternate Swagger URL via command line argument.
GBirkel Aug 8, 2025
f40bd25
Merge remote-tracking branch 'refs/remotes/origin/master' into templa…
GBirkel Aug 13, 2025
f757346
Now displaying links.
GBirkel Aug 13, 2025
79a6695
Deprecation note
GBirkel Aug 13, 2025
469142a
Merge branch 'refs/heads/master' into templated-external-links
GBirkel Aug 29, 2025
9dd6624
New field in state, and new selector for external links. Code to fet…
GBirkel Sep 3, 2025
2c9308f
Further refinements to the SDK generation script.
GBirkel Sep 3, 2025
ba107ec
Minor fix to SDK copy paths.
GBirkel Sep 3, 2025
41712c6
Merge branch 'refs/heads/master' into templated-external-links
GBirkel Sep 8, 2025
f8f5107
Pulling in changes from master.
GBirkel Nov 5, 2025
71574f7
Lint
GBirkel Nov 5, 2025
a9a92e6
Reverting all changes to API generation script (these were only used …
GBirkel Nov 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 39 additions & 2 deletions scripts/generate-nestjs-sdk.bash
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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..."

Expand All @@ -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
Expand Down Expand Up @@ -65,3 +100,5 @@ then
rm -fv "/usr/local/bin/node"
fi

rm local-api-for-generator.json

20 changes: 12 additions & 8 deletions src/app/datasets/dataset-detail/dataset-detail/_dataset-detail-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
}
}
}

Expand Down
107 changes: 98 additions & 9 deletions src/app/datasets/dataset-detail/dataset-detail/dataset-detail.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/app/datasets/dataset-detail/dataset-detail/dataset-detail.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/app/datasets/reduce/_reduce-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/app/datasets/reduce/reduce.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>

Expand Down
14 changes: 7 additions & 7 deletions src/app/publisheddata/publisheddata-details/_publisheddata-details-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
}
}
}
Expand Down
10 changes: 5 additions & 5 deletions src/app/publisheddata/publisheddata-details/publisheddata-details.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
3 changes: 3 additions & 0 deletions src/app/shared/modules/table/table.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading
Loading