different icon

index.html

@@ -545,7 +545,7 @@ let Section = props =>
 
 let Modifier = props =>
 {
-    let refNode = N.Step(props.modifier, "ModifyAt")[0];
+    let refNode = N.Step(props.modifier, "ModifyAt", false)[0];
 
     let handleDelete = () =>
     {
@@ -567,6 +567,158 @@ let Modifier = props =>
     `;
 }
 
+let ModificationsIcon = ({node}) =>
+{
+    let modsUp   = /*N.Step(node, "ModifyUp",   false)||[]*/[true];
+    let modsDown = /*N.Step(node, "ModifyDown", false)||[]*/[true, true];
+    let modsAt   = /*N.Step(node, "ModifyAt",   false)||[]*/[true, true, true];
+    let modsOut  = /*N.Step(node, "ModifyOut",  false)||[]*/[];
+
+    let styles = css`
+        position:relative;
+        display:inline-block;
+        width:25px;
+        height:25px;
+        margin-left:100px;
+        .Icon
+        {
+            position:absolute;
+            display:inline-block;
+            width:25px;
+            height:25px;
+            text-align:center;
+            font-size:9px;
+            font-family:sans-serif;
+            font-weight:900;
+            line-height:25px;
+
+            &::after
+            {
+                content:" ";
+                display:block;
+                position:absolute;
+                width:5px;
+                height:5px;
+                border:10px solid transparent;
+            }
+
+            &.Down
+            {
+                left:0;
+                bottom:100%;
+                &::after
+                {
+                    top:100%;
+                    border-top-color:green;
+                    border-bottom:0px solid transparent;
+                }
+            }
+            &.At
+            {
+                top:0;
+                left:100%;
+                &::after
+                {
+                    top:0;
+                    right:100%;
+                    border-right-color:red;
+                    border-left:0px solid transparent;
+                }
+            }
+            &.Up
+            {
+                left:0;
+                top:100%;
+                &::after
+                {
+                    bottom:100%;
+                    border-bottom-color:orange;
+                    border-top:0px solid transparent;
+                }
+            }
+
+            &.Out
+            {
+                top:0;
+                right:100%;
+                &::after
+                {
+                    top:0;
+                    left:100%;
+                    border-left-color:grey;
+                    border-right:0px solid transparent;
+                }
+            }
+        }
+
+    `;
+
+    let otherStyles = css`
+    position:relative;
+    left:100px;
+    width:5px;
+    height:5px;
+    border:20px solid transparent;
+    background:black;
+
+    &.Down
+    {
+        border-top-color:orange;
+    }
+    &.At
+    {
+        border-right-color:red;
+    }
+    &.Up
+    {
+        border-bottom-color:lightblue;
+    }
+    &.Out
+    {
+        border-left:grey;
+    }
+
+    .Icon
+    {
+        position:absolute;
+        width:20px;
+        height:20px;
+
+        &.Down
+        {
+            bottom:35px;
+            left:0;
+        }
+        &.At
+        {
+            left:35px;
+            top:0;
+        }
+        &.Up
+        {
+            top:35px;
+            left:0;
+        }
+        &.Out
+        {
+            right:35px;
+            top:0;
+        }
+
+    }
+    `;
+
+    return html`
+    <div class=${cx(otherStyles, "At")}>
+        ${modsDown.length ? html`<div class="Icon Down">${modsDown.length}</div>` : null}
+        ${modsAt.length ? html`<span class="Icon At">${modsAt.length}</span>` : null}
+        ${modsUp.length ? html`<span class="Icon Up">${modsUp.length}</span>` : null}
+        ${modsOut.length ? html`<span class="Icon Out">${modsOut.length}</span>` : null}
+    </div>
+    `;
+
+};
+
 let PivotBranch = props =>
 {
     let row = props.node.Meta.Row;
@@ -586,49 +738,14 @@ let PivotBranch = props =>
 
     return html`
     <tbody>
-        <tr>
-            <td colspan=${displayCells.length+1}><hr/></td>
-        </tr>
         <tr>
             <td>
                 <strong>${props.node.Meta.Label}</strong>
+                <button>Modify</button>
             </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>
     `;
 };
@@ -682,6 +799,7 @@ let ElRoot = props =>
     let pivots = N.Step(Pivot.Root, "Pivot")||[];
     return h("div", null, [
         h(PivotForm),
+        h(ModificationsIcon, null, null),
         pivots.map(pivot=>h(PivotRoot, {key:pivot.Meta.Label, pivot}))
     ])
 };