Skip to content

Commit

Permalink
Styling updates
Browse files Browse the repository at this point in the history
  • Loading branch information
XanderVertegaal committed Nov 29, 2024
1 parent dfd52db commit 286c3a4
Show file tree
Hide file tree
Showing 13 changed files with 648 additions and 425 deletions.
268 changes: 145 additions & 123 deletions frontend/src/app/aethel/aethel.component.html
Original file line number Diff line number Diff line change
@@ -1,127 +1,149 @@
<h2 class="title is-2" i18n>Æthel</h2>
<div class="content">
<div class="columns is-centered">
<div class="column is-two-thirds">
<h1 i18n>Æthel</h1>
<p i18n>
Æthel is a semantic compositionality dataset for Dutch. It
consists of a lexicon of supertags for about 900k words in
context, together with validated derivations for some 70k sample
sentences, associating them with programs (lambda terms) for
their meaning composition. Æthel’s types and derivations are
obtained by means of an extraction algorithm applied to the
syntactic analyses of LASSY Small, the gold standard corpus of
written Dutch.
</p>
<p class="mt-2" i18n>
More info can be found under
<a [routerLink]="['/', 'about']">About</a> and
<a [routerLink]="['/', 'references']">References</a>. The
notations are explained under
<a [routerLink]="['/', 'spindle', 'notation']">Notation</a>.
</p>
<p class="mt-2 mb-4" i18n>
You can use the interface below to search for a word or lemma.
Once you have retrieved a sample, you can inspect it to isolate
and look into a word, a type, or a word-type pair. You can then
look for other words that occur with the same type, or other
occurrences of the same word-type pair.
</p>

<p i18n>
Æthel is a semantic compositionality dataset for Dutch. It consists of a
lexicon of supertags for about 900k words in context, together with
validated derivations for some 70k sample sentences, associating them with
programs (lambda terms) for their meaning composition. Æthel’s types and
derivations are obtained by means of an extraction algorithm applied to the
syntactic analyses of LASSY Small, the gold standard corpus of written
Dutch.
</p>

<p i18n>
More info can be found under <a href="/aethel/references">About</a> and
<a href="/aethel/references">References</a>. The notations are explained
under Notation.
</p>

<p i18n>
You can use the interface below to search for a word or lemma. Once you have
retrieved a sample, you can inspect it to isolate and look into a word, a
type, or a word-type pair. You can then look for other words that occur with
the same type, or other occurrences of the same word-type pair.
</p>

@if (status$ | async) {
<form class="form" [formGroup]="form" (ngSubmit)="submitWord()">
<div class="field">
<label for="aethel-input" class="label">Search:</label>
<div class="aethel-input-container">
<input
id="aethel-input"
class="input"
[class.is-danger]="form.touched && form.invalid"
type="text"
[formControl]="form.controls.word"
placeholder="Enter a word or lemma..."
placeholder-i18n
/>
<button
type="submit"
class="button is-primary"
[class.is-loading]="loading$ | async"
@if (status$ | async) {
<form
class="form mb-4"
[formGroup]="form"
(ngSubmit)="submitWord()"
>
<span i18n>Search</span>
</button>
<div class="field">
<label for="aethel-input" class="label">Search:</label>
<div class="aethel-input-container">
<input
id="aethel-input"
class="input"
[class.is-danger]="form.touched && form.invalid"
type="text"
[formControl]="form.controls.word"
placeholder="Enter a word or lemma..."
placeholder-i18n
/>
<button
type="submit"
class="button is-primary"
[class.is-loading]="loading$ | async"
>
<span i18n>Search</span>
</button>
</div>
@if (form.touched && form.invalid) {
<p class="is-size-7 has-text-danger" i18n>
Please enter at least three characters.
</p>
}
</div>
</form>
} @else {
<p class="notification mb-4" i18n>
The Æthel dataset is temporarily unavailable.
</p>
} @if (submitted | async) {
<p-table
[value]="rows"
dataKey="key"
[lazy]="true"
[paginator]="true"
[totalRecords]="totalRowCount"
[first]="form.controls.skip.value"
[rows]="form.controls.limit.value"
(onPage)="changePage($event)"
[rowsPerPageOptions]="[10, 25, 50]"
[showCurrentPageReport]="true"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
currentPageReportTemplate-i18n
>
<ng-template
pTemplate="header"
styleClass="p-datatable-striped"
>
<tr>
<th style="width: 10%"></th>
<th style="width: 20%" pSortableColumn="word">
<span i18n>Word</span>
<p-sortIcon field="word"></p-sortIcon>
</th>
<th style="width: 20%" pSortableColumn="lemma">
<span i18n>Lemma</span>
<p-sortIcon field="lemma"></p-sortIcon>
</th>
<th style="width: 20%" pSortableColumn="type">
<span i18n>Type</span>
<p-sortIcon field="type"></p-sortIcon>
</th>
<th style="width: 10%" pSortableColumn="sampleCount">
<span i18n>Samples</span>
<p-sortIcon field="sampleCount"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-row let-expanded="expanded">
<tr>
<td>
<button
class="button is-small expand-button"
type="button"
pButton
pRipple
[pRowToggler]="row"
>
<fa-icon
[icon]="
expanded === true
? icons.chevronDown
: icons.chevronRight
"
></fa-icon>
</button>
</td>
<td>{{ combineWord(row) }}</td>
<td>{{ combineLemma(row) }}</td>
<td [innerHTML]="row.displayType | proof"></td>
<td>{{ row.sampleCount }}</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td class="no-results" colspan="5" i18n>
No results found.
</td>
</tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-row>
<tr
pp-sample-data
class="expanded-row"
[aethelResult]="row"
></tr>
</ng-template>
</p-table>
}
</div>
@if (form.touched && form.invalid) {
<p class="is-size-7 has-text-danger" i18n>
Please enter at least three characters.
</p>
}
</div>
</form>
} @else {
<p class="notification" i18n>The Æthel dataset is temporarily unavailable.</p>
} @if (submitted | async) {
<p-table
[value]="rows"
dataKey="key"
[lazy]="true"
[paginator]="true"
[totalRecords]="totalRowCount"
[first]="form.controls.skip.value"
[rows]="form.controls.limit.value"
(onPage)="changePage($event)"
[rowsPerPageOptions]="[10, 25, 50]"
[showCurrentPageReport]="true"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
currentPageReportTemplate-i18n
>
<ng-template pTemplate="header" styleClass="p-datatable-striped">
<tr>
<th style="width: 10%"></th>
<th style="width: 20%" pSortableColumn="word">
<span i18n>Word</span>
<p-sortIcon field="word"></p-sortIcon>
</th>
<th style="width: 20%" pSortableColumn="lemma">
<span i18n>Lemma</span>
<p-sortIcon field="lemma"></p-sortIcon>
</th>
<th style="width: 20%" pSortableColumn="type">
<span i18n>Type</span>
<p-sortIcon field="type"></p-sortIcon>
</th>
<th style="width: 10%" pSortableColumn="sampleCount">
<span i18n>Samples</span>
<p-sortIcon field="sampleCount"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-row let-expanded="expanded">
<tr>
<td>
<button
class="button is-small expand-button"
type="button"
pButton
pRipple
[pRowToggler]="row"
>
<fa-icon
[icon]="
expanded === true
? icons.chevronDown
: icons.chevronRight
"
></fa-icon>
</button>
</td>
<td>{{ combineWord(row) }}</td>
<td>{{ combineLemma(row) }}</td>
<td [innerHTML]="row.displayType | proof"></td>
<td>{{ row.sampleCount }}</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td class="no-results" colspan="5" i18n>No results found.</td>
</tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-row>
<tr pp-sample-data class="expanded-row" [aethelResult]="row"></tr>
</ng-template>
</p-table>
}
</div>
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<td colspan="5">
<ul class="sample-list mb-2">
<ul class="sample-list mb-2 mx-2">
@for (sample of visibleSamples(); track $index) {
<li class="sample-item">
<p>{{ $index + 1 }}</p>
<p class="phrase-list mx-2">
<p class="phrase-list mx-3">
@for (phrase of sample.phrases; track phrase.index) {
<span [class.highlight]="phrase.highlight"
>{{ phrase.display }}
Expand Down
16 changes: 11 additions & 5 deletions frontend/src/app/home/home.component.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
<h1 class="title" i18n>ParsePort</h1>
<div class="content">
<div class="columns is-centered">
<div class="column is-two-thirds">
<h1 i18n>ParsePort</h1>

<p i18n>
Welcome to ParsePort, a growing collection of NLP-related parsers and parsed
corpora developed at Utrecht University.
</p>
<p i18n>
Welcome to ParsePort, a growing collection of NLP-related
parsers and parsed corpora developed at Utrecht University.
</p>
</div>
</div>
</div>
14 changes: 12 additions & 2 deletions frontend/src/app/menu/menu.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
class="navbar-item"
[routerLink]="['/spindle']"
routerLinkActive="is-active"
[routerLinkActiveOptions]="{ exact: true }"
i18n
>
Spindle
Expand All @@ -53,7 +54,7 @@

<a
class="navbar-item"
[routerLink]="['/about']"
[routerLink]="['/', 'spindle', 'about']"
routerLinkActive="is-active"
i18n
>
Expand All @@ -62,7 +63,16 @@

<a
class="navbar-item"
[routerLink]="['/refs']"
[routerLink]="['/', 'spindle', 'notation']"
routerLinkActive="is-active"
i18n
>
Notation
</a>

<a
class="navbar-item"
[routerLink]="['/' , 'references']"
routerLinkActive="is-active"
i18n
>
Expand Down
Loading

0 comments on commit 286c3a4

Please sign in to comment.