Ability to publish Link Graph as either d3.js compatible json or some graphic

[vermavineet-google]

Can we have an output for the graph link which publishes the graph ina. d3 js compatible or something similar graph so that along with github pages the graph is also published

[SanketDG]

Do take a look at https://github.com/hikerpig/foam-template-gatsby-kb and let me know if this suit your needs. It has an inbuilt graph component that renders pretty well.

[Am3ra]

I would love something similar! Currently rolling out a homemade solution, but would prefer the foam version of the graph.

[StoltHD]

If you should support saving to a graph file format, please use one of the open standards for this...
e.g. GEXF or GraphML, and add all the YAML frontmatter keys as properties/attributes for Nodes and the Body of the Note in a Text Property if possible...

That way it will be possible to do analyzes on the metadata of the Notes...

and just a Tips for anyone that read this and is doing word analyzes, Infranodus can actually import Markdown Notes...

Personally I use Tulip, Cytoscape, Gephi and Constellation, so a open standard graph format would be great...

And please, if you are going to support some export to web pages with graph feature, please remember that many people using notebook tools as research tools does not use github to publish their projects, many people just want to publish to their own js-enabled homepages.

[stefanfritsch]

I'd like some way to extract the graph as well.

I can live with almost all formats, I just don't want to parse the markdowns myself. To do that I'd have to rebuild your whole logic on how titles are mapped to files with that definition probably changing now and then due to bugfixes.

You can extract it by hand using the VSCode developer tools, but the solution is far from optimal.

How to Save the Graph

This allows you to save the current graph of a Foam repo to a file:

1. Open the VSCode Developer Tools
2. Navigate to the correct iframe with the foam graph visualization
3. Set a breakpoint in graph.js in the highlight update function (currently line 159 -- the model will be object m)
4. Highlight a different node to trigger the breakpoint
5. Enter the following in the console (from here)

   // e.g. console.save({hello: 'world'})
   (function(console){
     console.save = function(data, filename){
       if(!data) {
         console.error('Console.save: No data')
         return;
       }
       if(!filename) filename = 'console.json'
       if(typeof data === "object"){
         data = JSON.stringify(data, undefined, 4)
       }
       var blob = new Blob([data], {type: 'text/json'}),
           e    = document.createEvent('MouseEvents'),
           a    = document.createElement('a')
       a.download = filename
       a.href = window.URL.createObjectURL(blob)
       a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':')
       e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
       a.dispatchEvent(e)
     }
   })(console)

6. Now enter:

   console.save(m)

   adjust the name of the model object if you set the breakpoint somewhere else.

[riccardoferretti]

Thanks for the code @stefanfritsch!

The way I was thinking to expose the graph was via an "Export Graph" command, which would open a VS Code editor with the JSON.
Your workaround is great in the meantime!

[stefanfritsch]

@riccardoferretti having a cli command as well would be brilliant.

As I see it, your janitor cli builds the graph anyway for its janitoring. A separate command that just takes the part to build the graph and then saves it, would be more than enough for me. Or a command line parameter that exports the graph json as the janitor builds it.

I would use it for a goldmark-based static site generator written in go. And I'd really love to have an npm-free solution for serving the pages and the graph. But as mentioned above, I'm a bit scared about having discrepancies in the graph if I try to crawl it myself. :-)

Thanks a lot for foam btw. It's brilliant in its simplicity and feature set.

[xdaluca]

Do take a look at https://github.com/hikerpig/foam-template-gatsby-kb and let me know if this suit your needs. It has an inbuilt graph component that renders pretty well.

this template is awesome, thanks!

[stereobooster]

duplicates or related: #309, #308, #1199, #1351