Timeline Diagram

[ashishjain0512]

📑 Summary

Added a fresh new Mermaid diagram for visualizing the timeline and its events.

Resolves #3363

📏 Design Decisions

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added unit/e2e tests (if appropriate)
• 📓 have added documentation (if appropriate)
• [] 🔖 targeted develop branch
• Since develop is reserved for v10.0, creating pull result towards release 9.4.0

[sidharthv96]

Overall looks good to me. We could move it into mermaid as a lazy diagram (like flowchart-v3), so it has easier adoption (no need for another package).

Can you fix the lint issues?

[sidharthv96]

This looks like a bug.

[ashishjain0512]

Not really sure about it. I think it came in as part of down pull from develop

[sidharthv96]

This shouldn't be here, it's not in Develop.
You can safely delete this.

[sidharthv96]

Timeline spec seems to be failing. I've fixed the old E2E error with mermaid in develop, you can sync to get the fix.

Thanks for the review. Made most of the changes, and other relevant updates.

[sidharthv96]

@ashishjain0512, can you sync with develop and push, CI didn't run.

[sidharthv96]

This shouldn't be here, it's not in Develop.
You can safely delete this.

[nynevi]

@sidharthv96 hello, could you please include this as part of 9.4.0 release if possible? I am guessing 10.0 might take time and people wanting to use this feature could do that by installing "next" tag on npm.

Alternatively if 10.0 could also be tagged as maybe "canary" or something? We use mermaid in Docusaurus and our documentation is also not yet stable and would not mind breaking changes if we could install 10.0

[sidharthv96]

@nynevi, it should already be there in 9.4.0-rc.2 :)

[stowdaniel]

@sidharthv96 hello - the timelines look fantastic: do you know if / when they'll be available to use in GitHub readme.mds (I guess waiting for GitHub to implement 9.4.0-rc.2 ?) or in the interactive mermaid tool? Thank you very much

[AddictArts]

As released in 9.4 it has the following issue @sidharthv96 @knsv

        
Uncaught Error: Diagram is a promise. Use renderAsync.
    at Object.render (mermaid.95cd9c8e.js?15a8:28360:1)
    at eval (index.js?6b17:57:1)
    at mountMemo (react-dom.development.js?ac89:15846:1)
    at Object.useMemo (react-dom.development.js?ac89:16219:1)
    at useMemo (react.development.js?1b7e:1532:1)
    at useMermaidSvg (index.js?6b17:26:1)
    at MermaidDiagram (index.js?85a4:6:1)
    at renderWithHooks (react-dom.development.js?ac89:14985:1)
    at mountIndeterminateComponent (react-dom.development.js?ac89:17811:1)
    at beginWork (react-dom.development.js?ac89:19049:1)

[sidharthv96]

Please use renderAsync to use timeline diagram.

[AddictArts]

Please use renderAsync to use timeline diagram.

@sidharthv96 Thanks I did read that; However, I am just using markdown. No JS, so it seems broken, right?

[sidharthv96]

That depends on how you're using it. The developer of the tool will have to update their code to use renderAsync.

[AddictArts]

@sidharthv96 fair enough and thanks for helping and engaging. However mermaid-cli doesn't like it, so it seems broken, right?

Error: Evaluation failed: Error: No diagram type detected for text: timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter
    at pptr://__puppeteer_evaluation_script__:21:17
    at ExecutionContext._ExecutionContext_evaluate (file:///AppData/Roaming/npm/node_modules/@mermaid-js/mermaid-cli/node_modules/puppeteer-core/lib/esm/puppeteer/common/ExecutionContext.js:251:15)
...
at async renderMermaid (file:///AppData/Roaming/npm/node_modules/@mermaid-js/mermaid-cli/src/index.js:215:22)

[AddictArts]

@sidharthv96 it would seem that at least mermaid-cli should work. It also seems to use async.