New subject: Agile visualization book as an interactive grafoscopio document

9 Feb 2015

Hi all,

This mail will have two parts, a small first one where I share my 
advances and little context on the project and the second one, with 
details where I made specific questions regarding concepts and code and 
how to make progress. I hope to be fluid and proper balanced and 
interesting enough to get feedback soon.

Context
=======

I have made a small video at [1] showing my progress on Grafoscopio[2], 
a tool for the creation of interactive notebooks for open/citizen/garage 
science and research (for a better view I recommend to see the video in 
full screen mode).

As you can see, I have a complete outline of the Agile Visualization 
book stored as a single "ston document" [3], that can be exported to 
pandoc's markdown [4] and from there to LaTeX, pdf, html, doc, etc.
It can contain special tagged nodes and the view and behaviour of them 
change accordingly to the tag. In the video a node tagged as code is 
showed as an interactive playground where you can execute an explore the 
objects deeper.

My problem is that this kind of special nodes are not saved, as happens 
with default nodes and the reason is that the special view (which is a 
sub-browser) is not wired properly to the rest of the browser and that's 
why I get a nill value after revisiting the code node in the video.

[1] https://archive.org/details/gfcp-alpha-code-exec-but-non-saving.mp4

[2] 
http://mutabit.com/offray/static/blog/output/posts/grafoscopio-idea-and-ini…

[3] 
http://mutabit.com/deltas/repos.fossil/grafoscopio/doc/tip/Docs/En/Books/Ag…

[4] 
http://mutabit.com/deltas/repos.fossil/grafoscopio/doc/tip/Docs/En/Books/Ag…

Details
=======

The logic of what I'm doing is something like this:

i. When a node in tree at the left is selected, it shows the contents of 
the selected tree.

ii. If something changes in the node content at the right, the changes 
are automatically updated.

iii. If a node is tagged in a special way, a custom browser is called.

The code that select which sub-browser to show for a particular tagged 
node is something like this:

==[a]==============================
UI>>buildBrowserNamed: aName
"Main method for building the interface for trees and its nodes. The 
name of the browser corresponds to the name of the file
where tree is stored (or is named 'draft.ston' by default)"

"... snip"

(browser transmit)
    from: #tree port: #selection;
    to: #nodeBody;
	when: [:selection | selection notNil];
    andShow: [ :a :node |
		self bodyIn: a for: node.
		self body2ForCodeIn: a for: node.
		self bodyForTransmediaIn: a for: node ].
"... snip"

"Creating a self updatable body pane"
(browser transmit)
    from: #tree port: #selection;
    to: #nodeBody;
	when: [:selection | selection notNil];
    andShow: [ :a :node |
		self bodyIn: a for: node.
		self body2ForCodeIn: a for: node.
		self bodyForTransmediaIn: a for: node ].
(browser transmit )
	 from: #tree port: #selection;
	 from: #nodeBody port: #text;
	 when: [:node :text | text notNil & node notNil];
	 to: #nodeBody port: #neverland;
	 transformed: [:node :text | node body: text asString].
(browser transmit)
	 from: #tree;
     to: #nodeHeader;
     andShow: [ :h | self headerOn: h ].
(browser transmit )
	 from: #tree port: #selection;
	 from: #nodeHeader port: #text;
	 to: #nodeHeader port: #neverland1;
	 when: [:node :text | text notNil & node notNil];
	 transformed: [:node :text | node header: text asString]

===================================

The last part of the code is responsible for updating the tree contents 
automatically with

The "body2ForCodeIn: for:" [b] is the responsible for showing the 
playground by calling a custom browser that is called 
"panelAsCodeFor:"[c]. Here is their code:

==[b]==============================
UI>> body2ForCodeIn: constructor for: aNode
	"Shows the body of a selected node as executable code."

	aNode tags = 'código'
		ifFalse: [ ^self ]
		ifTrue: [constructor custom: (self panelAsCodeFor: aNode)].
===================================

==[c]==============================
panelAsCodeFor: aNode
	"Shows an interactive playground for Smalltalk code in a node body"

	browser := GLMTabulator new.
	browser title: 'Código'.
	browser column: #code.
	browser transmit
		to: #code;
		transformed: [ GTPlayPage new content: aNode body ];
		andShow: [ :a | a custom: GTPlayground new ].
	browser sendToOutside: #nodeBody from: #code -> #text.
	^ browser.
===================================

So, wiring by "sendToOutside: from:" is not working and I don't know how 
to tell my code browser to autosave its contents as part of the node 
body where they belong.

Any help with this is appreciated.

Cheers,

Offray