foambubble / foam

A personal knowledge management and sharing system for VSCode
https://foambubble.github.io/
Other
15.07k stars 647 forks source link

Exporting Foam graph to html #1351

Open PhilB-RLB opened 2 months ago

PhilB-RLB commented 2 months ago

Is your feature request related to a problem? Please describe.

Not related to a problem.

Describe the solution you'd like

In order to use the Foam graph (which is great) in a static site generated with hugo I think the best way would be to be able to export Foam graph to an html file.

Why looking at the Foam sources, one can read in the file ../dataviz/index.html the following :

To test the graph locally in a browser:

  1. copy the json data object received in the message payload
  2. paste the content in test-data.js
  3. uncomment the next <script ...> line
  4. open this file in a browser

So I think that Foam can export the graph data to the file test-data.js then we can obtain an html file which will show the graph and can be embedded in a static site. But maybe I'm wrong.

If I'm not wrong, what would be the structure of the test-data.js ?The one provided with foam contains (see test-data.js ) : window.data = { nodes: [], edges: [] };

Any help on this feature ?

Phil.B

Describe alternatives you've considered

No alternatives considered.

Screenshots or Videos

No response

riccardoferretti commented 2 months ago

So, yes, the idea is there. The reason why I haven't made that public is that I would have preferred to first turn it into a standard graph format (e.g. d3), but I haven't had a chance to dig deep enough into it to find a "suitable" representation. Of course, the easiest solution would be to just export our format and let people deal with it. We can at that point also have an "Export graph data" command to easily generate it.

Any suggestion?

PhilB-RLB commented 2 months ago

I think that having an option to 'Export Graph Data' from Foam would be great.

stereobooster commented 1 month ago

Here is the list of graph file formats https://graph.stereobooster.com/notes/File-formats

riccardoferretti commented 4 weeks ago

Super helpful, thanks!

j6k4m8 commented 1 week ago

Those who are looking for a simple solution in the meantime could do something like this:

import numpy as np
import networkx as nx
import pathlib
import re
files = list(pathlib.Path("./").glob("**/*.md"))
def _extract_wikilinks(text) -> list[str]:
    return re.findall(r"\[\[(.*?)\]\]", text)

def _extract_hashtags(text) -> list[str]:
    # hash with more than two chars
    return re.findall(r"#(\w{2,})", text)

g = nx.DiGraph()
for file in files:
    fname_slug = file.stem
    with open(file, "r") as f:
        text = f.read()
        wikilinks = _extract_wikilinks(text)
        for link in wikilinks:
            link = link.split("#")[0]
            g.add_edge(fname_slug, link)

        g.add_node(fname_slug, __labels__="File")

        hashtags = _extract_hashtags(text)
        for tag in hashtags:
            g.add_edge(fname_slug, tag, __labels__="Tagged")
            g.add_node(tag, __labels__="Tag")

nx.write_graphml(g, "graph.graphml")