Fix table display in markdown viewer

dashboard/origin-mlx/src/components/Detail/DatasetDetail.tsx

@@ -21,6 +21,8 @@ import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import yaml from 'js-yaml';
 import { getUserInfo, hasRole } from '../../lib/util';
+import RunView from '../RunView'
+import RelatedAssetView from '../RelatedAssetView';
 import MarkdownViewer from '../MarkdownViewer';
 import LoadingMessage from '../LoadingMessage';
 import MetadataView from '../MetadataView';
@@ -61,16 +63,20 @@ export default class PipelineDetail extends React.Component<IPipelineDetailProps
     const dataset = this.state.dataset
     const setRunLink = this.props.setRunLink
 
-    console.log("dataset:")
-    console.log(dataset)
-
     return (
       <div className="detail-wrapper">
-        <Tabs 
+        <Tabs
           variant="fullWidth"
-          className="comp-tabs" 
+          className="comp-tabs"
           value={ this.state.leftTab }
-          onChange={(_, leftTab: string) => this.setState({ leftTab })}>              
+          onChange={(_, leftTab: string) => this.setState({ leftTab })}>
+          { dataset.template && dataset.template.readme_url &&
+            <Tab 
+              className="comp-tab"
+              value="readme" 
+              label="Asset Readme" 
+            />
+          }
           <Tab 
             className="comp-tab"
             value="description" 
@@ -95,12 +101,19 @@ export default class PipelineDetail extends React.Component<IPipelineDetailProps
               label="Launch"
             />
           }
+          { dataset.related_assets && dataset.related_assets.length !== 0 &&
+            <Tab
+              className="comp-tab"
+              value="relatedAssets"
+              label="Related Assets"
+            />
+          }
         </Tabs>
         <div className="detail-contents">
-          { this.state.leftTab === 'description' && dataset.template && dataset.template.readme_url &&
+          { this.state.leftTab === 'readme' &&
             <MarkdownViewer url={dataset.template.readme_url}></MarkdownViewer>
           }
-          { this.state.leftTab === 'description' && !(dataset.template && dataset.template.readme_url) &&
+          { this.state.leftTab === 'description' &&
             <div className="component-detail-side">
               {!dataset.yaml
                 ? <LoadingMessage message="Loading Pipeline details..." />
@@ -120,6 +133,16 @@ export default class PipelineDetail extends React.Component<IPipelineDetailProps
               }
             </div>
           }
+          { this.state.leftTab === 'relatedAssets' &&
+            <RelatedAssetView
+              datasetId={dataset.id}
+              relatedAssets={dataset.related_assets} 
+              setRunLink={setRunLink}
+            />
+          }
+          {this.state.leftTab === 'runCreation' &&
+            <RunView type="datasets" asset={dataset} setRunLink={setRunLink}/>
+          }
           { this.state.leftTab === "source" &&
             <SourceCodeDisplay 
               scrollMe={true}

dashboard/origin-mlx/src/components/Detail/ModelDetail.tsx

@@ -23,6 +23,7 @@ import SourceCodeDisplay from '../SourceCodeDisplay';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import MetadataView from '../MetadataView';
+import MarkdownViewer from '../MarkdownViewer';
 
 const isAdmin = hasRole(getUserInfo(), 'admin');
 
@@ -107,6 +108,13 @@ export default class ModelDetail extends React.Component<ModelDetailProps, Model
           className="comp-tabs" 
           value={ this.state.leftTab }
           onChange={(_, value: string) => this.setState({ leftTab: value })}>
+          { model.template && model.template.readme_url &&
+            <Tab 
+              className="comp-tab"
+              value="readme" 
+              label="Asset Readme" 
+            />
+          }
           <Tab 
             className="comp-tab"
             value="description" 
@@ -140,6 +148,9 @@ export default class ModelDetail extends React.Component<ModelDetailProps, Model
           }
         </Tabs>
         <div className="detail-contents">
+          { this.state.leftTab === 'readme' &&
+            <MarkdownViewer url={model.template.readme_url}></MarkdownViewer>
+          }
           {this.state.leftTab === 'description' &&
             <MetadataView content={{
               about: [

dashboard/origin-mlx/src/components/MarkdownViewer.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 
 export default class MarkdownViewer extends React.Component<{url: string}, {terms: any}> {
     constructor(props: any) {
@@ -17,7 +18,7 @@ export default class MarkdownViewer extends React.Component<{url: string}, {term
     render() {
       return (
         <div className="content">
-          <ReactMarkdown source={this.state.terms} />
+          <ReactMarkdown source={this.state.terms} plugins={[remarkGfm]}/>
         </div>
       )
     }

dashboard/origin-mlx/src/styles/Models.css

@@ -64,6 +64,21 @@ td>span.checked {
   color: #1ccdc7 !important;
 }
 
+.content tr {
+  border-top: 1px solid #c6cbd1;
+  background: #fff;
+}
+
+.content th,
+.content td {
+  padding: 6px 13px;
+  border: 1px solid #dfe2e5;
+}
+
+.content table tr:nth-child(2n) {
+  background: #f6f8fa;
+}
+
 /****************
  * Page Styling *
  ****************/