feat(mermaidViz): add mermaidViz component #175

lyjeileen · 2024-05-28T23:09:41Z

Change

Add mermaidViz component
Add stories and tests for it

Screenshot

Light mode

Dark mode

Error

kaseyvee · 2024-05-29T17:34:03Z

src/components/types.ts

 export type VegaLiteData = VegaLiteFormat & Updates<VegaLiteFormat>

+export interface MermaidFormat extends DataFormat {
+  /** Follow mermaid's [documentation](https://mermaid.js.org/intro/) to provide a code string.  */


Suggested change

/** Follow mermaid's [documentation](https://mermaid.js.org/intro/) to provide a code string. */

/** Follow Mermaid's [documentation](https://mermaid.js.org/intro/) to provide a code string. */

kaseyvee · 2024-05-29T17:34:15Z

src/components/types.ts

+export interface MermaidFormat extends DataFormat {
+  /** Follow mermaid's [documentation](https://mermaid.js.org/intro/) to provide a code string.  */
+  code: string
+  /** Follow mermaid's [documentation](https://mermaid.js.org/config/setup/README.html) to provide a config object. It's used for additional customizations. */


Suggested change

/** Follow mermaid's [documentation](https://mermaid.js.org/config/setup/README.html) to provide a config object. It's used for additional customizations. */

/** Follow Mermaid's [documentation](https://mermaid.js.org/config/setup/README.html) to provide a config object. It's used for additional customizations. */

kaseyvee · 2024-05-29T17:39:31Z

src/components/visualization/mermaidViz/mermaidViz.stories.tsx

+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },


Suggested change

},

},

decorators: [

(Story: StoryFn) => {

return (

<div

style={{

width: 'clamp(250px, 70vw, 1000px)',

}}

>

<Story />

</div>

)

},

]

kaseyvee · 2024-05-29T17:40:30Z

src/components/visualization/mermaidViz/mermaidViz.stories.tsx

+const decorators = [
+  (Story: StoryFn) => {
+    return (
+      <div
+        style={{
+          width: 'clamp(250px, 70vw, 1000px)',
+        }}
+      >
+        <Story />
+      </div>
+    )
+  },
+]


Suggested change

const decorators = [

(Story: StoryFn) => {

return (

<div

style={{

width: 'clamp(250px, 70vw, 1000px)',

}}

>

<Story />

</div>

)

},

]

kaseyvee · 2024-05-29T17:41:17Z

src/components/visualization/mermaidViz/mermaidViz.stories.tsx

+  },
+]
+
+export const classDiagram = {


Suggested change

export const classDiagram = {

export const ClassDiagram = {

kaseyvee · 2024-05-29T17:41:43Z

src/components/visualization/mermaidViz/mermaidViz.stories.tsx

+    C -->|Two| E[iPhone]
+    C -->|Three| F[fa:fa-car Car]`,
+  },
+  decorators,


Suggested change

decorators,

kaseyvee · 2024-05-29T17:41:50Z

src/components/visualization/mermaidViz/mermaidViz.stories.tsx

+    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
+    PRODUCT ||--o{ ORDER-ITEM : "ordered in"`,
+  },
+  decorators,


Suggested change

decorators,

kaseyvee · 2024-05-29T17:41:58Z

src/components/visualization/mermaidViz/mermaidViz.stories.tsx

+  decorators,
+}
+
+export const error = {


Suggested change

export const error = {

export const Error = {

kaseyvee · 2024-05-29T17:42:04Z

src/components/visualization/mermaidViz/mermaidViz.stories.tsx

+  args: {
+    code: '',
+  },
+  decorators,


Suggested change

decorators,

kaseyvee · 2024-05-29T17:45:58Z

src/components/visualization/mermaidViz/mermaidViz.cy.tsx

+      )
+
+      cy.get(mermaidContainer).should('exist')
+      cy.get(mermaidContainer).contains('Christmas Shopping')


Should we do this to be explicit about assertions?

Suggested change

cy.get(mermaidContainer).contains('Christmas Shopping')

cy.get(mermaidContainer).should('contain', 'Christmas Shopping')

kaseyvee · 2024-05-29T18:18:00Z

I think the neutral theme mermaid.js provides would be a good option for minimally handling the theme.

lyjeileen · 2024-05-29T22:34:15Z

I think the neutral theme mermaid.js provides would be a good option for minimally handling the theme.

I was thinking using default for light theme and dark for dark theme. I changed default to neutral for light theme.

Shiti · 2024-05-30T15:18:52Z

src/components/visualization/mermaidViz/mermaidViz.tsx

+        ...props.config,
+      })
+
+      mermaid.contentLoaded()


I think we should be using mermaid.run instead. It allows more flexibility for the selectors and suppressing errors so that we can show custom error messages.

Refer - https://mermaid.js.org/config/usage.html#using-mermaid-run

Shiti · 2024-05-30T15:29:58Z

src/components/types.ts

+  /** Follow Mermaid's [documentation](https://mermaid.js.org/intro/) to provide a code string.  */
+  code: string


Suggested change

/** Follow Mermaid's [documentation](https://mermaid.js.org/intro/) to provide a code string. */

code: string

/** Diagram definition following [Mermaid's syntax](https://mermaid.js.org/intro/syntax-reference.html#syntax-structure). The use of [these](https://mermaid.js.org/intro/syntax-reference.html#diagram-breaking) words or symbols can break diagrams. */

diagram: string

Shiti · 2024-05-30T15:34:44Z

src/components/types.ts

+export interface MermaidFormat extends DataFormat {
+  /** Follow Mermaid's [documentation](https://mermaid.js.org/intro/) to provide a code string.  */
+  code: string
+  /** Follow Mermaid's [documentation](https://mermaid.js.org/config/setup/README.html) to provide a config object. It's used for additional customizations. */


Suggested change

/** Follow Mermaid's [documentation](https://mermaid.js.org/config/setup/README.html) to provide a config object. It's used for additional customizations. */

/** Configuration for altering and customizing Mermaid Diagrams. Refer [Mermaid docs](https://mermaid.js.org/config/schema-docs/config.html) for details. */

Shiti · 2024-05-30T15:47:52Z

src/components/visualization/mermaidViz/mermaidViz.tsx

+
+/** The `MermaidViz` component leverages [Mermaid.js](https://mermaid.js.org/) to create dynamic and interactive diagrams, including flowcharts, sequence diagrams, class diagrams, and more. It is ideal for visualizing complex data and processes in a clear and structured manner. */
+function MermaidViz(props: MermaidData) {
+  const chartRef = useRef(null)


Please update the name for the variable and also specify the type of useRef

Shiti · 2024-05-30T15:50:14Z

src/components/visualization/mermaidViz/mermaidViz.tsx

+    <Stack
+      direction="column"
+      className="rustic-mermaid-container"
+      data-cy="mermaid-container"
+    >


any particular reason for using Stack instead of a simple div ?

I wanted to avoid adding display: flex; flex-direction: column by using Stack.

In a div, elements are rendered one below the other. why do we need flex ?

I want mermaid div takes up the remaining space of its parent container. I used flex:1 in mermaid div and in order to make it work, its parent container needs to have display: flex

Shiti · 2024-05-30T15:51:47Z

src/components/visualization/mermaidViz/mermaidViz.css

+.rustic-mermaid-container div:last-of-type {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.rustic-mermaid-container div:last-of-type svg {
+  height: 100%;
+  width: 100%;
+}


we can use a custom class name. Also, its not clear why we are setting min-height to 0

I will use a custom className. For min-height: 0, I can't make the diagram's height responsive without it.

Shiti · 2024-05-31T16:41:31Z

src/components/visualization/mermaidViz/mermaidViz.tsx

+          )
+        })
+    }
+  }, [mermaidTheme])


I think we should make mermaidTheme a local variable inside useEffect and set rusticTheme as dependency

Suggested change

}, [mermaidTheme])

}, [rusticTheme])

I have noticed a similar issue with other components as well, some of them do not reload on theme change.

Using rusticTheme doesn't fix the theme toggle issue.

yeah thats also a constant.

Shiti · 2024-05-31T16:44:33Z

src/components/visualization/mermaidViz/mermaidViz.tsx

+    if (mermaidRef.current) {
+      mermaid.initialize({
+        theme: mermaidTheme,
+        themeVariables: { fontFamily: 'Inter' },


Please dont hard-code font.

Shiti · 2024-05-31T22:58:53Z

src/components/visualization/mermaidViz/mermaidViz.tsx

+        .catch(() => {
+          setIsProcessed(true)
+          setErrorMessage(
+            'An error occurred while rendering the diagram. Please check the syntax.'


Suggested change

'An error occurred while rendering the diagram. Please check the syntax.'

'Failed to render the diagram.'

Shiti · 2024-05-31T23:00:56Z

src/components/visualization/mermaidViz/mermaidViz.tsx

+
+      mermaid
+        .run({
+          querySelector: '.rustic-mermaid',


This query selector is too generic and will apply to all the elements on the page with this class.

feat(mermaidViz): add mermaidViz component

bf70155

lyjeileen force-pushed the mermaid branch from fb8bf53 to bf70155 Compare May 28, 2024 23:53

kaseyvee reviewed May 29, 2024

View reviewed changes

fix: update theme and update based on feedback

efb8abd

lyjeileen marked this pull request as ready for review May 29, 2024 23:06

lyjeileen requested review from Shiti, florenceloi and milliondreams as code owners May 29, 2024 23:06

Shiti requested changes May 30, 2024

View reviewed changes

fix(mermaidViz): update based on comments

90dd2a8

lyjeileen force-pushed the mermaid branch from 727334e to 90dd2a8 Compare May 30, 2024 20:55

Shiti reviewed May 31, 2024

View reviewed changes

fix(mermaidViz): update based on suggestions

45258e6

Shiti requested changes May 31, 2024

View reviewed changes

lyjeileen added 2 commits May 31, 2024 17:31

fix: update based on suggestions

a74cac8

fix: update error handling logic

0748a47

Shiti approved these changes Jun 2, 2024

View reviewed changes

Shiti requested a review from kaseyvee June 2, 2024 03:07

Shiti merged commit 816122d into rustic-ai:main Jun 3, 2024

	/** Follow mermaid's [documentation](https://mermaid.js.org/intro/) to provide a code string. */
	/** Follow Mermaid's [documentation](https://mermaid.js.org/intro/) to provide a code string. */

	cy.get(mermaidContainer).contains('Christmas Shopping')
	cy.get(mermaidContainer).should('contain', 'Christmas Shopping')

		/** Follow Mermaid's [documentation](https://mermaid.js.org/intro/) to provide a code string. */
		code: string

	/** Follow Mermaid's [documentation](https://mermaid.js.org/config/setup/README.html) to provide a config object. It's used for additional customizations. */
	/** Configuration for altering and customizing Mermaid Diagrams. Refer [Mermaid docs](https://mermaid.js.org/config/schema-docs/config.html) for details. */

	'An error occurred while rendering the diagram. Please check the syntax.'
	'Failed to render the diagram.'

Uh oh!

feat(mermaidViz): add mermaidViz component #175

feat(mermaidViz): add mermaidViz component #175

Uh oh!

Conversation

lyjeileen commented May 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Change

Screenshot

Light mode

Dark mode

Error

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kaseyvee commented May 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lyjeileen commented May 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Shiti May 31, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

lyjeileen commented May 28, 2024 •

edited

Loading

kaseyvee commented May 29, 2024 •

edited

Loading

lyjeileen commented May 29, 2024 •

edited

Loading

Shiti May 31, 2024 •

edited

Loading