From 5eb292aa111f587efcfc94119386f337d3586ab2 Mon Sep 17 00:00:00 2001 From: Yasser Elsayed Date: Thu, 7 Mar 2019 11:48:36 -0800 Subject: [PATCH 1/2] add code formatting to markdown viewer --- .../mock-backend/model-output/metadata.json | 7 +++- frontend/src/CSSReset.tsx | 1 + .../src/components/viewers/MarkdownViewer.tsx | 37 ++++++++++++++++++- 3 files changed, 43 insertions(+), 2 deletions(-) diff --git a/frontend/mock-backend/model-output/metadata.json b/frontend/mock-backend/model-output/metadata.json index 310351cca14..e20bfaa06d9 100644 --- a/frontend/mock-backend/model-output/metadata.json +++ b/frontend/mock-backend/model-output/metadata.json @@ -2,7 +2,12 @@ "outputs": [ { "storage": "inline", - "source": "# Title\n[some link here](http://example.com)", + "source": "## [Model Details](https://console.cloud.google.com/mlengine/models/kfp_sample_model?project=ml-pipeline-dogfood)", + "type": "markdown" + }, + { + "source": "\n## Online Prediction\n\n### `REST` endpoint\nThe `REST` endpoint for online prediction is as follows:\n```\nPOST https://ml.googleapis.com/v1/projects/ml-pipeline-dogfood/models/kfp_sample_model/versions/ver_37520a025cbf47df193cbab536a146bf:predict\n```\nTry the REST endpoint in [Google OAuth 2.0 Playgound](https://developers.google.com/oauthplayground/#step3&apisSelect=https://www.googleapis.com/auth/cloud-platform&postData={\"instances\":[]}&url=https://ml.googleapis.com/v1/projects/ml-pipeline-dogfood/models/kfp_sample_model/versions/ver_37520a025cbf47df193cbab536a146bf:predict&content_type=application/json&http_method=POST).\n\n### GCloud command\n```bash\ngcloud ml-engine predict --model kfp_sample_model --version ver_37520a025cbf47df193cbab536a146bf --json-instances instances.json\n```\n ", + "storage": "inline", "type": "markdown" }, { diff --git a/frontend/src/CSSReset.tsx b/frontend/src/CSSReset.tsx index 173ae2f3457..50a7d6ba71a 100644 --- a/frontend/src/CSSReset.tsx +++ b/frontend/src/CSSReset.tsx @@ -34,6 +34,7 @@ menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; /* Consider adding flex-shrink: 0; */ + font-size: 100%; margin: 0; padding: 0; vertical-align: baseline; diff --git a/frontend/src/components/viewers/MarkdownViewer.tsx b/frontend/src/components/viewers/MarkdownViewer.tsx index fb2a22cbd7b..c52023ac761 100644 --- a/frontend/src/components/viewers/MarkdownViewer.tsx +++ b/frontend/src/components/viewers/MarkdownViewer.tsx @@ -16,9 +16,44 @@ import * as React from 'react'; import Viewer, { ViewerConfig } from './Viewer'; +import { cssRaw } from 'typestyle'; // tslint:disable-next-line:no-var-requires const markdownIt = require('markdown-it'); +cssRaw(` +.markdown-viewer h1, +.markdown-viewer h2, +.markdown-viewer h3, +.markdown-viewer h4, +.markdown-viewer h5, +.markdown-viewer h6 { +position: relative; + margin-top: 1em; + margin-bottom: 16px; + font-size: initial; + font-weight: 700; + line-height: 1.4; +} + +.markdown-viewer h1, +.markdown-viewer h2 { + padding-bottom: .3em; + border-bottom: 1px solid #eee; +} + +.markdown-viewer code, +.markdown-viewer pre { + background-color: #f8f8f8; + border-radius: 5px; +} + +.markdown-viewer pre { + border: solid 1px #eee; + margin: 7px 0; + padding: 7px; +} +`); + export interface MarkdownViewerConfig extends ViewerConfig { markdownContent: string; } @@ -44,7 +79,7 @@ class MarkdownViewer extends Viewer { return null; } const html = markdownIt().render(this._config.markdownContent); - return
; + return
; } } From c1efb38a7410ed8bc3025e7c3d0dd843d1521ad4 Mon Sep 17 00:00:00 2001 From: Yasser Elsayed Date: Thu, 7 Mar 2019 11:53:32 -0800 Subject: [PATCH 2/2] tests --- frontend/mock-backend/model-output/metadata.json | 7 +------ .../viewers/__snapshots__/MarkdownViewer.test.tsx.snap | 2 ++ 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/frontend/mock-backend/model-output/metadata.json b/frontend/mock-backend/model-output/metadata.json index e20bfaa06d9..310351cca14 100644 --- a/frontend/mock-backend/model-output/metadata.json +++ b/frontend/mock-backend/model-output/metadata.json @@ -2,12 +2,7 @@ "outputs": [ { "storage": "inline", - "source": "## [Model Details](https://console.cloud.google.com/mlengine/models/kfp_sample_model?project=ml-pipeline-dogfood)", - "type": "markdown" - }, - { - "source": "\n## Online Prediction\n\n### `REST` endpoint\nThe `REST` endpoint for online prediction is as follows:\n```\nPOST https://ml.googleapis.com/v1/projects/ml-pipeline-dogfood/models/kfp_sample_model/versions/ver_37520a025cbf47df193cbab536a146bf:predict\n```\nTry the REST endpoint in [Google OAuth 2.0 Playgound](https://developers.google.com/oauthplayground/#step3&apisSelect=https://www.googleapis.com/auth/cloud-platform&postData={\"instances\":[]}&url=https://ml.googleapis.com/v1/projects/ml-pipeline-dogfood/models/kfp_sample_model/versions/ver_37520a025cbf47df193cbab536a146bf:predict&content_type=application/json&http_method=POST).\n\n### GCloud command\n```bash\ngcloud ml-engine predict --model kfp_sample_model --version ver_37520a025cbf47df193cbab536a146bf --json-instances instances.json\n```\n ", - "storage": "inline", + "source": "# Title\n[some link here](http://example.com)", "type": "markdown" }, { diff --git a/frontend/src/components/viewers/__snapshots__/MarkdownViewer.test.tsx.snap b/frontend/src/components/viewers/__snapshots__/MarkdownViewer.test.tsx.snap index 68de71e0911..7a8416d1222 100644 --- a/frontend/src/components/viewers/__snapshots__/MarkdownViewer.test.tsx.snap +++ b/frontend/src/components/viewers/__snapshots__/MarkdownViewer.test.tsx.snap @@ -19,6 +19,7 @@ exports[`MarkdownViewer renders some basic markdown 1`] = ` } >
Title @@ -45,6 +46,7 @@ exports[`MarkdownViewer sanitizes the markdown to remove XSS 1`] = ` } >
lower[click me](javascript:...)lower