Bigraphs 2019 02 - A Bigraph Relational Model again

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Wed Jun 26 2019 11:18:01 GMT-0400 (Eastern Daylight Time)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: Bigraphs 2019 02 - A Bigraph Relational Model again
Description: 
Url: http://www.primordion.com/Xholon/gwt/
InternalName: a9610cea4e7b1cf62ac9f270469a740a
Keywords: 

My Notes
--------
June 25, 2019

Use interact.js to manually construct a bigraph from the components in its specification.

http://127.0.0.1:8888/XholonInteract.html?app=Bigraphs%202019%2002%20-%20A%20Bigraph%20Relational%20Model%20again&src=lstr&gui=clsc
http://127.0.0.1:8888/Xholon.html?app=Bigraphs%202019%2002%20-%20A%20Bigraph%20Relational%20Model%20again&src=lstr&gui=clsc&jslib=interact-1.1.3.min,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
  prntB={(a,b),(c,0),(b,c)}
 - 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

TODO
----
- 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

References
----------
(1) https://gist.github.com/kenwebb/6882561aa5b59ab93cace22d02840bae
    Bigraphs 2019 01 - A Bigraph Relational Model

(2) https://arxiv.org/pdf/1111.0086.pdf
    A Bigraph Relational Model, by Maxime Beauquier and Carstern Schurmann, IT University of Copenhagen, 2011

(3) http://www.primordion.com/Xholon/gwt/XholonInteract.html?app=6901ef51d5fcb2d86a21&src=gist&gui=none
    Xholon with interact.js

(4) http://interactjs.io/
(5) https://github.com/taye/interact.js
(6) https://hacks.mozilla.org/2014/11/interact-js-for-drag-and-drop-resizing-and-multi-touch-gestures/

(7) https://gist.github.com/kenwebb/93b7e2168457dec2c1fdc7ca0fd685db
    Island Bigraph1
    Island Game specified as a Bigraph.

(8) https://www.researchgate.net/publication/272684665_Recurrent_Neural_Networks_and_Super-Turing_Interactive_Computation
    Recurrent Neural Networks and Super-Turing Interactive Computation, by Jérémie Cabessa and Alessandro E.P. Villa, 2015


]]></Notes> 

<_-.XholonClass>
  <TheSystem/>
  
  <BigraphParser superClass="script"/>
  
</_-.XholonClass>

<xholonClassDetails>
  <BigraphParser><DefaultContent>@BigraphParser</DefaultContent></BigraphParser>
  <Avatar><Color>red</Color></Avatar>
</xholonClassDetails>

<TheSystem>
  
  <!-- an existing test model that I can use as a template|example -->
  <Bigraph roleName="0"><Attribute_String><![CDATA[
# testing
B=(VB,EB,PB,ctrlB,prntB,linkB):〈m,X〉→〈n,Y〉,
m=0,X=∅,n=1,Y={c,co,t},
Σ=({get,send,sum},{(get,1),(send,1),(sum,0)}),
VB={a,b,d,e,f,g,h,i,j,k,l},
EB=∅,
EB={q},
PB={p(b,1),p(e,1),p(g,1),p(i,1),p(j,1),p(l,1)},
PB={p(e,1),p(e,2)},
ctrlB={(a,sum),(b,send),(d,sum),(e,get),(f,sum),(g,get),(h,sum),(i,send),(j,get),(k,sum),(l,send)},
prntB={(a,0),(f,0),(b,a),(d,b),(e,d),(g,f),(h,g),(i,h),(j,f),(k,j),(l,k)},
linkB={(p(b,1),c),(p(e,1),co),(p(g,1),c),(p(i,1),co),(p(j,1),c),(p(l,1),t)},
linkB={(p(e,1),l),(p(e,2),i)}
]]></Attribute_String>
    <BigraphParser/>
  </Bigraph>
  
  <!-- a portion of Bigraph 0; this is the minimum configuration required to generate a Set of nodes -->
  <Bigraph roleName="1"><Attribute_String><![CDATA[
B=(VB,EB,PB,ctrlB,prntB,linkB):〈m,X〉→〈n,Y〉,
m=0,X=∅,n=1,Y={c,co,t},
Σ=({get,send,sum},{(get,1),(send,1),(sum,0)}),
VB={a,b,d,e,f,g,h,i,j,k,l},
ctrlB={(a,sum),(b,send),(d,sum),(e,get),(f,sum),(g,get),(h,sum),(i,send),(j,get),(k,sum),(l,send)}
]]></Attribute_String>
    <BigraphParser/>
  </Bigraph>

  <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;}"/>

</TheSystem>

<Chameleonbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
//$wnd.xh.require("interact-1.1.3.min");
//$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
/*$wnd.interact('#xhgraph>svg').resizable(true)
.on('resizemove', function (event) {
  //$wnd.console.log("resizing");
  var target = event.target;
  $wnd.console.log(target.width.baseVal.value);
  //$wnd.console.log(target.style.width);
  
  // add the change in coords to the previous width of the target element
  var
    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 = event.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 = event.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
  target.style.webkitTransform = target.style.transform =
    '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 = event.target.querySelector('p');
  //textEl && (textEl.textContent = 'moved a distance of '
  // + (Math.sqrt(event.dx * event.dx + event.dy * event.dy)|0) + 'px');
 }
}).inertia(true);

// 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
  //$wnd.console.log("ondropactivate");
  event.target.classList.add('drop-active');
 },
 
 ondragenter: function (event) {
  var draggableElement = event.relatedTarget,
   dropzoneElement = event.target;
  //$wnd.console.log("ondragenter");
  
  // feedback the possibility of a drop
  dropzoneElement.classList.add('drop-target');
  draggableElement.classList.add('can-drop');
  //draggableElement.querySelector("text").textContent = 'N';
 },
 
 ondragleave: function (event) {
  // remove the drop feedback style
  //$wnd.console.log("ondragleave");
  event.target.classList.remove('drop-target');
  event.relatedTarget.classList.remove('can-drop');
  //event.relatedTarget.querySelector("text").textContent = 'T';
 },
 
 ondrop: function (event) {
   var xhroot = $wnd.xh.root();
   var svgchld = event.relatedTarget;
   var svgprnt = event.target;
   var xhchld = xhroot.xpath("descendant-or-self::*[@name='" + svgchld.id + "']");
   var xhprnt = xhroot.xpath("descendant-or-self::*[@name='" + svgprnt.id + "']");
   if (xhchld && xhprnt) {
     if (xhchld.parent() != xhprnt) {
       xhprnt.append(xhchld.remove());
       xhroot.println(xhchld.name() + " has moved to " + xhprnt.name());
     }
     else {
       xhroot.println(xhchld.name() + " has stayed inside " + xhprnt.name());
     }
   }
   else {
     xhroot.println(svgchld.id + " has unknown location");
   }
 },
 
 ondropdeactivate: function (event) {
  // remove active dropzone feedback
  //$wnd.console.log("ondropdeactivate");
  event.target.classList.remove('drop-active');
  event.target.classList.remove('drop-target');
 }
});
]]></Chameleonbehavior>

<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");
  div.appendChild(one);
  
  one.appendChild($wnd.xh.svg.caption);
  $wnd.xh.root().append(this.cnode.remove());
}
}
]]></TheSystembehavior>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>Bigraph 0</title>
    <rect id="TheSystem/Bigraph" fill="#98FB98" height="50" width="50" x="25" y="0"/>
    <g>
      <title>Bigraph 1</title>
      <rect id="TheSystem/Bigraph[2]" fill="#6AB06A" height="50" width="10" x="80" y="0"/>
    </g>
  </g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>