Added Search support in Trace details

Author: Shubhdeep12

.changeset/plenty-lizards-rule.md

@@ -0,0 +1,5 @@
+---
+'@spotlightjs/overlay': minor
+---
+
+Added Search support in Trace details

packages/overlay/src/integrations/sentry/components/explore/traces/TraceDetails/components/TraceTreeview.tsx

@@ -1,18 +1,25 @@
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
+import { SearchProvider, useSearch } from '~/integrations/sentry/context/SearchContext';
+import useSearchInput from '~/integrations/sentry/hooks/useSearchInput';
+import { ReactComponent as CrossIcon } from '../../../../../../../assets/cross.svg';
 import sentryDataCache from '../../../../../data/sentryDataCache';
+import { getFormattedSpanDuration } from '../../../../../utils/duration';
 import DateTime from '../../../../DateTime';
 import SpanDetails from '../../spans/SpanDetails';
 import SpanTree from '../../spans/SpanTree';
-import { getFormattedSpanDuration } from '../../../../../utils/duration';
 
 type TraceTreeViewProps = { traceId: string };
 
 export const DEFAULT_SPAN_NODE_WIDTH = 50;
 
-export default function TraceTreeview({ traceId }: TraceTreeViewProps) {
+function TraceTreeviewContent({ traceId }: TraceTreeViewProps) {
   const { spanId } = useParams();
 
+  const { setQuery } = useSearch();
+
+  const { inputValue, showReset, handleChange, handleReset } = useSearchInput(setQuery, 500);
+
   const [spanNodeWidth, setSpanNodeWidth] = useState<number>(DEFAULT_SPAN_NODE_WIDTH);
 
   const trace = sentryDataCache.getTraceById(traceId)!;
@@ -34,6 +41,24 @@ export default function TraceTreeview({ traceId }: TraceTreeViewProps) {
           </span>
         </div>
       </div>
+      {trace.spans.size > 0 && (
+        <div className="bg-primary-950 text-primary-50 border-primary-600 hover:border-primary-500 relative mx-6 mb-4 mt-2 flex h-auto w-auto gap-2 rounded-md border py-1 pl-4 pr-6 outline-none transition-all">
+          <input
+            className="text-primary-50 h-auto w-full flex-1 bg-transparent outline-none transition-all"
+            onChange={handleChange}
+            value={inputValue}
+            placeholder="Search in Trace"
+          />
+          {showReset ? (
+            <CrossIcon
+              onClick={handleReset}
+              className="fill-primary-50 absolute right-1 top-[5px] cursor-pointer"
+              height={20}
+              width={20}
+            />
+          ) : null}
+        </div>
+      )}
       <div className="flex-1 px-2 pb-6">
         <SpanTree
           traceContext={trace}
@@ -57,3 +82,11 @@ export default function TraceTreeview({ traceId }: TraceTreeViewProps) {
     </>
   );
 }
+
+export default function TraceTreeview(props: TraceTreeViewProps) {
+  return (
+    <SearchProvider>
+      <TraceTreeviewContent {...props} />
+    </SearchProvider>
+  );
+}

packages/overlay/src/integrations/sentry/components/explore/traces/spans/SpanItem.tsx

@@ -1,9 +1,10 @@
-import { useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { ReactComponent as ChevronIcon } from '~/assets/chevronDown.svg';
+import { useSearch } from '~/integrations/sentry/context/SearchContext';
 import classNames from '../../../../../../lib/classNames';
 import type { Span, TraceContext } from '../../../../types';
-import { getSpanDurationClassName, getFormattedDuration } from '../../../../utils/duration';
+import { getFormattedDuration, getSpanDurationClassName } from '../../../../utils/duration';
 import PlatformIcon from '../../../PlatformIcon';
 import SpanResizer from '../../../SpanResizer';
 import SpanTree from './SpanTree';
@@ -17,7 +18,6 @@ const SpanItem = ({
   totalTransactions = 0,
   spanNodeWidth,
   setSpanNodeWidth = () => {},
-  query,
 }: {
   span: Span;
   startTimestamp: number;
@@ -27,9 +27,9 @@ const SpanItem = ({
   totalTransactions?: number;
   spanNodeWidth: number;
   setSpanNodeWidth?: (val: number) => void;
-  query?: string;
 }) => {
   const { spanId } = useParams();
+  const { query } = useSearch();
   const containerRef = useRef<HTMLLIElement>(null);
   const childrenCount = span.children ? span.children.length : 0;
   const [isItemCollapsed, setIsItemCollapsed] = useState(
@@ -47,9 +47,10 @@ const SpanItem = ({
       setSpanNodeWidth(newLeftWidth);
     }
   };
-  const isQueried = query
-    ? span.span_id.includes(query) || span.op?.includes(query) || span.description?.includes(query)
-    : false;
+  const isQueried = useMemo(() => {
+    if (!query) return false;
+    return span.span_id.includes(query) || span.op?.includes(query) || span.description?.includes(query);
+  }, [query, span.span_id, span.op, span.description]);
 
   return (
     <li key={span.span_id} ref={containerRef}>
@@ -134,7 +135,6 @@ const SpanItem = ({
           totalTransactions={totalTransactions}
           spanNodeWidth={spanNodeWidth}
           setSpanNodeWidth={setSpanNodeWidth}
-          query={query}
         />
       )}
     </li>

packages/overlay/src/integrations/sentry/components/explore/traces/spans/SpanTree.tsx

@@ -11,7 +11,6 @@ export default function SpanTree({
   totalTransactions,
   spanNodeWidth,
   setSpanNodeWidth,
-  query,
 }: {
   traceContext: TraceContext;
   tree: Span[];
@@ -21,7 +20,6 @@ export default function SpanTree({
   totalTransactions?: number;
   spanNodeWidth: number;
   setSpanNodeWidth?: (val: number) => void;
-  query?: string;
 }) {
   if (!tree || !tree.length) return null;
   return (
@@ -38,7 +36,6 @@ export default function SpanTree({
             totalDuration={totalDuration}
             spanNodeWidth={spanNodeWidth}
             setSpanNodeWidth={setSpanNodeWidth}
-            query={query}
           />
         );
       })}

packages/overlay/src/integrations/sentry/context/SearchContext.tsx

@@ -0,0 +1,22 @@
+import { createContext, ReactNode, useContext, useState } from 'react';
+
+type SearchContextType = {
+  query: string;
+  setQuery: (query: string) => void;
+};
+
+const SearchContext = createContext<SearchContextType | undefined>(undefined);
+
+export function SearchProvider({ children }: { children: ReactNode }) {
+  const [query, setQuery] = useState('');
+
+  return <SearchContext.Provider value={{ query, setQuery }}>{children}</SearchContext.Provider>;
+}
+
+export function useSearch() {
+  const context = useContext(SearchContext);
+  if (context === undefined) {
+    throw new Error('useSearch must be used within a SearchProvider');
+  }
+  return context;
+}

packages/overlay/src/integrations/sentry/hooks/useDebounce.ts

@@ -8,24 +8,23 @@ import { useLayoutEffect, useMemo, useRef } from 'react';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export default function useDebounce<T extends (...args: any[]) => void>(callback: T, delay: number) {
   const callbackRef = useRef(callback);
+  const timerRef = useRef<number | null>(null);
 
   useLayoutEffect(() => {
     callbackRef.current = callback;
   }, [callback]);
 
-  let timer: number;
-
-  const debounceFunction = (func: T, delayMs: number, ...args: Parameters<T>) => {
-    clearTimeout(timer);
-    timer = window.setTimeout(() => {
-      func(...args);
-    }, delayMs);
-  };
-
   return useMemo(
     () =>
-      (...args: Parameters<T>) =>
-        debounceFunction(callbackRef.current, delay, ...args),
+      (...args: Parameters<T>) => {
+        if (timerRef.current !== null) {
+          clearTimeout(timerRef.current);
+        }
+        timerRef.current = window.setTimeout(() => {
+          callbackRef.current(...args);
+          timerRef.current = null;
+        }, delay);
+      },
     [delay],
   );
 }

packages/overlay/src/integrations/sentry/hooks/useSearchInput.ts

@@ -0,0 +1,32 @@
+import { FormEvent, useEffect, useState } from 'react';
+import useDebounce from './useDebounce';
+
+export default function useSearchInput(onSearch: (value: string) => void, delay = 500) {
+  const [inputValue, setInputValue] = useState('');
+  const [showReset, setShowReset] = useState(false);
+
+  const debouncedSearch = useDebounce(onSearch, delay);
+
+  useEffect(() => {
+    debouncedSearch(inputValue);
+  }, [inputValue, debouncedSearch]);
+
+  const handleChange = (e: FormEvent<HTMLInputElement>) => {
+    const value = e.currentTarget.value;
+    setInputValue(value);
+    setShowReset(!!value);
+  };
+
+  const handleReset = () => {
+    setInputValue('');
+    setShowReset(false);
+    onSearch('');
+  };
+
+  return {
+    inputValue,
+    showReset,
+    handleChange,
+    handleReset,
+  };
+}