Simplify dashboard items (#9882)

src/frontend/src/components/dashboard/widgets/QueryCountDashboardWidget.tsx

@@ -1,7 +1,7 @@
-import { ActionIcon, Group, Loader } from '@mantine/core';
+import { ActionIcon, Anchor, Group, Loader } from '@mantine/core';
-import { IconExternalLink } from '@tabler/icons-react';
+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,10 +71,25 @@ function QueryCountWidget({
         navigateToLink(url, navigate, event);
       }
     },
-    [modelProperties, params]
+    [query.isFetched, modelProperties, params]
   );
 
+  const result: ReactNode = useMemo(() => {
+    if (query.isFetching) {
+      return <Loader size='xs' />;
+    } else if (query.isError) {
       return (
+        <ActionIcon color='red' variant='transparent' size='lg'>
+          <IconExclamationCircle />
+        </ActionIcon>
+      );
+    } else {
+      return <StylishText size='xl'>{query.data?.count ?? '-'}</StylishText>;
+    }
+  }, [query.isFetching, query.isError, query.data]);
+
+  return (
+    <Anchor href='#' onClick={onFollowLink}>
       <Group
         gap='xs'
         wrap='nowrap'
@@ -84,19 +103,11 @@ function QueryCountWidget({
         </Group>
         <Group gap='xs' wrap='nowrap' justify='space-apart'>
           <Group gap='xs' wrap='nowrap' justify='right'>
-          {query.isFetching ? (
+            {result}
-            <Loader size='sm' />
-          ) : (
-            <StylishText size='md'>{query.data?.count ?? '-'}</StylishText>
-          )}
-          {modelProperties?.url_overview && (
-            <ActionIcon size='sm' variant='transparent' onClick={onFollowLink}>
-              <IconExternalLink />
-            </ActionIcon>
-          )}
           </Group>
         </Group>
       </Group>
+    </Anchor>
   );
 }