From c6021772eb214d08b289a4db005d9ddc9d65969c Mon Sep 17 00:00:00 2001
From: Amit Moryossef <amitmoryossef@gmail.com>
Date: Sun, 15 Dec 2024 23:24:05 +0200
Subject: [PATCH] fix(mermaid): remove mermaid component and dependency

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

diff --git a/package.json b/package.json
index a3d47ba3..df53d2d0 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,6 @@
     "flag-icons": "7.2.3",
     "ionicons": "7.4.0",
     "leaflet": "1.9.4",
-    "mermaid": "10.9.1",
     "mp4-muxer": "5.1.5",
     "ngx-filesize": "3.0.4",
     "pose-viewer": "1.0.0",
@@ -129,7 +128,7 @@
     "@types/jasmine": "5.1.5",
     "@types/jasminewd2": "2.0.13",
     "@types/offscreencanvas": "2019.7.3",
-    "@types/three": "0.170.0",
+    "@types/three": "0.171.0",
     "@types/web-app-manifest": "1.0.8",
     "@types/webgl2": "0.0.11",
     "@types/wicg-file-system-access": "2023.10.5",
@@ -155,7 +154,7 @@
     "karma-safari-launcher": "1.0.0",
     "karma-spec-reporter": "0.0.36",
     "lint-staged": "15.2.11",
-    "marked": "15.0.3",
+    "marked": "15.0.4",
     "node-html-parser": "6.1.13",
     "npm-license-crawler": "0.2.1",
     "open": "10.1.0",
diff --git a/src/app/pages/landing/mermaid-chart/mermaid-chart.component.html b/src/app/pages/landing/mermaid-chart/mermaid-chart.component.html
deleted file mode 100644
index d258ed29..00000000
--- a/src/app/pages/landing/mermaid-chart/mermaid-chart.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index e69de29b..00000000
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
deleted file mode 100644
index b4c50823..00000000
--- a/src/app/pages/landing/mermaid-chart/mermaid-chart.component.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-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
deleted file mode 100644
index 3dca3a51..00000000
--- a/src/app/pages/landing/mermaid-chart/mermaid-chart.component.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import {AfterViewInit, Component, ElementRef, viewChild} from '@angular/core';
-import mermaid, {MermaidConfig} from 'mermaid';
-
-const config: MermaidConfig = {
-  startOnLoad: false,
-  flowchart: {
-    useMaxWidth: true,
-    htmlLabels: true,
-  },
-  securityLevel: 'loose',
-};
-
-mermaid.initialize(config);
-
-@Component({
-  selector: 'app-mermaid-chart',
-  imports: [],
-  templateUrl: './mermaid-chart.component.html',
-  styleUrl: './mermaid-chart.component.scss',
-})
-export class MermaidChartComponent implements AfterViewInit {
-  readonly mermaidEl = viewChild<ElementRef>('mermaid');
-
-  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);
-    const mermaidEl = this.mermaidEl();
-    mermaidEl.nativeElement.innerHTML = svg;
-    bindFunctions(mermaidEl.nativeElement);
-  }
-}