[7.9] [TSVB] Show tooltip on external pointer events (#77306) (#80016)

* [TSVB] Show tooltip on external pointer events (#77306)

* Show external pointer events in TSVB

* Disable tooltip visibility

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

* update elastic/charts to v19.8.3

Co-authored-by: Daniil Suleiman <31325372+sulemanof@users.noreply.github.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

package.json

@@ -125,7 +125,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.10.1",
     "@babel/register": "^7.10.1",
     "@elastic/apm-rum": "^5.2.0",
-    "@elastic/charts": "19.8.2",
+    "@elastic/charts": "19.8.3",
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "7.8.0",
     "@elastic/ems-client": "7.9.3",

packages/kbn-ui-shared-deps/package.json

@@ -9,7 +9,7 @@
     "kbn:watch": "node scripts/build --dev --watch"
   },
   "dependencies": {
-    "@elastic/charts": "19.8.2",
+    "@elastic/charts": "19.8.3",
     "@elastic/eui": "26.3.3",
     "@elastic/numeral": "^2.5.0",
     "@kbn/i18n": "1.0.0",

src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js

@@ -70,19 +70,20 @@ export const TimeSeries = ({
   enableHistogramMode,
 }) => {
   const chartRef = useRef();
-  const updateCursor = (_, cursor) => {
-    if (chartRef.current) {
-      chartRef.current.dispatchExternalPointerEvent(cursor);
-    }
-  };
 
   useEffect(() => {
+    const updateCursor = (_, cursor) => {
+      if (chartRef.current) {
+        chartRef.current.dispatchExternalPointerEvent(cursor);
+      }
+    };
+
     eventBus.on(ACTIVE_CURSOR, updateCursor);
 
     return () => {
       eventBus.off(ACTIVE_CURSOR, undefined, updateCursor);
     };
-  }, []); // eslint-disable-line
+  }, []);
 
   const tooltipFormatter = decorateFormatter(xAxisFormatter);
   const uiSettings = getUISettings();
@@ -139,6 +140,7 @@ export const TimeSeries = ({
           type: tooltipMode === 'show_focused' ? TooltipType.Follow : TooltipType.VerticalCursor,
           headerFormatter: tooltipFormatter,
         }}
+        externalPointerEvents={{ tooltip: { visible: false } }}
       />
 
       {annotations.map(({ id, data, icon, color }) => {

yarn.lock

@@ -2226,10 +2226,10 @@
   dependencies:
     "@elastic/apm-rum-core" "^5.3.0"
 
-"@elastic/charts@19.8.2":
-  version "19.8.2"
-  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-19.8.2.tgz#5370f9fa2378975871af2af7752f0dac99a4f8e6"
-  integrity sha512-gHNGPfyi3IYv0gNnL9tiwc/K7V+v8D5wA/JxUCzA9TLKPWCO8l/ZDDb+xF3IqfggQs1mn8HBlDyRwLvotPhbkQ==
+"@elastic/charts@19.8.3":
+  version "19.8.3"
+  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-19.8.3.tgz#debe673386679d24f9ddb19708d2d7eae3f8abe0"
+  integrity sha512-9aSgffaNRYEvDLKMEp9gMSW5BqSLDBhaSI1h+78zvmQgJ168+4navcyMstIr5I8qXe7E4/N58Aj1oDTwfh46Tw==
   dependencies:
     "@popperjs/core" "^2.4.0"
     chroma-js "^2.1.0"