[8.8] [SecuritySolution] Unsync highlight state between visualizations (

#156453) (#156719)

# Backport

This will backport the following commits from `main` to `8.8`:
- [[SecuritySolution] Unsync highlight state between visualizations
(#156453)](#156453)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Angela
Chuang","email":"6295984+angorayc@users.noreply.github.com"},"sourceCommit":{"committedDate":"2023-05-04T17:30:14Z","message":"[SecuritySolution]
Unsync highlight state between visualizations (#156453)\n\n##
Summary\r\n\r\nissue:
https://github.com/elastic/kibana/issues/156325\r\n\r\nBefore\r\n\r\n\r\n![alerts](https://user-images.githubusercontent.com/4459398/235551083-f101aba4-7a32-41e8-95a0-4cf50dd09005.gif)\r\n\r\n\r\nAfter\r\n\r\n\r\nhttps://user-images.githubusercontent.com/6295984/235792908-c7832d7f-7424-4d11-b4f7-52acaa0fa7aa.mov\r\n\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"0e9d84d191a660bae8014d9e543fd4b06d71614c","branchLabelMapping":{"^v8.9.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","Team:Threat
Hunting","Team: SecuritySolution","Team:Threat
Hunting:Explore","v8.8.0","Feature:Lens
Charts","v8.9.0"],"number":156453,"url":"https://github.com/elastic/kibana/pull/156453","mergeCommit":{"message":"[SecuritySolution]
Unsync highlight state between visualizations (#156453)\n\n##
Summary\r\n\r\nissue:
https://github.com/elastic/kibana/issues/156325\r\n\r\nBefore\r\n\r\n\r\n![alerts](https://user-images.githubusercontent.com/4459398/235551083-f101aba4-7a32-41e8-95a0-4cf50dd09005.gif)\r\n\r\n\r\nAfter\r\n\r\n\r\nhttps://user-images.githubusercontent.com/6295984/235792908-c7832d7f-7424-4d11-b4f7-52acaa0fa7aa.mov\r\n\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"0e9d84d191a660bae8014d9e543fd4b06d71614c"}},"sourceBranch":"main","suggestedTargetBranches":["8.8"],"targetPullRequestStates":[{"branch":"8.8","label":"v8.8.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.9.0","labelRegex":"^v8.9.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/156453","number":156453,"mergeCommit":{"message":"[SecuritySolution]
Unsync highlight state between visualizations (#156453)\n\n##
Summary\r\n\r\nissue:
https://github.com/elastic/kibana/issues/156325\r\n\r\nBefore\r\n\r\n\r\n![alerts](https://user-images.githubusercontent.com/4459398/235551083-f101aba4-7a32-41e8-95a0-4cf50dd09005.gif)\r\n\r\n\r\nAfter\r\n\r\n\r\nhttps://user-images.githubusercontent.com/6295984/235792908-c7832d7f-7424-4d11-b4f7-52acaa0fa7aa.mov\r\n\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"0e9d84d191a660bae8014d9e543fd4b06d71614c"}}]}]
BACKPORT-->

Co-authored-by: Angela Chuang <6295984+angorayc@users.noreply.github.com>

x-pack/plugins/cases/public/components/markdown_editor/plugins/lens/processor.tsx

@@ -53,6 +53,8 @@ const LensMarkDownRendererComponent: React.FC<LensMarkDownRendererProps> = ({
         executionContext={{
           type: 'cases',
         }}
+        syncTooltips={false}
+        syncCursor={false}
       />
       <LensChartTooltipFix />
     </Container>

x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/event.test.ts

@@ -480,4 +480,19 @@ describe('getEventsHistogramLensAttributes', () => {
       })
     );
   });
+
+  it('should render values in legend', () => {
+    const { result } = renderHook(
+      () =>
+        useLensAttributes({
+          getLensAttributes: getEventsHistogramLensAttributes,
+          stackByField: 'event.dataset',
+        }),
+      { wrapper }
+    );
+
+    expect(result?.current?.state?.visualization).toEqual(
+      expect.objectContaining({ valuesInLegend: true })
+    );
+  });
 });

x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/events.ts

@@ -49,6 +49,7 @@ export const getEventsHistogramLensAttributes: GetLensAttributes = (
           yLeft: false,
           yRight: true,
         },
+        valuesInLegend: true,
       },
       query: {
         query: '',

x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.test.ts

@@ -43,4 +43,19 @@ describe('getExternalAlertLensAttributes', () => {
 
     expect(result?.current).toMatchSnapshot();
   });
+
+  it('should render values in legend', () => {
+    const { result } = renderHook(
+      () =>
+        useLensAttributes({
+          getLensAttributes: getExternalAlertLensAttributes,
+          stackByField: 'event.dataset',
+        }),
+      { wrapper }
+    );
+
+    expect(result?.current?.state?.visualization).toEqual(
+      expect.objectContaining({ valuesInLegend: true })
+    );
+  });
 });

x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.ts

@@ -42,6 +42,12 @@ export const getExternalAlertLensAttributes: GetLensAttributes = (
         yLeftExtent: {
           mode: 'full',
         },
+        axisTitlesVisibilitySettings: {
+          x: false,
+          yLeft: false,
+          yRight: true,
+        },
+        valuesInLegend: true,
       },
       query: {
         query: '',

x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.test.ts

@@ -157,4 +157,10 @@ describe('getDnsTopDomainsLensAttributes', () => {
       }
     `);
   });
+
+  it('should render values in legend', () => {
+    expect(result?.current?.state?.visualization).toEqual(
+      expect.objectContaining({ valuesInLegend: true })
+    );
+  });
 });

x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.ts

@@ -36,6 +36,7 @@ export const getDnsTopDomainsLensAttributes: GetLensAttributes = (
           yLeft: false,
           yRight: false,
         },
+        valuesInLegend: true,
         tickLabelsVisibilitySettings: {
           x: true,
           yLeft: true,

x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.test.tsx

@@ -123,4 +123,9 @@ describe('LensEmbeddable', () => {
   it('should render with searchSessionId', () => {
     expect(mockEmbeddableComponent.mock.calls[0][0].searchSessionId).toEqual(mockSearchSessionId);
   });
+
+  it('should not sync highlight state between visualizations', () => {
+    expect(mockEmbeddableComponent.mock.calls[0][0].syncTooltips).toEqual(false);
+    expect(mockEmbeddableComponent.mock.calls[0][0].syncCursor).toEqual(false);
+  });
 });

x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx

@@ -271,6 +271,8 @@ const LensEmbeddableComponent: React.FC<LensEmbeddableComponentProps> = ({
             extraActions={actions}
             searchSessionId={searchSessionId}
             showInspector={false}
+            syncTooltips={false}
+            syncCursor={false}
           />
         </LensComponentWrapper>
       )}