Hyperlinks in Plot.tree

[pwiner]

I'm trying to do something simple. I want to generate a tidy tree plot in which the text of each node is a hyperlink. I've tried various approaches with no success. Any ideas?

[Fil]

You can use the href option:

Plot.tree(flare, {
  path: "name",
  delimiter: ".",
  href: ({name}) => `https://github.com/prefuse/Flare/blob/master/flare/src/${name.replaceAll(".", "/")}.as`,
  target: "_blank"
})

(paste this into https://observablehq.com/@observablehq/plot-tree-tidy to test)

[pwiner]

Thank you! I have succeeded in implementing this. A further question: Is it possible to embed JavaScript in the link? Rather than simply seeking to the href, I'd like to invoke React useNavigate.

[Fil]

you said "something simple" :^)

You can definitely have javascript in links, this is HTML5:

  href: ({name}) => `javascript:console.log(${JSON.stringify(name)})`,

however I don't know anything about React. Good luck!

[pwiner]

Thank you again. Your proposal works well. Unfortunately, the javascript code cannot access methods within React's scope. I wanted to invoke React's useNavigate hook from the javascript and this was not possible.

In the end, I solved it by adding an event listener to plot's text elements - within the SVG - that should implement hyperlinking. My code works, but it's somewhat fragile and would break if the structure of the SVG were to change.

I'm new to Observable, so I have three questions: (1) should I be concerned about the fragility?, (2) is there an acknowledged way to bridge between DOM and React context?, and (3) is this the correct forum for such a discussion?

I'm happy to share my code.

[Fil]

There is no guarantee (see the license); however we try to be thoughtful about breaking changes and semantic versioning.

One way of handling communication between app components is by using the standard web API: the href javascript code can send a CustomEvent. A listener can be set anywhere, and do what it wants with the information passed through the event's detail.
https://observablehq.com/@recifs/plot-custom-event-href