From 8ca265e7452f7ea9ed93f532c8a2d640cab44dcd Mon Sep 17 00:00:00 2001
From: Amit Moryossef <amitmoryossef@gmail.com>
Date: Fri, 2 Aug 2024 17:51:47 +0200
Subject: [PATCH] feat(landing): add mermaid chart component

---
 package.json                                  |  1 +
 src/app/pages/landing/landing.module.ts       |  2 +
 .../mermaid-chart.component.html              |  1 +
 .../mermaid-chart.component.scss              |  0
 .../mermaid-chart.component.spec.ts           | 22 +++++++
 .../mermaid-chart/mermaid-chart.component.ts  | 57 +++++++++++++++++++
 6 files changed, 83 insertions(+)
 create mode 100644 src/app/pages/landing/mermaid-chart/mermaid-chart.component.html
 create mode 100644 src/app/pages/landing/mermaid-chart/mermaid-chart.component.scss
 create mode 100644 src/app/pages/landing/mermaid-chart/mermaid-chart.component.spec.ts
 create mode 100644 src/app/pages/landing/mermaid-chart/mermaid-chart.component.ts

diff --git a/package.json b/package.json
index 22a971e7..4f2bfb88 100644
--- a/package.json
+++ b/package.json
@@ -94,6 +94,7 @@
     "flag-icons": "7.2.3",
     "ionicons": "7.4.0",
     "leaflet": "1.9.4",
+    "mermaid": "10.9.1",
     "mp4-muxer": "4.3.3",
     "ngx-filesize": "3.0.4",
     "pose-viewer": "0.9.0",
diff --git a/src/app/pages/landing/landing.module.ts b/src/app/pages/landing/landing.module.ts
index 074f1a31..85a27dd6 100644
--- a/src/app/pages/landing/landing.module.ts
+++ b/src/app/pages/landing/landing.module.ts
@@ -31,6 +31,7 @@ import {I18NLanguageSelectorComponent} from '../../components/i18n-language-sele
 import {TermsComponent} from './terms/terms.component';
 import {PrivacyComponent} from './privacy/privacy.component';
 import {MatTabsModule} from '@angular/material/tabs';
+import {MermaidChartComponent} from './mermaid-chart/mermaid-chart.component';
 
 @NgModule({
   declarations: [
@@ -68,6 +69,7 @@ import {MatTabsModule} from '@angular/material/tabs';
     MatTabsModule,
     SettingsPageModule,
     IonicModule,
+    MermaidChartComponent,
   ],
   bootstrap: [LandingComponent],
 })
diff --git a/src/app/pages/landing/mermaid-chart/mermaid-chart.component.html b/src/app/pages/landing/mermaid-chart/mermaid-chart.component.html
new file mode 100644
index 00000000..d258ed29
--- /dev/null
+++ b/src/app/pages/landing/mermaid-chart/mermaid-chart.component.html
@@ -0,0 +1 @@
+<div #mermaid></div>
diff --git a/src/app/pages/landing/mermaid-chart/mermaid-chart.component.scss b/src/app/pages/landing/mermaid-chart/mermaid-chart.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/pages/landing/mermaid-chart/mermaid-chart.component.spec.ts b/src/app/pages/landing/mermaid-chart/mermaid-chart.component.spec.ts
new file mode 100644
index 00000000..b4c50823
--- /dev/null
+++ b/src/app/pages/landing/mermaid-chart/mermaid-chart.component.spec.ts
@@ -0,0 +1,22 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {MermaidChartComponent} from './mermaid-chart.component';
+
+describe('MermaidChartComponent', () => {
+  let component: MermaidChartComponent;
+  let fixture: ComponentFixture<MermaidChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MermaidChartComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MermaidChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/landing/mermaid-chart/mermaid-chart.component.ts b/src/app/pages/landing/mermaid-chart/mermaid-chart.component.ts
new file mode 100644
index 00000000..f0733413
--- /dev/null
+++ b/src/app/pages/landing/mermaid-chart/mermaid-chart.component.ts
@@ -0,0 +1,57 @@
+import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
+import mermaid from 'mermaid';
+
+const config = {
+  startOnLoad: false,
+  flowchart: {
+    useMaxWidth: true,
+    htmlLabels: true,
+  },
+  securityLevel: 'loose',
+};
+
+mermaid.initialize(config);
+
+@Component({
+  selector: 'app-mermaid-chart',
+  standalone: true,
+  imports: [],
+  templateUrl: './mermaid-chart.component.html',
+  styleUrl: './mermaid-chart.component.scss',
+})
+export class MermaidChartComponent implements AfterViewInit {
+  @ViewChild('mermaid') mermaidEl: ElementRef;
+
+  async ngAfterViewInit() {
+    const graphDefinition = `
+ flowchart TD
+    A0[Spoken Language Audio] --> A1(Spoken Language Text)
+    A1[Spoken Language Text] --> B[<a href='https://github.com/sign/translate/issues/10'>Language Identification</a>]
+    A1 --> C(<a href='https://github.com/sign/translate/tree/master/functions/src/text-normalization'>Normalized Text</a>)
+    B --> C
+    C & B --> Q(<a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter'>Sentence Splitter</a>)
+    Q & B --> D(<a href='https://github.com/sign-language-processing/signbank-plus'>SignWriting</a>)
+    C -.-> M(<a href='https://github.com/ZurichNLP/spoken-to-signed-translation' title='We would like to move away from glosses'>Glosses</a>)
+    M -.-> E
+    D --> E(<a href='https://github.com/sign-language-processing/signwriting-animation'>Pose Sequence</a>)
+    D -.-> I(<a href='https://github.com/sign-language-processing/signwriting-illustration'>Illustration</a>)
+    N --> H(<a href='https://github.com/sign/translate/issues/68'>3D Avatar</a>)
+    N --> G(<a href='https://github.com/sign-language-processing/pose'>Skeleton Viewer</a>)
+    N --> F(<a href='https://github.com/sign-language-processing/pose-to-video' title='Help wanted!'>Human GAN</a>)
+    H & G & F --> J(Video)
+    J --> K(Share Translation)
+    D -.-> L(<a href='https://github.com/sign-language-processing/signwriting-description' title='Poor performance. Help wanted!'>Description</a>)
+    O --> N(<a href='https://github.com/sign-language-processing/fluent-pose-synthesis' title='Currently skipped. Help Wanted!'>Fluent Pose Sequence</a>)
+    E --> O(<a href='https://github.com/sign-language-processing/pose-anonymization'>Pose Appearance Transfer</a>)
+
+linkStyle default stroke:green;
+linkStyle 3,5,7 stroke:lightgreen;
+linkStyle 10,11,12,15 stroke:red;
+linkStyle 8,9,14,19,20 stroke:orange;
+
+`;
+    const {svg, bindFunctions} = await mermaid.render('graphDiv', graphDefinition);
+    this.mermaidEl.nativeElement.innerHTML = svg;
+    bindFunctions(this.mermaidEl.nativeElement);
+  }
+}