Skip to content

Instantly share code, notes, and snippets.

@kenwebb kenwebb/xholonWorkbook.xml
Last active Jun 26, 2019

What would you like to do?
Bigraphs 2019 02 - A Bigraph Relational Model again
<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook MIT License, Copyright (C) Ken Webb, Wed Jun 26 2019 11:18:01 GMT-0400 (Eastern Daylight Time)-->
Title: Bigraphs 2019 02 - A Bigraph Relational Model again
InternalName: a9610cea4e7b1cf62ac9f270469a740a
My Notes
June 25, 2019
Use interact.js to manually construct a bigraph from the components in its specification.,BigraphParser
notes from my paper notebook from June 25
VB is a set; the elements of VB can be written in any order
- and they can be processed in any order
prntB is a set of pairs
- elements of prntB can also be written/drawn/processed in any order
TODO simulate a math instructor drawing a bigraph on a blackboard
- as happens in a classroom and in a youtube or other vdeo
- I believe that the structures are/can be mathematically valid no matter how they are drawn
- they can be drawn in any order and at any time/timestep
- I can simulate drawing on the blackboard (the blackboard process) using my Xholon software
in a way, settting up the initial configuration is the same as working through an evolving/changing/morphing configuration
- using the blackboard metaphor, both of these processes take time to complete, and to some extent the steps can be performed in a random order
for example
- consider a set with three elements VB={a,b,c}, and a set prntB={} that specifies the parent mapping for each element in VB
- if a is supposed to end up being inside b, and b is supposed to be inside c, I can write or simulate using various time orderings, for example:
prntB={(c,0),(b,c),(a,b)} OR
- am I saying then that these sets are ordered sequences or pre-orders instead of sets?
- I could also state that the set of elements VB is a set, and so is prntB
- but the extended process of applying prntB to VB, at each timestep, selects elements randomly/stochastically
the specific time order of building up structures can make a big difference
- example: in a biological cell
I am simply trying to equate:
- 1. settting up an initial state/configuration, with
- 2. ongoing change from one configuration to another
should be able to use the same approac/operations in both cases
- example: linear logic and Celf and Ceptre
- example: bigraph/Milner matching
a concept from biology
- at every moment in the development and ongoing existence of an organism, the organism must be viable
see the Cabessa and Villa paper (ref 8 below)
notes from June 26
in a large real-world application, such as the Island Game, the processes of configuring VB and prntB could take a countably infinite amount of time
- if the elements of VB change their parent (map to a different parent) each timestep or at random timesteps
- DONE write-up notes from my paper notebook from June 25
- DONE start with just the set VB={a,b,d,e,f,g,h,i,j,k,l}, and then manually follow the instructions in prntB
see Bigraph "1" below in Composite Structure Hierarchy
this works
Bigraphs 2019 01 - A Bigraph Relational Model
A Bigraph Relational Model, by Maxime Beauquier and Carstern Schurmann, IT University of Copenhagen, 2011
Xholon with interact.js
Island Bigraph1
Island Game specified as a Bigraph.
Recurrent Neural Networks and Super-Turing Interactive Computation, by Jérémie Cabessa and Alessandro E.P. Villa, 2015
<BigraphParser superClass="script"/>
<!-- an existing test model that I can use as a template|example -->
<Bigraph roleName="0"><Attribute_String><![CDATA[
# testing
<!-- a portion of Bigraph 0; this is the minimum configuration required to generate a Set of nodes -->
<Bigraph roleName="1"><Attribute_String><![CDATA[
<Animate duration="1" selection="#one" xpath="./TheSystem" cssStyle=".d3cpnode circle {stroke-width: 0.5px;}" efParams="{&quot;selection&quot;:&quot;#one&quot;,&quot;sort&quot;:&quot;disable&quot;,&quot;width&quot;:700,&quot;height&quot;:700,&quot;mode&quot;:&quot;tween&quot;,&quot;labelContainers&quot;:true,&quot;includeClass&quot;:true,&quot;includeId&quot;:true,&quot;shape&quot;:&quot;circle&quot;}"/>
<Chameleonbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
//$wnd.xh.xport('_d3,CirclePack', $wnd.xh.root(), '{"shouldIncludeDecorations":true,"sort":"disable","width":200,"height":200,"mode":"new","labelContainers":true,"useSymbols":true,"includeClass":true,"includeId":true}',true);
// Resizing
// this sometimes interferes with drag and drop
.on('resizemove', function (event) {
var target =;
// add the change in coords to the previous width of the target element
newWidth = parseFloat(target.width.baseVal.value ) + event.dx,
newHeight = parseFloat(target.height.baseVal.value) + event.dy;
// update the element's style
target.width.baseVal.value = newWidth; // + 'px';
target.height.baseVal.value = newHeight; // + 'px';
//target.textContent = newWidth + '×' + newHeight;
var selection = '#xhanim>#one>svg g.d3cpnode'; //'#xhgraph>svg g.d3cpnode';
// Drag
var drag = $wnd.interact(selection).draggable({
onstart: function (event) {
var target =;
if (!target.getAttribute('data-x') && target.transform) {
target.setAttribute('data-x', target.transform.baseVal[0].matrix.e);
target.setAttribute('data-y', target.transform.baseVal[0].matrix.f);
//target.transform = "";
// call this function on every dragmove event
onmove: function (event) {
var target =,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element = =
'translate(' + x + 'px, ' + y + 'px)';
// update the position attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
// call this function on every dragend event
onend: function (event) {
//var textEl ='p');
//textEl && (textEl.textContent = 'moved a distance of '
// + (Math.sqrt(event.dx * event.dx + event.dy * event.dy)|0) + 'px');
// Drop
// drop works with the above drag, when I drag from a leaf node to another node
var drop = $wnd.interact(selection).dropzone({
ondropactivate: function (event) {
// add active dropzone feedback
ondragenter: function (event) {
var draggableElement = event.relatedTarget,
dropzoneElement =;
// feedback the possibility of a drop
//draggableElement.querySelector("text").textContent = 'N';
ondragleave: function (event) {
// remove the drop feedback style
//event.relatedTarget.querySelector("text").textContent = 'T';
ondrop: function (event) {
var xhroot = $wnd.xh.root();
var svgchld = event.relatedTarget;
var svgprnt =;
var xhchld = xhroot.xpath("descendant-or-self::*[@name='" + + "']");
var xhprnt = xhroot.xpath("descendant-or-self::*[@name='" + + "']");
if (xhchld && xhprnt) {
if (xhchld.parent() != xhprnt) {
xhroot.println( + " has moved to " +;
else {
xhroot.println( + " has stayed inside " +;
else {
xhroot.println( + " has unknown location");
ondropdeactivate: function (event) {
// remove active dropzone feedback
<TheSystembehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
var me, beh = {
postConfigure: function() {
me = this.cnode.parent();
// SVG caption
$wnd.xh.svg = {};
$wnd.xh.svg.caption = $doc.createElement("p");
$wnd.xh.svg.caption.textContent = $wnd.xh.param("ModelName");
var div = $doc.querySelector("#xhanim");
// create a new div for this animation
var one = $doc.createElement("div");
one.setAttribute("id", "one");
<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="">
<title>Bigraph 0</title>
<rect id="TheSystem/Bigraph" fill="#98FB98" height="50" width="50" x="25" y="0"/>
<title>Bigraph 1</title>
<rect id="TheSystem/Bigraph[2]" fill="#6AB06A" height="50" width="10" x="80" y="0"/>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.