Customize interaction behaviors

[pp2moonbird]

Requirement

So far, interactions with the graph are fixed. And I wish to add tooltip and customizations to interactions.

Interaction	Current design	Proposal
Initial display	Developer can control label with renderLabel property for each node
Hover		Show tooltip
Click	Expand/collapse and popup warning	Expand/collapse or show/hide label, remove popup
RightClick		Expand/collapse or show/hide label, remove popup

Development

Tooltip

react-d3-graph doesn't provide natvie support of tooltip, but react-d3-graph author suggested that we can achieve that with react-tooltip according to this issue.

Customization at python level

Don't know if we can customize at the python level. Seems developer need a react dev environment for these customizations.

[ChrisDelClea]

Hi there,

thanks for your good idea! I am not quite sure if I understood your requirement correctly. Could you perhaps explain it a little further. What do you mean by tooltip (a circle around the node with different options)? Could you perhaps give a design example of what it should look like?

In general graph-d3 offers the possibility for actions like OnClickNode or

  const onClickLink = function(source: any, target: any) {
        window.alert(`Clicked link between ${source} and ${target}`);
    };

That in for your case would probably be to adjust the function. If we want to implement it more generically, it would be great to write a wrapper that converts Python functions into Javascript and passes it as a function.

[pp2moonbird]

When user hover on the node, tooltip can provide additional info about that node.

You can check Altair's tooltip example

The reason I want tooltip is to hide all nodes' detail info and provide a clean overall picture. And tooltips also give user details on demand.

[ChrisDelClea]

I understand your request. A property like tooltip=['Name', 'Origin', 'Horsepower', 'Miles_per_Gallon'] would be nice, I agree with you!

[ChrisDelClea]

Hi Peng,

today i had some time to dig into possible solutions for the tooltip. Does https://github.com/wwayne/react-tooltip seem as a right solution to you? Are you familiar with javascript / react and could implement it?

Best regards Chris

[pp2moonbird]

Although I am an amateur in frontend development, I'll give a try. :)

[EvanZ]

I assume nothing has been done with this in the last couple of years. I'm just wondering if anyone knows if there is any current way to capture a click on a node. I'd love to be able to do something with that, like pop up some info in a sidebar. But I suppose Node would need to have some kind of callback behavior.

[jqdq]

I don't think anyone is currently looking into this, so I'm just announcing I will be looking into the possibility of adding callback behaviours to nodes and edges.

I've looked into how buttons work in Streamlit, but they seem to employ a method that is unavailable for component development (source, unless we figure out how to import the WidgetStateManager

Based on this, it should be possible to make Streamlit call a function by calling setComponentValue and then running the callback while handling the streamlit callback function. I will check out these options and get back to you.

[jqdq]

I had some problems but managed to make the callback to streamlit. Unfortunately, Streamlit keeps refreshing the whole page which makes everything disappear and I'm unsure of how to prevent that from happening.

[ChrisDelClea]

You are right @PogromcaPapai . SetValueComponent returns the callback to streamlit. In the latest version (0.0.42) of the streamlit-agraph, two callback functions are implemented. The first is with a single click on the node (the node ID is returned), double-clicking opens the URL (if any assigned to the title) in another tab. What is not currently possible (but would be nice) is also to expand/reduce nodes on some sort of click behavior.

I have also considered to pass custom python functions to the component, but I think that would be out of scope.

Currently I am in the process of rewriting the build and design function.

@EvanZ

[zsz00]

How is the progress so far ?

[thisisanameforsure]

@ChrisDelClea +1 on this. Many people asking for graph to not jump around, getting a callback for the positions of the nodes could be helpful in this.