diff --git a/components.js b/components.js
deleted file mode 100644
index d7c03f6..0000000
--- a/components.js
+++ /dev/null
@@ -1,249 +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`
-
-
Available Columns
-
- ${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``;
- })}
-
-
-
Pending Pivot
-
- ${pivotColumnsUsed.map(columnPivot=>html`
-
- `)}
-
-
-
-
-
openSet(!openGet)}>
- ${openGet ? `−` : `+`}
- ${props.label}
-
- ${ openGet ? html`
${props.children}
` : null }
-
-
${refNode.Meta.Label}
-
-
- |
- ${sumCells}
-
- `;
-};
-
-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, "ModifyUp", false) || [];
-
- let handleDelete = ()=>
- {
- Pivot.Delete(pivot);
- Render();
- };
-
- return html`
-
-
${pivot.Meta.Label}
- <${Section} key="settings" label=${`Settings`}>
-
-
- <${Section} key="modifiers" label=${`Modifiers (${modifiers.length})`}>
- ${ !modifiers.length ? html`
No modifiers` : modifiers.map( m => html`<${Modifier} modifier=${m}/>`)}
-
- <${Section} key="tree" label=${"Tree"}>
- ${children}
-
-
+ ${modsDown.length ? html`
${modsDown.length}
` : null}
+ ${modsAt.length ? html`
${modsAt.length}` : null}
+ ${modsUp.length ? html`
${modsUp.length}` : null}
+ ${modsOut.length ? html`
${modsOut.length}` : null}
+
| `;
+ });
+ displayCellsModify.forEach((cell, i)=>
+ {
+ if(!cell)
+ {
+ displayCellsModify[i] = html`${row[i]} | `
+ }
+ });
+
+ let displayCells = (node, visible) =>
+ {
+ let output = [];
+ node.Meta.Row.forEach((column, i)=>
+ {
+ if(visible[i])
+ {
+ output.push( h("td", null, column) );
+ }
+ }
+ );
+ return output;
+ }
+
+ let stylesLeaf = css`
+ background:#ddd;
+ color:#333;
+ `;
+
+ return html`
+
+
+ |
+ ${props.node.Meta.Label}
+ |
+
+ <${ModificationsIcon} node=${props.node}>
+ |
+ ${displayCells(props.node, props.visible)}
+
+ ${(N.Step(props.node, "Leaf")||[]).map(leaf =>
+ {
+ return html`
+
+ |
+ <${ModificationsIcon} node=${leaf}> |
+ ${displayCells(leaf, props.visible)}
+
+ `;
+ }
+ )}
+
+ `;
+ };
+
+ let PivotRoot = ({pivot}) =>
+ {
+ let labelsDefault = (N.Step(Pivot.Schema, "hidden")||[]).map(column => column.Meta.Index);
+ let labelsSum = (N.Step(Pivot.Schema, "sum")||[]).map(column => column.Meta.Index);
+ let labelsPivot = (N.Step(Pivot.Schema, "label")||[]).map(column => column.Meta.Index);
+ let labelsAll = (N.Step(Pivot.Schema, "all")||[]).map(column => column.Meta.Label);
+ let labelsAllState = useState(labelsAll.map(column=>true));
+
+ let headersDisplay = [];
+ labelsAllState[0].forEach((visible, index)=>
+ {
+ if(visible)
+ {
+ headersDisplay.push(html`${labelsAll[index]} | `);
+ }
+ }
+ );
+
+ 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, "ModifyUp", false) || [];
+ let handleDelete = ()=>
+ {
+ Pivot.Delete(pivot);
+ Render();
+ };
+
+
+ let displayColumnGroup = (inAllLabels, inAllState, inIndicies) =>
+ {
+ return html`
+
+
+
+
+
+ ${inIndicies.map((index) => html``)}
+
`;
+ };
+
+ let rows = [];
+ N.ID.Walk++;
+ N.Walk(n=>rows.push(h(PivotBranch, {node:n, visible:labelsAllState[0]}, null)), pivot, "Hierarchy");
+
+ return html`
+
+
${pivot.Meta.Label}
+ <${Section} key="settings" label=${`Settings`}>
+
+
+ <${Section} key="columns" label="Columns">
+
Unused
+ ${displayColumnGroup(labelsAll, labelsAllState, labelsDefault)}
+
Summation
+ ${displayColumnGroup(labelsAll, labelsAllState, labelsSum)}
+
Pivot
+ ${displayColumnGroup(labelsAll, labelsAllState, labelsPivot)}
+
+ <${Section} key="tree" label=${"Tree"}>
+
+
+
+ | Label | Modifications | ${headersDisplay}
+
+
+ ${rows}
+
+
+