From 1c3d2d923fc6095e06e356b74878c5c26df23ae9 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Wed, 10 Dec 2014 18:55:47 -0800
Subject: [PATCH] [Plot] Add notion of subplots to template

Add notion of subplots to the plot template; these
are elements within a stacked plot. WTD-625.
---
 .../features/plot/res/templates/plot.html     | 260 +++++++++---------
 1 file changed, 132 insertions(+), 128 deletions(-)

diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html
index 6ba3dcdfad..b82dfe083a 100644
--- a/platform/features/plot/res/templates/plot.html
+++ b/platform/features/plot/res/templates/plot.html
@@ -3,143 +3,147 @@
     <span ng-controller="PlotController as plot"
           ng-mouseleave="representation.showControls = false">
 
-    <div class="gl-plot-legend">
-        <span class='plot-legend-item'
-              ng-repeat="telemetryObject in telemetry.getTelemetryObjects() track by $index">
-            <span class='plot-color-swatch' ng-style="{ 'background-color': plot.getColor($index) }"></span>
-	        <span class='title-label'>{{telemetryObject.getModel().name}}</span>
-        </span>
-    </div>
-
-
-    <div class="gl-plot-coords"
-         ng-if="representation.showControls">
-        {{plot.getHoverCoordinates().join(', ')}}
-    </div>
-
-    <div class="gl-plot-axis-area gl-plot-y">
-
-        <div class="gl-plot-label gl-plot-y-label">
-            {{axes[1].active.name}}
-        </div>
-
-        <div ng-repeat="tick in rangeTicks"
-             class="gl-plot-tick gl-plot-y-tick-label"
-             ng-style="{ bottom: (100 * $index / (rangeTicks.length - 1)) + '%' }">
-            {{tick.label}}
-        </div>
-
-        <div class="gl-plot-y-options gl-plot-local-controls"
-             ng-show="representation.showControls"
-             ng-if="axes[1].options.length > 0">
-            <div class='form-control shell select'>
-                <select class="form-control input shell select"
-                        ng-model="axes[1].active"
-                        ng-options="option.name for option in axes[1].options">
-                </select>
-            </div>
-        </div>
-
-    </div>
-
-    <div class="gl-plot-display-area"
-         ng-mouseenter="representation.showControls = true">
-
-
-        <div class="gl-plot-hash hash-v"
-             ng-repeat="tick in domainTicks"
-             ng-style="{ left: (100 * $index / (domainTicks.length - 1)) + '%', height: '100%' }"
-             ng-show="$index > 0 && $index < (domainTicks.length - 1)">
-        </div>
-        <div class="gl-plot-hash hash-h"
-             ng-repeat="tick in rangeTicks"
-             ng-style="{ bottom: (100 * $index / (rangeTicks.length - 1)) + '%', width: '100%' }"
-             ng-show="$index > 0 && $index < (rangeTicks.length - 1)">
-        </div>
-
-        <mct-chart draw="draw"
-                   ng-mousemove="plot.hover($event)"
-                   ng-mousedown="plot.startMarquee($event)"
-                   ng-mouseup="plot.endMarquee($event)">
-        </mct-chart>
-
-        <!-- TODO: Move into correct position; make part of group; infer from set of actions -->
-        <div class="gl-plot-local-controls"
-             ng-show="representation.showControls"
-             style="position: absolute; top: 8px; right: 8px;">
-
-            <a href=""
-               class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
-               ng-click="plot.stepBackPanZoom()"
-               ng-show="plot.isZoomed()"
-               title="Restore previous pan/zoom">
-                <span class="ui-symbol icon">&lt;</span>
-            </a>
-
-            <a href=""
-               class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
-               ng-click="plot.unzoom()"
-               ng-show="plot.isZoomed()"
-               title="Reset pan/zoom">
-                <span class="ui-symbol icon">I</span>
-            </a>
-
-            <div class="menu-element btn icon-btn very-subtle btn-menu dropdown click-invoke"
-                 ng-if="plot.getModeOptions().length > 1"
-                 ng-controller="ClickAwayController as toggle">
-
-                <span ng-click="toggle.toggle()">
-                    <span class="ui-symbol icon type-icon">{{plot.getMode().glyph}}</span>
-                    <span>{{plot.getMode().name}}</span>
-                    <span class='ui-symbol icon invoke-menu'>v</span>
+        <span ng-repeat="subplot in plot.getSubPlots()">
+            <div class="gl-plot-legend">
+                <span class='plot-legend-item'
+                      ng-repeat="telemetryObject in subplot.telemetryObjects">
+                    <span class='plot-color-swatch'
+                          ng-style="{ 'background-color': plot.getColor($index) }">
+                    </span>
+                    <span class='title-label'>{{telemetryObject.getModel().name}}</span>
                 </span>
+            </div>
 
-                <div class="menu dropdown" ng-show="toggle.isActive()">
-                    <ul>
-                        <li ng-repeat="option in plot.getModeOptions()">
-                            <a href="" ng-click="plot.setMode(option); toggle.setState(false)">
-                                <span class="ui-symbol type-icon icon">
-                                    {{option.glyph}}
-                                </span>
-                                {{option.name}}
-                            </a>
-                        </li>
-                    </ul>
+            <div class="gl-plot-coords"
+                 ng-if="representation.showControls">
+                {{plot.getHoverCoordinates().join(', ')}}
+            </div>
+
+            <div class="gl-plot-axis-area gl-plot-y">
+
+                <div class="gl-plot-label gl-plot-y-label">
+                    {{axes[1].active.name}}
                 </div>
+
+                <div ng-repeat="tick in rangeTicks"
+                     class="gl-plot-tick gl-plot-y-tick-label"
+                     ng-style="{ bottom: (100 * $index / (rangeTicks.length - 1)) + '%' }">
+                    {{tick.label}}
+                </div>
+
+                <div class="gl-plot-y-options gl-plot-local-controls"
+                     ng-show="representation.showControls"
+                     ng-if="axes[1].options.length > 0">
+                    <div class='form-control shell select'>
+                        <select class="form-control input shell select"
+                                ng-model="axes[1].active"
+                                ng-options="option.name for option in axes[1].options">
+                        </select>
+                    </div>
+                </div>
+
             </div>
 
-        </div>
+            <div class="gl-plot-display-area"
+                 ng-mouseenter="representation.showControls = true">
 
-        <span class="t-wait-spinner loading" ng-show="telemetry.isRequestPending()">
+                <div class="gl-plot-hash hash-v"
+                     ng-repeat="tick in subplot.domainTicks"
+                     ng-style="{ left: (100 * $index / (subplot.domainTicks.length - 1)) + '%', height: '100%' }"
+                     ng-show="$index > 0 && $index < (subplot.domainTicks.length - 1)">
+                </div>
+                <div class="gl-plot-hash hash-h"
+                     ng-repeat="tick in rangeTicks"
+                     ng-style="{ bottom: (100 * $index / (subplot.rangeTicks.length - 1)) + '%', width: '100%' }"
+                     ng-show="$index > 0 && $index < (subplot.rangeTicks.length - 1)">
+                </div>
+
+                <mct-chart draw="subplot.draw"
+                           ng-mousemove="subplot.hover($event)"
+                           ng-mousedown="subplot.startMarquee($event)"
+                           ng-mouseup="subplot.endMarquee($event)">
+                </mct-chart>
+
+                <!-- TODO: Move into correct position; make part of group; infer from set of actions -->
+                <div class="gl-plot-local-controls"
+                     ng-if="$first"
+                     ng-show="representation.showControls"
+                     style="position: absolute; top: 8px; right: 8px;">
+
+                    <a href=""
+                       class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
+                       ng-click="plot.stepBackPanZoom()"
+                       ng-show="plot.isZoomed()"
+                       title="Restore previous pan/zoom">
+                        <span class="ui-symbol icon">&lt;</span>
+                    </a>
+
+                    <a href=""
+                       class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
+                       ng-click="plot.unzoom()"
+                       ng-show="plot.isZoomed()"
+                       title="Reset pan/zoom">
+                        <span class="ui-symbol icon">I</span>
+                    </a>
+
+                    <div class="menu-element btn icon-btn very-subtle btn-menu dropdown click-invoke"
+                         ng-if="plot.getModeOptions().length > 1"
+                         ng-controller="ClickAwayController as toggle">
+
+                        <span ng-click="toggle.toggle()">
+                            <span class="ui-symbol icon type-icon">{{plot.getMode().glyph}}</span>
+                            <span>{{plot.getMode().name}}</span>
+                            <span class='ui-symbol icon invoke-menu'>v</span>
+                        </span>
+
+                        <div class="menu dropdown" ng-show="toggle.isActive()">
+                            <ul>
+                                <li ng-repeat="option in plot.getModeOptions()">
+                                    <a href="" ng-click="plot.setMode(option); toggle.setState(false)">
+                                        <span class="ui-symbol type-icon icon">
+                                            {{option.glyph}}
+                                        </span>
+                                        {{option.name}}
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+
+                </div>
+
+                <span class="t-wait-spinner loading" ng-show="telemetry.isRequestPending()">
+                </span>
+            </div>
+            <div ng-if="$last" class="gl-plot-axis-area gl-plot-x">
+
+                <div ng-repeat="tick in domainTicks"
+                     class="gl-plot-tick gl-plot-x-tick-label"
+                     ng-show="$index > 0 && $index < (domainTicks.length - 1)"
+                     ng-style="{ left: (100 * $index / (domainTicks.length - 1)) + '%' }">
+                    {{tick.label}}
+                </div>
+
+                <div class="gl-plot-label gl-plot-x-label">
+                    {{axes[0].active.name}}
+                </div>
+
+
+                <div class="gl-plot-x-options gl-plot-local-controls"
+                     ng-show="representation.showControls"
+                     ng-if="axes[0].options.length > 0">
+                    <div class='form-control shell select'>
+                        <select class="form-control input shell select"
+                                ng-model="axes[0].active"
+                                ng-options="option.name for option in axes[0].options">
+                        </select>
+                    </div>
+                </div>
+
+            </div>
         </span>
-    </div>
-
-    <div class="gl-plot-axis-area gl-plot-x">
-
-        <div ng-repeat="tick in domainTicks"
-             class="gl-plot-tick gl-plot-x-tick-label"
-             ng-show="$index > 0 && $index < (domainTicks.length - 1)"
-             ng-style="{ left: (100 * $index / (domainTicks.length - 1)) + '%' }">
-            {{tick.label}}
-        </div>
-
-        <div class="gl-plot-label gl-plot-x-label">
-            {{axes[0].active.name}}
-        </div>
 
 
-        <div class="gl-plot-x-options gl-plot-local-controls"
-             ng-show="representation.showControls"
-             ng-if="axes[0].options.length > 0">
-            <div class='form-control shell select'>
-                <select class="form-control input shell select"
-                        ng-model="axes[0].active"
-                        ng-options="option.name for option in axes[0].options">
-                </select>
-            </div>
-        </div>
-
-    </div>
     </span>
 </div>