components.js

@@ -1,221 +0,0 @@
-import { h, render, createContext, Fragment } from 'https://cdn.skypack.dev/preact';
-import { useReducer, useState } from 'https://cdn.skypack.dev/preact/hooks';
-import { css, cx } from 'https://cdn.skypack.dev/@emotion/css';
-import htm from 'https://unpkg.com/htm?module';
-const html = htm.bind(h);
-
-let Styles = {
-    Form:css`
-        position:realtive;
-        box-sizing: border-box;
-        padding: 10px;
-        color:black;
-        font-family:sans-serif;
-
-        .Title
-        {
-            font-size:24px;
-            font-weight:100;
-        }
-
-        .Section
-        {
-            padding:10px 0 10px 0;
-
-            .Heading
-            {
-                display:inline-block;
-                color:#666;
-                font-family:sans-serif;
-                font-size:12px;
-                font-weight:900;
-                text-transform:uppercase;
-            }
-            .Group
-            {
-                display:inline-block;
-                padding:5px;
-                border-radius:5px;
-                margin:3px;
-                background:rgba(0, 0, 0, 0.3)
-            }
-        }
-    `
-};
-
-let PivotForm = props =>
-{
-
-    let pivotColumns = N.Step(Pivot.Schema, "label")||[];
-    let pivotColumnsUsed = N.Step(Pivot.Proto, "used-pivot")||[];
-
-    let sumColumns = N.Step(Pivot.Schema, "sum")||[];
-    //let sumColumnsUsed = N.Step(Pivot.Proto, "used-sum")||[];
-
-    let indiciesPivot = pivotColumnsUsed.map(node=>node.Meta.Index);
-    let indiciesSum = sumColumns.map(node=>node.Meta.Index);
-    //let indiciesSum = sumColumnsUsed.map(node=>node.Meta.Index);
-    
-    let displayPivotsAll = html`
-    <div class="Section">
-        <div class="Heading">Available Columns</div>
-        <div class="Group">
-        ${pivotColumns.map( columnPivot =>
-        {
-            let attributes = {};
-            if(N.Step(columnPivot, "used-pivot", false))
-            {
-                attributes.disabled = true;
-            }
-            else
-            {
-                attributes.onClick = e=>
-                {
-                    N.Connect(Pivot.Proto, columnPivot, "used-pivot");
-                    Render();
-                }
-            }
-            return html`<button ...${attributes}>${columnPivot.Meta.Label}</button>`;
-        })}
-        </div>
-    </div>
-    `;
-
-    let displayPivotsPending = null;
-    if(pivotColumnsUsed.length)
-    {
-        displayPivotsPending  = html`
-        <div class="Section">
-            <div class="Heading">Pending Pivot</div>
-            <div class="Group">
-                ${pivotColumnsUsed.map(columnPivot=>html`
-                <button onClick=${e=>{N.Disconnect(Pivot.Proto, columnPivot, "used-pivot");Render();}}>
-                    ${columnPivot.Meta.Label}
-                </button>
-                `)}
-            </div>
-
-            <button onClick=${e=>{
-                N.Disconnect(Pivot.Proto, null, "used-pivot");
-                N.Disconnect(Pivot.Proto, null, "used-sum");
-                Pivot.Create(indiciesPivot, indiciesSum);
-                Render();
-            }}>Create</button>
-        </div>
-        `;
-    }
-
-    return html`
-    <div class=${Styles.Form}>
-        <div class="Title">Create New Pivot</div>
-        ${displayPivotsAll}
-        ${displayPivotsPending}
-    </div>
-    `;
-}
-
-let Section = props =>
-{
-    let styles = css`
-        border-top:1px solid #aaa;
-        .Heading
-        {
-            padding:6px 0 6px 0;
-            color:#666;
-            font-weight:900;
-            font-size:12px;
-            text-transform:uppercase;
-            cursor:pointer;
-
-            span
-            {
-                display:inline-block;
-                width:20px;
-                height:20px;
-                margin-right:10px;
-                border-radius:20px;
-                background:black;
-                color:white;
-                text-align:center;
-            }
-        }
-        .Heading:hover
-        {
-            color:black;
-        }
-        .Body
-        {
-            margin:10px 0 10px 0;
-        }
-    `;
-
-    let [openGet, openSet] = useState(false);
-    return html`
-        <div class=${styles}>
-            <div class="Heading" onClick=${e=>openSet(!openGet)}>
-                <span>${openGet ? `−` : `+`}</span>
-                ${props.label}
-            </div>
-            ${ openGet ? html`<div class="Body">${props.children}</div>` : null }
-        </div>
-    `;
-}
-
-let Modifier = props =>
-{
-    let refNode = N.Step(props.modifier, "ModifyAt")[0];
-
-    let handlerClick = () =>
-    {
-        Pivot.Unmodify(props.modifier);
-        Render();
-    };
-
-    return html`
-    <div>
-        <div>${refNode.Meta.Label}</div>
-        <button onClick=${handlerClick}>delete</button>
-    </div>
-    `;
-}
-
-let PivotRoot = ({pivot, children}) =>
-{
-
-    let stylesRoot = css`
-        display:block;
-        box-sizing:border-box;
-        padding:15px;
-        font-family:sans-serif;
-    `;
-    let stylesHeading = css`
-        margin: 0 0 15px 0;
-        font-weight:0;
-        font-size:24px;
-    `;
-
-    let modifiers = N.Step(pivot, "Modifier") || [];
-
-    let handleDelete = ()=>
-    {
-        Pivot.Delete(pivot);
-        Render();
-    };
-
-    return html`
-    <div class=${stylesRoot}>
-        <div key="heading" class=${stylesHeading}>${pivot.Meta.Label}</div>
-        <${Section} key="settings" label=${`Settings`}>
-            <button onClick=${handleDelete}>Destroy Pivot</button>
-        <//>
-        <${Section} key="modifiers" label=${`Modifiers (${modifiers.length})`}>
-            ${ !modifiers.length ? html`<em>No modifiers</em>` : modifiers.map( m => html`<${Modifier} modifier=${m}/>`)}
-        <//>
-        <${Section} key="tree" label=${"Tree"}>
-            ${children}
-        <//>
-    </div>
-    `;
-};
-
-export {Section, PivotRoot, PivotForm};

index.html

@@ -283,10 +283,10 @@ var Pivot =
     {
         N.ID.Walk++;
         
-        let columns = N.Step(Pivot.Schema, "all");
+        let names = N.Step(Pivot.Schema, "label");
         let label = inPivotIndicies.map( inPivotIndex =>
         {
-            return columns[inPivotIndex].Meta.Label;
+            return names[inPivotIndex].Meta.Label;
         });
 
         let pivotRoot = N.Create({Label:label.join("|"), Leaves:Pivot.Leaves});
@@ -366,21 +366,15 @@ var Pivot =
 };
 </script>
 
-<script>
-var Render = () => {};
-</script>
-
 <script type="module">
 
 import { h, render, createContext, Fragment } from 'https://cdn.skypack.dev/preact';
 import { useReducer } from 'https://cdn.skypack.dev/preact/hooks';
 import { css, cx } from 'https://cdn.skypack.dev/@emotion/css';
 
-import {PivotRoot, PivotForm} from './components.js';
-
 Pivot.Init(
-    ["id", "type-a", "type-b", "count", "extra"],
+    ["number", "type-a", "type-b", "count", "extra"],
-    ["", "label", "label", "sum", "sum"],
+    ["label", "label", "label", "sum", "sum"],
     [
     ["#1", "a", "long",  1, 4],
     ["#2", "b", "long",  2, 4],
@@ -392,6 +386,103 @@ Pivot.Init(
     ]
 );
 
+let ElForm = props =>
+{
+    let pivotColumns = N.Step(Pivot.Schema, "label")||[];
+    let pivotColumnsUsed = N.Step(Pivot.Proto, "used-pivot")||[];
+
+    let sumColumns = N.Step(Pivot.Schema, "sum")||[];
+    let sumColumnsUsed = N.Step(Pivot.Proto, "used-sum")||[];
+
+    let indiciesPivot = pivotColumnsUsed.map(node=>node.Meta.Index);
+    let indiciesSum = sumColumnsUsed.map(node=>node.Meta.Index);
+    
+    var action;
+    if(indiciesPivot.length)
+    {
+        action = h("p", null, [
+            h("span", null, "Build"),
+            h("button", {onClick:e=>
+            {
+                N.Disconnect(Pivot.Proto, null, "used-pivot");
+                N.Disconnect(Pivot.Proto, null, "used-sum");
+                Pivot.Create(indiciesPivot, indiciesSum);
+                Render();
+            }
+            }, "Create Pivot")
+        ]);
+    }
+    else
+    {
+        action = h("p", null, "(select columns)")
+    }
+
+    return h("div", {}, [
+        h("p", null, [
+
+            h("span", null, "Pivot Columns"),
+            ...pivotColumns.map( columnLabel =>
+            {
+                let attributes = {};
+                if(N.Step(columnLabel, "used-pivot", false))
+                {
+                    attributes.disabled = true;
+                }
+                else
+                {
+                    attributes.onClick = e=>
+                    {
+                        N.Connect(Pivot.Proto, columnLabel, "used-pivot");
+                        Render();
+                    }
+                }
+                return h("button", attributes, columnLabel.Meta.Label);
+            }),
+
+            h("span", null, "Summation Columns"),
+            ...sumColumns.map( columnSum =>
+            {
+                let attributes = {};
+                if(N.Step(columnSum, "used-sum", false))
+                {
+                    attributes.disabled = true;
+                }
+                else
+                {
+                    attributes.onClick = e=>
+                    {
+                        N.Connect(Pivot.Proto, columnSum, "used-sum");
+                        Render();
+                    }
+                }
+                return h("button", attributes, columnSum.Meta.Label);
+            })
+        ]),
+        h("p", null, [
+            h("span", null, "Current Pivot"),
+            ...pivotColumnsUsed.map( columnLabel =>
+            {
+                return h("button", {onClick:e=>
+                {
+                    N.Disconnect(Pivot.Proto, columnLabel, "used-pivot");
+                    Render();
+                }
+                }, columnLabel.Meta.Label);
+            }),
+            h("span", null, "Current Summation"),
+            ...sumColumnsUsed.map( columnSum =>
+            {
+                return h("button", {onClick:e=>
+                {
+                    N.Disconnect(Pivot.Proto, columnSum, "used-sum");
+                    Render();
+                }
+                }, columnSum.Meta.Label);
+            }),
+        ]),
+        action
+    ])
+};
 let ElNode = ({node, depth}) =>
 {
     let nodeBase = css`
@@ -473,16 +564,40 @@ let ElNode = ({node, depth}) =>
         h("div", {className:"Nodes"}, N.Step(node, "Hierarchy").map(child=>h(ElNode, {node:child, depth:depth+1})) )
     ]);
 };
+let ElPivot = ({pivot}) =>
+{   
+    return h("div", {className:css`display:inline-block;`}, [
+        h("h3", null, pivot.Meta.Label),
+        h("button", {onClick:e=>{Pivot.Delete(pivot);Render();}}, "delete?"),
+        h(ElModifiers, {node:pivot}),
+        h(ElNode, {node:pivot, depth:0})
+    ]);
+};
+let ElModifiers = ({node}) =>
+{
+    let modifiers = N.Step(node, "Modifier") || [];
 
+    return h("div", null, [
+        h("strong", null, "modifiers"),
+        ...modifiers.map( m => h("span", {onClick:e=>
+        {
+            Pivot.Unmodify(m);
+            Render();
+        }
+        }, "modifier"))
+    ]);
+};
 let ElRoot = props =>
 {
     let pivots = N.Step(Pivot.Root, "Pivot")||[];
     return h("div", null, [
-        h(PivotForm),
+        h("h3", null, "tree view"),
-        pivots.map(pivot=>h(PivotRoot, {key:pivot.Meta.Label, pivot}, h(ElNode, {node:pivot, depth:0})))
+        h(ElForm),
+        h(ElModifiers, {node:Pivot.Root}),
+        pivots.map(pivot=>h(ElPivot, {pivot}))
     ])
 };
-Render = () => render(h(ElRoot), document.querySelector("#app"));
+let Render = () => render(h(ElRoot), document.querySelector("#app"));
 Render();
 
 </script>