Pass in custom config for mermaid component to allow callback / click support

[cramatt]

It's possible in mermaid to define callback to enable rich user interaction with charts. This needs a config option passed in when mermaid is first initialized / run. NiceGui does not currently support passing in this (or any custom config) here.

Mermaid line that would need to change: await mermaid.run({ nodes: [queue.shift()] });

This line would need to pass securityLevel: loose option.

Security level config docs here.

Note it's possible to override most other config in in the diagram syntax alone, but no the security settings.

[rodja]

Sounds cool. Would you like to create a pull request?

[cramatt]

I can give it a try this week - I'll take a look at the contrib docs and see if I can figure it out from there.

[kyloe]

Looks like this didnt get done - I've done a change (simple) and written a test. Should I submit a pull reuqest for this? (I'm new to this game)

Also - Ive written a 'proof of concept' set of classaes that support mermaid diagram creation in this way:

def main_page() -> None:

    m=ui.mermaid('')
    m.run_method('initialize')


    with Diagram(current_type='flowchart',direction='TD') as diag:

        @ui.refreshable
        def make_panel(info_string):
            ui.label(info_string)

        def my_function():
             ui.notify("This was triggered")
             
        a = Node(text="My Node", identifier="A",shape='circle',on_click=lambda: make_panel.refresh("This data relates to node A"))
        b = Node(text="Another Node", identifier="B",shape='stadium',on_click=lambda: make_panel.refresh("This data relates to node B and is much longer - to the point hwere it becomes dull"))
        c = Node(text="Another Node", identifier="C",shape='rounded_rectangle',on_click=my_function)
        d = Node(text="The End", identifier="D",shape='circle')
        Edge(src=a,tgt=b, thickness='dotted', length=1,label="Oooops",head='arrow')
        Edge(src=a,tgt=c, thickness='thin', length=3,head='circle',tail='circle',label=None)
        Edge(src=c,tgt=d, thickness='thick', label="Alt", head='point')
        Edge(src=b,tgt=d, head=None,thickness='invisible',length=3)


        with ui.row().style('width: 60%'):
            m.run_method('update',str(diag))
            make_panel("Info goes here")


ui.run(storage_secret = 'This is a very secret thing')

Which supports 'round trip' clicking (i.e. define a python function that is triggered when a mermaid node is clicked.)

Is that something that would be of interest here?

[kyloe]

I've popped in a tiny PR that enables this

[kyloe]

It looks like my first PR was quite naive and flawed. On further investigation things are more complex than they at first seemed.

The mermaid.initialize() function can only change security levels before the first render.
The first render is triggered by the __init__() of the ContentElement class (from which the Mermaid class is derived)
The __init__() of the ContentElement passes only one parameter to the _handle_content_change() method.

So:

In order to insert the initialize before the first render, it appears that another parameter needs to be passed to the _handle_content_change() method - which suggests that either the ContentElement will require amendment or that Mermaid needs to be derived from another class of Element.

The first option "feels" incorrect - the ContentElement does what it does...
If the second element is the solution - I'd be grateful for any pointers

Third option: I'm on completely on the wrong track...

Any offers of help/info will be gratefully exploited.

:)

Ian B.

[falkoschindler]

Hm, I don't quite understand. The Vue component is only rendered after the whole Python object has been instantiated, added to its parent container, converted into JSON and sent to the client. Independent of the class hierarchy in Python, the Vue component is only mounted once and I think we can call initialize() within mounted() { ... }. And the config dictionary passed to initialize() could be configured via a new parameter for ui.mermaid and a corresponding prop.

[kyloe]

Hi Falko It's probably me that's not understanding the architecture of nicegui - hence my description doesn't make sense! I clearly don't understand the interface between mermaid,py & mermaid.js correctly. My issue is that we need to call initialize before any content is rendered. The content render is triggered in the __init__ of ContentElement with a call to handle_content_change() ContentElement only passes 'content' to the _handle_content_change() function. Hence it appears to me that we cannot pass a config dict as well. However - it may be that I am missing the point & this;

> the config dictionary passed to initialize() could be configured via a

new parameter for ui.mermaid and a corresponding prop. might be the point that I am missing ... I'll have a look at this and see if I can get my head around it ... rgds Ian B

…

On Sun, 2 Jun 2024 at 15:06, Falko Schindler ***@***.***> wrote: Hm, I don't quite understand. The Vue component is only rendered after the whole Python object has been instantiated, added to its parent container, converted into JSON and sent to the client. Independent of the class hierarchy in Python, the Vue component is only mounted once and I think we can call initialize() within mounted() { ... }. And the config dictionary passed to initialize() could be configured via a new parameter for ui.mermaid and a corresponding prop. — Reply to this email directly, view it on GitHub <#1906 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABULB5MDSMEI6E6LTGGUO43ZFMRFJAVCNFSM6AAAAAA6TKZFMOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TMMZYGM4TG> . You are receiving this because you commented.Message ID: ***@***.***>

[kyloe]

OK - After 3 more coffees, I think I see how the whole thing hangs together. I've created a (hopefully) much better PR - with some tests that ... test! Listening out for feedback ... Ian B

…

On Sun, 2 Jun 2024 at 15:52, Ian Bottomley ***@***.***> wrote: Hi Falko It's probably me that's not understanding the architecture of nicegui - hence my description doesn't make sense! I clearly don't understand the interface between mermaid,py & mermaid.js correctly. My issue is that we need to call initialize before any content is rendered. The content render is triggered in the __init__ of ContentElement with a call to handle_content_change() ContentElement only passes 'content' to the _handle_content_change() function. Hence it appears to me that we cannot pass a config dict as well. However - it may be that I am missing the point & this; >> the config dictionary passed to initialize() could be configured via a new parameter for ui.mermaid and a corresponding prop. might be the point that I am missing ... I'll have a look at this and see if I can get my head around it ... rgds Ian B On Sun, 2 Jun 2024 at 15:06, Falko Schindler ***@***.***> wrote: > Hm, I don't quite understand. The Vue component is only rendered after > the whole Python object has been instantiated, added to its parent > container, converted into JSON and sent to the client. Independent of the > class hierarchy in Python, the Vue component is only mounted once and I > think we can call initialize() within mounted() { ... }. And the config > dictionary passed to initialize() could be configured via a new > parameter for ui.mermaid and a corresponding prop. > > — > Reply to this email directly, view it on GitHub > <#1906 (reply in thread)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/ABULB5MDSMEI6E6LTGGUO43ZFMRFJAVCNFSM6AAAAAA6TKZFMOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TMMZYGM4TG> > . > You are receiving this because you commented.Message ID: > ***@***.***> >