memoize many selectors

Author: oatkiller

x-pack/plugins/security_solution/public/resolver/store/camera/selectors.ts

@@ -164,7 +164,8 @@ export const scale: (state: CameraState) => (time: number) => Vector2 = createSe
         scalingConstants.maximum
       );
 
-      return (time) => {
+      // memoizing this so the vector returned will be the same object reference if called with the same `time`.
+      return defaultMemoize((time) => {
         /**
          * If the animation has completed, return the `scaleNotCountingAnimation`, as
          * the animation always completes with the scale set back at starting value.
@@ -247,12 +248,13 @@ export const scale: (state: CameraState) => (time: number) => Vector2 = createSe
            */
           return [lerpedScale, lerpedScale];
         }
-      };
+      });
     } else {
       /**
        * The scale should be the same in both axes.
+       * Memoizing this so the vector returned will be the same object reference every time.
        */
-      return () => [scaleNotCountingAnimation, scaleNotCountingAnimation];
+      return defaultMemoize(() => [scaleNotCountingAnimation, scaleNotCountingAnimation]);
     }
 
     /**
@@ -277,22 +279,26 @@ export const clippingPlanes: (
 ) => (time: number) => ClippingPlanes = createSelector(
   (state) => state.rasterSize,
   scale,
-  (rasterSize, scaleAtTime) => (time: number) => {
-    const [scaleX, scaleY] = scaleAtTime(time);
-    const renderWidth = rasterSize[0];
-    const renderHeight = rasterSize[1];
-    const clippingPlaneRight = renderWidth / 2 / scaleX;
-    const clippingPlaneTop = renderHeight / 2 / scaleY;
-
-    return {
-      renderWidth,
-      renderHeight,
-      clippingPlaneRight,
-      clippingPlaneTop,
-      clippingPlaneLeft: -clippingPlaneRight,
-      clippingPlaneBottom: -clippingPlaneTop,
-    };
-  }
+  (rasterSize, scaleAtTime) =>
+    /**
+     * memoizing this for object reference equality.
+     */
+    defaultMemoize((time: number) => {
+      const [scaleX, scaleY] = scaleAtTime(time);
+      const renderWidth = rasterSize[0];
+      const renderHeight = rasterSize[1];
+      const clippingPlaneRight = renderWidth / 2 / scaleX;
+      const clippingPlaneTop = renderHeight / 2 / scaleY;
+
+      return {
+        renderWidth,
+        renderHeight,
+        clippingPlaneRight,
+        clippingPlaneTop,
+        clippingPlaneLeft: -clippingPlaneRight,
+        clippingPlaneBottom: -clippingPlaneTop,
+      };
+    })
 );
 
 /**
@@ -323,7 +329,10 @@ export const translation: (state: CameraState) => (time: number) => Vector2 = cr
   scale,
   (state) => state.animation,
   (panning, translationNotCountingCurrentPanning, scaleAtTime, animation) => {
-    return (time: number) => {
+    /**
+     * Memoizing this for object reference equality.
+     */
+    return defaultMemoize((time: number) => {
       const [scaleX, scaleY] = scaleAtTime(time);
       if (animation !== undefined && animationIsActive(animation, time)) {
         return vector2.lerp(
@@ -343,7 +352,7 @@ export const translation: (state: CameraState) => (time: number) => Vector2 = cr
       } else {
         return translationNotCountingCurrentPanning;
       }
-    };
+    });
   }
 );
 
@@ -357,7 +366,10 @@ export const inverseProjectionMatrix: (
   clippingPlanes,
   translation,
   (clippingPlanesAtTime, translationAtTime) => {
-    return (time: number) => {
+    /**
+     * Memoizing this for object reference equality (and reduced memory churn.)
+     */
+    return defaultMemoize((time: number) => {
       const {
         renderWidth,
         renderHeight,
@@ -404,7 +416,7 @@ export const inverseProjectionMatrix: (
         translateForCamera,
         multiply(scaleToClippingPlaneDimensions, multiply(invertY, screenToNDC))
       );
-    };
+    });
   }
 );
 
@@ -415,7 +427,8 @@ export const viewableBoundingBox: (state: CameraState) => (time: number) => AABB
   clippingPlanes,
   inverseProjectionMatrix,
   (clippingPlanesAtTime, matrixAtTime) => {
-    return (time: number) => {
+    // memoizing this so the AABB returned will be the same object reference if called with the same `time`.
+    return defaultMemoize((time: number) => {
       const { renderWidth, renderHeight } = clippingPlanesAtTime(time);
       const matrix = matrixAtTime(time);
       const bottomLeftCorner: Vector2 = [0, renderHeight];
@@ -424,7 +437,7 @@ export const viewableBoundingBox: (state: CameraState) => (time: number) => AABB
         minimum: vector2.applyMatrix3(bottomLeftCorner, matrix),
         maximum: vector2.applyMatrix3(topRightCorner, matrix),
       };
-    };
+    });
   }
 );
 
@@ -436,6 +449,8 @@ export const projectionMatrix: (state: CameraState) => (time: number) => Matrix3
   clippingPlanes,
   translation,
   (clippingPlanesAtTime, translationAtTime) => {
+    // memoizing this so the matrix returned will be the same object reference if called with the same `time`.
+    // this should also save on some memory allocation
     return defaultMemoize((time: number) => {
       const {
         renderWidth,

x-pack/plugins/security_solution/public/resolver/store/data/selectors.ts

@@ -5,7 +5,11 @@
  */
 
 import rbush from 'rbush';
-import { createSelector, defaultMemoize } from 'reselect';
+import {
+  createSelector,
+  defaultMemoize as defaultMemoizeWithOriginalType,
+  defaultMemoize,
+} from 'reselect';
 import {
   DataState,
   Vector2,
@@ -133,7 +137,9 @@ export function relatedEventsByEntityId(data: DataState): Map<string, ResolverRe
  * Returns a function that returns a function (when supplied with an entity id for a node)
  * that returns related events for a node that match an event.category (when supplied with the category)
  */
-export const relatedEventsByCategory = createSelector(
+export const relatedEventsByCategory: (
+  state: DataState
+) => (entityID: string) => (ecsCategory: string) => ResolverEvent[] = createSelector(
   relatedEventsByEntityId,
   function provideGettersByCategory(
     /* eslint-disable no-shadow */
@@ -248,7 +254,7 @@ export const relatedEventInfoByEntityId: (
         });
       };
 
-      const matchingEventsForCategory = defaultMemoize(unmemoizedMatchingEventsForCategory);
+      const matchingEventsForCategory = unmemoizedMatchingEventsForCategory;
 
       /**
        * The number of events that occurred before the API limit was reached.
@@ -426,45 +432,44 @@ const spatiallyIndexedLayout: (state: DataState) => rbush<IndexedEntity> = creat
   }
 );
 
+/**
+ * Returns nodes and edge lines that could be visible in the `query`.
+ */
 export const nodesAndEdgelines: (
   state: DataState
-) => (query: AABB) => VisibleEntites = createSelector(spatiallyIndexedLayout, function (tree) {
-  // memoize the results of this call to avoid unnecessarily rerunning
-  let lastBoundingBox: AABB | null = null;
-  let currentlyVisible: VisibleEntites = {
-    processNodePositions: new Map<ResolverEvent, Vector2>(),
-    connectingEdgeLineSegments: [],
-  };
-  return (boundingBox: AABB) => {
-    if (lastBoundingBox !== null && isEqual(lastBoundingBox, boundingBox)) {
-      return currentlyVisible;
-    } else {
-      const {
-        minimum: [minX, minY],
-        maximum: [maxX, maxY],
-      } = boundingBox;
-      const entities = tree.search({
-        minX,
-        minY,
-        maxX,
-        maxY,
-      });
-      const visibleProcessNodePositions = new Map<ResolverEvent, Vector2>(
-        entities
-          .filter((entity): entity is IndexedProcessNode => entity.type === 'processNode')
-          .map((node) => [node.entity, node.position])
-      );
-      const connectingEdgeLineSegments = entities
-        .filter((entity): entity is IndexedEdgeLineSegment => entity.type === 'edgeLine')
-        .map((node) => node.entity);
-      currentlyVisible = {
-        processNodePositions: visibleProcessNodePositions,
-        connectingEdgeLineSegments,
-      };
-      lastBoundingBox = boundingBox;
-      return currentlyVisible;
-    }
-  };
+) => (
+  /**
+   * An axis aligned bounding box (in world corrdinates) to search in. Any entities that might collide with this box will be returned.
+   */
+  query: AABB
+) => VisibleEntites = createSelector(spatiallyIndexedLayout, function (tree) {
+  /**
+   * Memoized for performance and object reference equality.
+   */
+  return defaultMemoize((boundingBox: AABB) => {
+    const {
+      minimum: [minX, minY],
+      maximum: [maxX, maxY],
+    } = boundingBox;
+    const entities = tree.search({
+      minX,
+      minY,
+      maxX,
+      maxY,
+    });
+    const visibleProcessNodePositions = new Map<ResolverEvent, Vector2>(
+      entities
+        .filter((entity): entity is IndexedProcessNode => entity.type === 'processNode')
+        .map((node) => [node.entity, node.position])
+    );
+    const connectingEdgeLineSegments = entities
+      .filter((entity): entity is IndexedEdgeLineSegment => entity.type === 'edgeLine')
+      .map((node) => node.entity);
+    return {
+      processNodePositions: visibleProcessNodePositions,
+      connectingEdgeLineSegments,
+    };
+  });
 });
 
 /**

x-pack/plugins/security_solution/public/resolver/store/selectors.ts

@@ -212,17 +212,6 @@ export const graphableProcesses = composeSelectors(
   dataSelectors.graphableProcesses
 );
 
-/**
- * Calls the `secondSelector` with the result of the `selector`. Use this when re-exporting a
- * concern-specific selector. `selector` should return the concern-specific state.
- */
-function composeSelectors<OuterState, InnerState, ReturnValue>(
-  selector: (state: OuterState) => InnerState,
-  secondSelector: (state: InnerState) => ReturnValue
-): (state: OuterState) => ReturnValue {
-  return (state) => secondSelector(selector(state));
-}
-
 const boundingBox = composeSelectors(cameraStateSelector, cameraSelectors.viewableBoundingBox);
 
 const nodesAndEdgelines = composeSelectors(dataStateSelector, dataSelectors.nodesAndEdgelines);
@@ -246,6 +235,7 @@ export const visibleNodesAndEdgeLines = createSelector(nodesAndEdgelines, boundi
   boundingBox
   /* eslint-enable no-shadow */
 ) {
+  // `boundingBox` and `nodesAndEdgelines` are each memoized.
   return (time: number) => nodesAndEdgelines(boundingBox(time));
 });
 
@@ -287,3 +277,14 @@ export const ariaFlowtoNodeID: (
     });
   }
 );
+
+/**
+ * Calls the `secondSelector` with the result of the `selector`. Use this when re-exporting a
+ * concern-specific selector. `selector` should return the concern-specific state.
+ */
+function composeSelectors<OuterState, InnerState, ReturnValue>(
+  selector: (state: OuterState) => InnerState,
+  secondSelector: (state: InnerState) => ReturnValue
+): (state: OuterState) => ReturnValue {
+  return (state) => secondSelector(selector(state));
+}