pivot-editor/components.js

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`
        .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
        {
            position:relative;
            padding:10px 0 20px 30px;
            &::before
            {
                content: " ";
                display:block;
                position:absolute;
                top:-8px;
                left:8px;
                width:3px;
                height:100%;
                background:black;
            }
        }
    `;

    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 handleDelete = () =>
    {
        Pivot.Unmodify(props.modifier);
        Render();
    };

    let displayFields = [];
    N.Walk(node=>{
        displayFields.push(html`<input type='number'/>`)
    }, Pivot.Schema, "sum");


    return html`
    <div>
        <div>${refNode.Meta.Label}</div>
        <button onClick=${handleDelete}>Delete</button>
    </div>
    `;
}

let PivotBranch = props =>
{
    let row = props.node.Meta.Row;
    let displayCells = row.map(column=>h("td", null, column));
    let displayCellsModify = row.map(column=>false);
    props.node.Meta.IndexSum.forEach(i=>
    {
        displayCellsModify[i] = html`<td><input type="number" value=${row[i]}/></td>`;
    });
    displayCellsModify.forEach((cell, i)=>
    {
        if(!cell)
        {
            displayCellsModify[i] = html`<td>${row[i]}</td>`
        }
    });

    return html`
    <tbody>
        <tr>
            <td colspan=${displayCells.length+1}><hr/></td>
        </tr>
        <tr>
            <td>
                <strong>${props.node.Meta.Label}</strong>
            </td>
            ${displayCells}
        </tr>
        <tr>
            <td colspan=${displayCells.length+1}>Modifications</td>
        </tr>
        <tr>
            <td>At</td>
            ${displayCellsModify}
        </tr>
        <tr>
            <td>Below</td>
            ${displayCells}
        </tr>
        <tr>
            <td>Above</td>
            ${displayCells}
        </tr>
        <tr>
            <td>Outside</td>
            ${displayCells}
        </tr>
        <tr>
            <td>Computed</td>
            ${displayCells}
        </tr>
        <tr>
            <td colspan=${displayCells.length+1}>Goals</td>
        </tr>
        <tr>
            <td>Max</td>
            ${displayCells}
        </tr>
        <tr>
            <td>Min</td>
            ${displayCells}
        </tr>
    </tbody>
    `;
};


let PivotRoot = ({pivot}) =>
{

    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 rows = [];
    N.ID.Walk++;
    N.Walk(n=>rows.push(h(PivotBranch, {node:n}, null)), pivot, "Hierarchy");

    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"}>
            <table>
            ${rows}
            </table>
        <//>
    </div>
    `;
};

export {Section, PivotRoot, PivotForm};