Giter Club home page Giter Club logo

Comments (6)

paulbrodersen avatar paulbrodersen commented on May 21, 2024 1

Hi, thanks for raising the issue, that is an interesting use case.

As you may know, netgraph uses matplotlib for drawing all visual elements, including text objects. However, matplotlib doesn't really do hyperlinks, as the imagined end-point is an image (and images are not text files, and hence don't support hyperlinks). Matplotlib does support hyperlinks when using the SVG backend (as SVG files are text files, ultimately) but the SVG backend is not interactive. As netgraph makes ample use of matplotlib's interactive events, netgraph cannot support matplotlib hyperlinks.

However, it is fairly straightforward to emulate hyperlinks using matplotlib pick events in combination with the (python built-in) webbrowser module. Below some examples.

#!/usr/bin/env python
import webbrowser
import matplotlib.pyplot as plt

from netgraph import InteractiveGraph

fig, ax = plt.subplots()

# Enable picking.
def on_pick(event):
    if isinstance(event.artist, plt.Text):
        webbrowser.open(event.artist.get_text())

fig.canvas.mpl_connect('pick_event', on_pick)

# Define some links.
node_labels = {
    0 : "https://stackoverflow.com/a/54121221/2912349",
    1 : "https://stackoverflow.com/a/69682368/2912349"
}

annotations = {(0, 1) : "https://matplotlib.org/stable/gallery/event_handling/pick_event_demo.html"}

# Create a graph.
g = InteractiveGraph([(0, 1)], node_labels=node_labels, node_label_offset=0.05, annotations=annotations, ax=ax)

# Enable pick events on text objects.
# By (matplotlib) default, pick events are disabled.
for text_object in g.node_label_artists.values():
    text_object.set_picker(True)

# Annotation text objects are created on-the-fly.
# We hence have to monkkeypatch the InteractiveGraph instance to enable the picker,
# whenever an annotation is created.

original_add_annotation = g._add_annotation

def new_add_annotation(artist, *args, **kwargs):
    original_add_annotation(artist, *args, **kwargs)
    text_object = g.artist_to_text_object[artist]
    text_object.set_picker(True)

g._add_annotation = new_add_annotation

plt.show()

################################################################################
# Naturally, hyperlinks need not be text objects.

from netgraph._artists import NodeArtist, EdgeArtist

fig, ax = plt.subplots()

def on_pick(event):
    if isinstance(event.artist, (NodeArtist, EdgeArtist)):
        if hasattr(event.artist, 'url'):
            webbrowser.open(event.artist.url)

fig.canvas.mpl_connect('pick_event', on_pick)

g = InteractiveGraph([(0, 1)], node_labels=True, ax=ax)

g.node_artists[0].set_picker(True)
g.node_artists[0].url = "www.google.com"

g.edge_artists[(0, 1)].set_picker(10) # increase pick radius for thin edges
g.edge_artists[(0, 1)].url = "www.stackoverflow.com"

plt.show()

I hope that addresses your issue. Make sure to install the latest version as I just fixed a bug that occurred when annotating edges (or change the edge annotation to a node annotation in the example above).

from netgraph.

a-arbabian avatar a-arbabian commented on May 21, 2024 1

Seemed to be an issue with webbrowser module, got it working now thanks!

from netgraph.

paulbrodersen avatar paulbrodersen commented on May 21, 2024

I have added some simple examples to the documentation here. I will close the issue for now, but feel free to re-open it if you have any further concerns.

from netgraph.

a-arbabian avatar a-arbabian commented on May 21, 2024

Wow thanks for the excellent write up! Will try this next week 👍

from netgraph.

a-arbabian avatar a-arbabian commented on May 21, 2024

@paulbrodersen
I was able to get everything working as far as having annotations that hyperlink to the url that is the text of the annotation, like below:
annotations = {0: dict(s="www.google.com")}

But what about an annotation with text equal to some info about the node, and another attribute url that is used for the hyperlink, sort of like this:
annotations = {0: dict(s="ANNOTATION TEXT", url='www.google.com')}

I tried your snippet under "Naturally, hyperlinks need not be text objects." section but the annotations don't hyperlink out.
I changed the on_pick() method to pass the event.artist.url to webbrowser.open() with no luck. Does anything else need to be changed? How can I (or do I need to) enable picking on the 'url' attribute of the annotation?

from netgraph.

paulbrodersen avatar paulbrodersen commented on May 21, 2024

You probably forgot to enable the picker?

import webbrowser
import matplotlib.pyplot as plt

from netgraph import InteractiveGraph

def on_pick(event):
    webbrowser.open(event.artist.get_url())

fig, ax = plt.subplots()
g = InteractiveGraph([(0, 1)], node_labels=True, annotations={0 : dict(s='lorem ipsum', url='www.google.com', picker=True)})
fig.canvas.mpl_connect('pick_event', on_pick)
plt.show()

from netgraph.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.