From 2fc839edbd4bba6881de9f5a06d6c29adeabaa37 Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Tue, 10 Dec 2024 11:54:02 +0100
Subject: [PATCH] Minimalist Parser browser component

---
 .../minimalist-parser-browser.component.html  | 23 +++++++++++++++++--
 .../minimalist-parser-browser.component.ts    | 16 ++++++++++++-
 .../minimalist-parser-input.component.ts      |  9 ++++++--
 frontend/src/environments/environment.prod.ts |  1 +
 frontend/src/environments/environment.ts      |  1 +
 5 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/minimalist-parser/minimalist-parser-browser/minimalist-parser-browser.component.html b/frontend/src/app/minimalist-parser/minimalist-parser-browser/minimalist-parser-browser.component.html
index 60e12f7..e89e572 100644
--- a/frontend/src/app/minimalist-parser/minimalist-parser-browser/minimalist-parser-browser.component.html
+++ b/frontend/src/app/minimalist-parser/minimalist-parser-browser/minimalist-parser-browser.component.html
@@ -1,3 +1,22 @@
-<h1 class="title" i18n>Minimalist Parser</h1>
+<div class="content">
+    <div class="columns is-centered">
+        <div class="column is-two-thirds">
+            <h1 i18n>Minimalist Parser</h1>
 
-<i i18n>Coming soon: browse a pre-parsed corpus. </i>
+            <p i18n>
+                Click the button below to browse through a pre-parsed corpus
+                consisting of 100 sentences taken from the Wall Street Journal.
+            </p>
+
+            @if (statusOk$ | async) {
+            <button type="button" class="button is-primary" (click)="navigateToVulcan()" i18n>
+                Start browsing
+            </button>
+            } @else {
+                <p class="notification mt-6" i18n>
+                    The Vulcan visualization tool is temporarily unavailable.
+                </p>
+            }
+        </div>
+    </div>
+</div>
diff --git a/frontend/src/app/minimalist-parser/minimalist-parser-browser/minimalist-parser-browser.component.ts b/frontend/src/app/minimalist-parser/minimalist-parser-browser/minimalist-parser-browser.component.ts
index 5163122..37e4ac3 100644
--- a/frontend/src/app/minimalist-parser/minimalist-parser-browser/minimalist-parser-browser.component.ts
+++ b/frontend/src/app/minimalist-parser/minimalist-parser-browser/minimalist-parser-browser.component.ts
@@ -1,8 +1,22 @@
 import { Component } from "@angular/core";
+import { map } from "rxjs";
+import { StatusService } from "src/app/shared/services/status.service";
+import { environment } from "src/environments/environment";
 
 @Component({
     selector: "pp-minimalist-parser-browser",
     templateUrl: "./minimalist-parser-browser.component.html",
     styleUrl: "./minimalist-parser-browser.component.scss",
 })
-export class MinimalistParserBrowserComponent {}
+export class MinimalistParserBrowserComponent {
+    public statusOk$ = this.statusService
+        .getStatus$()
+        .pipe(map((status) => status.vulcan));
+
+    constructor(private statusService: StatusService) {}
+
+    public navigateToVulcan(): void {
+        const origin = window.location.origin;
+        window.location.href = `${origin}${environment.vulcanUrl}`;
+    }
+}
diff --git a/frontend/src/app/minimalist-parser/minimalist-parser-input/minimalist-parser-input.component.ts b/frontend/src/app/minimalist-parser/minimalist-parser-input/minimalist-parser-input.component.ts
index a81e9b8..7cc56ea 100644
--- a/frontend/src/app/minimalist-parser/minimalist-parser-input/minimalist-parser-input.component.ts
+++ b/frontend/src/app/minimalist-parser/minimalist-parser-input/minimalist-parser-input.component.ts
@@ -5,6 +5,7 @@ import { map } from "rxjs";
 import { ErrorHandlerService } from "src/app/shared/services/error-handler.service";
 import { MGParserAPIService } from "src/app/shared/services/mg-parser-api.service";
 import { StatusService } from "src/app/shared/services/status.service";
+import { environment } from "src/environments/environment";
 
 @Component({
     selector: "pp-minimalist-parser-input",
@@ -42,12 +43,16 @@ export class MinimalistParserInputComponent implements OnInit {
                     this.errorHandler.handleMGParserError(response.error);
                 }
                 if (response.id) {
-                    // TODO: Use dynamic, env-based URL instead.
-                    window.location.href = `http://localhost:5000/vulcan/${response.id}`;
+                    this.navigateToVulcan(response.id);
                 }
             });
     }
 
+    private navigateToVulcan(id: string): void {
+        const origin = window.location.origin;
+        window.location.href = `${origin}${environment.vulcanUrl}${id}`;
+    }
+
     public parse(): void {
         this.form.controls.mpInput.markAsTouched();
         this.form.controls.mpInput.updateValueAndValidity();
diff --git a/frontend/src/environments/environment.prod.ts b/frontend/src/environments/environment.prod.ts
index ce45330..9231cb4 100644
--- a/frontend/src/environments/environment.prod.ts
+++ b/frontend/src/environments/environment.prod.ts
@@ -4,6 +4,7 @@ export const environment = {
     production: true,
     assets: "/static/assets",
     apiUrl: "/api/",
+    vulcanUrl: "/vulcan/",
     buildTime,
     version,
     sourceUrl,
diff --git a/frontend/src/environments/environment.ts b/frontend/src/environments/environment.ts
index 2a7b590..657a121 100644
--- a/frontend/src/environments/environment.ts
+++ b/frontend/src/environments/environment.ts
@@ -8,6 +8,7 @@ export const environment = {
     // URL path prefix for assets
     assets: "assets",
     apiUrl: "/api/",
+    vulcanUrl: "/vulcan/",
     buildTime,
     version,
     sourceUrl,