Angular 20

frontend/angular.json

@@ -9,7 +9,7 @@
       "projectType": "application",
       "architect": {
           "build": {
-              "builder": "@angular-devkit/build-angular:application",
+              "builder": "@angular/build:application",
               "options": {
                   "baseHref": "/",
                   "outputPath": {
@@ -79,7 +79,7 @@
               "defaultConfiguration": ""
           },
           "serve": {
-              "builder": "@angular-devkit/build-angular:dev-server",
+              "builder": "@angular/build:dev-server",
               "options": {},
               "configurations": {
                   "production": {
@@ -92,16 +92,16 @@
               "defaultConfiguration": "development"
           },
           "extract-i18n": {
-              "builder": "@angular-devkit/build-angular:extract-i18n",
+              "builder": "@angular/build:extract-i18n",
               "options": {
                 "buildTarget": "frontend:build"
               }
           },
           "test": {
-              "builder": "@angular-devkit/build-angular:karma",
+              "builder": "@angular/build:karma",
               "options": {
                   "main": "src/test.ts",
-                  "polyfills": "src/polyfills.ts",
+                  "polyfills": ["src/polyfills.ts"],
                   "tsConfig": "src/tsconfig.spec.json",
                   "karmaConfig": "karma.conf.js",
                   "assets": ["src/favicon.ico", "src/assets"],
@@ -121,10 +121,30 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "ia",
-      "style": "scss"
+      "style": "scss",
+      "type": "component"
     },
     "@schematics/angular:directive": {
-      "prefix": "ia"
+      "prefix": "ia",
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
     }
   },
   "cli": {

frontend/karma.conf.js

@@ -10,7 +10,7 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
+
     ],
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser

frontend/package.json

@@ -19,26 +19,23 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.1.4",
-    "@angular/cdk": "^19.1.2",
-    "@angular/cli": "^19.1.5",
-    "@angular/common": "^19.2.16",
-    "@angular/compiler": "^19.2.18",
-    "@angular/core": "^19.2.18",
-    "@angular/forms": "^19.1.4",
-    "@angular/localize": "^19.1.4",
-    "@angular/platform-browser": "^19.1.4",
-    "@angular/platform-browser-dynamic": "^19.1.4",
-    "@angular/platform-server": "^19.2.15",
-    "@angular/router": "^19.1.4",
+    "@angular/animations": "^20.3.16",
+    "@angular/cdk": "^20.2.14",
+    "@angular/cli": "^20.3.15",
+    "@angular/common": "^20.3.16",
+    "@angular/compiler": "^20.3.16",
+    "@angular/core": "^20.3.16",
+    "@angular/forms": "^20.3.16",
+    "@angular/localize": "^20.3.16",
+    "@angular/platform-browser": "^20.3.16",
+    "@angular/platform-browser-dynamic": "^20.3.16",
+    "@angular/router": "^20.3.16",
     "@fortawesome/angular-fontawesome": "^0.10.2",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@freearhey/iso-639-3": "^1.0.0",
     "@primeng/themes": "^19.0.9",
-    "@typescript-eslint/types": "^8.0.0",
-    "@typescript-eslint/utils": "^7.11.0",
     "balloon-css": "^0.5.2",
     "bulma": "^1.0.4",
     "chart.js": "^4.4.2",
@@ -58,25 +55,24 @@
     "ng2-pdf-viewer": "^10.2.2",
     "ngx-cookie-service": "19.1.0",
     "ngx-matomo-client": "7.0.1",
-    "ngx-quill": "^27.0.1",
-    "primeng": "^19.0.5",
+    "ngx-quill": "~27.0.1",
+    "primeng": "^20.4.0",
     "quill": "^2.0.3",
     "rxjs": "^7.8.1",
     "smoothscroll-polyfill": "^0.3.6",
     "turndown": "^7.2.1",
-    "typescript": "5.7.3",
     "vega": "^6.2.0",
     "vega-embed": "^7.1.0",
     "vega-lite": "^6.4.1",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.1.5",
     "@angular-eslint/eslint-plugin": "^19.0.2",
     "@angular-eslint/eslint-plugin-template": "^19.0.2",
     "@angular-eslint/schematics": "^19.8.1",
     "@angular-eslint/template-parser": "^19.8.1",
-    "@angular/compiler-cli": "^19.1.4",
+    "@angular/build": "^20.3.15",
+    "@angular/compiler-cli": "^20.3.16",
     "@types/chart.js": "^2.9.37",
     "@types/file-saver": "^1.3.1",
     "@types/jasmine": "~3.6.0",
@@ -85,18 +81,21 @@
     "@types/turndown": "^5.0.5",
     "@typescript-eslint/eslint-plugin": "~8.29.0",
     "@typescript-eslint/parser": "~8.29.0",
+    "@typescript-eslint/types": "^8.0.0",
+    "@typescript-eslint/utils": "^7.11.0",
     "eslint": "^8.57.0",
     "jasmine-core": "^3.7.0",
-    "karma": "^6.3.16",
+    "karma": "~6.4.4",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage-istanbul-reporter": "^3.0.2",
     "karma-jasmine": "^4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
+    "typescript": "^5.8.0",
     "vite": "^6.4.1"
   },
   "peerDependencies": {
     "webpack": "^5.1.0"
   },
   "overrides": {},
   "resolutions": {}
-}
+}

frontend/src/app/corpus-definitions/corpus-definitions.module.ts

@@ -3,7 +3,6 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { SharedModule } from '@shared/shared.module';
 import { QuillModule } from 'ngx-quill';
 import { AutoCompleteModule } from 'primeng/autocomplete';
-import { DropdownModule } from 'primeng/dropdown';
 import { MultiSelectModule } from 'primeng/multiselect';
 import { StepsModule } from 'primeng/steps';
 import { CreateDefinitionComponent } from './create-definition/create-definition.component';
@@ -20,6 +19,7 @@ import { FormFeedbackComponent } from './form/form-feedback/form-feedback.compon
 import { ImageUploadComponent } from './form/image-upload/image-upload.component';
 import { IndexFormComponent } from './form/index-form/index-form.component';
 import { MetaFormComponent } from './form/meta-form/meta-form.component';
+import { SelectModule } from 'primeng/select';
 
 @NgModule({
     declarations: [
@@ -50,7 +50,7 @@ import { MetaFormComponent } from './form/meta-form/meta-form.component';
         StepsModule,
         AutoCompleteModule,
         MultiSelectModule,
-        DropdownModule,
+        SelectModule,
         QuillModule.forRoot(),
     ],
 })

frontend/src/app/history/download-history/download-history.component.html

@@ -1,7 +1,9 @@
 <section class="section">
     <h1 class="title">Downloads</h1>
 
-    <p-table #dt *ngIf="downloads && corpora" [value]="downloads" [paginator]="true" [rows]="10">
+    <p-table #dt *ngIf="downloads && corpora" [value]="downloads"
+        [paginator]="downloads.length > 10"
+        [rows]="10">
         <ng-template pTemplate="caption">
             <div>
                 Downloads
@@ -18,17 +20,19 @@ <h1 class="title">Downloads</h1>
                 <th rowspan="2">Status</th>
                 <th rowspan="2">Download</th>
             </tr>
-            <tr>
-                <th>
-                    <p-columnFilter field="corpus" matchMode="equals" [showMenu]="false">
-                        <ng-template pTemplate="filter" let-value let-filter="filterCallback">
-                            <p-dropdown [options]="corpusMenuItems" [style]="{'width':'100%'}" placeholder="Any"
-                                [ngModel]="value" (onChange)="filter($event.value)">
-                            </p-dropdown>
-                        </ng-template>
-                    </p-columnFilter>
-                </th>
-            </tr>
+            @if (downloads.length > 10) {
+                <tr>
+                    <th>
+                        <p-columnFilter field="corpus" matchMode="equals" [showMenu]="false">
+                            <ng-template pTemplate="filter" let-value let-filter="filterCallback">
+                                <p-select [options]="corpusMenuItems" placeholder="Any"
+                                    [ngModel]="value" (onChange)="filter($event.value)">
+                                </p-select>
+                            </ng-template>
+                        </p-columnFilter>
+                    </th>
+                </tr>
+            }
         </ng-template>
         <ng-template pTemplate="body" let-download>
             <tr>

frontend/src/app/history/history.module.ts

@@ -1,5 +1,4 @@
 import { NgModule } from '@angular/core';
-import { DropdownModule } from 'primeng/dropdown';
 import { DownloadModule } from '../download/download.module';
 import { DownloadService, QueryService } from '@services';
 import { SharedModule } from '@shared/shared.module';
@@ -9,6 +8,7 @@ import {
     QueryTextPipe,
     SearchHistoryComponent,
 } from './search-history';
+import { SelectModule } from 'primeng/select';
 
 
 
@@ -21,7 +21,7 @@ import {
         QueryTextPipe,
         SearchHistoryComponent,
     ],
-    imports: [DownloadModule, DropdownModule, SharedModule],
+    imports: [DownloadModule, SelectModule, SharedModule],
     exports: [DownloadHistoryComponent, SearchHistoryComponent],
 })
-export class HistoryModule {}
+export class HistoryModule { }

frontend/src/app/history/search-history/search-history.component.html

@@ -26,9 +26,8 @@ <h1 class="title">Search history</h1>
                 <th>
                     <p-columnFilter field="corpus" matchMode="equals" [showMenu]="false">
                         <ng-template pTemplate="filter" let-value let-filter="filterCallback">
-                            <p-dropdown [options]="corpusMenuItems" [style]="{'width':'100%'}" placeholder="Any"
-                                [ngModel]="value" (onChange)="filter($event.value)">
-                            </p-dropdown>
+                            <p-select [options]="corpusMenuItems" [style]="{'width':'100%'}" placeholder="Any"
+                                [ngModel]="value" (onChange)="filter($event.value)"></p-select>
                         </ng-template>
                     </p-columnFilter>
                 </th>

frontend/src/app/utils/es-query.ts

@@ -167,18 +167,22 @@ const queryTextFromEsSearchClause = (query: EsSearchClause | BooleanQuery | EsFi
 const filtersFromEsQuery = (query: EsQuery, corpus: Corpus): SearchFilter[] => {
     if ('bool' in query.query) {
         const filters = query.query.bool.filter;
-        return filters.map(filter => esFilterToSearchFilter(filter, corpus));
+        return filters
+            .map(filter => esFilterToSearchFilter(filter, corpus))
+            .filter(f => !!f);
     }
     return [];
 };
 
-const esFilterToSearchFilter = (esFilter: EsFilter, corpus: Corpus): SearchFilter => {
+const esFilterToSearchFilter = (esFilter: EsFilter, corpus: Corpus): SearchFilter | undefined => {
     const filterType = _.first(_.keys(esFilter)) as 'term'|'terms'|'range';
     const fieldName = _.first(_.keys(esFilter[filterType]));
     const field = findByName(corpus.fields, fieldName);
-    const filter = field.makeSearchFilter();
-    filter.set(filter.dataFromEsFilter(esFilter as any)); // we know that the esFilter is of the correct type
-    return filter;
+    if (field) {
+        const filter = field.makeSearchFilter();
+        filter.set(filter.dataFromEsFilter(esFilter as any)); // we know that the esFilter is of the correct type
+        return filter;
+    }
 };
 
 export const resultsParamsToAPIQuery = (queryModel: QueryModel, params: PageResultsParameters): APIQuery => {

frontend/src/app/visualization/visualization.module.ts

@@ -2,7 +2,6 @@ import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { NgModule } from '@angular/core';
 import { AutoCompleteModule } from 'primeng/autocomplete';
 import { ChartModule } from 'primeng/chart';
-import { DropdownModule } from 'primeng/dropdown';
 import {
     ApiService,
     DialogService,
@@ -23,6 +22,7 @@ import { VisualizationFooterComponent } from './visualization-footer/visualizati
 import { VisualizationComponent } from './visualization.component';
 import { WordcloudComponent } from './wordcloud/wordcloud.component';
 import { MapComponent } from './map/map.component';
+import { SelectModule } from 'primeng/select';
 
 
 @NgModule({ declarations: [
@@ -45,9 +45,19 @@ import { MapComponent } from './map/map.component';
         VisualizationFooterComponent,
         FreqtableComponent,
         VisualizationComponent,
-    ], imports: [
+    ],
+    imports: [
         AutoCompleteModule,
         ChartModule,
         SharedModule,
-        DropdownModule], providers: [ApiService, DialogService, SearchService, VisualizationService, provideHttpClient(withInterceptorsFromDi())] })
+        SelectModule
+    ],
+    providers: [
+        ApiService,
+        DialogService,
+        SearchService,
+        VisualizationService,
+        provideHttpClient(withInterceptorsFromDi()),
+    ]
+})
 export class VisualizationModule {}

frontend/src/environments/environment-type.ts

@@ -0,0 +1,24 @@
+/** Typedef for environments; see documentation for description */
+export interface Environment {
+    production: boolean;
+    appName: string;
+    navbarBrand: {
+        title: string;
+        subtitle: string | undefined;
+        logo: string;
+        logoAlt: string | undefined;
+    };
+    appDescription?: string;
+    aboutPage: string;
+    apiUrl: string;
+    adminUrl: string;
+    samlLogoutUrl: string;
+    showSolis: boolean;
+    runInIFrame: boolean;
+    directDownloadLimit: number;
+    version: string;
+    sourceUrl: string;
+    logos?: string[];
+    showCorpusFilters?: boolean;
+    showNamechangeAlert?: boolean;
+}

frontend/src/environments/environment.git.ts

@@ -1,6 +1,7 @@
+import { Environment } from './environment-type';
 import { version } from './version';
 
-export const environment = {
+export const environment: Environment = {
     production: true,
     appName: 'Something completely different',
     navbarBrand: {

frontend/src/environments/environment.ts

@@ -4,9 +4,10 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 // see /documentation/Frontend-environment-settings.md for a description of available settings
+import { Environment } from './environment-type';
 import { version } from './version';
 
-export const environment = {
+export const environment: Environment = {
     production: false,
     appName: 'Textcavator',
     navbarBrand: {