Minimalist Parser browser component

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>

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}`;
+    }
+}

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();

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,

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,