From 79aa5dd6e05161289a1b9f147f5a2452c847fa4b Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Thu, 12 Sep 2024 14:59:10 -0700
Subject: [PATCH] add a tiny bit of clarity to index doc counts (#2414)

---
 .../[ccPairId]/IndexingAttemptsTable.tsx        | 17 +++++++++++++++--
 web/src/components/tooltip/Tooltip.tsx          |  6 ++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/web/src/app/admin/connector/[ccPairId]/IndexingAttemptsTable.tsx b/web/src/app/admin/connector/[ccPairId]/IndexingAttemptsTable.tsx
index d1e6d01964bf..e8d8822bbcc6 100644
--- a/web/src/app/admin/connector/[ccPairId]/IndexingAttemptsTable.tsx
+++ b/web/src/app/admin/connector/[ccPairId]/IndexingAttemptsTable.tsx
@@ -19,11 +19,12 @@ import { buildCCPairInfoUrl } from "./lib";
 import { localizeAndPrettify } from "@/lib/time";
 import { getDocsProcessedPerMinute } from "@/lib/indexAttempt";
 import { ErrorCallout } from "@/components/ErrorCallout";
-import { SearchIcon } from "@/components/icons/icons";
+import { InfoIcon, SearchIcon } from "@/components/icons/icons";
 import Link from "next/link";
 import ExceptionTraceModal from "@/components/modals/ExceptionTraceModal";
 import { PaginatedIndexAttempts } from "./types";
 import { useRouter } from "next/navigation";
+import { Tooltip } from "@/components/tooltip/Tooltip";
 
 // This is the number of index attempts to display per page
 const NUM_IN_PAGE = 8;
@@ -192,7 +193,19 @@ export function IndexingAttemptsTable({ ccPair }: { ccPair: CCPairFullInfo }) {
             <TableHeaderCell>Time Started</TableHeaderCell>
             <TableHeaderCell>Status</TableHeaderCell>
             <TableHeaderCell>New Doc Cnt</TableHeaderCell>
-            <TableHeaderCell>Total Doc Cnt</TableHeaderCell>
+            <TableHeaderCell>
+              <div className="w-fit">
+                <Tooltip
+                  width="max-w-sm"
+                  content="Total number of documents replaced in the index during this indexing attempt"
+                >
+                  <span className="cursor-help flex items-center">
+                    Total Doc Cnt
+                    <InfoIcon className="ml-1 w-4 h-4" />
+                  </span>
+                </Tooltip>
+              </div>
+            </TableHeaderCell>
             <TableHeaderCell>Error Message</TableHeaderCell>
           </TableRow>
         </TableHead>
diff --git a/web/src/components/tooltip/Tooltip.tsx b/web/src/components/tooltip/Tooltip.tsx
index 18e9ae504955..d72c13dd16c3 100644
--- a/web/src/components/tooltip/Tooltip.tsx
+++ b/web/src/components/tooltip/Tooltip.tsx
@@ -14,12 +14,14 @@ export function Tooltip({
   delayDuration = 200,
   side = "top",
   align = "center",
+  width,
 }: {
   children: ReactNode;
   content: ReactNode;
   delayDuration?: number;
   side?: "top" | "right" | "bottom" | "left";
   align?: "start" | "center" | "end";
+  width?: string;
 }) {
   return (
     <TooltipPrimitive.Provider delayDuration={delayDuration}>
@@ -33,7 +35,11 @@ export function Tooltip({
             text-inverted 
             text-sm 
             rounded 
+            ${width}
             py-1 
+            whitespace-normal
+            break-words
+            flex
             px-2 
             z-10
             shadow-lg