Refactored frontend for the rebaseline server.

gm/rebaseline_server/static/new/partials/rebaseline-view.html

Index: gm/rebaseline_server/static/new/partials/rebaseline-view.html
diff --git a/gm/rebaseline_server/static/new/partials/rebaseline-view.html b/gm/rebaseline_server/static/new/partials/rebaseline-view.html
new file mode 100644
index 0000000000000000000000000000000000000000..a2c28f7357c342337974fda1e8753f722b1e35d2
--- /dev/null
+++ b/gm/rebaseline_server/static/new/partials/rebaseline-view.html
@@ -0,0 +1,207 @@
+<div class="container-fluid ng-cloak" ng-cloak>
+
+    <div class="row" ng-show="state === c.ST_LOADING">
+        <h4>Loading ...</h4>
+    </div>
+
+    <div class="row" ng-show="state === c.ST_STILL_LOADING">
+        <h4>Still loading from backend.</h4>
+        <div>
+            Load time so far: {{ loadTime | number:0 }} s.
+        </div>
+    </div>
+
+    <div class="row" ng-show="state === c.ST_READY">
+        <tabset>
+            <tab heading="Unfiled">
+                <!-- settings --> 
+                <div class="container controlBox">
+                    <form class="form-inline settingsForm" novalidate >
+                        <legend class="simpleLegend">Settings</legend>
+                            <div class="checkbox formPadding">
+                                <label>
+                                       <input type="checkbox" 
+                                           ng-model="settings.showThumbnails">Show thumbnails
+                                 </label>
+                             </div>
+
+                            <div class="checkbox formPadding">
+                                <label>
+                                       <input type="checkbox" 
+                                     ng-model="settings.mergeIdenticalRows"
+                                      ng-change="mergeRowsChanged(mergeIdenticalRows)"> Merge identical rows
+                                 </label>
+                            </div>
+
+                            <div class="form-group formPadding">
+                                 <label for="imageWidth">Image Width</label>
+                                     <select ng-model="settings.imageSize" 
+                                             ng-options="iSize for iSize in c.IMAGE_SIZES"
+                                             class="form-control input-sm">
+
+                                     </select>
+                            </div>
+                            <div class="form-group formPadding">
+                                 <label>Max records</label>
+                                     <select ng-model="settings.nRecords" 
+                                             ng-options="n for n in c.MAX_RECORDS"
+                                             ng-change="maxRecordsChanged();"
+                                             class="form-control input-sm">
+                                     </select>
+                            </div>
+                    </form>
+                    <br>
+
+                    <form class="form settingsForm" novalidate>
+                        <legend class="simpleLegend">Filters</legend>
+                        <div class="container-fluid">
+                            <div class="col-lg-2 filterBox" ng-repeat="oneCol in filterCols">
+                                  <div class="filterKey">{{ oneCol.key }}</div>
+
+                                  <!-- If we filter this column using free-form text match... -->
+                                  <div ng-if="oneCol.ftype === c.FILTER_FREE_FORM">
+                                    <input type="text"
+                                           ng-model="filterVals[$index]"
+                                           typeahead="opt.value for opt in oneCol.foptions | filter:$viewValue"
+                                           class="form-control input-sm">
+                                    <br>
+                                    <a ng-click="filterVals[$index]=''"
+                                       ng-disabled="'' === filterVals[$index]"
+                                       href="">
+                                      Clear
+                                    </a>
+                                  </div>
+
+                                  <!-- If we filter this column using checkboxes... -->
+                                  <div ng-if="oneCol.ftype === c.FILTER_CHECK_BOX">
+
+                                      <div class="checkbox" ng-repeat="oneOpt in oneCol.foptions">
+                                        <label>
+                                          <input type="checkbox" 
+                                                 ng-model="filterVals[$parent.$index][$index]">{{oneOpt.value}} ({{ oneOpt.count }})
+                                        </label>
+                                    </div>
+                                    <div>
+                                        <a ng-click="setFilterAll($index, true)" href="">All</a> -
+                                        <a ng-click="setFilterAll($index, False)" href="">None</a> - 
+                                        <a ng-click="setFilterToggle($index)" href="">Toggle</a>
+                                    </div>
+                                  </div>
+                            </div>
+                            <br>
+                        </div>
+
+                        <div class="container updateBtn">
+                            <button class="btn btn-success col-lg-4 pull-left"
+                                    ng-click="filtersChanged()"
+                                    ng-disabled="updating">
+                                        {{ updating && 'Updating ...' || 'Update' }}
+                            </button>
+                        </div>
+
+                    </form>
+
+                    <br>
+
+                    <!-- Rows --> 
+
+                    <!-- results header -->
+                    <div class="col-lg-12 resultsHeaderActions well">
+                            <div class="col-lg-6">
+                              <h4>Showing {{showingRecords}} of {{selectedRecords}} (of {{totalRecords}} total)</h4>
+                              <span ng-show="renderTime > 0">
+                                Rendered in {{renderTime | number:0 }} ms (filtered and sorted in {{ filterTime | number:0 }} ms).
+                              </span>
+                              <br>
+                              (click on the column header radio buttons to re-sort by that column)
+                            </div>
+
+
+                            <div class="col-lg-6">
+                                All tests shown: 
+                                <button class="btn btn-default btn-sm" ng-click="selectAllImagePairs()">Select</button>
+                                <button class="btn btn-default btn-sm" ng-click="clearAllImagePairs()">Clear</button>
+                                <button class="btn btn-default btn-sm" ng-click="toggleAllImagePairs()">Toggle</button>
+
+                                <div ng-repeat="otherTab in tabs">
+                                    <button class="btn btn-default btn-sm"
+                                            ng-click="moveSelectedImagePairsToTab(otherTab)"
+                                            ng-disabled="selectedImagePairs.length == 0"
+                                            ng-show="otherTab != viewingTab">
+                                            Move {{selectedImagePairs.length}} selected tests to {{otherTab}} tab
+                                    </button>
+                                </div>
+                            </div>
+                            <br>
+                    </div>
+
+                    <!-- results --> 
+                    <table class="table table-bordered">
+                        <thead>
+                            <tr>
+                                <!-- Most column headers are displayed in a common fashion... -->
+                                <th ng-repeat="oneCol in allCols" ng-style="{ 'min-width': getImageWidthStyle(oneCol, 20, 'auto') }">
+                                    <a ng-class="getSortedClass('sort', $index, '')"
+                                       ng-click="sortBy($index)"
+                                       href=""
+                                       class="sortableHeader">
+                                          {{ oneCol.ctitle }}
+                                    </a>
+                                </th>
+                                <th>
+                                    <div class="checkbox">
+                                        <label>
+                                               <input type="checkbox" ng-model="allChecked" ng-change="checkAll()">All
+                                         </label>
+                                     </div>
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr ng-repeat="oneRow in data">
+                                <td ng-repeat="oneColVal in oneRow.dataCols">
+                                    {{oneColVal}}
+                                </td>
+
+                                <td ng-repeat="oneCol in oneRow.imageCols" ng-if="oneRow.rowspan > 0" rowspan="{{ oneRow.rowspan }}">
+                                    <div ng-show="oneCol.url">
+                                        <a href="{{ oneCol.url }}" target="_blank">View Image</a><br/>
+                                        <img ng-if="settings.showThumbnails" 
+                                             ng-style="{ width: settings.imageSize+'px' }" 
+                                             ng-src="{{ oneCol.url }}" />
+                                        <div ng-if="oneCol.percent && oneCol.value">
+                                            {{oneCol.percent}}% ({{ oneCol.value }})
+                                        </div>
+                                    </div>
+                                    <div ng-hide="oneCol.url" style="text-align:center">
+                                        <span ng-show="oneCol.url === null">&ndash;none&ndash;</span>
+                                        <span ng-hide="oneCol.url === null">&nbsp;</span>
+                                    </div>
+                                </td>
+
+                                <td ng-if="oneRow.rowspan > 0" rowspan="{{ oneRow.rowspan }}">
+                                    <div class="checkbox">
+                                        <input type="checkbox"
+                                               ng-model="checkRows[$index]" 
+                                               ng-change="rowCheckChanged($index)">
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                </div>
+            </tab>
+
+            <tab heading="Hidden">
+                <h3>Hidden</h3>
+            </tab>
+
+            <tab heading="Pending Approval">
+                <h3>Pending Approval</h3>
+            </tab>
+
+        </tabset>
+
+    </div>
+</div>