Gojs - MiniMap ( Reactoverview is not getting loaded) , But nodes get loaded

Question

I was integrating gojs with react and was successfully able to integrated the nodes array and links array and was able to see the nodes in my page.

But the toughest thing , integrated ReactOverview (minimap) but i can see only small rectangle box on the page with no diagram in it.

Will share my code here

    import PropTypes from 'prop-types';
    import { connect } from 'react-redux';
    import { ReactDiagram, ReactOverview } from 'gojs-react';
    import * as go from 'gojs';
    class DiagramContainer extends React.Component {
      diagramRef;
      static propTypes = {
        diagramData: PropTypes.object.isRequired,
      };
      constructor(props) {
        super(props);
        this.diagramRef = React.createRef();
    
        this.state = {};
      }
      initDiagram = () => {
        const $ = go.GraphObject.make;
    
        const diagram = $(go.Diagram, {
          'undoManager.isEnabled': true, 
          'animationManager.isEnabled': false,
          // 'undoManager.maxHistoryLength': 0,  
          model: $(go.GraphLinksModel, {
            linkKeyProperty: 'key', 
            linkFromPortIdProperty: 'fromPort',
            linkToPortIdProperty: 'toPort',
          }),
        });
        const defaulttemplate = $(
          go.Node,
          'Vertical',
          $(
            go.Panel,
            'Auto',
            $(
              go.Shape,
              'hexagon',
              {
                width: 160,
                height: 160,
              },
            ),
            $(
              go.TextBlock,


            }
          )
        );
        var templateMap = new go.Map();
        templateMap.add('normal', defaulttemplate);
     
                //dummy codes
            },
          })
        );
    
        return diagram;
      };
      initDiagramOverview = () => {
        const $ = go.GraphObject.make;
        const overview = $(go.Overview, { contentAlignment: go.Spot.Center });
        return overview;
      };
      render() {
    const { diagramData } = this.props;
    return (
             <>
               <div style={{ height: '100%' }}>
                <ReactDiagram
                 ref={this.diagramRef}
                 divClassName='diagram-main'
                 id='diagram'
                 initDiagram={this.initDiagram}
                 flowDiagramData={diagramData}
                 nodeDataArray={diagramData.dataArray}
                 linkDataArray={diagramData.linksArray}
                 skipsDiagramUpdate={diagramData.skipsDiagramUpdate}
                 modelData={}
                />
              </div>
              <ReactOverview
                initOverview={this.initDiagramOverview}
                divClassName='diagram-observed'
                observedDiagram={this.diagramRef.current?.getDiagram() || null}
              />
           </>
          );
      }
    }
    export default DiagramContainer
    ```
    

But am not seeing mini map , i can just see a rectangle box instead of minimap. Still i cross checked with various things and am not sure what went wrong 

Can you guys help me to resolve this issue

Answer 1

The problem is that your component only renders once for the given props (any interactive diagram changes are handled internally by GoJS and React is oblivious to that). When it renders the first and only time, this.diagramRef.current is still null. You can see this if you log it in the render method.

You need to use state to keep the "observed diagram" for the overview. Then when the overview component initializes, the diagram should be all set up and you can set the new state to cause re-render:

1. Add the state with the value of the diagram you want to observe in the overview:

constructor(props) {
    super(props);

    this.state = {
      observedDiagram: null
    };

    this.diagramRef = React.createRef();
}

2. Use this state in the ReactOverview component:

<ReactOverview
  initOverview={this.initDiagramOverview}
  divClassName="diagram-overview-component"
  observedDiagram={this.state.observedDiagram}
/>

3. Set the state when initializing the overview component:

initDiagramOverview = () => {
    this.setState({
      observedDiagram: this.diagramRef.current?.getDiagram() || null
    });

    const $ = go.GraphObject.make;
    const overview = $(go.Overview, { contentAlignment: go.Spot.Center });
    return overview;
  };

You can see how it works in this sandbox