[tw5] A TiddlyWiki "GraphViz Server" (?)

[Charlie_Veniot]

The GraphViz plugin is pretty awesome, but it does increase the size of a TiddlyWiki instance by about 1.5 Mb’s.

Not something I want in every TiddlyWiki instance of mine.

Which got me thinking: what if I had one TiddlyWiki instance that acted as the “GraphViz Server” to all my other TiddlyWiki instances?

That’s my latest TiddlyWiki interest.

A TiddlyWiki that get generate a GraphViz diagram based on input from some other TiddlyWiki, and that can be used for creating/editing ad-hoc and stand-alone GraphViz diagrams.

“Server” first. Then a simple tiddler that can be added to any TiddlyWiki for sending graph requests to the “server”. (Maybe “embedded graph generator” makes more sense than “server”.)

Mash-up prototype of GraphVizServer and GraphVizEditor:

[Charlie_Veniot]

“Phase 1” done: TW GraphViz Server — a project by Charlie Veniot

Full link details to show embedded graph: https://cjveniot.neocities.org/TiddlyWiki%20Projects/TwGraphVizServer.html?graph%20{%20a%20--%20b%20[color=green];%20a%20--%20z;%20b%20--%20c;%20a%20--%20c;%20%20d%20--%20c;%20%20e%20--%20c;%20%20e%20--%20a;}#GraphURL

For now, cobbled together manually by concatenating in the web browser’s URL the following pieces:

• https://cjveniot.neocities.org/TiddlyWiki%20Projects/TwGraphVizServer.html

• graph { a – b [color=green]; a – z; b – c; a – c; d – c; e – c; e – a;}

• #GraphURL

(Try cobbling together some test URL’s with different middles to that URL sandwich. I haven’t tried any others, and I’m betting that I’ll need to handle some GraphViz syntax that will break URL’s.)

Without knowing for sure what I want to tackle next, I know I will need:

• A tiddler with the goodies to automagically put that URL together and provide a link to click on and/or embed things “right there” in an iframe.
• Show the “TW GraphViz Server” “GraphURL” tiddler full screen (i.e. hide the TiddlyWiki interface), with a button to display the TiddlyWiki interface
• Start going back in time to see if I can find an older version of TiddlyWiki that still works as TW GraphViz Server but is a little bit lighter: 3.8 MB for the current TiddlyWiki is heavy, and I’d like to make it reasonably lighter

[Charlie_Veniot]

https://cjveniot.neocities.org/TiddlyWiki%20Projects/TwGraphVizServer.html?graph%20{%20a%20–%20b%20[color=green];%20a%20–%20z;%20b%20–%20c;%20a%20–%20c;%20%20d%20–%20c;%20%20e%20–%20c;%20%20e%20–%20a;}#GraphURL

I just added a RangeWidget to increase the size of the GraphViz image. So a large elements with a lot of elements, which might render too small to read, we can now zoom in to see the details.

[Charlie_Veniot]

“Server” might not be the right word. Kind of like saying almond beverage is “milk”. (Digression: then why is “milk of magnesia” okay???)

Instead of “server”, and just because I like cutesy/comical portemanteaux:

A GraphViz uTWility ?

[Charlie_Veniot]

Drag the attached into TiddlyWiki.com for import.

Tiddlers:

• Sample Graphs (URL’s generated to render GraphViz images with the GraphViz uTWility)
• gViz (macro for generating URL’s to GraphViz uTWility with graph specification embedded in the URL)
• a bunch of example graphs with graphs specified in the “DOT” language
  Open the Sample Graphs tiddler and try the links.

More samples pending …

gViz_Samples.json (4.73 KB)

[scott_gmail.com]

I wasn’t around the TW community when you started discussing this.

I’m fascinated by the work. It looks quite useful.

But I also wonder what TW adds in this case to any other server
implementation of GraphViz. If you’re going to create these diagrams
on a server of yours or someone else’s, rather than in your single-page
wiki, why not just use one of the online servers? https://kroki.io/
looks amazing.

But mostly I replied so I could groan at this:

Instead of “server”, and just because I like cutesy/comical portemanteaux:

A GraphViz uTWility ?

It may be common in the community already, but I hadn’t seen “utwility”.

I’m sure I’ll be stealing borrowing that!

Cheers,

– Scott

[Charlie_Veniot]

I know that’s a real groaner, but I need to change “GraphViz Server” to something else so that folk realize this isn’t a “server.” It is more a “utility” or “appliance.”

The GraphViz plugin can be added to any TiddlyWiki instance.

The purpose of this project is to have one TiddlyWiki dedicated to the job of having the plugin and generating graphs.

So if you have any number of TiddlyWiki instances (so a dozen) for which you’d like to have GraphViz capability, have just one TiddlyWiki instance doing the job for all of them.

Ideally a very lean TiddlyWiki instance that does nothing but generate graphs for all the “clients”.

The beauty of this is: download your own instance of the GraphViz uTWility, locate it and modify it as you like. So you have your own appliance.

And if you want to do offline stuff, you can.

The problem with an online GraphViz server: you have to be online and have access to a server.

Not only is this good for offline graphing, it is also good for graphing behind your firewall which might block access to a GraphViz server.

I have a whole bunch of TiddlyWiki instances, and GraphViz increases the size of a TiddlyWiki too much for my liking. I will not have GraphViz saved over and over again every time I save a TiddlyWiki instance.

For a TiddlyWiki instance that is heavily reliant on many graphs, it might be better to include the GraphViz plugin at the cost of that much more getting saved every time.

The measure of a TiddlyWiki instance’s performance depends on the usage of that TiddlyWiki. For me, better to have GraphViz in one dedicated TiddlyWiki instance acting as an appliance to all of my other TiddlyWiki instances.

A copy of that GraphViz uTWility online for access anywhere on any device, and a copy locally for better performance and offline access.

[scott_gmail.com]

The problem with an online GraphViz server: you have to be online and
have access to a server.

Oh, do your wikis have access to one another when offline? I don’t have
anything set up like that. I run them either as single-file wikis or in
standalone Node processes. But this makes sense in that case. I am going
to raise an issue regarding a possible https://kroki.io/ extension, but
that would require being online to do the initial rendering.

The rest of this, I did understand. And I’m impressed.

– Scott

[Charlie_Veniot]

All of my TiddlWiki instances are single file.

Yup, any local TiddlyWiki can show any other local TiddlWiki in an iframe or open it in another browser window/tab via a link.

In the screenshot below, I have a local copy (older version) of the GraphViz uTWility on a local drive, and another TiddlyWiki showing the GraphViz uTWility in an iframe, embedding a graph specification in the URL so see that graph in the iframe.

[Charlie_Veniot]

BTW, adding the GraphViz plugin to a TiddlyWiki instance increases the size of that TiddlyWiki instance by 1.1 MB

Adding that to one TiddlyWiki instance is a problem if you only view graphs occasionally, and is a significant problem if you are opening and saving edits to that TiddlyWiki many times in a session. Every open and every save has that 1.1 MB overhead.

Even more so a problem if you need occasional graphing in many TiddlyWiki instances.

However, if a TiddlyWiki instance relies heavily on displaying graphs everywhere, then much better to include the GraphViz plugin in that TiddlyWiki instance so that it is not loading a GraphViz uTWility (i.e. a whole TiddlyWiki and GraphViz plugin) for every single graph displayed in that TiddlyWiki.

For my use case, I prefer my TiddlyWiki’s showing graph links to click on when I want to view a graph. Embedding in an iframe like above, I’d be careful with that to make sure the host tiddler only pops up in the story river (or anywhere) when I want the graph displayed.

All kinds of design considerations no matter what …

[Charlie_Veniot]

Trying out all of the examples in the Graphviz Gallery

Although the Graphviz uTWility is unable to render many of them (I’ve got a bug somewhere I need to fix), there are still some interesting ones that work out of the box.

The bug: although it could be a bug/incompatibility/??? issue with the GraphViz plugin, I really suspect there are some characters tripping up generation of a proper URL for the GraphViz uTWility.

I’ll be rolling up my sleeves and investigating later.

For now, if you are interested in trying out the new examples, download the attached, and drag into any TiddlyWiki instance for import.

Open the “Sample Graphs” tiddler and click away.

Graphviz_uTWility_Testing.json (43.1 KB)

[Charlie_Veniot]

Duh.

If you just want to click and view diagrams …

What I’m suddenly finding quite neat: I can have a private TiddlyWiki generate these URL’s, and the graphs are displayed by the public GraphViz uTWility.

Graphviz Gallery

Bazel Build System
Data Structures
Family Tree
Finite Automaton
Go Package Imports
Grid
Intranet Layout
Neural Network (Keras)
Ninja Build System
UML Class diagram demo
UNIX Family ‘Tree’
World Dynamics

Graphviz Pocket Reference

Example 1: Simple Graph
Example 2: K6
Example 3: Simple Digraph
Example 4: Full Digraph
Example 5: Showing A Path
Example 6: Subgraphs (i)
Example 6: Subgraphs (ii)
Example 7: Large Graphs (i)
Example 7: Large Graphs (ii)

[Charlie_Veniot]

It would seem that the GraphViz plugin only supports the “dot” layout engine.

Any graph specified with a layout engine other than dot will not be rendered by the GraphViz plugin?

Too bad, but I don’t think that’s a deal breaker.

[Charlie_Veniot]

Got a few more samples working:

Cluster Gradients
Entity-Relation Data Model
Gradients Applied to Data Struct Example
Graph, Cluster and Node Gradients
Linear and Radial Gradient Angles
Polygons
pprof CPU Profile
Program Profile
Sample Gradient Color Schemes
Switch Network
Synchronous Digital Hierarchy

[Charlie_Veniot]

Added a splash screen with animation to indicate that the TiddlyWiki instance is loading.