added new modifications

src/app/app.config.ts

@@ -1,15 +1,17 @@
-import { ApplicationConfig } from '@angular/core';
+import {ApplicationConfig, ErrorHandler} from '@angular/core';
 import {provideRouter, withComponentInputBinding} from '@angular/router';
 
 import { routes } from './app.routes';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import {provideHttpClient, withFetch} from "@angular/common/http";
+import {GlobalErrorHandlerService} from "./error_handling/global-error-handler.service";
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes, withComponentInputBinding()),
     provideAnimationsAsync(),
     provideAnimationsAsync(),
-    provideHttpClient(withFetch())
+    provideHttpClient(withFetch()),
+    {provide: ErrorHandler, useClass: GlobalErrorHandlerService}
   ]
 };

src/app/app.routes.ts

@@ -9,6 +9,7 @@ import {TaskComponent} from "./components/body/tasks/task/task.component";
 import {SubmittingComponent} from "./components/body/submitting/submitting.component";
 import {ControlPanelComponent} from "./components/body/control-panel/control-panel.component";
 import {AdminLoginComponent} from "./components/body/control-panel/admin-login/admin-login.component";
+import {NotFoundComponent} from "./error_handling/not-found/not-found.component";
 
 export const routes: Routes = [
   {path: '', component : BodyComponent},
@@ -20,5 +21,8 @@ export const routes: Routes = [
   {path: 'about', component: AboutComponent},
   {path: 'leaderboards', component: LeaderboardsComponent},
   {path: 'leaderboards/:task', component: LeaderboardsComponent},
-  {path: 'control', component: ControlPanelComponent},
+  {path: 'control', component: AdminLoginComponent},
+  {path: 'control-panel', component: ControlPanelComponent},
+  {path: '404', component: NotFoundComponent},
+  {path: '**', redirectTo: '/404'}
 ];

src/app/components/body/body.component.html

@@ -80,7 +80,7 @@
         <button mat-button routerLink="/submissions">Submissions List</button>
       </nav>
 
-      <button mat-raised-button color="accent" class="submit-button">Submit a Model</button>
+      <button mat-raised-button routerLink="/submitting" color="accent" class="submit-button">Submit a Model</button>
 
     </mat-card-content>
   </mat-card>

src/app/components/body/control-panel/admin-login/admin-login.component.ts

@@ -7,6 +7,7 @@ import {MatInput} from "@angular/material/input";
 import {AppStateService} from "../../../../state_management/services/app-state.service";
 import {map} from "rxjs";
 import {AsyncPipe, NgIf} from "@angular/common";
+import {Router, RouterModule} from "@angular/router";
 
 @Component({
   selector: 'app-admin-login',
@@ -19,7 +20,8 @@ import {AsyncPipe, NgIf} from "@angular/common";
     MatInput,
     MatLabel,
     NgIf,
-    AsyncPipe
+    AsyncPipe,
+    RouterModule
   ],
   templateUrl: './admin-login.component.html',
   styleUrl: './admin-login.component.css'
@@ -27,13 +29,20 @@ import {AsyncPipe, NgIf} from "@angular/common";
 export class AdminLoginComponent {
   password: string = '';
 
-  constructor(private stateService: AppStateService) {}
+  constructor(private stateService: AppStateService,
+              private router: Router
+  ) {}
 
   authenticationState = this.stateService.state$.pipe(
     map(state => state.adminSessionStatus)
   );
 
   onSubmit() {
-    this.stateService.authenticate(this.password);
+    this.stateService.authenticate(this.password).subscribe(
+      next => {
+        console.log('Authentication successful');
+        this.router.navigate(['/control-panel']);
+      }
+    );
   }
 }

src/app/components/body/control-panel/control-panel.component.html

@@ -1,5 +1,3 @@
-<app-admin-login *ngIf="(authenticationState | async) != 'authenticated'"></app-admin-login>
-
 <div *ngIf="(authenticationState | async) == 'authenticated'">
   <!-- Admin Control Panel -->
   <mat-card>

src/app/components/body/control-panel/control-panel.component.ts

@@ -78,7 +78,7 @@ export class ControlPanelComponent implements OnInit {
   }
 
   refresh() {
-    this.stateService.updateControlPanel();
+    this.stateService.refreshControlPanel();
   }
 
   editRow(entry: ControlPanelEntry) {
@@ -90,7 +90,7 @@ export class ControlPanelComponent implements OnInit {
     // Modify the entry in the local data source
     const index = this.dataSource.data.findIndex(e => e.id === entry.id);
     this.dataSource.data[index] = entry;
-    this.stateService.forceUpdateSubmission(entry);
+    this.stateService.updateSubmission(entry);
   }
 
   deleteRow(id: number) {

src/app/components/body/leaderboards/leaderboard/leaderboard.component.html

@@ -1,84 +1,66 @@
 <mat-card>
   <button mat-raised-button color="primary" (click)="refresh()">Refresh Leaderboard</button>
-  <table mat-table [dataSource]=dataSource>
+  <table mat-table [dataSource]="dataSource" matSort>
 
+    <!-- Index Column -->
+    <ng-container matColumnDef="index">
+      <mat-header-cell *matHeaderCellDef> # </mat-header-cell>
+      <mat-cell *matCellDef="let entry; let i = index"> {{i + 1}} </mat-cell>
+    </ng-container>
+
+    <!-- Model Column -->
     <ng-container matColumnDef="model">
-      <mat-header-cell
-        *matHeaderCellDef
-      >
-        Model
-      </mat-header-cell>
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Model </mat-header-cell>
       <mat-cell *matCellDef="let entry">
         <a *ngIf="entry.is_public" [href]="entry.link" target="_blank"> {{ entry.model }}</a>
         <span *ngIf="entry.isPublic">{{ entry.model }}</span>
       </mat-cell>
     </ng-container>
 
+    <!-- Team Column -->
     <ng-container matColumnDef="team">
-      <mat-header-cell
-        *matHeaderCellDef
-      >
-        Team
-      </mat-header-cell>
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Team </mat-header-cell>
       <mat-cell *matCellDef="let entry">
         <a *ngIf="entry.is_public" [href]="'mailto:' + entry.email" target="_blank"> {{ entry.team }}</a>
         <span *ngIf="!entry.is_public">{{ entry.team }}</span>
       </mat-cell>
     </ng-container>
 
+    <!-- Predictions Column -->
     <ng-container matColumnDef="predictions">
-      <mat-header-cell
-        *matHeaderCellDef
-      >
-        Predictions
-      </mat-header-cell>
+      <mat-header-cell *matHeaderCellDef> Predictions </mat-header-cell>
       <mat-cell *matCellDef="let entry">
-        <a *ngIf="entry.is_public" [href]="getTextDownloadURL(entry.predictions)" target="_blank" download="{{entry.model + '-predictions.txt'}}">Download</a>
+        <a *ngIf="entry.is_public" [href]="entry.blob_url" target="_blank" download="{{entry.model + '-predictions.txt'}}">Download</a>
         <span *ngIf="!entry.is_public">Private</span>
       </mat-cell>
     </ng-container>
 
+    <!-- Accuracy Column -->
     <ng-container matColumnDef="accuracy">
-      <mat-header-cell
-        *matHeaderCellDef
-      >
-        Accuracy
-      </mat-header-cell>
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Accuracy </mat-header-cell>
       <mat-cell *matCellDef="let entry">{{ entry.accuracy | number: '1.2-2' }}</mat-cell>
     </ng-container>
 
+    <!-- Precision Column -->
     <ng-container matColumnDef="precision">
-      <mat-header-cell
-        *matHeaderCellDef
-      >
-        Precision
-      </mat-header-cell>
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Precision </mat-header-cell>
       <mat-cell *matCellDef="let entry">{{ entry.precision | number: '1.2-2' }}</mat-cell>
     </ng-container>
 
+    <!-- Recall Column -->
     <ng-container matColumnDef="recall">
-      <mat-header-cell
-        *matHeaderCellDef
-      >
-        Recall
-      </mat-header-cell>
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Recall </mat-header-cell>
       <mat-cell *matCellDef="let entry">{{ entry.recall | number: '1.2-2'}}</mat-cell>
     </ng-container>
 
-    <ng-container matColumnDef="f1">
-      <mat-header-cell
-        *matHeaderCellDef
-      >
-        F1
-      </mat-header-cell>
+    <!-- F1 Column -->
+    <ng-container matColumnDef="f1_score">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> F1 </mat-header-cell>
       <mat-cell *matCellDef="let entry">{{ entry.f1_score | number: '1.2-2' }}</mat-cell>
     </ng-container>
 
-
-
-    <mat-header-row
-      *matHeaderRowDef="displayedColumns; sticky: true"
-    ></mat-header-row>
+    <!-- Header and Row Declarations -->
+    <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
     <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
   </table>
 </mat-card>

src/app/components/body/leaderboards/leaderboard/leaderboard.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core';
 import {MatCard} from "@angular/material/card";
 import {
   MatCell,
@@ -13,6 +13,7 @@ import {MatButton} from "@angular/material/button";
 import {AppStateService} from "../../../../state_management/services/app-state.service";
 import {map} from "rxjs";
 import {DecimalPipe, NgIf} from "@angular/common";
+import {MatSort, MatSortModule} from "@angular/material/sort";
 
 @Component({
   selector: 'app-leaderboard',
@@ -31,21 +32,24 @@ import {DecimalPipe, NgIf} from "@angular/common";
     MatRowDef,
     MatButton,
     NgIf,
-    DecimalPipe
+    DecimalPipe,
+    MatSort,
+    MatSortModule
   ],
   templateUrl: './leaderboard.component.html',
   styleUrl: './leaderboard.component.css'
 })
-export class LeaderboardComponent implements OnInit {
+export class LeaderboardComponent implements OnInit, AfterViewInit {
 
   displayedColumns: string[] = [
+    'index',
     'model',
     'team',
     'predictions',
     'accuracy',
     'precision',
     'recall',
-    'f1'
+    'f1_score'
   ];
 
   @Input()
@@ -57,6 +61,12 @@ export class LeaderboardComponent implements OnInit {
   dataSource = new MatTableDataSource<LeaderboardEntry>();
   leaderboards = this.stateService.state$.pipe(map(state => state.leaderboards));
 
+  @ViewChild(MatSort) sort: MatSort | undefined;
+
+  ngAfterViewInit() {
+    if (this.sort)
+      this.dataSource.sort = this.sort;
+  }
 
   constructor(private stateService: AppStateService) {
 
@@ -65,14 +75,15 @@ export class LeaderboardComponent implements OnInit {
   ngOnInit() {
     this.leaderboards.subscribe(
       data => {
-        // choose only entries where task == this.task and dataset == this.dataset.
-        // assign the data to the dataSource
         this.dataSource.data = data.filter(
           entry => (entry.task == this.task && entry.dataset == this.dataset)
-        )
+        ).map(entry => {
+          entry.blob_url = this.getTextDownloadURL(entry.predictions); // Precompute Blob URL
+          return entry;
+        });
       }
     );
-    this.stateService.updateLeaderboards();
+    this.refresh();
   }
 
   getTextDownloadURL(prediction: string) {
@@ -80,6 +91,6 @@ export class LeaderboardComponent implements OnInit {
   }
 
   refresh() {
-    this.stateService.updateLeaderboards();
+    this.stateService.refreshLeaderboards();
   }
 }

src/app/components/body/submissions/submissions.component.html

@@ -1,90 +1,71 @@
-<!---
-  This component is used to display a list of submissions for all users, and allows a new submission to be made.
--->
-
 <mat-card>
   <mat-card-content>
     <button mat-raised-button color="primary" style="width: 100%" (click)="refresh()">Refresh Submissions</button>
   </mat-card-content>
 
-  <table mat-table [dataSource]=dataSource>
+  <table mat-table [dataSource]="dataSource" matSort>
+
+    <!-- Index Column -->
+    <ng-container matColumnDef="index">
+      <mat-header-cell *matHeaderCellDef> #</mat-header-cell>
+      <mat-cell *matCellDef="let entry; let i = index"> {{ i + 1 }}</mat-cell>
+    </ng-container>
 
+    <!-- Team Column -->
     <ng-container matColumnDef="team">
-      <mat-header-cell
-        *matHeaderCellDef
-      >
-        Team
-      </mat-header-cell>
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Team</mat-header-cell>
       <mat-cell *matCellDef="let entry">
         <a *ngIf="entry.is_public" [href]="'mailto:' + entry.email" target="_blank"> {{ entry.team }}</a>
         <span *ngIf="!entry.is_public">{{ entry.team }}</span>
       </mat-cell>
     </ng-container>
 
+    <!-- Task Column -->
     <ng-container matColumnDef="task">
-      <mat-header-cell
-        *matHeaderCellDef
-      >
-        Task
-      </mat-header-cell>
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Task</mat-header-cell>
       <mat-cell *matCellDef="let entry">{{ entry.task }}</mat-cell>
     </ng-container>
 
+    <!-- Dataset Column -->
     <ng-container matColumnDef="dataset">
-      <mat-header-cell
-        *matHeaderCellDef
-      >
-        Dataset
-      </mat-header-cell>
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Dataset</mat-header-cell>
       <mat-cell *matCellDef="let entry">{{ entry.dataset }}</mat-cell>
     </ng-container>
 
+    <!-- Model Column -->
     <ng-container matColumnDef="model">
-      <mat-header-cell
-        *matHeaderCellDef
-      >
-        Model
-      </mat-header-cell>
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Model</mat-header-cell>
       <mat-cell *matCellDef="let entry">
         <a *ngIf="entry.is_public" [href]="entry.link" target="_blank"> {{ entry.model }}</a>
         <span *ngIf="entry.isPublic">{{ entry.model }}</span>
       </mat-cell>
     </ng-container>
 
+    <!-- Predictions Column -->
     <ng-container matColumnDef="predictions">
-      <mat-header-cell
-        *matHeaderCellDef
-      >
-        Predictions
-      </mat-header-cell>
+      <mat-header-cell *matHeaderCellDef> Predictions</mat-header-cell>
       <mat-cell *matCellDef="let entry">
-        <a *ngIf="entry.is_public" [href]="getTextDownloadURL(entry.predictions)" target="_blank" download="{{entry.model + '-predictions.txt'}}">Download</a>
+        <a *ngIf="entry.is_public" [href]="entry.blob_url" target="_blank"
+           download="{{entry.model + '-predictions.txt'}}">Download</a>
         <span *ngIf="!entry.is_public">Private</span>
       </mat-cell>
     </ng-container>
 
+    <!-- Status Column -->
     <ng-container matColumnDef="status">
-      <mat-header-cell
-        *matHeaderCellDef
-      >
-        Status
-      </mat-header-cell>
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Status</mat-header-cell>
       <mat-cell *matCellDef="let entry">{{ entry.status }}</mat-cell>
     </ng-container>
 
+    <!-- Time Column -->
     <ng-container matColumnDef="time">
-      <mat-header-cell
-        *matHeaderCellDef
-      >
-        Time
-      </mat-header-cell>
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Time</mat-header-cell>
       <mat-cell *matCellDef="let entry">{{ entry.time }}</mat-cell>
     </ng-container>
 
-
-    <mat-header-row
-      *matHeaderRowDef="displayedColumns; sticky: true"
-    ></mat-header-row>
+    <!-- Header and Row Declarations -->
+    <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
     <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+
   </table>
 </mat-card>

src/app/components/body/submissions/submissions.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core';
 import {MatCard, MatCardActions, MatCardContent} from "@angular/material/card";
 import {MatFormField, MatLabel} from "@angular/material/form-field";
 import {MatInput} from "@angular/material/input";
@@ -21,6 +21,7 @@ import {
 import {LeaderboardEntry} from "../../../state_management/models/leaderboard-entry.model";
 import {SubmissionEntry} from "../../../state_management/models/submission-entry.model";
 import {MatTab, MatTabGroup} from "@angular/material/tabs";
+import {MatSort, MatSortModule} from "@angular/material/sort";
 
 @Component({
   selector: 'app-submissions',
@@ -48,14 +49,17 @@ import {MatTab, MatTabGroup} from "@angular/material/tabs";
     MatTable,
     MatHeaderCellDef,
     MatTabGroup,
-    MatTab
+    MatTab,
+    MatSort,
+    MatSortModule
   ],
   templateUrl: './submissions.component.html',
   styleUrl: './submissions.component.css'
 })
-export class SubmissionsComponent implements OnInit {
+export class SubmissionsComponent implements OnInit, AfterViewInit {
 
   displayedColumns: string[] = [
+    'index',
     'team',
     'model',
     'task',
@@ -65,6 +69,12 @@ export class SubmissionsComponent implements OnInit {
     'time',
   ];
 
+  @ViewChild(MatSort) sort: MatSort | undefined;
+
+  ngAfterViewInit() {
+    if (this.sort)
+      this.dataSource.sort = this.sort;
+  }
   @Input()
   task: string = '';
 
@@ -84,9 +94,13 @@ export class SubmissionsComponent implements OnInit {
   ngOnInit() {
     this.submissions.subscribe(
       data => {
-        this.dataSource.data = data;
+        this.dataSource.data = data.map(entry => {
+          entry.blob_url = this.getTextDownloadURL(entry.predictions); // Precompute Blob URL
+          return entry;
+        })
       }
     )
+    this.state.refreshSubmissions();
   }
 
   getTextDownloadURL(prediction: string) {
@@ -94,6 +108,6 @@ export class SubmissionsComponent implements OnInit {
   }
 
   refresh() {
-    this.state.updateSubmissions();
+    this.state.refreshSubmissions();
   }
 }

src/app/components/body/submitting/submitting-guide/submitting-guide.component.html

@@ -0,0 +1,19 @@
+<div style="margin: 10px 0; padding: 10px; width: 100%;">
+  <h2 style="color: #424242; font-weight: 500; font-size: 1.5rem;">How to Submit a Model</h2>
+  <p style="line-height: 1.6; color: #616161; font-size: 1rem;">
+    Please fill out the form above with the required details. The following fields are optional but strongly recommended:
+  </p>
+  <ul style="line-height: 1.6; color: #424242; font-size: 1rem; padding-left: 20px;">
+    <li><strong>Team Name</strong></li>
+    <li><strong>Contact Email</strong></li>
+    <li><strong>Model Link</strong>
+      <span style="font-weight: 400;">(This could be a download link, a Hugging Face model hub link, a GitHub link, or any other link that provides access to your model.)</span>
+    </li>
+  </ul>
+  <p style="line-height: 1.6; color: #616161; font-size: 1rem;">
+    Ensure the uploaded predictions file is a CSV with a column named <strong>"predictions"</strong>, containing the model's predictions in the same order as the test data.
+  </p>
+  <p style="line-height: 1.6; color: #616161; font-size: 1rem;">
+    If you opt to make your predictions private, the model link will also be kept private.
+  </p>
+</div>

src/app/components/body/submitting/submitting-guide/submitting-guide.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SubmittingGuideComponent } from './submitting-guide.component';
+
+describe('SubmittingGuideComponent', () => {
+  let component: SubmittingGuideComponent;
+  let fixture: ComponentFixture<SubmittingGuideComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SubmittingGuideComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(SubmittingGuideComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/body/submitting/submitting-guide/submitting-guide.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-submitting-guide',
+  standalone: true,
+  imports: [],
+  templateUrl: './submitting-guide.component.html',
+  styleUrl: './submitting-guide.component.css'
+})
+export class SubmittingGuideComponent {
+
+}

src/app/components/body/submitting/submitting.component.html

@@ -83,5 +83,8 @@
     </mat-card-actions>
 
   </form>
-
+</mat-card>
+<br>
+<mat-card>
+  <app-submitting-guide></app-submitting-guide>
 </mat-card>

src/app/components/body/submitting/submitting.component.ts

@@ -11,6 +11,7 @@ import {AppStateService} from "../../../state_management/services/app-state.serv
 import {map, Observer} from "rxjs";
 import {FormGroup, FormBuilder, Validators} from "@angular/forms";
 import {error} from "@angular/compiler-cli/src/transformers/util";
+import {SubmittingGuideComponent} from "./submitting-guide/submitting-guide.component";
 
 
 @Component({
@@ -30,12 +31,13 @@ import {error} from "@angular/compiler-cli/src/transformers/util";
     ReactiveFormsModule,
     FormsModule,
     AsyncPipe,
-    MatError
+    MatError,
+    SubmittingGuideComponent
   ],
   templateUrl: './submitting.component.html',
   styleUrl: './submitting.component.css'
 })
-export class SubmittingComponent implements OnInit{
+export class SubmittingComponent implements OnInit {
 
   tasks = this.stateService.state$.pipe(map(state => state.tasks));
   datasets = this.stateService.state$.pipe(map(state => state.datasets));
@@ -63,17 +65,16 @@ export class SubmittingComponent implements OnInit{
   }
 
 
-  ngOnInit(){
+  ngOnInit() {
   }
 
-  onSubmit () {
+  onSubmit() {
     this.message = '';
 
     if (this.form.invalid) {
       this.message = 'Invalid form';
       return;
     }
-
     this.message = 'Submitting...';
     this.stateService.submit(
       this.form.value.modelName,
@@ -86,28 +87,38 @@ export class SubmittingComponent implements OnInit{
       this.fileContent
     ).subscribe(
       {
-        next: (data) => {
-          this.message = 'Submission successful';
+        next: (response: any) => {
+          console.log(response);
+          this.message = response[0].message;
         },
-        error: (err) => {
-          // show error message that includes the error code
-          this.message = 'Submission failed: ' + err.message;
+        error: (error: any) => {
+          switch (error.status) {
+            case 400:
+              this.message = 'Submission rejected';
+              break;
+            case 500:
+              this.message = 'Internal server error';
+              break;
+            default:
+              this.message = 'An unexpected error occurred. Please try again later.';
+              break;
+          }
         }
       }
     );
   }
 
-  onFileSelected(event : any) {
+  onFileSelected(event: any) {
     const file: File = event.target.files[0];
     if (file) {
       this.chosenFileName = file.name;
-    // read file as text
-    const reader = new FileReader();
-    reader.onload = (e: any) => {
-      this.fileContent = e.target.result;
-    };
-    reader.readAsText(file);
-    }else {
+      // read file as text
+      const reader = new FileReader();
+      reader.onload = (e: any) => {
+        this.fileContent = e.target.result;
+      };
+      reader.readAsText(file);
+    } else {
       this.chosenFileName = 'Invalid file';
     }
   }

src/app/error_handling/global-error-handler.service.ts

@@ -0,0 +1,81 @@
+import { Injectable, ErrorHandler, Injector } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Router } from '@angular/router';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GlobalErrorHandlerService implements ErrorHandler {
+
+  constructor(private injector: Injector) {}
+
+  handleError(error: any): void {
+    // Log the error to the console
+    console.error('An error occurred:', error);
+
+    // Differentiate between error types
+    if (error instanceof HttpErrorResponse) {
+      // Handle HTTP errors
+      this.handleHttpError(error);
+    } else if (error instanceof TypeError) {
+      // Handle client-side errors (TypeErrors)
+      this.handleClientError(error);
+    } else if (error instanceof Error) {
+      // Handle generic JavaScript errors
+      this.handleGenericError(error);
+    } else {
+      // Handle any other type of error
+      this.handleUnknownError(error);
+    }
+
+    // Always log the error, could be to a server or external logging service
+    this.logError(error);
+  }
+
+  private handleHttpError(error: HttpErrorResponse): void {
+    // Customize the message for different status codes
+    let errorMessage = 'An unexpected error occurred. Please try again later.';
+    switch (error.status) {
+      case 400:
+        errorMessage = 'Bad Request: Please check your input.';
+        break;
+      case 401:
+        errorMessage = 'Unauthorized: Please log in again.';
+        break;
+      case 404:
+        errorMessage = 'Not Found: The requested resource was not found.';
+        break;
+      case 500:
+        errorMessage = 'Internal Server Error: Please try again later.';
+        break;
+      case 503:
+        errorMessage = 'Service Unavailable: Please try again later.';
+        break;
+      default:
+        errorMessage = `Unexpected Error: ${error.message}`;
+        break;
+    }
+    // Optionally, display the error to the user
+    alert(errorMessage);
+  }
+
+  private handleClientError(error: TypeError): void {
+    // Handle client-side errors
+    alert('A client-side error occurred. Please try again.');
+  }
+
+  private handleGenericError(error: Error): void {
+    // Handle generic JavaScript errors
+    alert('An unexpected error occurred. Please try again later.');
+  }
+
+  private handleUnknownError(error: any): void {
+    // Handle unknown errors
+    alert('An unknown error occurred. Please try again later.');
+  }
+
+  private logError(error: any): void {
+    // Implement your logging logic here, e.g., send the error to a server
+    console.error('Logging the error:', error);
+  }
+}

src/app/error_handling/not-found/not-found.component.css

@@ -0,0 +1,25 @@
+.not-found-container {
+  text-align: center;
+  margin-top: 50px;
+}
+
+.not-found-container h1 {
+  font-size: 3em;
+  margin-bottom: 20px;
+}
+
+.not-found-container p {
+  font-size: 1.5em;
+  margin-bottom: 30px;
+}
+
+.home-link {
+  font-size: 1.2em;
+  color: #007bff;
+  text-decoration: none;
+  transition: color 0.2s ease-in-out;
+}
+
+.home-link:hover {
+  color: #0056b3;
+}

src/app/error_handling/not-found/not-found.component.html

@@ -0,0 +1,5 @@
+<div class="not-found-container">
+  <h1>404 - Page Not Found</h1>
+  <p>Sorry, the page you are looking for does not exist.</p>
+  <a routerLink="/" class="home-link">Go back to Home</a>
+</div>

src/app/error_handling/not-found/not-found.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotFoundComponent } from './not-found.component';
+
+describe('NotFoundComponent', () => {
+  let component: NotFoundComponent;
+  let fixture: ComponentFixture<NotFoundComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NotFoundComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(NotFoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/error_handling/not-found/not-found.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import {RouterLink} from "@angular/router";
+
+@Component({
+  selector: 'app-not-found',
+  standalone: true,
+  imports: [
+    RouterLink
+  ],
+  templateUrl: './not-found.component.html',
+  styleUrl: './not-found.component.css'
+})
+export class NotFoundComponent {
+
+}

src/app/state_management/models/leaderboard-entry.model.ts

@@ -6,4 +6,8 @@ export interface LeaderboardEntry {
     precision: number;
     recall: number;
     f1_score: number;
+    predictions: string;
+    team: string;
+    is_public: boolean;
+    blob_url: string;
 }

src/app/state_management/models/submission-entry.model.ts

@@ -9,4 +9,5 @@ export interface SubmissionEntry {
     status: string;
     time: string;
     is_public: boolean;
+    blob_url: string;
 }

src/app/state_management/models/task.mode.ts

@@ -1,5 +1,3 @@
-import {DatasetModel} from "./dataset.model";
-
 export interface TaskModel {
   name: string;
   description: string;

src/app/state_management/services/app-state.service.ts

@@ -1,54 +1,128 @@
 import { Injectable } from '@angular/core';
-import {environment} from "../../../environments/environment";
-import {BehaviorSubject, catchError, Observable} from "rxjs";
-import {HttpClient} from "@angular/common/http";
-import {StateModel} from "../models/state.model";
-import {AuthenticationService} from "./authentication.service";
+import { environment } from '../../../environments/environment';
+import {BehaviorSubject, Observable, OperatorFunction, shareReplay, throwError, timer} from 'rxjs';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { StateModel } from '../models/state.model';
+import { AuthenticationService } from './authentication.service';
+import { catchError, retry } from 'rxjs/operators';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class AppStateService {
   private readonly _apiUrl = environment.apiUrl;
 
-  private readonly _state = new BehaviorSubject<StateModel>(
-    {
-      leaderboards: [],
-      submissions: [],
-      datasets: [],
-      tasks: [],
-      controlPanelSubmissions: [],
-      adminSessionStatus: ''
-      }
-  );
+  private readonly _state = new BehaviorSubject<StateModel>({
+    leaderboards: [],
+    submissions: [],
+    datasets: [],
+    tasks: [],
+    controlPanelSubmissions: [],
+    adminSessionStatus: '',
+  });
 
   public readonly state$ = this._state.asObservable();
 
-  constructor(public http: HttpClient,
-              public authService: AuthenticationService) {
-    console.log(this._apiUrl)
-    this.updateTasks();
-    this.updateDatasets();
-    this.updateLeaderboards();
-    this.updateSubmissions();
-    authService.$authStatus.subscribe(
-      (status: string) => {
-        this._setState({
-          ...this.getState(),
-          adminSessionStatus: status
-        });
-      }
-    );
+  constructor(public http: HttpClient, public authService: AuthenticationService) {
+    console.log(this._apiUrl);
+    this.refreshTasks();
+    this.refreshDatasets();
+    this.refreshLeaderboards();
+    this.refreshSubmissions();
+    authService.$authStatus.subscribe((status: string) => {
+      this._setState({
+        ...this.getState(),
+        adminSessionStatus: status,
+      });
+    });
   }
 
   private _setState(state: StateModel): void {
     this._state.next(state);
   }
 
-  public getState() : StateModel {
+  public getState(): StateModel {
     return this._state.getValue();
   }
 
+  private makeRequest<T>(request: Observable<T>, stateKey?: keyof StateModel, callback?: (data: any) => void) {
+     let obs = request.pipe(
+       this.retryStrategy(),
+       shareReplay(1),
+       catchError(this.handleRequestError.bind(this))
+      );
+     obs.subscribe(
+       (data) => {
+         if (callback) {
+           callback(data);
+         } else if (stateKey) {
+           this._setState({
+             ...this.getState(),
+             [stateKey]: data
+           });
+         }
+       }
+     );
+      return obs;
+  }
+
+  private handleRequestError(error: any): Observable<never> {
+    let errorMessage = 'An unknown error occurred!';
+
+    if (error.error instanceof ErrorEvent) {
+      errorMessage = `Client Error: ${error.error.message}`;
+    } else {
+      switch (error.status) {
+        case 400:
+          errorMessage = `Bad Request: ${error.message}`;
+          break;
+        case 401:
+          errorMessage = 'Unauthorized: Please log in again.';
+          this.authService.logout();
+          break;
+        case 404:
+          errorMessage = `Not Found: The requested resource was not found.`;
+          break;
+        case 500:
+          errorMessage = `Internal Server Error: Please try again later.`;
+          break;
+        case 503:
+          errorMessage = `Service Unavailable: Please try again later.`;
+          break;
+        default:
+          errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
+          break;
+      }
+    }
+    // Rethrow the error so it can be handled globally
+    return throwError(() => new Error(errorMessage));
+  }
+
+  // Improved retry strategy with exponential backoff and jitter
+  private retryStrategy<T>() {
+    return <OperatorFunction<T, T>>((source) =>
+        source.pipe(
+          retry({
+            count: 3, // Maximum of 3 retry attempts
+            delay: (error, retryCount) => {
+              if (![500, 503].includes(error.status)) {
+                // Do not retry for errors other than 500 and 503
+                return throwError(() => error);
+              }
+              // Exponential backoff with jitter
+              const jitter = Math.random() * 500; // Jitter value between 0-500ms
+              const backoffDelay = Math.pow(2, retryCount) * 1000 + jitter; // Exponential backoff
+              console.log(`Retrying request after ${backoffDelay}ms (attempt #${retryCount})`);
+              return timer(backoffDelay);
+            }
+          })
+        )
+    );
+  }
+
+  // ========================
+  // Public API
+  // ========================
   public submit(
     modelName: string,
     modelLink: string,
@@ -58,124 +132,71 @@ export class AppStateService {
     dataset: string,
     isPublic: boolean,
     fileContent: string
-  ) : Observable<Object> {
-    return this.http.post(this._apiUrl + '/submission/' + task + '/' + dataset, {
-      modelName: modelName,
-      modelLink: modelLink,
-      teamName: teamName,
-      contactEmail: contactEmail,
-      isPublic: isPublic,
-      fileContent: fileContent
-    });
-  }
-
-  public updateTasks() {
-    this.http.get(this._apiUrl + '/tasks').subscribe(
-      (data: any) => {
-        this._setState({
-          ...this.getState(),
-          tasks: data
-        });
-      }
+  ) {
+    return this.makeRequest(
+      this.http.post<Object>(`${this._apiUrl}/submission/${task}/${dataset}`, {
+        modelName,
+        modelLink,
+        teamName,
+        contactEmail,
+        isPublic,
+        fileContent,
+      })
     );
   }
 
-  public updateDatasets() {
-      this.http.get(this._apiUrl + '/datasets').subscribe(
-        (data: any) => {
-          this._setState({
-            ...this.getState(),
-            datasets: data
-          });
-        }
-      );
+  public refreshTasks() {
+    return this.makeRequest(this.http.get(this._apiUrl + '/tasks'), 'tasks');
   }
 
-  public updateLeaderboards() {
-      this.http.get(this._apiUrl + '/leaderboards').subscribe(
-        (data: any) => {
-          this._setState({
-            ...this.getState(),
-            leaderboards: data
-          });
-        }
-      );
+  public refreshDatasets() {
+    return this.makeRequest(this.http.get(this._apiUrl + '/datasets'), 'datasets');
   }
 
-  public updateSubmissions() {
-    this.http.get(this._apiUrl + '/submissions').subscribe(
-      (data: any) => {
-        this._setState({
-          ...this.getState(),
-          submissions: data
-        });
-      }
-    );
+  public refreshLeaderboards() {
+    return this.makeRequest(this.http.get(this._apiUrl + '/leaderboards'), 'leaderboards');
   }
 
-  public authenticate(password : string) {
-    this.authService.login(password).subscribe(
-      () => {
-        this.updateControlPanel();
-      }
-    );
+  public refreshSubmissions() {
+    return this.makeRequest(this.http.get(this._apiUrl + '/submissions'), 'submissions');
   }
 
-  public updateControlPanel() {
-    const headers = this.authService.getAuthHeaders();
-    this.http.get(`${this._apiUrl}/controlPanelSubmissions`, { headers }).pipe(
-      catchError(error => {
-          if (error.status === 401) {
-            this.authService.logout();
-          }
-          console.log(error);
-          return error;
-        }
-      ))
-      .subscribe(
-      (data: any) => {
+  public authenticate(password: string) {
+    let obs = this.authService.login(password);
+    obs.subscribe(
+      next => {
+        console.log('Login successful');
         this._setState({
           ...this.getState(),
-          controlPanelSubmissions: data
+          adminSessionStatus: 'authenticated',
         });
-      }
+      });
+    return obs;
+  }
+
+  public refreshControlPanel() {
+    const headers = this.authService.getAuthHeaders();
+    return this.makeRequest(
+      this.http.get(`${this._apiUrl}/control-panel-submissions`, { headers }),
+      'controlPanelSubmissions'
     );
   }
 
-  public forceUpdateSubmission(entry: any){
+  public updateSubmission(entry: any) {
     const headers = this.authService.getAuthHeaders();
-    this.http.put(`${this._apiUrl}/controlPanelSubmission/${entry.id}`, entry, { headers }).pipe(
-      catchError(error => {
-          if (error.status === 401) {
-            this.authService.logout();
-          }
-          console.log(error);
-          return error;
-        }
-      ))
-      .subscribe(
-        () => {
-          this.updateControlPanel();
-        }
-      );
+    return this.makeRequest(
+      this.http.put(`${this._apiUrl}/submission/${entry.id}`, entry, { headers }),
+      undefined,
+      () => this.refreshControlPanel() // Refresh control panel after update
+    );
   }
 
-  public deleteSubmission(id: number){
+  public deleteSubmission(id: number) {
     const headers = this.authService.getAuthHeaders();
-    this.http.delete(`${this._apiUrl}/controlPanelSubmission/` + id, { headers })
-      .pipe(
-        catchError(error => {
-          if (error.status === 401) {
-            this.authService.logout();
-          }
-          console.log(error);
-          return error;
-        }
-      ))
-      .subscribe(
-      () => {
-        this.updateControlPanel();
-      }
+    return this.makeRequest(
+      this.http.delete(`${this._apiUrl}/submission/${id}`, { headers }),
+      undefined,
+      () => this.refreshControlPanel() // Refresh control panel after deletion
     );
   }
 }

src/app/state_management/services/authentication.service.ts

@@ -1,6 +1,6 @@
 import {Injectable} from '@angular/core';
 import {HttpClient, HttpHeaders} from "@angular/common/http";
-import {BehaviorSubject, catchError, Observable, tap, throwError} from "rxjs";
+import {BehaviorSubject, catchError, Observable, shareReplay, tap, throwError} from "rxjs";
 import {environment} from "../../../environments/environment";
 
 @Injectable({
@@ -41,21 +41,18 @@ export class AuthenticationService {
     const payload = new URLSearchParams();
     payload.set('username', 'admin'); // Username is not used in this case
     payload.set('password', password);
-
+    let headers = new HttpHeaders({
+      'Content-Type': 'application/x-www-form-urlencoded',
+    });
     // Send POST request to the backend
     return this.http.post<{ access_token: string; token_type: string }>
-    (
-      this.apiUrl + '/token', payload.toString(),
-      {
-        headers: {
-          'Content-Type': 'application/x-www-form-urlencoded', // Set content type for form data
-        },
-      }).pipe(
+    (this.apiUrl + '/token', payload.toString(), { headers }).pipe(
       tap(response => {
         this.token = response.access_token;
         localStorage.setItem('auth_token', this.token);
         this.$authStatus.next('authenticated');
       }),
+      shareReplay(1),
       catchError(error => {
         if (error.status === 401) {
           this.$authStatus.next('wrong password');
@@ -68,7 +65,6 @@ export class AuthenticationService {
     );
   }
 
-
   public logout(): void {
     this.token = null;
     localStorage.removeItem('auth_token');