toggleable columns

index.html

@@ -773,9 +773,21 @@ let PivotBranch = props =>
 
 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 labels = (N.Step(Pivot.Schema, "all")||[]).map(column => column.Meta.Label);
-    let [visibleGet, visibleSet] = useState(labels.map(column=>true));
+    let headersDisplay = [];
+    labelsAllState[0].forEach((visible, index)=>
+    {
+        if(visible)
+        {
+            headersDisplay.push(html`<th>${labelsAll[index]}</th>`);
+        }
+    }
+    );
 
     let stylesRoot = css`
         display:block;
@@ -796,42 +808,63 @@ let PivotRoot = ({pivot}) =>
         Render();
     };
 
+
+    let displayColumnGroup = (inAllLabels, inAllState, inIndicies) =>
+    {
+        return html`
+        <div>
+            <button onClick=${e=>
+            {
+                let clone = [...inAllState[0]];
+                inIndicies.forEach(index =>clone[index] = true);
+                inAllState[1](clone);
+            }
+            }>Show All</button>
+            <button onClick=${e=>
+            {
+                let clone = [...inAllState[0]];
+                inIndicies.forEach(index =>clone[index] = false);
+                inAllState[1](clone);
+            }
+            }>Hide All</button>
+        </div>
+        <div>
+            ${inIndicies.map((index) => html`<button onClick=${e=>
+            {
+                let clone = [...inAllState[0]];
+                clone[index] = !clone[index];
+                inAllState[1](clone);
+            }
+            }>${inAllLabels[index]} ${inAllState[0][index] ? `visible`:`hidden`}</button>`)}
+        </div>`;
+    };
+
     let rows = [];
     N.ID.Walk++;
-    N.Walk(n=>rows.push(h(PivotBranch, {node:n, visible:visibleGet}, null)), pivot, "Hierarchy");
+    N.Walk(n=>rows.push(h(PivotBranch, {node:n, visible:labelsAllState[0]}, null)), pivot, "Hierarchy");
 
     return html`
     <div class=${stylesRoot}>
         <div key="heading" class=${stylesHeading}>${pivot.Meta.Label}</div>
         <${Section} key="settings" label=${`Settings`}>
-            <h3>pivot</h3>
             <button onClick=${handleDelete}>Destroy Pivot</button>
-            <h3>columns</h3>
-            <div>
-                <button onClick=${e =>
-                {
-                    visibleSet(visibleGet.map(v=>true))
-                }
-                }>Show All</button>
-                <button onClick=${e =>
-                {
-                    visibleSet(visibleGet.map(v=>false))
-                }
-                }>Hide All</button>
-            </div>
-            <div>
-                ${visibleGet.map((v, i) => html`<button onClick=${e=>
-                {
-                    let clone = [...visibleGet];
-                    clone[i] = !v;
-                    visibleSet(clone);
-                }
-                }>${labels[i]} ${v ? `visible`:`hidden`}</button>`)}
-            </div>
+        <//>
+        <${Section} key="columns" label="Columns">
+            <h3>Unused</h3>
+            ${displayColumnGroup(labelsAll, labelsAllState, labelsDefault)}
+            <h3>Summation</h3>
+            ${displayColumnGroup(labelsAll, labelsAllState, labelsSum)}
+            <h3>Pivot</h3>
+            ${displayColumnGroup(labelsAll, labelsAllState, labelsPivot)}
         <//>
         <${Section} key="tree" label=${"Tree"}>
             <table>
-            ${rows}
+                <thead>
+                    <tr>
+                        <th>Label</th><th>Modifications</th>${headersDisplay}
+                    </th>
+                </thead>
+                ${rows}
             </table>
         <//>
     </div>