How can I adjust the node sizes?

[Trent Larson]

I am trying to create a graph with a variety of node sizes. Here's a simple example: http://trentlarson.com/obviousness.html

The only way I've found is to increase the font size. This does pretty well, except that once I get over about 100 the text always wraps.

Here's an example from tiddlymap.org

I'd like to go up to a font size of about 200-300, so that I can have about 8-10 smaller sizes of nodes (down to font size of 1).

There are quirks in the behavior. (I call "horizontal" what I prefer without too much wrapping, while "vertical" is the undesired wrapping behavior.)

1. I cannot exactly describe how to make it wrap above font 100 or so; sometimes it is horizontal and sometimes it is vertical.
2. If I click on a node and then click off, it will usually go horizontal.
3. If it is horizontal and I mouse-over the node it will switch to vertical (usually).
4. Increasing the node size does nothing, though I think that's intended behavior because the documentation says something about being for nodes without text.
5. It seems that all other node shapes besides box (eg ellipses and circles) always go vertical and I can't find any way to make them go horizontal.
6. I tried getting them all to a horizontal state and then saving the tiddlywiki, but that doesn't preserve the horizontal state.

I see a couple of related issues:

• There is a concept of node types #250 and I found where I can create a node type, but I cannot see how to assign a node to that type nor how how to filter by that node type so maybe some of that will help.
• There are complications from #353 , and maybe that solution will help.

Any hints will help. I would be willing to specify the length or width of a node, or maybe specify types, or set some of the visjs styling properties (though I don't know how to do that outside of your configuration boxes).

[Trent Larson]

BTW, it seems like the "size" setting on a node is the right way to adjust the size, but it doesn't do anything... nothing changes when I increase the size.

• Note that I get this error when I make the size anything greater than 166: "TypeError: correspondingElement is undefined"

[Cameron Fischer]

I have dug through vis.js and vis-network. Those libraries don't have it set up to create a menu option to configure maximum width. However, it is still configurable, on a per node/view/node-type/tiddlymap basis. You just have to touch a little bit of json. The json is in the following locations:

• To edit all nodes across all views:
  • Edit the text of $:/plugins/felixhayashi/tiddlymap/config/vis/user
• To edit all nodes in one view:
  • Edit the config.vis of $:/plugins/felixhayashi/tiddlymap/graph/views/$(view name)$
• To edit a particular node type:
  • Edit the style of $:/plugins/felixhayashi/tiddlymap/graph/nodeTypes/$(node type)$
• To edit a particular node for all views:
  • Edit the tmap.style of the node's corresponding tiddler.
• To edit a particular node locally to one view:
  • Edit the json entry in the text of $:/plugins/felixhayashi/tiddlymap/graph/views/$(view name)$/map

You need to add the following json:

{"widthConstraint":{"maximum":600}}

Or not 600, but whatever you want. This will integrate with whatever other settings you have, so if you have the shape set, it might look like this:

{"widthConstraint":{"maximum":600},"shape":"ellipse"}

Exactly what you put varies slightly depending on view/node/node-type/etc, but it shouldn't be hard to figure out. And once it's set, changing other settings through the TiddlyMap menu won't reset it.

If this becomes a popular request, maybe I'll add some custom bits to the configuration menus, but that's way more of a headache than it sounds. Until then, people can do this. I am closing this issue in the meantime.

[Trent Larson]

Thank you. I've edited a style and seen it work... fantastic!

Can you point me to instructions for editing the config.vis for all nodes?

• I was able to find all the other items (eg. style, tmap.style) in points 1 & 3-5 in your list, but after searching and opening the tiddler I don't see anything about config.vis. I tried adding it explicitly like this but it didn't change anything:
  

• I also tried some global configurations but couldn't find it: #428

I hope to understand more about the engine behind these tiddlers, so I'll study more TiddlyWiki basics. Thanks for your help this far.

[Cameron Fischer]

Oh right. The config.vis field for views contains info for both nodes AND edges, so it's got another layer. Instead of:

{"widthConstraint":{"maximum":600},"shape":"ellipse"}

You need

{"nodes": {"widthConstraint":{"maximum":600},"shape":"ellipse"}}

Edited: Fixed field name to config.vis as mentioned below.

[Trent Larson]

Perfect! Thanks for the help. (BTW, if anyone reads that: it's 'config.vis' and not 'vis.config'. :-)