fix: hide legend and error state on loading or empty state

packages/iot-app-kit-visualizations/src/components/charts/sc-webgl-base-chart/UnsupportedDataTypeStatus.tsx

@@ -8,20 +8,25 @@ import { MessageOverrides, SizeConfig } from '../../../utils/dataTypes';
 export const UnsupportedDataTypeStatus = ({
   supportedDataTypes,
   messageOverrides,
+  hasUnsupportedData,
   size,
 }: {
   supportedDataTypes: DataType[];
   messageOverrides: MessageOverrides;
+  hasUnsupportedData: boolean;
   size: SizeConfig;
 }) => {
-  const { width, height, marginLeft, marginRight, marginTop, marginBottom } = size;
+  const { width, height } = size;
+
+  if (!hasUnsupportedData) return <div />;
+
   return (
     <div
       id="unsupported-data-type-error"
       class="unsupported-data-type-status"
       style={{
-        width: `${width + marginLeft + marginRight}px`,
-        height: `${height + marginBottom + marginTop}px`,
+        width: `${width}px`,
+        height: `${height}px`,
         padding: '24px',
         background: 'white',
         border: 'solid 4px black',

packages/iot-app-kit-visualizations/src/components/charts/sc-webgl-base-chart/sc-webgl-base-chart.spec.tsx

@@ -121,12 +121,13 @@ const newChartSpecPage = async (chartProps: Partial<Components.IotAppKitVisWebgl
 };
 
 describe('legend', () => {
-  it('renders a legend with provided with a legend config', async () => {
+  it('renders a legend with provided with a legend config and data streams', async () => {
     const { chart } = await newChartSpecPage({
       legend: {
         position: LEGEND_POSITION.BOTTOM,
         width: 200,
       },
+      dataStreams: [STREAM],
     });
 
     const legend = chart.querySelector('iot-app-kit-vis-legend');
@@ -139,6 +140,7 @@ describe('legend', () => {
         position: LEGEND_POSITION.BOTTOM,
         width: 200,
       },
+      dataStreams: [STREAM],
       isEditing: true,
     });
 
@@ -152,6 +154,7 @@ describe('legend', () => {
         position: LEGEND_POSITION.BOTTOM,
         width: 200,
       },
+      dataStreams: [STREAM],
       viewport: VIEWPORT,
     });
 
@@ -163,6 +166,7 @@ describe('legend', () => {
   it('should render with custom legend', async () => {
     const { chart, page } = await newChartSpecPage({
       renderLegend: props => <div class="custom-test-legend" {...props} />,
+      dataStreams: [STREAM],
     });
 
     await page.waitForChanges();
@@ -542,7 +546,7 @@ describe('loading status', () => {
       const loadingSpinner = chart.querySelector(LOADING_SPINNER_SELECTOR);
       const legend = chart.querySelector('iot-app-kit-vis-legend');
 
-      expect(legend).toHaveAttribute('isLoading');
+      expect(legend).toBeNull();
       expect(loadingSpinner).not.toBeNull();
     });
 

packages/iot-app-kit-visualizations/src/components/charts/sc-webgl-base-chart/sc-webgl-base-chart.tsx

@@ -58,7 +58,7 @@ import { SET_VIEWPORT_EVENT_MS } from '../../common/constants';
 const MIN_WIDTH = 50;
 const MIN_HEIGHT = 50;
 
-const LEGEND_HEIGHT = 100;
+const LEGEND_HEIGHT = 50;
 
 @Component({
   tag: 'iot-app-kit-vis-webgl-base-chart',
@@ -337,13 +337,15 @@ export class ScWebglBaseChart {
     const isRightLegend = this.legend && this.legend.position === LEGEND_POSITION.RIGHT;
     const isBottomLegend = this.legend && this.legend.position === LEGEND_POSITION.BOTTOM;
 
+    const hasNoDataStreamsPresent = this.visualizedDataStreams().length === 0;
+
     return {
       ...size,
       width: Math.max(
         width - marginLeft - marginRight - (isRightLegend ? (this.legend as LegendConfig).width : 0),
         MIN_WIDTH
       ),
-      height: chartHeight - (isBottomLegend ? LEGEND_HEIGHT : 0),
+      height: chartHeight - (!hasNoDataStreamsPresent && isBottomLegend ? LEGEND_HEIGHT : 0),
     };
   };
 
@@ -455,8 +457,10 @@ export class ScWebglBaseChart {
     return this.trendContainer;
   };
 
-  getHasSupportedData = (): boolean => {
-    return this.dataStreams.every(
+  getHasUnsupportedData = (): boolean => {
+    if (this.dataStreams.length === 0) return false;
+
+    return !this.dataStreams.every(
       ({ streamType, dataType }) => streamType === StreamType.ALARM || this.supportedDataTypes.includes(dataType)
     );
   };
@@ -525,7 +529,7 @@ export class ScWebglBaseChart {
      */
 
     // avoid updating if dataStream has unsupported data
-    if (!this.getHasSupportedData()) return;
+    if (this.getHasUnsupportedData()) return;
 
     // why do we have this condition?
     // - if one of the watched props e.g. dataStreams changes this will call onUpdate
@@ -830,18 +834,6 @@ export class ScWebglBaseChart {
     const showDataStreamColor =
       this.legend != null && this.legend.showDataStreamColor != null ? this.legend.showDataStreamColor : true;
 
-    if (!this.getHasSupportedData()) {
-      return (
-        <div class="awsui iot-app-kit-vis-webgl-base-chart">
-          <UnsupportedDataTypeStatus
-            size={chartSizeConfig}
-            messageOverrides={this.messageOverrides || {}}
-            supportedDataTypes={this.supportedDataTypes}
-          />
-        </div>
-      );
-    }
-
     return [
       <div class="awsui iot-app-kit-vis-webgl-base-chart">
         {this.displaysError && <ErrorStatus hasError={hasError} size={chartSizeConfig} />}
@@ -855,6 +847,12 @@ export class ScWebglBaseChart {
             hasNoDataStreamsPresent={hasNoDataStreamsPresent}
           />
           <LoadingStatus isLoading={shouldDisplayAsLoading} />
+          <UnsupportedDataTypeStatus
+            size={chartSizeConfig}
+            messageOverrides={this.messageOverrides || {}}
+            supportedDataTypes={this.supportedDataTypes}
+            hasUnsupportedData={this.getHasUnsupportedData()}
+          />
           {this.gestures && (
             <iot-app-kit-vis-gesture-handler
               onDateRangeChange={this.handleCameraEvent}
@@ -863,7 +861,7 @@ export class ScWebglBaseChart {
             />
           )}
         </DataContainer>
-        {this.legend && (
+        {this.legend && !shouldDisplayAsLoading && !hasNoDataStreamsPresent && (
           <ChartLegendContainer config={this.legend} legendHeight={LEGEND_HEIGHT} size={chartSizeConfig}>
             {this.renderLegendComponent({ isLoading: shouldDisplayAsLoading, thresholds, showDataStreamColor })}
           </ChartLegendContainer>

packages/iot-app-kit-visualizations/src/testing/chartDescriptions/describeLegend.tsx

@@ -1,17 +1,32 @@
 import { ChartSpecPage } from './newChartSpecPage';
 import { Threshold } from '../../components/charts/common/types';
 import { COMPARISON_OPERATOR, LEGEND_POSITION } from '../../components/charts/common/constants';
+import { DATA_STREAM } from '../__mocks__/mockWidgetProperties';
 
 const VIEWPORT = { start: new Date(2000), end: new Date(2001, 0, 0), yMin: 0, yMax: 100 };
 
 export const describeLegend = (newChartSpecPage: ChartSpecPage) => {
   describe('legend', () => {
-    it('renders a legend when provided with a legend config', async () => {
+    it('renders a legend when provided with a legend config and dataStreams', async () => {
       const { chart } = await newChartSpecPage({
         legend: {
           position: LEGEND_POSITION.BOTTOM,
           width: 200,
         },
+        dataStreams: [DATA_STREAM],
+      });
+
+      const legend = chart.querySelector('iot-app-kit-vis-legend');
+      expect(legend).toBeDefined();
+    });
+
+    it('does not render a legend when provided with a legend config and empty dataStreams', async () => {
+      const { chart } = await newChartSpecPage({
+        legend: {
+          position: LEGEND_POSITION.BOTTOM,
+          width: 200,
+        },
+        dataStreams: [],
       });
 
       const legend = chart.querySelector('iot-app-kit-vis-legend');
@@ -24,6 +39,7 @@ export const describeLegend = (newChartSpecPage: ChartSpecPage) => {
           position: LEGEND_POSITION.BOTTOM,
           width: 200,
         },
+        dataStreams: [DATA_STREAM],
         isEditing: true,
       });
 
@@ -37,6 +53,7 @@ export const describeLegend = (newChartSpecPage: ChartSpecPage) => {
           position: LEGEND_POSITION.BOTTOM,
           width: 200,
         },
+        dataStreams: [DATA_STREAM],
         viewport: VIEWPORT,
       });
 
@@ -68,6 +85,7 @@ export const describeLegend = (newChartSpecPage: ChartSpecPage) => {
           position: LEGEND_POSITION.BOTTOM,
           width: 200,
         },
+        dataStreams: [DATA_STREAM],
       });
 
       const legend = chart.querySelector('iot-app-kit-vis-legend') as HTMLIotAppKitVisLegendElement;