feat: Implement query chunking for charts

Author: pulpdrew

.changeset/soft-donkeys-fetch.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+feat: Implement query chunking for charts

packages/app/package.json

@@ -41,7 +41,7 @@
     "@mantine/spotlight": "7.9.2",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@tabler/icons-react": "^3.5.0",
-    "@tanstack/react-query": "^5.56.2",
+    "@tanstack/react-query": "^5.90.2",
     "@tanstack/react-query-devtools": "^5.56.2",
     "@tanstack/react-table": "^8.7.9",
     "@tanstack/react-virtual": "^3.0.1",

packages/app/src/components/DBTimeChart.tsx

@@ -62,7 +62,7 @@ function DBTimeChartComponent({
     limit: { limit: 100000 },
   };
 
-  const { data, isLoading, isError, error, isPlaceholderData, isSuccess } =
+  const { data, isLoading, isError, error, isSuccess, isFetching } =
     useQueriedChartConfig(queriedConfig, {
       placeholderData: (prev: any) => prev,
       queryKey: [queryKeyPrefix, queriedConfig],
@@ -75,7 +75,6 @@ function DBTimeChartComponent({
     }
   }, [isError, isErrorExpanded, errorExpansion]);
 
-  const isLoadingOrPlaceholder = isLoading || isPlaceholderData;
   const { data: source } = useSource({ id: sourceId });
 
   const { graphResults, timestampColumn, groupKeys, lineNames, lineColors } =
@@ -338,7 +337,7 @@ function DBTimeChartComponent({
           graphResults={graphResults}
           groupKeys={groupKeys}
           isClickActive={false}
-          isLoading={isLoadingOrPlaceholder}
+          isLoading={isFetching}
           lineColors={lineColors}
           lineNames={lineNames}
           logReferenceTimestamp={logReferenceTimestamp}

packages/app/src/components/PatternTable.tsx

@@ -29,10 +29,11 @@ export default function PatternTable({
 
   const [selectedPattern, setSelectedPattern] = useState<Pattern | null>(null);
 
-  const { totalCount, isLoading: isTotalCountLoading } = useSearchTotalCount(
-    totalCountConfig,
-    totalCountQueryKeyPrefix,
-  );
+  const {
+    totalCount,
+    isLoading: isTotalCountLoading,
+    isTotalCountComplete,
+  } = useSearchTotalCount(totalCountConfig, totalCountQueryKeyPrefix);
 
   const {
     data: groupedResults,
@@ -46,7 +47,8 @@ export default function PatternTable({
     totalCount,
   });
 
-  const isLoading = isTotalCountLoading || isGroupedPatternsLoading;
+  const isLoading =
+    isTotalCountLoading || !isTotalCountComplete || isGroupedPatternsLoading;
 
   const sortedGroupedResults = useMemo(() => {
     return Object.values(groupedResults).sort(

packages/app/src/components/SearchTotalCountChart.tsx

@@ -28,6 +28,8 @@ export function useSearchTotalCount(
     placeholderData: keepPreviousData, // no need to flash loading state when in live tail
   });
 
+  const isTotalCountComplete = !!totalCountData?.isComplete;
+
   const totalCount = useMemo(() => {
     return totalCountData?.data?.reduce(
       (p: number, v: any) => p + Number.parseInt(v['count()']),
@@ -39,6 +41,7 @@ export function useSearchTotalCount(
     totalCount,
     isLoading,
     isError,
+    isTotalCountComplete,
   };
 }