new "leaf" convention for terminal branches

components.js

@@ -117,7 +117,6 @@ let PivotForm = props =>
 let Section = props =>
 {
     let styles = css`
-        border-top:1px solid #aaa;
         .Heading
         {
             padding:6px 0 6px 0;
@@ -145,7 +144,19 @@ let Section = props =>
         }
         .Body
         {
-            margin:10px 0 10px 0;
+            position:relative;
+            padding:10px 0 20px 30px;
+            &::before
+            {
+                content: " ";
+                display:block;
+                position:absolute;
+                top:-8px;
+                left:8px;
+                width:3px;
+                height:100%;
+                background:black;
+            }
         }
     `;
 
@@ -165,20 +176,37 @@ let Modifier = props =>
 {
     let refNode = N.Step(props.modifier, "ModifyAt")[0];
 
-    let handlerClick = () =>
+    let handleDelete = () =>
     {
         Pivot.Unmodify(props.modifier);
         Render();
     };
 
+    let displayFields = [];
+    N.Walk(node=>{
+        displayFields.push(html`<input type='number'/>`)
+    }, Pivot.Schema, "sum");
+
+
     return html`
     <div>
         <div>${refNode.Meta.Label}</div>
-        <button onClick=${handlerClick}>delete</button>
+        <button onClick=${handleDelete}>Delete</button>
     </div>
     `;
 }
 
+let PivotBranch = ({node, widths}) =>
+{
+    let sumCells = node.Meta.Row.map(column=>h("td", null, column));
+    return html`
+    <tr>
+        <td></td>
+        ${sumCells}
+    </tr>
+    `;
+};
+
 let PivotRoot = ({pivot, children}) =>
 {
 
@@ -194,7 +222,7 @@ let PivotRoot = ({pivot, children}) =>
         font-size:24px;
     `;
 
-    let modifiers = N.Step(pivot, "Modifier") || [];
+    let modifiers = N.Step(pivot, "ModifyUp", false) || [];
 
     let handleDelete = ()=>
     {

index.html

@@ -236,7 +236,6 @@ var Pivot =
         {
             iterator = inLastBranch =>
             {
-                N.Connect(inRoot, inLastBranch, "Terminal");
                 inLastBranch.Meta.Leaves.forEach( inLeaf =>
                 {
                     // collect modifiers effecting leaves
@@ -267,7 +266,7 @@ var Pivot =
                     }
 
                     // lastly connect the leaf to the branch
-                    N.Connect(inLastBranch, inLeaf, "Hierarchy");
+                    N.Connect(inLastBranch, inLeaf, "Leaf");
                 });
                 delete inLastBranch.Meta.Leaves;
             }
@@ -296,7 +295,7 @@ var Pivot =
     Delete(inRoot)
     {
         // disconnect modifiers
-        let check = N.Step(inRoot, "Modifier");
+        let check = N.Step(inRoot, "ModifyUp", false);
         if(check)
         {
             while(check.length>0)
@@ -306,8 +305,8 @@ var Pivot =
         }
 
         // disconnect terminal branches
-        N.Walk(()=>{}, inRoot, "Terminal", inNode=>{
-            N.Disconnect(inNode, null, "Hierarchy");
+        N.Walk(()=>{}, inRoot, "Hierarchy", inNode=>{
+            N.Disconnect(inNode, null, "Leaf");
         });
 
         // disconnect from app
@@ -317,41 +316,37 @@ var Pivot =
     {
         let modified = N.Create({Label:"Modifier"});
 
-        // add the modifier to the appropriate root
-        N.ID.Walk++;
-        if(N.Step(inNode, "Hierarchy").length)
-        {
-            N.Walk(()=>{}, inNode, "Hierarchy", false, (inRoot)=>
-            {
-                N.Connect(inRoot, modified, "Modifier");
-            });
-        }
-        else
-        {
-            N.Connect(Pivot.Root, modified, "Modifier");
-        }
-
         // traverse
-        let leaves = [];
-        let gatherUp = n => N.Connect(modified, n, "ModifyUp");
-        let gatherDown = n =>
-        {
-            N.Connect(modified, n, "ModifyDown");
-            N.Step(n, "Hierarchy").length == 0 ?  leaves.push(n) : null;
-        };
-        let gatherOut = n => {
-
-            N.Connect(modified, n, "ModifyOut");
-
-        };
+        let gatherUp   = n => N.Connect(modified, n, "ModifyUp");
+        let gatherDown = n => N.Connect(modified, n, "ModifyDown");
+        let gatherOut  = n => N.Connect(modified, n, "ModifyOut");
 
         N.ID.Walk++;
         inNode.ID.Walk = N.ID.Walk;
+        
+        // at
         N.Connect(modified, inNode, "ModifyAt");
-
+        
+        // up
         N.Walk(gatherUp, inNode, "Hierarchy", false);
-        N.Walk(gatherDown, inNode, "Hierarchy");
-        leaves.forEach(leaf=>N.Walk(gatherOut, leaf, "Hierarchy", false));
+
+        // down 1
+        N.Walk(gatherDown, inNode, "Hierarchy", true, terminal=>
+        {
+            // down 2
+            // for each terminal node, step down into its leaves and gather down
+            N.Walk(gatherDown, terminal, "Leaf", true, leaf=>
+            {
+                // out 1
+                // walk back up on the leaf connections on other trees
+                N.Walk(gatherOut, leaf, "Leaf", false, terminal=>
+                {   
+                    // out 2
+                    // and continueup the hierarchy
+                    N.Walk(gatherOut, terminal, "Hierarchy", false);
+                });
+            });
+        });
 
         return modified;
     },
@@ -460,17 +455,28 @@ let ElNode = ({node, depth}) =>
         }
     }, "Unmodify");
 
+    let children = N.Step(node, "Hierarchy");
+    let childrenDisplay = {};
+    if(children.length)
+    {
+        childrenDisplay = h("div", {className:"Nodes"}, N.Step(node, "Hierarchy").map(child=>h(ElNode, {node:child, depth:depth+1})) );
+    }
+    else
+    {
+        childrenDisplay = h("div", {className:"Nodes Leaf"}, N.Step(node, "Leaf").map(child=>h(ElNode, {node:child, depth:depth+1})) );
+    }
+
     return h("div", {className:"Node"}, [
         h("div", {className:cx(nodeBase, "Upper")}, [
             h("div", {className:label}, [
-                h("span", {className:"Icon Expand"}, "+"),
+                h("span", {className:"Icon Expand"}),
                 h("span", {className:"Name"}, (node.Meta.Label || "a node")+" "+node.ID.Walk),
                 h("span", {className: icon}),
                 N.Step(node, "ModifyAt") ? buttonUnmodify : buttonModify
             ] ),
             h("div", {className:"Table"}, (node.Meta.Row || []).map( cell => h("div", {className:"Cell"}, cell)) )
         ]),
-        h("div", {className:"Nodes"}, N.Step(node, "Hierarchy").map(child=>h(ElNode, {node:child, depth:depth+1})) )
+        childrenDisplay
     ]);
 };