Fixes issues where going from another tab to health tab does not render charts in ds view

wherehows-web/app/components/datasets/containers/dataset-health.ts

@@ -1,7 +1,7 @@
 import Component from '@ember/component';
-import { get, computed, setProperties, getProperties } from '@ember/object';
+import { get, computed, setProperties, getProperties, set } from '@ember/object';
 import { task } from 'ember-concurrency';
-import ComputedProperty from '@ember/object/computed';
+import ComputedProperty, { equal } from '@ember/object/computed';
 import { IChartDatum } from 'wherehows-web/typings/app/visualization/charts';
 import { IHealthScore, IDatasetHealth } from 'wherehows-web/typings/api/datasets/health';
 import { healthCategories, healthSeverity, healthDetail } from 'wherehows-web/constants/data/temp-mock/health';
@@ -69,6 +69,22 @@ export default class DatasetHealthContainer extends Component {
    */
   tableData: Array<IHealthScore> = [];
 
+  /**
+   * Passed in from the higher level component, we use this property in order to determine whether the dataset health
+   * tab is the currently selected tab
+   * @type {string}
+   */
+  tabSelected: string;
+
+  /**
+   * Calculated from the currently selected tab to determine whether this container is the currently selected tab.
+   * Note: Highcharts calculates size and other chart details upon initial render and doesn't do a good job of handling
+   * rerenders. Because of this we want those calculations to take place when dataset health is the currently active tab,
+   * otherwise we will insert elements off screen and size will default to 0 and we lose our charts
+   * @type {ComputedProperty<boolean>}
+   */
+  isActiveTab = equal('tabSelected', 'health');
+
   /**
    * Modified categoryMetrics to add properties that will help us render our actual charts without modifying the original
    * data
@@ -163,4 +179,11 @@ export default class DatasetHealthContainer extends Component {
       currentSeverityFilter: filterType === 'severity' && newFilterName !== currentSeverityFilter ? newFilterName : ''
     });
   }
+
+  constructor() {
+    super(...arguments);
+    console.log('constructing');
+    console.log(this.tabSelected);
+    set(this, 'tabSelected', this.tabSelected);
+  }
 }

wherehows-web/app/templates/components/datasets/containers/dataset-health.hbs

@@ -1,5 +1,6 @@
 <h3>Metadata Health</h3>
 {{datasets/health/metrics-charts
+  isActiveTab=isActiveTab
   categoryData=renderedCategories
   severityData=renderedSeverity
   onCategorySelect=(action onFilterSelect "category")

wherehows-web/app/templates/components/datasets/health/metrics-charts.hbs

@@ -1,5 +1,5 @@
 <div class="dataset-health__chart-container">
-  {{#if categoryData}}
+  {{#if (and isActiveTab categoryData)}}
     {{visualization/charts/horizontal-bar-chart
       title="Categories"
       series=categoryData
@@ -8,7 +8,7 @@
   {{/if}}
 </div>
 <div class="dataset-health__chart-container">
-  {{#if severityData}}
+  {{#if (and isActiveTab severityData)}}
     {{visualization/charts/horizontal-bar-chart
       class="severity-chart"
       title="Severity"

wherehows-web/app/templates/datasets/dataset.hbs

@@ -172,7 +172,7 @@
 
     {{#if shouldShowDatasetHealth}}
       {{#tabs.tabpanel tabIds.Health}}
-        {{datasets/containers/dataset-health urn=encodedUrn}}
+        {{datasets/containers/dataset-health urn=encodedUrn tabSelected=tabSelected}}
       {{/tabs.tabpanel}}
     {{/if}}
   </div>