refactor(node-renderer): simplify selectors, remove reselect, cleanup

packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx

@@ -1,30 +1,18 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ComponentType, memo, MouseEvent } from 'react';
-import { shallow } from 'zustand/shallow';
+import { ComponentType, memo } from 'react';
 import { NodeOrigin, getNodePositionWithOrigin } from '@xyflow/system';
+import { shallow } from 'zustand/shallow';
 
 import { useStore } from '../../hooks/useStore';
 import type { ReactFlowState } from '../../types';
 import MiniMapNode from './MiniMapNode';
 import type { MiniMapNodes as MiniMapNodesProps, GetMiniMapNodeAttribute, MiniMapNodeProps } from './types';
-import { createSelector } from 'reselect';
 
 declare const window: any;
 
 const selector = (s: ReactFlowState) => s.nodeOrigin;
-const selectorNodeIds = createSelector(
-  [(s: ReactFlowState) => s.nodes],
-  (nodes) =>
-    nodes
-      .filter((node) => !node.hidden && (node.computed?.width || node.width) && (node.computed?.height || node.height))
-      .map((node) => node.id),
-  {
-    memoizeOptions: {
-      resultEqualityCheck: shallow,
-    },
-  }
-);
+const selectorNodeIds = (s: ReactFlowState) => s.nodes.map((node) => node.id);
 const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
 
 function MiniMapNodes({
@@ -38,7 +26,7 @@ function MiniMapNodes({
   nodeComponent: NodeComponent = MiniMapNode,
   onClick,
 }: MiniMapNodesProps) {
-  const nodes = useStore(selectorNodeIds);
+  const nodeIds = useStore(selectorNodeIds, shallow);
   const nodeOrigin = useStore(selector);
   const nodeColorFunc = getAttrFunction(nodeColor);
   const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
@@ -48,7 +36,7 @@ function MiniMapNodes({
 
   return (
     <>
-      {nodes.map((nodeId) => (
+      {nodeIds.map((nodeId) => (
         // The split of responsibilities between MiniMapNodes and
         // NodeComponentWrapper may appear weird. However, it’s designed to
         // minimize the cost of updates when individual nodes change.
@@ -96,16 +84,16 @@ const NodeComponentWrapper = memo(function NodeComponentWrapper({
   shapeRendering: string;
 }) {
   const node = useStore((s) => s.nodeLookup.get(id));
-  if (!node) {
+  if (!node || node.hidden || !(node.computed?.width || node.width) || !(node.computed?.height || node.height)) {
     return null;
   }
 
-  const { x, y } = getNodePositionWithOrigin(node, node.origin || nodeOrigin).positionAbsolute;
+  const positionOrigin = getNodePositionWithOrigin(node, node.origin || nodeOrigin).positionAbsolute;
 
   return (
     <NodeComponent
-      x={x}
-      y={y}
+      x={positionOrigin.x}
+      y={positionOrigin.y}
       width={node.computed?.width ?? node.width ?? 0}
       height={node.computed?.height ?? node.height ?? 0}
       style={node.style}