cleanups and bugfixes

src/pages/Animation.js

@@ -5,7 +5,7 @@
 
 import React from 'react';
 import mxGraph from '../mxgraph/view/mxGraph';
-import mxPoint from "../mxgraph/util/mxPoint";
+import mxPoint from '../mxgraph/util/mxPoint';
 
 class Animation extends React.Component {
   constructor(props) {
@@ -17,9 +17,8 @@ class Animation extends React.Component {
     return (
       <>
         <h1>Animation</h1>
-        This example demonstrates using
+        This example demonstrates using SVG animations on edges to visualize the
-        SVG animations on edges to visualize the flow in a pipe.
+        flow in a pipe.
-
         <div
           ref={el => {
             this.el = el;

src/pages/AutoLayout.js

@@ -70,7 +70,7 @@ class AutoLayout extends React.Component {
             );
           });
         }
-      };
+      }
     }
 
     class MyCustomEdgeHandler extends mxEdgeHandler {

src/pages/Collapse.js

@@ -6,6 +6,7 @@
 import React from 'react';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRectangle from '../mxgraph/util/mxRectangle';
+import mxGraphModel from '../mxgraph/model/mxGraphModel';
 
 class Collapse extends React.Component {
   constructor(props) {
@@ -17,9 +18,8 @@ class Collapse extends React.Component {
     return (
       <>
         <h1>Collapse</h1>
-        This example demonstrates changing
+        This example demonstrates changing the style of a cell based on its
-        the style of a cell based on its collapsed state.
+        collapsed state.
-
         <div
           ref={el => {
             this.el = el;
@@ -37,44 +37,42 @@ class Collapse extends React.Component {
   };
 
   componentDidMount = () => {
-    const graph = new mxGraph(this.el);
+    class MyCustomModel extends mxGraphModel {
+      getStyle(cell) {
+        // Extends mxGraphModel.getStyle to show an image when collapsed
+        if (cell != null) {
+          let style = super.getStyle(cell);
+          if (this.isCollapsed(cell)) {
+            style =
+              `${style};shape=image;image=http://www.jgraph.com/images/mxgraph.gif;` +
+              `noLabel=1;imageBackground=#C3D9FF;imageBorder=#6482B9`;
+          }
+          return style;
+        }
+        return null;
+      }
+    }
+
+    const graph = new mxGraph(this.el, new MyCustomModel());
     const parent = graph.getDefaultParent();
 
-    // Extends mxGraphModel.getStyle to show an image when collapsed
+    graph.batchUpdate(() => {
-    const modelGetStyle = graph.model.getStyle;
+      const v1 = graph.insertVertex({
-    graph.model.getStyle = function(cell) {
-      if (cell != null) {
-        let style = modelGetStyle.apply(this, arguments);
-
-        if (this.isCollapsed(cell)) {
-          style =
-            `${style};shape=image;image=http://www.jgraph.com/images/mxgraph.gif;` +
-            `noLabel=1;imageBackground=#C3D9FF;imageBorder=#6482B9`;
-        }
-
-        return style;
-      }
-
-      return null;
-    };
-
-    graph.getModel().beginUpdate();
-    try {
-      const v1 = graph.insertVertex(
         parent,
-        null,
+        value: 'Container',
-        'Container',
+        position: [20, 20],
-        20,
+        size: [200, 200],
-        20,
+        style: 'shape=swimlane;startSize=20;',
-        200,
+      });
-        200,
-        'shape=swimlane;startSize=20;'
-      );
       v1.geometry.alternateBounds = new mxRectangle(0, 0, 110, 70);
-      const v11 = graph.insertVertex(v1, null, 'Hello,', 10, 40, 120, 80);
+
-    } finally {
+      const v11 = graph.insertVertex({
-      graph.getModel().endUpdate();
+        parent: v1,
-    }
+        value: 'Hello,',
+        position: [10, 40],
+        size: [120, 80],
+      });
+    });
   };
 }
 

src/pages/Constituent.js

@@ -7,7 +7,7 @@ import React from 'react';
 import mxEvent from '../mxgraph/util/mxEvent';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
-import mxGraphHandler from "../mxgraph/handler/mxGraphHandler";
+import mxGraphHandler from '../mxgraph/handler/mxGraphHandler';
 
 class Constituent extends React.Component {
   constructor(props) {
@@ -19,9 +19,7 @@ class Constituent extends React.Component {
     return (
       <>
         <h1>Constituent</h1>
-        This example demonstrates using
+        This example demonstrates using cells as parts of other cells.
-        cells as parts of other cells.
-
         <div
           ref={el => {
             this.el = el;
@@ -39,6 +37,9 @@ class Constituent extends React.Component {
   };
 
   componentDidMount() {
+    // Disables the built-in context menu
+    mxEvent.disableContextMenu(this.el);
+
     class MyCustomGraphHandler extends mxGraphHandler {
       /**
        * Redirects start drag to parent.
@@ -52,9 +53,6 @@ class Constituent extends React.Component {
       }
     }
 
-    // Disables the built-in context menu
-    mxEvent.disableContextMenu(this.el);
-
     class MyCustomGraph extends mxGraph {
       foldingEnabled = false;
 
@@ -89,23 +87,20 @@ class Constituent extends React.Component {
     const parent = graph.getDefaultParent();
 
     // Adds cells to the model in a single step
-    graph.getModel().beginUpdate();
+    graph.batchUpdate(() => {
-    try {
+      const v1 = graph.insertVertex({
-      const v1 = graph.insertVertex(parent, null, '', 20, 20, 120, 70);
+        parent,
-      const v2 = graph.insertVertex(
+        position: [20, 20],
-        v1,
+        size: [120, 70],
-        null,
+      });
-        'Constituent',
+      const v2 = graph.insertVertex({
-        20,
+        parent: v1,
-        20,
+        value: 'Constituent',
-        80,
+        position: [20, 20],
-        30,
+        size: [80, 30],
-        'constituent=1;'
+        style: 'constituent=1;',
-      );
+      });
-    } finally {
+    });
-      // Updates the display
-      graph.getModel().endUpdate();
-    }
   }
 }
 

src/pages/ContextIcons.js

@@ -21,9 +21,8 @@ class ContextIcons extends React.Component {
     return (
       <>
         <h1>Context icons</h1>
-        This example demonstrates adding
+        This example demonstrates adding icons to selected vertices to carry out
-        icons to selected vertices to carry out special operations.
+        special operations.
-
         <div
           ref={el => {
             this.el = el;

src/pages/DragSource.js

@@ -11,9 +11,9 @@ import mxCell from '../mxgraph/model/mxCell';
 import mxGeometry from '../mxgraph/model/mxGeometry';
 import mxUtils from '../mxgraph/util/mxUtils';
 import mxDragSource from '../mxgraph/util/mxDragSource';
-import mxGraphHandler from "../mxgraph/handler/mxGraphHandler";
+import mxGraphHandler from '../mxgraph/handler/mxGraphHandler';
-import mxGuide from "../mxgraph/util/mxGuide";
+import mxGuide from '../mxgraph/util/mxGuide';
-import mxEdgeHandler from "../mxgraph/handler/mxEdgeHandler";
+import mxEdgeHandler from '../mxgraph/handler/mxEdgeHandler';
 
 class DragSource extends React.Component {
   constructor(props) {
@@ -25,9 +25,8 @@ class DragSource extends React.Component {
     return (
       <>
         <h1>Dragsource</h1>
-        This example demonstrates using one drag source
+        This example demonstrates using one drag source for multiple graphs and
-        for multiple graphs and changing the drag icon.
+        changing the drag icon.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Drop.js

@@ -20,9 +20,8 @@ class Drop extends React.Component {
     return (
       <>
         <h1>Drop</h1>
-        This example demonstrates handling native drag and
+        This example demonstrates handling native drag and drop of images
-        drop of images (requires modern browser).
+        (requires modern browser).
-
         <div
           ref={el => {
             this.el = el;

src/pages/DynamicLoading.js

@@ -23,9 +23,8 @@ class DynamicLoading extends React.Component {
     return (
       <>
         <h1>Dynamic loading</h1>
-        This example demonstrates loading graph model data
+        This example demonstrates loading graph model data dynamically to limit
-        dynamically to limit the number of cells in the model.
+        the number of cells in the model.
-
         <div
           ref={el => {
             this.el = el;

src/pages/DynamicStyle.js

@@ -19,9 +19,8 @@ class DynamicStyle extends React.Component {
     return (
       <>
         <h1>Dynamic Style</h1>
-        This example demonstrates changing the style of a cell
+        This example demonstrates changing the style of a cell dynamically by
-        dynamically by overriding mxGraphModel.getStyle.
+        overriding mxGraphModel.getStyle.
-
         <div
           ref={el => {
             this.el = el;

src/pages/DynamicToolbar.js

@@ -26,9 +26,7 @@ class DynamicToolbar extends React.Component {
     return (
       <>
         <h1>Toolbar</h1>
-        This example demonstrates changing the state
+        This example demonstrates changing the state of the toolbar at runtime.
-        of the toolbar at runtime.
-
         <div
           ref={el => {
             this.el = el;
@@ -37,7 +35,7 @@ class DynamicToolbar extends React.Component {
             overflow: 'hidden',
             height: '241px',
             background: "url('editors/images/grid.gif')",
-            position: "relative"
+            position: 'relative',
           }}
         />
       </>

src/pages/EdgeTolerance.js

@@ -18,9 +18,8 @@ class EdgeTolerance extends React.Component {
     return (
       <>
         <h1>Edge tolerance</h1>
-        This example demonstrates increasing
+        This example demonstrates increasing the tolerance for hit detection on
-        the tolerance for hit detection on edges.
+        edges.
-
         <div
           ref={el => {
             this.el = el;
@@ -37,7 +36,7 @@ class EdgeTolerance extends React.Component {
   }
 
   componentDidMount() {
-    let el = this.el;
+    const { el } = this;
 
     class MyCustomGraph extends mxGraph {
       fireMouseEvent(evtName, me, sender) {
@@ -73,7 +72,7 @@ class EdgeTolerance extends React.Component {
         }
 
         super.fireMouseEvent(evtName, me, sender);
-      };
+      }
 
       dblClick(evt, cell) {
         // Overrides double click handling to use the tolerance
@@ -87,7 +86,7 @@ class EdgeTolerance extends React.Component {
         }
 
         super.dblClick(evt, cell);
-      };
+      }
     }
 
     // Creates the graph inside the given container

src/pages/Editing.js

@@ -19,11 +19,12 @@ class Editing extends React.Component {
     return (
       <>
         <h1>Editing</h1>
-        This example demonstrates using the in-place
+        This example demonstrates using the in-place editor trigger to specify
-        editor trigger to specify the editing value and write the new value into
+        the editing value and write the new value into a specific field of the
-        a specific field of the user object. Wrapping and DOM nodes as labels are
+        user object. Wrapping and DOM nodes as labels are also demonstrated
-        also demonstrated here.<br/><br/>
+        here.
-
+        <br />
+        <br />
         Double-click the upper/lower half of the cell to edit different fields
         of the user object.
         <div
@@ -39,7 +40,7 @@ class Editing extends React.Component {
         />
       </>
     );
-  };
+  }
 
   componentDidMount() {
     class MyCustomGraph extends mxGraph {

src/pages/Events.js

@@ -27,14 +27,12 @@ class Events extends React.Component {
     return (
       <>
         <h1>Events</h1>
-        Events. This example demonstrates creating
+        Events. This example demonstrates creating a graph container and using
-        a graph container and using the mxDivResizer to update the size,
+        the mxDivResizer to update the size, interaction on the graph, including
-        interaction on the graph, including marquee selection, custom
+        marquee selection, custom tooltips, context menu handling and changing
-        tooltips, context menu handling and changing the default menu
+        the default menu opacity. It also demonstrates how to use an edgestyle
-        opacity. It also demonstrates how to use an edgestyle in the
+        in the default stylesheet, and handle the doubleclick on the adjustment
-        default stylesheet, and handle the doubleclick on the adjustment
         point. See also: overlays.html for click event handling.
-
         <div
           ref={el => {
             this.el = el;
@@ -43,7 +41,7 @@ class Events extends React.Component {
         />
       </>
     );
-  };
+  }
 
   componentDidMount() {
     // Program starts here. Creates a sample graph in the dynamically

src/pages/ExtendCanvas.js

@@ -21,9 +21,8 @@ class ExtendCanvas extends React.Component {
     return (
       <>
         <h1>Extend canvas</h1>
-        This example demonstrates implementing
+        This example demonstrates implementing an infinite canvas with
-        an infinite canvas with scrollbars.
+        scrollbars.
-
         <div
           ref={el => {
             this.el = el;

src/pages/FileIO.js

@@ -6,14 +6,14 @@
 import React from 'react';
 import mxEvent from '../mxgraph/util/mxEvent';
 import mxGraph from '../mxgraph/view/mxGraph';
-import mxCellTracker from "../mxgraph/handler/mxCellTracker";
+import mxCellTracker from '../mxgraph/handler/mxCellTracker';
-import mxConstants from "../mxgraph/util/mxConstants";
+import mxConstants from '../mxgraph/util/mxConstants';
-import mxUtils from "../mxgraph/util/mxUtils";
+import mxUtils from '../mxgraph/util/mxUtils';
-import mxFastOrganicLayout from "../mxgraph/layout/mxFastOrganicLayout";
+import mxFastOrganicLayout from '../mxgraph/layout/mxFastOrganicLayout';
-import mxEventObject from "../mxgraph/util/mxEventObject";
+import mxEventObject from '../mxgraph/util/mxEventObject';
-import mxCodec from "../mxgraph/io/mxCodec";
+import mxCodec from '../mxgraph/io/mxCodec';
-import mxPerimeter from "../mxgraph/view/mxPerimeter";
+import mxPerimeter from '../mxgraph/view/mxPerimeter';
-import mxClient from "../mxgraph/mxClient";
+import mxClient from '../mxgraph/mxClient';
 
 class FileIO extends React.Component {
   constructor(props) {
@@ -25,10 +25,8 @@ class FileIO extends React.Component {
     return (
       <>
         <h1>File I/O</h1>
-        This example demonstrates reading an
+        This example demonstrates reading an XML file, writing a custom parser,
-        XML file, writing a custom parser, applying an automatic layout and
+        applying an automatic layout and defining a 2-way edge.
-        defining a 2-way edge.
-
         <div
           ref={el => {
             this.el = el;

src/pages/FixedIcon.js

@@ -6,10 +6,10 @@
 import React from 'react';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
-import mxUtils from "../mxgraph/util/mxUtils";
+import mxUtils from '../mxgraph/util/mxUtils';
-import mxConstants from "../mxgraph/util/mxConstants";
+import mxConstants from '../mxgraph/util/mxConstants';
-import mxLabel from "../mxgraph/shape/mxLabel";
+import mxLabel from '../mxgraph/shape/mxLabel';
-import mxRectangle from "../mxgraph/util/mxRectangle";
+import mxRectangle from '../mxgraph/util/mxRectangle';
 
 class FixedIcon extends React.Component {
   constructor(props) {
@@ -21,9 +21,8 @@ class FixedIcon extends React.Component {
     return (
       <>
         <h1>Fixed icon</h1>
-        This example demonstrates
+        This example demonstrates customizing the icon position in the mxLabel
-        customizing the icon position in the mxLabel shape.
+        shape.
-
         <div
           ref={el => {
             this.el = el;

src/pages/FixedPoints.js

@@ -24,9 +24,8 @@ class FixedPoints extends React.Component {
     return (
       <>
         <h1>Fixed points</h1>
-        This example demonstrates using
+        This example demonstrates using fixed connection points for connecting
-        fixed connection points for connecting edges to vertices.
+        edges to vertices.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Folding.js

@@ -20,8 +20,8 @@ class Folding extends React.Component {
     return (
       <>
         <h1>Folding</h1>
-        This example demonstrates using a layout to implement a nested group structure.
+        This example demonstrates using a layout to implement a nested group
-
+        structure.
         <div
           ref={el => {
             this.el = el;

src/pages/Grid.js

@@ -22,9 +22,8 @@ class Grid extends React.Component {
     return (
       <>
         <h1>Grid</h1>
-        This example demonstrates drawing
+        This example demonstrates drawing a grid dynamically using HTML 5
-        a grid dynamically using HTML 5 canvas.
+        canvas.
-
         <div
           ref={el => {
             this.el = el;
@@ -169,7 +168,7 @@ class Grid extends React.Component {
               ctx.stroke();
             }
           }
-        }
+        };
       } catch (e) {
         mxLog.show();
         mxLog.debug('Using background image');

src/pages/Groups.js

@@ -6,8 +6,8 @@
 import React from 'react';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
-import mxGraphHandler from "../mxgraph/handler/mxGraphHandler";
+import mxGraphHandler from '../mxgraph/handler/mxGraphHandler';
-import mxPopupMenuHandler from "../mxgraph/handler/mxPopupMenuHandler";
+import mxPopupMenuHandler from '../mxgraph/handler/mxPopupMenuHandler';
 
 class Groups extends React.Component {
   constructor(props) {
@@ -19,9 +19,7 @@ class Groups extends React.Component {
     return (
       <>
         <h1>Hello, World!</h1>
-        This example demonstrates using
+        This example demonstrates using cells as parts of other cells.
-        cells as parts of other cells.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Guides.js

@@ -23,12 +23,11 @@ class Guides extends React.Component {
     return (
       <>
         <h1>Guides</h1>
-        This example demonstrates the guides
+        This example demonstrates the guides feature which aligns the current
-        feature which aligns the current selection to the existing vertices
+        selection to the existing vertices in the graph. This feature is in RFC
-        in the graph. This feature is in RFC state. Creating a grid using
+        state. Creating a grid using a canvas and installing a key handler for
-        a canvas and installing a key handler for cursor keys is also
+        cursor keys is also demonstrated here, as well as snapping waypoints to
-        demonstrated here, as well as snapping waypoints to terminals.
+        terminals.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Handles.js

@@ -25,8 +25,8 @@ class Handles extends React.Component {
     return (
       <>
         <h1>Handles</h1>
-        This example demonstrates using mxHandle to change custom styles interactively.
+        This example demonstrates using mxHandle to change custom styles
-
+        interactively.
         <div
           ref={el => {
             this.el = el;

src/pages/HelloPort.js

@@ -23,9 +23,8 @@ class HelloPort extends React.Component {
     return (
       <>
         <h1>Hello, World!</h1>
-        This example demonstrates using
+        This example demonstrates using the isPort hook for visually connecting
-        the isPort hook for visually connecting to another cell.
+        to another cell.
-
         <div
           ref={el => {
             this.el = el;

src/pages/HelloWorld.js

@@ -1,5 +1,5 @@
 /*
- *  Copyright (c) 2006-2018, JGraph Ltd
+ * Copyright (c) 2006-2018, JGraph Ltd
  * Converted to ES9 syntax/React by David Morrissey 2021
  */
 
@@ -18,9 +18,8 @@ class HelloWorld extends React.Component {
     return (
       <>
         <h1>Hello, World!</h1>
-        This example demonstrates using
+        This example demonstrates using a DOM node to create a graph and adding
-        a DOM node to create a graph and adding vertices and edges.
+        vertices and edges.
-
         <div
           ref={el => {
             this.el = el;
@@ -38,9 +37,6 @@ class HelloWorld extends React.Component {
   };
 
   componentDidMount = () => {
-    // FIXME!!
-    const mxBasePath = '../src';
-
     // Create a sample graph in the DOM node with the specified ID.
     mxEvent.disableContextMenu(this.el); // Disable the built-in context menu
     const graph = new mxGraph(this.el); // Create the graph inside the given container

src/pages/HierarchicalLayout.js

@@ -11,7 +11,7 @@ import mxHierarchicalLayout from '../mxgraph/layout/hierarchical/mxHierarchicalL
 import mxFastOrganicLayout from '../mxgraph/layout/mxFastOrganicLayout';
 import mxConstants from '../mxgraph/util/mxConstants';
 import mxPerimeter from '../mxgraph/view/mxPerimeter';
-import mxUtils from "../mxgraph/util/mxUtils";
+import mxUtils from '../mxgraph/util/mxUtils';
 
 class HierarchicalLayout extends React.Component {
   constructor(props) {
@@ -23,10 +23,9 @@ class HierarchicalLayout extends React.Component {
     return (
       <>
         <h1>Hierarchical Layout</h1>
-        This example demonstrates the
+        This example demonstrates the use of the hierarchical and organic
-        use of the hierarchical and organic layouts. Note that the hierarchical
+        layouts. Note that the hierarchical layout requires another script tag
-        layout requires another script tag in the head of the page.
+        in the head of the page.
-
         <div
           ref={el => {
             this.el = el;

src/pages/HoverIcons.js

@@ -9,8 +9,8 @@ import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
 import mxConnectionHandler from '../mxgraph/handler/mxConnectionHandler';
 import mxUtils from '../mxgraph/util/mxUtils';
-import mxRectangle from "../mxgraph/util/mxRectangle";
+import mxRectangle from '../mxgraph/util/mxRectangle';
-import mxImage from "../mxgraph/util/mxImage";
+import mxImage from '../mxgraph/util/mxImage';
 
 class HoverIcons extends React.Component {
   constructor(props) {
@@ -22,9 +22,8 @@ class HoverIcons extends React.Component {
     return (
       <>
         <h1>Hover icons</h1>
-        This example demonstrates showing
+        This example demonstrates showing icons on vertices as mouse hovers over
-        icons on vertices as mouse hovers over them.
+        them.
-
         <div
           ref={el => {
             this.el = el;

src/pages/HoverStyle.js

@@ -7,7 +7,7 @@ import React from 'react';
 import mxEvent from '../mxgraph/util/mxEvent';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
-import mxConstants from "../mxgraph/util/mxConstants";
+import mxConstants from '../mxgraph/util/mxConstants';
 
 class HoverStyle extends React.Component {
   constructor(props) {
@@ -19,9 +19,7 @@ class HoverStyle extends React.Component {
     return (
       <>
         <h1>Hoverstyle</h1>
-        This example shows hot to change
+        This example shows hot to change the style of a vertex on mouseover.
-        the style of a vertex on mouseover.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Images.js

@@ -11,7 +11,7 @@ import mxConstants from '../mxgraph/util/mxConstants';
 import mxUtils from '../mxgraph/util/mxUtils';
 import mxRectangle from '../mxgraph/util/mxRectangle';
 import mxImage from '../mxgraph/util/mxImage';
-import mxPerimeter from "../mxgraph/view/mxPerimeter";
+import mxPerimeter from '../mxgraph/view/mxPerimeter';
 
 class Images extends React.Component {
   constructor(props) {
@@ -23,9 +23,8 @@ class Images extends React.Component {
     return (
       <>
         <h1>Images</h1>
-        This example demonstrates using
+        This example demonstrates using background images and images for for the
-        background images and images for for the label- and image-shape.
+        label- and image-shape.
-        
         <div
           ref={el => {
             this.el = el;

src/pages/Indicators.js

@@ -19,10 +19,8 @@ class Indicators extends React.Component {
     return (
       <>
         <h1>Indicators</h1>
-        This example demonstrates the use of
+        This example demonstrates the use of indicators, which are small
-        indicators, which are small subshapes inside a parent shape, typically
+        subshapes inside a parent shape, typically an mxLabel.
-        an mxLabel.
-
         <div
           ref={el => {
             this.el = el;

src/pages/JsonData.js

@@ -29,9 +29,8 @@ class JsonData extends React.Component {
     return (
       <>
         <h1>JSON data</h1>
-        This example demonstrates using
+        This example demonstrates using JSON to encode/decode parts of the graph
-        JSON to encode/decode parts of the graph model in mxCodec.
+        model in mxCodec.
-
         <div
           ref={el => {
             this.el = el;

src/pages/LOD.js

@@ -17,9 +17,7 @@ class LOD extends React.Component {
     return (
       <>
         <h1>Level of detail</h1>
-        This example demonstrates
+        This example demonstrates implementing a level of detail per cell.
-        implementing a level of detail per cell.
-
         <div
           ref={el => {
             this.el = el;

src/pages/LabelPosition.js

@@ -16,9 +16,8 @@ class LabelPosition extends React.Component {
     return (
       <>
         <h1>Label Position</h1>
-        This example demonstrates the use of the
+        This example demonstrates the use of the label position styles to set
-        label position styles to set the position of vertex labels.
+        the position of vertex labels.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Labels.js

@@ -7,8 +7,8 @@ import React from 'react';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
 import mxKeyHandler from '../mxgraph/handler/mxKeyHandler';
-import mxConstants from "../mxgraph/util/mxConstants";
+import mxConstants from '../mxgraph/util/mxConstants';
-import mxRectangle from "../mxgraph/util/mxRectangle";
+import mxRectangle from '../mxgraph/util/mxRectangle';
 
 class Labels extends React.Component {
   constructor(props) {
@@ -20,11 +20,10 @@ class Labels extends React.Component {
     return (
       <>
         <h1>Hello, World!</h1>
-        This example demonstrates the use of wrapping
+        This example demonstrates the use of wrapping and clipping for HTML
-        and clipping for HTML labels of vertices, truncating labels to fit the
+        labels of vertices, truncating labels to fit the size of a vertex, and
-        size of a vertex, and manually placing vertex labels and relative children
+        manually placing vertex labels and relative children that act as
-        that act as "sublabels".
+        "sublabels".
-
         <div
           ref={el => {
             this.el = el;

src/pages/Layers.js

@@ -20,9 +20,7 @@ class Layers extends React.Component {
     return (
       <>
         <h1>Layers</h1>
-        This example demonstrates using
+        This example demonstrates using multiple layers to contain cells.
-        multiple layers to contain cells.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Markers.js

@@ -23,9 +23,8 @@ class Markers extends React.Component {
     return (
       <>
         <h1>Markers</h1>
-        This example demonstrates creating
+        This example demonstrates creating custom markers and customizing the
-        custom markers and customizing the built-in markers.
+        built-in markers.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Merge.js

@@ -6,8 +6,8 @@
 import React from 'react';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
-import mxConstants from "../mxgraph/util/mxConstants";
+import mxConstants from '../mxgraph/util/mxConstants';
-import mxPerimeter from "../mxgraph/view/mxPerimeter";
+import mxPerimeter from '../mxgraph/view/mxPerimeter';
 
 class Merge extends React.Component {
   constructor(props) {
@@ -19,9 +19,8 @@ class Merge extends React.Component {
     return (
       <>
         <h1>Merge</h1>
-        This example demonstrates using
+        This example demonstrates using the mergeChildren function to merge two
-        the mergeChildren function to merge two graphs.
+        graphs.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Monitor.js

@@ -10,8 +10,8 @@ import mxConstants from '../mxgraph/util/mxConstants';
 import mxCellOverlay from '../mxgraph/view/mxCellOverlay';
 import mxUtils from '../mxgraph/util/mxUtils';
 import mxCodec from '../mxgraph/io/mxCodec';
-import mxPerimeter from "../mxgraph/view/mxPerimeter";
+import mxPerimeter from '../mxgraph/view/mxPerimeter';
-import mxEdgeStyle from "../mxgraph/view/mxEdgeStyle";
+import mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';
 
 class Monitor extends React.Component {
   constructor(props) {
@@ -23,9 +23,8 @@ class Monitor extends React.Component {
     return (
       <>
         <h1>mxGraph Workflow Monitor</h1>
-        This example demonstrates using a
+        This example demonstrates using a graph to display the current state of
-        graph to display the current state of a workflow.
+        a workflow.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Morph.js

@@ -20,9 +20,7 @@ class Morph extends React.Component {
     return (
       <>
         <h1>Morph</h1>
-        This example demonstrates using
+        This example demonstrates using mxMorphing for simple cell animations.
-        mxMorphing for simple cell animations.
-
         <div
           ref={el => {
             this.el = el;

src/pages/OffPage.js

@@ -7,8 +7,8 @@ import React from 'react';
 import mxEvent from '../mxgraph/util/mxEvent';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
-import mxCellTracker from "../mxgraph/handler/mxCellTracker";
+import mxCellTracker from '../mxgraph/handler/mxCellTracker';
-import mxConstants from "../mxgraph/util/mxConstants";
+import mxConstants from '../mxgraph/util/mxConstants';
 
 class OffPage extends React.Component {
   constructor(props) {
@@ -20,10 +20,8 @@ class OffPage extends React.Component {
     return (
       <>
         <h1>Offpage connector</h1>
-        This example demonstrates creating
+        This example demonstrates creating offpage connectors in a graph and
-        offpage connectors in a graph and loading a new diagram on a
+        loading a new diagram on a single click.
-        single click.
-
         <div
           ref={el => {
             this.el = el;

src/pages/OrgChart.js

@@ -15,15 +15,15 @@ import mxUtils from '../mxgraph/util/mxUtils';
 import mxCellOverlay from '../mxgraph/view/mxCellOverlay';
 import mxImage from '../mxgraph/util/mxImage';
 import mxPoint from '../mxgraph/util/mxPoint';
-import mxConstants from "../mxgraph/util/mxConstants";
+import mxConstants from '../mxgraph/util/mxConstants';
-import mxWindow from "../mxgraph/util/mxWindow";
+import mxWindow from '../mxgraph/util/mxWindow';
-import mxToolbar from "../mxgraph/util/mxToolbar";
+import mxToolbar from '../mxgraph/util/mxToolbar';
-import mxLayoutManager from "../mxgraph/view/mxLayoutManager";
+import mxLayoutManager from '../mxgraph/view/mxLayoutManager';
-import mxEdgeStyle from "../mxgraph/view/mxEdgeStyle";
+import mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';
-import mxCompactTreeLayout from "../mxgraph/layout/mxCompactTreeLayout";
+import mxCompactTreeLayout from '../mxgraph/layout/mxCompactTreeLayout';
-import mxKeyHandler from "../mxgraph/handler/mxKeyHandler";
+import mxKeyHandler from '../mxgraph/handler/mxKeyHandler';
-import mxClient from "../mxgraph/mxClient";
+import mxClient from '../mxgraph/mxClient';
-import mxOutline from "../mxgraph/view/mxOutline";
+import mxOutline from '../mxgraph/view/mxOutline';
 
 class OrgChart extends React.Component {
   constructor(props) {
@@ -49,6 +49,11 @@ class OrgChart extends React.Component {
             borderColor: 'lightgray',
           }}
         />
+        <div
+          ref={el => {
+            this.el2 = el;
+          }}
+        />
       </>
     );
   }
@@ -238,7 +243,7 @@ class OrgChart extends React.Component {
 
     const content = document.createElement('div');
     content.style.padding = '4px';
-
+    this.el2.appendChild(content);
     const tb = new mxToolbar(content);
 
     tb.addItem('Zoom In', 'images/zoom_in32.png', function(evt) {
@@ -268,12 +273,6 @@ class OrgChart extends React.Component {
       }
     });
 
-    let wnd = new mxWindow('Tools', content, 0, 0, 200, 66, false);
-    wnd.setMaximizable(false);
-    wnd.setScrollable(false);
-    wnd.setResizable(false);
-    wnd.setVisible(true);
-
     // Function to create the entries in the popupmenu
     function createPopupMenu(graph, menu, cell, evt) {
       const model = graph.getModel();

src/pages/Orthogonal.js

@@ -7,13 +7,13 @@ import React from 'react';
 import mxEvent from '../mxgraph/util/mxEvent';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
-import mxGraphHandler from "../mxgraph/handler/mxGraphHandler";
+import mxGraphHandler from '../mxgraph/handler/mxGraphHandler';
-import mxGuide from "../mxgraph/util/mxGuide";
+import mxGuide from '../mxgraph/util/mxGuide';
-import mxEdgeHandler from "../mxgraph/handler/mxEdgeHandler";
+import mxEdgeHandler from '../mxgraph/handler/mxEdgeHandler';
-import mxConnectionHandler from "../mxgraph/handler/mxConnectionHandler";
+import mxConnectionHandler from '../mxgraph/handler/mxConnectionHandler';
-import mxGraphView from "../mxgraph/view/mxGraphView";
+import mxGraphView from '../mxgraph/view/mxGraphView';
-import mxPoint from "../mxgraph/util/mxPoint";
+import mxPoint from '../mxgraph/util/mxPoint';
-import mxCellState from "../mxgraph/view/mxCellState";
+import mxCellState from '../mxgraph/view/mxCellState';
 
 class Orthogonal extends React.Component {
   constructor(props) {
@@ -25,9 +25,8 @@ class Orthogonal extends React.Component {
     return (
       <>
         <h1>Orthogonal</h1>
-        This example demonstrates the use
+        This example demonstrates the use of port constraints and orthogonal
-        of port constraints and orthogonal edge styles and handlers.
+        edge styles and handlers.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Overlays.js

@@ -21,10 +21,8 @@ class Overlays extends React.Component {
     return (
       <>
         <h1>Overlays</h1>
-        This example demonstrates cell
+        This example demonstrates cell highlighting, overlays and handling click
-        highlighting, overlays and handling click and double click
+        and double click events. See also: events.html for more event handling.
-        events. See also: events.html for more event handling.
-
         <div
           ref={el => {
             this.el = el;

src/pages/PageBreaks.js

@@ -7,9 +7,9 @@ import React from 'react';
 import mxEvent from '../mxgraph/util/mxEvent';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
-import mxUtils from "../mxgraph/util/mxUtils";
+import mxUtils from '../mxgraph/util/mxUtils';
-import mxConstants from "../mxgraph/util/mxConstants";
+import mxConstants from '../mxgraph/util/mxConstants';
-import mxPrintPreview from "../mxgraph/view/mxPrintPreview";
+import mxPrintPreview from '../mxgraph/view/mxPrintPreview';
 
 class PageBreaks extends React.Component {
   constructor(props) {
@@ -21,10 +21,8 @@ class PageBreaks extends React.Component {
     return (
       <>
         <h1>Pagebreaks</h1>
-        This example demonstrates using the
+        This example demonstrates using the pageBreaksVisible and preferPageSize
-        pageBreaksVisible and preferPageSize switches and adding headers and
+        switches and adding headers and footers to print output.
-        footers to print output.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Perimeter.js

@@ -7,8 +7,8 @@ import React from 'react';
 import mxEvent from '../mxgraph/util/mxEvent';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
-import mxUtils from "../mxgraph/util/mxUtils";
+import mxUtils from '../mxgraph/util/mxUtils';
-import mxGraphView from "../mxgraph/view/mxGraphView";
+import mxGraphView from '../mxgraph/view/mxGraphView';
 
 class Perimeter extends React.Component {
   constructor(props) {
@@ -20,9 +20,7 @@ class Perimeter extends React.Component {
     return (
       <>
         <h1>Perimeter</h1>
-        This example demonstrates how to
+        This example demonstrates how to avoid edge and label intersections.
-        avoid edge and label intersections.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Permissions.js

@@ -34,9 +34,8 @@ class Permissions extends React.Component {
     return (
       <>
         <h1>Permissions</h1>
-        This example demonstrates creating
+        This example demonstrates creating permissions to define the available
-        permissions to define the available operations a the graph.
+        operations a the graph.
-
         <div
           ref={el => {
             this.el = el;
@@ -45,7 +44,7 @@ class Permissions extends React.Component {
             position: 'relative',
             overflow: 'hidden',
             height: '300px',
-            //background: "url('editors/images/grid.gif')",
+            // background: "url('editors/images/grid.gif')",
           }}
         />
       </>

src/pages/PortRefs.js

@@ -26,12 +26,10 @@ class PortRefs extends React.Component {
     return (
       <>
         <h1>Port References Example</h1>
-        This example demonstrates referencing
+        This example demonstrates referencing connection points by ID. The main
-        connection points by ID. The main difference to the implementation
+        difference to the implementation where the connection point is stored in
-        where the connection point is stored in the connecting edge is that
+        the connecting edge is that changes to the original port will be
-        changes to the original port will be reflected in all existing
+        reflected in all existing connections since they reference that port.
-        connections since they reference that port.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Previews.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState } from 'react';
 
 import SourceCodeDisplay from './SourceCodeDisplay';
 import examplesListing from './examplesListing.json';
@@ -18,8 +18,18 @@ function Preview({ sourceKey, content }) {
           >
             hide source
           </span>
-          <div style={{clear: "both", resize: "both", maxHeight: "50vh", overflow: "auto"}}>
+          <div
-            <SourceCodeDisplay language="javascript" code={examplesListing[sourceKey]||''} />
+            style={{
+              clear: 'both',
+              resize: 'both',
+              maxHeight: '50vh',
+              overflow: 'auto',
+            }}
+          >
+            <SourceCodeDisplay
+              language="javascript"
+              code={examplesListing[sourceKey] || ''}
+            />
           </div>
         </div>
       ) : (

src/pages/RadialTreeLayout.js

@@ -20,10 +20,9 @@ class RadialTreeLayout extends React.Component {
     return (
       <>
         <h1>Hierarchical Layout</h1>
-        This example demonstrates the
+        This example demonstrates the use of the hierarchical and organic
-        use of the hierarchical and organic layouts. Note that the hierarchical
+        layouts. Note that the hierarchical layout requires another script tag
-        layout requires another script tag in the head of the page.
+        in the head of the page.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Resources.js

@@ -20,9 +20,8 @@ class Resources extends React.Component {
     return (
       <>
         <h1>Resources</h1>
-        This example demonstrates disabling the Synchronous
+        This example demonstrates disabling the Synchronous XMLHttpRequest on
-        XMLHttpRequest on main thread warning.
+        main thread warning.
-
         <div
           ref={el => {
             this.el = el;

src/pages/SecondLabel.js

@@ -10,7 +10,7 @@ import mxPoint from '../mxgraph/util/mxPoint';
 import mxRectangle from '../mxgraph/util/mxRectangle';
 import mxConstants from '../mxgraph/util/mxConstants';
 import mxRectangleShape from '../mxgraph/shape/mxRectangleShape';
-import mxText from "../mxgraph/shape/mxText";
+import mxText from '../mxgraph/shape/mxText';
 
 class SecondLabel extends React.Component {
   constructor(props) {
@@ -22,9 +22,7 @@ class SecondLabel extends React.Component {
     return (
       <>
         <h1>Second label</h1>
-        This example demonstrates how to
+        This example demonstrates how to add another string label to vertices.
-        add another string label to vertices.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Shape.js

@@ -7,7 +7,7 @@ import React from 'react';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxConstants from '../mxgraph/util/mxConstants';
 import mxCylinder from '../mxgraph/shape/mxCylinder';
-import mxCellRenderer from "../mxgraph/view/mxCellRenderer";
+import mxCellRenderer from '../mxgraph/view/mxCellRenderer';
 
 class Shape extends React.Component {
   constructor(props) {
@@ -19,9 +19,7 @@ class Shape extends React.Component {
     return (
       <>
         <h1>Shape</h1>
-        This example demonstrates how to
+        This example demonstrates how to implement and use a custom shape.
-        implement and use a custom shape.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Stencils.js

@@ -7,17 +7,17 @@ import React from 'react';
 import mxEvent from '../mxgraph/util/mxEvent';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
-import mxUtils from "../mxgraph/util/mxUtils";
+import mxUtils from '../mxgraph/util/mxUtils';
-import mxConstants from "../mxgraph/util/mxConstants";
+import mxConstants from '../mxgraph/util/mxConstants';
-import mxPoint from "../mxgraph/util/mxPoint";
+import mxPoint from '../mxgraph/util/mxPoint';
-import mxStencilRegistry from "../mxgraph/shape/mxStencilRegistry";
+import mxStencilRegistry from '../mxgraph/shape/mxStencilRegistry';
-import mxCellRenderer from "../mxgraph/view/mxCellRenderer";
+import mxCellRenderer from '../mxgraph/view/mxCellRenderer';
-import mxShape from "../mxgraph/shape/mxShape";
+import mxShape from '../mxgraph/shape/mxShape';
-import mxVertexHandler from "../mxgraph/handler/mxVertexHandler";
+import mxVertexHandler from '../mxgraph/handler/mxVertexHandler';
-import mxCellHighlight from "../mxgraph/handler/mxCellHighlight";
+import mxCellHighlight from '../mxgraph/handler/mxCellHighlight';
-import mxEdgeHandler from "../mxgraph/handler/mxEdgeHandler";
+import mxEdgeHandler from '../mxgraph/handler/mxEdgeHandler';
-import mxConnectionHandler from "../mxgraph/handler/mxConnectionHandler";
+import mxConnectionHandler from '../mxgraph/handler/mxConnectionHandler';
-import mxStencil from "../mxgraph/shape/mxStencil";
+import mxStencil from '../mxgraph/shape/mxStencil';
 
 class Stencils extends React.Component {
   constructor(props) {
@@ -29,10 +29,8 @@ class Stencils extends React.Component {
     return (
       <>
         <h1>Stencils</h1>
-        This example demonstrates using
+        This example demonstrates using an XML file to define new stencils to be
-        an XML file to define new stencils to be used as shapes. See
+        used as shapes. See docs/stencils.xsd for the XML schema file.
-        docs/stencils.xsd for the XML schema file.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Stylesheet.js

@@ -7,7 +7,7 @@ import React from 'react';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxConstants from '../mxgraph/util/mxConstants';
 import mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';
-import mxPerimeter from "../mxgraph/view/mxPerimeter";
+import mxPerimeter from '../mxgraph/view/mxPerimeter';
 
 class Stylesheet extends React.Component {
   constructor(props) {
@@ -19,11 +19,9 @@ class Stylesheet extends React.Component {
     return (
       <>
         <h1>Stylesheet</h1>
-        This example demonstrates using
+        This example demonstrates using a custom stylesheet and control points
-        a custom stylesheet and control points in edges, as well as
+        in edges, as well as overriding the getLabel and getTooltip function to
-        overriding the getLabel and getTooltip function to return
+        return dynamic information, and making a supercall in JavaScript.
-        dynamic information, and making a supercall in JavaScript.
-
         <div
           ref={el => {
             this.el = el;

src/pages/SwimLanes.js

@@ -17,8 +17,8 @@ import mxUtils from '../mxgraph/util/mxUtils';
 import mxEditor from '../mxgraph/editor/mxEditor';
 import mxConnectionHandler from '../mxgraph/handler/mxConnectionHandler';
 import mxImage from '../mxgraph/util/mxImage';
-import mxLayoutManager from "../mxgraph/view/mxLayoutManager";
+import mxLayoutManager from '../mxgraph/view/mxLayoutManager';
-import mxEdgeStyle from "../mxgraph/view/mxEdgeStyle";
+import mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';
 
 class SwimLanes extends React.Component {
   constructor(props) {
@@ -30,11 +30,9 @@ class SwimLanes extends React.Component {
     return (
       <>
         <h1>Swimlanes</h1>
-        This example demonstrates using
+        This example demonstrates using swimlanes for pools and lanes and adding
-        swimlanes for pools and lanes and adding cells and edges between
+        cells and edges between them. This also demonstrates using the stack
-        them. This also demonstrates using the stack layout as an
+        layout as an automatic layout.
-        automatic layout.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Template.js

@@ -11,8 +11,8 @@
 import React from 'react';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
-import mxUtils from "../mxgraph/util/mxUtils";
+import mxUtils from '../mxgraph/util/mxUtils';
-import mxCodec from "../mxgraph/io/mxCodec";
+import mxCodec from '../mxgraph/io/mxCodec';
 
 class Template extends React.Component {
   constructor(props) {
@@ -32,28 +32,26 @@ class Template extends React.Component {
             overflow: 'hidden',
             position: 'relative',
             height: '241px',
-            background: "url('/mxgraph/javascript/examples/editors/images/grid.gif')",
+            background:
-            cursor: 'default'
+              "url('/mxgraph/javascript/examples/editors/images/grid.gif')",
+            cursor: 'default',
           }}
         />
       </>
     );
-  };
+  }
 
   componentDidMount() {
     // Creates the graph inside the given container
-    let graph = new mxGraph(this.el);
+    const graph = new mxGraph(this.el);
 
     // Adds rubberband selection to the graph
     new mxRubberband(graph);
 
-    let doc = mxUtils.parseXml(xml);
+    const doc = mxUtils.parseXml(xml);
-    let codec = new mxCodec(doc);
+    const codec = new mxCodec(doc);
     codec.decode(doc.documentElement, graph.getModel());
-  };
+  }
 }
 
 export default Template;
-
-
-

src/pages/Thread.js

@@ -16,9 +16,8 @@ class Thread extends React.Component {
     return (
       <>
         <h1>Thread</h1>
-        This example demonstrates setting
+        This example demonstrates setting overlays in mxGraph from within a
-        overlays in mxGraph from within a timed function.
+        timed function.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Toolbar.js

@@ -26,9 +26,8 @@ class Toolbar extends React.Component {
     return (
       <>
         <h1>Toolbar</h1>
-        This example demonstrates using
+        This example demonstrates using existing cells as templates for creating
-        existing cells as templates for creating new cells.
+        new cells.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Tree.js

@@ -29,9 +29,7 @@ class Tree extends React.Component {
     return (
       <>
         <h1>Tree</h1>
-        This example demonstrates folding
+        This example demonstrates folding of subtrees in a acyclic graph (tree).
-        of subtrees in a acyclic graph (tree).
-
         <div
           ref={el => {
             this.el = el;
@@ -41,7 +39,7 @@ class Tree extends React.Component {
             overflow: 'hidden',
             height: '400px',
             background: "url('editors/images/grid.gif')",
-            cursor: 'default'
+            cursor: 'default',
           }}
         />
       </>

src/pages/UserObject.js

@@ -7,13 +7,13 @@ import React from 'react';
 import mxEvent from '../mxgraph/util/mxEvent';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
-import mxUtils from "../mxgraph/util/mxUtils";
+import mxUtils from '../mxgraph/util/mxUtils';
-import mxConstants from "../mxgraph/util/mxConstants";
+import mxConstants from '../mxgraph/util/mxConstants';
-import mxForm from "../mxgraph/util/mxForm";
+import mxForm from '../mxgraph/util/mxForm';
-import mxCellAttributeChange from "../mxgraph/model/atomic_changes/mxCellAttributeChange";
+import mxCellAttributeChange from '../mxgraph/model/atomic_changes/mxCellAttributeChange';
-import mxKeyHandler from "../mxgraph/handler/mxKeyHandler";
+import mxKeyHandler from '../mxgraph/handler/mxKeyHandler';
-import mxRectangle from "../mxgraph/util/mxRectangle";
+import mxRectangle from '../mxgraph/util/mxRectangle';
-import mxEdgeStyle from "../mxgraph/view/mxEdgeStyle";
+import mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';
 
 class UserObject extends React.Component {
   constructor(props) {
@@ -25,38 +25,43 @@ class UserObject extends React.Component {
     return (
       <>
         <h1>User object</h1>
-        This example demonstrates using
+        This example demonstrates using XML objects as values for cells.
-        XML objects as values for cells.
+        <table
-
+          style={{
-        <table style={{
+            position: 'relative',
-          position: 'relative'
+          }}
-        }}>
+        >
           <tr>
             <td>
               <div
-                ref={el => {this.el = el;}}
+                ref={el => {
+                  this.el = el;
+                }}
                 style={{
                   border: 'solid 1px black',
                   overflow: 'hidden',
                   height: '241px',
-                  cursor: 'default'
+                  cursor: 'default',
                 }}
               />
             </td>
             <td valign="top">
               <div
-                ref={el => {this.propertiesEl = el;}}
+                ref={el => {
+                  this.propertiesEl = el;
+                }}
                 style={{
                   border: 'solid 1px black',
-                  padding: '10px'
+                  padding: '10px',
                 }}
               />
             </td>
           </tr>
         </table>
-
         <div
-          ref={el => {this.el2 = el;}}
+          ref={el => {
+            this.el2 = el;
+          }}
         />
       </>
     );

src/pages/Validation.js

@@ -22,9 +22,8 @@ class Validation extends React.Component {
     return (
       <>
         <h1>Validation</h1>
-        This example demonstrates using
+        This example demonstrates using multiplicities for automatically
-        multiplicities for automatically validating a graph.
+        validating a graph.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Visibility.js

@@ -18,9 +18,8 @@ class Visibility extends React.Component {
     return (
       <>
         <h1>Visibility</h1>
-        This example demonstrates using
+        This example demonstrates using various solutions for hiding and showing
-        various solutions for hiding and showing cells.
+        cells.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Windows.js

@@ -22,9 +22,8 @@ class Windows extends React.Component {
     return (
       <>
         <h1>Windows</h1>
-        This example demonstrates using
+        This example demonstrates using the mxWindow class for displaying
-        the mxWindow class for displaying windows.
+        windows.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Wrapping.js

@@ -16,9 +16,8 @@ class Wrapping extends React.Component {
     return (
       <>
         <h1>Wrapping</h1>
-        This example demonstrates using HTML markup and
+        This example demonstrates using HTML markup and word-wrapping in vertex
-        word-wrapping in vertex and edge labels.
+        and edge labels.
-
         <div
           ref={el => {
             this.el = el;

src/pages/_app.js

@@ -1,6 +1,6 @@
 import '../styles/globals.css';
 import '../public/css/common.css';
-import "./Animation.css";
+import './Animation.css';
 
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />;