How to make a hierarchical/indented list of (recursive) inlinks?

Hello fellow Obsidian fan-people,
I would be interested in learning how to make an indented/hierarchical list of pages with dataviewjs. I was looking through the forum and I found 2 similar requests but they both display a flat list. My Javascript skills are not that good to make a recursive function with dataview arrays (but good enough to understand what’s going on with some help).

What I’m trying to do

Screenshot from 2024-01-08 17-25-56

so:
page 1.1.1 and 1.1.2 link to page 1.1
page 1.1 and 1.2 link to page 1

What would be the best way to make a dataview of this hierarchy on page 1 (top level) with a indeterminate number of sub/inlink pages, that looks like this:

page1
- page1.1
    - page1.1.1
    - page1.1.2
- page1.2

Also trying to learn more about thinking as a programmer; this function would do something like this?:

  • start at the current page
  • if it has inlinks add to an array / map?
  • iterate over the pages/inlinks and check if those have inlinks, and add to the same array / map

As you can see I’m not really getting it, but would really love to learn.

Thank you for reading
Paul

Things I have tried

I’ve tried discussing it with chatGPT over tea but we did not come to a satisfactory solution :slight_smile:

You’re probably already aware, but this is worth noting: I think something like this would only work if your document graph is acyclic. If you tried to recursively build a hierarchy over a cyclic graph, you’d get an infinite recursion unless you built in some logic to catch and terminate such cases.

maybe it’s a rather complex task.
Do you neeed for massive use? Do you have considered to make them manually (silly question, I know :slight_smile: ) ?

Hi Sylvan,

Thanks for your reply, I didn’t think of it like that but I can imagine the infinite recursion now. For example if I have page1.1.1 link to page1.1 (my first post use case) but then also have page1.1 link (back) to page1.1.1 that would recurse infinitely… very n00b of me.

In essence that is not the case in my graph/use case, (that’s why I didn’t consider) but it might happen and should indeed be captured in the logic. Is there a pointer you could give me in the direction of how to start building a very basic a dvjs function in the very isolated case illustrated?

Anyway thanks a lot for the hint and your time

Hi Andy, thanks for your reply,
My idea was that it would yield / generate insight bottom up. So I link/construct a parent child relationship and then eventually look at the structure that it made; actually similar to the graph view but ‘flat’ or one dimensional :slight_smile: I’ll keep looking for options, and post back here

ok. for parent-child relationships look if breadrumb plugin can be useful for you.
I still have to try it a bit.
For a graph view of this kind of relationships there is another plugin, exalibrain.

Having an embedded tree in a note, as you thinked, could be an interesting idea, anyway.

Thank you! I’ll certainly look into it.