How to create minimap for each flow?

[aryan-debug]

I am creating a website where users can create multiple flows. They should be able to see a preview of each of their flows in a sidebar (which they can toggle on and off). Right now, I am using a MiniMap for each flow, but I am running into a few issues.

• I know that each flow instance should have its own provider, but I am not sure if the sidebar should be part of the provider. How should the sidebar receive the data for each flow if it's not part of the provider?

• Right now, I have something like this:

"use client"

import { useCallback, useState } from 'react';
import { ReactFlowProvider, Node, Edge } from '@xyflow/react';
import Flow, { FlowData } from '@/components/Flow';
import Sidebar from '@/components/Sidebar';
import '@xyflow/react/dist/style.css';

function MainApp() {
  const [flows, setFlows] = useState<FlowData[]>([
    { id: 'flow1', name: 'Flow 1', nodes: [], edges: [] },
    { id: 'flow2', name: 'Flow 2', nodes: [], edges: [] }
  ]);
  const [activeFlowId, setActiveFlowId] = useState('flow1');

  const handleFlowChange = useCallback((id: string, nodes: Node[], edges: Edge[]) => {
    setFlows(prev => prev.map(flow =>
      flow.id === id ? { ...flow, nodes, edges } : flow
    ));
  }, []);

  const handleFlowSelect = useCallback((id: string) => {
    setActiveFlowId(id);
  }, []);


  return (
    <div style={{ position: 'relative', width: '100vw', height: '100vh' }}>
      {flows.map(flow => (
        <ReactFlowProvider key={flow.id}>
          <Flow
            flowData={flow}
            onFlowChange={handleFlowChange}
            isActive={activeFlowId === flow.id}
          />
        </ReactFlowProvider>
      ))}

      <Sidebar
        flows={flows}
        activeFlowId={activeFlowId}
        onSelectFlow={handleFlowSelect}
      />
    </div>
  );
}

export default MainApp;

import { Panel, ReactFlow, MiniMap } from '@xyflow/react';
import './styles/sidebar.css';
import { FlowData, nodeTypes } from './Flow';

interface SidebarProps {
    flows: FlowData[];
    activeFlowId: string;
    onSelectFlow: (id: string) => void;
}

function Sidebar({ flows, activeFlowId, onSelectFlow }: SidebarProps) {
    return (
        <Panel position="top-left">
            <div className="sidebar">
                {flows.map(flow => (
                    <div
                        key={flow.id}
                        className={`minimap-container ${activeFlowId === flow.id ? 'active' : ''}`}
                        onClick={() => onSelectFlow(flow.id)}
                    >
                        <h4 className="minimap-title">{flow.name}</h4>
                        <div className="minimap-wrapper" style={{ width: 150, height: 200 }}>
                            <ReactFlow
                                nodes={flow.nodes}
                                edges={flow.edges}
                                nodeTypes={nodeTypes}
                                fitView
                                proOptions={{ hideAttribution: true }}
                                nodesDraggable={false}
                                nodesConnectable={false}
                                elementsSelectable={false}
                                zoomOnScroll={false}
                                panOnDrag={false}
                                zoomOnPinch={false}
                                zoomOnDoubleClick={false}
                                panOnScroll={false}
                                style={{ pointerEvents: "none", background: "white" }}
                            >
                                <MiniMap pannable={false} zoomable={false} />
                            </ReactFlow>
                        </div>

                    </div>
                ))}
            </div>
        </Panel>
    );
}

export default Sidebar;

• I am rendering a flow instance for each minimap, and I feel it's pretty inefficient to render the same stuff twice (and I am having a hard time hiding the components since they appear behind the minimap).

Please guide me on how I should go about implementing this. Thanks a lot!