React Flow Lock the Interactivity

Question

Is it possible to lock the interactivity in react flow charts programmatically, I want to make the chart non movable, and any component inside the chart no to do any interactivity, just a state of view/read only

we have the controls that has focus, and zoom in and out and there we have the lock icon, just want to replicate the functionality programmatically

Code:

     <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      onInit={setReactFlowInstance}
      nodeTypes={nodeTypes}
      defaultEdgeOptions={defaultEdgeOptions}
      onDrop={onDrop}
      onDragOver={onDragOver}
      onConnectStart={onConnectStart}
      onConnectEnd={onConnectEnd}
      proOptions={proOptions}
      minZoom={0.001}
      fitView
    >
      <MiniMap style={minimapStyle} zoomable pannable />
      <Controls />
    </ReactFlow>

Answer 1

React Flow provides a range of fine-grained props that allow you to control how much/little the user can interact with a "disabled" or "locked" flow. Depending on your requirements, you can choose to implement what you need, but for a quick example the following code will disable/lock a flow.

<ReactFlow
  nodes={nodes}
  edges={edges}
  onNodesChange={onNodesChange}
  onEdgesChange={onEdgesChange}
  onConnect={onConnect}
  edgesUpdatable={!disabled}
  edgesFocusable={!disabled}
  nodesDraggable={!disabled}
  nodesConnectable={!disabled}
  nodesFocusable={!disabled}
  draggable={!disabled}
  panOnDrag={!disabled}
  elementsSelectable={!disabled}
>
  <MiniMap />
  <Controls />
</ReactFlow>

Working CodeSandbox: https://codesandbox.io/s/react-flow-disabled-example-4m4l54?file=/App.js