feat: Add verbose time range used for search in results table (#1004)

<img width="1040" height="317" alt="image" src="https://github.com/user-attachments/assets/ec91cfd4-8344-434c-85ce-66737e274348" />
<img width="1162" height="340" alt="image" src="https://github.com/user-attachments/assets/d74902ba-9e85-4513-9738-a36337e4af02" />

.changeset/itchy-walls-smoke.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+feat: Add verbose time range used for search in results table

packages/app/src/components/DBRowTable.tsx

@@ -1,5 +1,6 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import cx from 'classnames';
+import { format, formatDistance } from 'date-fns';
 import { isString } from 'lodash';
 import curry from 'lodash/curry';
 import { Button, Modal } from 'react-bootstrap';
@@ -235,6 +236,7 @@ export const RawLogTable = memo(
     isError,
     error,
     columnTypeMap,
+    dateRange,
   }: {
     wrapLines: boolean;
     displayedColumns: string[];
@@ -262,6 +264,7 @@ export const RawLogTable = memo(
 
     isError?: boolean;
     error?: ClickHouseQueryError | Error;
+    dateRange?: [Date, Date];
   }) => {
     const generateRowMatcher = generateRowId;
 
@@ -760,7 +763,25 @@ export const RawLogTable = memo(
                       <div className="spin-animate d-inline-block">
                         <i className="bi bi-arrow-repeat" />
                       </div>{' '}
-                      Loading results...
+                      Loading results
+                      {dateRange?.[0] != null && dateRange?.[1] != null ? (
+                        <>
+                          {' '}
+                          across{' '}
+                          {formatDistance(dateRange?.[1], dateRange?.[0])} {'('}
+                          <FormatTime
+                            value={dateRange?.[0]}
+                            format="withYear"
+                          />{' '}
+                          to{' '}
+                          <FormatTime
+                            value={dateRange?.[1]}
+                            format="withYear"
+                          />
+                          {')'}
+                        </>
+                      ) : null}
+                      ...
                     </div>
                   ) : hasNextPage == false &&
                     isLoading == false &&
@@ -805,10 +826,26 @@ export const RawLogTable = memo(
                     dedupedRows.length === 0 ? (
                     <div className="my-3">
                       No results found.
-                      <div className="text-muted mt-3">
+                      <Text mt="sm" c="gray.3">
                         Try checking the query explainer in the search bar if
                         there are any search syntax issues.
-                      </div>
+                      </Text>
+                      {dateRange?.[0] != null && dateRange?.[1] != null ? (
+                        <Text mt="sm" c="gray.3">
+                          Searched Time Range:{' '}
+                          {formatDistance(dateRange?.[1], dateRange?.[0])} {'('}
+                          <FormatTime
+                            value={dateRange?.[0]}
+                            format="withYear"
+                          />{' '}
+                          to{' '}
+                          <FormatTime
+                            value={dateRange?.[1]}
+                            format="withYear"
+                          />
+                          {')'}
+                        </Text>
+                      ) : null}
                     </div>
                   ) : (
                     <div />
@@ -1134,6 +1171,7 @@ function DBSqlRowTableComponent({
         isError={isError}
         error={error ?? undefined}
         columnTypeMap={columnMap}
+        dateRange={config.dateRange}
       />
     </>
   );

packages/app/src/useFormatTime.tsx

@@ -5,7 +5,7 @@ import { useUserPreferences } from './useUserPreferences';
 
 type DateLike = number | string | Date;
 
-type DateFormat = 'normal' | 'short' | 'withMs' | 'time';
+type DateFormat = 'normal' | 'short' | 'withMs' | 'time' | 'withYear';
 
 const parse = (time: DateLike) => {
   if (time instanceof Date) {

packages/common-utils/src/utils.ts

@@ -270,6 +270,10 @@ const TIME_TOKENS = {
     '12h': 'MMM d h:mm:ss.SSS a',
     '24h': 'MMM d HH:mm:ss.SSS',
   },
+  withYear: {
+    '12h': 'MMM d yyyy h:mm:ss a',
+    '24h': 'MMM d yyyy HH:mm:ss',
+  },
   time: {
     '12h': 'h:mm:ss a',
     '24h': 'HH:mm:ss',
@@ -284,7 +288,7 @@ export const formatDate = (
     clock = '12h',
   }: {
     isUTC?: boolean;
-    format?: 'normal' | 'short' | 'withMs' | 'time';
+    format?: 'normal' | 'short' | 'withMs' | 'time' | 'withYear';
     clock?: '12h' | '24h';
   },
 ) => {