components.js

@@ -0,0 +1,209 @@
+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 FormPivot = 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 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};

index.html

@@ -366,12 +366,18 @@ 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 as PR} from './components.js';
+
 Pivot.Init(
     ["number", "type-a", "type-b", "count", "extra"],
     ["label", "label", "label", "sum", "sum"],
@@ -566,12 +572,7 @@ let ElNode = ({node, depth}) =>
 };
 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})
-    ]);
+    return h(PR, {key:pivot.Meta.Label, pivot}, h(ElNode, {node:pivot, depth:0}));
 };
 let ElModifiers = ({node}) =>
 {
@@ -597,7 +598,7 @@ let ElRoot = props =>
         pivots.map(pivot=>h(ElPivot, {pivot}))
     ])
 };
-let Render = () => render(h(ElRoot), document.querySelector("#app"));
+Render = () => render(h(ElRoot), document.querySelector("#app"));
 Render();
 
 </script>