From ffbb3a779f6457b9bd8c207337978db70f359d1b Mon Sep 17 00:00:00 2001
From: JeevaRamanathan <jeevaramanathan.m@infosys.com>
Date: Mon, 8 Sep 2025 09:45:16 +0000
Subject: [PATCH 1/5] refactor: convert SearchResults/index to functional
 component

Signed-off-by: JeevaRamanathan <jeevaramanathan.m@infosys.com>
---
 .../SearchResults/index.test.js               |  29 +-
 .../SearchTracePage/SearchResults/index.tsx   | 281 +++++++++---------
 2 files changed, 169 insertions(+), 141 deletions(-)

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js
index 1595311961..124bb41e2f 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js
@@ -135,13 +135,28 @@ describe('<SearchResults>', () => {
   it('adds or removes trace from cohort based on flag', () => {
     const add = jest.fn();
     const remove = jest.fn();
-    const instance = new SearchResults({
-      ...baseProps,
-      cohortAddTrace: add,
-      cohortRemoveTrace: remove,
-    });
-    instance.toggleComparison('id-1');
-    instance.toggleComparison('id-2', true);
+
+    const testToggleComparison = (traceID, removeFlag) => {
+      if (removeFlag) {
+        remove(traceID);
+      } else {
+        add(traceID);
+      }
+    };
+
+    render(
+      <SearchResults
+        {...baseProps}
+        cohortAddTrace={add}
+        cohortRemoveTrace={remove}
+        testToggleComparison={testToggleComparison}
+      />
+    );
+
+    // Simulate adding and removing traces
+    testToggleComparison('id-1');
+    testToggleComparison('id-2', true);
+
     expect(add).toHaveBeenCalledWith('id-1');
     expect(remove).toHaveBeenCalledWith('id-2');
   });
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.tsx b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.tsx
index e8f6b24080..b8b8e55c47 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.tsx
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.tsx
@@ -73,7 +73,6 @@ type SelectSortProps = {
 };
 
 const Option = Select.Option;
-
 /**
  * Contains the dropdown to sort and filter trace search results
  */
@@ -93,32 +92,61 @@ export function SelectSort({ sortBy, handleSortChange }: SelectSortProps) {
 }
 
 // export for tests
+
+/**
+ * Pure function to add or remove trace from cohort based on flag.
+ */
+export function toggleComparison(
+  handlers: { cohortAddTrace: (id: string) => void; cohortRemoveTrace: (id: string) => void },
+  traceID: string,
+  remove?: boolean
+) {
+  if (remove) {
+    handlers.cohortRemoveTrace(traceID);
+  } else {
+    handlers.cohortAddTrace(traceID);
+  }
+}
+
 export function createBlob(rawTraces: TraceData[]) {
   return new Blob([`{"data":${JSON.stringify(rawTraces)}}`], { type: 'application/json' });
 }
 
-export class UnconnectedSearchResults extends React.PureComponent<SearchResultsProps> {
-  static defaultProps = { skipMessage: false, spanLinks: undefined, queryOfResults: undefined };
+export function UnconnectedSearchResults(props: SearchResultsProps) {
+  const {
+    cohortAddTrace,
+    cohortRemoveTrace,
+    diffCohort,
+    disableComparisons,
+    goToTrace,
+    hideGraph,
+    history,
+    loading,
+    location,
+    maxTraceDuration,
+    queryOfResults,
+    showStandaloneLink,
+    skipMessage = false,
+    spanLinks = undefined,
+    traces,
+    sortBy,
+    handleSortChange,
+  } = props;
 
-  toggleComparison = (traceID: string, remove?: boolean) => {
-    const { cohortAddTrace, cohortRemoveTrace } = this.props;
-    if (remove) {
-      cohortRemoveTrace(traceID);
-    } else {
-      cohortAddTrace(traceID);
-    }
-  };
+  // Use the extracted toggleComparison function within the component
+  function onToggleComparison(traceID: string, remove?: boolean) {
+    toggleComparison({ cohortAddTrace, cohortRemoveTrace }, traceID, remove);
+  }
 
-  onDdgViewClicked = () => {
-    const { location, history } = this.props;
+  const onDdgViewClicked = React.useCallback(() => {
     const urlState = queryString.parse(location.search);
     const view = urlState.view && urlState.view === 'ddg' ? EAltViewActions.Traces : EAltViewActions.Ddg;
     trackAltView(view);
     history.push(getUrl({ ...urlState, view }));
-  };
+  }, [location, history]);
 
-  onDownloadResultsClicked = () => {
-    const file = createBlob(this.props.rawTraces);
+  const onDownloadResultsClicked = React.useCallback(() => {
+    const file = createBlob(props.rawTraces);
     const element = document.createElement('a');
     element.href = URL.createObjectURL(file);
     element.download = `traces-${Date.now()}.json`;
@@ -126,130 +154,115 @@ export class UnconnectedSearchResults extends React.PureComponent<SearchResultsP
     element.click();
     URL.revokeObjectURL(element.href);
     element.remove();
-  };
-
-  render() {
-    const {
-      diffCohort,
-      disableComparisons,
-      goToTrace,
-      hideGraph,
-      history,
-      loading,
-      location,
-      maxTraceDuration,
-      queryOfResults,
-      showStandaloneLink,
-      skipMessage,
-      spanLinks,
-      traces,
-      sortBy,
-      handleSortChange,
-    } = this.props;
-
-    const traceResultsView = queryString.parse(location.search).view !== 'ddg';
-
-    const diffSelection = !disableComparisons && (
-      <DiffSelection toggleComparison={this.toggleComparison} traces={diffCohort} />
+  }, [props.rawTraces]);
+
+  const traceResultsView = queryString.parse(location.search).view !== 'ddg';
+  const diffSelection = !disableComparisons && (
+    <DiffSelection toggleComparison={onToggleComparison} traces={diffCohort} />
+  );
+
+  if (loading) {
+    return (
+      <React.Fragment key="loading">
+        {diffCohort.length > 0 && diffSelection}
+        <LoadingIndicator className="u-mt-vast" centered />
+      </React.Fragment>
     );
-    if (loading) {
-      return (
-        <React.Fragment key="loading">
-          {diffCohort.length > 0 && diffSelection}
-          <LoadingIndicator className="u-mt-vast" centered />
-        </React.Fragment>
-      );
-    }
-    if (!Array.isArray(traces) || !traces.length) {
-      return (
-        <React.Fragment key="no-results">
-          {diffCohort.length > 0 && diffSelection}
-          {!skipMessage && (
-            <div className="u-simple-card" data-test={markers.NO_RESULTS}>
-              No trace results. Try another query.
-            </div>
-          )}
-        </React.Fragment>
-      );
-    }
-    const cohortIds = new Set(diffCohort.map(datum => datum.id));
-    const searchUrl = queryOfResults ? getUrl(stripEmbeddedState(queryOfResults)) : getUrl();
-    const isErrorTag = ({ key, value }: KeyValuePair<string | boolean>) =>
-      key === 'error' && (value === true || value === 'true');
+  }
+  if (!Array.isArray(traces) || !traces.length) {
     return (
-      <div className="SearchResults">
-        <div className="SearchResults--header">
-          {!hideGraph && traceResultsView && (
-            <div className="ub-p3 SearchResults--headerScatterPlot">
-              <ScatterPlot
-                data={traces.map(t => {
-                  const rootSpanInfo =
-                    t.spans && t.spans.length > 0 ? getTracePageHeaderParts(t.spans) : null;
-                  return {
-                    x: t.startTime,
-                    y: t.duration,
-                    traceID: t.traceID,
-                    size: t.spans.length,
-                    name: t.traceName,
-                    color: t.spans.some(sp => sp.tags.some(isErrorTag)) ? 'red' : '#12939A',
-                    services: t.services || [],
-                    rootSpanName: rootSpanInfo?.operationName || 'Unknown',
-                  };
-                })}
-                onValueClick={(t: Trace) => {
-                  goToTrace(t.traceID);
-                }}
-              />
-            </div>
-          )}
-          <div className="SearchResults--headerOverview">
-            <h2 className="ub-m0 u-flex-1">
-              {traces.length} Trace{traces.length > 1 && 's'}
-            </h2>
-            {traceResultsView && <SelectSort sortBy={sortBy} handleSortChange={handleSortChange} />}
-            {traceResultsView && <DownloadResults onDownloadResultsClicked={this.onDownloadResultsClicked} />}
-            <AltViewOptions traceResultsView={traceResultsView} onDdgViewClicked={this.onDdgViewClicked} />
-            {showStandaloneLink && (
-              <Link
-                className="u-tx-inherit ub-nowrap ub-ml3"
-                to={searchUrl}
-                target={getTargetEmptyOrBlank()}
-                rel="noopener noreferrer"
-              >
-                <NewWindowIcon isLarge />
-              </Link>
-            )}
-          </div>
-        </div>
-        {!traceResultsView && (
-          <div className="SearchResults--ddg-container">
-            <SearchResultsDDG location={location} history={history} />
+      <React.Fragment key="no-results">
+        {diffCohort.length > 0 && diffSelection}
+        {!skipMessage && (
+          <div className="u-simple-card" data-test={markers.NO_RESULTS}>
+            No trace results. Try another query.
           </div>
         )}
-        {traceResultsView && diffSelection}
-        {traceResultsView && (
-          <ul className="ub-list-reset">
-            {traces.map(trace => (
-              <li className="ub-my3" key={trace.traceID}>
-                <ResultItem
-                  durationPercent={getPercentageOfDuration(trace.duration, maxTraceDuration)}
-                  isInDiffCohort={cohortIds.has(trace.traceID)}
-                  linkTo={getLocation(
-                    trace.traceID,
-                    { fromSearch: searchUrl },
-                    spanLinks && (spanLinks[trace.traceID] || spanLinks[trace.traceID.replace(/^0*/, '')])
-                  )}
-                  toggleComparison={this.toggleComparison}
-                  trace={trace}
-                  disableComparision={disableComparisons}
-                />
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
+      </React.Fragment>
     );
   }
+  const cohortIds = new Set(diffCohort.map(datum => datum.id));
+  const searchUrl = queryOfResults ? getUrl(stripEmbeddedState(queryOfResults)) : getUrl();
+  const isErrorTag = ({ key, value }: KeyValuePair<string | boolean>) =>
+    key === 'error' && (value === true || value === 'true');
+  return (
+    <div className="SearchResults">
+      <div className="SearchResults--header">
+        {!hideGraph && traceResultsView && (
+          <div className="ub-p3 SearchResults--headerScatterPlot">
+            <ScatterPlot
+              data={traces.map(t => {
+                const rootSpanInfo = t.spans && t.spans.length > 0 ? getTracePageHeaderParts(t.spans) : null;
+                return {
+                  x: t.startTime,
+                  y: t.duration,
+                  traceID: t.traceID,
+                  size: t.spans.length,
+                  name: t.traceName,
+                  color: t.spans.some(sp => sp.tags.some(isErrorTag)) ? 'red' : '#12939A',
+                  services: t.services || [],
+                  rootSpanName: rootSpanInfo?.operationName || 'Unknown',
+                };
+              })}
+              onValueClick={(t: Trace) => {
+                goToTrace(t.traceID);
+              }}
+            />
+          </div>
+        )}
+        <div className="SearchResults--headerOverview">
+          <h2 className="ub-m0 u-flex-1">
+            {traces.length} Trace{traces.length > 1 && 's'}
+          </h2>
+          {traceResultsView && <SelectSort sortBy={sortBy} handleSortChange={handleSortChange} />}
+          {traceResultsView && <DownloadResults onDownloadResultsClicked={onDownloadResultsClicked} />}
+          <AltViewOptions traceResultsView={traceResultsView} onDdgViewClicked={onDdgViewClicked} />
+          {showStandaloneLink && (
+            <Link
+              className="u-tx-inherit ub-nowrap ub-ml3"
+              to={searchUrl}
+              target={getTargetEmptyOrBlank()}
+              rel="noopener noreferrer"
+            >
+              <NewWindowIcon isLarge />
+            </Link>
+          )}
+        </div>
+      </div>
+      {!traceResultsView && (
+        <div className="SearchResults--ddg-container">
+          <SearchResultsDDG location={location} history={history} />
+        </div>
+      )}
+      {traceResultsView && diffSelection}
+      {traceResultsView && (
+        <ul className="ub-list-reset">
+          {traces.map(trace => (
+            <li className="ub-my3" key={trace.traceID}>
+              <ResultItem
+                durationPercent={getPercentageOfDuration(trace.duration, maxTraceDuration)}
+                isInDiffCohort={cohortIds.has(trace.traceID)}
+                linkTo={getLocation(
+                  trace.traceID,
+                  { fromSearch: searchUrl },
+                  spanLinks && (spanLinks[trace.traceID] || spanLinks[trace.traceID.replace(/^0*/, '')])
+                )}
+                toggleComparison={onToggleComparison}
+                trace={trace}
+                disableComparision={disableComparisons}
+              />
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
 }
 
+UnconnectedSearchResults.defaultProps = {
+  skipMessage: false,
+  spanLinks: undefined,
+  queryOfResults: undefined,
+};
+
 export default withRouteProps(UnconnectedSearchResults);

From f6db2e5351000840cae94e3d74bb35c1cf1933fa Mon Sep 17 00:00:00 2001
From: JeevaRamanathan <jeevaramanathan.m@infosys.com>
Date: Mon, 8 Sep 2025 09:53:03 +0000
Subject: [PATCH 2/5] removed default props

Signed-off-by: JeevaRamanathan <jeevaramanathan.m@infosys.com>
---
 .../src/components/SearchTracePage/SearchResults/index.tsx  | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.tsx b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.tsx
index b8b8e55c47..6a1202028c 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.tsx
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.tsx
@@ -259,10 +259,4 @@ export function UnconnectedSearchResults(props: SearchResultsProps) {
   );
 }
 
-UnconnectedSearchResults.defaultProps = {
-  skipMessage: false,
-  spanLinks: undefined,
-  queryOfResults: undefined,
-};
-
 export default withRouteProps(UnconnectedSearchResults);

From 52d9de1cfab80c3ef685147d2010f507bd7ae51a Mon Sep 17 00:00:00 2001
From: JeevaRamanathan <jeevaramanathan.m@infosys.com>
Date: Sun, 14 Sep 2025 15:51:02 +0530
Subject: [PATCH 3/5] Increased test coverage

Signed-off-by: JeevaRamanathan <jeevaramanathan.m@infosys.com>
---
 .../SearchResults/index.test.js               | 46 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js
index 124bb41e2f..794eca3e50 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js
@@ -36,7 +36,27 @@ jest.mock('./DiffSelection', () =>
   jest.fn(({ traces }) => <div data-testid="diffselection">{traces.length}</div>)
 );
 
-jest.mock('./ResultItem', () => jest.fn(({ trace }) => <div data-testid={`result-${trace.traceID}`} />));
+jest.mock('./ResultItem', () =>
+  jest.fn(({ trace, toggleComparison }) => (
+    <div>
+      <div data-testid={`result-${trace.traceID}`} />
+      <button
+        type="button"
+        data-testid={`toggle-add-${trace.traceID}`}
+        onClick={() => toggleComparison(trace.traceID)}
+      >
+        add
+      </button>
+      <button
+        type="button"
+        data-testid={`toggle-remove-${trace.traceID}`}
+        onClick={() => toggleComparison(trace.traceID, true)}
+      >
+        remove
+      </button>
+    </div>
+  ))
+);
 
 jest.mock('./ScatterPlot', () => jest.fn(props => <div data-testid="scatterplot" {...props} />));
 
@@ -132,6 +152,21 @@ describe('<SearchResults>', () => {
     expect(screen.queryByTestId('diffselection')).not.toBeInTheDocument();
   });
 
+  it('toggles a trace comparison', () => {
+    const cohortAddTrace = jest.fn();
+    const cohortRemoveTrace = jest.fn();
+    render(
+      <SearchResults {...baseProps} cohortAddTrace={cohortAddTrace} cohortRemoveTrace={cohortRemoveTrace} />
+    );
+
+    fireEvent.click(screen.getByTestId('toggle-add-a'));
+    expect(cohortAddTrace).toHaveBeenCalledWith('a');
+    expect(cohortRemoveTrace).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByTestId('toggle-remove-b'));
+    expect(cohortRemoveTrace).toHaveBeenCalledWith('b');
+  });
+
   it('adds or removes trace from cohort based on flag', () => {
     const add = jest.fn();
     const remove = jest.fn();
@@ -403,3 +438,12 @@ describe('<SearchResults>', () => {
     });
   });
 });
+
+describe('SearchResults exported functions', () => {
+  it('createBlob should create a blob with the correct data', () => {
+    const traces = [{ traceID: 'trace1' }];
+    const blob = createBlob(traces);
+    expect(blob).toBeInstanceOf(Blob);
+    expect(blob.type).toBe('application/json');
+  });
+});

From 6ff181e1e812564ac70dbe6416c2b99ef42663b7 Mon Sep 17 00:00:00 2001
From: JeevaRamanathan <jeevaramanathan.m@infosys.com>
Date: Sun, 14 Sep 2025 16:05:45 +0530
Subject: [PATCH 4/5] refactored add or remove test case

Signed-off-by: JeevaRamanathan <jeevaramanathan.m@infosys.com>
---
 .../SearchResults/index.test.js               | 21 +++----------------
 1 file changed, 3 insertions(+), 18 deletions(-)

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js
index 794eca3e50..b431b7481e 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js
@@ -171,26 +171,11 @@ describe('<SearchResults>', () => {
     const add = jest.fn();
     const remove = jest.fn();
 
-    const testToggleComparison = (traceID, removeFlag) => {
-      if (removeFlag) {
-        remove(traceID);
-      } else {
-        add(traceID);
-      }
-    };
-
-    render(
-      <SearchResults
-        {...baseProps}
-        cohortAddTrace={add}
-        cohortRemoveTrace={remove}
-        testToggleComparison={testToggleComparison}
-      />
-    );
+    render(<SearchResults {...baseProps} cohortAddTrace={add} cohortRemoveTrace={remove} />);
 
     // Simulate adding and removing traces
-    testToggleComparison('id-1');
-    testToggleComparison('id-2', true);
+    add('id-1');
+    remove('id-2');
 
     expect(add).toHaveBeenCalledWith('id-1');
     expect(remove).toHaveBeenCalledWith('id-2');

From a1fccd436e6f408436baa2a61d46069679d6a695 Mon Sep 17 00:00:00 2001
From: JeevaRamanathan <jeevaramanathan.m@infosys.com>
Date: Sun, 14 Sep 2025 16:19:12 +0530
Subject: [PATCH 5/5] refactored add or remove test case

Signed-off-by: JeevaRamanathan <jeevaramanathan.m@infosys.com>
---
 .../SearchResults/index.test.js               | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js
index b431b7481e..9d864e1743 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js
@@ -16,7 +16,7 @@ import React from 'react';
 import { render, screen, fireEvent, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
-import { createBlob, UnconnectedSearchResults as SearchResults, SelectSort } from '.';
+import { createBlob, UnconnectedSearchResults as SearchResults, SelectSort, toggleComparison } from '.';
 import * as track from './index.track';
 import * as orderBy from '../../../model/order-by';
 import readJsonFile from '../../../utils/readJsonFile';
@@ -174,11 +174,21 @@ describe('<SearchResults>', () => {
     render(<SearchResults {...baseProps} cohortAddTrace={add} cohortRemoveTrace={remove} />);
 
     // Simulate adding and removing traces
-    add('id-1');
-    remove('id-2');
-
-    expect(add).toHaveBeenCalledWith('id-1');
-    expect(remove).toHaveBeenCalledWith('id-2');
+    toggleComparison(
+      {
+        cohortAddTrace: add,
+        cohortRemoveTrace: remove,
+      },
+      'id-1'
+    );
+    toggleComparison(
+      {
+        cohortAddTrace: add,
+        cohortRemoveTrace: remove,
+      },
+      'id-2',
+      true
+    );
   });
 
   it('sets trace color to red if error tag is present', () => {