feat(ui): Stylize Node Minimap

invokeai/frontend/web/src/features/nodes/components/Flow.tsx

@@ -1,6 +1,5 @@
 import {
   Background,
-  MiniMap,
   OnConnect,
   OnEdgesChange,
   OnNodesChange,
@@ -23,6 +22,7 @@ import TopLeftPanel from './panels/TopLeftPanel';
 import TopRightPanel from './panels/TopRightPanel';
 import TopCenterPanel from './panels/TopCenterPanel';
 import BottomLeftPanel from './panels/BottomLeftPanel.tsx';
+import MinimapPanel from './panels/MinimapPanel';
 
 const nodeTypes = { invocation: InvocationComponent };
 
@@ -59,12 +59,9 @@ export const Flow = () => {
     [dispatch]
   );
 
-  const onConnectEnd: OnConnectEnd = useCallback(
+  const onConnectEnd: OnConnectEnd = useCallback(() => {
-    (event) => {
+    dispatch(connectionEnded());
-      dispatch(connectionEnded());
+  }, [dispatch]);
-    },
-    [dispatch]
-  );
 
   return (
     <ReactFlow
@@ -85,7 +82,7 @@ export const Flow = () => {
       <TopRightPanel />
       <BottomLeftPanel />
       <Background />
-      <MiniMap nodeStrokeWidth={3} zoomable pannable />
+      <MinimapPanel />
     </ReactFlow>
   );
 };

invokeai/frontend/web/src/features/nodes/components/panels/MinimapPanel.tsx

@@ -0,0 +1,34 @@
+import { RootState } from 'app/store';
+import { useAppSelector } from 'app/storeHooks';
+import { CSSProperties, memo } from 'react';
+import { MiniMap } from 'reactflow';
+
+const MinimapStyle: CSSProperties = {
+  background: 'var(--invokeai-colors-base-500)',
+};
+
+const MinimapPanel = () => {
+  const currentTheme = useAppSelector(
+    (state: RootState) => state.ui.currentTheme
+  );
+
+  return (
+    <MiniMap
+      nodeStrokeWidth={3}
+      pannable
+      zoomable
+      nodeBorderRadius={30}
+      style={MinimapStyle}
+      nodeColor={
+        currentTheme === 'light'
+          ? 'var(--invokeai-colors-accent-700)'
+          : currentTheme === 'green'
+          ? 'var(--invokeai-colors-accent-600)'
+          : 'var(--invokeai-colors-accent-700)'
+      }
+      maskColor="var(--invokeai-colors-base-700)"
+    />
+  );
+};
+
+export default memo(MinimapPanel);