diff --git a/src/frontend/src/components/dashboard/widgets/QueryCountDashboardWidget.tsx b/src/frontend/src/components/dashboard/widgets/QueryCountDashboardWidget.tsx
index 7c1f0f82fb..839ecc3a6d 100644
--- a/src/frontend/src/components/dashboard/widgets/QueryCountDashboardWidget.tsx
+++ b/src/frontend/src/components/dashboard/widgets/QueryCountDashboardWidget.tsx
@@ -1,7 +1,7 @@
-import { ActionIcon, Group, Loader } from '@mantine/core';
-import { IconExternalLink } from '@tabler/icons-react';
+import { ActionIcon, Anchor, Group, Loader } from '@mantine/core';
+import { IconExclamationCircle } from '@tabler/icons-react';
import { useQuery } from '@tanstack/react-query';
-import { type ReactNode, useCallback } from 'react';
+import { type ReactNode, useCallback, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { ModelInformationDict } from '@lib/enums/ModelInformation';
@@ -54,6 +54,10 @@ function QueryCountWidget({
const onFollowLink = useCallback(
(event: any) => {
+ if (!query.isFetched) {
+ return;
+ }
+
if (modelProperties.url_overview) {
let url = modelProperties.url_overview;
@@ -67,36 +71,43 @@ function QueryCountWidget({
navigateToLink(url, navigate, event);
}
},
- [modelProperties, params]
+ [query.isFetched, modelProperties, params]
);
+ const result: ReactNode = useMemo(() => {
+ if (query.isFetching) {
+ return ;
+ } else if (query.isError) {
+ return (
+
+
+
+ );
+ } else {
+ return {query.data?.count ?? '-'};
+ }
+ }, [query.isFetching, query.isError, query.data]);
+
return (
-
-
-
- {title}
-
-
-
- {query.isFetching ? (
-
- ) : (
- {query.data?.count ?? '-'}
- )}
- {modelProperties?.url_overview && (
-
-
-
- )}
+
+
+
+
+ {title}
+
+
+
+ {result}
+
-
+
);
}