[FR] Backlinks inside canvas using edges

[Pixel3ro]

Scrintal , another Canvas based PKM tool uses Visual-Thinking ability of the Canvas to let their users form multiple-complex connections intuitively. In the background these connections are automatically translated as Backlinks between notes, allowing it to be reused in other places. It's effortless, and a pure bliss to use compared to Obsidian.

In contrast, an Obsidian user has to type in the double bracket to toggle backlinking, type in the search bar, skim through a long list of search results to find the one they are looking for. For making multiple links they repeat the process all over again. Extremely taxing effort and time.
Backlinking and GraphView is what made Obsidian gain popularity and find it's userbase since they were the first to implement this feature, and they even inspired many other PKM tools to add GraphView. And yet, another Core feature like Canvas is not integrated with them which is very annoying. Right now the only way to utilize both is by manually adding backlinks to recreate the Canvas Connections.
I cannot emphasize the world of difference it makes between Scrintal and Obsidian in this regard. Obsidian NEEDS the backlinking feature of Scrintal's Canvas. Once it's in place it will be even more powerful than Scrintal, since these visual-connections are now accessible globally since translated-backlinks are now accessible by Graph-View and many existing plugins like Canvas-Link-Exploder would unlock many powerful workflows in Obsidian.

This is one of the main selling-point of Scrintal as their users love the intuitive visual thinking and ease-of-use making relevant links. Easier ways to form connections is a long awaited feature request in the Obsidian forum(Scrintal, AI-Based linking similar to Napkin)
I cannot emphasize enough how useful this feature would be. So I implore you to add this feature to your plugin. I have been on the hunt for this feature for a while now, I scoured google to no avail. I even thought about making it myself even though I'm no coder and I don't even know where to begin. That's how bad I want this feature.
I can tell from your plugin, you are a very capable developer. So I kindly request you to make this. PLEASE!! :)

[Pixel3ro]

If you happen to look into making this feature, here are a few things you might wanna keep in consideration

• consider the following Scenarios.
  • A user makes a Connection/Edge from Note_A pointing to Note_B, the Backlink is created within Note_A mentioning a Backlink to Note_B. (Tools like Canvas-Link-Exploder can recreate the connections in the original flow. Reversing this order would not play well with this plugin. Where as GraphView considers every link as Bi-Directional, so the order wouldn't matter in that case)
    • Now the user deletes the Arrow/Edge, you should remove the Backlink that was made earlier.
      • Incase Note_A --> Note_B were already linked in a different Canvas (lets call it Canvas_1 since we assume it existed first and the current canvas the user is working on is Canvas_2), for which your plugin has already made an backlink in those files.
        Although it exists in Canvas_1, the user makes the same connection A-->B once again in the current Canvas_2, and deletes the connection they just made.
        Now the plugin should distinctly recognize the link made from canvas_1 and retain it's backlink, as the change from canvas_2 should not affect the backlinks made from canvas_1.
        So, when a link is made and deleted from canvas_2, the plugin should make sure only the corresponding backlink is deleted from Note_A without affecting backlinks made from other sources even if they look identical.
        One way to do this would be to make a NEW backlink every-time a Connection/Edge is made. That way there will be multiple backlinks_(in this example, total of 2 backlinks)_. When the plugin wants to remove the backlink upon deletion of an Arrow/Edge, it will only remove one entry from a total of 2 backlinks. In short, without affecting the connection made by Canvas_1.
        $$ After making the Arrow/Edge in Canvas_2, say is not removed by the user this time. In this instance the pre-existing Arrow/Edge in Canvas_1 is to be deleted by the user. Assuming the plugin works as we discussed earlier, the plugin would've made multiple backlinks in Note_A.
        I imagine these backlinks are usually appended to the end of the note. So the backlink at the very bottom would correspond to Canvas_2 and last-but-one would correspond to Canvas_1.
        In the previous case, when the user deleted the Arrow/Edge from Canvas_2, the backlink at the bottom would be deleted in response to the change, which deletes the backlink made by Canvas_2. Hence the backlink created and deleted would both correspond to Canvas_2.
        But in this case, the bottom-most backlink is created by Canvas_2, but it has not been deleted in Canvas_2, rather the user decides to delete the Arrow/Edge that was made earlier in Canvas_1 whose corresponding backlink entry is last-but-one in the Note_A. Now when the User deletes the Arrow/Edge from Canvas_1, the bottom most backlink will be deleted which was made by Canvas_2. In this case, the change in Canvas_1 deletes the entry made by Canvas_2. But this doesn't harm the intended functioning of the App.
        So appending backlinks to the end-of-the-list when a new backlinks has to be created, and deleting the first-one-from-the-bottom works without causing any trouble.
        $$ Say there were a few more notes Note_C, D, E,..., being linked from A-->C, D, E,... Now the removing the backlinks at the end-of-the-list cannot guarantee the appropriate backlink will be deleted since the backlinks will be jumbled based on the order of creation of these links, and the multiple instances in Canvases(1, 2, 3,..).
        So the plugin reads through the backlinks bottom-up, trying to match the Title-of-the-Note to be removed with the list of backlinks. Once a match is found, it deletes the Backlink, and deletes the empty line as well ensuring there are no empty lines in the list-of-backlinks.
        When the backlinks are appended to the bottom of the list, upon deletion it has to be careful.
        This bottom-up approach ensures any recent Crash/error doesn't affect the older Canvas configuration, localizing the impact to the Current canvas, slightly making the recovery easier with least impact.

Also the plugin won't be performance hungry, since it won't have to keep track of the backlinks and their corresponding Canvas in an attempt to function appropriately in the various scenarios mentioned above.

[Pixel3ro]

2. Obsidian-Canvas-Links lists all the files in the canvas, including images, audio, video, etc.
   In the spirit of linking the Notes in the Canvas in the earlier request, I'm suggesting linking the files too, automatically, which can be accessed in GraphView would make this feature set complete. This can be done by borrowing core features from "Canvas-Links" plugin and make it accessible from a GraphView query.

Again, I'm no expert, probably there is a better way to do this. With that said, here's how I'd do it.
I'm not sure if Native Canvas file format is capable of holding the links to these files. I'm assuming it's not made for that, and you'd have to find a workaround.

• You create a .md file with the same name as Canvas file. This .md file is inside the canvas, but hidden from the user by default. This .md Note is also stored in the same directory as the Canvas file(this part is a little tricky, I wouldn't want an extra file in my left side-panel, especially with the same name as the Canvas, right next to the Canvas file. This would create clutter, and worse I might click on the Note by accident while I intend to open the canvas. I wish hope there's a way to hide these files from the user view as well. idk.

• So this file hosts the links to all the attachments. and they are now accessible from the GraphView.

• Just how the Arrow/Edge made backlinks earlier, I'd love to see these files make backlinks with Notes at-least, if file-to-file backlinking is not possible.

[Pixel3ro]

3. I love your plugin's Portal feature, and the fact that it supports Edges to the embedded canvas is just impressive. Allowing the backlinking feature between Notes which we discussed earlier work on Portals too. It'd be a killer feature.

It's a crucial feature too, since you can now link between Canvas, the circle becomes complete without leaving any gaps unbridged.

I would like to mention an UseCase of this feature.
I import my Hypothes.is Highlights to my Vault. I like to view them in a Canvas as it presents a Bigger-Picture (compared to opening them as individual files) which makes it easier to form connections in my newly acquired knowledge. Feature #16 is very important in this case since my connections not just visual anymore, now they are a used to enhance my knowledgebase with backlinks.
After organizing them, I Embed-Canvas it into other relevant Canvases. Here I use Portal feature and make Arrows once again, forming connection between newly acquired content and existing knowledge. Hence it's crucial that Portals are integrated with this backlinking feature.

Now my knowledge is connected across multiple canvases.

[Pixel3ro]

4. Since Nodes are a part of Obsidian Canvas, they should be recognized too by your plugin. Otherwise the connections made to a Node will go unprocessed, losing valuable information/connections.

I have an interesting idea to use the Node. What if the nodes were designed to forward the links it's receiving, like a relay.

• for example, Note_A is connected to Node_1 which is connected to Note_X (Note_A --> Node_1 --> Note_X)
  The plugin recognizes the Arrows/Edges connected to a Node, and joins the incoming to the outgoing arrows. In this case, the plugin would assume Note_A is directly connected to Note_X (Note_A --> Note_X) and make backlinks as if that were the case.

• Now imagine the same mechanism, but there are more than one incoming/outgoing arrows in the Node.
  For example, (Note_A --> node_1 --> Note_X, Y, Z) Node_1 has outgoing Arrows to three Notes(X, Y, Z)
  So the plugin recognizes this, and makes the Node bypass these links to all three notes, as if it were (Note_A --> Note_X) (Note_A --> Note_Y) (Note_A --> Note_Z) and make their respective backlinks, a total of 3.

A similar behavior is observed when (Note_A, B, C --> node_1 --> Note_X) resulting in 3 backlinks.

In case of (Note_A, B, C --> node_1 --> Note_X, Y, Z), the plugin would make a total of 9 backlinks, the permutation-combination of bypassing the links. So in this case 3+3=6 arrows make 3x3=9 backlinks. In a bigger use case with 10+5=15 arrows would make 10*5=50 links. Which is a difference of 50-15=35 links.

This would allow the user make many connections at once. I can see myself using this feature to bulk-organize my Readwise imports, etc.

[Pixel3ro]

5. In a similar fashion to the forementioned feature of Nodes, Links between Groups should behave the same way.

Since a Group of notes are connected to another Group, they can also be expected to form backlinks in a similar fashion to Nodes.

Using Groups to organize my Readwise imports is much easier than linking via nodes, since I can just click-and-drag or hold-shift to multi-select-Notes -> Group them together -> draw a single Arrow and my backlinking file-organisation is ready.

This way I don't have to click and drag 100 different arrows for every note one-by-one as it'd be the case with using a Node-bypass

[Pixel3ro]

6. feature 4(node-bypass) and 5(group-linking) should work with each-other.

for example, Groups G1, G2, G3, G11, G12, G13 are connected via Node N1 (G1, G2, G3 --> N1 --> G11, G12, G13)
N1 should bypass the connections in permutation-combination fashion as it did earlier with notes in feature-4, but with the Groups in this case.

Similarly, Nodes N1, N2, N3, N11, N12, N13 are connected to Group G1 (N1, N2, N3 --> G1 --> N11, N12, N13)
in this case all the Notes connected to N1, N2, N3 will be linked with the Notes within G1. And, all the Notes in G1 will be connected to the notes in N11, N12, N13.
Notice how N1, N2, N3 do not get linked directly with N11, N12, N13 in this case, where as in the example above, connections are direct

This distinctive nature of Nodes and Groups can enable very flexible framework accommodating tasks of any complexity.

[Pixel3ro]

7. Toggle Features (Node & Arrow)

• There should be a toggle allowing the Node-bypass ability to be disabled, so that a Vanilla toggle is still accessible to the user.

  • This toggle should be quickly-accessible since users are expected to use a combination of both Vanilla Node and Bypass-Node in the same canvas according to their needs.

• The Arrows/Edges should have the option to be disabled too. Users might need a simple arrow to represent a connection without making a backlink. Similar to Nodes, this toggle should be handy.

• These Nodes and Arrows should have distinct-yet-minimal styling and colors difference to be able to tell the between Vanilla version and featured versions at a glance. The reason I recommend the styling-differences to stay minimal is because it shouldn't create a visual hierarchy which might signal a special type of Arrow/Node, standing out, conveying un-intended meaning. If the users want, they can color the Nodes/Arrows themselves.

[Pixel3ro]

8. Bi-Directional Linking - backlinks should recognize and support bi-directional linking in the backlinks they create.

Right now, there are two ways to make a bi-directional link. Both of them have their issues
A. Click-Arrow -> Click-Line-Direction -> Select-Bidirectional (3 clicks)
i. I'd prefer a popup as soon as I make the connection, allowing me to choose Bi-Directional in a single click
ii. Click-Arrow -> Click-Line-Direction -> Select-Bidirectional (2 clicks) since Bi-Directional linking is a frequently used option, it should be placed in the front, making it easier to access by saving an extra click.

B. Draw two Arrows. But if you want to delete the Arrow, you have to delete twice.
i. If two arrows are drawn in opposite directions, combine them both into one.

similar to request 7, it is crucial to have a vanilla Arrow/Edge since they have their utility, and they should have minimal design change without climbing up the visual-hierarchy to look distinct.

[Pixel3ro]

• I have mentioned Canvas-Link-Exploder creates a Canvas with all the incoming and outgoing links. That's one way to look at a Note and the network around it.

This plugin is almost the opposite of Link-Exploder. This Plugin creates Arrows/Edges from existing links. It's a great way to pull in all your search results into your canvas and watch it make connections by itself. Kind of like an readable version of GraphView.

Since you would've made connections of the same Notes in different Context(aka Canvas) and this plugin will bring them all those connections together in one place, allowing you explore connections you didn't know existed.
To make this happen, the notes should reorganize themselves just like GraphView does, forming clusters by putting the highly linked Notes in the center, etc.
It would make its a bliss to skim through search results.
Speaking of search results, Importing your search results into a canvas should be streamlined in one-click. This could crash your computer if the vault is too big. it should be taken into consideration.

• Expanding on this idea, if the Canvas could act like a search page, doing the forementioned things in real-time, and making clusters and groups to read from. You can choose to keep some notes, the rest will be discarded when you move on to the next search. The notes that are pinned by you will organize themselves on onside, and inside a Group. The same cycle follows in the consequent search results.
  This way, you can look-up the couple topics you are interested in, and collect the Notes you think that are relevant. There will be a few groups of notes, belonging to different search results. Arrows/Connections are also made between different search-result-Groups if there were any backlinks. You can look through them and make new connections too. You can save this Canvas or discard it automatically.
  This is not exactly a feature request. Sounds like a whole-new plugin. But it'd be interesting to see something like this.

[Pixel3ro]

I ran into Excalibrain, an interesting spin of graphview.
with the aforementioned FR in place it'd be onsteroid. Thought I'd drop it here

[Pixel3ro]

minor FR : ability to disable backlink and use a plain old visual line - a small icon on the Edge/Line

[Pixel3ro]

obsidian-semantic-canvas-plugin : "Set properties for all Markdown files included in your canvas based on their group membership, links to files, links to cards, and links to web embeds."

since it can modify metadata based on Canvas properties such as links, etc. thought it might make a good platform to build on top of, rather than having to start from ground up doing all the heavy lifting.
hope you find this helpful.

[Pixel3ro]

IMPORTANT
idk if you've already seen this demo video. if not, i highly recommend you do

many of the powerful feature set we'd discussed earlier can be found in semantic canvas plugin, such as the following

• backlinking "notes within groups" with a single arrow
• directional arrows creating bi-way linking

and i gotta appreciate the attention to detail of the author. such as

• option to "filter-import properties" via the popup-options under "add new arrow".

it definitely serves as a framework to create an MVP, with minor modifications. please do look into it.

[Developer-Mike]

That's a cool demo. I was struggling to add the canvas to the graph view and adding frontmatter to it. But now, I better know what you requested.

[Pixel3ro]

glad you found it useful.

[Pixel3ro]

I didn't expect you'd get back so fast.
I just realized I should've asked you first before I wrote this
Hope you don't mind. I can take it down if you want.

[Developer-Mike]

No problem 👍🏻

[aarongilly]

Mike feel free to lift anything from my code base. I looked through yours to see how you were doing some stuff. Mine is amateurish by comparison, so I doubt it will be of much help.

I would love to see what @Pixel3ro is looking for, too, but also very much recognize the amount of work it would take to handle all the interaction scenarios... let alone how to do it all within the Obsidian API. As we're all aware of, Obsidian themselves don't (currently) support backlinks or metadata in the canvas file itself... so anything @Developer-Mike or I would do would be some custom-built solution on top of things... e.g. extending the JSON Canvas to add metadata there, or introducing a new file that mirrors the canvas and serves as a proxy for backlinks... either way managing state & cache invalidation will be a bit nightmare-ish.

I don't plan on trying to do this at any point in the near future, or maybe ever. It's a bit too heavy of a lift for my situation.

[Developer-Mike]

@aarongilly
Thank you for giving your permission and sharing you thoughts.

I've already tried multiple versions on how to add backlinks to canvas (as you can see by the linked branches 😓):

1. Adding canvas files directly to the backlinks/outgoing links pane is very hacky (metadata branch)
2. Yes, a new md file for a canvas is a nightmare 😅 (frontmatter-using-md branch)
3. Extending the JSON Canvas isn't easily possible, because if the plugin gets disabled or it's not yet initialized, the inbuilt canvas plugin strips any properties apart from the nodes and edges
4. Currently, I'm working on a similar function to semantic canvas (beta branch (Forgot to create a new branch 💀))

It's indeed a very difficult task and I can't assure that it will get added to Advanced Canvas...

[Pixel3ro]

sorry if my language wasnt clear
i hope this section of the Scrintal demo does a better job at explaining things

similar to scrintal, i was imagining the use of YAML in .md files (not .canvas) to include the backlinking. @aarongilly has done something similar with his plugin, where arrows and metadata are connected.
if you limit his plugin to "modify backlinks" with the "filename" (other metadata properties are not to be interacted with)
we achieve the Scrintal's 'visual workflow'

and i'm sorry i dont understand the need nor the complication around using the .canvas files

[Pixel3ro]

also. i use "Obsidian canvases" as "boards in Scrintal"
along with editing the file-backlinks, if the YAML could have .canvas names as additional metadata. Someone might find this useful now or later in the ever evolving use cases.