fix(dashboard): fixed the flash of graphs on change in query(s)

awslabs · Jun 21, 2023 · 45edc69 · 45edc69
1 parent bc6ee62
commit 45edc69
Show file tree

Hide file tree

Showing 9 changed files with 5 additions and 38 deletions.
diff --git a/packages/dashboard/src/customization/widgets/barChart/component.tsx b/packages/dashboard/src/customization/widgets/barChart/component.tsx
@@ -3,7 +3,6 @@ import { useSelector } from 'react-redux';
 
 import { BarChart } from '@iot-app-kit/react-components';
 
-import { computeQueryConfigKey } from '../utils/computeQueryConfigKey';
 import type { DashboardState } from '~/store/state';
 import type { BarChartWidget } from '.././types';
 import { useQueries } from '~/components/dashboard/queryContext';
@@ -19,12 +18,10 @@ const BarChartWidgetComponent: React.FC<BarChartWidget> = (widget) => {
   const { iotSiteWiseQuery } = useQueries();
 
   const queries = iotSiteWiseQuery && queryConfig.query ? [iotSiteWiseQuery?.timeSeriesData(queryConfig.query)] : [];
-  const key = computeQueryConfigKey(viewport, queryConfig);
   const aggregation = getAggregation(queryConfig);
 
   return (
     <BarChart
-      key={key}
       queries={queries}
       viewport={viewport}
       gestures={readOnly}

diff --git a/packages/dashboard/src/customization/widgets/kpi/component.tsx b/packages/dashboard/src/customization/widgets/kpi/component.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import pickBy from 'lodash/pickBy';
 import { KPI } from '@iot-app-kit/react-components';
-import { computeQueryConfigKey } from '../utils/computeQueryConfigKey';
 import type { DashboardState } from '~/store/state';
 import type { KPIWidget } from '../types';
 import { Box } from '@cloudscape-design/components';
@@ -31,7 +30,6 @@ const KPIWidgetComponent: React.FC<KPIWidget> = (widget) => {
 
   const { iotSiteWiseQuery } = useQueries();
   const query = iotSiteWiseQuery && queryConfig.query ? iotSiteWiseQuery?.timeSeriesData(queryConfig.query) : undefined;
-  const key = computeQueryConfigKey(viewport, queryConfig);
   const aggregation = getAggregation(queryConfig);
 
   const shouldShowEmptyState = query == null || !iotSiteWiseQuery;
@@ -56,7 +54,6 @@ const KPIWidgetComponent: React.FC<KPIWidget> = (widget) => {
 
   return (
     <KPI
-      key={key}
       query={query}
       viewport={viewport}
       styles={styleSettings}

diff --git a/packages/dashboard/src/customization/widgets/lineChart/component.tsx b/packages/dashboard/src/customization/widgets/lineChart/component.tsx
@@ -3,7 +3,6 @@ import { useSelector } from 'react-redux';
 
 import { LineChart } from '@iot-app-kit/react-components';
 
-import { computeQueryConfigKey } from '../utils/computeQueryConfigKey';
 import type { DashboardState } from '~/store/state';
 import type { LineChartWidget } from '../types';
 import { useQueries } from '~/components/dashboard/queryContext';
@@ -18,12 +17,11 @@ const LineChartWidgetComponent: React.FC<LineChartWidget> = (widget) => {
 
   const { iotSiteWiseQuery } = useQueries();
   const queries = iotSiteWiseQuery && queryConfig.query ? [iotSiteWiseQuery?.timeSeriesData(queryConfig.query)] : [];
-  const key = computeQueryConfigKey(viewport, queryConfig);
+
   const aggregation = getAggregation(queryConfig);
 
   return (
     <LineChart
-      key={key}
       queries={queries}
       viewport={viewport}
       gestures={readOnly}

diff --git a/packages/dashboard/src/customization/widgets/scatterChart/component.tsx b/packages/dashboard/src/customization/widgets/scatterChart/component.tsx
@@ -3,7 +3,6 @@ import { useSelector } from 'react-redux';
 
 import { ScatterChart } from '@iot-app-kit/react-components';
 
-import { computeQueryConfigKey } from '../utils/computeQueryConfigKey';
 import type { DashboardState } from '~/store/state';
 import type { ScatterChartWidget } from '../types';
 import { useQueries } from '~/components/dashboard/queryContext';
@@ -18,12 +17,10 @@ const ScatterChartWidgetComponent: React.FC<ScatterChartWidget> = (widget) => {
 
   const { iotSiteWiseQuery } = useQueries();
   const queries = iotSiteWiseQuery && queryConfig.query ? [iotSiteWiseQuery?.timeSeriesData(queryConfig.query)] : [];
-  const key = computeQueryConfigKey(viewport, queryConfig);
   const aggregation = getAggregation(queryConfig);
 
   return (
     <ScatterChart
-      key={key}
       queries={queries}
       viewport={viewport}
       gestures={readOnly}

diff --git a/packages/dashboard/src/customization/widgets/status-timeline/statusTimeline.tsx b/packages/dashboard/src/customization/widgets/status-timeline/statusTimeline.tsx
@@ -4,7 +4,6 @@ import { useSelector } from 'react-redux';
 import { DashboardState } from '~/store/state';
 import { StatusTimelineWidget } from '../types';
 import { useQueries } from '~/components/dashboard/queryContext';
-import { computeQueryConfigKey } from '../utils/computeQueryConfigKey';
 import { aggregateToString } from '~/customization/propertiesSections/aggregationSettings/helpers';
 import { getAggregation } from '../utils/widgetAggregationUtils';
 
@@ -16,12 +15,10 @@ const StatusTimelineWidgetComponent: React.FC<StatusTimelineWidget> = (widget) =
 
   const { iotSiteWiseQuery } = useQueries();
   const queries = iotSiteWiseQuery && queryConfig.query ? [iotSiteWiseQuery?.timeSeriesData(queryConfig.query)] : [];
-  const key = computeQueryConfigKey(viewport, queryConfig);
   const aggregation = getAggregation(queryConfig);
 
   return (
     <StatusTimeline
-      key={key}
       queries={queries}
       viewport={viewport}
       gestures={readOnly}

diff --git a/packages/dashboard/src/customization/widgets/status/component.tsx b/packages/dashboard/src/customization/widgets/status/component.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import pickBy from 'lodash/pickBy';
 import { Status } from '@iot-app-kit/react-components';
-import { computeQueryConfigKey } from '../utils/computeQueryConfigKey';
 import type { DashboardState } from '~/store/state';
 import type { StatusWidget } from '../types';
 import { Box } from '@cloudscape-design/components';
@@ -32,7 +31,6 @@ const StatusWidgetComponent: React.FC<StatusWidget> = (widget) => {
   const query = iotSiteWiseQuery && queryConfig.query ? iotSiteWiseQuery?.timeSeriesData(queryConfig.query) : undefined;
 
   const shouldShowEmptyState = query == null || !iotSiteWiseQuery;
-  const key = computeQueryConfigKey(viewport, queryConfig);
   const aggregation = getAggregation(queryConfig);
 
   if (shouldShowEmptyState) {
@@ -54,7 +52,6 @@ const StatusWidgetComponent: React.FC<StatusWidget> = (widget) => {
 
   return (
     <Status
-      key={key}
       query={query}
       viewport={viewport}
       styles={styleSettings}

diff --git a/packages/dashboard/src/customization/widgets/table/component.tsx b/packages/dashboard/src/customization/widgets/table/component.tsx
@@ -3,8 +3,6 @@ import { useSelector } from 'react-redux';
 
 import { Table, TableColumnDefinition } from '@iot-app-kit/react-components';
 
-import { computeQueryConfigKey } from '../utils/computeQueryConfigKey';
-
 import type { DashboardState } from '~/store/state';
 import type { TableWidget } from '../types';
 import { useQueries } from '~/components/dashboard/queryContext';
@@ -39,12 +37,10 @@ const TableWidgetComponent: React.FC<TableWidget> = (widget) => {
 
   const { iotSiteWiseQuery } = useQueries();
   const queries = iotSiteWiseQuery && queryConfig.query ? [iotSiteWiseQuery?.timeSeriesData(queryConfig.query)] : [];
-  const key = computeQueryConfigKey(viewport, widget.properties.queryConfig);
 
   return (
     <Table
       resizableColumns
-      key={key}
       queries={queries}
       viewport={viewport}
       columnDefinitions={columnDefinitions}

diff --git a/packages/dashboard/src/customization/widgets/utils/computeQueryConfigKey.ts b/packages/dashboard/src/customization/widgets/utils/computeQueryConfigKey.ts
diff --git a/packages/react-components/src/hooks/useTimeSeriesData/useTimeSeriesData.ts b/packages/react-components/src/hooks/useTimeSeriesData/useTimeSeriesData.ts
@@ -59,7 +59,6 @@ export const useTimeSeriesData = ({
     provider.current.subscribe({
       next: (timeSeriesDataCollection: TimeSeriesData[]) => {
         const timeSeriesData = combineTimeSeriesData(timeSeriesDataCollection, viewport);
-
         setTimeSeriesData({
           ...timeSeriesData,
           viewport,
@@ -68,15 +67,10 @@ export const useTimeSeriesData = ({
     });
 
     return () => {
-      // provider subscribe is asynchronous and will not be complete until the next frame stack, so we
-      // defer the unsubscription to ensure that the subscription is always complete before unsubscribed.
-      setTimeout(() => {
-        if (provider.current) {
-          provider.current.unsubscribe();
-        }
-        provider.current = undefined;
-        prevViewport.current = undefined;
-      });
+      provider.current?.unsubscribe();
+      provider.current = undefined;
+      prevViewport.current = undefined;
+      setTimeSeriesData(undefined);
     };
   }, [queriesString]);