Merge pull request #97 from CentreForDigitalHumanities/feature/parse-and-prove-request-status

Feature/parse and prove request status

Author: XanderVertegaal

frontend/src/app/annotate/annotation-input/annotation-input.component.html

@@ -2,6 +2,7 @@
 @let appMode = appMode$ | async;
 @let userProblem = isUserProblem$ | async;
 @let editingOrAdding = appMode === 'edit' || appMode === 'add';
+@let inProgress = inProgress$ | async;
 @if (problem) {
 <div class="card">
     <div class="card-body">
@@ -13,12 +14,21 @@
             <la-knowledge-base-form [form]="form" />
         </div>
         <div class="d-flex justify-content-between mt-3">
+            @if (!inProgress) {
             <la-icon-button
                 buttonStyle="success"
                 [icon]="faTree"
                 label="Parse and prove"
                 (click)="startParse()"
             />
+            } @else {
+            <la-icon-button
+                buttonStyle="success"
+                [icon]="faHourglass"
+                label="Parsing and proving..."
+                disabled="true"
+            />
+            }
             @if (appMode === 'browse' && (canCopyProblem$ | async)) {
             <a
                 class="btn btn-secondary d-flex align-items-center justify-content-center"

frontend/src/app/annotate/annotation-input/annotation-input.component.ts

@@ -12,7 +12,7 @@ import { PremisesFormComponent } from "./premises-form/premises-form.component";
 import { KnowledgeBaseFormComponent } from "./knowledge-base-form/knowledge-base-form.component";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { Dataset, KnowledgeBaseAnnotation, KnowledgeBaseRelationship, Problem } from "../../types";
-import { faCheck, faCopy, faExclamationCircle, faFloppyDisk, faTrash, faTree, faWrench } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faCopy, faExclamationCircle, faFloppyDisk, faHourglass, faTrash, faTree, faWrench } from "@fortawesome/free-solid-svg-icons";
 import { ProblemDetailsComponent } from "./problem-details/problem-details.component";
 import { map, Subject } from "rxjs";
 import { ActivatedRoute, Router, RouterLinkWithHref } from "@angular/router";
@@ -73,13 +73,16 @@ export class AnnotationInputComponent implements OnInit {
 
     public submit$ = new Subject<void>();
 
+    public inProgress$ = this.parseService.inProgress$;
+
     public faCopy = faCopy;
     public faCheck = faCheck;
     public faTree = faTree;
     public faFloppyDisk = faFloppyDisk;
     public faExclamationCircle = faExclamationCircle;
     public faTrash = faTrash;
     public faWrench = faWrench;
+    public faHourglass = faHourglass;
 
     public appMode$ = this.problemService.appMode$;
     public isUserProblem$ = this.problem$.pipe(

frontend/src/app/services/parse.service.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
-import { Subject, switchMap, catchError, of, merge, map, share } from 'rxjs';
+import { Subject, switchMap, catchError, of, merge, map, share, startWith } from 'rxjs';
 import { ParseInput } from '@/annotate/annotation-input/annotation-input.component';
 import { ProblemService } from './problem.service';
 import {
@@ -9,6 +9,7 @@ import {
     ProofNode,
     ProofTree,
 } from '@/types';
+import { ToastService } from './toast.service';
 
 
 @Injectable({
@@ -17,6 +18,7 @@ import {
 export class ParseService {
     private http = inject(HttpClient);
     private problemService = inject(ProblemService);
+    private toastService = inject(ToastService);
 
     // Sink for triggering parse-and-prove requests to the backend.
     public submit$ = new Subject<ParseInput>();
@@ -30,13 +32,24 @@ export class ParseService {
             this.http.post<ParseResponse>("/api/problem/parse", form).pipe(
                 catchError((error) => {
                     console.error(`Error parsing problem:`, error);
+                    this.toastService.show({
+                        header: $localize`Error parsing problem`,
+                        body: error.message || $localize`An error occurred while parsing the problem.`,
+                        type: 'danger',
+                    });
                     return of({ data: null, error: error.message || "An error occurred while parsing the problem." });
                 }),
             )
         ),
         share()
     );
 
+    public inProgress$ = merge(
+        this.submit$.pipe(map(() => true)),
+        this.parseResults$.pipe(map(() => false)),
+        this.clearOnNewProblem$.pipe(map(() => false)),
+    ).pipe(startWith(false));
+
     public parse$ = merge(
         this.parseResults$,
         this.clearOnNewProblem$