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 19 commits into
base: master
Choose a base branch
from
Draft

feat: templated external links (draft) #1910

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 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
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
37 changes: 33 additions & 4 deletions scripts/generate-nestjs-sdk.bash
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should make this code more robust.
Please read my comments below and see if they make sense.

Original file line number Diff line number Diff line change
@@ -1,13 +1,32 @@
#!/bin/bash
#
#

# 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..."

Expand All @@ -17,14 +36,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 \
-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
Expand Down Expand Up @@ -64,4 +94,3 @@ then
rm -fv "/usr/local/bin/npm"
rm -fv "/usr/local/bin/node"
fi

2 changes: 2 additions & 0 deletions src/app/datasets/datafiles-actions/datafiles-action.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
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
36 changes: 27 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 @@ -344,11 +344,29 @@
</mat-card-content>
</mat-card>

<mat-card *ngIf="dataset.externalLinks && dataset.externalLinks.length > 0">
<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 dataset.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
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
2 changes: 2 additions & 0 deletions src/app/shared/modules/table/table.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Comment on lines +14 to +15
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we really need this comment here?

describe("TableComponent", () => {
let component: TableComponent;
let fixture: ComponentFixture<TableComponent>;
Expand Down
2 changes: 2 additions & 0 deletions src/app/shared/modules/table/table.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Comment on lines +12 to +13
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need the comment?

export interface TableColumn {
name: string;
icon: string;
Expand Down
2 changes: 2 additions & 0 deletions src/app/shared/modules/table/table.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Comment on lines +14 to +15
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need the comment?

@NgModule({
declarations: [TableComponent],
imports: [
Expand Down
6 changes: 3 additions & 3 deletions src/app/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,11 @@ export const light: Theme = {
"--theme-header-2-lighter-contrast": "#000000",
"--theme-header-2-darker": "#32846a",
"--theme-header-2-darker-contrast": "#ffffff",
"--theme-header-3-default": "#ff7d00",
"--theme-header-3-default": "#662200",
"--theme-header-3-default-contrast": "#ffffff",
"--theme-header-3-lighter": "#ffcb99",
"--theme-header-3-lighter": "#c1a699",
"--theme-header-3-lighter-contrast": "#000000",
"--theme-header-3-darker": "#ff9732",
"--theme-header-3-darker": "#854e32",
"--theme-header-3-darker-contrast": "#ffffff",
"--theme-header-4-default": "#821482",
"--theme-header-4-default-contrast": "#ffffff",
Expand Down
6 changes: 3 additions & 3 deletions src/assets/theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,11 @@
"--theme-header-2-lighter-contrast": "#000000",
"--theme-header-2-darker": "#32846a",
"--theme-header-2-darker-contrast": "#ffffff",
"--theme-header-3-default": "#ff7d00",
"--theme-header-3-default": "#662200",
"--theme-header-3-default-contrast": "#ffffff",
"--theme-header-3-lighter": "#ffcb99",
"--theme-header-3-lighter": "#c1a699",
"--theme-header-3-lighter-contrast": "#000000",
"--theme-header-3-darker": "#ff9732",
"--theme-header-3-darker": "#854e32",
"--theme-header-3-darker-contrast": "#ffffff",
"--theme-header-4-default": "#821482",
"--theme-header-4-default-contrast": "#ffffff",
Expand Down
Loading
Loading