Angular markdown widget (tensorflow#4666)

markdown: the markdown widget renders markdown into html using marked.js

Co-authored-by: Preston Fossee <[email protected]>
Co-authored-by: Stephan Lee <[email protected]>

package.json

@@ -44,6 +44,7 @@
     "@types/d3": "5.7.2",
     "@types/jasmine": "^3.5.10",
     "@types/lodash": "^4.14.158",
+    "@types/marked": "^1.2.2",
     "@types/node": "^13.13.1",
     "@types/requirejs": "^2.1.31",
     "@types/resize-observer-browser": "^0.1.3",
@@ -112,6 +113,7 @@
     "d3": "5.7.0",
     "dagre": "^0.8.5",
     "lodash": "^4.17.19",
+    "marked": "^2.0.0",
     "monaco-editor-core": "^0.20.0",
     "monaco-languages": "^1.10.0",
     "ngx-color-picker": "^10.1.0",

tensorboard/defs/defs.bzl

@@ -138,6 +138,7 @@ def tf_ng_web_test_suite(runtime_deps = [], bootstrap = [], deps = [], **kwargs)
             "@npm//:node_modules/d3/dist/d3.js",
             "@npm//:node_modules/three/build/three.js",
             "@npm//:node_modules/dagre/dist/dagre.js",
+            "@npm//:node_modules/marked/lib/marked.js",
         ],
         **kwargs
     )

tensorboard/defs/internal/js.bzl

@@ -131,6 +131,7 @@ tf_dev_js_binary = rule(
                 "@npm//:node_modules/d3/dist/d3.js": "d3",
                 "@npm//:node_modules/three/build/three.js": "three",
                 "@npm//:node_modules/zone.js/dist/zone.js": "zone.js/dist/zone.js",
+                "@npm//:node_modules/marked/lib/marked.js": "marked",
             },
             allow_files = True,
         ),

tensorboard/webapp/BUILD

@@ -342,6 +342,7 @@ tf_ng_web_test_suite(
         "//tensorboard/webapp/widgets/line_chart_v2/lib/renderer:renderer_test",
         "//tensorboard/webapp/widgets/line_chart_v2/lib/worker:worker_test",
         "//tensorboard/webapp/widgets/line_chart_v2/sub_view:sub_view_tests",
+        "//tensorboard/webapp/widgets/markdown_renderer:markdown_renderer_tests",
         "//tensorboard/webapp/widgets/range_input:range_input_tests",
         "//tensorboard/webapp/widgets/source_code:source_code_container_test_lib",
         "//tensorboard/webapp/widgets/source_code:source_code_test_lib",

tensorboard/webapp/testing/require_js_karma_config.js

@@ -24,5 +24,6 @@ require.config({
     d3: '/base/npm/node_modules/d3/dist/d3',
     three: '/base/npm/node_modules/three/build/three',
     dagre: '/base/npm/node_modules/dagre/dist/dagre',
+    marked: '/base/npm/node_modules/marked/lib/marked',
   },
 });

tensorboard/webapp/widgets/markdown_renderer/BUILD

@@ -0,0 +1,37 @@
+load("//tensorboard/defs:defs.bzl", "tf_ng_module", "tf_ts_library")
+
+package(default_visibility = ["//tensorboard:internal"])
+
+licenses(["notice"])
+
+tf_ng_module(
+    name = "markdown_renderer",
+    srcs = [
+        "markdown_renderer_component.ts",
+        "markdown_renderer_module.ts",
+    ],
+    assets = [
+        "markdown_renderer_component.css",
+        "markdown_renderer_component.ng.html",
+    ],
+    deps = [
+        "@npm//@angular/common",
+        "@npm//@angular/core",
+        "@npm//@types/marked",
+        "@npm//marked",
+    ],
+)
+
+tf_ts_library(
+    name = "markdown_renderer_tests",
+    testonly = True,
+    srcs = [
+        "markdown_renderer_component_test.ts",
+    ],
+    deps = [
+        ":markdown_renderer",
+        "@npm//@angular/common",
+        "@npm//@angular/core",
+        "@npm//@types/jasmine",
+    ],
+)

tensorboard/webapp/widgets/markdown_renderer/markdown_renderer_component.css

@@ -0,0 +1,41 @@
+/* Copyright 2020 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+
+markdown-renderer .content > p:first-child {
+  margin-top: 0.3em;
+}
+
+markdown-renderer .content > p:last-child {
+  margin-bottom: 0.3em;
+}
+
+markdown-renderer table {
+  border-collapse: collapse;
+}
+
+markdown-renderer table th {
+  font-weight: 600;
+}
+
+markdown-renderer table th,
+markdown-renderer table td {
+  padding: 6px 13px;
+  border: 1px solid #dfe2e5;
+}
+
+markdown-renderer table tr {
+  background-color: #fff;
+  border-top: 1px solid #c6cbd1;
+}

tensorboard/webapp/widgets/markdown_renderer/markdown_renderer_component.ng.html

@@ -0,0 +1,18 @@
+<!--
+@license
+Copyright 2020 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div [innerHTML]="markdownHTML" class="content"></div>

tensorboard/webapp/widgets/markdown_renderer/markdown_renderer_component.ts

@@ -0,0 +1,51 @@
+/* Copyright 2020 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnChanges,
+  SimpleChange,
+  SimpleChanges,
+  ViewEncapsulation,
+} from '@angular/core';
+import {parse} from 'marked';
+
+@Component({
+  selector: 'markdown-renderer',
+  templateUrl: './markdown_renderer_component.ng.html',
+  styleUrls: ['./markdown_renderer_component.css'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MarkdownRendererComponent implements OnChanges {
+  @Input()
+  markdown!: string;
+
+  markdownHTML: string = '';
+
+  constructor(public readonly changeDetectorRef: ChangeDetectorRef) {}
+
+  async ngOnChanges(changes: SimpleChanges) {
+    if (changes['markdown']) {
+      const markdownChange: SimpleChange = changes['markdown'];
+      if (markdownChange.previousValue !== this.markdown) {
+        this.markdownHTML = await parse(this.markdown);
+        this.changeDetectorRef.detectChanges();
+      }
+    }
+  }
+}

tensorboard/webapp/widgets/markdown_renderer/markdown_renderer_component_test.ts

@@ -0,0 +1,65 @@
+/* Copyright 2020 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+
+import {CommonModule} from '@angular/common';
+import {Component, Input, NO_ERRORS_SCHEMA, ViewChild} from '@angular/core';
+import {
+  fakeAsync,
+  flush,
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+
+import {MarkdownRendererComponent} from './markdown_renderer_component';
+
+@Component({
+  selector: 'testable-markdown-renderer',
+  template: `<markdown-renderer [markdown]="content"> </markdown-renderer>`,
+})
+class TestableComponent {
+  @ViewChild(MarkdownRendererComponent)
+  component!: MarkdownRendererComponent;
+
+  @Input() content!: string;
+}
+
+describe('markdown_renderer/markdown_renderer test', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TestableComponent, MarkdownRendererComponent],
+      imports: [CommonModule],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  });
+
+  function createComponent(): ComponentFixture<TestableComponent> {
+    return TestBed.createComponent(TestableComponent);
+  }
+
+  function getComponent(fixture: ComponentFixture<TestableComponent>) {
+    return fixture.nativeElement.querySelector('markdown-renderer');
+  }
+
+  it('renders markdown into html', fakeAsync(() => {
+    const fixture = createComponent();
+    fixture.componentInstance.content = '# title';
+    fixture.detectChanges();
+
+    flush();
+    const component = getComponent(fixture);
+    const content = component.querySelector('.content');
+    expect(content.innerHTML.trim()).toBe('<h1>title</h1>');
+  }));
+});

tensorboard/webapp/widgets/markdown_renderer/markdown_renderer_module.ts

@@ -0,0 +1,26 @@
+/* Copyright 2020 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+
+import {MarkdownRendererComponent} from './markdown_renderer_component';
+
+@NgModule({
+  declarations: [MarkdownRendererComponent],
+  imports: [CommonModule],
+  exports: [MarkdownRendererComponent],
+})
+export class MarkdownRendererModule {}

yarn.lock

@@ -1419,6 +1419,11 @@
   resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.1.tgz#459c65fa1867dafe6a8f322c4c51695663cc55e9"
   integrity sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w==
 
+"@types/marked@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-1.2.2.tgz#1f858a0e690247ecf3b2eef576f98f86e8d960d4"
+  integrity sha512-wLfw1hnuuDYrFz97IzJja0pdVsC0oedtS4QsKH1/inyW9qkLQbXgMUqEQT0MVtUBx3twjWeInUfjQbhBVLECXw==
+
 "@types/node-fetch@^2.1.2":
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.5.7.tgz#20a2afffa882ab04d44ca786449a276f9f6bbf3c"
@@ -3795,6 +3800,11 @@ make-fetch-happen@^5.0.0:
     socks-proxy-agent "^4.0.0"
     ssri "^6.0.0"
 
+marked@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-2.0.0.tgz#9662bbcb77ebbded0662a7be66ff929a8611cee5"
+  integrity sha512-NqRSh2+LlN2NInpqTQnS614Y/3NkVMFFU6sJlRFEpxJ/LHuK/qJECH7/fXZjk4VZstPW/Pevjil/VtSONsLc7Q==
+
 [email protected]:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"