[Table] #670 Addressed comments from code review

This commit is contained in:
Henry
2016-03-02 21:40:56 -08:00
parent b9a7ee423a
commit 55e00baeaf
7 changed files with 61 additions and 79 deletions

View File

@ -23,17 +23,15 @@
define([ define([
"./src/directives/MCTTable", "./src/directives/MCTTable",
"./src/controllers/TableController", "./src/controllers/TelemetryTableController",
"./src/controllers/TableOptionsController", "./src/controllers/TableOptionsController",
"./src/controllers/MCTTableController",
'../../commonUI/regions/src/Region', '../../commonUI/regions/src/Region',
'../../commonUI/browse/src/InspectorRegion', '../../commonUI/browse/src/InspectorRegion',
"legacyRegistry" "legacyRegistry"
], function ( ], function (
MCTTable, MCTTable,
TableController, TelemetryTableController,
TableOptionsController, TableOptionsController,
MCTTableController,
Region, Region,
InspectorRegion, InspectorRegion,
legacyRegistry legacyRegistry
@ -84,19 +82,14 @@ define([
], ],
"controllers": [ "controllers": [
{ {
"key": "TableController", "key": "TelemetryTableController",
"implementation": TableController, "implementation": TelemetryTableController,
"depends": ["$scope", "telemetryHandler", "telemetryFormatter"] "depends": ["$scope", "telemetryHandler", "telemetryFormatter"]
}, },
{ {
"key": "TableOptionsController", "key": "TableOptionsController",
"implementation": TableOptionsController, "implementation": TableOptionsController,
"depends": ["$scope"] "depends": ["$scope"]
},
{
"key": "MCTTableController",
"implementation": MCTTableController,
"depends": ["$scope", "$timeout", "$element"]
} }
], ],

View File

@ -1,13 +1,10 @@
<div class="l-view-section scrolling" <div class="l-view-section scrolling"
ng-style="overrideRowPositioning ? style="overflow: auto;"
{'overflow': 'auto'} :
{'overflow': 'scroll'}
"
> >
<table class="filterable" ng-style="overrideRowPositioning && { <table class="filterable"
ng-style="overrideRowPositioning && {
height: totalHeight + 'px', height: totalHeight + 'px',
'table-layout': overrideRowPositioning ? 'fixed' : 'auto', 'table-layout': overrideRowPositioning ? 'fixed' : 'auto'
'box-sizing': 'border-box'
}"> }">
<thead> <thead>
<tr> <tr>
@ -52,7 +49,7 @@
<td ng-repeat="header in displayHeaders" <td ng-repeat="header in displayHeaders"
ng-style="overrideRowPositioning && { ng-style="overrideRowPositioning && {
width: columnWidths[$index] + 'px', width: columnWidths[$index] + 'px',
'white-space': 'nowrap',
'max-width': columnWidths[$index] + 'px', 'max-width': columnWidths[$index] + 'px',
overflow: 'hidden', overflow: 'hidden',
'box-sizing': 'border-box' 'box-sizing': 'border-box'

View File

@ -1,4 +1,4 @@
<div ng-controller="TableController"> <div ng-controller="TelemetryTableController">
<mct-table <mct-table
headers="headers" headers="headers"
rows="rows" rows="rows"

View File

@ -36,7 +36,7 @@ define(
* @param domainObject * @param domainObject
* @constructor * @constructor
*/ */
function Table(domainObject, telemetryFormatter) { function TableConfiguration(domainObject, telemetryFormatter) {
this.domainObject = domainObject; this.domainObject = domainObject;
this.columns = []; this.columns = [];
this.telemetryFormatter = telemetryFormatter; this.telemetryFormatter = telemetryFormatter;
@ -45,14 +45,19 @@ define(
/** /**
* Build column definitions based on supplied telemetry metadata * Build column definitions based on supplied telemetry metadata
* @param metadata Metadata describing the domains and ranges available * @param metadata Metadata describing the domains and ranges available
* @returns {Table} This object * @returns {TableConfiguration} This object
*/ */
Table.prototype.buildColumns = function(metadata) { TableConfiguration.prototype.buildColumns = function(metadata) {
var self = this; var self = this;
this.columns = []; this.columns = [];
if (metadata) { if (metadata) {
if (metadata.length > 1){
self.addColumn(new NameColumn(), 0);
}
metadata.forEach(function (metadatum) { metadata.forEach(function (metadatum) {
//Push domains first //Push domains first
metadatum.domains.forEach(function (domainMetadata) { metadatum.domains.forEach(function (domainMetadata) {
@ -72,7 +77,7 @@ define(
* @param {Number} [index] Where the column should appear (will be * @param {Number} [index] Where the column should appear (will be
* affected by column filtering) * affected by column filtering)
*/ */
Table.prototype.addColumn = function (column, index) { TableConfiguration.prototype.addColumn = function (column, index) {
if (typeof index === 'undefined') { if (typeof index === 'undefined') {
this.columns.push(column); this.columns.push(column);
} else { } else {
@ -85,7 +90,7 @@ define(
* @param column * @param column
* @returns {*|string} * @returns {*|string}
*/ */
Table.prototype.getColumnTitle = function (column) { TableConfiguration.prototype.getColumnTitle = function (column) {
return column.getTitle(); return column.getTitle();
}; };
@ -93,7 +98,7 @@ define(
* Get a simple list of column titles * Get a simple list of column titles
* @returns {Array} The titles of the columns * @returns {Array} The titles of the columns
*/ */
Table.prototype.getHeaders = function() { TableConfiguration.prototype.getHeaders = function() {
var self = this; var self = this;
return this.columns.map(function (column){ return this.columns.map(function (column){
return self.getColumnTitle(column); return self.getColumnTitle(column);
@ -108,7 +113,7 @@ define(
* @returns {Object} Key value pairs where the key is the column * @returns {Object} Key value pairs where the key is the column
* title, and the value is the formatted value from the provided datum. * title, and the value is the formatted value from the provided datum.
*/ */
Table.prototype.getRowValues = function(telemetryObject, datum) { TableConfiguration.prototype.getRowValues = function(telemetryObject, datum) {
var self = this; var self = this;
return this.columns.reduce(function(rowObject, column){ return this.columns.reduce(function(rowObject, column){
var columnTitle = self.getColumnTitle(column), var columnTitle = self.getColumnTitle(column),
@ -130,10 +135,22 @@ define(
/** /**
* @private * @private
*/ */
Table.prototype.defaultColumnConfiguration = function () { TableConfiguration.prototype.defaultColumnConfiguration = function () {
return ((this.domainObject.getModel().configuration || {}).table || {}).columns || {}; return ((this.domainObject.getModel().configuration || {}).table || {}).columns || {};
}; };
/**
* Set the established configuration on the domain object
* @private
*/
TableConfiguration.prototype.saveColumnConfig = function (columnConfig) {
this.domainObject.useCapability('mutation', function (model) {
model.configuration = model.configuration || {};
model.configuration.table = model.configuration.table || {};
model.configuration.table.columns = columnConfig;
});
};
/** /**
* As part of the process of building the table definition, extract * As part of the process of building the table definition, extract
* configuration from column definitions. * configuration from column definitions.
@ -141,7 +158,7 @@ define(
* pairs where the key is the column title, and the value is a * pairs where the key is the column title, and the value is a
* boolean indicating whether the column should be shown. * boolean indicating whether the column should be shown.
*/ */
Table.prototype.getColumnConfiguration = function() { TableConfiguration.prototype.getColumnConfig = function() {
var configuration = {}, var configuration = {},
//Use existing persisted config, or default it //Use existing persisted config, or default it
defaultConfig = this.defaultColumnConfiguration(); defaultConfig = this.defaultColumnConfiguration();
@ -158,6 +175,6 @@ define(
return configuration; return configuration;
}; };
return Table; return TableConfiguration;
} }
); );

View File

@ -287,7 +287,7 @@ define(
} }
]; ];
this.$timeout(this.setElementSizes.bind(this), 0); this.$timeout(this.setElementSizes.bind(this));
}; };
/** /**

View File

@ -27,10 +27,9 @@
*/ */
define( define(
[ [
'../Table', '../TableConfiguration'
'../NameColumn'
], ],
function (Table, NameColumn) { function (TableConfiguration) {
"use strict"; "use strict";
/** /**
@ -43,7 +42,7 @@ define(
* @param telemetryFormatter * @param telemetryFormatter
* @constructor * @constructor
*/ */
function TableController( function TelemetryTableController(
$scope, $scope,
telemetryHandler, telemetryHandler,
telemetryFormatter telemetryFormatter
@ -55,7 +54,7 @@ define(
this.handle = undefined; this.handle = undefined;
//this.pending = false; //this.pending = false;
this.telemetryHandler = telemetryHandler; this.telemetryHandler = telemetryHandler;
this.table = new Table($scope.domainObject, telemetryFormatter); this.table = new TableConfiguration($scope.domainObject, telemetryFormatter);
this.changeListeners = []; this.changeListeners = [];
$scope.rows = []; $scope.rows = [];
@ -73,7 +72,7 @@ define(
this.$scope.$on("$destroy", this.destroy.bind(this)); this.$scope.$on("$destroy", this.destroy.bind(this));
} }
TableController.prototype.registerChangeListeners = function() { TelemetryTableController.prototype.registerChangeListeners = function() {
//Defer registration of change listeners until domain object is //Defer registration of change listeners until domain object is
// available in order to avoid race conditions // available in order to avoid race conditions
@ -93,7 +92,7 @@ define(
/** /**
* Release the current subscription (called when scope is destroyed) * Release the current subscription (called when scope is destroyed)
*/ */
TableController.prototype.destroy = function () { TelemetryTableController.prototype.destroy = function () {
if (this.handle) { if (this.handle) {
this.handle.unsubscribe(); this.handle.unsubscribe();
this.handle = undefined; this.handle = undefined;
@ -103,13 +102,7 @@ define(
/** /**
Create a new subscription. This is called when Create a new subscription. This is called when
*/ */
TableController.prototype.subscribe = function() { TelemetryTableController.prototype.subscribe = function() {
var self = this;
/*if (this.pending){
return;
}*/
//this.pending = true;
if (this.handle) { if (this.handle) {
this.handle.unsubscribe(); this.handle.unsubscribe();
@ -119,7 +112,6 @@ define(
//Noop because not supporting realtime data right now //Noop because not supporting realtime data right now
function noop(){ function noop(){
//self.pending = false;
} }
this.handle = this.$scope.domainObject && this.telemetryHandler.handle( this.handle = this.$scope.domainObject && this.telemetryHandler.handle(
@ -136,43 +128,25 @@ define(
/** /**
* Add any historical data available * Add any historical data available
*/ */
TableController.prototype.addHistoricalData = function(domainObject, series) { TelemetryTableController.prototype.addHistoricalData = function(domainObject, series) {
var i; var i;
//this.pending = false;
for (i=0; i < series.getPointCount(); i++) { for (i=0; i < series.getPointCount(); i++) {
this.updateRows(domainObject, this.handle.makeDatum(domainObject, series, i)); this.updateRows(domainObject, this.handle.makeDatum(domainObject, series, i));
} }
}; };
/**
* Set the established configuration on the domain object
* @private
*/
TableController.prototype.writeConfigToModel = function (configuration) {
this.$scope.domainObject.useCapability('mutation', function (model) {
model.configuration = model.configuration || {};
model.configuration.table = model.configuration.table || {};
model.configuration.table.columns = configuration;
});
};
/** /**
* Setup table columns based on domain object metadata * Setup table columns based on domain object metadata
*/ */
TableController.prototype.setup = function() { TelemetryTableController.prototype.setup = function() {
var handle = this.handle, var handle = this.handle,
table = this.table, table = this.table,
self = this, self = this;
configuration;
if (handle) { if (handle) {
handle.promiseTelemetryObjects().then(function (objects) { handle.promiseTelemetryObjects().then(function (objects) {
table.buildColumns(handle.getMetadata()); table.buildColumns(handle.getMetadata());
if (objects && objects.length > 1){
table.addColumn(new NameColumn(), 0);
}
self.filterColumns(); self.filterColumns();
// When table column configuration changes, (due to being // When table column configuration changes, (due to being
@ -191,7 +165,7 @@ define(
* be composed of multiple objects) * be composed of multiple objects)
* @param datum The data received from the telemetry source * @param datum The data received from the telemetry source
*/ */
TableController.prototype.updateRows = function (object, datum) { TelemetryTableController.prototype.updateRows = function (object, datum) {
this.$scope.rows.push(this.table.getRowValues(object, datum)); this.$scope.rows.push(this.table.getRowValues(object, datum));
}; };
@ -199,16 +173,17 @@ define(
* When column configuration changes, update the visible headers * When column configuration changes, update the visible headers
* accordingly. * accordingly.
*/ */
TableController.prototype.filterColumns = function () { TelemetryTableController.prototype.filterColumns = function (columnConfig) {
var config = this.table.getColumnConfiguration(); if (!columnConfig){
columnConfig = this.table.getColumnConfig();
this.writeConfigToModel(config); this.table.saveColumnConfig(columnConfig);
}
//Populate headers with visible columns (determined by configuration) //Populate headers with visible columns (determined by configuration)
this.$scope.headers = Object.keys(config).filter(function(column) { this.$scope.headers = Object.keys(columnConfig).filter(function(column) {
return config[column]; return columnConfig[column];
}); });
}; };
return TableController; return TelemetryTableController;
} }
); );

View File

@ -1,21 +1,21 @@
/*global define*/ /*global define*/
define( define(
[], ["../controllers/MCTTableController"],
function () { function (MCTTableController) {
"use strict"; "use strict";
function MCTTable($timeout) { function MCTTable($timeout) {
return { return {
restrict: "E", restrict: "E",
templateUrl: "platform/features/table/res/templates/mct-data-table.html", templateUrl: "platform/features/table/res/templates/mct-data-table.html",
controller: 'MCTTableController', controller: ['$scope', '$timeout', '$element', MCTTableController],
scope: { scope: {
headers: "=", headers: "=",
rows: "=", rows: "=",
enableFilter: "=?", enableFilter: "=?",
enableSort: "=?" enableSort: "=?"
} },
}; };
} }