fix: pass in refresh rate through the query instead of props

packages/core/src/common/types.ts

@@ -5,6 +5,7 @@ import type {
 import type {
   ComparisonOperator,
   DataStreamId,
+  RequestSettings,
   StatusIconType,
   TimeSeriesData,
 } from '../data-module/types';
@@ -54,6 +55,7 @@ export interface Query<Result, Params = void> {
 export interface TimeQuery<Result, Params = void>
   extends Query<Result, Params> {
   build(sessionId: string, params?: Params): ProviderWithViewport<Result>;
+  getRequestSettings(): RequestSettings | undefined;
 }
 
 export interface TreeProvider<Result, Branch> extends Provider<Result> {

packages/core/src/data-module/types.ts

@@ -149,8 +149,15 @@ export type DataModuleSubscription<Query extends DataStreamQuery> = {
   queries: Query[];
 };
 
+type RefreshRate = 1000 | 5000 | 10000 | 60000 | 300000;
+
+export type RequestSettings = {
+  refreshRate?: RefreshRate;
+};
+
 export type DataStreamQuery = {
   cacheSettings?: CacheSettings;
+  requestSettings?: RequestSettings;
 };
 
 export type AnyDataStreamQuery = DataStreamQuery & any;

packages/dashboard/src/components/dashboard/index.test.tsx

@@ -8,6 +8,7 @@ import Dashboard from './index';
 import React from 'react';
 import { type IoTTwinMakerClient } from '@aws-sdk/client-iottwinmaker';
 import { type IoTSiteWiseClient } from '@aws-sdk/client-iotsitewise';
+import { RefreshRate } from '../querySettingsSync/types';
 
 it('renders', function () {
   const { queryByText, queryByTestId } = render(
@@ -121,7 +122,7 @@ it('passes the correct viewMode to onSave', function () {
     widgets: [],
     viewport: { duration: '5m' },
     querySettings: {
-      refreshRate: 5000,
+      refreshRate: 5000 as RefreshRate,
     },
   };
 

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

@@ -1,5 +1,6 @@
 import { DataStream, Primitive } from '@iot-app-kit/core';
 import { createContext, useContext } from 'react';
+import { useRefreshRate } from '~/customization/hooks/useRefreshRate';
 import { assetModelQueryToSiteWiseAssetQuery } from '~/customization/widgets/utils/assetModelQueryToAssetQuery';
 import {
   DashboardIotSiteWiseQueries,
@@ -14,8 +15,10 @@ export const useQueries = ({
   assets = [],
   properties = [],
   assetModels = [],
+  requestSettings = {},
 }: IoTSiteWiseDataStreamQuery = {}) => {
   const { iotSiteWiseQuery } = useContext(QueryContext);
+  const [refreshRate] = useRefreshRate();
 
   if (
     iotSiteWiseQuery == null ||
@@ -28,8 +31,13 @@ export const useQueries = ({
     assetModels,
     assets,
     properties,
+    requestSettings: {
+      ...requestSettings,
+      refreshRate,
+    },
   });
 
+  //fetch time series data has settings object
   const queries = [iotSiteWiseQuery.timeSeriesData(mappedQuery)] ?? [];
 
   return queries;

packages/dashboard/src/components/querySettingsSync/constants.ts

@@ -0,0 +1,47 @@
+import type {
+  RefreshRate,
+  RefreshRateString,
+  RefreshRateOption,
+} from './types';
+
+export const SECOND_IN_MS = 1000 as const satisfies RefreshRate;
+export const SECOND_IN_MS_STRING = '1000' as const satisfies RefreshRateString;
+
+export const FIVE_SECONDS_IN_MS = 5000 as const satisfies RefreshRate;
+export const FIVE_SECONDS_IN_MS_STRING =
+  '5000' as const satisfies RefreshRateString;
+
+export const TEN_SECONDS_IN_MS = 10000 as const satisfies RefreshRate;
+export const TEN_SECONDS_IN_MS_STRING =
+  '10000' as const satisfies RefreshRateString;
+
+export const MINUTE_IN_MS = 60000 as const satisfies RefreshRate;
+export const MINUTE_IN_MS_STRING = '60000' as const satisfies RefreshRateString;
+
+export const FIVE_MINUTES_IN_MS = 300000 as const satisfies RefreshRate;
+export const FIVE_MINUTES_IN_MS_STRING =
+  '300000' as const satisfies RefreshRateString;
+
+export const REFRESH_RATE_OPTIONS = [
+  { label: '1s', value: SECOND_IN_MS_STRING },
+  { label: '5s', value: FIVE_SECONDS_IN_MS_STRING },
+  { label: '10s', value: TEN_SECONDS_IN_MS_STRING },
+  { label: '1m', value: MINUTE_IN_MS_STRING },
+  { label: '5m', value: FIVE_MINUTES_IN_MS_STRING },
+] satisfies RefreshRateOption[];
+
+export const DEFAULT_REFRESH_RATE = FIVE_SECONDS_IN_MS;
+export const DEFAULT_REFRESH_RATE_OPTION = REFRESH_RATE_OPTIONS[1];
+
+type RefreshRateOptionMap = {
+  [key in RefreshRate]: RefreshRateOption;
+};
+
+export const REFRESH_RATE_OPTION_MAP =
+  REFRESH_RATE_OPTIONS.reduce<RefreshRateOptionMap>(
+    (optionMap, { label, value }) => ({
+      ...optionMap,
+      [parseInt(value, 10)]: { label, value },
+    }),
+    {} as RefreshRateOptionMap
+  );

packages/dashboard/src/components/querySettingsSync/refreshRateDropDown.tsx

@@ -1,35 +1,44 @@
 import { Alert, FormField, Modal, Select } from '@cloudscape-design/components';
 import React, { useState } from 'react';
 import {
-  DEFAULT_REFRESH_RATE,
-  DEFAULT_OPTION,
-  refreshRateOptionMap,
-  refreshRateOptions,
-} from './utils';
+  DEFAULT_REFRESH_RATE_OPTION,
+  REFRESH_RATE_OPTIONS,
+  REFRESH_RATE_OPTION_MAP,
+} from './constants';
 import { useRefreshRate } from '~/customization/hooks/useRefreshRate';
 import { SECOND_IN_MS } from '@iot-app-kit/core';
+import invariant from 'tiny-invariant';
+import { RefreshRate } from './types';
 
 export const RefreshRateDropDown = () => {
   const [refreshRate, updateRefreshRate] = useRefreshRate();
   const [visible, setVisible] = useState(refreshRate === SECOND_IN_MS);
 
   const currentOption =
-    refreshRateOptionMap[refreshRate ?? DEFAULT_REFRESH_RATE];
+    refreshRate != null
+      ? REFRESH_RATE_OPTION_MAP[refreshRate]
+      : DEFAULT_REFRESH_RATE_OPTION;
 
   return (
     <>
       <FormField label='Refresh rate'>
         <Select
-          selectedOption={currentOption ?? DEFAULT_OPTION}
-          onChange={({ detail }) => {
-            updateRefreshRate(
-              parseInt(
-                detail.selectedOption.value ?? DEFAULT_REFRESH_RATE.toString()
-              )
+          selectedOption={currentOption}
+          onChange={({
+            detail: {
+              selectedOption: { value: refreshRateString },
+            },
+          }) => {
+            invariant(
+              refreshRateString != null,
+              'Expected refresh rate to be defined.'
             );
-            setVisible(detail.selectedOption.value === SECOND_IN_MS.toString());
+            const refreshRate = parseInt(refreshRateString, 10) as RefreshRate;
+
+            updateRefreshRate(refreshRate);
+            setVisible(refreshRate === SECOND_IN_MS);
           }}
-          options={refreshRateOptions}
+          options={REFRESH_RATE_OPTIONS}
         />
       </FormField>
       <Modal

packages/dashboard/src/components/querySettingsSync/types.ts

@@ -1,5 +1,7 @@
-export const SECOND_IN_MS = 1000;
-export const FIVE_SECONDS_IN_MS = 5 * SECOND_IN_MS;
-export const TEN_SECONDS_IN_MS = 10 * SECOND_IN_MS;
-export const MINUTE_IN_MS = 60 * SECOND_IN_MS;
-export const FIVE_MINUTES_IN_MS = 5 * MINUTE_IN_MS;
+import { type SelectProps } from '@cloudscape-design/components';
+
+export type RefreshRate = 1000 | 5000 | 10000 | 60000 | 300000;
+export type RefreshRateString = '1000' | '5000' | '10000' | '60000' | '300000';
+export type RefreshRateOption = NonNullable<SelectProps['options']>[number] & {
+  value: RefreshRateString;
+};

packages/dashboard/src/customization/hooks/useRefreshRate.ts

@@ -1,11 +1,12 @@
 import { useDispatch, useSelector } from 'react-redux';
+import { RefreshRate } from '~/components/querySettingsSync/types';
 import { onUpdateRefreshRateAction } from '~/store/actions';
 import { DashboardState } from '~/store/state';
 
 export const useRefreshRate = () => {
   const dispatch = useDispatch();
 
-  const updateRefreshRate = (refreshRate: number) => {
+  const updateRefreshRate = (refreshRate: RefreshRate) => {
     dispatch(
       onUpdateRefreshRateAction({
         refreshRate,

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

@@ -11,15 +11,13 @@ import { getAggregation } from '../utils/widgetAggregationUtils';
 import { aggregateToString } from '~/customization/propertiesSections/formatDataSettings/helpers';
 import { useChartSize } from '~/hooks/useChartSize';
 import WidgetTile from '~/components/widgets/tile';
-import { useRefreshRate } from '~/customization/hooks/useRefreshRate';
 
 const BarChartWidgetComponent: React.FC<BarChartWidget> = (widget) => {
   const { viewport } = useViewport();
   const readOnly = useSelector((state: DashboardState) => state.readOnly);
   const dashboardSignificantDigits = useSelector(
     (state: DashboardState) => state.significantDigits
   );
-  const [refreshRate] = useRefreshRate();
   const chartSize = useChartSize(widget);
 
   const {
@@ -59,7 +57,6 @@ const BarChartWidgetComponent: React.FC<BarChartWidget> = (widget) => {
         thresholds={thresholds}
         thresholdSettings={thresholdSettings}
         significantDigits={significantDigits}
-        refreshRate={refreshRate}
       />
     </WidgetTile>
   );

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

@@ -13,16 +13,12 @@ import { getAggregation } from '../utils/widgetAggregationUtils';
 import './component.css';
 import { aggregateToString } from '~/customization/propertiesSections/formatDataSettings/helpers';
 import WidgetTile from '~/components/widgets/tile';
-import { useRefreshRate } from '~/customization/hooks/useRefreshRate';
-
 const KPIWidgetComponent: React.FC<KPIWidget> = (widget) => {
   const { viewport } = useViewport();
   const dashboardSignificantDigits = useSelector(
     (state: DashboardState) => state.significantDigits
   );
 
-  const [refreshRate] = useRefreshRate();
-
   const {
     styleSettings,
     queryConfig,
@@ -82,7 +78,6 @@ const KPIWidgetComponent: React.FC<KPIWidget> = (widget) => {
         thresholds={thresholds}
         aggregationType={aggregateToString(aggregation)}
         significantDigits={significantDigits}
-        refreshRate={refreshRate}
       />
     </WidgetTile>
   );

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

@@ -29,8 +29,6 @@ import { default as lineSvgDark } from './line-dark.svg';
 import { IoTSiteWiseDataStreamQuery } from '~/types';
 import { assetModelQueryToSiteWiseAssetQuery } from '../utils/assetModelQueryToAssetQuery';
 import { onUpdateWidgetsAction } from '~/store/actions';
-import { useRefreshRate } from '~/customization/hooks/useRefreshRate';
-
 const mapConnectionStyleToVisualizationType = (
   connectionStyle: LineStyles['connectionStyle']
 ): ChartStyleSettingsOptions['visualizationType'] => {
@@ -151,7 +149,6 @@ const LineScatterChartWidgetComponent: React.FC<LineScatterChartWidget> = (
   const dashboardSignificantDigits = useSelector(
     (state: DashboardState) => state.significantDigits
   );
-  const [refreshRate] = useRefreshRate();
 
   const {
     title,
@@ -227,7 +224,6 @@ const LineScatterChartWidgetComponent: React.FC<LineScatterChartWidget> = (
         defaultVisualizationType={mapConnectionStyleToVisualizationType(
           line?.connectionStyle
         )}
-        refreshRate={refreshRate}
       />
     </WidgetTile>
   );

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

@@ -10,8 +10,6 @@ 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';
-import { useRefreshRate } from '~/customization/hooks/useRefreshRate';
-
 const StatusTimelineWidgetComponent: React.FC<StatusTimelineWidget> = (
   widget
 ) => {
@@ -20,7 +18,6 @@ const StatusTimelineWidgetComponent: React.FC<StatusTimelineWidget> = (
   const dashboardSignificantDigits = useSelector(
     (state: DashboardState) => state.significantDigits
   );
-  const [refreshRate] = useRefreshRate();
 
   const {
     title,
@@ -61,7 +58,6 @@ const StatusTimelineWidgetComponent: React.FC<StatusTimelineWidget> = (
         thresholds={thresholds}
         aggregationType={aggregateToString(aggregation)}
         significantDigits={significantDigits}
-        refreshRate={refreshRate}
       />
     </WidgetTile>
   );

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

@@ -12,14 +12,11 @@ import { aggregateToString } from '~/customization/propertiesSections/formatData
 import { getAggregation } from '../utils/widgetAggregationUtils';
 import './component.css';
 import WidgetTile from '~/components/widgets/tile/tile';
-import { useRefreshRate } from '~/customization/hooks/useRefreshRate';
-
 const StatusWidgetComponent: React.FC<StatusWidget> = (widget) => {
   const { viewport } = useViewport();
   const dashboardSignificantDigits = useSelector(
     (state: DashboardState) => state.significantDigits
   );
-  const [refreshRate] = useRefreshRate();
 
   const {
     styleSettings,
@@ -80,7 +77,6 @@ const StatusWidgetComponent: React.FC<StatusWidget> = (widget) => {
         thresholds={thresholds}
         aggregationType={aggregateToString(aggregation)}
         significantDigits={significantDigits}
-        refreshRate={refreshRate}
       />
     </WidgetTile>
   );

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

@@ -29,8 +29,6 @@ import { onUpdateWidgetsAction } from '~/store/actions';
 import { useTableItems } from './useTableItems';
 import WidgetTile from '~/components/widgets/tile/tile';
 import { assetModelQueryToSiteWiseAssetQuery } from '../utils/assetModelQueryToAssetQuery';
-import { useRefreshRate } from '~/customization/hooks/useRefreshRate';
-
 export const DEFAULT_TABLE_COLUMN_DEFINITIONS: TableColumnDefinition[] = [
   {
     key: 'property',
@@ -54,7 +52,6 @@ const TableWidgetComponent: React.FC<TableWidget> = (widget) => {
   const dashboardSignificantDigits = useSelector(
     (state: DashboardState) => state.significantDigits
   );
-  const [refreshRate] = useRefreshRate();
 
   const {
     queryConfig,
@@ -139,7 +136,6 @@ const TableWidgetComponent: React.FC<TableWidget> = (widget) => {
             )
           }
           propertyFiltering={PROPERTY_FILTERING}
-          refreshRate={refreshRate}
         />
       </div>
     </WidgetTile>