unable to create an MxGraph from the XML provided

Question

It's a React project and I am trying to convert XML to MxGraph.

PFB :- the code that I have

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import {
  mxGraph,
  mxRubberband,
  mxKeyHandler,
  mxClient,
  mxUtils,
  mxEvent
} from 'mxgraph-js'
// import axios from 'axios'
import parser from 'fast-xml-parser'

import '../../common.css'
import '../../mxgraph.css'

class mxGraphGridAreaEditor extends Component {
  constructor (props) {
    super(props)
    this.state = {
      graph: {},
      layout: {},
      json: '',
      dragElt: null,
      createVisile: false,
      currentNode: null,
      currentTask: ''
    }
    this.LoadGraph = this.LoadGraph.bind(this)
  }
  componentDidMount () {
        const xml = `<mxGraphModel dx='2221' dy='774' grid='1' gridSize='10' guides='1' tooltips='1' connect='1' arrows='1' fold='1' page='1' pageScale='1' pageWidth='827' pageHeight='1169' math='0' shadow='0'>
        <root>
          <mxCell id='0'/>
          <mxCell id='1' parent='0'/>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-7' value='&lt;b style=&quot;font-size: 20px;&quot;&gt;Scorecard&lt;/b&gt;' 
        style='rounded=0;whiteSpace=wrap;html=1;fillColor=#E6E6E6;fontSize=20;verticalAlign=top;strokeColor=none;' parent='1' vertex='1'>
            <mxGeometry x='-230' y='10' width='240' height='800' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-1' value='KPA' style='rounded=0;whiteSpace=wrap;html=1;verticalAlign=top;fontStyle=1;strokeColor=none;fontSize=20;fillColor=#CCCCCC;' parent='1' vertex='1'>
            <mxGeometry x='10' y='10' width='240' height='800' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-2' value='&lt;b style=&quot;font-size: 20px;&quot;&gt;Domain&lt;/b&gt;' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#E6E6E6;fontSize=20;verticalAlign=top;strokeColor=none;' parent='1' vertex='1'>
            <mxGeometry x='250' y='10' width='240' height='800' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-3' value='Cluster' style='rounded=0;whiteSpace=wrap;html=1;verticalAlign=top;fontStyle=1;strokeColor=none;fontSize=20;fillColor=#CCCCCC;' parent='1' vertex='1'>
            <mxGeometry x='490' y='10' width='240' height='800' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-4' value='&lt;b style=&quot;font-size: 20px;&quot;&gt;KPI&lt;/b&gt;' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#E6E6E6;fontSize=20;verticalAlign=top;strokeColor=none;' parent='1' vertex='1'>
            <mxGeometry x='730' y='10' width='240' height='800' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-15' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-13' target='y3w0JNk_32n-TRd_Wrkm-5' edge='1'>
            <mxGeometry width='50' height='50' relative='1' as='geometry'>
              <mxPoint x='-160' y='450' as='sourcePoint'/>
              <mxPoint x='-110' y='400' as='targetPoint'/>
            </mxGeometry>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-19' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-16' target='y3w0JNk_32n-TRd_Wrkm-13' edge='1'>
            <mxGeometry width='50' height='50' relative='1' as='geometry'>
              <mxPoint x='40' y='297.5' as='sourcePoint'/>
              <mxPoint y='297.5' as='targetPoint'/>
            </mxGeometry>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-26' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-20' target='y3w0JNk_32n-TRd_Wrkm-16' edge='1'>
            <mxGeometry width='50' height='50' relative='1' as='geometry'>
              <mxPoint x='280' y='297.5' as='sourcePoint'/>
              <mxPoint x='240' y='297.5' as='targetPoint'/>
            </mxGeometry>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-27' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-23' target='y3w0JNk_32n-TRd_Wrkm-16' edge='1'>
            <mxGeometry width='50' height='50' relative='1' as='geometry'>
              <mxPoint x='520' y='189.79310344827593' as='sourcePoint'/>
              <mxPoint x='480' y='297.37931034482756' as='targetPoint'/>
            </mxGeometry>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-38' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-34' target='y3w0JNk_32n-TRd_Wrkm-20' edge='1'>
            <mxGeometry width='50' height='50' relative='1' as='geometry'>
              <mxPoint x='280' y='297.5' as='sourcePoint'/>
              <mxPoint x='240' y='297.5' as='targetPoint'/>
            </mxGeometry>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-48' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-40' target='y3w0JNk_32n-TRd_Wrkm-23' edge='1'>
            <mxGeometry width='50' height='50' relative='1' as='geometry'>
              <mxPoint x='520' y='402.2068965517242' as='sourcePoint'/>
              <mxPoint x='480' y='297.37931034482756' as='targetPoint'/>
            </mxGeometry>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-49' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-43' target='y3w0JNk_32n-TRd_Wrkm-23' edge='1'>
            <mxGeometry width='50' height='50' relative='1' as='geometry'>
              <mxPoint x='530' y='412.2068965517242' as='sourcePoint'/>
              <mxPoint x='490' y='307.37931034482756' as='targetPoint'/>
            </mxGeometry>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-50' value='' style='group' parent='1' vertex='1' connectable='0'>
            <mxGeometry x='750' y='440' width='200' height='145' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-43' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-50' vertex='1'>
            <mxGeometry width='200' height='145' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-44' value='End To End Fault Handling Effectiveness S2' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-50' vertex='1'>
            <mxGeometry width='200' height='55' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-45' value='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R 19 762&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;19.8%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-50' vertex='1'>
            <mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-51' value='' style='group' parent='1' vertex='1' connectable='0'>
            <mxGeometry x='750' y='247.5' width='200' height='145' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-40' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-51' vertex='1'>
            <mxGeometry width='200' height='145' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-41' value='End To End Fault Handling Effectiveness S1' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-51' vertex='1'>
            <mxGeometry width='200' height='55' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-42' value='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R 15 544&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;15.5%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-51' vertex='1'>
            <mxGeometry x='10' y='65.5' width='180' height='70' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-52' value='' style='group' parent='1' vertex='1' connectable='0'>
            <mxGeometry x='510' y='344' width='200' height='145' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-23' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-52' vertex='1'>
            <mxGeometry width='200' height='145' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-24' value='Fault Management' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-52' vertex='1'>
            <mxGeometry width='200' height='55' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-25' value='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R 35&lt;/span&gt;&lt;span&gt;&amp;nbsp;306&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;35.3%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-52' vertex='1'>
            <mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-53' value='' style='group' parent='1' vertex='1' connectable='0'>
            <mxGeometry x='750' y='58' width='200' height='145' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-34' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-53' vertex='1'>
            <mxGeometry width='200' height='145' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-35' value='Reporting Effectiveness' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-53' vertex='1'>
            <mxGeometry width='200' height='55' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-36' value='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R 19 500&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;19.5%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-53' vertex='1'>
            <mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-54' value='' style='group' parent='1' vertex='1' connectable='0'>
            <mxGeometry x='510' y='58' width='200' height='145' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-20' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-54' vertex='1'>
            <mxGeometry width='200' height='145' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-21' value='Reporting' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-54' vertex='1'>
            <mxGeometry width='200' height='55' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-22' value='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R 19 500&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;19.5%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-54' vertex='1'>
            <mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-55' value='' style='group' parent='1' vertex='1' connectable='0'>
            <mxGeometry x='270' y='201' width='200' height='145' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-16' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-55' vertex='1'>
            <mxGeometry width='200' height='145' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-17' value='Common' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-55' vertex='1'>
            <mxGeometry width='200' height='55' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-18' value='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R&amp;nbsp;&lt;/span&gt;&lt;span&gt;54 806&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;54.8%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-55' vertex='1'>
            <mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-56' value='' style='group' parent='1' vertex='1' connectable='0'>
            <mxGeometry x='30' y='420' width='200' height='145' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-13' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-56' vertex='1'>
            <mxGeometry width='200' height='145' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-14' value='Process' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-56' vertex='1'>
            <mxGeometry width='200' height='55' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-11' value='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R&amp;nbsp;&lt;/span&gt;&lt;span&gt;54 806&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;54.8%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-56' vertex='1'>
            <mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-57' value='' style='group' parent='1' vertex='1' connectable='0'>
            <mxGeometry x='-210' y='419.99999999999994' width='200' height='145' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-5' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-57' vertex='1'>
            <mxGeometry width='200' height='145' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-6' value='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R&amp;nbsp;&lt;/span&gt;&lt;span&gt;54 806&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;54.8%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-57' vertex='1'>
            <mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-12' value='Huawei RAN and Transmission O&amp;amp;M' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-57' vertex='1'>
            <mxGeometry width='200' height='55' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-62' value='' style='group' parent='1' vertex='1' connectable='0'>
            <mxGeometry x='750' y='640' width='200' height='145' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-59' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-62' vertex='1'>
            <mxGeometry width='200' height='145' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-60' value='Network Monitoring Effectiveness' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-62' vertex='1'>
            <mxGeometry width='200' height='55' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-61' value='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R 0&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;0.0%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-62' vertex='1'>
            <mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-68' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-59' target='y3w0JNk_32n-TRd_Wrkm-65' edge='1'>
            <mxGeometry width='50' height='50' relative='1' as='geometry'>
              <mxPoint x='760' y='522.5' as='sourcePoint'/>
              <mxPoint x='720' y='426.66666666666674' as='targetPoint'/>
            </mxGeometry>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-73' value='' style='group' parent='1' vertex='1' connectable='0'>
            <mxGeometry x='510' y='640' width='200' height='145' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-65' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-73' vertex='1'>
            <mxGeometry width='200' height='145' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-66' value='Supervision' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-73' vertex='1'>
            <mxGeometry width='200' height='55' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-67' value='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R 0&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;0.0%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-73' vertex='1'>
            <mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-74' value='' style='group' parent='1' vertex='1' connectable='0'>
            <mxGeometry x='270' y='640' width='200' height='145' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-70' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-74' vertex='1'>
            <mxGeometry width='200' height='145' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-71' value='Front Office' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-74' vertex='1'>
            <mxGeometry width='200' height='55' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-72' value='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R 0&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;0.0%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-74' vertex='1'>
            <mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-75' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-65' target='y3w0JNk_32n-TRd_Wrkm-70' edge='1'>
            <mxGeometry width='50' height='50' relative='1' as='geometry'>
              <mxPoint x='760.166666666667' y='722.5' as='sourcePoint'/>
              <mxPoint x='720' y='722.5' as='targetPoint'/>
            </mxGeometry>
          </mxCell>
          <mxCell id='y3w0JNk_32n-TRd_Wrkm-76' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;exitX=0;exitY=0.5;exitDx=0;exitDy=0;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-70' target='y3w0JNk_32n-TRd_Wrkm-13' edge='1'>
            <mxGeometry width='50' height='50' relative='1' as='geometry'>
              <mxPoint x='280' y='284' as='sourcePoint'/>
              <mxPoint x='240' y='503' as='targetPoint'/>
            </mxGeometry>
          </mxCell>
        </root>
      </mxGraphModel>
      `
        this.setState({ data: xml })
        this.LoadGraph()
  }

  LoadGraph () {
    var container = ReactDOM.findDOMNode(this.refs.divPenaltyGraph)

    // Checks if the browser is supported
    if (!mxClient.isBrowserSupported()) {
      // Displays an error message if the browser is not supported.
      mxUtils.error('Browser is not supported!', 200, false)
    } else {
      // Disables the built-in context menu
      mxEvent.disableContextMenu(container)

      // Creates the graph inside the given container
      var graph = new mxGraph(container)
      // Enables rubberband selection
      new mxRubberband(graph)

      var options = {
        attributeNamePrefix: '',
        textNodeName: '#text',
        ignoreAttributes: false,
        ignoreNameSpace: false,
        allowBooleanAttributes: false,
        parseNodeValue: true,
        parseAttributeValue: true,
        trimValues: true,
        cdataTagName: '__cdata', // default is 'false'
        cdataPositionChar: '\\c',
        localeRange: '', // To support non english character in tag/attribute values.
        parseTrueNumberOnly: false
    }

    if (parser.validate(this.state.data) === true) { // optional (it'll return an object in case it's not valid)
        var jsonObj = parser.parse(this.state.data, options)
    }
      // Gets the default parent for inserting new cells. This is normally the first
      // child of the root (ie. layer 0).
      var parent = graph.getDefaultParent()

      // Enables tooltips, new connections and panning
      graph.setPanning(true)
      graph.setTooltips(true)
      graph.setConnectable(true)
      graph.setEnabled(true)
      graph.setEdgeLabelsMovable(false)
      graph.setVertexLabelsMovable(false)
      graph.setGridEnabled(true)
      graph.setAllowDanglingEdges(false)

      graph.getModel().beginUpdate()
      try {
        // mxGrapg component
        var doc = mxUtils.createXmlDocument()
        var node = doc.createElement('Node')
        node.setAttribute('ComponentID', '[P01]')

        const items = []
          jsonObj.mxGraphModel.root.mxCell.forEach(cell => {
            if (cell.value) {
              const vertexObj = {}

              let vertex = graph.insertVertex(
                parent,
                cell.id,
                cell.value,
                cell.mxGeometry.x,
                cell.mxGeometry.y,
                cell.mxGeometry.width,
                cell.mxGeometry.height,
                cell.style
              )
              vertexObj[cell.id] = vertex
              items.push(vertexObj)
            }
          })
          const mxCellCount = jsonObj.mxGraphModel.root.mxCell.length

          for (let i = 0; i <= mxCellCount; i++) {
            const cell = jsonObj.mxGraphModel.root.mxCell[i]
            if (!cell.value) {
              let sourceObject = items.filter(vertex => {
                return Object.keys(vertex) === cell.source
              })[0]
              let source = sourceObject ? sourceObject[cell['source']] : null

              let targetObject = items.filter(vertex => {
                return Object.keys(vertex) === cell.target
              })[0]
              let target = targetObject ? cell['target'] : null

              graph.insertEdge(
                parent,
                null,
                '',
                source,
                target
              )
            }
          }

        // data
      } finally {
        // Updates the display
        graph.getModel().endUpdate()
      }

      // Enables rubberband (marquee) selection and a handler for basic keystrokes
      new mxRubberband(graph)
      new mxKeyHandler(graph)
    }
  }
  render () {
    return (
      <div className='graph-container' ref='divPenaltyGraph' id='divPenaltyGraph' />
    )
  }
}

export default mxGraphGridAreaEditor

Please Note :- The same XML works on draw.io and I am not able to catch the error in my code so any assistance in this will be appreciated

Asare

Answer 1

I was facing same trouble since I couldn't find a working way to decode xml to graph model. But an available workaround is here:

function parseXmlToGraph(xmlDoc, graph) {
  const cells = xmlDoc.documentElement.children[0].children
  const parent = graph.getDefaultParent()
  for (let i = 0; i < cells.length; i++) {
    const cellAttrs = cells[i].attributes
    if (cellAttrs.vertex) { // is vertex
      const vertexName = cellAttrs.value.value
      const vertexId = Number(cellAttrs.id.value) 
      const geom = cells[i].children[0].attributes
      const xPos = Number(geom.x.value)
      const yPos = Number(geom.y.value)
      const height = Number(geom.height.value)
      const width = Number(geom.width.value)
      graph.insertVertex(parent, vertexId, vertexName, xPos, yPos, width, height)
    } else if (cellAttrs.edge) { //is edge
      const edgeName = cellAttrs.value.value
      const edgeId = Number(cellAttrs.id.value)
      const source = Number(cellAttrs.source.value)
      const target = Number(cellAttrs.target.value)
      graph.insertEdge(parent, edgeId, edgeName,
        graph.getModel().getCell(source), 
        graph.getModel().getCell(target)
      )
    }
  }
}

And using so would be like (supposing you have a graph):

const doc = mxUtils.parseXml(myXmlString) //yields xml object
parseXmlToGraph(doc, graph)

Regards

EDIT

As pointed by nbatolov's comment problem resides in the fact there is no such mx* functions in window (global object) at runtime, e.g., in your case, apparently, window is missing some functions, such as mxGraph(), mxGraphModel(), mxCodec(), etc. Then you could add them to your window before running mxCodec's decode function with

window.['mxCodec'] = mxgraph.mxCodec

where mxgraph is your start-point to use mxGraph's functions and objects.

Funnyman

I am getting the output but it is not correct , when I paste the XML in draw.io it is entirely different.. can you suggest me the changes that can make my code work – Asare

The edge does not have value for source and target – Honduras

Answer 2

If the format of your xml is like <root><mxCell id="2" value="Hello," vertex="1"><mxGeometry x="20" y="20" width="80" height="30" as="geometry"/></mxCell> ..... here is a workaround to import the xml into your mxGraph object

var graph = new mxGraph(container)
let doc = mxUtils.parseXml(xml);
let codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());
let elt = doc.documentElement.firstChild;
let cells = [];
while (elt != null)
{  
    let cell = codec.decode(elt)
    if(cell != undefined){
        if(cell.geometry != undefined){
            if(cell.id != undefined && cell.parent != undefined && (cell.id == cell.parent)){
                elt = elt.nextSibling;
                continue;
            }
            cells.push(cell);
        }
    }
    elt = elt.nextSibling;
}
graph.addCells(cells);

Alexandrina

Answer 3

I got mxgraph Error: Missing constructor for node.

    unserialize(xml: string){
        let doc = mxUtils.parseXml(xml);
        let dec = new mxCodec(doc);
        var elt = doc.documentElement.firstChild;
        var cells = [];

        while (elt != null)
        {
            cells.push(dec.decodeCell(elt));
            elt = elt.nextSibling;
        }

        Viewer.graph.addCells(cells, this.layer);
    }

Be careful of dec.decodeCell, if your vertex is , it will report the error before. you should use dec.decode method. you can do like this:

    unserialize(xml: string){
        let doc = mxUtils.parseXml(xml);
        let dec = new mxCodec(doc);
        var elt = doc.documentElement.firstChild;
        var cells = [];

        while (elt != null)
        {
            if(mxUtils.isNode(elt, 'node')){
                cells.push(dec.decodeCell(elt));
            }if(mxUtils.isNode(elt, 'mxCell')){
                cells.push(dec.decode(elt));
            }
            elt = elt.nextSibling;
        }

        Viewer.graph.addCells(cells, this.layer);
    }

but this will remove parent children Inheritance structure. XML source code had better to has only node.

Replicate