index.html

@@ -173,9 +173,14 @@ var Pivot =
 {
     Leaves:{},
     Root:N.Create({Label:"All Pivots"}),
-
+    Schema:N.Create({Label:"Column Details"}),
-    Init(inRows)
+    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 = ()=>{};
     },
@@ -349,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([
+Pivot.Init(
-    ["#1", "a", "long",  1],
+    ["number", "type-a", "type-b", "count"],
-    ["#2", "b", "long",  2],
+    ["label", "label", "label", "sum"],
-    ["#3", "b", "short", 2],
+    [
-    ["#4", "a", "long",  3],
+    ["#1", "a", "long",  1, 4],
-    ["#5", "b", "short", 1],
+    ["#2", "b", "long",  2, 4],
-    ["#6", "a", "short", 0],
+    ["#3", "b", "short", 2, 4],
-    ["#7", "b", "short", 7],
+    ["#4", "a", "long",  3, 4],
-]);
+    ["#5", "b", "short", 1, 4],
-Pivot.Create([1, 2], [3]);
+    ["#6", "a", "short", 0, 4],
+    ["#7", "b", "short", 7, 4]
+    ]
+);
 
-let AddNewPivot = () =>
+let ElForm = props =>
 {
-    Pivot.Create([2], [3]);
+    let labelColumns = N.Step(Pivot.Schema, "label")||[];
-    Render();
+
+    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}) =>
@@ -449,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})
@@ -474,12 +534,8 @@ 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"),
         pivots.map(pivot=>h(ElPivot, {pivot}))
     ])
 };