Mermaid chart integration

[cheeseonamonkey]

Implementing rendering of mermaid charts.

• panning and mouse wheel zooming

---

---

• examples:

  • 

  • 

  • 

• pretty clean rendering in realtime:

• Usually ChatGPT knows to respond in mermaid syntax (although it does sometimes hallucinate about mermaids 🧜). Lowering the temperature helps, and it sometimes needs very specific instructions too.

  Mermaid is even ubiquitous enough that Github natively supports it:

  pie title Causes of Death Worldwide
  "Cardiovascular diseases" : 31
  "Cancer" : 17
  "Respiratory diseases" : 7
  "Lower respiratory infections" : 5
  "Dementia" : 7
  "Digestive diseases" : 3
  "Neonatal disorders" : 2
  "Diabetes" : 3
  "Kidney disease" : 2
  "Liver diseases" : 2
  "Other causes" : 21

[jackschedel]

wow this is so cool! working on fixing the deps for you.

[jackschedel]

need to run yarn add mermaid and commit to fix the build error.

However, even when doing this, I am getting a weird Electron-only error that I don't get with the web version. None of the app loads, and it throws the error:

Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'prototype')

jf = function(e, t, n) {
    e.prototype = t.prototype = n,
    n.constructor = e
}

Edit: might not have been electron only, maybe it's any chats with code blocks and it just happened that my electron was open to one. Speculation while in bed here, will test tomorrow.

[jackschedel]

@cheeseonamonkey leaving you to work on fixing this error in the Electron version. I tried using SourceMaps to find what TS file/line is causing this with no luck. That might mean its somewhere within a library call and we somehow need to get the stack trace. Lmk if you have this issue on the Electron App too or if its some edge case that happens to show up on my loaded chats.

[cheeseonamonkey]

I hadn't tested on the electron app - I'll see what I can do!

On Tue, Aug 22, 2023, 2:44 PM Jack Schedel @.***> wrote:

@cheeseonamonkey https://github.com/cheeseonamonkey leaving you to work on fixing this Electron error. I tried using SourceMaps to find what TS file/line is causing this with no luck. That might mean its somewhere within a library call and we somehow need to get the stack trace. Lmk if you have this issue on the Electron App too or if its some edge case that happens to show up on my loaded chats.

— Reply to this email directly, view it on GitHub https://github.com/jackschedel/KoalaClient/pull/79#issuecomment-1688906852, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANAHG3GSJGPSBC5SQGI4ENTXWUKZLANCNFSM6AAAAAA3XXS7NI . You are receiving this because you were mentioned.Message ID: @.***>

[jackschedel]

@cheeseonamonkey package-lock.json shouldn't need to be in gitignore since we're using yarn for dependency installs, which doesn't generate package-lock.json but rather yarn.lock. Your package-lock.json is probably a remnant of accidentally manually running npm install. You can safely delete your local package-lock.json and keep it out of the gitignore.

Note that you still need to do a commit with yarn add mermaid to at least get the checks passing (the Electron issue is during init at runtime tho, so just bc the checks pass doesn't mean it's fixed)

[cheeseonamonkey]

jf = function(e, t, n) {
    e.prototype = t.prototype = n,
    n.constructor = e
}

I got this at first, too - but I got electron building successfully by running npm run electron (after building)?

I think I've cleared it up maybe?

[cheeseonamonkey]

I think all of the conflicts can use incoming changes also.

[jackschedel]

doing npm run electron is basically just running npm run dev inside of an electron window rather than a browser. I just tried doing npm run build and opening the built index.html file (disable CORS in dist directory in browser launch flags https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome?noredirect=1&lq=1) and got the same error. This means that the issue isn't just Electron, it's any static build (i.e. it would happen if deployed to the website too).

[jackschedel]

@cheeseonamonkey converting to a draft, mark as ready for review once you fix the static build issue

[cheeseonamonkey]

@jackschedel

(disable CORS in dist directory in browser launch flags)

That is a super useful trick! :sweat_smile:

But I think I've corrected the issue by downgrading the Mermaid.js version to ~9.4 (from ^10.2) to fix some package compatibility issue.

(I think with the compatibility conflict was with React, although I'm not entirely sure).

[jackschedel]

Thanks for fixing this, working now. I'll try to work on the merge conflicts tn. Classes have started back up for me so expect slower turnaround times xD