Self-referential links dont work in markdown view

Self-referential links (jumping to another section inside the same document) are not working when displaying the Github READMEs for models and datasets in the MLX UI (using the npm package react-markdown)

i.e. https://ml-exchange.org/models/codenet-language-classification#deploy-on-red-hat-openshift

...

Deployment Options

Deploy from Container Registry

Deploy on Red Hat OpenShift

Deploy on Kubernetes

Run Locally
...

I believe @drewbutlerbb4 had tried to make these kinds of internal links work, by exploring different npm libraries for rendering GitHub style markdowns. But I don’t remember where that led.

Absolute links that go outside of ml-exchange.org should work.

https://remarkjs.github.io/react-markdown/

/assign @RRM123

Thanks @RRM123 for picking this one up

Hi Rithik,

I think I got the internal links working in our Markdown descriptions by adding the rehype-slug plugin to the ReactMarkdown component (in addition to the remark-gfm plugin to render Github-Flavored Markdown).

The rehype-slug plugin generates id tags for headings just like Github does when it renders headings in Github-flavored Markdown files.

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

import rehypeSlug from 'rehype-slug'
...
        <ReactMarkdown children={this.state.terms}
                       remarkPlugins={[remarkGfm]}
                       rehypePlugins={[rehypeSlug]}/>

package.json:

    ...
    "react-markdown": "^8.0.0",
    "rehype-slug": "^5.0.1",
    "remark-gfm": "^3.0.0",
    ....

Besides also changing OperatorDetail.tsx (source -> children), I had to change the paragraph and link renderer components in MetaCard.tsx according to the conversion table in the react-markdown version changelog

mlx/dashboard/origin-mlx/src/pages/MetaFeaturedPage/MetaCard.tsx

Lines 99 to 111 in f9c8bab

    
           <ReactMarkdown 
        
             source={description} renderers={{ 
        
               paragraph: ({children}) => 
        
                 <Typography 
        
                   variant="body1" 
        
                   component="p" 
        
                   className={classes.description} 
        
                 > 
        
                   {children} 
        
                 </Typography>,  
        
               link: ({children}) => children 
        
             }} 
        
           />

... change to:

              <ReactMarkdown
                children={description} components={{
                  p: ({children}) =>
                    <Typography
                      variant="body1"
                      component="p"
                      className={classes.description}
                    >
                      {children}
                    </Typography>,
                }}
              />

... but I am not sure why we are using a markdown renderer for displaying descriptions on the featured cards, as none of the descriptions we have in our asset YAMLs have markdown content with or without links. And for rich descriptions we use links to Markdown files. It appears we only change the font style here. Could you check if we can accomplish this in a simpler way without using the ReactMarkdown component in MetaCard.tsx?

@RRM123 -- did you get a chance to try out the MarkdownViewer changes?

	<ReactMarkdown
	source={description} renderers={{
	paragraph: ({children}) =>
	<Typography
	variant="body1"
	component="p"
	className={classes.description}
	>
	{children}
	</Typography>,
	link: ({children}) => children
	}}
	/>