Render scenario ui-grid on expand

[perryr16]

Any background context you want to provide?

The Scenarios & Measures section of the inventory detail page features a table of scenarios that can be expanded to show a nested ui-grid of the associated measures. Properties with numerous scenarios/measures can experience long loading times as each scenario's ui-grid introduces watchers that can slow down angular's performance.

What's this PR do?

• Utilizes a few ui-grid fastWatch and flatEntityAccess options to improve speed.
• Only renders the ui-grid if a scenario row has been expanded by the user which can dramatically reduce the number of watchers on page load.

Below is some bench marking with a property that has 8 scenarios, 6 of which have 1-3 measures (10 measures total).	Description	Number of Watchers
Current implementation	4200
Removing the scenarios and measures section	500
Proposed Solution	850

How should this be manually tested?

Load the property detail of a property with several scenarios/measures

What are the relevant tickets?

4597

Screenshots (if appropriate)

[perryr16]

I used the following script to count the number of watchers on the page. Just paste this into the dev tools console, no break points, just console. source

function getWatchers(root) {
  root = angular.element(root || document.documentElement);
  var watcherCount = 0;

  function getElemWatchers(element) {
    var isolateWatchers = getWatchersFromScope(element.data().$isolateScope);
    var scopeWatchers = getWatchersFromScope(element.data().$scope);
    var watchers = scopeWatchers.concat(isolateWatchers);
    angular.forEach(element.children(), function (childElement) {
      watchers = watchers.concat(getElemWatchers(angular.element(childElement)));
    });
    return watchers;
  }

  function getWatchersFromScope(scope) {
    if (scope) {
      return scope.$$watchers || [];
    } else {
      return [];
    }
  }

  return getElemWatchers(root);
}
getWatchers().length