fix: remove viewport and query from widget render key

packages/dashboard/src/components/dashboard/queryContext.ts

@@ -1,6 +1,16 @@
 import { createContext, useContext } from 'react';
-import { DashboardIotSiteWiseQueries } from '~/types';
+import { DashboardIotSiteWiseQueries, IoTSiteWiseDataStreamQuery } from '~/types';
 
 export const QueryContext = createContext<Partial<DashboardIotSiteWiseQueries>>({});
 
-export const useQueries = () => useContext(QueryContext);
+export const useQueries = ({ assets = [], properties = [] }: IoTSiteWiseDataStreamQuery = {}) => {
+  const { iotSiteWiseQuery } = useContext(QueryContext);
+
+  if (iotSiteWiseQuery == null || (assets.length === 0 && properties.length === 0)) {
+    return [];
+  }
+
+  const queries = [iotSiteWiseQuery.timeSeriesData({ assets, properties })] ?? [];
+
+  return queries;
+};

packages/dashboard/src/customization/widgets/barChart/component.tsx

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 
 import { BarChart, useViewport } from '@iot-app-kit/react-components';
 
-import { computeQueryConfigKey } from '../utils/computeQueryConfigKey';
+import { createWidgetRenderKey } from '../utils/createWidgetRenderKey';
 import type { DashboardState } from '~/store/state';
 import type { BarChartWidget } from '.././types';
 import { useQueries } from '~/components/dashboard/queryContext';
@@ -27,12 +27,8 @@ const BarChartWidgetComponent: React.FC<BarChartWidget> = (widget) => {
     significantDigits: widgetSignificantDigits,
   } = widget.properties;
 
-  const { iotSiteWiseQuery } = useQueries();
-  const queries =
-    iotSiteWiseQuery && queryConfig.query
-      ? [iotSiteWiseQuery?.timeSeriesData({ assets: [], ...queryConfig.query })]
-      : [];
-  const key = computeQueryConfigKey(undefined, queryConfig);
+  const queries = useQueries(queryConfig.query);
+  const key = createWidgetRenderKey(widget.id);
   const aggregation = getAggregation(widget);
   const significantDigits = widgetSignificantDigits ?? dashboardSignificantDigits;
   // there may be better ways to fix this, i.e. not have -44 and let the chart container  take its parent height,

packages/dashboard/src/customization/widgets/kpi/component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import pickBy from 'lodash/pickBy';
 import { KPI, useViewport } from '@iot-app-kit/react-components';
-import { computeQueryConfigKey } from '../utils/computeQueryConfigKey';
+import { createWidgetRenderKey } from '../utils/createWidgetRenderKey';
 import type { DashboardState } from '~/store/state';
 import type { KPIWidget } from '../types';
 import { Box } from '@cloudscape-design/components';
@@ -32,12 +32,11 @@ const KPIWidgetComponent: React.FC<KPIWidget> = (widget) => {
     significantDigits: widgetSignificantDigits,
   } = widget.properties;
 
-  const { iotSiteWiseQuery } = useQueries();
-  const query = iotSiteWiseQuery && queryConfig.query ? iotSiteWiseQuery?.timeSeriesData(queryConfig.query) : undefined;
-  const key = computeQueryConfigKey(viewport, queryConfig);
+  const queries = useQueries(queryConfig.query);
+  const key = createWidgetRenderKey(widget.id);
   const aggregation = getAggregation(widget);
 
-  const shouldShowEmptyState = query == null || !iotSiteWiseQuery;
+  const shouldShowEmptyState = queries.length === 0;
 
   if (shouldShowEmptyState) {
     return (
@@ -64,10 +63,9 @@ const KPIWidgetComponent: React.FC<KPIWidget> = (widget) => {
   const significantDigits = widgetSignificantDigits ?? dashboardSignificantDigits;
 
   return (
-    <WidgetTile widget={widget} removeable>
+    <WidgetTile widget={widget} removeable key={key}>
       <KPI
-        key={key}
-        query={query}
+        query={queries[0]}
         viewport={viewport}
         styles={styleSettings}
         settings={settings}

packages/dashboard/src/customization/widgets/lineScatterChart/component.tsx

@@ -161,9 +161,7 @@ const LineScatterChartWidgetComponent: React.FC<LineScatterChartWidget> = (widge
         .filter((asset) => asset.properties.length > 0) ?? [],
   };
 
-  const { iotSiteWiseQuery } = useQueries();
-
-  const queries = iotSiteWiseQuery && filteredQuery ? [iotSiteWiseQuery?.timeSeriesData(filteredQuery)] : [];
+  const queries = useQueries(filteredQuery);
 
   const styleSettings = useAdaptedStyleSettings({ line, symbol }, filteredQuery);
 
@@ -177,9 +175,7 @@ const LineScatterChartWidgetComponent: React.FC<LineScatterChartWidget> = (widge
   // the 44 is from the widget tile header's height
   const size = { width: chartSize.width, height: chartSize.height - 44 };
 
-  const isEmptyWidget =
-    !queryConfig.query || (queryConfig.query.assets?.length === 0 && queryConfig.query.properties?.length === 0);
-
+  const isEmptyWidget = queries.length === 0;
   if (isEmptyWidget) {
     return (
       <NoChartData

packages/dashboard/src/customization/widgets/status-timeline/statusTimeline.tsx

@@ -4,10 +4,12 @@ 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 { createWidgetRenderKey } from '../utils/createWidgetRenderKey';
 import { aggregateToString } from '~/customization/propertiesSections/aggregationSettings/helpers';
 import { getAggregation } from '../utils/widgetAggregationUtils';
 import WidgetTile from '~/components/widgets/tile';
+import NoChartData from '../components/no-chart-data';
+import { default as timelineSvgDark } from './timeline-dark.svg';
 
 const StatusTimelineWidgetComponent: React.FC<StatusTimelineWidget> = (widget) => {
   const { viewport } = useViewport();
@@ -22,17 +24,25 @@ const StatusTimelineWidgetComponent: React.FC<StatusTimelineWidget> = (widget) =
     significantDigits: widgetSignificantDigits,
   } = widget.properties;
 
-  const { iotSiteWiseQuery } = useQueries();
-  const queries = iotSiteWiseQuery && queryConfig.query ? [iotSiteWiseQuery?.timeSeriesData(queryConfig.query)] : [];
-  const key = computeQueryConfigKey(undefined, queryConfig);
+  const queries = useQueries(queryConfig.query);
+  const key = createWidgetRenderKey(widget.id);
   const aggregation = getAggregation(widget);
 
   const significantDigits = widgetSignificantDigits ?? dashboardSignificantDigits;
 
+  const isEmptyWidget = queries.length === 0;
+  if (isEmptyWidget) {
+    return (
+      <NoChartData
+        icon={timelineSvgDark}
+        emptyStateText='Browse and select to add your asset properties in your line widget.'
+      />
+    );
+  }
+
   return (
-    <WidgetTile widget={widget} removeable>
+    <WidgetTile widget={widget} removeable key={key}>
       <StatusTimeline
-        key={key}
         queries={queries}
         viewport={viewport}
         gestures={readOnly}

packages/dashboard/src/customization/widgets/status/component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import pickBy from 'lodash/pickBy';
 import { Status, useViewport } from '@iot-app-kit/react-components';
-import { computeQueryConfigKey } from '../utils/computeQueryConfigKey';
+import { createWidgetRenderKey } from '../utils/createWidgetRenderKey';
 import type { DashboardState } from '~/store/state';
 import type { StatusWidget } from '../types';
 import { Box } from '@cloudscape-design/components';
@@ -29,11 +29,9 @@ const StatusWidgetComponent: React.FC<StatusWidget> = (widget) => {
     significantDigits: widgetSignificantDigits,
   } = widget.properties;
 
-  const { iotSiteWiseQuery } = useQueries();
-  const query = iotSiteWiseQuery && queryConfig.query ? iotSiteWiseQuery?.timeSeriesData(queryConfig.query) : undefined;
-
-  const shouldShowEmptyState = query == null || !iotSiteWiseQuery;
-  const key = computeQueryConfigKey(viewport, queryConfig);
+  const queries = useQueries(queryConfig.query);
+  const shouldShowEmptyState = queries.length === 0;
+  const key = createWidgetRenderKey(widget.id);
   const aggregation = getAggregation(widget);
 
   if (shouldShowEmptyState) {
@@ -58,7 +56,7 @@ const StatusWidgetComponent: React.FC<StatusWidget> = (widget) => {
   return (
     <Status
       key={key}
-      query={query}
+      query={queries[0]}
       viewport={viewport}
       styles={styleSettings}
       settings={settings}

packages/dashboard/src/customization/widgets/table/component.tsx

@@ -6,7 +6,7 @@ import { Table, TableColumnDefinition, useViewport } from '@iot-app-kit/react-co
 
 import EmptyTableComponent from './emptyTableComponent';
 
-import { computeQueryConfigKey } from '../utils/computeQueryConfigKey';
+import { createWidgetRenderKey } from '../utils/createWidgetRenderKey';
 import type { DashboardState } from '~/store/state';
 import type { TableWidget } from '../types';
 import { useQueries } from '~/components/dashboard/queryContext';
@@ -41,9 +41,8 @@ const TableWidgetComponent: React.FC<TableWidget> = (widget) => {
 
   const { queryConfig, thresholds, significantDigits: widgetSignificantDigits } = widget.properties;
 
-  const { iotSiteWiseQuery } = useQueries();
-  const queries = iotSiteWiseQuery && queryConfig.query ? [iotSiteWiseQuery?.timeSeriesData(queryConfig.query)] : [];
-  const key = computeQueryConfigKey(viewport, widget.properties.queryConfig);
+  const queries = useQueries(queryConfig.query);
+  const key = createWidgetRenderKey(widget.id);
 
   const items = useTableItems(queryConfig.query);
 

packages/dashboard/src/customization/widgets/utils/createWidgetRenderKey.ts

@@ -0,0 +1,5 @@
+export function createWidgetRenderKey(widgetId: string): string {
+  const renderKey = widgetId;
+
+  return renderKey;
+}