Represent Trees in TW5

271 views
Skip to first unread message

Gourav Kumar Shaw

unread,
Jan 10, 2017, 6:04:50 AM1/10/17
to TiddlyWikiDev
Hi,

I started using TW5 to keep notes related to computer science. I am struck at a point where I cannot figure out how to create trees quickly either using latex or some other way.

I am looking for something like these:




Is there a workaround?

Regards,
Gourav

Mat

unread,
Jan 12, 2017, 8:38:16 AM1/12/17
to TiddlyWikiDev
IF what you're asking for merely is a visual representation, not a generation of a tree, then maybe these are of help?

They are not officially released yet, mostly because they need a bit more tweaking, at least the familytree which is the one closest to what you might want.
They display bullet lists as trees, only using CSS.

@Jeremy - would it make sense to make PRs for these?

...

Because asterisks are automatically parsed into bullet lists, one must, in order to use the above, encase the bullet list in a div with the particular tree class.

An idea might be to introduce e.g this syntax

-foo
--bar

and, analogous to asterisks, have them parse into list trees. And something else for family trees. Maybe not doable for backwards compatability?

Mat

unread,
Jan 12, 2017, 8:46:20 AM1/12/17
to TiddlyWikiDev
Ah, found this too. Another variant, while at it. (...If I didn't make a list of all my stuff I would completely forget things even exist.)

http://boxes.tiddlyspot.com/

<:-)

PMario

unread,
Jan 12, 2017, 9:23:58 AM1/12/17
to TiddlyWikiDev
On Thursday, January 12, 2017 at 2:38:16 PM UTC+1, Mat wrote:
They are not officially released yet, mostly because they need a bit more tweaking, at least the familytree which is the one closest to what you might want.
They display bullet lists as trees, only using CSS.

Very interesting approaches!
 
@Jeremy - would it make sense to make PRs for these? 

With a little bit of CSS tweaking, it is simple to use the <<toc>> macro to create the trees. ... Did some experiments with <<toc>> no folding and such. 

IMO would be definitely worth, to create several plugins. I can see usecases for all of your versions!

-mario

Jeremy Ruston

unread,
Jan 12, 2017, 10:18:31 AM1/12/17
to tiddly...@googlegroups.com
Hi Mat

@Jeremy - would it make sense to make PRs for these? 

Neat, by the way. Always surprising what can be done with CSS.

In what form would you suggest making the PRs? I’d love to have a “family tree” edition in the core, but of course we’d need the author to commit to maintaining it.

Ah, found this too. Another variant, while at it. (...If I didn't make a list of all my stuff I would completely forget things even exist.)

One thing you could do would be to start treating the listing on tiddlywiki.com as the primary index to your “finished” stuff. If we all did that, and relied on tiddlywiki.com for the core bookmarks for the community, we might have a better chance of keeping it up to date and useful…

Best wishes

Jeremy

Tobias Beer

unread,
Jan 12, 2017, 2:47:15 PM1/12/17
to TiddlyWikiDev
Hi Gourav,
 
I started using TW5 to keep notes related to computer science. I am struck at a point where I cannot figure out how to create trees quickly either using latex or some other way.

So, the first thing you may want to answer is:

  1. Do you either want to define the tree textually, as Mat suggests?
    • allows you more fine grained control over the tree representation
  2. Or do you want the tree generated from defined tiddler relations, e.g. via tags or other list-like fields?
    • automates tree creation from defined relations between tiddlers that exist independent of the visual representation in a tree
Best wishes,

Tobias.

Mat

unread,
Jan 12, 2017, 6:30:32 PM1/12/17
to tiddly...@googlegroups.com
On Thursday, January 12, 2017 at 4:18:31 PM UTC+1, Jeremy Ruston wrote:
In what form would you suggest making the PRs?

Yes, how should a small CSS piece, but that also requires a surrounding div and therefore a little documentation, be a PR? Modify vanilla stylesheet? Is there any point - would you be positive to include it, assuming it was well written, or do css-styling of bullet lists not conceptually fit for whatever reason?

 
I’d love to have a “family tree” edition in the core, but of course we’d need the author to commit to maintaining it.

I must assume you mean an edition for a real family tree, right? (Surely, my little css isn't enough to make a whole edition?) That would in deed be cool and I imagine some might find it useful. One of the areas I've identified as a TiddlyWiki Appetizer is geneaology where I think visual family trees would fit perfectly.


One thing you could do would be to start treating the listing on tiddlywiki.com as the primary index to your “finished” stuff.

Yeah. Will post about these latest things within the next few days.

<:-)


Gourav Kumar Shaw

unread,
Jan 12, 2017, 11:28:23 PM1/12/17
to TiddlyWikiDev
@Tobias
All I want is to keep my notes structured so as to allow easy revision and update. In order to explain concepts clearly they must be assisted with diagrams. My diagrams can either contain a tree, a graph, a table or a Matrix or a combination of all of these. (For instance, I might want to make notes on Depth First Traversal. For that I need a graph diagram.) All these functionality is supported by the Tikz package of LATEX.

I have figured out a workaround. I would make these diagrams using Tikz in some Tex editor and then convert them into images. Host the image and the original .tex file some where on the web and then refer the image in my tiddler. I know its a lot of work but there seems to be no simpler way out without compromising on the functionality. Moreover, when I want to make changes to the diagram I would have to repeat the whole process again. If only there was some way I could quickly write a plugin for the TikZ package.

To answer to your question, yes I want to define the tree textually as I want to have fine grained control over the tree representation.
For my need, strictly the table of content approach or the tree generated from the defined tiddler relations will NOT work.

Best wishes,

Tobias.

PMario

unread,
Jan 13, 2017, 7:17:43 AM1/13/17
to TiddlyWikiDev
On Friday, January 13, 2017 at 5:28:23 AM UTC+1, Gourav Kumar Shaw wrote:
On Friday, 13 January 2017 01:17:15 UTC+5:30, Tobias Beer wrote:

... If only there was some way I could quickly write a plugin for the TikZ package.

Oh, I'm sure there is a way. Just contribute to the KaTex project. That's a self contained javascript package, that can be used as a TiddlyWiki plugin. see: http://tiddlywiki.com/plugins/tiddlywiki/katex/ I'm sure they are happy to get new contributors, and we can quickly implement it.
 
To answer to your question, yes I want to define the tree textually as I want to have fine grained control over the tree representation.

With CSS you do have fine grained control over the tree representation.
 
For my need, strictly the table of content approach or the tree generated from the defined tiddler relations will NOT work.

Why? Just because it's a different approach, that you are not used to? ...


have fun!
mario

Thomas Elmiger

unread,
Jan 13, 2017, 7:26:35 AM1/13/17
to TiddlyWikiDev
Hi Mat

Here comes a tweak for your listtree.

They are not officially released yet, mostly because they need a bit more tweaking, […]

I fiddled a bit and found a solution for the parent, maybe you want to append this to your CSS if it works for you too:

.list-tree > ul:first-child > li:first-child::before {
    border: none;
}
.list-tree > ul:first-child > li:first-child::after {
    border: none;
}


All the best!
Thomas


Jeremy Ruston

unread,
Jan 13, 2017, 10:19:21 AM1/13/17
to tiddly...@googlegroups.com
Hi Mat

@Jeremy - would it make sense to make PRs for these? 

Neat, by the way. Always surprising what can be done with CSS.

In what form would you suggest making the PRs?

Yes, how should a small CSS piece, but that also requires a surrounding div and therefore a little documentation, be a PR?

Well, it could be a “how to” tiddler, but to be honest these tweaks don’t seem general enough; the other “how tos” cover universal, or near-universal needs, not something so specific.

I’d love to have a “family tree” edition in the core, but of course we’d need the author to commit to maintaining it.

I must assume you mean an edition for a real family tree, right? (Surely, my little css isn't enough to make a whole edition?) That would in deed be cool and I imagine some might find it useful. One of the areas I've identified as a TiddlyWiki Appetizer is geneaology where I think visual family trees would fit perfectly.

A full genealogical edition would be ideal, yes.

One thing you could do would be to start treating the listing on tiddlywiki.com as the primary index to your “finished” stuff.

Yeah. Will post about these latest things within the next few days.

Great, thanks

Best wishes

Jeremy


<:-)



--
You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywikide...@googlegroups.com.
To post to this group, send email to tiddly...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywikidev.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/ebfe36aa-1819-4d82-87db-085531fe7aa7%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Pit.W.

unread,
Jan 13, 2017, 10:32:37 AM1/13/17
to tiddly...@googlegroups.com

All,

probably I am (as often) completly missing the point, but couldn't tidgraph be either a solution or a starting point for the wizards to develop one? 

https://ihm4u.github.io/tw5plugs/#Tidgraph%20-%20Easy%20tiddler%20graphs%20for%20TW5

Pit

--
You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywikide...@googlegroups.com.
To post to this group, send email to tiddly...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywikidev.

Thomas Elmiger

unread,
Jan 14, 2017, 3:58:19 AM1/14/17
to TiddlyWikiDev
Hi again Mat, I have to correct myself.

This is shorter and better as it allows for more than one tree in the same div:


.list-tree > ul > li:first-child::before {
    border: none;
}
.list-tree > ul > li:first-child::after {
    border: none;
}

I made a private fork now, maybe I can help with more tweaks later on.


All the best!
Thomas


Thomas Elmiger

unread,
Jan 14, 2017, 9:55:40 AM1/14/17
to TiddlyWikiDev
Hi Mat

Find the result of my experimenting with rem and em (not sure if the result makes sence, but it works in all my browsers) and all my other tweaks here: http://tid.li/tw5/styles.html

Please feel free to steal back from me!

Have a nice weekend
Thomas

Mat

unread,
Jan 14, 2017, 8:19:34 PM1/14/17
to TiddlyWikiDev

On Friday, January 13, 2017 at 4:19:21 PM UTC+1, Jeremy Ruston wrote:

Well, it could be a “how to” tiddler, but to be honest these tweaks don’t seem general enough; the other “how tos” cover universal, or near-universal needs, not something so specific.

I agree. For "how-tos" they're too specific.

The feature itself though, i.e a tree representations of sorts, is not without merit. Would it make sense to make bullet lists - or, rather, asterisk lists - parse differently? I.e so not require the surrounding div in the variants I gave here? Perhaps something comparable to how WikiText tables can have a simple indicating letter to apply special formatting for Classes, Captions, Headers and Footers (ref Tables in WikiText). Incidentally, a "how-to" for a comparable list solution would fit perfectly in Lists in WikiText.

BTW, in Lists in WikiText, there is a how-to on CSS Classes for individual list elements:

* List One
*.MyClass List Two
* List Three

Maybe we could have something similar to style the whole list?

*.tree
* List One
* List Two
* List Three


I'm not capable of making a PR for this, but I'll post it as a git issue request, unless there is reason not to - ?


<:-)

David Szego

unread,
Jan 17, 2017, 8:51:52 PM1/17/17
to TiddlyWikiDev, Pi...@eclipso.ch
Pit, TidGraph is brilliant... Now, how do we import GEDCOM files into individual Tiddlers, with the fields mapped to TW fields, so they can be shown in a template in the body of the Tiddler, and linked via a TidGraph?

David.

Mat

unread,
Jan 25, 2017, 2:31:26 AM1/25/17
to TiddlyWikiDev
Note; I just released an official version of TreeList, i.e the above mentioned stylesheet to style bullet lists as trees. Some improvements were made since I posted here above and it's plugin'ified.

The family tree version is to come eventually.

<:-)
Reply all
Reply to author
Forward
0 new messages