mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
# Backport This will backport the following commits from `main` to `8.16`: - [Update @elastic/ml-ui dependencies (main) (#204210)](https://github.com/elastic/kibana/pull/204210) Co-authored-by: elastic-renovate-prod[bot] <174716857+elastic-renovate-prod[bot]@users.noreply.github.com>
This commit is contained in:
Walter Rafelsberger
GitHub
parent
c445484f41
commit
30f212a3e4
3 changed files with 55 additions and 75 deletions
|
|
@ -1065,7 +1065,7 @@
|
|||
"ansi-regex": "^6.0.1",
|
||||
"antlr4": "^4.13.1-patch-1",
|
||||
"archiver": "^5.3.1",
|
||||
"async": "^3.2.3",
|
||||
"async": "^3.2.6",
|
||||
"aws4": "^1.13.2",
|
||||
"axios": "^1.7.9",
|
||||
"base64-js": "^1.3.1",
|
||||
|
|
@ -1219,7 +1219,7 @@
|
|||
"react-is": "^17.0.2",
|
||||
"react-markdown": "^6.0.3",
|
||||
"react-monaco-editor": "^0.54.0",
|
||||
"react-popper-tooltip": "^3.1.1",
|
||||
"react-popper-tooltip": "^4.4.2",
|
||||
"react-recompose": "^0.33.0",
|
||||
"react-redux": "^7.2.8",
|
||||
"react-resizable": "^3.0.4",
|
||||
|
|
@ -1528,7 +1528,7 @@
|
|||
"@testing-library/user-event": "^14.5.2",
|
||||
"@types/adm-zip": "^0.5.0",
|
||||
"@types/archiver": "^5.3.1",
|
||||
"@types/async": "^3.2.3",
|
||||
"@types/async": "^3.2.24",
|
||||
"@types/aws4": "^1.5.0",
|
||||
"@types/babel__core": "^7.20.5",
|
||||
"@types/babel__generator": "^7.6.4",
|
||||
|
|
@ -1571,7 +1571,7 @@
|
|||
"@types/gulp": "^4.0.6",
|
||||
"@types/hapi__cookie": "^12.0.5",
|
||||
"@types/has-ansi": "^3.0.0",
|
||||
"@types/he": "^1.1.1",
|
||||
"@types/he": "^1.2.3",
|
||||
"@types/history": "^4.7.9",
|
||||
"@types/hjson": "^2.4.2",
|
||||
"@types/http-proxy": "^1.17.4",
|
||||
|
|
|
|||
|
|
@ -6,15 +6,15 @@
|
|||
*/
|
||||
|
||||
import type { FC } from 'react';
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import TooltipTrigger from 'react-popper-tooltip';
|
||||
import { usePopperTooltip } from 'react-popper-tooltip';
|
||||
|
||||
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
||||
import type { TooltipValueFormatter } from '@elastic/charts';
|
||||
|
||||
import './_index.scss';
|
||||
|
||||
import type { ChildrenArg, TooltipTriggerProps } from 'react-popper-tooltip/dist/types';
|
||||
import type { ChartTooltipValue, TooltipData } from './chart_tooltip_service';
|
||||
import { ChartTooltipService } from './chart_tooltip_service';
|
||||
|
||||
|
|
@ -79,13 +79,30 @@ export const FormattedTooltip: FC<{ tooltipData: TooltipData }> = ({ tooltipData
|
|||
*/
|
||||
const Tooltip: FC<{ service: ChartTooltipService }> = React.memo(({ service }) => {
|
||||
const [tooltipData, setData] = useState<TooltipData>([]);
|
||||
const refCallback = useRef<ChildrenArg['triggerRef']>();
|
||||
|
||||
const { getTooltipProps, setTooltipRef, setTriggerRef } = usePopperTooltip(
|
||||
{
|
||||
placement: 'top-start',
|
||||
trigger: null,
|
||||
delayHide: 1000,
|
||||
},
|
||||
{
|
||||
modifiers: [
|
||||
{
|
||||
name: 'preventOverflow',
|
||||
options: {
|
||||
rootBoundary: 'viewport',
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const subscription = service.tooltipState$.subscribe((tooltipState) => {
|
||||
if (refCallback.current && typeof refCallback.current === 'function') {
|
||||
if (setTriggerRef && typeof setTriggerRef === 'function') {
|
||||
// update trigger
|
||||
refCallback.current(tooltipState.target);
|
||||
setTriggerRef(tooltipState.target);
|
||||
}
|
||||
setData(tooltipState.tooltipData);
|
||||
});
|
||||
|
|
@ -95,53 +112,16 @@ const Tooltip: FC<{ service: ChartTooltipService }> = React.memo(({ service }) =
|
|||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
const triggerCallback = useCallback(
|
||||
(({ triggerRef }) => {
|
||||
// obtain the reference to the trigger setter callback
|
||||
// to update the target based on changes from the service.
|
||||
refCallback.current = triggerRef;
|
||||
// actual trigger is resolved by the service, hence don't render
|
||||
return null;
|
||||
}) as TooltipTriggerProps['children'],
|
||||
[]
|
||||
);
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
const tooltipCallback = useCallback(
|
||||
(({ tooltipRef, getTooltipProps }) => {
|
||||
return (
|
||||
<div
|
||||
{...getTooltipProps({
|
||||
ref: tooltipRef,
|
||||
})}
|
||||
>
|
||||
<FormattedTooltip tooltipData={tooltipData} />
|
||||
</div>
|
||||
);
|
||||
}) as TooltipTriggerProps['tooltip'],
|
||||
[tooltipData]
|
||||
);
|
||||
|
||||
const isTooltipShown = tooltipData.length > 0;
|
||||
|
||||
return (
|
||||
<TooltipTrigger
|
||||
modifiers={[
|
||||
{
|
||||
name: 'preventOverflow',
|
||||
options: {
|
||||
rootBoundary: 'viewport',
|
||||
},
|
||||
},
|
||||
]}
|
||||
placement="top-start"
|
||||
trigger="none"
|
||||
tooltipShown={isTooltipShown}
|
||||
tooltip={tooltipCallback}
|
||||
>
|
||||
{triggerCallback}
|
||||
</TooltipTrigger>
|
||||
<>
|
||||
{isTooltipShown && (
|
||||
<div ref={setTooltipRef} {...getTooltipProps({ className: 'tooltip-container' })}>
|
||||
<FormattedTooltip tooltipData={tooltipData} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
|||
42
yarn.lock
42
yarn.lock
|
|
@ -8409,7 +8409,7 @@
|
|||
resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
|
||||
integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
|
||||
|
||||
"@popperjs/core@^2.11.8", "@popperjs/core@^2.5.4":
|
||||
"@popperjs/core@^2.11.5", "@popperjs/core@^2.11.8":
|
||||
version "2.11.8"
|
||||
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
|
||||
integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
|
||||
|
|
@ -10175,10 +10175,10 @@
|
|||
resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.0.tgz#14264692a9d6e2fa4db3df5e56e94b5e25647ac0"
|
||||
integrity sha512-iIgQNzCm0v7QMhhe4Jjn9uRh+I6GoPmt03CbEtwx3ao8/EfoQcmgtqH4vQ5Db/lxiIGaWDv6nwvunuh0RyX0+A==
|
||||
|
||||
"@types/async@^3.2.3":
|
||||
version "3.2.15"
|
||||
resolved "https://registry.yarnpkg.com/@types/async/-/async-3.2.15.tgz#26d4768fdda0e466f18d6c9918ca28cc89a4e1fe"
|
||||
integrity sha512-PAmPfzvFA31mRoqZyTVsgJMsvbynR429UTTxhmfsUCrWGh3/fxOrzqBtaTPJsn4UtzTv4Vb0+/O7CARWb69N4g==
|
||||
"@types/async@^3.2.24":
|
||||
version "3.2.24"
|
||||
resolved "https://registry.yarnpkg.com/@types/async/-/async-3.2.24.tgz#3a96351047575bbcf2340541b2d955a35339608f"
|
||||
integrity sha512-8iHVLHsCCOBKjCF2KwFe0p9Z3rfM9mL+sSP8btyR5vTjJRAqpBYD28/ZLgXPf0pjG1VxOvtCV/BgXkQbpSe8Hw==
|
||||
|
||||
"@types/aws4@^1.5.0":
|
||||
version "1.11.3"
|
||||
|
|
@ -10693,10 +10693,10 @@
|
|||
dependencies:
|
||||
"@types/unist" "*"
|
||||
|
||||
"@types/he@^1.1.1":
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/he/-/he-1.1.1.tgz#19e14033c4ee8f1a702c74dcc6182664839ac2b7"
|
||||
integrity sha512-jpzrsR1ns0n3kyWt92QfOUQhIuJGQ9+QGa7M62rO6toe98woQjnsnzjdMtsQXCdvjjmqjS2ZBCC7xKw0cdzU+Q==
|
||||
"@types/he@^1.2.3":
|
||||
version "1.2.3"
|
||||
resolved "https://registry.yarnpkg.com/@types/he/-/he-1.2.3.tgz#c33ca3096f30cbd5d68d78211572de3f9adff75a"
|
||||
integrity sha512-q67/qwlxblDzEDvzHhVkwc1gzVWxaNxeyHUBF4xElrvjL11O+Ytze+1fGpBHlr/H9myiBUaUXNnNPmBHxxfAcA==
|
||||
|
||||
"@types/history@^4.7.11", "@types/history@^4.7.9":
|
||||
version "4.7.11"
|
||||
|
|
@ -12993,7 +12993,7 @@ async@^1.4.2:
|
|||
resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
|
||||
integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
|
||||
|
||||
async@^3.2.0, async@^3.2.3, async@^3.2.4:
|
||||
async@^3.2.0, async@^3.2.3, async@^3.2.4, async@^3.2.6:
|
||||
version "3.2.6"
|
||||
resolved "https://registry.yarnpkg.com/async/-/async-3.2.6.tgz#1b0728e14929d51b85b449b7f06e27c1145e38ce"
|
||||
integrity sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==
|
||||
|
|
@ -26606,19 +26606,19 @@ react-monaco-editor@^0.54.0:
|
|||
dependencies:
|
||||
prop-types "^15.8.1"
|
||||
|
||||
react-popper-tooltip@^3.1.1:
|
||||
version "3.1.1"
|
||||
resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz#329569eb7b287008f04fcbddb6370452ad3f9eac"
|
||||
integrity sha512-EnERAnnKRptQBJyaee5GJScWNUKQPDD2ywvzZyUjst/wj5U64C8/CnSYLNEmP2hG0IJ3ZhtDxE8oDN+KOyavXQ==
|
||||
react-popper-tooltip@^4.4.2:
|
||||
version "4.4.2"
|
||||
resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-4.4.2.tgz#0dc4894b8e00ba731f89bd2d30584f6032ec6163"
|
||||
integrity sha512-y48r0mpzysRTZAIh8m2kpZ8S1YPNqGtQPDrlXYSGvDS1c1GpG/NUXbsbIdfbhXfmSaRJuTcaT6N1q3CKuHRVbg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.12.5"
|
||||
"@popperjs/core" "^2.5.4"
|
||||
react-popper "^2.2.4"
|
||||
"@babel/runtime" "^7.18.3"
|
||||
"@popperjs/core" "^2.11.5"
|
||||
react-popper "^2.3.0"
|
||||
|
||||
react-popper@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.4.tgz#d2ad3d2474ac9f1abf93df3099d408e5aa6a2e22"
|
||||
integrity sha512-NacOu4zWupdQjVXq02XpTD3yFPSfg5a7fex0wa3uGKVkFK7UN6LvVxgcb+xYr56UCuWiNPMH20tntdVdJRwYew==
|
||||
react-popper@^2.3.0:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
|
||||
integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==
|
||||
dependencies:
|
||||
react-fast-compare "^3.0.1"
|
||||
warning "^4.0.2"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue