v2.0.4

backend/src/main/kotlin/dev/dres/DRES.kt

@@ -42,7 +42,7 @@ import kotlin.system.exitProcess
  */
 object DRES {
     /** Version of DRES. */
-    const val VERSION = "2.0.3"
+    const val VERSION = "2.0.4"
 
     /** Application root; should be relative to JAR file or classes path. */
     val APPLICATION_ROOT: Path =

doc/oas-client.json

@@ -2,8 +2,8 @@
   "openapi" : "3.0.3",
   "info" : {
     "title" : "DRES Client API",
-    "version" : "2.0.3",
-    "description" : "Client API for DRES (Distributed Retrieval Evaluation Server), Version 2.0.3"
+    "version" : "2.0.4",
+    "description" : "Client API for DRES (Distributed Retrieval Evaluation Server), Version 2.0.4"
   },
   "paths" : {
     "/api/v2/client/evaluation/currentTask/{evaluationId}" : {

doc/oas.json

@@ -2,8 +2,8 @@
   "openapi" : "3.0.3",
   "info" : {
     "title" : "DRES API",
-    "version" : "2.0.3",
-    "description" : "API for DRES (Distributed Retrieval Evaluation Server), Version 2.0.3",
+    "version" : "2.0.4",
+    "description" : "API for DRES (Distributed Retrieval Evaluation Server), Version 2.0.4",
     "contact" : {
       "name" : "The DRES Dev Team",
       "url" : "https://dres.dev"

frontend/src/app/template/template-builder/components/teams-list/teams-list.component.html

@@ -9,7 +9,10 @@ <h2>Teams</h2>
     Add team
   </button>
 </div>
-<table #teamTable mat-table [trackBy]="trackByTeamId" [dataSource]="(teams|async)" [style.width]="'100%'">
+<table #teamTable mat-table
+       [trackBy]="trackByTeamId"
+       [dataSource]="dataSource"
+       [style.width]="'100%'" matSort>
   <ng-container matColumnDef="logo">
     <th mat-header-cell *matHeaderCellDef>Logo</th>
     <td mat-cell *matCellDef="let team">
@@ -20,7 +23,7 @@ <h2>Teams</h2>
 
   <!-- Name Column -->
   <ng-container matColumnDef="name">
-    <th mat-header-cell *matHeaderCellDef>Name</th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
     <td mat-cell *matCellDef="let team" [style.color]="team.color">{{ team.name }}</td>
   </ng-container>
 

frontend/src/app/template/template-builder/components/teams-list/teams-list.component.ts

@@ -1,60 +1,73 @@
-import { Component, OnDestroy, OnInit, ViewChild } from "@angular/core";
+import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from "@angular/core";
 import { AbstractTemplateBuilderComponent } from "../abstract-template-builder.component";
 import { ApiTeam, TemplateService, UserService } from "../../../../../../openapi";
-import { MatTable } from "@angular/material/table";
-import { Observable } from "rxjs";
+import { MatTable, MatTableDataSource } from "@angular/material/table";
+import { Observable, Subscription } from "rxjs";
 import { TemplateBuilderService } from "../../template-builder.service";
 import { MatDialog } from "@angular/material/dialog";
 import { AppConfig } from "../../../../app.config";
 import { filter, map, tap } from "rxjs/operators";
 import { TeamBuilderDialogComponent } from "../team-builder-dialog/team-builder-dialog.component";
 import { ActivatedRoute } from "@angular/router";
 import { MatSnackBar } from "@angular/material/snack-bar";
+import { MatSort } from "@angular/material/sort";
 
 @Component({
   selector: 'app-teams-list',
   templateUrl: './teams-list.component.html',
   styleUrls: ['./teams-list.component.scss']
 })
-export class TeamsListComponent extends AbstractTemplateBuilderComponent implements OnInit, OnDestroy {
+export class TeamsListComponent extends AbstractTemplateBuilderComponent implements OnInit, OnDestroy, AfterViewInit {
 
   displayedColumns = ['logo', 'name', 'action'];
 
+  dataSource: MatTableDataSource<ApiTeam>
+
   @ViewChild('teamTable')
   teamTable: MatTable<ApiTeam>;
+  @ViewChild(MatSort) sort: MatSort;
+
+  private updateSub: Subscription;
+  private afterInitComplete = false;
 
-  teams: Observable<ApiTeam[]> = new Observable<ApiTeam[]>((o) => o.next([]));
   constructor(
     builderService: TemplateBuilderService,
     route: ActivatedRoute,
     templateService: TemplateService,
     snackBar: MatSnackBar,
     private userService: UserService,
     private dialog: MatDialog,
-    private config: AppConfig
+    private config: AppConfig,
+    private elementRef: ElementRef
   ) {
     super(builderService, route, templateService, snackBar);
+    this.dataSource = new MatTableDataSource()
   }
 
   ngOnInit(): void {
     this.onInit();
   }
 
+  ngAfterViewInit() {
+    this.dataSource.sort = this.sort;
+    this.afterInitComplete = true;
+  }
+
   onChange() {
-    this.teams = this.builderService.templateAsObservable().pipe(
-      map((t) => {
-        if (t) {
-          return t.teams;
-        } else {
-          return [];
+    this.updateSub = this.builderService.templateAsObservable().subscribe(t => {
+      if(t){
+        this.dataSource.data = t.teams;
+        /* The elementRef.nativeElement.offsetParent checks if this component is visible */
+        if(this.afterInitComplete && this.elementRef.nativeElement.offsetParent){
+          this.teamTable?.renderRows();
         }
-      }),
-      tap(_ => this.teamTable?.renderRows())
-    );
+      }
+    })
   }
 
   ngOnDestroy() {
     this.onDestroy();
+    this.updateSub.unsubscribe();
   }
 
   /**

frontend/src/app/template/template-builder/components/template-builder-components.module.ts

@@ -52,6 +52,7 @@ import { ViewersListComponent } from './viewers-list/viewers-list.component';
 import { UserListFilterPipe } from './team-builder-dialog/user-list-filter.pipe';
 import { UserListInOtherFilterPipe } from './team-builder-dialog/user-list-in-other-filter.pipe';
 import { BatchAddTargetDialogComponent } from './batch-add-target-dialog/batch-add-target-dialog.component';
+import { MatSortModule } from "@angular/material/sort";
 
 
 @NgModule({
@@ -100,7 +101,8 @@ import { BatchAddTargetDialogComponent } from './batch-add-target-dialog/batch-a
     ColorPickerModule,
     CdkDropList,
     CdkDrag,
-    MatCardModule
+    MatCardModule,
+    MatSortModule
   ],
   exports: [TemplateInformationComponent,
     JudgesListComponent,

frontend/src/app/viewer/teams-viewer.component.html

@@ -2,7 +2,7 @@
   <mat-card-content>
     <div class="flex" [style.overflow-x]="'auto'">
       <div
-        *ngFor="let team of (info | async)?.teams"
+        *ngFor="let team of ((info | async)?.teams | orderBy:'asc':orderTeamsByName)"
         [style.background-color]="team.color + '44'"
         class="tile"
         [@highlight]="(highlight | async).get(team.id)"

frontend/src/app/viewer/teams-viewer.component.ts

@@ -13,9 +13,9 @@ import {catchError, filter, map, pairwise, retry, sampleTime, shareReplay, switc
 import {AppConfig} from '../app.config';
 import {animate, keyframes, style, transition, trigger} from '@angular/animations';
 import {
-    ApiAnswerType, ApiEvaluationInfo, ApiEvaluationState, ApiMediaItem, ApiScoreOverview,
-    ApiSubmission, ApiVerdictStatus, EvaluationScoresService, EvaluationService
-} from 'openapi';
+  ApiAnswerType, ApiEvaluationInfo, ApiEvaluationState, ApiMediaItem, ApiScoreOverview,
+  ApiSubmission, ApiTeam, ApiVerdictStatus, EvaluationScoresService, EvaluationService
+} from "openapi";
 import { HttpErrorResponse } from '@angular/common/http';
 
 /**
@@ -276,6 +276,13 @@ export class TeamsViewerComponent implements AfterViewInit, OnDestroy {
     return this.config.resolveApiUrl(`/template/logo/${teamId}`);
   }
 
+  /**
+   * Sorts the given {@link ApiTeam}s based on the team name (lexicographically)
+   */
+  public orderTeamsByName = (team1: ApiTeam, team2: ApiTeam) => {
+    return team1.name.localeCompare(team2.name)
+  }
+
   /**
    * Returns an observable for the {@link ApiSubmission} for the given team.
    *