Juggl (Out now! 1.0.1): A completely interactive, stylable and expandable graph view plugin!

Great, I think this makes it possible to visualize the self-organization and order of notes. It is worth exploring.
Thank you for your work :+1:

1 Like

hi, guys! Do you know how to open Style Pane in Obsidian Mobile? I can’t find the option.

I hope this helps. Check out the right sidebar, then click back (<- Backlinks for …)

2 Likes

Hi Emile.
Thanks for the great plugin and your appreciation for my tweet!
Here is my graph.css again.
(It is still in “style.css" in your juggl help)
I am Japanese and your snippet could not fit my text into a rectangle.
So I added “text-overflow-wrap”.
I’d appreciate it if you would add it to the help for those of us using CJK.

Also, I have configured the text around where the link appears so that it only shows up when hovering over it.

.note {
shape: rectangle;
width: 40px;
height: 20px;
text-valign: center;
text-max-width: 35px;
text-overflow-wrap: anywhere;
}
edge.inline.hover {
label:data(context);
text-wrap: wrap;
text-max-width: 250px;
text-overflow-wrap: anywhere;
}

2 Likes

Hi Kazdon,

Thank you for noticing the error in the help! And that’s a fantastic snippet. I added it to the help vault. I especially like the .hover selection! I think I’ll use that myself :slight_smile:
Tip for people who want to use that: Enable ‘Hover on Edges’ in the settings.

2 Likes

Thank you, Emile! It helps a lot!

Hey Emile, Thanks for the great plugin. I am quite new to obsidian (downloaded it last night) and I was recommended your plugin. What I am essentially looking for is a way to use only images in the graph view, just like you have boxes, bubbles, and callouts here. What I am imagining, is a graph view with many images and synapse-like links that connect them. I was wondering if I would be able to achieve that with your plugin. Let me know… Thanks!

1 Like

I think you can find it on its documentation https://juggl.io/

Hi @Emile, is there a way to export the graph as a picture, ideally as SVG file?

2 Likes

Hi! It looks like you can only export to .png and .jpeg with this library, not .svg. It’s not included in the plugin right now, but it’s not hard. You can also just make a screenshot, of course…

1 Like

OK, thanks for the reply!
Yes a screenshot would work but since the graphs may be quite busy it would be nice to be able to zoom in.

Is this plugin LOCAL ONLY or is it something that I could somehow showcase in my published notes on the web?

Is it within the realm of possibility to route the code for web viewing purposes??

1 Like

Hi there, this is really cool! Before I spend a lot of time, I was wondering if anyone would be kind enough to answer a simple question. Can you draw arrows on the links? I have a very simple parent child use case. I understand this plugin supports link types, but it wasn’t clear if it allows to draw arrows. Visually, it would be amazing for my use case to have arrows on the links. That’s all I really care about. Is that possible?

1 Like

Good question! Currently, it can unfortunately only be used locally, although with some hacking around you should be able to import js.cytoscape.com into your webpage and load a saved graph (see Export to other programs) from there to show. Feel free to contact me if you need help :slight_smile: )

2 Likes

Yes, that’s definitely possible! You even have a rich amount of arrowheads to choose from (see this page)

2 Likes

Hi! Can we export the graph to JPG, PNG or even SVG? Will be awesome.

1 Like

Is it possible @Emile to filter out certain Link Types in Juggl?

For example when you have a note with Link Types consumes and delivers and you only want to show the ones with consumes?

Using CSS I’m able to style them with classes .type-consumes and .type-delivers, but filtering seems to be only possible for nodes, not for edges.

Can this be done?

1 Like

Sorry for the late response! You can indeed use CSS for this, if I’m not mistaken. Just set the property display: none. However, you cannot currently use the filter bar for this.

1 Like

Hello @Emile. Thanks for the awesome Juggl plugin! I was wondering if there was an easy way to support writing Juggl typed links in the style of inline Dataview fields, such that - is_a:: Creature would show is_a as both a labeled link on Juggl and as a Dataview field.

I tried to do see if this can be done using css in Juggl’s graph.css file, but I only got it to work partially. As you will see below, the merged contexts of the links got in the way of allowing me to individually represent multiple Dataview-type links between two notes.

In the graph.css file, I wrote the following css:

/*If the context contains 'parent_of', label the link as "parent of" */
edge[context *= 'parent_of'] {
    label: parent of;
}

/*If the context contains 'caretaker_of', label the link as "caretaker of" */
edge[context *= 'caretaker_of']{
    label: caretaker of;
}

/*The css below is simply for styling purposes, 
   but the most important line is 
   curve-style: bezier;*/
edge{
    font-size: 7.5px;
    curve-style: bezier; /*important to better visualize separate juggl links*/
    width: 2px;
    line-opacity: 100%;
    line-color: lightblue;
    text-outline-width: 2px;
    text-outline-color: lightgrey;
    color: black;
    arrow-scale: 1.5;
    target-arrow-color: lightblue;
    text-rotation: autorotate;
}

node {
   font-size: 8vw;
   font-weight: bold;
   color: black;
   text-outline-color: darkgrey;
   text-outline-opacity: 1;
   text-outline-width: 2px;
   background-color: darkgrey;
   background-opacity: 1;

   text-valign: center;
   text-halign: center;

   shape: roundrectangle;
   width: 45px;  
   height: 20px;   
   text-max-width: 38px;
}

I also wrote the following note titled [[Father]], with the resulting Juggl local graph view shown below it:

- parent_of:: [[Me]]
- caretaker_of:: [[Me]]
- juggl_relation [[Me]]

Juggl Local Graph

As you can see above, only the caretaker_of Dataview-style relationship is displayed in Juggl. I was hoping for both the parent_of and caretaker_of relationships to be shown. However, because the context of the link between [[Father]] and [[Me]] is merged so that it includes BOTH parent_of and caretaker_of, and because of the nature of CSS (with the last line of CSS being the most specific), only one relationship or the other will appear depending on the order you’ve written the two relationships in the CSS file. This merged context of the [[Me]] link is shown below:
Juggl Link Context

I was hoping there was a setting or some other way to decide not to automatically merge the different contexts of the links between two notes when they don’t follow the traditional Juggl link style, especially if they still have the appropriate prefix (whether it is the default bullet point - prefix or user-defined). This would ultimately allow for Juggl links that are Dataview-field style as well.

Of course, even better would be if the extra css isn’t required for automatic recognition and representation of Dataview-field style links in the Juggl graph view. But I think this is a workaround for now that may not require as much effort to implement in Javascript, hopefully. I think this will be really powerful for users looking to couple Dataview with Juggl.

1 Like

Wow, I’m impressed by the workaround you found here… That’s pretty incredible, but yeah I suppose that kind of works!

Making juggl work for Dataview-style links (or in particular, the style from Breadcrumbs which uses dataview) is most certainly on the radar and something I’ve been talking with @SkepticMystic about how to handle this. Feel free to add your support in this issue Typed links list syntax with dataview inline properties support · Issue #66 · HEmile/juggl · GitHub