index.html

@@ -172,14 +172,19 @@ var N =
 var Pivot = 
 {
     Leaves:{},
-    Root:N.Create({}),
-
-    Init(inRows)
-    {
+    Root:N.Create({Label:"All Pivots"}),
+    Schema:N.Create({Label:"Column Details"}),
+    Proto:N.Create({Label:"User Form"}),
+    Init(inColumnNames, inColumnTypes, inRows)
+    {        
+        for(let i=0; i<inColumnNames.length; i++)
+        {
+            N.Connect(Pivot.Schema, N.Create({Label:inColumnNames[i], Index:i}), inColumnTypes[i]);
+        }
         Pivot.Leaves = inRows.map(r => N.Create({Row:r}));
         Pivot.Init = ()=>{};
     },
-    Pivot(inParent, inPivotIndicies, inSumIndicies, inDepth)
+    Pivot(inRoot, inParent, inPivotIndicies, inSumIndicies, inDepth)
     {
         //arguments:
         //    - a Node with leaf Nodes temporarily stored in its Meta.Leaves
@@ -226,6 +231,7 @@ var Pivot =
         {
             iterator = inLastBranch =>
             {
+                N.Connect(inRoot, inLastBranch, "Terminal");
                 inLastBranch.Meta.Leaves.forEach( inLeaf =>
                 {
                     // collect modifiers effecting leaves
@@ -247,7 +253,7 @@ var Pivot =
                         inLastBranch.ID.Walk = N.ID.Walk;
                         modifiers.forEach( inModifier => N.Connect(inModifier, inLastBranch, "ModifyUp") )
 
-                        // also walk them up, but with a unique check connection
+                        // also walk them up and connect, but with "check unique" enabled
                         N.Walk( inNode=>
                         {
                             modifiers.forEach( inModifier => N.Connect(inModifier, inNode, "ModifyUp", true) )
@@ -263,7 +269,7 @@ var Pivot =
         }
         else
         {
-            iterator = child => Pivot.Pivot(child, inPivotIndicies, inSumIndicies, depth+1);
+            iterator = child => Pivot.Pivot(inRoot, child, inPivotIndicies, inSumIndicies, depth+1);
         }
         N.Step(inParent, "Hierarchy").forEach(iterator);
         return inParent;
@@ -274,10 +280,11 @@ var Pivot =
         
         let pivotRoot = N.Create({Label:"Pivot Root", Leaves:Pivot.Leaves});
         N.Connect(Pivot.Root, pivotRoot, "Pivot");
-        return Pivot.Pivot(pivotRoot, inPivotIndicies, inSumIndicies);
+        return Pivot.Pivot(pivotRoot, pivotRoot, inPivotIndicies, inSumIndicies);
     },
     Delete(inRoot)
     {
+        // disconnect modifiers
         let check = N.Step(inRoot, "Modifier");
         if(check)
         {
@@ -286,6 +293,14 @@ var Pivot =
                 Pivot.Unmodify(check[0]);
             }
         }
+
+        // disconnect terminal branches
+        N.Walk(()=>{}, inRoot, "Terminal", inNode=>{
+            N.Disconnect(inNode, null, "Hierarchy");
+        });
+
+        // disconnect from app
+        N.Disconnect(null, inRoot, "Pivot")
     },
     Modify(inNode)
     {
@@ -339,21 +354,76 @@ import { h, render, createContext, Fragment } from 'https://cdn.skypack.dev/prea
 import { useReducer } from 'https://cdn.skypack.dev/preact/hooks';
 import { css, cx } from 'https://cdn.skypack.dev/@emotion/css';
 
-Pivot.Init([
-    ["#1", "a", "long",  1],
-    ["#2", "b", "long",  2],
-    ["#3", "b", "short", 2],
-    ["#4", "a", "long",  3],
-    ["#5", "b", "short", 1],
-    ["#6", "a", "short", 0],
-    ["#7", "b", "short", 7],
-]);
-Pivot.Create([1, 2], [3]);
+Pivot.Init(
+    ["number", "type-a", "type-b", "count"],
+    ["label", "label", "label", "sum"],
+    [
+    ["#1", "a", "long",  1, 4],
+    ["#2", "b", "long",  2, 4],
+    ["#3", "b", "short", 2, 4],
+    ["#4", "a", "long",  3, 4],
+    ["#5", "b", "short", 1, 4],
+    ["#6", "a", "short", 0, 4],
+    ["#7", "b", "short", 7, 4]
+    ]
+);
 
-let AddNewPivot = () =>
+let ElForm = props =>
 {
-    Pivot.Create([2], [3]);
-    Render();
+    let labelColumns = N.Step(Pivot.Schema, "label")||[];
+
+    let used = N.Step(Pivot.Proto, "used")||[];
+    let unused = N.Step(Pivot.Schema, "label").filter( columnLabel => !N.Step(columnLabel, "used", false) );
+    let indicies = used.map(node=>node.Meta.Index);
+
+    var action;
+    if(indicies.length)
+    {
+        action = h("div", null, [
+            h("span", null, "Build"),
+            h("button", {onClick:e=>
+            {
+                N.Disconnect(Pivot.Proto, null, "used");
+                Pivot.Create(indicies, [3, 4]);
+                Render();
+            }
+            }, indicies)
+        ]);
+    }
+    else
+    {
+        action = h("div", null, "(select columns)")
+    }
+
+    return h("div", {}, [
+        h("div", null, [
+            h("span", null, "available"),
+            ...unused.map( node=>
+            {
+                return h("button", {onClick:e=>
+                {
+                    N.Connect(Pivot.Proto, node, "used");
+                    Render();
+                }
+                }, node.Meta.Label);
+            }
+            )
+        ]),
+        h("div", null, [
+            h("span", null, "taken"),
+            ...used.map( node=>
+            {
+                return h("button", {onClick:e=>
+                {
+                    N.Disconnect(Pivot.Proto, node, "used");
+                    Render();
+                }
+                }, node.Meta.Label);
+            }
+            )
+        ]),
+        action
+    ])
 };
 
 let ElNode = ({node, depth}) =>
@@ -439,7 +509,7 @@ let ElNode = ({node, depth}) =>
 };
 let ElPivot = ({pivot}) =>
 {   
-    return h("div", {style:{display:"inline-block", width:"500px"}}, [
+    return h("div", {style:{display:"inline-block", width:"800px"}}, [
         h("button", {onClick:e=>{Pivot.Delete(pivot);Render();}}, "delete?"),
         h(ElModifiers, {node:pivot}),
         h(ElNode, {node:pivot, depth:0})
@@ -461,15 +531,12 @@ let ElModifiers = ({node}) =>
 };
 let ElRoot = props =>
 {
+    let pivots = N.Step(Pivot.Root, "Pivot")||[];
     return h("div", null, [
         h("h3", null, "tree view"),
+        h(ElForm),
         h(ElModifiers, {node:Pivot.Root}),
-        h("button", { onClick:e=>
-        {
-            AddNewPivot();
-        }
-        }, "add new pivot"),
-        ...N.Step(Pivot.Root, "Pivot").map(pivot=>h(ElPivot, {pivot}))
+        pivots.map(pivot=>h(ElPivot, {pivot}))
     ])
 };
 let Render = () => render(h(ElRoot), document.querySelector("#app"));