Introduce column filters

Summary:
Beyond a search across all columns, it is now possible to specific columns for specific values:

* for a row to be visible, all active column filters need to be matched (e.g. both a filter on time and app has to be satisfied)
* if multiple values within a column are filtered for, these are -or-ed.
* if no value at all within a column is checked, even when they are defined, the column won't take part in filtering
* if there is a general search and column filters, a row has to satisfy both

Filters can be preconfigured, pre-configured filters cannot be removed.

Reseting will reset the filters back to their original

Move `useMemoize` to flipper-plugin

Merged the `ui/utils` and `utils` folder inside `flipper-plugin`

Reviewed By: nikoant

Differential Revision: D26450260

fbshipit-source-id: 11693d5d140cea03cad91c1e0f3438d7b129cf29

desktop/flipper-plugin/src/utils/LowPassFilter.tsx

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+export default class LowPassFilter {
+  constructor(smoothing: number = 0.9) {
+    this.smoothing = smoothing;
+    this.buffer = [];
+    this.bufferMaxSize = 5;
+  }
+
+  bufferMaxSize: number;
+  smoothing: number;
+  buffer: Array<number>;
+
+  hasFullBuffer(): boolean {
+    return this.buffer.length === this.bufferMaxSize;
+  }
+
+  push(value: number): number {
+    let removed: number = 0;
+
+    if (this.hasFullBuffer()) {
+      const tmp: number | undefined = this.buffer.shift();
+      if (tmp === undefined)
+        throw new Error(
+          'Invariant violation: Buffer reported full but shift returned nothing.',
+        );
+      removed = tmp;
+    }
+
+    this.buffer.push(value);
+
+    return removed;
+  }
+
+  next(nextValue: number): number {
+    // push new value to the end, and remove oldest one
+    const removed = this.push(nextValue);
+
+    // smooth value using all values from buffer
+    const result = this.buffer.reduce(this._nextReduce, removed);
+
+    // replace smoothed value
+    this.buffer[this.buffer.length - 1] = result;
+
+    return result;
+  }
+
+  _nextReduce = (last: number, current: number): number => {
+    return this.smoothing * current + (1 - this.smoothing) * last;
+  };
+}

desktop/flipper-plugin/src/utils/Rect.tsx

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+export type Rect = {
+  top: number;
+  left: number;
+  height: number;
+  width: number;
+};

desktop/flipper-plugin/src/utils/snap.tsx

@@ -0,0 +1,160 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {Rect} from './Rect';
+
+export const SNAP_SIZE = 16;
+
+export function snapGrid(val: number): number {
+  return val - (val % SNAP_SIZE);
+}
+
+export function getPossibleSnappedPosition(
+  windows: Array<Rect>,
+  {
+    getGap,
+    getNew,
+  }: {
+    getNew: (win: Rect) => number;
+    getGap: (win: Rect) => number;
+  },
+): number | undefined {
+  for (const win of windows) {
+    const gap = Math.abs(getGap(win));
+    if (gap >= 0 && gap < SNAP_SIZE) {
+      return getNew(win);
+    }
+  }
+}
+
+export function getDistanceTo(props: Rect, win: Rect): number {
+  const x1 = win.left;
+  const y1 = win.top;
+  const x1b = win.left + win.width;
+  const y1b = win.top + win.height;
+
+  const x2 = props.left;
+  const y2 = props.top;
+  const x2b = props.left + props.width;
+  const y2b = props.top + props.height;
+
+  const left = x2b < x1;
+  const right = x1b < x2;
+  const bottom = y2b < y1;
+  const top = y1b < y2;
+
+  if (top && left) {
+    return distance(x1, y1b, x2b, y2);
+  } else if (left && bottom) {
+    return distance(x1, y1, x2b, y2b);
+  } else if (bottom && right) {
+    return distance(x1b, y1, x2, y2b);
+  } else if (right && top) {
+    return distance(x1b, y1b, x2, y2);
+  } else if (left) {
+    return x1 - x2b;
+  } else if (right) {
+    return x2 - x1b;
+  } else if (bottom) {
+    return y1 - y2b;
+  } else if (top) {
+    return y2 - y1b;
+  } else {
+    return 0;
+  }
+}
+
+export function distance(
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+): number {
+  return Math.abs(x1 - x2) + Math.abs(y1 - y2);
+}
+
+export function maybeSnapLeft(
+  props: Rect,
+  windows: Array<Rect>,
+  left: number,
+): number {
+  // snap right side to left
+  // ┌─┬─┐
+  // │A│B│
+  // └─┴─┘
+  const snapRight = getPossibleSnappedPosition(windows, {
+    getGap: (win) => win.left - (props.width + left),
+    getNew: (win) => win.left - props.width,
+  });
+  if (snapRight != null) {
+    return snapRight;
+  }
+
+  // snap left side to right
+  // ┌─┬─┐
+  // │B│A│
+  // └─┴─┘
+  const snapLeft = getPossibleSnappedPosition(windows, {
+    getGap: (win) => left - (win.left + win.width),
+    getNew: (win) => win.left + win.width,
+  });
+  if (snapLeft != null) {
+    return snapLeft;
+  }
+
+  return snapGrid(left);
+}
+
+export function maybeSnapTop(
+  _props: Rect,
+  windows: Array<Rect>,
+  top: number,
+): number {
+  // snap bottom to bottom
+  // ┌─┐
+  // │A├─┐
+  // │ │B│
+  // └─┴─┘
+  const snapBottom2 = getPossibleSnappedPosition(windows, {
+    getGap: (win) => top - win.top - win.height,
+    getNew: (win) => win.top + win.height,
+  });
+  if (snapBottom2 != null) {
+    return snapBottom2;
+  }
+
+  // snap top to bottom
+  // ┌─┐
+  // │B│
+  // ├─┤
+  // │A│
+  // └─┘
+  const snapBottom = getPossibleSnappedPosition(windows, {
+    getGap: (win) => top - win.top - win.height,
+    getNew: (win) => win.top + win.height,
+  });
+  if (snapBottom != null) {
+    return snapBottom;
+  }
+
+  // snap top to top
+  // ┌─┬─┐
+  // │A│B│
+  // │ ├─┘
+  // └─┘
+  const snapTop = getPossibleSnappedPosition(windows, {
+    getGap: (win) => top - win.top,
+    getNew: (win) => win.top,
+  });
+  if (snapTop != null) {
+    return snapTop;
+  }
+
+  return snapGrid(top);
+}

desktop/flipper-plugin/src/utils/useMemoize.tsx

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {useMemo} from 'react';
+
+/**
+ * Slight variation on useMemo that encourages to create hoistable memoization functions,
+ * which encourages reuse and testability by no longer closing over things in the memoization function.
+ *
+ * @example
+ * const metroDevice = useMemoize(
+ *   findMetroDevice,
+ *   [connections.devices],
+ * );
+ */
+export function useMemoize<T extends any[], R>(fn: (...args: T) => R, args: T) {
+  // eslint-disable-next-line
+  return useMemo(() => fn.apply(null, args), args);
+}

desktop/flipper-plugin/src/utils/widthUtils.tsx

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+export type Percentage = string; // currently broken, see https://github.com/microsoft/TypeScript/issues/41651. Should be `${number}%`;
+
+export type Width = undefined | number | Percentage; // undefined represents auto flex
+
+export function isPercentage(width: any): width is Percentage {
+  return typeof width === 'string' && width[width.length - 1] === '%';
+}
+
+export function calculatePercentage(
+  parentWidth: number,
+  selfWidth: number,
+): Percentage {
+  return `${(100 / parentWidth) * selfWidth}%` as const;
+}