improve display of hypernode count

Author: william-schlegel

packages/app-builder/src/components/Graph/GraphComponents.tsx

@@ -1,6 +1,7 @@
 import { type FtmEntityPersonOption, type FtmEntityV2 } from '@app-builder/models/data-model';
 import { SCORING_LEVELS_COLORS } from '@app-builder/models/scoring';
 import { useDataModel } from '@app-builder/services/data/data-model';
+import { formatNumber } from '@app-builder/utils/format';
 import {
   BaseEdge,
   EdgeLabelRenderer,
@@ -13,7 +14,7 @@ import {
 import { type ReactNode, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { match } from 'ts-pattern';
-import { Button, Checkbox, cn, Tag, Tooltip } from 'ui-design-system';
+import { Button, Checkbox, cn, Tag, Tooltip, useFormatLanguage } from 'ui-design-system';
 import { Icon, type IconName } from 'ui-icons';
 import { useGraphAnnotations } from './contexts/GraphAnnotationsContext';
 import { useSelectedObject } from './contexts/GraphFocusContext';
@@ -357,6 +358,7 @@ function HypernodeNode({ id, data }: NodeProps<HypernodeRfNode>) {
   const { t } = useTranslation(graphI18n);
   const highlighted = useIsNodeHighlighted(id);
   const isHovered = useIsNodeHovered(id);
+  const locale = useFormatLanguage();
 
   return (
     <div
@@ -374,7 +376,7 @@ function HypernodeNode({ id, data }: NodeProps<HypernodeRfNode>) {
         </div>
         <Tooltip.Default content={t('graph:node.too_many', { count: data.count })}>
           <div className="text-xs h-10 min-w-10 rounded-full grid place-items-center border border-grey-border p-xs leading-none">
-            {data.count}
+            {formatNumber(data.count, { language: locale, notation: 'compact' })}
           </div>
         </Tooltip.Default>
       </div>