[ML] Embeddable Anomaly Swimlane

x-pack/plugins/ml/kibana.json

@@ -13,7 +13,9 @@
     "home",
     "licensing",
     "usageCollection",
-    "share"
+    "share",
+    "embeddable",
+    "uiActions"
   ],
   "optionalPlugins": [
     "security",

x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx

@@ -4,56 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
-import React, { useRef, FC } from 'react';
+import TooltipTrigger from 'react-popper-tooltip';
 import { TooltipValueFormatter } from '@elastic/charts';
-import useObservable from 'react-use/lib/useObservable';
 
-import { chartTooltip$, ChartTooltipState, ChartTooltipValue } from './chart_tooltip_service';
+import './_index.scss';
 
-type RefValue = HTMLElement | null;
-
-function useRefWithCallback(chartTooltipState?: ChartTooltipState) {
-  const ref = useRef<RefValue>(null);
-
-  return (node: RefValue) => {
-    ref.current = node;
-
-    if (
-      node !== null &&
-      node.parentElement !== null &&
-      chartTooltipState !== undefined &&
-      chartTooltipState.isTooltipVisible
-    ) {
-      const parentBounding = node.parentElement.getBoundingClientRect();
-
-      const { targetPosition, offset } = chartTooltipState;
-
-      const contentWidth = document.body.clientWidth - parentBounding.left;
-      const tooltipWidth = node.clientWidth;
-
-      let left = targetPosition.left + offset.x - parentBounding.left;
-      if (left + tooltipWidth > contentWidth) {
-        // the tooltip is hanging off the side of the page,
-        // so move it to the other side of the target
-        left = left - (tooltipWidth + offset.x);
-      }
-
-      const top = targetPosition.top + offset.y - parentBounding.top;
-
-      if (
-        chartTooltipState.tooltipPosition.left !== left ||
-        chartTooltipState.tooltipPosition.top !== top
-      ) {
-        // render the tooltip with adjusted position.
-        chartTooltip$.next({
-          ...chartTooltipState,
-          tooltipPosition: { left, top },
-        });
-      }
-    }
-  };
-}
+import { ChildrenArg, TooltipTriggerProps } from 'react-popper-tooltip/dist/types';
+import { ChartTooltipService, ChartTooltipValue, TooltipData } from './chart_tooltip_service';
 
 const renderHeader = (headerData?: ChartTooltipValue, formatter?: TooltipValueFormatter) => {
   if (!headerData) {
@@ -63,48 +22,101 @@ const renderHeader = (headerData?: ChartTooltipValue, formatter?: TooltipValueFo
   return formatter ? formatter(headerData) : headerData.label;
 };
 
-export const ChartTooltip: FC = () => {
-  const chartTooltipState = useObservable(chartTooltip$);
-  const chartTooltipElement = useRefWithCallback(chartTooltipState);
+const Tooltip: FC<{ service: ChartTooltipService }> = React.memo(({ service }) => {
+  const [tooltipData, setData] = useState<TooltipData>([]);
+  const refCallback = useRef<ChildrenArg['triggerRef']>();
 
-  if (chartTooltipState === undefined || !chartTooltipState.isTooltipVisible) {
-    return <div className="mlChartTooltip mlChartTooltip--hidden" ref={chartTooltipElement} />;
-  }
+  useEffect(() => {
+    const subscription = service.tooltipState$.subscribe(tooltipState => {
+      if (refCallback.current) {
+        // update trigger
+        refCallback.current(tooltipState.target);
+      }
+      setData(tooltipState.tooltipData);
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, []);
+
+  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'],
+    []
+  );
+
+  const tooltipCallback = useCallback(
+    (({ tooltipRef, getTooltipProps }) => {
+      return (
+        <div
+          {...getTooltipProps({
+            ref: tooltipRef,
+            className: 'mlChartTooltip',
+          })}
+        >
+          {tooltipData.length > 0 && tooltipData[0].skipHeader === undefined && (
+            <div className="mlChartTooltip__header">{renderHeader(tooltipData[0])}</div>
+          )}
+          {tooltipData.length > 1 && (
+            <div className="mlChartTooltip__list">
+              {tooltipData
+                .slice(1)
+                .map(({ label, value, color, isHighlighted, seriesIdentifier, valueAccessor }) => {
+                  const classes = classNames('mlChartTooltip__item', {
+                    /* eslint @typescript-eslint/camelcase:0 */
+                    echTooltip__rowHighlighted: isHighlighted,
+                  });
+                  return (
+                    <div
+                      key={`${seriesIdentifier.key}__${valueAccessor}`}
+                      className={classes}
+                      style={{
+                        borderLeftColor: color,
+                      }}
+                    >
+                      <span className="mlChartTooltip__label">{label}</span>
+                      <span className="mlChartTooltip__value">{value}</span>
+                    </div>
+                  );
+                })}
+            </div>
+          )}
+        </div>
+      );
+    }) as TooltipTriggerProps['tooltip'],
+    [tooltipData]
+  );
 
-  const { tooltipData, tooltipHeaderFormatter, tooltipPosition } = chartTooltipState;
-  const transform = `translate(${tooltipPosition.left}px, ${tooltipPosition.top}px)`;
+  const isTooltipShown = tooltipData.length > 0;
 
   return (
-    <div className="mlChartTooltip" style={{ transform }} ref={chartTooltipElement}>
-      {tooltipData.length > 0 && tooltipData[0].skipHeader === undefined && (
-        <div className="mlChartTooltip__header">
-          {renderHeader(tooltipData[0], tooltipHeaderFormatter)}
-        </div>
-      )}
-      {tooltipData.length > 1 && (
-        <div className="mlChartTooltip__list">
-          {tooltipData
-            .slice(1)
-            .map(({ label, value, color, isHighlighted, seriesIdentifier, valueAccessor }) => {
-              const classes = classNames('mlChartTooltip__item', {
-                /* eslint @typescript-eslint/camelcase:0 */
-                echTooltip__rowHighlighted: isHighlighted,
-              });
-              return (
-                <div
-                  key={`${seriesIdentifier.key}__${valueAccessor}`}
-                  className={classes}
-                  style={{
-                    borderLeftColor: color,
-                  }}
-                >
-                  <span className="mlChartTooltip__label">{label}</span>
-                  <span className="mlChartTooltip__value">{value}</span>
-                </div>
-              );
-            })}
-        </div>
-      )}
-    </div>
+    <TooltipTrigger
+      placement="right-start"
+      trigger="none"
+      tooltipShown={isTooltipShown}
+      tooltip={tooltipCallback}
+    >
+      {triggerCallback}
+    </TooltipTrigger>
+  );
+});
+
+interface MlTooltipComponentProps {
+  children: (tooltipService: ChartTooltipService) => React.ReactElement;
+}
+
+export const MlTooltipComponent: FC<MlTooltipComponentProps> = ({ children }) => {
+  const service = useMemo(() => new ChartTooltipService(), []);
+
+  return (
+    <>
+      <Tooltip service={service} />
+      {children(service)}
+    </>
   );
 };

x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip_service.test.ts

@@ -4,18 +4,61 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { getChartTooltipDefaultState, mlChartTooltipService } from './chart_tooltip_service';
+import {
+  ChartTooltipService,
+  getChartTooltipDefaultState,
+  TooltipData,
+} from './chart_tooltip_service';
 
-describe('ML - mlChartTooltipService', () => {
-  it('service API duck typing', () => {
-    expect(typeof mlChartTooltipService).toBe('object');
-    expect(typeof mlChartTooltipService.show).toBe('function');
-    expect(typeof mlChartTooltipService.hide).toBe('function');
+describe('ChartTooltipService', () => {
+  let service: ChartTooltipService;
+
+  beforeEach(() => {
+    service = new ChartTooltipService();
+  });
+
+  test('should update the tooltip state on show and hide', () => {
+    const spy = jest.fn();
+
+    service.tooltipState$.subscribe(spy);
+
+    expect(spy).toHaveBeenCalledWith(getChartTooltipDefaultState());
+
+    const update = [
+      {
+        label: 'new tooltip',
+      },
+    ] as TooltipData;
+    const mockEl = document.createElement('div');
+
+    service.show(update, mockEl);
+
+    expect(spy).toHaveBeenCalledWith({
+      isTooltipVisible: true,
+      tooltipData: update,
+      offset: { x: 0, y: 0 },
+      target: mockEl,
+    });
+
+    service.hide();
+
+    expect(spy).toHaveBeenCalledWith({
+      isTooltipVisible: false,
+      tooltipData: ([] as unknown) as TooltipData,
+      offset: { x: 0, y: 0 },
+      target: null,
+    });
   });
 
-  it('should fail silently when target is not defined', () => {
-    expect(() => {
-      mlChartTooltipService.show(getChartTooltipDefaultState().tooltipData, null);
-    }).not.toThrow('Call to show() should fail silently.');
+  test('update the tooltip state only on a new value', () => {
+    const spy = jest.fn();
+
+    service.tooltipState$.subscribe(spy);
+
+    expect(spy).toHaveBeenCalledWith(getChartTooltipDefaultState());
+
+    service.hide();
+
+    expect(spy).toHaveBeenCalledTimes(1);
   });
 });