[Endpoint] Adding a Resolver component that lets the user click and drag to pan and pinch to zoom

x-pack/plugins/endpoint/package.json

@@ -0,0 +1,14 @@
+{
+  "author": "Elastic",
+  "name": "endpoint",
+  "version": "0.0.0",
+  "private": true,
+  "license": "Elastic-License",
+  "scripts": {},
+  "dependencies": {
+    "react-redux": "^7.1.0"
+  },
+  "devDependencies": {
+    "@types/react-redux": "^7.1.0"
+  }
+}

x-pack/plugins/endpoint/public/embeddables/resolver/actions.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { CameraAction } from './store/camera';
+import { DataAction } from './store/data';
+
+export type ResolverAction = CameraAction | DataAction;

x-pack/plugins/endpoint/public/embeddables/resolver/embeddable.tsx

@@ -4,31 +4,32 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import {
-  EmbeddableInput,
-  IContainer,
-  Embeddable,
-} from '../../../../../../src/plugins/embeddable/public';
+import ReactDOM from 'react-dom';
+import React from 'react';
+import { AppRoot } from './view';
+import { storeFactory } from './store';
+import { Embeddable } from '../../../../../../src/plugins/embeddable/public';
 
 export class ResolverEmbeddable extends Embeddable {
   public readonly type = 'resolver';
-  constructor(initialInput: EmbeddableInput, parent?: IContainer) {
-    super(
-      // Input state is irrelevant to this embeddable, just pass it along.
-      initialInput,
-      // Initial output state - this embeddable does not do anything with output, so just
-      // pass along an empty object.
-      {},
-      // Optional parent component, this embeddable can optionally be rendered inside a container.
-      parent
-    );
-  }
+  private lastRenderTarget?: Element;
 
   public render(node: HTMLElement) {
-    node.innerHTML = '<div data-test-subj="resolverEmbeddable">Welcome from Resolver</div>';
+    if (this.lastRenderTarget !== undefined) {
+      ReactDOM.unmountComponentAtNode(this.lastRenderTarget);
+    }
+    this.lastRenderTarget = node;
+    const { store } = storeFactory();
+    ReactDOM.render(<AppRoot store={store} />, node);
   }
 
   public reload(): void {
     throw new Error('Method not implemented.');
   }
+
+  public destroy(): void {
+    if (this.lastRenderTarget !== undefined) {
+      ReactDOM.unmountComponentAtNode(this.lastRenderTarget);
+    }
+  }
 }

x-pack/plugins/endpoint/public/embeddables/resolver/factory.ts

@@ -5,12 +5,12 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { ResolverEmbeddable } from './';
 import {
   EmbeddableFactory,
-  EmbeddableInput,
   IContainer,
+  EmbeddableInput,
 } from '../../../../../../src/plugins/embeddable/public';
+import { ResolverEmbeddable } from './embeddable';
 
 export class ResolverEmbeddableFactory extends EmbeddableFactory {
   public readonly type = 'resolver';
@@ -20,7 +20,7 @@ export class ResolverEmbeddableFactory extends EmbeddableFactory {
   }
 
   public async create(initialInput: EmbeddableInput, parent?: IContainer) {
-    return new ResolverEmbeddable(initialInput, parent);
+    return new ResolverEmbeddable(initialInput, {}, parent);
   }
 
   public getDisplayName() {

x-pack/plugins/endpoint/public/embeddables/resolver/lib/math.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+/**
+ * Return `value` unless it is less than `minimum`, in which case return `minimum` or unless it is greater than `maximum`, in which case return `maximum`.
+ */
+export function clamp(value: number, minimum: number, maximum: number) {
+  return Math.max(Math.min(value, maximum), minimum);
+}

x-pack/plugins/endpoint/public/embeddables/resolver/lib/matrix3.test.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { multiply } from './matrix3';
+describe('matrix3', () => {
+  it('can multiply two matrix3s', () => {
+    expect(multiply([1, 2, 3, 4, 5, 6, 7, 8, 9], [10, 11, 12, 13, 14, 15, 16, 17, 18])).toEqual([
+      84,
+      90,
+      96,
+      201,
+      216,
+      231,
+      318,
+      342,
+      366,
+    ]);
+  });
+});

x-pack/plugins/endpoint/public/embeddables/resolver/lib/matrix3.ts

@@ -0,0 +1,56 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Matrix3 } from '../types';
+
+/**
+ * Return a new matrix which is the product of the first and second matrix.
+ */
+export function multiply(
+  [a11, a12, a13, a21, a22, a23, a31, a32, a33]: Matrix3,
+  [b11, b12, b13, b21, b22, b23, b31, b32, b33]: Matrix3
+): Matrix3 {
+  const s11 = a11 * b11 + a12 * b21 + a13 * b31;
+  const s12 = a11 * b12 + a12 * b22 + a13 * b32;
+  const s13 = a11 * b13 + a12 * b23 + a13 * b33;
+
+  const s21 = a21 * b11 + a22 * b21 + a23 * b31;
+  const s22 = a21 * b12 + a22 * b22 + a23 * b32;
+  const s23 = a21 * b13 + a22 * b23 + a23 * b33;
+
+  const s31 = a31 * b11 + a32 * b21 + a33 * b31;
+  const s32 = a31 * b12 + a32 * b22 + a33 * b32;
+  const s33 = a31 * b13 + a32 * b23 + a33 * b33;
+
+  // prettier-ignore
+  return [
+    s11, s12, s13,
+    s21, s22, s23,
+    s31, s32, s33,
+  ];
+}
+
+/**
+ * Return a new matrix which is the sum of the two passed in.
+ */
+export function add(
+  [a11, a12, a13, a21, a22, a23, a31, a32, a33]: Matrix3,
+  [b11, b12, b13, b21, b22, b23, b31, b32, b33]: Matrix3
+): Matrix3 {
+  return [
+    a11 + b11,
+    a12 + b12,
+    a13 + b13,
+
+    a21 + b21,
+    a22 + b22,
+    a23 + b23,
+
+    a31 + b31,
+    a32 + b32,
+    a33 + b33,
+  ];
+}

x-pack/plugins/endpoint/public/embeddables/resolver/lib/transformation.test.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { applyMatrix3 } from './vector2';
+import { scalingTransformation } from './transformation';
+
+describe('transforms', () => {
+  it('applying a scale matrix to a vector2 can invert the y value', () => {
+    expect(applyMatrix3([1, 2], scalingTransformation([1, -1]))).toEqual([1, -2]);
+  });
+});

x-pack/plugins/endpoint/public/embeddables/resolver/lib/transformation.ts

@@ -0,0 +1,73 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Matrix3, Vector2 } from '../types';
+
+/**
+ * The inverse of `orthographicProjection`.
+ */
+export function inverseOrthographicProjection(
+  top: number,
+  right: number,
+  bottom: number,
+  left: number
+): Matrix3 {
+  const m11 = (right - left) / 2;
+  const m13 = (right + left) / (right - left);
+
+  const m22 = (top - bottom) / 2;
+  const m23 = (top + bottom) / (top - bottom);
+
+  return [m11, 0, m13, 0, m22, m23, 0, 0, 0];
+}
+
+/**
+ * Adjust x, y to be bounded, in scale, of a clipping plane defined by top, right, bottom, left.
+ *
+ * See explanation:
+ * https://www.scratchapixel.com/lessons/3d-basic-rendering/perspective-and-orthographic-projection-matrix
+ * https://en.wikipedia.org/wiki/Orthographic_projection
+ */
+export function orthographicProjection(
+  top: number,
+  right: number,
+  bottom: number,
+  left: number
+): Matrix3 {
+  const m11 = 2 / (right - left); // adjust x scale to match ndc (-1, 1) bounds
+  const m13 = -((right + left) / (right - left));
+
+  const m22 = 2 / (top - bottom); // adjust y scale to match ndc (-1, 1) bounds
+  const m23 = -((top + bottom) / (top - bottom));
+
+  return [m11, 0, m13, 0, m22, m23, 0, 0, 0];
+}
+
+/**
+ * Returns a 2D transformation matrix that when applied to a vector will scale the vector by `x` and `y` in their respective axises.
+ * See https://en.wikipedia.org/wiki/Scaling_(geometry)#Matrix_representation
+ */
+export function scalingTransformation([x, y]: Vector2): Matrix3 {
+  // prettier-ignore
+  return [
+    x, 0, 0,
+    0, y, 0,
+    0, 0, 0
+  ]
+}
+
+/**
+ * Returns a 2D transformation matrix that when applied to a vector will translate by `x` and `y` in their respective axises.
+ * See https://en.wikipedia.org/wiki/Translation_(geometry)#Matrix_representation
+ */
+export function translationTransformation([x, y]: Vector2): Matrix3 {
+  // prettier-ignore
+  return [
+    1, 0, x,
+    0, 1, y,
+    0, 0, 1
+  ]
+}

x-pack/plugins/endpoint/public/embeddables/resolver/lib/tree_sequencers.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+/**
+ * Sequences a tree, yielding children returned by the `children` function. Sequencing is done in 'depth first preorder' fashion. See https://en.wikipedia.org/wiki/Tree_traversal#Pre-order_(NLR)
+ */
+export function* depthFirstPreorder<T>(root: T, children: (parent: T) => T[]): Iterable<T> {
+  const nodesToVisit = [root];
+  while (nodesToVisit.length !== 0) {
+    const currentNode = nodesToVisit.shift();
+    if (currentNode !== undefined) {
+      nodesToVisit.unshift(...(children(currentNode) || []));
+      yield currentNode;
+    }
+  }
+}
+
+/**
+ * Sequences a tree, yielding children returned by the `children` function. Sequencing is done in 'level order' fashion.
+ */
+export function* levelOrder<T>(root: T, children: (parent: T) => T[]): Iterable<T> {
+  let level = [root];
+  while (level.length !== 0) {
+    let nextLevel = [];
+    for (const node of level) {
+      yield node;
+      nextLevel.push(...(children(node) || []));
+    }
+    level = nextLevel;
+    nextLevel = [];
+  }
+}

x-pack/plugins/endpoint/public/embeddables/resolver/lib/vector2.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { Vector2, Matrix3 } from '../types';
+
+/**
+ * Returns a vector which is the sum of `a` and `b`.
+ */
+export function add(a: Vector2, b: Vector2): Vector2 {
+  return [a[0] + b[0], a[1] + b[1]];
+}
+
+/**
+ * Returns a vector which is the difference of `a` and `b`.
+ */
+export function subtract(a: Vector2, b: Vector2): Vector2 {
+  return [a[0] - b[0], a[1] - b[1]];
+}
+
+/**
+ * Returns a vector which is the quotient of `a` and `b`.
+ */
+export function divide(a: Vector2, b: Vector2): Vector2 {
+  return [a[0] / b[0], a[1] / b[1]];
+}
+
+/**
+ * Returns a vector which is the result of applying a 2D transformation matrix to the provided vector.
+ */
+export function applyMatrix3([x, y]: Vector2, [m11, m12, m13, m21, m22, m23]: Matrix3): Vector2 {
+  return [x * m11 + y * m12 + m13, x * m21 + y * m22 + m23];
+}
+
+/**
+ * Returns the distance between two vectors
+ */
+export function distance(a: Vector2, b: Vector2) {
+  const [x1, y1] = a;
+  const [x2, y2] = b;
+  return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+}
+
+/**
+ * Returns the angle between two vectors
+ */
+export function angle(a: Vector2, b: Vector2) {
+  const deltaX = b[0] - a[0];
+  const deltaY = b[1] - a[1];
+  return Math.atan2(deltaY, deltaX);
+}