Plugin gitgraph in tiddlywiki

#1

I created a new plugin tw-gitgraph to show git-graph in tiddlywiki

tw-gitgraph is a wrapper for gitgraph.js to display gitgraph figure in TiddlyWiki.

Demo and codes can be found here:

A screenshot of gitgraph

image
image772Ă—1286 30.4 KB

This is very early stage for this plugin. Welcome for any comments.

3 Likes
#2

My first question is how I could open a new tiddler below the widget tiddler if I click on the dot or tiddler title.

The current method just open tiddler at the top of story river.

$tw.wiki.addToStory(commit.subject);
#3

This is very interesting and has great potential not just for drawing railroad diagrams!

Questions:

  • Are there options to change the shape of the nodes, or even remove them?
  • Change the colour and width of the lines?
  • Is there a better way to sort the nodes. Rather than with the created date but a sequence field?

I’m looking at using it to display a historical timeline.

#4

I am very interested in this for my Kansas Railroad wiki. I can see this being used to represent predecessors and successors (how a company changed over time) as well as a track chart. I’ve tried the railroad diagram plugin in the past, but ended up not using it because you can’t have a branch the doesn’t connect back to the main line. Whereas with this, you can do that (see idea 2 and idea 3).

I would also like to be able to change node shapes/colors and line widths/colors. It would also be interesting if you can specify the distance between the nodes such that it could represent a timeline.

Excellent!

#5

Thanks @Zheng_Bangyou for sharing this. I like the simple elegance of this implementations use of the fields in separate tiddlers.

  • Out of the box this is quite “manual” and could benefit from some tools to easily populate the fields.
    • This is not the only project that needs this and I have some ideas on how to achieve it.

Other comments.

  • I would be nice to give a real world example with test data rather than just idea 1, 2 and 3 etc… perhaps an example coding or building project?
  • I see this solution is in many ways quite specific to representing a “code development path over time”, as the use of the created date suggests, this is useful only if you create/record each step as you go.
    • It would be better if we could set and choose another date field so we could prepare an expected graph or add to an existing one. Depending on the created date limits this.
    • Can we just sort in this different date field order? as long as the tiddlers are arranged correctly.

As a general solution

  • I am interested in seeing if we can take the algorithm(s) in this solution and use it for a more general solution. It offers a way to organise ideas/tiddlers/activities/relationships differently from lists and hierarchies
  • What happens if they are sorted in a different way to the way they are created?
    • Do alternative sorts break the graph?
  • Perhaps I should look for a very different solution?
#6

Thanks. Will consider all comments in newer version.

@TW_Tones I created a real life example with my recent work for radiation.

image
image821Ă—935 20.6 KB

My specific interesting of gitgraph is to branch/merge ideas in my research activities. Naturally, I always test new ideas or check new datasets. gitgraph is very suitable for this case to visualise relationship among tiddlers for a project.

1 Like
#7

@Zheng_Bangyou , CSIRO are you based in Australia then?, I am in Sydney.

I am still to fully understand this gitgraph graphical representation but it interests me.

Off topic;

I did a brief scan and saw this;

It is unreproducible, time-consuming and even impossible to write RMarkdown file for each branching data analysis as 1) the modified or dropped input files, 2) the too big intermediate results, 3) lost tracks of R scripts, etc. Branching data analysis is very common for scientific research and non-linear procedure.

I have started using ChatGPT4 as an assistant and I don’t know how well it would handle larger data sets but it is useful from transforming data to writing and converting scripts.

Today it helped me write this macro

\define link-to-domain-target(address)
<a href="#" href="javascript:(function(){var url='$address$';var domain=(new URL(url)).hostname;window.open(url,domain);})();"><$text text={{{ [[$address$]split[://]last[]] +[decodeuri[]] }}}/></a>
\end

If you call it as follows

<<link-to-domain-target "https://tiddlywiki.com/#Block%20Mode%20WikiText">>
<<link-to-domain-target  "https://tiddlywiki.com/#Customise%20TiddlyWiki">>
<<link-to-domain-target  "https://tiddlywiki.com/#Keyboard%20Shortcut%20Tiddler:%5B%5BKeyboard%20Shortcut%20Tiddler%5D%5D%20HelloThere%20GettingStarted%20Community">>

<<link-to-domain-target  "https://talk.tiddlywiki.org/t/bulk-import-local-images-into-single-tiddler-as-links/6705?u=tw_tones">>
<<link-to-domain-target "https://talk.tiddlywiki.org/t/plugin-gitgraph-in-tiddlywiki/6710/6?u=tw_tones">>

It determines the target tab or window name by using the domain name thus all three tiddlywiki links will open in one tab and the two talk.tiddlywiki links in another.

1 Like
#8

Yes I am in Brisbane.

1 Like