From 5d5d18a7e4e883db9ddd05396b55b9cd7e69fd08 Mon Sep 17 00:00:00 2001
From: "Qingyang(Abby) Hu" <abigailhu2000@gmail.com>
Date: Wed, 19 Jun 2024 17:23:51 -0700
Subject: [PATCH] Highlight the anchor row in surrounding doc view (#7025)

---
 changelogs/fragments/7025.yml                                 | 2 ++
 .../components/default_discover_table/table_row.tsx           | 2 +-
 .../discover/public/application/doc_views/doc_views_types.ts  | 4 +++-
 3 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 changelogs/fragments/7025.yml

diff --git a/changelogs/fragments/7025.yml b/changelogs/fragments/7025.yml
new file mode 100644
index 000000000000..ab61343e7a2b
--- /dev/null
+++ b/changelogs/fragments/7025.yml
@@ -0,0 +1,2 @@
+fix:
+- Highlight the anchor row in surrounding doc view ([#7025](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7025))
\ No newline at end of file
diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_row.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_row.tsx
index 305af69a28ba..455230d33fda 100644
--- a/src/plugins/discover/public/application/components/default_discover_table/table_row.tsx
+++ b/src/plugins/discover/public/application/components/default_discover_table/table_row.tsx
@@ -48,7 +48,7 @@ const TableRowUI = ({
   ]);
 
   const tableRow = (
-    <tr key={row._id}>
+    <tr key={row._id} className={row.isAnchor ? 'osdDocTable__row--highlight' : ''}>
       <td data-test-subj="docTableExpandToggleColumn" className="osdDocTableCell__toggleDetails">
         <EuiButtonIcon
           color="text"
diff --git a/src/plugins/discover/public/application/doc_views/doc_views_types.ts b/src/plugins/discover/public/application/doc_views/doc_views_types.ts
index db9757d385b0..7bc1a9319dee 100644
--- a/src/plugins/discover/public/application/doc_views/doc_views_types.ts
+++ b/src/plugins/discover/public/application/doc_views/doc_views_types.ts
@@ -32,7 +32,9 @@ import { ComponentType } from 'react';
 import { SearchResponse } from 'elasticsearch';
 import { IndexPattern } from '../../../../data/public';
 
-export type OpenSearchSearchHit<T = unknown> = SearchResponse<T>['hits']['hits'][number];
+export type OpenSearchSearchHit<T = unknown> = SearchResponse<T>['hits']['hits'][number] & {
+  isAnchor?: boolean;
+};
 
 export interface FieldMapping {
   filterable?: boolean;