[DataViewJS] How to create Internal link

Due to the language barrier, I probably don’t know how to ask :slight_smile:

What I’m trying to do

image

In the Weekly report, I’m gathering daily notes for my runs. Currently, if I want those notes (img) to be seen as an internal link, as per Obsidian help for Graph view:

The Graph view lets you visualize the relationships between the notes in your vault.

  • Circles represent notes, or nodes.
  • Lines represents Internal links between two nodes.

I separately write down those notes:

image

Which I believe is nonsense, but I don’t know how to achieve this with DataViewJS :smile:

Things I have tried

This is part of the code where I create those links to the notes:

dv.table([
    "Note", "Day", "Distance</br>(km)", ...], 
    entries. Map(p => [
        p.file.link,  // I'm guessing the "problem" is here!
        formatDay(p.DateTime),
        ...
    ])

I’ve also tried "[[" + p.file.link + "]]" but not working.

So, simple question :smile: - how can I create links, with DataViewJS, to the notes that they will appear in Graph as relationships?

Thanks, Marko :nerd_face:

Static internal links will display in the graph view. Dynamic links, as from Dataview will not show in the graph view.

So in order for them to show in the graph view, you need to make them static. This can be done from dataviewjs, og you in addition presenting the links in your table/list, also use app.fileManager.processFrontMatter() to add any link(s) to some “random” property to make them static.

I’ve not done this anywhere, but it should be doable, I think, and if you use a given property you could possibly choose to hide it from the property view using CSS. Hmmm… I might need to play around with this idea the next time I’ve got some extra spare time.

2 Likes

Holroy’s similar idea:

1 Like

Hehe… are you quoting me to myself?! :smiley:

What I’ve not done earlier is pushing links to the frontmatter for the purpose of them showing up in the graph view. I’ve done plenty of frontmatter changes through queries.

(I’m contemplating on whether pushing all links, or having a button to push/toggle specific links would be the better option? )

YurceeAI: "?!!****arghhh....**??&$...."

Thanks, @holroy. I’ll dive into this processFrontMatter() and see where it takes me. And thanks for explaining static and dynamic links!

I’m coming back with whatever I’ll find.

Cheers, Marko :nerd_face:

So, as I understand, I should be able with processFrontMatter() to write some values into the properties keys. Why none of those methods doesn’t write anything into the YAML header?

const file = dv.current().file;
console.log(file)
console.log(file.frontmatter)

setTimeout(() => {
	app.fileManager.processFrontMatter(file, fm => {
		fm["description"] = "Lorem Ipsum";
		// delete frontmatter['description'];
	})
	console.log("2 seconds")
}, 2000)

await app.fileManager.processFrontMatter(file, fm => {
	fm["description"] = "Lorem Ipsum";
});

app.fileManager.processFrontMatter(file, fm => {
	fm["description"] = "Lorem Ipsum";
});

Properties description is there …

image

I also tried to use it as a function:

function updateFrontMatter() {
    app.fileManager.processFrontMatter(file.path, fm => {
        fm["description"] = "Lorem Ipsum";
    });
    console.log("Frontmatter updated after 2 seconds");
}

setTimeout(updateFrontMatter, 2000);

And yes, I tried file and file.path

OK, last edit of this post :laughing: - I can use this in dataviewjs? As all samples that I found were part of some plugins or Templater.

Thanks, Marko :nerd_face:

For starters, processFrontMatter requires a TFile not just any file variable, so try doing this with an ordinary “dataview” file:

const tFile = await tp.file.find_tfile(file.path)

Or maybe rather this if you don’t have access to tp (see
getFileByPath - Developer Documentation):

const tFile = await app.vault.getFileByPath(file.path)

And then you can use this tFile in the call to processFrontMatter(tFile, ...)

1 Like

@holroy, you’re a genius! OK, at least Obsidian genius!! :wink:

I will mark your first answer as a solution, as it was the proper solution; the rest was to figure out how to implement it properly. And I did it like this:

// Function to add daily note links to the weekly note's frontMmtter
function addLinksToFrontMatter(file, links) {
    setTimeout(() => {
        app.fileManager.processFrontMatter(file, fm => {
            if (!fm.linkedNotes) {
                fm.linkedNotes = [];
            }
            links.forEach(link => {
                if (!fm.linkedNotes.includes(link)) {
                    fm.linkedNotes.push(link);
                }
            });
        });
    }, 200);
}

// Extract links from the daily entries
let dailyLinks = entries.map(p => `[[${p.file.name}]]`);

// Get file as TFile
const file = await app.vault.getFileByPath(dv.current().file.path)

// Add them to the weekly note's frontmatter
addLinksToFrontMatter(file, dailyLinks);

The result is then seen as follows:

And yes, the graph is working as a charm! :slight_smile: Thanks again, and I wish you all the best!

Cheers, Marko :nerd_face:

2 Likes

This does the magic …

div[data-property-key="linkedNotes"] {
  display: none !important;
}

This is just for testing purposes, as there are a few linked notes. But it could be handy when there will be a lot of those.

Cheers, Marko :nerd_face:

1 Like