moved example descriptions into example controls

src/pages/Anchors.js

@@ -1,8 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
- *
- * Anchors. This example demonstrates defining
- * fixed connection points for all shapes.
  */
 
 import React from 'react';
@@ -99,6 +96,9 @@ class Anchors extends React.Component {
     return (
       <>
         <h1>Anchors</h1>
+        This example demonstrates defining
+        fixed connection points for all shapes.
+
         <div
           ref={el => {
             this.el = el;

src/pages/Animation.js

@@ -1,8 +1,5 @@
 /**
  * Copyright (c) 2006-2017, JGraph Ltd
- *
- * Animation. This example demonstrates using
- * SVG animations on edges to visualize the flow in a pipe.
  */
 
 import React from 'react';
@@ -19,6 +16,8 @@ class Animation extends React.Component {
     return (
       <>
         <h1>Animation</h1>
+        This example demonstrates using
+        SVG animations on edges to visualize the flow in a pipe.
 
         <div
           ref={el => {

src/pages/AutoLayout.js

@@ -1,8 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
- *
- * Autolayout. This example demonstrates running
- * and animating a layout algorithm after every change to a graph.
  */
 
 import React from 'react';
@@ -30,6 +27,9 @@ class AutoLayout extends React.Component {
     return (
       <>
         <h1>Auto layout</h1>
+        This example demonstrates running
+        and animating a layout algorithm after every change to a graph.
+
         <div
           ref={el => {
             this.el = el;

src/pages/Boundary.js

@@ -1,8 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
- *
- * Boundary. This example demonstrates
- * implementing boundary events in BPMN diagrams.
  */
 
 import React from 'react';
@@ -24,6 +21,8 @@ class Boundary extends React.Component {
     return (
       <>
         <h1>Boundary</h1>
+        This example demonstrates
+        implementing boundary events in BPMN diagrams.
 
         <div
           ref={el => {

src/pages/Clipboard.js

@@ -1,8 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
- *
- * Clipboard. This example demonstrates using the
- * clipboard for providing cross-tab and cross-browser copy and paste.
  */
 
 import React from 'react';
@@ -25,6 +22,8 @@ class Clipboard extends React.Component {
     return (
       <>
         <h1>Clipboard</h1>
+        This example demonstrates using the clipboard
+        for providing cross-tab and cross-browser copy and paste.
 
         <div
           ref={el => {

src/pages/Codec.js

@@ -1,9 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
- *
- * Codec. This example demonstrates dynamically
- * creating a graph from XML and encoding the model into XML, as well
- * as changing the default style for edges in-place.
  */
 
 import React from 'react';
@@ -14,7 +10,7 @@ import mxUtils from "../mxgraph/util/mxUtils";
 import mxConstants from "../mxgraph/util/mxConstants";
 import mxEdgeStyle from "../mxgraph/view/mxEdgeStyle";
 
-class MYNAMEHERE extends React.Component {
+class Codec extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -24,6 +20,9 @@ class MYNAMEHERE extends React.Component {
     return (
         <>
           <h1>Codec</h1>
+          This example demonstrates dynamically
+          creating a graph from XML and encoding the model into XML, as well
+          as changing the default style for edges in-place.
 
           This graph is embedded in the page.
           <div className="mxgraph" style="position:relative;overflow:auto;">&lt;mxGraphModel&gt;&lt;root&gt;&lt;mxCell

src/pages/Collapse.js

@@ -1,8 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
- *
- * Collapse. This example demonstrates changing
- * the style of a cell based on its collapsed state.
  */
 
 import React from 'react';
@@ -19,6 +16,8 @@ class Collapse extends React.Component {
     return (
       <>
         <h1>Collapse</h1>
+        This example demonstrates changing
+        the style of a cell based on its collapsed state.
 
         <div
           ref={el => {

src/pages/Constituent.js

@@ -1,8 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
- *
- * Consistuent. This example demonstrates using
- * cells as parts of other cells.
  */
 
 import React from 'react';
@@ -10,7 +7,6 @@ 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 mxClient from "../mxgraph/mxClient";
 
 class Constituent extends React.Component {
   constructor(props) {
@@ -21,7 +17,9 @@ class Constituent extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Consistuent</h1>
+        <h1>Constituent</h1>
+        This example demonstrates using
+        cells as parts of other cells.
 
         <div
           ref={el => {

src/pages/ContextIcons.js

@@ -1,8 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
- *
- * Context icons. This example demonstrates adding
- * icons to selected vertices to carry out special operations.
  */
 
 import React from 'react';
@@ -23,6 +20,9 @@ class ContextIcons extends React.Component {
     return (
       <>
         <h1>Context icons</h1>
+        This example demonstrates adding
+        icons to selected vertices to carry out special operations.
+
         <div
           ref={el => {
             this.el = el;

src/pages/Control.js

@@ -1,8 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
- *
- * Control. This example demonstrates adding
- * controls to specific cells in a graph.
  */
 
 import React from 'react';
@@ -25,6 +22,9 @@ class Control extends React.Component {
     return (
       <>
         <h1>Control</h1>
+        This example demonstrates adding
+        controls to specific cells in a graph.
+
         <div
           ref={el => {
             this.el = el;

src/pages/DragSource.js

@@ -1,8 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
- *
- * Dragsource. This example demonstrates using
- * one drag source for multiple graphs and changing the drag icon.
  */
 
 import React from 'react';
@@ -27,6 +24,8 @@ class DragSource extends React.Component {
     return (
       <>
         <h1>Dragsource</h1>
+        This example demonstrates using one drag source
+        for multiple graphs and changing the drag icon.
 
         <div
           ref={el => {

src/pages/Drop.js

@@ -1,8 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
- *
- * Drop. This example demonstrates handling
- * native drag and drop of images (requires modern browser).
  */
 
 import React from 'react';
@@ -22,6 +19,8 @@ class Drop extends React.Component {
     return (
       <>
         <h1>Drop</h1>
+        This example demonstrates handling native drag and
+        drop of images (requires modern browser).
 
         <div
           ref={el => {

src/pages/DynamicLoading.js

@@ -1,8 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
- *
- * Dynamic loading. This example demonstrates loading
- * graph model data dynamically to limit the number of cells in the model.
  */
 
 import React from 'react';
@@ -25,6 +22,8 @@ class DynamicLoading extends React.Component {
     return (
       <>
         <h1>Dynamic loading</h1>
+        This example demonstrates loading graph model data
+        dynamically to limit the number of cells in the model.
 
         <div
           ref={el => {

src/pages/DynamicStyle.js

@@ -1,8 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
- *
- * Dynamic Style. This example demonstrates changing
- * the style of a cell dynamically by overriding mxGraphModel.getStyle.
  */
 
 import React from 'react';
@@ -21,6 +18,8 @@ class DynamicStyle extends React.Component {
     return (
       <>
         <h1>Dynamic Style</h1>
+        This example demonstrates changing the style of a cell
+        dynamically by overriding mxGraphModel.getStyle.
 
         <div
           ref={el => {

src/pages/DynamicToolbar.js

@@ -1,8 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
- *
- * Dynamic toolbar. This example demonstrates changing the
- * state of the toolbar at runtime.
  */
 
 import React from 'react';
@@ -28,6 +25,8 @@ class DynamicToolbar extends React.Component {
     return (
       <>
         <h1>Toolbar</h1>
+        This example demonstrates changing the state
+        of the toolbar at runtime.
 
         <div
           ref={el => {

src/pages/EdgeTolerance.js

@@ -1,8 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
- *
- * Edge tolerance. This example demonstrates increasing
- * the tolerance for hit detection on edges.
  */
 
 import React from 'react';
@@ -20,6 +17,9 @@ class EdgeTolerance extends React.Component {
     return (
       <>
         <h1>Edge tolerance</h1>
+        This example demonstrates increasing
+        the tolerance for hit detection on edges.
+
         <div
           ref={el => {
             this.el = el;

src/pages/Editing.js

@@ -1,10 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
- *
- * Editing. This example demonstrates using the in-place
- * editor trigger to specify the editing value and write the new value into
- * a specific field of the user object. Wrapping and DOM nodes as labels are
- * also demonstrated here.
  */
 
 import React from 'react';
@@ -23,6 +18,11 @@ class Editing extends React.Component {
     return (
       <>
         <h1>Editing</h1>
+        This example demonstrates using the in-place
+        editor trigger to specify the editing value and write the new value into
+        a specific field of the user object. Wrapping and DOM nodes as labels are
+        also demonstrated here.<br/><br/>
+
         Double-click the upper/lower half of the cell to edit different fields
         of the user object.
         <div

src/pages/Events.js

@@ -1,13 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
- *
- * Events. This example demonstrates creating
- * a graph container and using the mxDivResizer to update the size,
- * interaction on the graph, including marquee selection, custom
- * tooltips, context menu handling and changing the default menu
- * opacity. It also demonstrates how to use an edgestyle in the
- * default stylesheet, and handle the doubleclick on the adjustment
- * point. See also: overlays.html for click event handling.
  */
 
 import React from 'react';
@@ -34,6 +26,13 @@ class Events extends React.Component {
     return (
       <>
         <h1>Events</h1>
+        Events. This example demonstrates creating
+        a graph container and using the mxDivResizer to update the size,
+        interaction on the graph, including marquee selection, custom
+        tooltips, context menu handling and changing the default menu
+        opacity. It also demonstrates how to use an edgestyle in the
+        default stylesheet, and handle the doubleclick on the adjustment
+        point. See also: overlays.html for click event handling.
 
         <div
           ref={el => {

src/pages/ExtendCanvas.js

@@ -1,8 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
- *
- * Extend canvas. This example demonstrates implementing
- * an infinite canvas with scrollbars.
  */
 
 import React from 'react';
@@ -23,6 +20,8 @@ class ExtendCanvas extends React.Component {
     return (
       <>
         <h1>Extend canvas</h1>
+        This example demonstrates implementing
+        an infinite canvas with scrollbars.
 
         <div
           ref={el => {

src/pages/FileIO.js

@@ -1,9 +1,5 @@
 /**
- *Copyright (c) 2006-2013, JGraph Ltd
+ * Copyright (c) 2006-2013, JGraph Ltd
- *
- * File I/O. This example demonstrates reading an
- * XML file, writing a custom parser, applying an automatic layout and
- * defining a 2-way edge.
  */
 
 import React from 'react';
@@ -28,6 +24,10 @@ class FileIO extends React.Component {
     return (
       <>
         <h1>File I/O</h1>
+        This example demonstrates reading an
+        XML file, writing a custom parser, applying an automatic layout and
+        defining a 2-way edge.
+
         <div
           ref={el => {
             this.el = el;

src/pages/FixedIcon.js

@@ -1,12 +1,8 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
-  
-  FixedIcon. This example demonstrates
-  customizing the icon position in the mxLabel shape.
  */
 
 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";
@@ -24,6 +20,9 @@ class FixedIcon extends React.Component {
     return (
       <>
         <h1>Fixed icon</h1>
+        This example demonstrates
+        customizing the icon position in the mxLabel shape.
+
         <div
           ref={el => {
             this.el = el;

src/pages/FixedPoints.js

@@ -1,8 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
-  
-  Fixed points. This example demonstrates using
-  fixed connection points for connecting edges to vertices.
  */
 
 import React from 'react';
@@ -26,6 +23,8 @@ class FixedPoints extends React.Component {
     return (
       <>
         <h1>Fixed points</h1>
+        This example demonstrates using
+        fixed connection points for connecting edges to vertices.
 
         <div
           ref={el => {

src/pages/Folding.js

@@ -1,8 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
- *
- * Folding. This example demonstrates
- * using a layout to implement a nested group structure.
  */
 
 import React from 'react';
@@ -22,6 +19,8 @@ class Folding extends React.Component {
     return (
       <>
         <h1>Folding</h1>
+        This example demonstrates using a layout to implement a nested group structure.
+
         <div
           ref={el => {
             this.el = el;

src/pages/GraphLayout.js

@@ -1,9 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
-  
-  Graphlayout. This example demonstrates using
-  automatic graph layouts and listening to changes of the graph size
-  to keep the container size in sync.
  */
 
 import React from 'react';
@@ -13,7 +9,7 @@ import mxRubberband from '../mxgraph/handler/mxRubberband';
 import mxUtils from "../mxgraph/util/mxUtils";
 import mxCircleLayout from "../mxgraph/layout/mxCircleLayout";
 
-class MYNAMEHERE extends React.Component {
+class GraphLayout extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -23,6 +19,9 @@ class MYNAMEHERE extends React.Component {
     return (
       <>
         <h1>Graphlayout</h1>
+        This example demonstrates using
+        automatic graph layouts and listening to changes of the graph size
+        to keep the container size in sync.
 
         <div
           ref={el => {
@@ -41,7 +40,7 @@ class MYNAMEHERE extends React.Component {
   };
 }
 
-export default MYNAMEHERE;
+export default GraphLayout;
 
     function main(container)
     {

src/pages/Grid.js

@@ -1,8 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
-  
-  Grid. This example demonstrates drawing
-  a grid dynamically using HTML 5 canvas.
  */
 
 import React from 'react';
@@ -24,6 +21,9 @@ class Grid extends React.Component {
     return (
       <>
         <h1>Grid</h1>
+        This example demonstrates drawing
+        a grid dynamically using HTML 5 canvas.
+
         <div
           ref={el => {
             this.el = el;

src/pages/Groups.js

@@ -1,8 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
-  
-  Groups. This example demonstrates using
-  cells as parts of other cells.
  */
 
 import React from 'react';
@@ -21,6 +18,9 @@ class Groups extends React.Component {
     return (
       <>
         <h1>Hello, World!</h1>
+        This example demonstrates using
+        cells as parts of other cells.
+
         <div
           ref={el => {
             this.el = el;

src/pages/Guides.js

@@ -1,11 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
-  
-  Guides. This example demonstrates the guides
-  feature which aligns the current selection to the existing vertices
-  in the graph. This feature is in RFC state. Creating a grid using
-  a canvas and installing a key handler for cursor keys is also
-  demonstrated here, as well as snapping waypoints to terminals.
  */
 
 import React from 'react';
@@ -28,6 +22,12 @@ class Guides extends React.Component {
     return (
       <>
         <h1>Guides</h1>
+        This example demonstrates the guides
+        feature which aligns the current selection to the existing vertices
+        in the graph. This feature is in RFC state. Creating a grid using
+        a canvas and installing a key handler for cursor keys is also
+        demonstrated here, as well as snapping waypoints to terminals.
+
         <div
           ref={el => {
             this.el = el;

src/pages/Handles.js

@@ -1,7 +1,5 @@
 /**
  * Copyright (c) 2006-2014, JGraph Ltd
-  
-  Handles. This example demonstrates using mxHandle to change custom styles interactively.
  */
 
 import React from 'react';
@@ -26,6 +24,8 @@ class Handles extends React.Component {
     return (
       <>
         <h1>Handles</h1>
+        This example demonstrates using mxHandle to change custom styles interactively.
+
         <div
           ref={el => {
             this.el = el;

src/pages/HelloPort.js

@@ -1,8 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
-  
-  Hello, World!. This example demonstrates using
-  the isPort hook for visually connecting to another cell.
  */
 
 import React from 'react';
@@ -25,6 +22,9 @@ class HelloPort extends React.Component {
     return (
       <>
         <h1>Hello, World!</h1>
+        This example demonstrates using
+        the isPort hook for visually connecting to another cell.
+
         <div
           ref={el => {
             this.el = el;

src/pages/HelloWorld.js

@@ -1,9 +1,6 @@
 /*
  *  Copyright (c) 2006-2018, JGraph Ltd
  *  Converted to ES9 syntax/React by David Morrissey 2021
- *
- *  Hello, World!. This example demonstrates using
- *  a DOM node to create a graph and adding vertices and edges.
  */
 
 import React from 'react';
@@ -21,6 +18,8 @@ class HelloWorld extends React.Component {
     return (
       <>
         <h1>Hello, World!</h1>
+        This example demonstrates using
+        a DOM node to create a graph and adding vertices and edges.
 
         <div
           ref={el => {

src/pages/HierarchicalLayout.js

@@ -1,9 +1,5 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
-  
-  Hierarchical Layout. This example demonstrates the
-  use of the hierarchical and organic layouts. Note that the hierarchical
-  layout requires another script tag in the head of the page.
  */
 
 import React from 'react';
@@ -26,6 +22,10 @@ class HierarchicalLayout extends React.Component {
     return (
       <>
         <h1>Hierarchical Layout</h1>
+        This example demonstrates the
+        use of the hierarchical and organic layouts. Note that the hierarchical
+        layout requires another script tag in the head of the page.
+
         <div
           ref={el => {
             this.el = el;

src/pages/index.js

@@ -69,7 +69,7 @@ export default function Home() {
   return (
     <div
       style={{
-        width: '1000px',
+        width: '900px',
         margin: '0 auto'
       }}
     >