+{
+ let styles = 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 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`
+
+ `)}
+
+
+
+
+
Create New Pivot
+ ${displayPivotsAll}
+ ${displayPivotsPending}
+
+
openSet(!openGet)}>
+ ${openGet ? `−` : `+`}
+ ${props.label}
+
+ ${ openGet ? html`
${props.children}
` : null }
+
+ ${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}
+
+
+