Re: [tw] Re: [TW5] Tidgraph - Easy tiddler graphs - New version 0.8.17

[ihm4u]

Hi Tobias,


You're very welcome. It's a great (actually quite little) plugin with big
potential.


Thanks!!!



What would you think about me opening up a bunch of issues in your repo
with my suggestions, so you can further chunk them up or give code-related
feedback, talk details, etc.?



Thanks for the offer, but it would be kind of hard at the moment to keep track
of it on github for me.

Appreciate your help very much, and most of all your ideas!! It would  
have never
occurred to me to use node templates, and now that I have some code  
working it is

AMAZING!! It will allow people to share "node templates"!! That is great.

This is why this community is so great!!

ihm

--
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/20151115180526.Horde.Q_bcKqVUuRKfudqI2w49_xO%40www.newsfromgod.com.
For more options, visit https://groups.google.com/d/optout.

Re: [tw] Re: [TW5] Tidgraph - Easy tiddler graphs - New version 0.8.17

[Tobias Beer]

Hi ihm,
 

> WOW!!! A few things! hehehehehehehehe 
>
They are GREAT ideas!!!  I am going through them and will work on the 
> low-hanging fruit ASAP. There are others that are difficult.
>

Low hanging fruits are tasty. :D

I really like the idea of node templates, I think I might target that first.
>

Great!
 

> You would be able to add images, etc. However, Sylvain had requested 
> vertical layout. I think vertical layout is much more difficult to do than 
> the node templates. I will definitely skip reverse layouts for now :) only 
> South and East are in my radar screen at the moment.
>

I sure see how that's the most difficult part in terms of abstracting and 
refactoring and figuring out algorithms that would cater all cases in one.
 

> As for the node templates, what do you think about the following:
>
> 1. A nodetemplate attribute which is applied to all nodes *unless* :
>

Yes.
 

> 2. the node has a field called tgr-node-template indicating the template
>

Yep.
 

> 3. After choosing the base template from rules 1&2:
>
> 3.1. If a node template exists with the base template name followed by 
> a number (eg. my-node-template-1) then it will beapplied for nodes at 
> that level otherwise the base template is used.
>

Even better, but perhaps postpone until the basics work, e.g. 1 first and 
then 2. This may get complicated, unless it isn't then go ahead. 

 Also: Every template that has a tgr-css-class field will override the CSS 
> class for the node in question.
>

Good thinking. I think it needs to be override, as the basic template 
already has a load of graphic features, e.g. dropshadows. So, you wouldn't 
want to override that but rather start from scratch.
 

> I will keep the node title attribute and extend it to specify a list of 
> fields instead of just one field. The first one with a value will be used 
> (if nodetemplate is not defined).
>

As I said, I would really use a {{||template}}... that way you don't define 
anything and users are free to stick into the node whatever they want, 
content-wise.
 

> e.g. "caption mynicetitle title" will use caption if it exists, otherwise 
> mynicetitle and title as last resort.
>

That would be for an individual template to implement. But, I would not 
burden myself with anticipating useful templates. Instead, being able to 
define a custom template allows to fully control the presentation.
 

> Edge Templates
> For edge templates I have to think about that one a lot, that is much much 
> more difficult to do in a proper extendable way because there is a lot of 
> computations involved to calculate the edges and the average user will have 
> to code javascript to do it. Might not be a good idea, but I'll keep 
> thinking about it.
>

I understand. I have not looked at your code close enough to understand 
what's involved or if that's even doable (without js).

Plugin config name standard
> BTW, what is the standard naming convention for plugin configuration 
> tiddlers?
> is it $:/config/plugins//
> or is it $:/config///???
>

Tbh, I don't think there are tight conventions. Possibly, the config should 
even be under the plugin namespace. But yes, having the username be part of 
it makes sense, so either:

*$:/config/plugins/ihm/tidgraph/config*

or perhaps actually better:

*$:/plugins/ihm/tidgraph/config*
 

> Custom modes
> This one is easy to do by using configurable filters like you suggested, 
> what use-cases did you have in mind?
>

Aplenty, for starters, the reverse of the two that are given, so links and 
tags. And then also "listed" or "listing" in a given field.

Thanks for all your help!
>

You're very welcome. It's a great (actually quite little) plugin with big 
potential.

What would you think about me opening up a bunch of issues in your repo 
with my suggestions, so you can further chunk them up or give code-related 
feedback, talk details, etc.?

Best wishes,

— tb

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/ff7f56d4-71dd-4c68-ac5e-e63ae4ed64ee%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [tw] Re: [TW5] Tidgraph - Easy tiddler graphs - New version 0.8.17

[ihm4u]

Hi Tobias!


A Few Things

Of course there are ...a few more things...
that I would find amazing for Tidgraph to progress,
should you decide to work on any:


WOW!!! A few things! hehehehehehehehe
They are GREAT ideas!!!  I am going through them and will work on the
low-hanging fruit ASAP. There are others that are difficult.

I will comment as I work on them...

Node Templates
I really like the idea of node templates, I think I might target that
first. You would be able to add images, etc. However, Sylvain had requested
vertical layout. I think vertical layout is much more difficult to do than
the node templates. I will definitely skip reverse layouts for now :) only
South and East are in my radar screen at the moment.

As for the node templates, what do you think about the following:

1. A nodetemplate attribute which is applied to all nodes *unless* :
2. the node has a field called tgr-node-template indicating the template
3. After choosing the base template from rules 1&2:

    3.1. If a node template exists with the base template name followed
by a number (eg. my-node-template-1) then it will be    applied for
nodes at that level otherwise the base template is used.
 
Also: Every template that has a tgr-css-class field will override the CSS
class for the node in question.

I will keep the node title attribute and extend it to specify a list of
fields instead of just one field. The first one with a value will be used
(if nodetemplate is not defined).
e.g. "caption mynicetitle title" will use caption if it exists, otherwise
mynicetitle and title as last resort.

Edge Templates
For edge templates I have to think about that one a lot, that is much much
more difficult to do in a proper extendable way because there is a lot of
computations involved to calculate the edges and the average user will have
to code javascript to do it. Might not be a good idea, but I'll keep
thinking about it.

Plugin config name standard
BTW, what is the standard naming convention for plugin configuration
tiddlers?
is it $:/config/plugins//
or is it $:/config///???

Custom modes
This one is easy to do by using configurable filters like you suggested,
what use-cases did you have in mind?

Thanks for all your help!
BTW. Version 0.8.18 is out with a fix for utf8 chars, but I won't make an
announcement post to avoid cluttering the group :)

Thanks!
ihm

Quoting Tobias Beer :


Hi ihm,

reduce size of plugin


Thank you, much appreciated.

nicer collapse glyph (thanks to Tobias Beer)


Thanks for that as well. :-)

A Few Things

Of course there are ...a few more things...
that I would find amazing for Tidgraph to progress,
should you decide to work on any:

Toggle Button

Now that I see it working, I'm starting to think that
perhaps it doesn't actually need any visible text (or borders).

Ah wait, I see you're using these special glyphs now (which come with

their

own "glyph-borders").
Mhhh, they're a little to much for my taste and also weirdly

off-centered,

vertically.

I'd be in favor of...

  ·  click to close ()
  +  click to open

Eventually, I'd not have them hard-coded into the plugin code.
(see below for using css for that)

For me, a plain round shaped button to toggle the children would be

obvious

enough.
The button itself currently feels slightly uncentered towards the top
(perhaps that's owed to the drop-shadow)
and slightly too big for my taste, but we have css to the rescue. ;-)

Here's what looks good to me:

.ihm-tgr-collapse {
     position: absolute;
     cursor: pointer;
     color: #ccc !important;
     border-radius: 12px;
     line-height: 12px;
     width: 12px;
     height: 12px;
     background: #aeb0b5;
     top: *53**%*;
     transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     right: -15px;
     font: 12px Arial, sans-serif;
}

Toggle Button via CSS

For any text inside the collapse button, I'd suggest to use plain css for
it, e.g.

.the-button{
...
}
.the-button .the-button-closed{
content:"+";
}
.the-button .the-button-open{
content:"";
}

Wrapping the actual text in a span as in this example:


.the-button .the-button-open:before {content:"·"}

So, that would make customization of that button possible and a matter
of pure css.

Custom Filters
(actually fairly straight forward)

I'm thinking that your *modes* should actually be defined by a bunch of
config tiddlers that, for one, define filters as for fetching any

children,

e.g

title: $:/config/plugins/tidgraph/modes/tagging
children: [all[current]tagging[]

title: $:/config/plugins/tidgraph/modes/linking
children: [all[current]links[]!ismissing[]

That way, it would be easy to define (and share !) any arbitrary filters

as

mode-tiddlers and have them automatically available for use in Tidgraph.

Node Title
(also straight forward)

The node title would be more flexible if defined as a template rather

than

by specifying a field.
That way one can freely 

[tw] Re: [TW5] Tidgraph - Easy tiddler graphs - New version 0.8.17

[Tobias Beer]

Hi ihm,

reduce size of plugin


Thank you, much appreciated.

nicer collapse glyph (thanks to Tobias Beer)


Thanks for that as well. :-)

A Few Things

Of course there are ...a few more things...
that I would find amazing for Tidgraph to progress,
should you decide to work on any:

Toggle Button

Now that I see it working, I'm starting to think that
perhaps it doesn't actually need any visible text (or borders).

Ah wait, I see you're using these special glyphs now (which come with their 
own "glyph-borders").
Mhhh, they're a little to much for my taste and also weirdly off-centered, 
vertically.

I'd be in favor of...

 ·  click to close ()
 +  click to open

Eventually, I'd not have them hard-coded into the plugin code.
(see below for using css for that)

For me, a plain round shaped button to toggle the children would be obvious 
enough.
The button itself currently feels slightly uncentered towards the top 
(perhaps that's owed to the drop-shadow)
and slightly too big for my taste, but we have css to the rescue. ;-)

Here's what looks good to me:

.ihm-tgr-collapse {
position: absolute;
cursor: pointer;
color: #ccc !important;
border-radius: 12px;
line-height: 12px;
width: 12px;
height: 12px;
background: #aeb0b5;
top: *53**%*;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
right: -15px;
font: 12px Arial, sans-serif;
}

Toggle Button via CSS

For any text inside the collapse button, I'd suggest to use plain css for 
it, e.g.

.the-button{
...
}
.the-button .the-button-closed{
content:"+";
}
.the-button .the-button-open{
content:"";
}

Wrapping the actual text in a span as in this example:


.the-button .the-button-open:before {content:"·"}

So, that would make customization of that button possible and a matter 
of pure css.

Custom Filters
(actually fairly straight forward)

I'm thinking that your *modes* should actually be defined by a bunch of 
config tiddlers that, for one, define filters as for fetching any children, 
e.g

title: $:/config/plugins/tidgraph/modes/tagging
children: [all[current]tagging[]

title: $:/config/plugins/tidgraph/modes/linking
children: [all[current]links[]!ismissing[]

That way, it would be easy to define (and share !) any arbitrary filters as 
mode-tiddlers and have them automatically available for use in Tidgraph.

Node Title
(also straight forward)

The node title would be more flexible if defined as a template rather than 
by specifying a field.
That way one can freely define what to display inside a node, e.g. a field 
or whatever, a link or no link.

title: $:/config/plugins/tidgraph/templates/title/no-link
tidgraph-node-template:no-link

<$view field="tidgraph-caption"><$view 
field="caption"><$view field="title">

So, a user would specify *no-link* looked up via *tidgraph-node-template*, 
however the actual tiddler holding the template could be named anything and 
moved wherever. You can see this approach in how I am looking up a *dict* 
field in this macro for building and using an acronym dictionary 

.

Orientation

I am almost sure you have pondered this already and perhaps it is quite a 
challenge to do the transformational computations. It would be uber-cool to 
have tidgraph operate in one of four orientations, namely N E S W ...the 
currently available option being E.

   - E => eastwards: left to right
   - S => southbound: top to bottom (organigram)
   - W => westwards: right to left (reverse) => so you could show those 
   corresponding sins alongside the virtues, in reverse :-)
   - N => northbound: bottom to top (reverse organigram)

Parent Position

In that same spirit, the root or *parent position* could be defined 
relative to the group of children:



So...


   - 0 (default)
   center root node with any children, vertically (or at some point also 
   horizontally)
   
   - -100
   align with first element
   
   - 100
   align with last element
   
   - -125
   align a quarter of the distance from the first child to the center 
   outside (the virtual bounding rectangle of) the children-box
   => i.e. the root node would be higher than all children, like a bubble 
   downwards
   

   - 125
   align a quarter of the distance from center to last child 
   outside (the virtual bounding rectangle of) the children-box
   => i.e. the root node would be lower than all children, like a bubble 
   upwards

This could work with any orientation N E S W, so for S and N it would be 
from left (-100) to right (100).

Edges

Possibly, edge styles could be made as pluggable as the above proposal for 
modes via svg template tiddlers. That way one could define new edge styles, 
the default being this bezier svg. Perhaps you have seen how some 
mind-mapping applications have paths 

[tw] Re: [TW5] Tidgraph - Easy tiddler graphs - New version 0.8.17

[Tobias Beer]

Node Title Configuration

Expanding on the above section called node title, it may be desireable to 
be able to define, for a given *node*, how to display it for a given mode.
For that, the node would specify tidgraph related fields that define the 
template to be used for a given mode, e.g.

title:Some Tiddler
tidgraph-template: {{$:/my/templates/plugins/tidgraph/nodes/plain-node}}
tidgraph-template-tagging: {{$:/my/templates/plugins/tidgraph/nodes/fancy-
info-box}}
tidgraph-template-linking: {{$:/my/templates/plugins/tidgraph/nodes/fancy-
box-with-special-linking-info}}

So, the template defined in *tidgraph-template* would be the one applied to 
all modes, unless specifically declared by specifying 
*tidgraph-template-*.

This necessitates that modes are always follow the field naming conventions!

Best wishes,

— tb

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/83cec492-2460-444e-bec1-d0192a9a76e5%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.