Introduce Mermaid on_node_click using a no-markdown solution

[thetableman]

Motivation

This PR introduces another alternative way of adding node click events to Mermaid diagrams without use of the global emitEvent.

The method was first raised in #4845 and demonstrated in #4862. This implementation differs to the previous working demonstration by ensuring the rendering queue is included as per #4852 and #4853.

Implementation

This approach bypasses Mermaid's own click event methods - the adding of click <nodeName> call <func(params)> to the markdown - by attaching a handler directing to the node DOM elements. The method utilizes querySelectorAll to identify the nodes within each diagram based on html tag and class names.

Progress

• I chose a meaningful title that completes the sentence: "If applied, this PR will..."
• The implementation is complete.
• Pytests have been added (or are not necessary).
• Documentation has been added (or is not necessary).

The Pros, Cons, and Inbetweens

Pros

• No requirement for declaring click events in Mermaid
• No confusion about Mermaid's click syntax
• No placeholder handlers in markdown
• No unique event handlers
• Returns consistent data, both within itself (each trigger has the same arguments) and as expected from a NiceGUI element
• Returns node name, node html id, and node text
• Adds protection against double-triggers by preventing multiple event handlers being attached
• Works with multiple diagrams on the same page
• Works where multiple diagrams share similar node names
• Doesn't stop or prevent traditional Mermaid click events if defined in the markdown
• Adds the ability for further functionality through node html id

Cons

• Relies on finding g.node with a query selector, leading to potential breaking changes from Mermaid (unlikely)
• Relies on extracting node name from its html id, leading to potential breaking changes from Mermaid (unlikely)
• Currently only works with diagrams with g.node like 'graph', 'state', and 'class' (though these are also the most popular diagram types)

Inbetweens

• Ability to add additional query selectors to support other diagram types that even Mermaid doesn't support click events for
• Adds click events in a manner that doesn't match Mermaid documentation

The Extra Functionality

Mermaid click events still work

Because no changes are made to the markdown or the Mermaid click definitions, they still work with existing methods and as per the Mermaid documentation.

from nicegui import ui

ui.mermaid('''
    graph LR;
        A --> B;
        click A alert
    ''', on_node_click=lambda e: ui.notify(e))

ui.run()

You can reference the nodes in the DOM directly

Because we have the node html id (and not just the node name) we can reference it directly and make changes.

from nicegui import ui

node_styles = {}

def style_node(e):
    node_id = e.args['nodeId']
    node_el = ui.query(f'#{node_id} rect')
    
    if node_id not in node_styles:
        node_styles[node_id] = True
    else:
        node_styles[node_id] = not node_styles[node_id]
    
    if node_styles[node_id]:
        node_el.style(add='fill: yellow;')
    else:
        node_el.style(remove='fill: yellow;')

    e.args['state'] = node_styles[node_id]
    ui.notify(e)

ui.mermaid('''
    graph LR;
        A --> B;
    ''', on_node_click=lambda e: style_node(e))
    
ui.run()