diff --git a/invokeai/frontend/web/src/features/nodes/components/Flow.tsx b/invokeai/frontend/web/src/features/nodes/components/Flow.tsx
index 173458d285..38c1b43943 100644
--- a/invokeai/frontend/web/src/features/nodes/components/Flow.tsx
+++ b/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(
- (event) => {
- dispatch(connectionEnded());
- },
- [dispatch]
- );
+ const onConnectEnd: OnConnectEnd = useCallback(() => {
+ dispatch(connectionEnded());
+ }, [dispatch]);
return (
{
-
+
);
};
diff --git a/invokeai/frontend/web/src/features/nodes/components/panels/MinimapPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/panels/MinimapPanel.tsx
new file mode 100644
index 0000000000..33c5605310
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default memo(MinimapPanel);