Skip to content

Trait-db update #897

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

Merged
Blodir merged 4 commits into from
Feb 2, 2026
Merged

Trait-db update #897

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f971f8b
get trait baseUnit variants from api
Blodir Nov 4, 2025
06e940f
trait db style improvements
Blodir Nov 5, 2025
5650d10
improve trait view styles
Blodir Nov 10, 2025
20ecd30
Merge branch 'development' into trait-db-improvements-53408957
Blodir Feb 2, 2026
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
29 changes: 25 additions & 4 deletions ...ts/laji/src/app/+trait-db/shared/trait-db-my-datasets/trait-db-my-datasets.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,31 @@ <h5>Your Datasets</h5>
<ng-template #loggedInDatasets>
<ng-container *ngIf="datasets$ | async as datasets; else loading">
<div *ngIf="datasets.length > 0; else noDatasets">
<ul *ngFor="let dataset of datasets">
<li><a [routerLink]="['/trait-db/datasets/', dataset.id]">{{ dataset.name }}</a></li>
</ul>
<table>
<tr>
<th>Name</th>
<th>Published</th>
<th>Shared to FinBIF</th>
<th>Shared to GBIF</th>
<th>Edit</th>
</tr>
<tr *ngFor="let dataset of datasets">
<td><a [routerLink]="['/trait-db/datasets/', dataset.id]">{{ dataset.name }}</a></td>
<td *ngIf="dataset.published; else notPublished">
<i class="glyphicon glyphicon-ok"></i>
Published</td>
<td *ngIf="dataset.shareToFinBIF; else notFinBIF">
<i class="glyphicon glyphicon-ok"></i>
On FinBIF</td>
<td *ngIf="dataset.shareToGBIF; else notGBIF">
<i class="glyphicon glyphicon-ok"></i>
On GBIF</td>
<td><a [routerLink]="['/trait-db/datasets/', dataset.id, 'edit']">Edit dataset</a></td>
</tr>
</table>
<ng-template #notPublished><td>Not published</td></ng-template>
<ng-template #notFinBIF><td>Not on FinBIF</td></ng-template>
<ng-template #notGBIF><td>Not on GBIF</td></ng-template>
</div>
</ng-container>
<a routerLink="/trait-db/datasets/new" class="btn btn-default">Create dataset</a>
Expand All @@ -26,4 +48,3 @@ <h5>Your Datasets</h5>
<ng-template #noDatasets>
<p>You have not created any datasets yet. Click below to start sharing trait data.</p>
</ng-template>

12 changes: 11 additions & 1 deletion ...ts/laji/src/app/+trait-db/shared/trait-db-my-datasets/trait-db-my-datasets.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,23 @@

.your-datasets {
padding: $sp-4 $sp-5;
background-color: $neutral-4;
background-color: $neutral-3;
border: 1px solid $primary-3;
border-left: 4px solid $primary-5;
color: $primary-8;
overflow: auto;
border-radius: 4px;

h5 {
margin-top: $sp-4;
color: $neutral-8;
}

.your-datasets-content {
}
}

.glyphicon-ok {
color: $success-5;
text-shadow: 1px 1px 3px $neutral-6;
}
1 change: 1 addition & 0 deletions ...+trait-db/shared/trait-search/trait-search-filters/rank-filter/rank-filter.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
select, input {
width: auto;
max-width: 300px;
}

Expand Down
6 changes: 2 additions & 4 deletions ...pp/+trait-db/shared/trait-search/trait-search-filters/trait-search-filters.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
<details [formGroup]="form" class="lu-details my-6" open>
<summary>Filters</summary>

<div [formGroup]="form">
<div class="mb-5 d-flex flex-gap-4">
<div class="dataset-filter flex-grow">
<label for="trait-search-filters-dataset">Dataset</label>
Expand All @@ -27,4 +25,4 @@
<button (click)="onSearch()" class="btn btn-primary">Search</button>
<button (click)="onClear()" class="btn btn-default">Clear</button>
</div>
</details>
</div>
2 changes: 1 addition & 1 deletion ...pp/+trait-db/shared/trait-search/trait-search-filters/trait-search-filters.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@

.dataset-filter, .trait-filter {
max-width: 300px;
}
}
11 changes: 10 additions & 1 deletion .../app/+trait-db/shared/trait-search/trait-search-filters/trait-search-filters.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,15 @@ export class TraitSearchFiltersComponent implements OnChanges {
}

onClear() {
this.form.setValue(formDefaultValues);
this.form.setValue(
Object.entries(this.form.getRawValue()).reduce(
(prev, curr: [any, any]) => {
const [k, v] = curr;
prev[k] = this.disabled?.has(k) ? v : formDefaultValues[<keyof typeof formDefaultValues>k];
return prev;
},
{} as any
)
);
}
}
34 changes: 26 additions & 8 deletions projects/laji/src/app/+trait-db/shared/trait-search/trait-search.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
<laji-trait-search-filters
[initialValue]="initialFilters"
[disabled]="getDisabledFilters()"
(filterChange)="onFilterChange($event)"
(searchClicked)="onFilterSearchClicked()"
></laji-trait-search-filters>

<a class="btn btn-default" [href]="getDownloadUrl()" download="traits.zip">Download</a>
<div class="d-flex flex-gap-3">
<button
class="btn btn-default"
[luPopover]="searchFilters"
[rootElement]="'body'"
[mode]="'click'"
placement="bottom"
>
<i class="glyphicon glyphicon-wrench"></i>
Filters
</button>
<a class="btn btn-default" [href]="getDownloadUrl()" download="traits.zip">
<i class="glyphicon glyphicon-download"></i>
Download
</a>
</div>

<lu-datatable
[rows]="$any(searchResult?.res?.results) ?? []"
Expand All @@ -19,3 +27,13 @@
(pageChange)="onChangePageIdx($event)"
(sortChange)="onSort($event)"
></lu-datatable>

<ng-template #searchFilters>
<laji-trait-search-filters
class="laji-page"
[initialValue]="initialFilters"
[disabled]="getDisabledFilters()"
(filterChange)="onFilterChange($event)"
(searchClicked)="onFilterSearchClicked()"
></laji-trait-search-filters>
</ng-template>
107 changes: 83 additions & 24 deletions ...laji/src/app/+trait-db/trait-db-datasets/trait-db-dataset/trait-db-dataset.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,77 @@
<ng-container *ngIf="data$ | async; let data; else loading">
<ng-container *ngIf="data.dataset !== null; else datasetNotFound">
<div>{{ data.dataset?.name }}</div>
<div>{{ data.dataset?.description }}</div>

<ng-container *ngIf="data.perms !== undefined; else loading">
<button *ngIf="data.perms !== null" [routerLink]="['edit']" class="btn btn-default">edit</button>
</ng-container>
<div class="d-flex justify-between mb-4">
<h2 class="mb-0">{{ data.dataset?.name }}</h2>
<ng-container *ngIf="data.perms !== undefined; else loading">
<button *ngIf="data.perms !== null" [routerLink]="['edit']" class="btn btn-default">
<i class="glyphicon glyphicon-wrench"></i>
Edit dataset
</button>
</ng-container>
</div>
<p>{{ data.dataset?.description }}</p>

<div>citation: {{ data.dataset?.citation }}</div>
<div>intellectual owner: {{ data.dataset?.intellectualOwner}}</div>
<div>person responsible: {{ data.dataset?.personResponsible }}</div>
<div>contact email: {{ data.dataset?.contactEmail }}</div>
<div *ngIf="data.dataset?.institutionCode">institution code: {{ data.dataset?.institutionCode }}</div>
<div>methods: {{ data.dataset?.methods }}</div>
<div>taxonomic coverage: {{ data.dataset?.taxonomicCoverage}}</div>
<div>temporal coverage: {{ data.dataset?.temporalCoverage }}</div>
<div>geographic coverage: {{ data.dataset?.geographicCoverage }}</div>
<div>coverage basis: {{ data.dataset?.coverageBasis }}</div>
<div *ngIf="data.dataset?.doi">FinBIF DOI: {{ data.dataset?.doi }}</div>
<div *ngIf="data.dataset?.gbifDoi">GBIF DOI: {{ data.dataset?.gbifDoi }}</div>
<div>additional identifiers: {{ data.dataset?.additionalIdentifier }}</div>
<div>published: {{ data.dataset?.published }}</div>
<table class="props-table">
<tr>
<th scope="row">Citation:</th>
<td>{{ data.dataset?.citation }}</td>
</tr>
<tr>
<th scope="row">Intellectual owner:</th>
<td>{{ data.dataset?.intellectualOwner }}</td>
</tr>
<tr>
<th scope="row">Person responsible:</th>
<td>{{ data.dataset?.personResponsible }}</td>
</tr>
<tr>
<th scope="row">Contact email:</th>
<td>{{ data.dataset?.contactEmail }}</td>
</tr>
<tr *ngIf="data.dataset?.institutionCode">
<th scope="row">Institution code:</th>
<td>{{ data.dataset?.institutionCode }}</td>
</tr>
<tr>
<th scope="row">Methods:</th>
<td>{{ data.dataset?.methods }}</td>
</tr>
<tr>
<th scope="row">Taxonomic coverage:</th>
<td>{{ data.dataset?.taxonomicCoverage }}</td>
</tr>
<tr>
<th scope="row">Temporal coverage:</th>
<td>{{ data.dataset?.temporalCoverage }}</td>
</tr>
<tr>
<th scope="row">Geographic coverage:</th>
<td>{{ data.dataset?.geographicCoverage }}</td>
</tr>
<tr>
<th scope="row">Coverage basis:</th>
<td>{{ data.dataset?.coverageBasis }}</td>
</tr>
<tr *ngIf="data.dataset?.doi">
<th scope="row">FinBIF DOI:</th>
<td>{{ data.dataset?.doi }}</td>
</tr>
<tr *ngIf="data.dataset?.gbifDoi">
<th scope="row">GBIF DOI:</th>
<td>{{ data.dataset?.gbifDoi }}</td>
</tr>
<tr>
<th scope="row">Additional identifiers:</th>
<td>{{ data.dataset?.additionalIdentifier }}</td>
</tr>
<tr>
<th scope="row">Published:</th>
<td>{{ data.dataset?.published }}</td>
</tr>
</table>

<ng-container *ngIf="data.perms !== undefined; else loading">
<ng-container *ngIf="data.perms !== null">
<a [routerLink]="['data-entry']" class="btn btn-default">upload trait data</a>
<a [routerLink]="['data-editor']" class="btn btn-default">modify existing trait data</a>

<h3>Permissions</h3>
<ul>
<li *ngFor="let userId of data.perms.userIds">{{ userId }}</li>
Expand All @@ -36,7 +81,21 @@ <h3>Permissions</h3>
</ng-container>

<ng-container *ngIf="data.dataset?.published">
<h3>Browse traits</h3>
<div class="d-flex justify-between mt-8 mb-4">
<h3 class="mb-0">Trait data</h3>
<div *ngIf="data.perms !== undefined; else loading">
<ng-container *ngIf="data.perms !== null">
<a [routerLink]="['data-entry']" class="btn btn-default mr-3">
<i class="glyphicon glyphicon-upload"></i>
Upload trait data
</a>
<a [routerLink]="['data-editor']" class="btn btn-default">
<i class="glyphicon glyphicon-edit"></i>
Modify existing trait data
</a>
</ng-container>
</div>
</div>
<laji-trait-search [datasetId]="data.dataset?.id"></laji-trait-search>
</ng-container>
</ng-container>
Expand Down
3 changes: 3 additions & 0 deletions ...laji/src/app/+trait-db/trait-db-datasets/trait-db-dataset/trait-db-dataset.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.props-table th {
border-bottom: none;
}
5 changes: 2 additions & 3 deletions projects/laji/src/app/+trait-db/trait-db-main/trait-db-main.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="laji-page">
<img src="https://placehold.co/800x300"/>
<h1>FinBIF Trait Database</h1>
<!-- <img src="https://placehold.co/800x300"/> -->
<h1 class="mb-7"><strong>FinBIF</strong> Trait Database</h1>
<div class="d-flex flex-gap-5 mb-6" *ngIf="counts$ | async; else loading; let counts">
<div class="counts-item"><strong>{{ counts.entries }}</strong> trait entries</div>
<div class="counts-item"><strong>{{ counts.traits }}</strong> traits</div>
Expand Down Expand Up @@ -47,4 +47,3 @@ <h3>About</h3>
<ng-template #loading>
<laji-spinner class="d-block m-6"></laji-spinner>
</ng-template>

11 changes: 9 additions & 2 deletions projects/laji/src/app/+trait-db/trait-db-main/trait-db-main.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,19 @@ p {
max-width: 600px;
}

h1 strong {
color: $primary-5;
}

.counts-item {
padding: $sp-4 $sp-5;
background-color: $neutral-4;
background-color: $neutral-1;
border-radius: 4px;
border: 1px solid $info-3;
color: $info-8;

strong {
font-size: $fs-5;
color: $info-7;
}
}

34 changes: 1 addition & 33 deletions .../app/+trait-db/trait-db-traits/trait-db-trait-editor/trait-db-trait-editor.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,38 +39,7 @@
<label for="base-unit">Base unit:</label>
<select id="base-unit" class="form-control" formControlName="baseUnit">
<option [value]="undefined" [attr.selected]="!form.get('baseUnit')?.value ? '' : null">None</option>
<option value="TDF.umNM">{{ 'TDF.umNM' | label }}</option>
<option value="TDF.umUM">{{ 'TDF.umUM' | label }}</option>
<option value="TDF.umMM">{{ 'TDF.umMM' | label }}</option>
<option value="TDF.umCM">{{ 'TDF.umCM' | label }}</option>
<option value="TDF.umM">{{ 'TDF.umM' | label }}</option>
<option value="TDF.umKM">{{ 'TDF.umKM' | label }}</option>
<option value="TDF.umG">{{ 'TDF.umG' | label }}</option>
<option value="TDF.umKG">{{ 'TDF.umKG' | label }}</option>
<option value="TDF.umA">{{ 'TDF.umA' | label }}</option>
<option value="TDF.umS">{{ 'TDF.umS' | label }}</option>
<option value="TDF.umML">{{ 'TDF.umML' | label }}</option>
<option value="TDF.umL">{{ 'TDF.umL' | label }}</option>
<option value="TDF.umMOL">{{ 'TDF.umMOL' | label }}</option>
<option value="TDF.umMMOL">{{ 'TDF.umMMOL' | label }}</option>
<option value="TDF.umUMOL">{{ 'TDF.umUMOL' | label }}</option>
<option value="TDF.umHZ">{{ 'TDF.umHZ' | label }}</option>
<option value="TDF.umP">{{ 'TDF.umP' | label }}</option>
<option value="TDF.umPPT">{{ 'TDF.umPPT' | label }}</option>
<option value="TDF.umPPM">{{ 'TDF.umPPM' | label }}</option>
<option value="TDF.umC">{{ 'TDF.umC' | label }}</option>
<option value="TDF.umMM2">{{ 'TDF.umMM2' | label }}</option>
<option value="TDF.umCM2">{{ 'TDF.umCM2' | label }}</option>
<option value="TDF.umM2">{{ 'TDF.umM2' | label }}</option>
<option value="TDF.umARE">{{ 'TDF.umARE' | label }}</option>
<option value="TDF.umHA">{{ 'TDF.umHA' | label }}</option>
<option value="TDF.umKM2">{{ 'TDF.umKM2' | label }}</option>
<option value="TDF.umMM3">{{ 'TDF.umMM3' | label }}</option>
<option value="TDF.umCM3">{{ 'TDF.umCM3' | label }}</option>
<option value="TDF.umM3">{{ 'TDF.umM3' | label }}</option>
<option value="TDF.umGMOL">{{ 'TDF.umGMOL' | label }}</option>
<option value="TDF.umGMOLL">{{ 'TDF.umGMOLL' | label }}</option>
<option value="TDF.umCM2H">{{ 'TDF.umCM2H' | label }}</option>
<option *ngFor="let u of (unitOfMeasurements$ | async)" [value]="u.id">{{ u.label }}</option>
</select>
<ng-container *ngTemplateOutlet="errorsTmp; context: { $implicit: 'baseUnit' }"></ng-container>
</div>
Expand Down Expand Up @@ -104,4 +73,3 @@
<ng-template #errorsTmp let-prop>
<div class="alert alert-danger" role="alert" *ngIf="errors?.[prop]">{{ errors?.[prop]}}</div>
</ng-template>

8 changes: 6 additions & 2 deletions ...rc/app/+trait-db/trait-db-traits/trait-db-trait-editor/trait-db-trait-editor.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { components } from 'projects/laji-api-client-b/generated/api';
import { LajiApiClientBService } from 'projects/laji-api-client-b/src/laji-api-client-b.service';
import { Observable } from 'rxjs';
import { map, filter, switchMap, tap } from 'rxjs/operators';
import { MetadataService } from '../../../shared/service/metadata.service';
import { UserService } from '../../../shared/service/user.service';
import { filterNullValues } from '../../trait-db-datasets/trait-db-dataset-editor/trait-db-dataset-editor.component';

Expand Down Expand Up @@ -33,13 +34,15 @@ export class TraitDbTraitEditorComponent implements OnInit {
errors: ValidationResponse['errors'] | undefined;

groups$!: Observable<components['schemas']['TraitGroup'][]>;
unitOfMeasurements$!: Observable<{id: string; label: string }[]>;

constructor(
private route: ActivatedRoute,
private api: LajiApiClientBService,
private fb: FormBuilder,
private cdr: ChangeDetectorRef,
private router: Router
private router: Router,
private metadataService: MetadataService
) {}

ngOnInit(): void {
Expand All @@ -53,6 +56,8 @@ export class TraitDbTraitEditorComponent implements OnInit {
});
});

this.unitOfMeasurements$ = this.metadataService.getRange('TDF.unitOfMeasurementEnum');

this.groups$ = this.api.fetch('/trait/trait-groups', 'get', {});
}

Expand Down Expand Up @@ -134,4 +139,3 @@ export class TraitDbTraitEditorComponent implements OnInit {
});
}
}

Loading
Loading