[Frontend] Small refactor for mct-include

Fixes #933
Fixes #1193
Markup and CSS tweaked to support using mct-include
as the main container for the TOI element; TC, plots
and tables all updated.

platform/features/conductor-v2/conductor/res/sass/_time-of-interest.scss

@@ -20,14 +20,14 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-.l-toi-holder,
+mct-include.l-toi-holder,
 .l-toi-holder:after,
 .l-toi-holder:before {
     display: block;
     position: absolute;
 }
 
-.l-toi-holder {
+mct-include.l-toi-holder {
     $blockerFadeW: $toiBlockerFadeW;
     @include transform(translateX(-50%));
     color: $toiColorBg;
@@ -36,12 +36,11 @@
     bottom: 0;
     width: $toiH;
     &:not(.pinned) {
-        opacity: 0;
+        display: none;
-        pointer-events: none;
     }
 
     &.pinned {
-        opacity: 1;
+        display: block;
     }
 
     &:before,
@@ -138,61 +137,62 @@
     .l-toi-val {
         display: none; // Hide by default; see .show-val below
     }
-}
 
-// TOI is showing value as well
+    // TOI is showing value as well
-.show-val .l-toi-holder {
+    &.show-val {
-    .l-toi {
-        .l-toi-buttons {
-            order: 1;
-            &:hover {
-                margin-right: $interiorMarginSm;
-            }
-        }
-        .l-toi-val {
-            @include trans-prop-nice($props: opacity, $dur: 150ms);
-            background-color: $toiColorBg;
-            border-radius: $controlCr;
-            box-sizing: content-box;
-            color: $toiColorFg;
-            display: inline-block;
-            font-size: 0.7rem;
-            font-weight: 400;
-            height: $toiH;
-            line-height: $toiH;
-            order: 2;
-            padding: 1px 3px;
-            white-space: nowrap;
-        }
-    }
-
-    &.val-to-left {
         .l-toi {
-            left: auto;
-            right: $toiPad * -2;
-
             .l-toi-buttons {
-                order: 2;
+                order: 1;
                 &:hover {
-                    .t-button-resync { order: 2; }
+                    margin-right: $interiorMarginSm;
-                    .t-button-unpin { order: 1; }
-                    margin-left: $interiorMarginSm;
                 }
             }
-
             .l-toi-val {
-                order: 1;
+                @include trans-prop-nice($props: opacity, $dur: 150ms);
+                background-color: $toiColorBg;
+                border-radius: $controlCr;
+                box-sizing: content-box;
+                color: $toiColorFg;
+                display: inline-block;
+                font-size: 0.7rem;
+                font-weight: 400;
+                height: $toiH;
+                line-height: $toiH;
+                order: 2;
+                padding: 1px 3px;
+                white-space: nowrap;
+            }
+        }
+
+        &.val-to-left {
+            .l-toi {
+                left: auto;
+                right: $toiPad * -2;
+
+                .l-toi-buttons {
+                    order: 2;
+                    &:hover {
+                        .t-button-resync { order: 2; }
+                        .t-button-unpin { order: 1; }
+                        margin-left: $interiorMarginSm;
+                    }
+                }
+
+                .l-toi-val {
+                    order: 1;
+                }
             }
         }
     }
 }
 
+
 // TOI in tables
 .tabular,
 table {
     tbody, .tbody {
         tr, .tr {
-            &.l-toi-tablerow.pinned {
+            &.l-toi-tablerow {
                 border-top: 1px dashed $toiColorBg;
                 z-index: 1;
                 td, .td {

platform/features/conductor-v2/conductor/res/templates/time-conductor.html

@@ -89,9 +89,10 @@
              ng-click="toi.click($event)">
             <a class="l-page-button s-icon-button icon-pointer-left"></a>
             <div class="l-data-visualization">
-                <div style="position: relative; height: 100%" ng-style="{'left': toi.left + '%'}">
+                <mct-include key="'time-of-interest'"
-                <mct-include key="'time-of-interest'" class="show-val"></mct-include>
+                             class="l-toi-holder show-val"
-                </div>
+                             ng-class="{ pinned: pinned, 'val-to-left': toi.left > 80 }"
+                             ng-style="{'left': toi.left + '%'}"></mct-include>
             </div>
             <a class="l-page-button align-right s-icon-button icon-pointer-right"></a>
         </div>

platform/features/conductor-v2/conductor/res/templates/time-of-interest.html

@@ -1,6 +1,5 @@
-<div class="l-toi-holder"
+<div class="abs angular-controller"
-     ng-controller="TimeOfInterestController as toi"
+     ng-controller="TimeOfInterestController as toi">
-     ng-class="{ 'pinned': pinned, 'val-to-left': toi.left > 80 }">
     <div class="l-flex-row l-toi">
         <span class="flex-elem l-flex-row l-toi-buttons">
             <a class="flex-elem t-button-resync icon-button" title="Re-sync Time of Interest"

platform/features/plot/res/templates/plot.html

@@ -77,10 +77,11 @@
             </div>
 
             <div class="gl-plot-wrapper-display-area-and-x-axis">
-                <div class="toiPositioner"
+                <mct-include key="'time-of-interest'"
-                     ng-if="toiPerc" ng-style="{'left': toiPerc + '%'}">
+                             class="l-toi-holder show-val"
-                    <mct-include key="'time-of-interest'" class="show-val"></mct-include>
+                             ng-if="toiPerc"
-                </div>
+                             ng-class="{ 'val-to-left': toiPerc > 80 }"
+                             ng-style="{'left': toiPerc + '%'}"></mct-include>
 
                 <div class="gl-plot-coords"
                      ng-if="subplot.isHovering() && subplot.getHoverCoordinates()">

platform/features/table/res/templates/mct-table.html

@@ -52,9 +52,10 @@
             <tr ng-repeat-start="visibleRow in visibleRows track by visibleRow.rowIndex"
                 ng-if="visibleRow.rowIndex === toiRowIndex"
                 ng-style="{ top: visibleRow.offsetY + 'px' }"
-                class="l-toi-tablerow pinned">
+                class="l-toi-tablerow">
                 <td colspan="999">
-                    <mct-include key="'time-of-interest'"></mct-include>
+                    <mct-include key="'time-of-interest'"
+                                 class="l-toi-holder pinned"></mct-include>
                 </td>
             </tr>
             <tr ng-repeat-end