fix: fix use time series data query reactivityh

awslabs · Nov 25, 2024 · 6a3da5e · 6a3da5e
1 parent 3ad8967
commit 6a3da5e
Show file tree

Hide file tree

Showing 10 changed files with 21 additions and 1 deletion.
diff --git a/packages/core/src/data-module/TimeSeriesDataModule.ts b/packages/core/src/data-module/TimeSeriesDataModule.ts
@@ -187,7 +187,9 @@ export class TimeSeriesDataModule<Query extends DataStreamQuery> {
      */
 
     const unsubscribe = () => {
-      this.unsubscribe(subscriptionId);
+      if (this.subscriptions.getSubscription(subscriptionId)) {
+        this.unsubscribe(subscriptionId);
+      }
     };
 
     const update = (subscriptionUpdate: SubscriptionUpdate<Query>) =>

diff --git a/...hboard/src/customization/propertiesSections/propertiesAndAlarmsSettings/styledSection.tsx b/...hboard/src/customization/propertiesSections/propertiesAndAlarmsSettings/styledSection.tsx
@@ -62,6 +62,8 @@ export const StyledPropertiesAlarmsSection: FC<
     ),
   ];
 
+  // console.log(styledAssetQuery);
+
   const { assetModels } = useAssetModel({
     assetModelIds,
     iotSiteWiseClient: client,

diff --git a/packages/dashboard/src/customization/widgets/lineScatterChart/component.tsx b/packages/dashboard/src/customization/widgets/lineScatterChart/component.tsx
@@ -163,6 +163,7 @@ const LineScatterChartWidgetComponent: React.FC<LineScatterChartWidget> = (
 
   const query = queryConfig.query;
 
+  // console.log(query);
   const queries = useQueries(query);
 
   const { assetModels = [], assets = [] } = query ?? {};

diff --git a/packages/react-components/src/components/chart/baseChart.tsx b/packages/react-components/src/components/chart/baseChart.tsx
@@ -124,6 +124,7 @@ const BaseChart = ({
 
   // convert TimeSeriesDataQuery to TimeSeriesData
   const timeSeriesQueries = getTimeSeriesQueries(queries);
+  console.log(queries)
   const {
     isLoading,
     isRefreshing,

diff --git a/packages/react-components/src/components/chart/chartOptions/useChartConfiguration.ts b/packages/react-components/src/components/chart/chartOptions/useChartConfiguration.ts
@@ -169,6 +169,7 @@ export const useChartConfiguration = (
    * must create a new variable that does not change unless the identifying information about the widget
    * query has changed.
    */
+  // console.log(dataStreams);
   const [dataSteamIdentifiers, setDataStreamIdentifiers] = useState(
     toDataStreamIdentifiers(dataStreams)
   );
@@ -179,6 +180,7 @@ export const useChartConfiguration = (
 
   useEffect(() => {
     const mappedDataStreams = toDataStreamIdentifiers(dataStreams);
+    // console.log(dataStreams);
     if (isEqual(mappedDataStreams, dataSteamIdentifiers)) return;
     setDataStreamIdentifiers(mappedDataStreams);
   }, [dataStreams, dataSteamIdentifiers]);

diff --git a/packages/react-components/src/components/chart/hooks/useNormalizedDataStreams.ts b/packages/react-components/src/components/chart/hooks/useNormalizedDataStreams.ts
@@ -50,6 +50,7 @@ export const useNormalizedDataStreams = ({
   dataStreams,
   alarms,
 }: UseNormalizedDataStreamsOptions): DataStreamWithLatestAlarmState[] => {
+  // console.log(dataStreams);
   return useMemo(() => {
     const alarmDataStreams = createNonNullableList(
       alarms

diff --git a/packages/react-components/src/components/chart/hooks/useVisualizedDataStreams.ts b/packages/react-components/src/components/chart/hooks/useVisualizedDataStreams.ts
@@ -23,6 +23,7 @@ export const useVisualizedDataStreams = (
   passedInViewport?: Viewport,
   thresholdOptions: StyledThreshold[] = []
 ) => {
+  // console.log(queries);
   const { viewport, lastUpdatedBy } = useViewport();
   const [thresholds, setThresholds] = useState<Threshold[]>([]);
 
@@ -62,6 +63,8 @@ export const useVisualizedDataStreams = (
       getVisibleData(data, utilizedViewport, false)
     );
 
+    console.log(dataStreamsWithoutAlarms);
+
     return {
       hasError,
       isLoading,

diff --git a/packages/react-components/src/components/chart/legend/table/legendTableAdapter.tsx b/packages/react-components/src/components/chart/legend/table/legendTableAdapter.tsx
@@ -101,6 +101,7 @@ export const ChartLegendTableAdapter = ({
   ...options
 }: ChartLegendTableAdapterOptions) => {
   const { dataStreamMaxes, dataStreamMins } = useDataStreamMaxMin();
+  // console.log(datastreams);
   const datastreamItems = mapDataStreamInformation({
     datastreams,
     trendCursorValues,

diff --git a/packages/react-components/src/components/chart/legend/table/table.tsx b/packages/react-components/src/components/chart/legend/table/table.tsx
@@ -31,6 +31,7 @@ export const ChartLegendTable = ({
   setSelectedItems,
   selectionType,
 }: ChartLegendTableOptions) => {
+  // console.log(datastreams);
   const { items, collectionProps } = useCollection(datastreams, {
     sorting: {},
   });

diff --git a/packages/react-components/src/hooks/useTimeSeriesData/useTimeSeriesData.ts b/packages/react-components/src/hooks/useTimeSeriesData/useTimeSeriesData.ts
@@ -70,6 +70,8 @@ export const useTimeSeriesData = ({
   const prevViewportRef = useRef<undefined | Viewport>(undefined);
   const providerIdRef = useRef<undefined | string>(undefined);
 
+  console.log(queries);
+
   const scrubbedQueries = queries
     .map((query) => query.toQueryString())
     .map(
@@ -106,8 +108,10 @@ export const useTimeSeriesData = ({
     }));
 
   const queriesString = JSON.stringify(scrubbedQueries);
+  console.log('queriesString ', queriesString);
 
   useEffect(() => {
+    setDataStreams([]);
     const id = uuid();
     providerIdRef.current = id;
     const provider = ProviderStore.set(
@@ -135,6 +139,8 @@ export const useTimeSeriesData = ({
       },
     });
 
+    console.log('provider ', provider)
+
     return () => {
       unsubscribeProvider(id);
     };