Adding Prettier and fixing up eslint version

Issue-ID: SDC-1094
Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd
Signed-off-by: Einav Weiss Keidar <einavw@amdocs.com>

28 files changed, 4921 insertions, 4696 deletions

diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/Sequencer.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/Sequencer.jsx
index fc2bfbc0e3..c0e9483e92 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/Sequencer.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/Sequencer.jsx
@@ -28,176 +28,177 @@ import '../../../../res/sdc-sequencer.scss';
  * ASDC Sequencer entry point.
  */
 class Sequencer extends React.Component {
+    // //////////////////////////////////////////////////////////////////////////////////////////////
 
-  // //////////////////////////////////////////////////////////////////////////////////////////////
-
-  constructor(props, context) {
-    super(props, context);
-
-
-    this.setMetamodel.bind(this);
-    this.setModel.bind(this);
-    this.getModel.bind(this);
-    this.getMetamodel.bind(this);
-    this.getSVG.bind(this);
-    this.getDemoScenarios.bind(this);
-    this.newModel.bind(this);
-
-    // Parse options.
-
-    this.options = new Options(props.options);
-
-    // Default scenarios.
-
-    const scenarios = this.getDemoScenarios();
-    this.setMetamodel(scenarios.getMetamodels());
-
-    // this.setModel(scenarios.getBlank());
-    this.setModel(scenarios.getDimensions());
-    // this.setModel(scenarios.getECOMP());
-
-  }
-
-  // //////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Optionally save known metamodels so that subsequent loading and unloading
-   * of models needn't include the corresponding metamodel.
-   * @param metamodels array of conformant metamodel JSON definitions.
-   * @return this.
-   */
-  setMetamodel(metamodels) {
-    Common.assertType(metamodels, 'Array');
-    this.metamodels = new Metamodels(metamodels);
-    return this;
-  }
-
-  // //////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Set current diagram.
-   * @param modelJSON JSON diagram spec.
-   * @param metamodelIdOrDefinition optional metamodel definition or reference. Defaults to
-   * the model's metadata @ref, or the default (permissive) metamodel.
-   * @return this.
-   */
-  setModel(modelJSON, metamodelIdOrDefinition) {
-    Common.assertType(modelJSON, 'Object');
-    const ref = (modelJSON.metadata) ? modelJSON.metadata.ref : undefined;
-    const metamodel = this.getMetamodel(metamodelIdOrDefinition || ref);
-    Common.assertInstanceOf(metamodel, Metamodel);
-    this.model = new Model(modelJSON, metamodel);
-    if (this.application) {
-      this.application.setModel(this.model);
+    constructor(props, context) {
+        super(props, context);
+
+        this.setMetamodel.bind(this);
+        this.setModel.bind(this);
+        this.getModel.bind(this);
+        this.getMetamodel.bind(this);
+        this.getSVG.bind(this);
+        this.getDemoScenarios.bind(this);
+        this.newModel.bind(this);
+
+        // Parse options.
+
+        this.options = new Options(props.options);
+
+        // Default scenarios.
+
+        const scenarios = this.getDemoScenarios();
+        this.setMetamodel(scenarios.getMetamodels());
+
+        // this.setModel(scenarios.getBlank());
+        this.setModel(scenarios.getDimensions());
+        // this.setModel(scenarios.getECOMP());
     }
-    return this;
-  }
-
-  // //////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get current diagram state. At any given instant the diagram might not make *sense*
-   * but it should always be syntactically valid.
-   * @return current Model.
-   */
-  getModel() {
-
-    if (this.application) {
-      const model = this.application.getModel();
-      if (model) {
-        return model.unwrap();
-      }
+
+    // //////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Optionally save known metamodels so that subsequent loading and unloading
+     * of models needn't include the corresponding metamodel.
+     * @param metamodels array of conformant metamodel JSON definitions.
+     * @return this.
+     */
+    setMetamodel(metamodels) {
+        Common.assertType(metamodels, 'Array');
+        this.metamodels = new Metamodels(metamodels);
+        return this;
     }
 
-    return this.model;
-  }
-
-  // //////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Extract SVG element.
-   * @return stringified SVG element.
-   */
-  getSVG() {
-    return this.application.getSVG();
-  }
-
-  // //////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get demo scenarios, allowing initialization in demo mode from the outside.
-   * @returns {Scenarios}
-   */
-  getDemoScenarios() {
-    return new Scenarios();
-  }
-
-  // //////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Create new model.
-   * @param metamodelIdOrDefinition
-   * @return newly-created model.
-   */
-  newModel(metamodelIdOrDefinition) {
-    const metamodel = this.getMetamodel(metamodelIdOrDefinition);
-    Common.assertInstanceOf(metamodel, Metamodel);
-    const model = new Model({}, metamodel);
-    if (this.application) {
-      this.application.setModel(model);
+    // //////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Set current diagram.
+     * @param modelJSON JSON diagram spec.
+     * @param metamodelIdOrDefinition optional metamodel definition or reference. Defaults to
+     * the model's metadata @ref, or the default (permissive) metamodel.
+     * @return this.
+     */
+    setModel(modelJSON, metamodelIdOrDefinition) {
+        Common.assertType(modelJSON, 'Object');
+        const ref = modelJSON.metadata ? modelJSON.metadata.ref : undefined;
+        const metamodel = this.getMetamodel(metamodelIdOrDefinition || ref);
+        Common.assertInstanceOf(metamodel, Metamodel);
+        this.model = new Model(modelJSON, metamodel);
+        if (this.application) {
+            this.application.setModel(this.model);
+        }
+        return this;
     }
-    return model;
-  }
-
-  // //////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get Metamodel instance corresponding to an ID or JSON definition.
-   * @param metamodelIdOrDefinition String ID or JSON definition.
-   * @returns Metamodel instance.
-   * @private
-   */
-  getMetamodel(metamodelIdOrDefinition) {
-    const metamodelType = Common.getType(metamodelIdOrDefinition);
-    if (metamodelType === 'Object') {
-      return new Metamodel(metamodelIdOrDefinition);
+
+    // //////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get current diagram state. At any given instant the diagram might not make *sense*
+     * but it should always be syntactically valid.
+     * @return current Model.
+     */
+    getModel() {
+        if (this.application) {
+            const model = this.application.getModel();
+            if (model) {
+                return model.unwrap();
+            }
+        }
+
+        return this.model;
     }
-    return this.metamodels.getMetamodelOrDefault(metamodelIdOrDefinition);
-  }
 
-  // //////////////////////////////////////////////////////////////////////////////////////////////
+    // //////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
-   * Render current diagram state.
-   */
-  render() {
+    /**
+     * Extract SVG element.
+     * @return stringified SVG element.
+     */
+    getSVG() {
+        return this.application.getSVG();
+    }
 
-    if (this.props.model) {
+    // //////////////////////////////////////////////////////////////////////////////////////////////
 
-      // If a model was specified as a property, apply it. Otherwise
-      // fall back to the demo model.
+    /**
+     * Get demo scenarios, allowing initialization in demo mode from the outside.
+     * @returns {Scenarios}
+     */
+    getDemoScenarios() {
+        return new Scenarios();
+    }
 
-      const scenarios = this.getDemoScenarios();
-      const metamodel = [scenarios.getBlankMetamodel(), scenarios.getECOMPMetamodel()];
-      if (this.props.metamodel) {
-        metamodel.push(this.props.metamodel);
-      }
-      this.setMetamodel(metamodel);
-      this.setModel(this.props.model);
+    // //////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Create new model.
+     * @param metamodelIdOrDefinition
+     * @return newly-created model.
+     */
+    newModel(metamodelIdOrDefinition) {
+        const metamodel = this.getMetamodel(metamodelIdOrDefinition);
+        Common.assertInstanceOf(metamodel, Metamodel);
+        const model = new Model({}, metamodel);
+        if (this.application) {
+            this.application.setModel(model);
+        }
+        return model;
     }
 
-    return (
-      <Application options={this.options} sequencer={this} ref={(a) => { this.application = a; }} />
-    );
-  }
+    // //////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get Metamodel instance corresponding to an ID or JSON definition.
+     * @param metamodelIdOrDefinition String ID or JSON definition.
+     * @returns Metamodel instance.
+     * @private
+     */
+    getMetamodel(metamodelIdOrDefinition) {
+        const metamodelType = Common.getType(metamodelIdOrDefinition);
+        if (metamodelType === 'Object') {
+            return new Metamodel(metamodelIdOrDefinition);
+        }
+        return this.metamodels.getMetamodelOrDefault(metamodelIdOrDefinition);
+    }
 
+    // //////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Render current diagram state.
+     */
+    render() {
+        if (this.props.model) {
+            // If a model was specified as a property, apply it. Otherwise
+            // fall back to the demo model.
+
+            const scenarios = this.getDemoScenarios();
+            const metamodel = [
+                scenarios.getBlankMetamodel(),
+                scenarios.getECOMPMetamodel()
+            ];
+            if (this.props.metamodel) {
+                metamodel.push(this.props.metamodel);
+            }
+            this.setMetamodel(metamodel);
+            this.setModel(this.props.model);
+        }
+
+        return (
+            <Application
+                options={this.options}
+                sequencer={this}
+                ref={a => {
+                    this.application = a;
+                }}
+            />
+        );
+    }
 }
 
 Sequencer.propTypes = {
-  options: PropTypes.object.isRequired,
-  model: PropTypes.object,
-  metamodel: PropTypes.object,
+    options: PropTypes.object.isRequired,
+    model: PropTypes.object,
+    metamodel: PropTypes.object
 };
 
-
 export default Sequencer;
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Common.js b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Common.js
index 7337367dca..1c6bd69dc2 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Common.js
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Common.js
@@ -18,339 +18,347 @@
  * Common operations.
  */
 export default class Common {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Retrieve and start a simple timer. Retrieve elapsed time by calling #ms().
+     * @returns {*}
+     */
+    static timer() {
+        const start = new Date().getTime();
+        return {
+            ms() {
+                return new Date().getTime() - start;
+            }
+        };
+    }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Retrieve and start a simple timer. Retrieve elapsed time by calling #ms().
-   * @returns {*}
-   */
-  static timer() {
-    const start = new Date().getTime();
-    return {
-      ms() {
-        return (new Date().getTime() - start);
-      },
-    };
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get datatype, stripping '[object Boolean]' to just 'Boolean'.
-   * @param o JS object.
-   * @return String like String, Number, Date, Null, Undefined, stuff like that.
-   */
-  static getType(o) {
-    const str = Object.prototype.toString.call(o);
-    const prefix = '[object ';
-    if (str.substr(str, prefix.length) === prefix) {
-      return str.substr(prefix.length, str.length - (prefix.length + 1));
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get datatype, stripping '[object Boolean]' to just 'Boolean'.
+     * @param o JS object.
+     * @return String like String, Number, Date, Null, Undefined, stuff like that.
+     */
+    static getType(o) {
+        const str = Object.prototype.toString.call(o);
+        const prefix = '[object ';
+        if (str.substr(str, prefix.length) === prefix) {
+            return str.substr(prefix.length, str.length - (prefix.length + 1));
+        }
+        return str;
     }
-    return str;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Assert that an argument was provided.
-   * @param value to be checked.
-   * @param message message on assertion failure.
-   * @return value.
-   */
-  static assertNotNull(value, message = 'Unexpected null value') {
-    if (!value) {
-      throw new Error(message);
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Assert that an argument was provided.
+     * @param value to be checked.
+     * @param message message on assertion failure.
+     * @return value.
+     */
+    static assertNotNull(value, message = 'Unexpected null value') {
+        if (!value) {
+            throw new Error(message);
+        }
+        return value;
     }
-    return value;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Assert argument type.
-   * @param value to be checked.
-   * @param expected expected type string, e,g. Number from [object Number].
-   * @return value.
-   */
-  static assertType(value, expected) {
-    const type = this.getType(value);
-    if (type !== expected) {
-      throw new Error(`Expected type ${expected}, got ${type}`);
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Assert argument type.
+     * @param value to be checked.
+     * @param expected expected type string, e,g. Number from [object Number].
+     * @return value.
+     */
+    static assertType(value, expected) {
+        const type = this.getType(value);
+        if (type !== expected) {
+            throw new Error(`Expected type ${expected}, got ${type}`);
+        }
+        return value;
     }
-    return value;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Assert argument type.
-   * @param value to be checked.
-   * @param unexpected unexpected type string, e,g. Number from [object Number].
-   * @return value.
-   */
-  static assertNotType(value, unexpected) {
-    const type = this.getType(value);
-    if (type === unexpected) {
-      throw new Error(`Forbidden type "${unexpected}"`);
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Assert argument type.
+     * @param value to be checked.
+     * @param unexpected unexpected type string, e,g. Number from [object Number].
+     * @return value.
+     */
+    static assertNotType(value, unexpected) {
+        const type = this.getType(value);
+        if (type === unexpected) {
+            throw new Error(`Forbidden type "${unexpected}"`);
+        }
+        return value;
     }
-    return value;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Assert argument is a simple JSON object, and specifically not (something like an) ES6 class.
-   * @param value to be checked.
-   * @return value.
-   */
-  static assertPlainObject(value) {
-    Common.assertType(value, 'Object');
-    // TODO
-    /*
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Assert argument is a simple JSON object, and specifically not (something like an) ES6 class.
+     * @param value to be checked.
+     * @return value.
+     */
+    static assertPlainObject(value) {
+        Common.assertType(value, 'Object');
+        // TODO
+        /*
     if (!($.isPlainObject(value))) {
       throw new Error(`Expected plain object: ${value}`);
     }
     */
-    return value;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Assert argument type.
-   * @param value to be checked.
-   * @param c expected class.
-   * @return value.
-   */
-  static assertInstanceOf(value, c) {
-    Common.assertNotNull(value);
-    if (!(value instanceof c)) {
-      throw new Error(`Expected instanceof ${c}: ${value}`);
-    }
-    return value;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Assert that a string matches a regex.
-   * @param value value to be tested.
-   * @param re pattern to be applied.
-   * @return value.
-   */
-  static assertMatches(value, re) {
-    this.assertType(value, 'String');
-    this.assertType(re, 'RegExp');
-    if (!re.test(value)) {
-      throw new Error(`Value ${value} doesn't match pattern ${re}`);
+        return value;
     }
-    return value;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Assert the value of a boolean.
-   *
-   * @param bool to be checked.
-   * @param message optional message on assertion failure.
-   * @return value.
-   */
-  static assertThat(bool, message) {
-    if (!bool) {
-      throw new Error(message || `Unexpected: ${bool}`);
-    }
-    return bool;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Verify that a value, generally a function arg, is a DOM element.
-   * @param value to be checked.
-   * @return value.
-   */
-  static assertHTMLElement(value) {
-    if (!Common.isHTMLElement(value)) {
-      throw new Error(`Expected HTMLElement: ${value}`);
-    }
-    return value;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Check whether a value, generally a function arg, is an HTML DOM element.
-   * @param o to be checked.
-   * @return true if DOM element.
-   */
-  static isHTMLElement(o) {
-    if (typeof HTMLElement === 'object') {
-      return o instanceof HTMLElement;
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Assert argument type.
+     * @param value to be checked.
+     * @param c expected class.
+     * @return value.
+     */
+    static assertInstanceOf(value, c) {
+        Common.assertNotNull(value);
+        if (!(value instanceof c)) {
+            throw new Error(`Expected instanceof ${c}: ${value}`);
+        }
+        return value;
     }
-    return o && typeof o === 'object' && o !== null
-      && o.nodeType === 1 && typeof o.nodeName === 'string';
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Check if a string is non-empty.
-   * @param s string to be checked.
-   * @returns false if non-blank string, true otherwise.
-   */
-  static isBlank(s) {
-    if (Common.getType(s) === 'String') {
-      return (s.trim().length === 0);
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Assert that a string matches a regex.
+     * @param value value to be tested.
+     * @param re pattern to be applied.
+     * @return value.
+     */
+    static assertMatches(value, re) {
+        this.assertType(value, 'String');
+        this.assertType(re, 'RegExp');
+        if (!re.test(value)) {
+            throw new Error(`Value ${value} doesn't match pattern ${re}`);
+        }
+        return value;
     }
-    return true;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Detect dates that are numbers, milli/seconds since epoch..
-   *
-   * @param n candidate number.
-   * @returns {boolean}
-   */
-  static isNumber(n) {
-    return !isNaN(parseFloat(n)) && isFinite(n);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Parse the text output from a template to a DOM element.
-   * @param txt input text.
-   * @returns {Element}
-   */
-  static txt2dom(txt) {
-    return new DOMParser().parseFromString(txt, 'image/svg+xml').documentElement;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Recursively convert a DOM element to an SVG (namespaced) element. Otherwise
-   * you get HTML elements that *happen* to have SVG names, but which aren't actually SVG.
-   *
-   * @param node DOM node to be converted.
-   * @param svg to be updated.
-   * @returns {*} for chaining.
-   */
-  static dom2svg(node, svg) {
-
-    Common.assertNotType(node, 'String');
-
-    if (node.childNodes && node.childNodes.length > 0) {
-
-      for (const c of node.childNodes) {
-        switch (c.nodeType) {
-          case document.TEXT_NODE:
-            svg.text(c.nodeValue);
-            break;
-          default:
-            break;
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Assert the value of a boolean.
+     *
+     * @param bool to be checked.
+     * @param message optional message on assertion failure.
+     * @return value.
+     */
+    static assertThat(bool, message) {
+        if (!bool) {
+            throw new Error(message || `Unexpected: ${bool}`);
         }
-      }
-
-      for (const c of node.childNodes) {
-        switch (c.nodeType) {
-          case document.ELEMENT_NODE:
-            Common.dom2svg(c, svg.append(`svg:${c.nodeName.toLowerCase()}`));
-            break;
-          default:
-            break;
+        return bool;
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Verify that a value, generally a function arg, is a DOM element.
+     * @param value to be checked.
+     * @return value.
+     */
+    static assertHTMLElement(value) {
+        if (!Common.isHTMLElement(value)) {
+            throw new Error(`Expected HTMLElement: ${value}`);
         }
-      }
+        return value;
     }
 
-    if (node.hasAttributes()) {
-      for (let i = 0; i < node.attributes.length; i++) {
-        const a = node.attributes.item(i);
-        svg.attr(a.name, a.value);
-      }
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Check whether a value, generally a function arg, is an HTML DOM element.
+     * @param o to be checked.
+     * @return true if DOM element.
+     */
+    static isHTMLElement(o) {
+        /* eslint-disable no-undef */
+        if (typeof HTMLElement === 'object') {
+            return o instanceof HTMLElement;
+        }
+        /* eslint-enable no-undef */
+        return (
+            o &&
+            typeof o === 'object' &&
+            o !== null &&
+            o.nodeType === 1 &&
+            typeof o.nodeName === 'string'
+        );
     }
 
-    return svg;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get the lines to be shown in the label.
-   *
-   * @param labelText original label text.
-   * @param wordWrapAt chars at which to break words.
-   * @param lineWrapAt chars at which to wrap.
-   * @param maximumLines lines at which to truncate.
-   * @returns {Array}
-   */
-  static tokenize(labelText = '', wordWrapAt, lineWrapAt, maximumLines) {
-
-    let l = labelText;
-
-    // Hyphenate and break long words.
-
-    const regex = new RegExp(`(\\w{${wordWrapAt - 1}})(?=\\w)`, 'g');
-    l = l.replace(regex, '$1- ');
-
-    const labelTokens = l.split(/\s+/);
-    const lines = [];
-    let label = '';
-    for (const labelToken of labelTokens) {
-      if (label.length > 0) {
-        const length = label.length + labelToken.length + 1;
-        if (length > lineWrapAt) {
-          lines.push(label.trim());
-          label = labelToken;
-          continue;
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Check if a string is non-empty.
+     * @param s string to be checked.
+     * @returns false if non-blank string, true otherwise.
+     */
+    static isBlank(s) {
+        if (Common.getType(s) === 'String') {
+            return s.trim().length === 0;
         }
-      }
-      label = `${label} ${labelToken}`;
+        return true;
     }
 
-    if (label) {
-      lines.push(label.trim());
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Detect dates that are numbers, milli/seconds since epoch..
+     *
+     * @param n candidate number.
+     * @returns {boolean}
+     */
+    static isNumber(n) {
+        return !isNaN(parseFloat(n)) && isFinite(n);
     }
 
-    const truncated = lines.slice(0, maximumLines);
-    if (truncated.length < lines.length) {
-      let finalLine = truncated[maximumLines - 1];
-      if (finalLine.length > (lineWrapAt - 4)) {
-        finalLine = finalLine.substring(0, lineWrapAt - 4);
-      }
-      finalLine = `${finalLine} ...`;
-      truncated[maximumLines - 1] = finalLine;
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Parse the text output from a template to a DOM element.
+     * @param txt input text.
+     * @returns {Element}
+     */
+    static txt2dom(txt) {
+        /* eslint-disable no-undef */
+        return new DOMParser().parseFromString(txt, 'image/svg+xml')
+            .documentElement;
+        /* eslint-enable no-undef */
     }
 
-    return truncated;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Brutally sanitize an input string. We have no syntax rules, and hence no specific
-   * rules to apply, but we have very few unconstrained fields, so we can implement a
-   * crude default and devolve the rest to options.
-   * @param value value to be sanitized.
-   * @param options control options including validation rules.
-   * @param type validation type.
-   * @returns {*} sanitized string.
-   * @private
-   */
-  static sanitizeText(value, options, type) {
-    const rules = Common.assertNotNull(options.validation[type]);
-    let v = value || rules.defaultValue || '';
-    if (rules.replace) {
-      v = v.replace(rules.replace, '');
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Recursively convert a DOM element to an SVG (namespaced) element. Otherwise
+     * you get HTML elements that *happen* to have SVG names, but which aren't actually SVG.
+     *
+     * @param node DOM node to be converted.
+     * @param svg to be updated.
+     * @returns {*} for chaining.
+     */
+    static dom2svg(node, svg) {
+        Common.assertNotType(node, 'String');
+
+        if (node.childNodes && node.childNodes.length > 0) {
+            for (const c of node.childNodes) {
+                switch (c.nodeType) {
+                    case document.TEXT_NODE:
+                        svg.text(c.nodeValue);
+                        break;
+                    default:
+                        break;
+                }
+            }
+
+            for (const c of node.childNodes) {
+                switch (c.nodeType) {
+                    case document.ELEMENT_NODE:
+                        Common.dom2svg(
+                            c,
+                            svg.append(`svg:${c.nodeName.toLowerCase()}`)
+                        );
+                        break;
+                    default:
+                        break;
+                }
+            }
+        }
+
+        if (node.hasAttributes()) {
+            for (let i = 0; i < node.attributes.length; i++) {
+                const a = node.attributes.item(i);
+                svg.attr(a.name, a.value);
+            }
+        }
+
+        return svg;
     }
-    if (v.length > rules.maxLength) {
-      v = `${v.substring(0, rules.maxLength)}...`;
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get the lines to be shown in the label.
+     *
+     * @param labelText original label text.
+     * @param wordWrapAt chars at which to break words.
+     * @param lineWrapAt chars at which to wrap.
+     * @param maximumLines lines at which to truncate.
+     * @returns {Array}
+     */
+    static tokenize(labelText = '', wordWrapAt, lineWrapAt, maximumLines) {
+        let l = labelText;
+
+        // Hyphenate and break long words.
+
+        const regex = new RegExp(`(\\w{${wordWrapAt - 1}})(?=\\w)`, 'g');
+        l = l.replace(regex, '$1- ');
+
+        const labelTokens = l.split(/\s+/);
+        const lines = [];
+        let label = '';
+        for (const labelToken of labelTokens) {
+            if (label.length > 0) {
+                const length = label.length + labelToken.length + 1;
+                if (length > lineWrapAt) {
+                    lines.push(label.trim());
+                    label = labelToken;
+                    continue;
+                }
+            }
+            label = `${label} ${labelToken}`;
+        }
+
+        if (label) {
+            lines.push(label.trim());
+        }
+
+        const truncated = lines.slice(0, maximumLines);
+        if (truncated.length < lines.length) {
+            let finalLine = truncated[maximumLines - 1];
+            if (finalLine.length > lineWrapAt - 4) {
+                finalLine = finalLine.substring(0, lineWrapAt - 4);
+            }
+            finalLine = `${finalLine} ...`;
+            truncated[maximumLines - 1] = finalLine;
+        }
+
+        return truncated;
     }
-    return v;
-  }
 
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Brutally sanitize an input string. We have no syntax rules, and hence no specific
+     * rules to apply, but we have very few unconstrained fields, so we can implement a
+     * crude default and devolve the rest to options.
+     * @param value value to be sanitized.
+     * @param options control options including validation rules.
+     * @param type validation type.
+     * @returns {*} sanitized string.
+     * @private
+     */
+    static sanitizeText(value, options, type) {
+        const rules = Common.assertNotNull(options.validation[type]);
+        let v = value || rules.defaultValue || '';
+        if (rules.replace) {
+            v = v.replace(rules.replace, '');
+        }
+        if (v.length > rules.maxLength) {
+            v = `${v.substring(0, rules.maxLength)}...`;
+        }
+        return v;
+    }
 }
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Logger.js b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Logger.js
index 187f49bb08..8b6ae67ca7 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Logger.js
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Logger.js
@@ -23,108 +23,107 @@ import Common from './Common';
  * disable them for production.
  */
 export default class Logger {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * No-op call so that we can leave imports in place,
+     * even when there's no debugging.
+     */
+    static noop() {
+        // Nothing.
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Set debug level.
+     * @param level threshold.
+     */
+    static setLevel(level) {
+        this.level = Logger.OFF;
+        if (Common.getType(level) === 'Number') {
+            this.level = level;
+        } else {
+            this.level = Logger[level];
+        }
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get debug level.
+     * @returns {number|*}
+     */
+    static getLevel() {
+        return this.level;
+    }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * No-op call so that we can leave imports in place,
-   * even when there's no debugging.
-   */
-  static noop() {
-    // Nothing.
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Set debug level.
-   * @param level threshold.
-   */
-  static setLevel(level) {
-    this.level = Logger.OFF;
-    if (Common.getType(level) === 'Number') {
-      this.level = level;
-    } else {
-      this.level = Logger[level];
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Write DEBUG-level log.
+     * @param msg message or tokens.
+     */
+    static debug(...msg) {
+        if (this.level >= Logger.DEBUG) {
+            const out = this.serialize(msg);
+            console.info(`ASDCS [DEBUG] ${out}`);
+        }
     }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get debug level.
-   * @returns {number|*}
-   */
-  static getLevel() {
-    return this.level;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Write DEBUG-level log.
-   * @param msg message or tokens.
-   */
-  static debug(...msg) {
-    if (this.level >= Logger.DEBUG) {
-      const out = this.serialize(msg);
-      console.info(`ASDCS [DEBUG] ${out}`);
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Write INFO-level log.
+     * @param msg message or tokens.
+     */
+    static info(...msg) {
+        if (this.level >= Logger.INFO) {
+            const out = this.serialize(msg);
+            console.info(`ASDCS [INFO] ${out}`);
+        }
     }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Write INFO-level log.
-   * @param msg message or tokens.
-   */
-  static info(...msg) {
-    if (this.level >= Logger.INFO) {
-      const out = this.serialize(msg);
-      console.info(`ASDCS [INFO] ${out}`);
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Write debug.
+     * @param msg message or tokens.
+     */
+    static warn(msg) {
+        if (this.level >= Logger.WARN) {
+            const out = this.serialize(msg);
+            console.warn(`ASDCS [WARN] ${out}`);
+        }
     }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Write debug.
-   * @param msg message or tokens.
-   */
-  static warn(msg) {
-    if (this.level >= Logger.WARN) {
-      const out = this.serialize(msg);
-      console.warn(`ASDCS [WARN] ${out}`);
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Write error.
+     * @param msg message or tokens.
+     */
+    static error(...msg) {
+        if (this.level >= Logger.ERROR) {
+            const out = this.serialize(msg);
+            console.error(`ASDCS [ERROR] ${out}`);
+        }
     }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Write error.
-   * @param msg message or tokens.
-   */
-  static error(...msg) {
-    if (this.level >= Logger.ERROR) {
-      const out = this.serialize(msg);
-      console.error(`ASDCS [ERROR] ${out}`);
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Serialize msg.
+     * @param msg message or tokens.
+     * @returns {string}
+     */
+    static serialize(...msg) {
+        let out = '';
+        msg.forEach(token => {
+            out = `${out}${token}`;
+        });
+        return out;
     }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Serialize msg.
-   * @param msg message or tokens.
-   * @returns {string}
-   */
-  static serialize(...msg) {
-    let out = '';
-    msg.forEach((token) => {
-      out = `${out}${token}`;
-    });
-    return out;
-  }
 }
 
 // /////////////////////////////////////////////////////////////////////////////////////////////////
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Options.js b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Options.js
index 15897d7ee3..b054cb26e7 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Options.js
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Options.js
@@ -23,26 +23,25 @@ import Logger from './Logger';
  * and the result -- runtime options -- are available by calling #getOptions().
  */
 export default class Options {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    /**
+     * Construct options, applying defaults.
+     * @param options optional override options.
+     */
+    constructor(options = {}) {
+        this.options = _merge({}, Options.DEFAULTS, options);
+    }
 
-  /**
-   * Construct options, applying defaults.
-   * @param options optional override options.
-   */
-  constructor(options = {}) {
-    this.options = _merge({}, Options.DEFAULTS, options);
-  }
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Unwrap options.
-   * @returns {*}
-   */
-  unwrap() {
-    return this.options;
-  }
+    /**
+     * Unwrap options.
+     * @returns {*}
+     */
+    unwrap() {
+        return this.options;
+    }
 }
 
 // /////////////////////////////////////////////////////////////////////////////////////////////////
@@ -51,86 +50,86 @@ export default class Options {
  * Default options, overridden by anything of the same name.
  */
 Options.DEFAULTS = {
-  log: {
-    level: Logger.WARN,
-  },
-  demo: false,
-  useHtmlSelect: true,
-  diagram: {
-    svg: {
-      x: 0,
-      y: 0,
-      width: 1600,
-      height: 1200,
-      margin: 50,
-      floodColor: '#009fdb',
-      scale: {
-        height: true,
-        width: true,
-        minimum: 0.25,
-      },
-    },
-    title: {
-      height: 0,
-    },
-    metadata: false,
-    lifelines: {
-      header: {
-        height: 225,
-        width: 350,
-        wrapWords: 14,
-        wrapLines: 18,
-        maxLines: 5,
-      },
-      occurrences: {
-        marginTop: 50,
-        marginBottom: 75,
-        foreshortening: 5,
-        width: 50,
-      },
-      spacing: {
-        horizontal: 400,
-        vertical: 400,
-      },
-    },
-    messages: {
-      label: {
-        wrapWords: 14,
-        wrapLines: 18,
-        maxLines: 4,
-      },
-    },
-    fragments: {
-      leftMargin: 150,
-      topMargin: 200,
-      widthMargin: 300,
-      heightMargin: 350,
-      label: {
-        wrapWords: 50,
-        wrapLines: 50,
-        maxLines: 2,
-      },
-    },
-  },
-  validation: {
-    lifeline: {
-      maxLength: 100,
-      defaultValue: '',
-      replace: /[^\-\.\+ &%#@\?\(\)\[\]<>\w\d]/g,
-    },
-    message: {
-      maxLength: 100,
-      defaultValue: '',
-      replace: /[^\-\.\+ &%#@\?\(\)\[\]<>\w\d]/g,
-    },
-    notes: {
-      maxLength: 255,
-      defaultValue: '',
+    log: {
+        level: Logger.WARN
     },
-    guard: {
-      maxLength: 80,
-      defaultValue: '',
-      replace: /[^\-\.\+ &%#@\?\(\)\[\]<>\w\d]/g,
+    demo: false,
+    useHtmlSelect: true,
+    diagram: {
+        svg: {
+            x: 0,
+            y: 0,
+            width: 1600,
+            height: 1200,
+            margin: 50,
+            floodColor: '#009fdb',
+            scale: {
+                height: true,
+                width: true,
+                minimum: 0.25
+            }
+        },
+        title: {
+            height: 0
+        },
+        metadata: false,
+        lifelines: {
+            header: {
+                height: 225,
+                width: 350,
+                wrapWords: 14,
+                wrapLines: 18,
+                maxLines: 5
+            },
+            occurrences: {
+                marginTop: 50,
+                marginBottom: 75,
+                foreshortening: 5,
+                width: 50
+            },
+            spacing: {
+                horizontal: 400,
+                vertical: 400
+            }
+        },
+        messages: {
+            label: {
+                wrapWords: 14,
+                wrapLines: 18,
+                maxLines: 4
+            }
+        },
+        fragments: {
+            leftMargin: 150,
+            topMargin: 200,
+            widthMargin: 300,
+            heightMargin: 350,
+            label: {
+                wrapWords: 50,
+                wrapLines: 50,
+                maxLines: 2
+            }
+        }
     },
-  },
+    validation: {
+        lifeline: {
+            maxLength: 100,
+            defaultValue: '',
+            replace: /[^\-\.\+ &%#@\?\(\)\[\]<>\w\d]/g
+        },
+        message: {
+            maxLength: 100,
+            defaultValue: '',
+            replace: /[^\-\.\+ &%#@\?\(\)\[\]<>\w\d]/g
+        },
+        notes: {
+            maxLength: 255,
+            defaultValue: ''
+        },
+        guard: {
+            maxLength: 80,
+            defaultValue: '',
+            replace: /[^\-\.\+ &%#@\?\(\)\[\]<>\w\d]/g
+        }
+    }
 };
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/application/Application.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/application/Application.jsx
index 6889e0ab9f..b63e69a4ed 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/application/Application.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/application/Application.jsx
@@ -28,258 +28,274 @@ import Overlay from '../overlay/Overlay';
  * Application controller, also a view.
  */
 class Application extends React.Component {
+    /**
+     * Construct application view.
+     * @param props element properties.
+     * @param context react context.
+     */
+    constructor(props, context) {
+        super(props, context);
+
+        this.sequencer = Common.assertNotNull(props.sequencer);
+        this.model = this.sequencer.getModel();
+        this.metamodel = this.sequencer.getMetamodel();
+        this.options = props.options;
+        Logger.setLevel(this.options.unwrap().log.level);
+
+        // Bindings.
+
+        this.showInfoDialog = this.showInfoDialog.bind(this);
+        this.showEditDialog = this.showEditDialog.bind(this);
+        this.showConfirmDialog = this.showConfirmDialog.bind(this);
+        this.hideOverlay = this.hideOverlay.bind(this);
+        this.onMouseMove = this.onMouseMove.bind(this);
+        this.onMouseUp = this.onMouseUp.bind(this);
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
-   * Construct application view.
-   * @param props element properties.
-   * @param context react context.
-   */
-  constructor(props, context) {
-    super(props, context);
-
-    this.sequencer = Common.assertNotNull(props.sequencer);
-    this.model = this.sequencer.getModel();
-    this.metamodel = this.sequencer.getMetamodel();
-    this.options = props.options;
-    Logger.setLevel(this.options.unwrap().log.level);
-
-    // Bindings.
-
-    this.showInfoDialog = this.showInfoDialog.bind(this);
-    this.showEditDialog = this.showEditDialog.bind(this);
-    this.showConfirmDialog = this.showConfirmDialog.bind(this);
-    this.hideOverlay = this.hideOverlay.bind(this);
-    this.onMouseMove = this.onMouseMove.bind(this);
-    this.onMouseUp = this.onMouseUp.bind(this);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get application options.
-   * @returns JSON options, see Options.js.
-   */
-  getOptions() {
-    return this.options.unwrap();
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Set diagram name.
-   * @param n diagram (human-readable) name.
-   */
-  setName(n) {
-    this.diagram.setName(n);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Set diagram model.
-   * @param model diagram instance.
-   */
-  setModel(model) {
-
-    Common.assertNotNull(model);
-
-    this.model = model;
-
-    if (this.editor) {
-      this.editor.render();
+    /**
+     * Get application options.
+     * @returns JSON options, see Options.js.
+     */
+    getOptions() {
+        return this.options.unwrap();
     }
 
-    if (this.diagram) {
-      this.diagram.render();
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Set diagram name.
+     * @param n diagram (human-readable) name.
+     */
+    setName(n) {
+        this.diagram.setName(n);
     }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get Model wrapper.
-   * @returns Model.
-   */
-  getModel() {
-    return this.model;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get SVG element.
-   * @returns {*}
-   */
-  getSVG() {
-    return this.diagram.getSVG();
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get top-level widget. Provides the demo toolbar with access to the public API.
-   * @returns {*}
-   */
-  getSequencer() {
-    return this.sequencer;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Present info dialog.
-   * @param msg info message.
-   */
-  showInfoDialog(msg) {
-    this.dialog.showInfoDialog(msg);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Present error dialog.
-   * @param msg error message.
-   */
-  showErrorDialog(msg) {
-    this.dialog.showErrorDialog(msg);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Present confirmation dialog.
-   * @param msg info message.
-   * @param cb callback function to be invoked on OK.
-   */
-  showConfirmDialog(msg, cb) {
-    Common.assertType(cb, 'Function');
-    this.dialog.showConfirmDialog(msg, cb);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Present edit (textarea) dialog.
-   * @param msg prompt.
-   * @param text current edit text.
-   * @param cb callback function to be invoked on OK, taking the updated text
-   * as an argument.
-   */
-  showEditDialog(msg, text, cb) {
-    this.dialog.showEditDialog(msg, text, cb);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Select lifeline by ID.
-   * @param id lifeline ID.
-   */
-  selectLifeline(id) {
-    if (this.editor) {
-      this.editor.selectLifeline(id);
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Set diagram model.
+     * @param model diagram instance.
+     */
+    setModel(model) {
+        Common.assertNotNull(model);
+
+        this.model = model;
+
+        if (this.editor) {
+            this.editor.render();
+        }
+
+        if (this.diagram) {
+            this.diagram.render();
+        }
     }
-    if (this.diagram) {
-      this.diagram.selectLifeline(id);
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get Model wrapper.
+     * @returns Model.
+     */
+    getModel() {
+        return this.model;
     }
-  }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
-   * Select message by ID.
-   * @param id message ID.
-   */
-  selectMessage(id) {
-    if (this.editor) {
-      this.editor.selectMessage(id);
+    /**
+     * Get SVG element.
+     * @returns {*}
+     */
+    getSVG() {
+        return this.diagram.getSVG();
     }
-    if (this.diagram) {
-      this.diagram.selectMessage(id);
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get top-level widget. Provides the demo toolbar with access to the public API.
+     * @returns {*}
+     */
+    getSequencer() {
+        return this.sequencer;
     }
-  }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
-   * (Re)render just the diagram.
-   */
-  renderDiagram() {
-    this.diagram.redraw();
-  }
+    /**
+     * Present info dialog.
+     * @param msg info message.
+     */
+    showInfoDialog(msg) {
+        this.dialog.showInfoDialog(msg);
+    }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
-   * Show overlay between application and modal dialog.
-   */
-  showOverlay() {
-    if (this.overlay) {
-      this.overlay.setVisible(true);
+    /**
+     * Present error dialog.
+     * @param msg error message.
+     */
+    showErrorDialog(msg) {
+        this.dialog.showErrorDialog(msg);
     }
-  }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Present confirmation dialog.
+     * @param msg info message.
+     * @param cb callback function to be invoked on OK.
+     */
+    showConfirmDialog(msg, cb) {
+        Common.assertType(cb, 'Function');
+        this.dialog.showConfirmDialog(msg, cb);
+    }
 
-  /**
-   * Hide overlay between application and modal dialog.
-   */
-  hideOverlay() {
-    if (this.overlay) {
-      this.overlay.setVisible(false);
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Present edit (textarea) dialog.
+     * @param msg prompt.
+     * @param text current edit text.
+     * @param cb callback function to be invoked on OK, taking the updated text
+     * as an argument.
+     */
+    showEditDialog(msg, text, cb) {
+        this.dialog.showEditDialog(msg, text, cb);
     }
-  }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Select lifeline by ID.
+     * @param id lifeline ID.
+     */
+    selectLifeline(id) {
+        if (this.editor) {
+            this.editor.selectLifeline(id);
+        }
+        if (this.diagram) {
+            this.diagram.selectLifeline(id);
+        }
+    }
 
-  /**
-   * Capture mouse move events, for resize.
-   * @param event move event.
-   */
-  onMouseMove(event) {
-    if (this.editor) {
-      this.editor.onMouseMove(event);
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Select message by ID.
+     * @param id message ID.
+     */
+    selectMessage(id) {
+        if (this.editor) {
+            this.editor.selectMessage(id);
+        }
+        if (this.diagram) {
+            this.diagram.selectMessage(id);
+        }
     }
-  }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
-   * Propagate mouse event to the editor that manages the resize.
-   */
-  onMouseUp() {
-    if (this.editor) {
-      this.editor.onMouseUp();
+    /**
+     * (Re)render just the diagram.
+     */
+    renderDiagram() {
+        this.diagram.redraw();
     }
-  }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
-   * Render current model state.
-   */
-  render() {
+    /**
+     * Show overlay between application and modal dialog.
+     */
+    showOverlay() {
+        if (this.overlay) {
+            this.overlay.setVisible(true);
+        }
+    }
 
-    return (
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-      <div className="asdcs-control" onMouseMove={this.onMouseMove} onMouseUp={this.onMouseUp}>
+    /**
+     * Hide overlay between application and modal dialog.
+     */
+    hideOverlay() {
+        if (this.overlay) {
+            this.overlay.setVisible(false);
+        }
+    }
 
-        <Editor application={this} ref={(r) => { this.editor = r; }} />
-        <Diagram application={this} ref={(r) => { this.diagram = r; }} />
-        <Dialog application={this} ref={(r) => { this.dialog = r; }} />
-        <Export />
-        <Overlay application={this} ref={(r) => { this.overlay = r; }} />
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-      </div>
-    );
-  }
+    /**
+     * Capture mouse move events, for resize.
+     * @param event move event.
+     */
+    onMouseMove(event) {
+        if (this.editor) {
+            this.editor.onMouseMove(event);
+        }
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
+    /**
+     * Propagate mouse event to the editor that manages the resize.
+     */
+    onMouseUp() {
+        if (this.editor) {
+            this.editor.onMouseUp();
+        }
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Render current model state.
+     */
+    render() {
+        return (
+            <div
+                className="asdcs-control"
+                onMouseMove={this.onMouseMove}
+                onMouseUp={this.onMouseUp}>
+                <Editor
+                    application={this}
+                    ref={r => {
+                        this.editor = r;
+                    }}
+                />
+                <Diagram
+                    application={this}
+                    ref={r => {
+                        this.diagram = r;
+                    }}
+                />
+                <Dialog
+                    application={this}
+                    ref={r => {
+                        this.dialog = r;
+                    }}
+                />
+                <Export />
+                <Overlay
+                    application={this}
+                    ref={r => {
+                        this.overlay = r;
+                    }}
+                />
+            </div>
+        );
+    }
 }
 
 /** React properties. */
 Application.propTypes = {
-  options: PropTypes.object.isRequired,
-  sequencer: PropTypes.object.isRequired,
+    options: PropTypes.object.isRequired,
+    sequencer: PropTypes.object.isRequired
 };
 
 export default Application;
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/Diagram.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/Diagram.jsx
index b3544d7066..129a1afc2b 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/Diagram.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/Diagram.jsx
@@ -28,898 +28,1013 @@ import Popup from './components/popup/Popup';
  * SVG diagram view.
  */
 class Diagram extends React.Component {
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Construct React view.
-   * @param props properties.
-   * @param context context.
-   */
-  constructor(props, context) {
-    super(props, context);
-
-    this.application = Common.assertNotNull(props.application);
-    this.options = this.application.getOptions().diagram;
-
-    this.events = {};
-    this.state = {
-      height: 0,
-      width: 0,
-    };
-
-    this.templates = {
-      diagram: _template(require('./templates/diagram.html')),
-      lifeline: _template(require('./templates/lifeline.html')),
-      message: _template(require('./templates/message.html')),
-      occurrence: _template(require('./templates/occurrence.html')),
-      fragment: _template(require('./templates/fragment.html')),
-      title: _template(require('./templates/title.html')),
-    };
-
-    this.handleResize = this.handleResize.bind(this);
-    this.initialTransformX = 0;
-    this.initialTransformY = 0;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Set diagram name.
-   * @param n name.
-   */
-  setName(n) {
-    this.svg.select('').text(n);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get SVG from diagram.
-   * @returns {*|string}
-   */
-  getSVG() {
-    const svg = this.svg.node().outerHTML;
-    return svg.replace('<svg ', '<svg xmlns="http://www.w3.org/2000/svg" ');
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Select message by ID.
-   * @param id message ID.
-   */
-  selectMessage(id) {
-    const sel = this.svg.selectAll('g.asdcs-diagram-message-container');
-    sel.classed('asdcs-active', false);
-    sel.selectAll('rect.asdcs-diagram-message-bg').attr('filter', null);
-    if (id) {
-      const parent = this.svg.select(`g.asdcs-diagram-message-container[data-id="${id}"]`);
-      parent.classed('asdcs-active', true);
-      parent.selectAll('rect.asdcs-diagram-message-bg').attr('filter', 'url(#asdcsSvgHighlight)');
-    }
-    this._showNotesPopup(id);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Select lifeline by ID.
-   * @param id lifeline ID.
-   */
-  selectLifeline(id) {
-    const sel = this.svg.selectAll('g.asdcs-diagram-lifeline-container');
-    sel.classed('asdcs-active', false);
-    sel.selectAll('rect').attr('filter', null);
-    if (id) {
-      const parent = this.svg.select(`g.asdcs-diagram-lifeline-container[data-id="${id}"]`);
-      parent.selectAll('rect').attr('filter', 'url(#asdcsSvgHighlight)');
-      parent.classed('asdcs-active', true);
-    }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle resize, including initial sizing.
-   */
-  handleResize() {
-    if (this.wrapper) {
-      const height = this.wrapper.offsetHeight;
-      const width = this.wrapper.offsetWidth;
-      if (this.state.height !== height || this.state.width !== width) {
-        this.setState({ height, width });
-      }
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Construct React view.
+     * @param props properties.
+     * @param context context.
+     */
+    constructor(props, context) {
+        super(props, context);
+
+        this.application = Common.assertNotNull(props.application);
+        this.options = this.application.getOptions().diagram;
+
+        this.events = {};
+        this.state = {
+            height: 0,
+            width: 0
+        };
+
+        this.templates = {
+            diagram: _template(require('./templates/diagram.html')),
+            lifeline: _template(require('./templates/lifeline.html')),
+            message: _template(require('./templates/message.html')),
+            occurrence: _template(require('./templates/occurrence.html')),
+            fragment: _template(require('./templates/fragment.html')),
+            title: _template(require('./templates/title.html'))
+        };
+
+        this.handleResize = this.handleResize.bind(this);
+        this.initialTransformX = 0;
+        this.initialTransformY = 0;
     }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * (Re)render diagram.
-   */
-  render() {
-
-    const model = this.application.getModel();
-    const modelJSON = model.unwrap();
-    const name = modelJSON.diagram.metadata.name;
-    const options = this.application.getOptions();
-    const titleHeight = options.diagram.title.height;
-    const titleClass = (titleHeight && titleHeight > 0) ? `height:${titleHeight}` : 'asdcs-hidden';
-
-    return (
-      <div className="asdcs-diagram">
-        <div className={`asdcs-diagram-name ${titleClass}`}>{name}</div>
-        <div className="asdcs-diagram-svg" ref={(r) => { this.wrapper = r; }}></div>
-        <Popup visible={false} ref={(r) => { this.popup = r; }} />
-      </div>
-    );
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  redraw() {
-    this.updateSVG();
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Initial render.
-   */
-  componentDidMount() {
-    window.addEventListener('resize', this.handleResize);
-    this.updateSVG();
-
-    // Insurance:
-
-    setTimeout(() => {
-      this.handleResize();
-    }, 500);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.handleResize);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Render on update.
-   */
-  componentDidUpdate() {
-    this.updateSVG();
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Redraw SVG diagram. So far it's fast enough that it doesn't seem to matter whether
-   * it's completely redrawn.
-   */
-  updateSVG() {
-
-    if (!this.svg) {
-      const svgparams = _merge({}, this.options.svg);
-      this.wrapper.innerHTML = this.templates.diagram(svgparams);
-      this.svg = d3.select(this.wrapper).select('svg');
-    }
-
-    if (this.state.height === 0) {
-
-      // We'll get a resize event, and the height will be non-zero when it's actually time.
 
-      return;
-    }
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-    if (this.state.height && this.state.width) {
-      const margin = this.options.svg.margin;
-      const x = -margin;
-      const y = -margin;
-      const height = this.state.height + (margin * 2);
-      const width = this.state.width + (margin * 2);
-      const viewBox = `${x} ${y} ${width} ${height}`;
-      this.svg.attr('viewBox', viewBox);
+    /**
+     * Set diagram name.
+     * @param n name.
+     */
+    setName(n) {
+        this.svg.select('').text(n);
     }
 
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-    // If we've already rendered, then save the current scale/translate so that we
-    // can reapply it after rendering.
-
-    const gContentSelection = this.svg.selectAll('g.asdcs-diagram-content');
-    if (gContentSelection.size() === 1) {
-      const transform = gContentSelection.attr('transform');
-      if (transform) {
-        this.savedTransform = transform;
-      }
+    /**
+     * Get SVG from diagram.
+     * @returns {*|string}
+     */
+    getSVG() {
+        const svg = this.svg.node().outerHTML;
+        return svg.replace('<svg ', '<svg xmlns="http://www.w3.org/2000/svg" ');
     }
 
-    // Empty the document. We're starting again.
-
-    this.svg.selectAll('.asdcs-diagram-content').remove();
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Select message by ID.
+     * @param id message ID.
+     */
+    selectMessage(id) {
+        const sel = this.svg.selectAll('g.asdcs-diagram-message-container');
+        sel.classed('asdcs-active', false);
+        sel.selectAll('rect.asdcs-diagram-message-bg').attr('filter', null);
+        if (id) {
+            const parent = this.svg.select(
+                `g.asdcs-diagram-message-container[data-id="${id}"]`
+            );
+            parent.classed('asdcs-active', true);
+            parent
+                .selectAll('rect.asdcs-diagram-message-bg')
+                .attr('filter', 'url(#asdcsSvgHighlight)');
+        }
+        this._showNotesPopup(id);
+    }
 
-    // Extract the model.
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Select lifeline by ID.
+     * @param id lifeline ID.
+     */
+    selectLifeline(id) {
+        const sel = this.svg.selectAll('g.asdcs-diagram-lifeline-container');
+        sel.classed('asdcs-active', false);
+        sel.selectAll('rect').attr('filter', null);
+        if (id) {
+            const parent = this.svg.select(
+                `g.asdcs-diagram-lifeline-container[data-id="${id}"]`
+            );
+            parent.selectAll('rect').attr('filter', 'url(#asdcsSvgHighlight)');
+            parent.classed('asdcs-active', true);
+        }
+    }
 
-    const model = this.application.getModel();
-    if (!model) {
-      return;
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle resize, including initial sizing.
+     */
+    handleResize() {
+        if (this.wrapper) {
+            const height = this.wrapper.offsetHeight;
+            const width = this.wrapper.offsetWidth;
+            if (this.state.height !== height || this.state.width !== width) {
+                this.setState({ height, width });
+            }
+        }
     }
-    const modelJSON = model.unwrap();
 
-    // Extract dimension options.
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * (Re)render diagram.
+     */
+    render() {
+        const model = this.application.getModel();
+        const modelJSON = model.unwrap();
+        const name = modelJSON.diagram.metadata.name;
+        const options = this.application.getOptions();
+        const titleHeight = options.diagram.title.height;
+        const titleClass =
+            titleHeight && titleHeight > 0
+                ? `height:${titleHeight}`
+                : 'asdcs-hidden';
+
+        return (
+            <div className="asdcs-diagram">
+                <div className={`asdcs-diagram-name ${titleClass}`}>{name}</div>
+                <div
+                    className="asdcs-diagram-svg"
+                    ref={r => {
+                        this.wrapper = r;
+                    }}
+                />
+                <Popup
+                    visible={false}
+                    ref={r => {
+                        this.popup = r;
+                    }}
+                />
+            </div>
+        );
+    }
 
-    const header = this.options.lifelines.header;
-    const spacing = this.options.lifelines.spacing;
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-    // Make separate container elements so that we can control Z order.
+    redraw() {
+        this.updateSVG();
+    }
 
-    const gContent = this.svg.append('g').attr('class', 'asdcs-diagram-content');
-    const gLifelines = gContent.append('g').attr('class', 'asdcs-diagram-lifelines');
-    const gCanvas = gContent.append('g').attr('class', 'asdcs-diagram-canvas');
-    gCanvas.append('g').attr('class', 'asdcs-diagram-occurrences');
-    gCanvas.append('g').attr('class', 'asdcs-diagram-fragments');
-    gCanvas.append('g').attr('class', 'asdcs-diagram-messages');
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-    // Lifelines -----------------------------------------------------------------------------------
+    /**
+     * Initial render.
+     */
+    componentDidMount() {
+        window.addEventListener('resize', this.handleResize);
+        this.updateSVG();
 
-    const actorsById = {};
-    const positionsByMessageId = {};
-    const lifelines = [];
-    for (const actor of modelJSON.diagram.lifelines) {
-      const x = (header.width / 2) + (lifelines.length * spacing.horizontal);
-      Diagram._processLifeline(actor, x);
-      lifelines.push({ x, actor });
-      actorsById[actor.id] = actor;
-    }
+        // Insurance:
 
-    // Messages ------------------------------------------------------------------------------------
-
-    // Analyze occurrence information.
-
-    const occurrences = model.analyzeOccurrences();
-    const fragments = model.analyzeFragments();
-    let y = this.options.lifelines.header.height + spacing.vertical;
-    let messageIndex = 0;
-    for (const step of modelJSON.diagram.steps) {
-      if (step.message) {
-        positionsByMessageId[step.message.id] = positionsByMessageId[step.message.id] || {};
-        positionsByMessageId[step.message.id].y = y;
-        this._drawMessage(gCanvas, step.message, y, actorsById,
-          positionsByMessageId, ++messageIndex, occurrences, fragments);
-      }
-      y += spacing.vertical;
+        setTimeout(() => {
+            this.handleResize();
+        }, 500);
     }
 
-    // ---------------------------------------------------------------------------------------------
-
-    // Draw the actual (dashed) lifelines in a background <g>.
-
-    this._drawLifelines(gLifelines, lifelines, y);
-
-    // Initialize mouse event handlers.
-
-    this._initMouseEvents(gLifelines, gCanvas);
-
-    // Scale to fit.
-
-    const bb = gContent.node().getBBox();
-    this._initZoom(gContent, bb.width, bb.height);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Draw message into SVG canvas.
-   * @param gCanvas container.
-   * @param message message to be rendered.
-   * @param y current y position.
-   * @param actorsById actor lookup.
-   * @param positionsByMessageId x- and y-position of each message.
-   * @param messageIndex where we are in the set of messages to be rendered.
-   * @param oData occurrences info.
-   * @param fData fragments info.
-   * @private
-   */
-  _drawMessage(gCanvas, message, y, actorsById, positionsByMessageId,
-               messageIndex, oData, fData) {
-
-    Common.assertNotNull(oData);
-
-    const request = message.type === 'request';
-    const fromActor = request ? actorsById[message.from] : actorsById[message.to];
-    const toActor = request ? actorsById[message.to] : actorsById[message.from];
-
-    if (!fromActor) {
-      Logger.warn(`Cannot draw message ${JSON.stringify(message)}: 'from' not found.`);
-      return;
-    }
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-    if (!toActor) {
-      Logger.warn(`Cannot draw message ${JSON.stringify(message)}: 'to' not found.`);
-      return;
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.handleResize);
     }
 
-    // Occurrences. --------------------------------------------------------------------------------
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-    if (message.occurrence) {
-      Logger.debug(`Found occurrence for ${message.name}: ${JSON.stringify(message.occurrence)}`);
+    /**
+     * Render on update.
+     */
+    componentDidUpdate() {
+        this.updateSVG();
     }
-    const activeTo = Diagram._calcActive(oData, toActor.id);
-    this._drawOccurrence(gCanvas, oData, positionsByMessageId, fromActor, message.id);
-    this._drawOccurrence(gCanvas, oData, positionsByMessageId, toActor, message.id);
-    const activeFrom = Diagram._calcActive(oData, fromActor.id);
-
-    // Messages. -----------------------------------------------------------------------------------
-
-    const gMessages = gCanvas.select('g.asdcs-diagram-messages');
-
-    // Save positions for later.
-
-    const positions = positionsByMessageId[message.id];
-    positions.x0 = fromActor.x;
-    positions.x1 = toActor.x;
-
-    // Calculate.
 
-    const leftToRight = fromActor.x < toActor.x;
-    const loopback = (message.to === message.from);
-    const x1 = this._calcMessageX(activeTo, toActor.x, true, leftToRight);
-    const x0 = loopback ? x1 : this._calcMessageX(activeFrom, fromActor.x, false, leftToRight);
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Redraw SVG diagram. So far it's fast enough that it doesn't seem to matter whether
+     * it's completely redrawn.
+     */
+    updateSVG() {
+        if (!this.svg) {
+            const svgparams = _merge({}, this.options.svg);
+            this.wrapper.innerHTML = this.templates.diagram(svgparams);
+            this.svg = d3.select(this.wrapper).select('svg');
+        }
 
-    let messagePath;
-    if (loopback) {
+        if (this.state.height === 0) {
+            // We'll get a resize event, and the height will be non-zero when it's actually time.
 
-      // To self.
+            return;
+        }
 
-      messagePath = `M${x1},${y}`;
-      messagePath = `${messagePath} L${x1 + 200},${y}`;
-      messagePath = `${messagePath} L${x1 + 200},${y + 50}`;
-      messagePath = `${messagePath} L${x1},${y + 50}`;
-    } else {
+        if (this.state.height && this.state.width) {
+            const margin = this.options.svg.margin;
+            const x = -margin;
+            const y = -margin;
+            const height = this.state.height + margin * 2;
+            const width = this.state.width + margin * 2;
+            const viewBox = `${x} ${y} ${width} ${height}`;
+            this.svg.attr('viewBox', viewBox);
+        }
 
-      // Between lifelines.
+        // If we've already rendered, then save the current scale/translate so that we
+        // can reapply it after rendering.
 
-      messagePath = `M${x0},${y}`;
-      messagePath = `${messagePath} L${x1},${y}`;
-    }
+        const gContentSelection = this.svg.selectAll('g.asdcs-diagram-content');
+        if (gContentSelection.size() === 1) {
+            const transform = gContentSelection.attr('transform');
+            if (transform) {
+                this.savedTransform = transform;
+            }
+        }
 
-    const styles = Diagram._getMessageStyles(message);
+        // Empty the document. We're starting again.
 
-    // Split message over lines.
+        this.svg.selectAll('.asdcs-diagram-content').remove();
 
-    const messageWithPrefix = `${messageIndex}. ${message.name}`;
-    const maxLines = this.options.messages.label.maxLines;
-    const wrapWords = this.options.messages.label.wrapWords;
-    const wrapLines = this.options.messages.label.wrapLines;
-    const messageLines = Common.tokenize(messageWithPrefix, wrapWords, wrapLines, maxLines);
+        // Extract the model.
 
-    const messageTxt = this.templates.message({
-      id: message.id,
-      classes: styles.css,
-      marker: styles.marker,
-      dasharray: styles.dasharray,
-      labels: messageLines,
-      lines: maxLines,
-      path: messagePath,
-      index: messageIndex,
-      x0, x1, y,
-    });
+        const model = this.application.getModel();
+        if (!model) {
+            return;
+        }
+        const modelJSON = model.unwrap();
+
+        // Extract dimension options.
+
+        const header = this.options.lifelines.header;
+        const spacing = this.options.lifelines.spacing;
+
+        // Make separate container elements so that we can control Z order.
+
+        const gContent = this.svg
+            .append('g')
+            .attr('class', 'asdcs-diagram-content');
+        const gLifelines = gContent
+            .append('g')
+            .attr('class', 'asdcs-diagram-lifelines');
+        const gCanvas = gContent
+            .append('g')
+            .attr('class', 'asdcs-diagram-canvas');
+        gCanvas.append('g').attr('class', 'asdcs-diagram-occurrences');
+        gCanvas.append('g').attr('class', 'asdcs-diagram-fragments');
+        gCanvas.append('g').attr('class', 'asdcs-diagram-messages');
+
+        // Lifelines -----------------------------------------------------------------------------------
+
+        const actorsById = {};
+        const positionsByMessageId = {};
+        const lifelines = [];
+        for (const actor of modelJSON.diagram.lifelines) {
+            const x = header.width / 2 + lifelines.length * spacing.horizontal;
+            Diagram._processLifeline(actor, x);
+            lifelines.push({ x, actor });
+            actorsById[actor.id] = actor;
+        }
 
-    const messageEl = Common.txt2dom(messageTxt);
-    const gMessage = gMessages.append('g');
-    Common.dom2svg(messageEl, gMessage);
+        // Messages ------------------------------------------------------------------------------------
+
+        // Analyze occurrence information.
+
+        const occurrences = model.analyzeOccurrences();
+        const fragments = model.analyzeFragments();
+        let y = this.options.lifelines.header.height + spacing.vertical;
+        let messageIndex = 0;
+        for (const step of modelJSON.diagram.steps) {
+            if (step.message) {
+                positionsByMessageId[step.message.id] =
+                    positionsByMessageId[step.message.id] || {};
+                positionsByMessageId[step.message.id].y = y;
+                this._drawMessage(
+                    gCanvas,
+                    step.message,
+                    y,
+                    actorsById,
+                    positionsByMessageId,
+                    ++messageIndex,
+                    occurrences,
+                    fragments
+                );
+            }
+            y += spacing.vertical;
+        }
 
-    // Set the background's bounding box to that of the text,
-    // so that they fit snugly.
+        // ---------------------------------------------------------------------------------------------
 
-    const labelBB = gMessage.select('.asdcs-diagram-message-label').node().getBBox();
-    gMessage.select('.asdcs-diagram-message-label-bg')
-      .attr('x', labelBB.x)
-      .attr('y', labelBB.y)
-      .attr('height', labelBB.height)
-      .attr('width', labelBB.width);
+        // Draw the actual (dashed) lifelines in a background <g>.
 
-    // Fragments. ----------------------------------------------------------------------------------
+        this._drawLifelines(gLifelines, lifelines, y);
 
-    const fragment = fData[message.id];
-    if (fragment) {
+        // Initialize mouse event handlers.
 
-      // It ends on this message.
+        this._initMouseEvents(gLifelines, gCanvas);
 
-      this._drawFragment(gCanvas, fragment, positionsByMessageId);
+        // Scale to fit.
 
+        const bb = gContent.node().getBBox();
+        this._initZoom(gContent, bb.width, bb.height);
     }
-  }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Draw message into SVG canvas.
+     * @param gCanvas container.
+     * @param message message to be rendered.
+     * @param y current y position.
+     * @param actorsById actor lookup.
+     * @param positionsByMessageId x- and y-position of each message.
+     * @param messageIndex where we are in the set of messages to be rendered.
+     * @param oData occurrences info.
+     * @param fData fragments info.
+     * @private
+     */
+    _drawMessage(
+        gCanvas,
+        message,
+        y,
+        actorsById,
+        positionsByMessageId,
+        messageIndex,
+        oData,
+        fData
+    ) {
+        Common.assertNotNull(oData);
+
+        const request = message.type === 'request';
+        const fromActor = request
+            ? actorsById[message.from]
+            : actorsById[message.to];
+        const toActor = request
+            ? actorsById[message.to]
+            : actorsById[message.from];
+
+        if (!fromActor) {
+            Logger.warn(
+                `Cannot draw message ${JSON.stringify(
+                    message
+                )}: 'from' not found.`
+            );
+            return;
+        }
 
-  /**
-   * Draw a single occurrence.
-   * @param gCanvas container.
-   * @param oData occurrence data.
-   * @param positionsByMessageId map of y positions by message ID.
-   * @param actor wrapper containing lifeline ID (.id), position (.x) and name (.name).
-   * @param messageId message identifier.
-   * @private
-   */
-  _drawOccurrence(gCanvas, oData, positionsByMessageId, actor, messageId) {
+        if (!toActor) {
+            Logger.warn(
+                `Cannot draw message ${JSON.stringify(
+                    message
+                )}: 'to' not found.`
+            );
+            return;
+        }
 
-    Common.assertType(oData, 'Object');
-    Common.assertType(positionsByMessageId, 'Object');
-    Common.assertType(actor, 'Object');
-    Common.assertType(messageId, 'String');
+        // Occurrences. --------------------------------------------------------------------------------
 
-    const gOccurrences = gCanvas.select('g.asdcs-diagram-occurrences');
+        if (message.occurrence) {
+            Logger.debug(
+                `Found occurrence for ${message.name}: ${JSON.stringify(
+                    message.occurrence
+                )}`
+            );
+        }
+        const activeTo = Diagram._calcActive(oData, toActor.id);
+        this._drawOccurrence(
+            gCanvas,
+            oData,
+            positionsByMessageId,
+            fromActor,
+            message.id
+        );
+        this._drawOccurrence(
+            gCanvas,
+            oData,
+            positionsByMessageId,
+            toActor,
+            message.id
+        );
+        const activeFrom = Diagram._calcActive(oData, fromActor.id);
+
+        // Messages. -----------------------------------------------------------------------------------
+
+        const gMessages = gCanvas.select('g.asdcs-diagram-messages');
+
+        // Save positions for later.
+
+        const positions = positionsByMessageId[message.id];
+        positions.x0 = fromActor.x;
+        positions.x1 = toActor.x;
+
+        // Calculate.
+
+        const leftToRight = fromActor.x < toActor.x;
+        const loopback = message.to === message.from;
+        const x1 = this._calcMessageX(activeTo, toActor.x, true, leftToRight);
+        const x0 = loopback
+            ? x1
+            : this._calcMessageX(activeFrom, fromActor.x, false, leftToRight);
+
+        let messagePath;
+        if (loopback) {
+            // To self.
+
+            messagePath = `M${x1},${y}`;
+            messagePath = `${messagePath} L${x1 + 200},${y}`;
+            messagePath = `${messagePath} L${x1 + 200},${y + 50}`;
+            messagePath = `${messagePath} L${x1},${y + 50}`;
+        } else {
+            // Between lifelines.
 
-    const oOptions = this.options.lifelines.occurrences;
-    const oWidth = oOptions.width;
-    const oHalfWidth = oWidth / 2;
-    const oForeshortening = oOptions.foreshortening;
-    const oMarginTop = oOptions.marginTop;
-    const oMarginBottom = oOptions.marginBottom;
-    const o = oData[actor.id];
+            messagePath = `M${x0},${y}`;
+            messagePath = `${messagePath} L${x1},${y}`;
+        }
 
-    const active = Diagram._calcActive(oData, actor.id);
+        const styles = Diagram._getMessageStyles(message);
+
+        // Split message over lines.
+
+        const messageWithPrefix = `${messageIndex}. ${message.name}`;
+        const maxLines = this.options.messages.label.maxLines;
+        const wrapWords = this.options.messages.label.wrapWords;
+        const wrapLines = this.options.messages.label.wrapLines;
+        const messageLines = Common.tokenize(
+            messageWithPrefix,
+            wrapWords,
+            wrapLines,
+            maxLines
+        );
+
+        const messageTxt = this.templates.message({
+            id: message.id,
+            classes: styles.css,
+            marker: styles.marker,
+            dasharray: styles.dasharray,
+            labels: messageLines,
+            lines: maxLines,
+            path: messagePath,
+            index: messageIndex,
+            x0,
+            x1,
+            y
+        });
+
+        const messageEl = Common.txt2dom(messageTxt);
+        const gMessage = gMessages.append('g');
+        Common.dom2svg(messageEl, gMessage);
+
+        // Set the background's bounding box to that of the text,
+        // so that they fit snugly.
+
+        const labelBB = gMessage
+            .select('.asdcs-diagram-message-label')
+            .node()
+            .getBBox();
+        gMessage
+            .select('.asdcs-diagram-message-label-bg')
+            .attr('x', labelBB.x)
+            .attr('y', labelBB.y)
+            .attr('height', labelBB.height)
+            .attr('width', labelBB.width);
 
-    const x = (actor.x - oHalfWidth) + (active * oWidth);
-    const positions = positionsByMessageId[messageId];
-    const y = positions.y;
+        // Fragments. ----------------------------------------------------------------------------------
 
-    let draw = true;
-    if (o) {
+        const fragment = fData[message.id];
+        if (fragment) {
+            // It ends on this message.
 
-      if (o.start[messageId]) {
+            this._drawFragment(gCanvas, fragment, positionsByMessageId);
+        }
+    }
 
-        // Starting, but drawing nothing until we find the end.
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Draw a single occurrence.
+     * @param gCanvas container.
+     * @param oData occurrence data.
+     * @param positionsByMessageId map of y positions by message ID.
+     * @param actor wrapper containing lifeline ID (.id), position (.x) and name (.name).
+     * @param messageId message identifier.
+     * @private
+     */
+    _drawOccurrence(gCanvas, oData, positionsByMessageId, actor, messageId) {
+        Common.assertType(oData, 'Object');
+        Common.assertType(positionsByMessageId, 'Object');
+        Common.assertType(actor, 'Object');
+        Common.assertType(messageId, 'String');
+
+        const gOccurrences = gCanvas.select('g.asdcs-diagram-occurrences');
+
+        const oOptions = this.options.lifelines.occurrences;
+        const oWidth = oOptions.width;
+        const oHalfWidth = oWidth / 2;
+        const oForeshortening = oOptions.foreshortening;
+        const oMarginTop = oOptions.marginTop;
+        const oMarginBottom = oOptions.marginBottom;
+        const o = oData[actor.id];
+
+        const active = Diagram._calcActive(oData, actor.id);
+
+        const x = actor.x - oHalfWidth + active * oWidth;
+        const positions = positionsByMessageId[messageId];
+        const y = positions.y;
+
+        let draw = true;
+        if (o) {
+            if (o.start[messageId]) {
+                // Starting, but drawing nothing until we find the end.
+
+                o.active.push(messageId);
+                draw = false;
+            } else if (active > 0) {
+                const startMessageId = o.stop[messageId];
+                if (startMessageId) {
+                    // OK, it ends here. Draw the occurrence box.
+
+                    o.active.pop();
+                    const foreshorteningY = active * oForeshortening;
+                    const startY = positionsByMessageId[startMessageId].y;
+                    const height =
+                        oMarginTop +
+                        oMarginBottom +
+                        (y - startY) -
+                        foreshorteningY * 2;
+                    const oProps = {
+                        x: actor.x - oHalfWidth + (active - 1) * oWidth,
+                        y: startY - oMarginTop + foreshorteningY,
+                        height,
+                        width: oWidth
+                    };
+
+                    const occurrenceTxt = this.templates.occurrence(oProps);
+                    const occurrenceEl = Common.txt2dom(occurrenceTxt);
+                    Common.dom2svg(occurrenceEl, gOccurrences.append('g'));
+                }
+                draw = false;
+            }
+        }
 
-        o.active.push(messageId);
-        draw = false;
+        if (draw) {
+            // Seems this is a singleton occurrence. We just draw a wee box around it.
+
+            const height = oMarginTop + oMarginBottom;
+            const occurrenceProperties = {
+                x,
+                y: y - oMarginTop,
+                height,
+                width: oWidth
+            };
+            const defaultTxt = this.templates.occurrence(occurrenceProperties);
+            const defaultEl = Common.txt2dom(defaultTxt);
+            Common.dom2svg(defaultEl, gOccurrences.append('g'));
+        }
+    }
 
-      } else if (active > 0) {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Draw box(es) around fragment(s).
+     * @param gCanvas container.
+     * @param fragment fragment definition, corresponding to its final (stop) message.
+     * @param positionsByMessageId message dimensions.
+     * @private
+     */
+    _drawFragment(gCanvas, fragment, positionsByMessageId) {
+        const optFragments = this.options.fragments;
+        const gFragments = gCanvas.select('g.asdcs-diagram-fragments');
+        const p1 = positionsByMessageId[fragment.stop];
+        if (p1 && fragment.start && fragment.start.length > 0) {
+            for (const start of fragment.start) {
+                const message = this.application
+                    .getModel()
+                    .getMessageById(start);
+                const bounds = this._calcFragmentBounds(
+                    message,
+                    fragment,
+                    positionsByMessageId
+                );
+                if (bounds) {
+                    const maxLines = this.options.fragments.label.maxLines;
+                    const wrapWords = this.options.fragments.label.wrapWords;
+                    const wrapLines = this.options.fragments.label.wrapLines;
+                    const lines = Common.tokenize(
+                        message.fragment.guard,
+                        wrapWords,
+                        wrapLines,
+                        maxLines
+                    );
+
+                    const params = {
+                        id: start,
+                        x: bounds.x0 - optFragments.leftMargin,
+                        y: bounds.y0 - optFragments.topMargin,
+                        height:
+                            bounds.y1 - bounds.y0 + optFragments.heightMargin,
+                        width: bounds.x1 - bounds.x0 + optFragments.widthMargin,
+                        operator: message.fragment.operator || 'alt',
+                        lines
+                    };
+
+                    const fragmentTxt = this.templates.fragment(params);
+                    const fragmentEl = Common.txt2dom(fragmentTxt);
+                    const gFragment = gFragments.append('g');
+                    Common.dom2svg(fragmentEl, gFragment);
+
+                    const labelBB = gFragment
+                        .select('.asdcs-diagram-fragment-guard')
+                        .node()
+                        .getBBox();
+                    gFragment
+                        .select('.asdcs-diagram-fragment-guard-bg')
+                        .attr('x', labelBB.x)
+                        .attr('y', labelBB.y)
+                        .attr('height', labelBB.height)
+                        .attr('width', labelBB.width);
+                } else {
+                    Logger.warn(`Bad fragment: ${JSON.stringify(fragment)}`);
+                }
+            }
+        }
+    }
 
-        const startMessageId = o.stop[messageId];
-        if (startMessageId) {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    _calcFragmentBounds(startMessage, fragment, positionsByMessageId) {
+        if (startMessage) {
+            const steps = this.application.getModel().unwrap().diagram.steps;
+            const bounds = { x0: 99999, x1: 0, y0: 99999, y1: 0 };
+            let foundStart = false;
+            let foundStop = false;
+            for (const step of steps) {
+                const message = step.message;
+                if (message) {
+                    if (message.id === startMessage.id) {
+                        foundStart = true;
+                    }
+                    if (foundStart && !foundStop) {
+                        const positions = positionsByMessageId[message.id];
+                        if (positions) {
+                            bounds.x0 = Math.min(
+                                bounds.x0,
+                                Math.min(positions.x0, positions.x1)
+                            );
+                            bounds.y0 = Math.min(bounds.y0, positions.y);
+                            bounds.x1 = Math.max(
+                                bounds.x1,
+                                Math.max(positions.x0, positions.x1)
+                            );
+                            bounds.y1 = Math.max(bounds.y1, positions.y);
+                        } else {
+                            // This probably means it hasn't been recorded yet, which is fine, because
+                            // we draw fragments from where they END.
+                            foundStop = true;
+                        }
+                    }
+
+                    if (message.id === fragment.stop) {
+                        foundStop = true;
+                    }
+                }
+            }
+            return bounds;
+        }
+        return undefined;
+    }
 
-          // OK, it ends here. Draw the occurrence box.
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Draw all lifelines.
+     * @param gLifelines lifelines container.
+     * @param lifelines lifelines definitions.
+     * @param y height.
+     * @private
+     */
+    _drawLifelines(gLifelines, lifelines, y) {
+        const maxLines = this.options.lifelines.header.maxLines;
+        const wrapWords = this.options.lifelines.header.wrapWords;
+        const wrapLines = this.options.lifelines.header.wrapLines;
+
+        for (const lifeline of lifelines) {
+            const lines = Common.tokenize(
+                lifeline.actor.name,
+                wrapWords,
+                wrapLines,
+                maxLines
+            );
+            const lifelineTxt = this.templates.lifeline({
+                x: lifeline.x,
+                y0: 0,
+                y1: y,
+                lines,
+                rows: maxLines,
+                headerHeight: this.options.lifelines.header.height,
+                headerWidth: this.options.lifelines.header.width,
+                id: lifeline.actor.id
+            });
+
+            const lifelineEl = Common.txt2dom(lifelineTxt);
+            Common.dom2svg(lifelineEl, gLifelines.append('g'));
+        }
+    }
 
-          o.active.pop();
-          const foreshorteningY = active * oForeshortening;
-          const startY = positionsByMessageId[startMessageId].y;
-          const height = ((oMarginTop + oMarginBottom) + (y - startY)) - (foreshorteningY * 2);
-          const oProps = {
-            x: (actor.x - oHalfWidth) + ((active - 1) * oWidth),
-            y: ((startY - oMarginTop) + foreshorteningY),
-            height,
-            width: oWidth,
-          };
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Initialize all mouse events.
+     * @param gLifelines lifelines container.
+     * @param gCanvas top-level canvas container.
+     * @private
+     */
+    _initMouseEvents(gLifelines, gCanvas) {
+        const self = this;
+        const source = 'asdcs';
+        const origin = `${window.location.protocol}//${window.location.host}`;
+
+        let timer;
+        gLifelines
+            .selectAll('.asdcs-diagram-lifeline-selectable')
+            .on('mouseenter', function f() {
+                timer = setTimeout(() => {
+                    self.application.selectLifeline(
+                        d3.select(this.parentNode).attr('data-id')
+                    );
+                }, 150);
+            })
+            .on('mouseleave', () => {
+                clearTimeout(timer);
+                self.application.selectLifeline();
+            })
+            .on('click', function f() {
+                const id = d3.select(this.parentNode).attr('data-id');
+                window.postMessage({ source, id, type: 'lifeline' }, origin);
+            });
+
+        gLifelines
+            .selectAll('.asdcs-diagram-lifeline-heading-box')
+            .on('mouseenter', function f() {
+                timer = setTimeout(() => {
+                    self.application.selectLifeline(
+                        d3.select(this.parentNode).attr('data-id')
+                    );
+                }, 150);
+            })
+            .on('mouseleave', () => {
+                clearTimeout(timer);
+                self.application.selectLifeline();
+            })
+            .on('click', function f() {
+                const id = d3.select(this.parentNode).attr('data-id');
+                window.postMessage(
+                    { source, id, type: 'lifelineHeader' },
+                    origin
+                );
+            });
+
+        gCanvas
+            .selectAll('.asdcs-diagram-message-selectable')
+            .on('mouseenter', function f() {
+                self.events.message = { x: d3.event.pageX, y: d3.event.pageY };
+                timer = setTimeout(() => {
+                    self.application.selectMessage(
+                        d3.select(this.parentNode).attr('data-id')
+                    );
+                }, 200);
+            })
+            .on('mouseleave', () => {
+                delete self.events.message;
+                clearTimeout(timer);
+                self.application.selectMessage();
+            })
+            .on('click', function f() {
+                const id = d3.select(this.parentNode).attr('data-id');
+                window.postMessage({ source, id, type: 'message' }, origin);
+            });
+    }
 
-          const occurrenceTxt = this.templates.occurrence(oProps);
-          const occurrenceEl = Common.txt2dom(occurrenceTxt);
-          Common.dom2svg(occurrenceEl, gOccurrences.append('g'));
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get CSS classes to be applied to a message, according to whether request/response
+     * or synchronous/asynchronous.
+     * @param message message being rendered.
+     * @returns CSS class name(s).
+     * @private
+     */
+    static _getMessageStyles(message) {
+        let marker = 'asdcsDiagramArrowSolid';
+        let dasharray = '';
+        let css = 'asdcs-diagram-message';
+        if (message.type === 'request') {
+            css = `${css} asdcs-diagram-message-request`;
+        } else {
+            css = `${css} asdcs-diagram-message-response`;
+            marker = 'asdcsDiagramArrowOpen';
+            dasharray = '30, 10';
+        }
 
+        if (message.asynchronous) {
+            css = `${css} asdcs-diagram-message-asynchronous`;
+            marker = 'asdcsDiagramArrowOpen';
+        } else {
+            css = `${css} asdcs-diagram-message-synchronous`;
         }
-        draw = false;
-      }
+
+        return { css, marker, dasharray };
     }
 
-    if (draw) {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Initialize or reinitialize zoom. This sets the initial zoom in the case of
+     * a re-rendering, and initializes the eventhandling in all cases.
+     *
+     * It does some fairly risky parsing of the 'transform' attribute, assuming that it
+     * can contain scale() and translate(). But only the zoom handler and us are writing
+     * the transform values, so that's probably OK.
+     *
+     * @param gContent container.
+     * @param width diagram width.
+     * @param height diagram height.
+     * @private
+     */
+    _initZoom(gContent, width, height) {
+        const zoomed = function zoomed() {
+            if (!this.initialTransformX && !this.initialTransformY) {
+                this.initialTransformX = d3.event.transform.x;
+                this.initialTransformY = d3.event.transform.y;
+            }
 
-      // Seems this is a singleton occurrence. We just draw a wee box around it.
+            gContent.attr(
+                'transform',
+                `translate(${d3.event.transform.x -
+                    this.initialTransformX}, ${d3.event.transform.y -
+                    this.initialTransformY})scale(${d3.event.transform.k}, ${
+                    d3.event.transform.k
+                })`
+            );
+        };
+
+        const viewWidth = this.state.width || this.options.svg.width;
+        const viewHeight = this.state.height || this.options.svg.height;
+        const scaleMinimum = this.options.svg.scale.minimum;
+        const scaleWidth = viewWidth / width;
+        const scaleHeight = viewHeight / height;
+
+        let scale = scaleMinimum;
+        if (this.options.svg.scale.width) {
+            scale = Math.max(scale, scaleWidth);
+        }
+        if (this.options.svg.scale.height) {
+            scale = Math.min(scale, scaleHeight);
+        }
 
-      const height = (oMarginTop + oMarginBottom);
-      const occurrenceProperties = { x, y: y - oMarginTop, height, width: oWidth };
-      const defaultTxt = this.templates.occurrence(occurrenceProperties);
-      const defaultEl = Common.txt2dom(defaultTxt);
-      Common.dom2svg(defaultEl, gOccurrences.append('g'));
-    }
+        scale = Math.max(scale, scaleMinimum);
 
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Draw box(es) around fragment(s).
-   * @param gCanvas container.
-   * @param fragment fragment definition, corresponding to its final (stop) message.
-   * @param positionsByMessageId message dimensions.
-   * @private
-   */
-  _drawFragment(gCanvas, fragment, positionsByMessageId) {
-
-    const optFragments = this.options.fragments;
-    const gFragments = gCanvas.select('g.asdcs-diagram-fragments');
-    const p1 = positionsByMessageId[fragment.stop];
-    if (p1 && fragment.start && fragment.start.length > 0) {
-
-      for (const start of fragment.start) {
-
-        const message = this.application.getModel().getMessageById(start);
-        const bounds = this._calcFragmentBounds(message, fragment, positionsByMessageId);
-        if (bounds) {
-
-          const maxLines = this.options.fragments.label.maxLines;
-          const wrapWords = this.options.fragments.label.wrapWords;
-          const wrapLines = this.options.fragments.label.wrapLines;
-          const lines = Common.tokenize(message.fragment.guard, wrapWords, wrapLines, maxLines);
-
-          const params = {
-            id: start,
-            x: bounds.x0 - optFragments.leftMargin,
-            y: bounds.y0 - optFragments.topMargin,
-            height: (bounds.y1 - bounds.y0) + optFragments.heightMargin,
-            width: (bounds.x1 - bounds.x0) + optFragments.widthMargin,
-            operator: (message.fragment.operator || 'alt'),
-            lines,
-          };
-
-          const fragmentTxt = this.templates.fragment(params);
-          const fragmentEl = Common.txt2dom(fragmentTxt);
-          const gFragment = gFragments.append('g');
-          Common.dom2svg(fragmentEl, gFragment);
-
-          const labelBB = gFragment.select('.asdcs-diagram-fragment-guard').node().getBBox();
-          gFragment.select('.asdcs-diagram-fragment-guard-bg')
-            .attr('x', labelBB.x)
-            .attr('y', labelBB.y)
-            .attr('height', labelBB.height)
-            .attr('width', labelBB.width);
+        let translate = [0, 0];
+        if (this.savedTransform) {
+            const s = this.savedTransform;
+            const scaleStart = s.indexOf('scale(');
+            if (scaleStart !== -1) {
+                scale = parseFloat(s.substring(scaleStart + 6, s.length - 1));
+            }
+            const translateStart = s.indexOf('translate(');
+            if (translateStart !== -1) {
+                const spec = s.substring(
+                    translateStart + 10,
+                    s.indexOf(')', translateStart)
+                );
+                const tokens = spec.split(',');
+                translate = [parseFloat(tokens[0]), parseFloat(tokens[1])];
+            }
 
+            gContent.attr('transform', this.savedTransform);
         } else {
-          Logger.warn(`Bad fragment: ${JSON.stringify(fragment)}`);
+            gContent.attr('transform', `scale(${scale})`);
         }
-      }
-    }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  _calcFragmentBounds(startMessage, fragment, positionsByMessageId) {
-    if (startMessage) {
-      const steps = this.application.getModel().unwrap().diagram.steps;
-      const bounds = { x0: 99999, x1: 0, y0: 99999, y1: 0 };
-      let foundStart = false;
-      let foundStop = false;
-      for (const step of steps) {
-        const message = step.message;
-        if (message) {
-          if (message.id === startMessage.id) {
-            foundStart = true;
-          }
-          if (foundStart && !foundStop) {
-            const positions = positionsByMessageId[message.id];
-            if (positions) {
-              bounds.x0 = Math.min(bounds.x0, Math.min(positions.x0, positions.x1));
-              bounds.y0 = Math.min(bounds.y0, positions.y);
-              bounds.x1 = Math.max(bounds.x1, Math.max(positions.x0, positions.x1));
-              bounds.y1 = Math.max(bounds.y1, positions.y);
-            } else {
-              // This probably means it hasn't been recorded yet, which is fine, because
-              // we draw fragments from where they END.
-              foundStop = true;
-            }
-          }
 
-          if (message.id === fragment.stop) {
-            foundStop = true;
-          }
-        }
-      }
-      return bounds;
-    }
-    return undefined;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Draw all lifelines.
-   * @param gLifelines lifelines container.
-   * @param lifelines lifelines definitions.
-   * @param y height.
-   * @private
-   */
-  _drawLifelines(gLifelines, lifelines, y) {
-
-    const maxLines = this.options.lifelines.header.maxLines;
-    const wrapWords = this.options.lifelines.header.wrapWords;
-    const wrapLines = this.options.lifelines.header.wrapLines;
-
-    for (const lifeline of lifelines) {
-      const lines = Common.tokenize(lifeline.actor.name, wrapWords, wrapLines, maxLines);
-      const lifelineTxt = this.templates.lifeline({
-        x: lifeline.x,
-        y0: 0,
-        y1: y,
-        lines,
-        rows: maxLines,
-        headerHeight: this.options.lifelines.header.height,
-        headerWidth: this.options.lifelines.header.width,
-        id: lifeline.actor.id,
-      });
-
-      const lifelineEl = Common.txt2dom(lifelineTxt);
-      Common.dom2svg(lifelineEl, gLifelines.append('g'));
-    }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Initialize all mouse events.
-   * @param gLifelines lifelines container.
-   * @param gCanvas top-level canvas container.
-   * @private
-   */
-  _initMouseEvents(gLifelines, gCanvas) {
-
-    const self = this;
-    const source = 'asdcs';
-    const origin = `${window.location.protocol}//${window.location.host}`;
-
-    let timer;
-    gLifelines.selectAll('.asdcs-diagram-lifeline-selectable')
-      .on('mouseenter', function f() {
-        timer = setTimeout(() => {
-          self.application.selectLifeline(d3.select(this.parentNode).attr('data-id'));
-        }, 150);
-      })
-      .on('mouseleave', () => {
-        clearTimeout(timer);
-        self.application.selectLifeline();
-      })
-      .on('click', function f() {
-        const id = d3.select(this.parentNode).attr('data-id');
-        window.postMessage({ source, id, type: 'lifeline' }, origin);
-      });
-
-    gLifelines.selectAll('.asdcs-diagram-lifeline-heading-box')
-      .on('mouseenter', function f() {
-        timer = setTimeout(() => {
-          self.application.selectLifeline(d3.select(this.parentNode).attr('data-id'));
-        }, 150);
-      })
-      .on('mouseleave', () => {
-        clearTimeout(timer);
-        self.application.selectLifeline();
-      })
-      .on('click', function f() {
-        const id = d3.select(this.parentNode).attr('data-id');
-        window.postMessage({ source, id, type: 'lifelineHeader' }, origin);
-      });
-
-    gCanvas.selectAll('.asdcs-diagram-message-selectable')
-      .on('mouseenter', function f() {
-        self.events.message = { x: d3.event.pageX, y: d3.event.pageY };
-        timer = setTimeout(() => {
-          self.application.selectMessage(d3.select(this.parentNode).attr('data-id'));
-        }, 200);
-      })
-      .on('mouseleave', () => {
-        delete self.events.message;
-        clearTimeout(timer);
-        self.application.selectMessage();
-      })
-      .on('click', function f() {
-        const id = d3.select(this.parentNode).attr('data-id');
-        window.postMessage({ source, id, type: 'message' }, origin);
-      });
-
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get CSS classes to be applied to a message, according to whether request/response
-   * or synchronous/asynchronous.
-   * @param message message being rendered.
-   * @returns CSS class name(s).
-   * @private
-   */
-  static _getMessageStyles(message) {
-
-    let marker = 'asdcsDiagramArrowSolid';
-    let dasharray = '';
-    let css = 'asdcs-diagram-message';
-    if (message.type === 'request') {
-      css = `${css} asdcs-diagram-message-request`;
-    } else {
-      css = `${css} asdcs-diagram-message-response`;
-      marker = 'asdcsDiagramArrowOpen';
-      dasharray = '30, 10';
-    }
+        const zoom = d3.zoom().on('zoom', zoomed);
 
-    if (message.asynchronous) {
-      css = `${css} asdcs-diagram-message-asynchronous`;
-      marker = 'asdcsDiagramArrowOpen';
-    } else {
-      css = `${css} asdcs-diagram-message-synchronous`;
-    }
+        this.svg.call(zoom);
+        this.svg.call(zoom.scaleBy, scale);
 
-    return { css, marker, dasharray };
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Initialize or reinitialize zoom. This sets the initial zoom in the case of
-   * a re-rendering, and initializes the eventhandling in all cases.
-   *
-   * It does some fairly risky parsing of the 'transform' attribute, assuming that it
-   * can contain scale() and translate(). But only the zoom handler and us are writing
-   * the transform values, so that's probably OK.
-   *
-   * @param gContent container.
-   * @param width diagram width.
-   * @param height diagram height.
-   * @private
-   */
-  _initZoom(gContent, width, height) {
-
-    const zoomed = function zoomed() {
-      if (!this.initialTransformX && !this.initialTransformY) {
-        this.initialTransformX = d3.event.transform.x;
-        this.initialTransformY = d3.event.transform.y;
-      }
-
-      gContent.attr('transform',
-				`translate(${d3.event.transform.x - this.initialTransformX}, ${d3.event.transform.y
-				- this.initialTransformY})scale(${d3.event.transform.k}, ${d3.event.transform.k})`);
-    };
-
-    const viewWidth = this.state.width || this.options.svg.width;
-    const viewHeight = this.state.height || this.options.svg.height;
-    const scaleMinimum = this.options.svg.scale.minimum;
-    const scaleWidth = viewWidth / width;
-    const scaleHeight = viewHeight / height;
-
-    let scale = scaleMinimum;
-    if (this.options.svg.scale.width) {
-      scale = Math.max(scale, scaleWidth);
-    }
-    if (this.options.svg.scale.height) {
-      scale = Math.min(scale, scaleHeight);
+        gContent.attr(
+            'transform',
+            `translate(${translate[0]}, ${translate[1]})`
+        );
+        gContent.attr('transform', `scale(${scale})`);
     }
 
-    scale = Math.max(scale, scaleMinimum);
-
-    let translate = [0, 0];
-    if (this.savedTransform) {
-      const s = this.savedTransform;
-      const scaleStart = s.indexOf('scale(');
-      if (scaleStart !== -1) {
-        scale = parseFloat(s.substring(scaleStart + 6, s.length - 1));
-      }
-      const translateStart = s.indexOf('translate(');
-      if (translateStart !== -1) {
-        const spec = s.substring(translateStart + 10, s.indexOf(')', translateStart));
-        const tokens = spec.split(',');
-        translate = [parseFloat(tokens[0]), parseFloat(tokens[1])];
-      }
-
-      gContent.attr('transform', this.savedTransform);
-    } else {
-      gContent.attr('transform', `scale(${scale})`);
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Hide from the linter the fact that we're modifying the lifeline.
+     * @param lifeline to be updated with X position.
+     * @param x X position.
+     * @private
+     */
+    static _processLifeline(lifeline, x) {
+        const actor = lifeline;
+        actor.id = actor.id || actor.name;
+        actor.x = x;
     }
 
-    const zoom = d3.zoom()
-      .on('zoom', zoomed);
-
-    this.svg.call(zoom);
-    this.svg.call(zoom.scaleBy, scale);
-
-    gContent.attr('transform', `translate(${translate[0]}, ${translate[1]})`);
-    gContent.attr('transform', `scale(${scale})`);
-
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Hide from the linter the fact that we're modifying the lifeline.
-   * @param lifeline to be updated with X position.
-   * @param x X position.
-   * @private
-   */
-  static _processLifeline(lifeline, x) {
-    const actor = lifeline;
-    actor.id = actor.id || actor.name;
-    actor.x = x;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Derive active occurrences for lifeline.
-   * @param oData occurrences data.
-   * @param lifelineId lifeline to be analyzed.
-   * @returns {number}
-   * @private
-   */
-  static _calcActive(oData, lifelineId) {
-    const o = oData[lifelineId];
-    let active = 0;
-    if (o && o.active) {
-      active = o.active.length;
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Derive active occurrences for lifeline.
+     * @param oData occurrences data.
+     * @param lifelineId lifeline to be analyzed.
+     * @returns {number}
+     * @private
+     */
+    static _calcActive(oData, lifelineId) {
+        const o = oData[lifelineId];
+        let active = 0;
+        if (o && o.active) {
+            active = o.active.length;
+        }
+        return active;
     }
-    return active;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Derive the X position of an occurrence on a lifeline, taking into account how
-   * many occurrences are active.
-   * @param active active count.
-   * @param x lifeline X position; basis for offset.
-   * @param arrow whether this is the arrow (to) end.
-   * @param leftToRight whether this message goes left-to-right.
-   * @returns {*} calculated X position for occurrence left-hand side.
-   * @private
-   */
-  _calcMessageX(active, x, arrow, leftToRight) {
-    const width = this.options.lifelines.occurrences.width;
-    const halfWidth = width / 2;
-    const active0 = Math.max(0, active - 1);
-    let calculated = x + (active0 * width);
-    if (arrow) {
-      // End (ARROW).
-      if (leftToRight) {
-        calculated -= halfWidth;
-      } else {
-        calculated += halfWidth;
-      }
-    } else {
-      // Start (NOT ARROW).
-      if (leftToRight) {
-        calculated += halfWidth;
-      } else {
-        calculated -= halfWidth;
-      }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Derive the X position of an occurrence on a lifeline, taking into account how
+     * many occurrences are active.
+     * @param active active count.
+     * @param x lifeline X position; basis for offset.
+     * @param arrow whether this is the arrow (to) end.
+     * @param leftToRight whether this message goes left-to-right.
+     * @returns {*} calculated X position for occurrence left-hand side.
+     * @private
+     */
+    _calcMessageX(active, x, arrow, leftToRight) {
+        const width = this.options.lifelines.occurrences.width;
+        const halfWidth = width / 2;
+        const active0 = Math.max(0, active - 1);
+        let calculated = x + active0 * width;
+        if (arrow) {
+            // End (ARROW).
+            if (leftToRight) {
+                calculated -= halfWidth;
+            } else {
+                calculated += halfWidth;
+            }
+        } else {
+            // Start (NOT ARROW).
+            if (leftToRight) {
+                calculated += halfWidth;
+            } else {
+                calculated -= halfWidth;
+            }
+        }
+
+        return calculated;
     }
 
-    return calculated;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Show popup upon hovering over a messages that has associated notes.
-   * @param id
-   * @private
-   */
-  _showNotesPopup(id) {
-    if (this.popup) {
-      if (id) {
-        const message = this.application.getModel().getMessageById(id);
-        if (message && message.notes && message.notes.length > 0 && this.events.message) {
-          this.popup.setState({
-            visible: true,
-            left: this.events.message.x - 50,
-            top: this.events.message.y + 20,
-            notes: message.notes[0],
-          });
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Show popup upon hovering over a messages that has associated notes.
+     * @param id
+     * @private
+     */
+    _showNotesPopup(id) {
+        if (this.popup) {
+            if (id) {
+                const message = this.application.getModel().getMessageById(id);
+                if (
+                    message &&
+                    message.notes &&
+                    message.notes.length > 0 &&
+                    this.events.message
+                ) {
+                    this.popup.setState({
+                        visible: true,
+                        left: this.events.message.x - 50,
+                        top: this.events.message.y + 20,
+                        notes: message.notes[0]
+                    });
+                }
+            } else {
+                this.popup.setState({ visible: false, notes: '' });
+            }
         }
-      } else {
-        this.popup.setState({ visible: false, notes: '' });
-      }
     }
-  }
 }
 
-
 Diagram.propTypes = {
-  application: PropTypes.object.isRequired,
+    application: PropTypes.object.isRequired
 };
 
 export default Diagram;
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/components/popup/Popup.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/components/popup/Popup.jsx
index 8f8f859aad..a2a6582ab0 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/components/popup/Popup.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/components/popup/Popup.jsx
@@ -25,85 +25,81 @@ import iconEdit from '../../../../../../../../res/ecomp/asdc/sequencer/sprites/i
  * @constructor
  */
 class Popup extends React.Component {
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Construct react view.
-   * @param props element properties (of which there are none).
-   * @param context react context.
-   */
-  constructor(props, context) {
-    super(props, context);
-    this.state = {
-      top: 0,
-      left: 0,
-      visible: false,
-      notes: '',
-    };
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Render view.
-   * @returns {XML}
-   */
-  render() {
-
-    // Build CSS + styles to position and configure popup.
-
-    let top = this.state.top;
-    let left = this.state.left;
-
-    const popupHeight = 200;
-    const popupWidth = 320;
-
-    let auxCssVertical = 'top';
-    let auxCssHorizontal = 'left';
-
-    if (this.state.top > (window.innerHeight - popupHeight)) {
-      top -= (popupHeight + 50);
-      auxCssVertical = 'bottom';
-    }
-
-    if (this.state.left > (window.innerWidth - popupWidth)) {
-      left -= (popupWidth - 80);
-      auxCssHorizontal = 'right';
-    }
-
-    const auxCss = `asdcs-diagram-popup-${auxCssVertical}${auxCssHorizontal}`;
-    const styles = {
-      top,
-      left,
-      display: (this.state.visible ? 'block' : 'none'),
-    };
-
-    // Render element.
-
-    let notes = this.state.notes || '';
-    if (notes.length > 255) {
-      notes = notes.substring(0, 255);
-      notes = `${notes} ...`;
+    // ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Construct react view.
+     * @param props element properties (of which there are none).
+     * @param context react context.
+     */
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            top: 0,
+            left: 0,
+            visible: false,
+            notes: ''
+        };
     }
 
-    return (
-      <div className={`asdcs-diagram-popup ${auxCss}`} style={styles}>
-        <div className="asdcs-diagram-popup-header">Notes</div>
-        <div className="asdcs-diagram-popup-body">
-          <div className="asdcs-icon-popup">
-            <Icon glyph={iconEdit} />
-          </div>
-          <div className="asdcs-diagram-notes">
-            <div className="asdcs-diagram-note">
-              {notes}
+    // ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Render view.
+     * @returns {XML}
+     */
+    render() {
+        // Build CSS + styles to position and configure popup.
+
+        let top = this.state.top;
+        let left = this.state.left;
+
+        const popupHeight = 200;
+        const popupWidth = 320;
+
+        let auxCssVertical = 'top';
+        let auxCssHorizontal = 'left';
+
+        if (this.state.top > window.innerHeight - popupHeight) {
+            top -= popupHeight + 50;
+            auxCssVertical = 'bottom';
+        }
+
+        if (this.state.left > window.innerWidth - popupWidth) {
+            left -= popupWidth - 80;
+            auxCssHorizontal = 'right';
+        }
+
+        const auxCss = `asdcs-diagram-popup-${auxCssVertical}${auxCssHorizontal}`;
+        const styles = {
+            top,
+            left,
+            display: this.state.visible ? 'block' : 'none'
+        };
+
+        // Render element.
+
+        let notes = this.state.notes || '';
+        if (notes.length > 255) {
+            notes = notes.substring(0, 255);
+            notes = `${notes} ...`;
+        }
+
+        return (
+            <div className={`asdcs-diagram-popup ${auxCss}`} style={styles}>
+                <div className="asdcs-diagram-popup-header">Notes</div>
+                <div className="asdcs-diagram-popup-body">
+                    <div className="asdcs-icon-popup">
+                        <Icon glyph={iconEdit} />
+                    </div>
+                    <div className="asdcs-diagram-notes">
+                        <div className="asdcs-diagram-note">{notes}</div>
+                    </div>
+                </div>
+                <div className="asdcs-diagram-popup-footer" />
             </div>
-          </div>
-        </div>
-        <div className="asdcs-diagram-popup-footer"></div>
-      </div>
-    );
-  }
+        );
+    }
 }
 
 export default Popup;
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/dialog/Dialog.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/dialog/Dialog.jsx
index d48ef3bd88..96a709948c 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/dialog/Dialog.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/dialog/Dialog.jsx
@@ -28,211 +28,216 @@ import iconClose from '../../../../../../res/ecomp/asdc/sequencer/sprites/icons/
  * configured, shown and hidden as required.
  */
 class Dialog extends React.Component {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Construct view.
+     */
+    constructor(props, context) {
+        super(props, context);
+
+        this.MODE = {
+            INFO: {
+                icon: 'asdcs-icon-info',
+                heading: 'Information'
+            },
+            ERROR: {
+                icon: 'asdcs-icon-exclaim',
+                heading: 'Error'
+            },
+            EDIT: {
+                icon: 'asdcs-icon-edit',
+                heading: 'Edit',
+                edit: true,
+                confirm: true
+            },
+            CONFIRM: {
+                icon: 'asdcs-icon-question',
+                heading: 'Confirm',
+                confirm: true
+            }
+        };
+
+        this.state = {
+            mode: this.MODE.INFO,
+            message: '',
+            text: '',
+            visible: false
+        };
+
+        // Bindings.
+
+        this.onClickOK = this.onClickOK.bind(this);
+        this.onClickCancel = this.onClickCancel.bind(this);
+        this.onChangeText = this.onChangeText.bind(this);
+        this.showConfirmDialog = this.showConfirmDialog.bind(this);
+        this.showInfoDialog = this.showInfoDialog.bind(this);
+        this.showEditDialog = this.showEditDialog.bind(this);
+        this.showErrorDialog = this.showErrorDialog.bind(this);
+        this.showDialog = this.showDialog.bind(this);
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Show info dialog.
+     * @param message info message.
+     */
+    showInfoDialog(message) {
+        this.showDialog(this.MODE.INFO, { message });
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Show error dialog.
+     * @param message error message.
+     */
+    showErrorDialog(message) {
+        this.showDialog(this.MODE.ERROR, { message });
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Show edit dialog.
+     * @param message dialog message.
+     * @param text current edit text.
+     * @param callback callback function to be invoked on OK.
+     */
+    showEditDialog(message, text, callback) {
+        this.showDialog(this.MODE.EDIT, { message, text, callback });
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Show confirmation dialog.
+     * @param message dialog message.
+     * @param callback callback function to be invoked on OK.
+     */
+    showConfirmDialog(message, callback) {
+        this.showDialog(this.MODE.CONFIRM, { message, callback });
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle buttonclick.
+     */
+    onClickOK() {
+        this.props.application.hideOverlay();
+        this.setState({ visible: false });
+        if (this.callback) {
+            // So far the only thing we can return is edit text, but send it back
+            // as properties to allow for future return values.
+
+            this.callback({ text: this.state.text });
+        }
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle buttonclick.
+     */
+    onClickCancel() {
+        this.props.application.hideOverlay();
+        this.setState({ visible: false });
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle text changes.
+     * @param event update event.
+     */
+    onChangeText(event) {
+        this.setState({ text: event.target.value });
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Show dialog in specified configuration.
+     * @param mode dialog mode.
+     * @param args dialog parameters, varying slightly by dialog type.
+     * @private
+     */
+    showDialog(mode, args) {
+        this.props.application.showOverlay();
+        this.callback = args.callback;
+        this.setState({
+            mode,
+            visible: true,
+            message: args.message || '',
+            text: args.text || ''
+        });
+    }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Construct view.
-   */
-  constructor(props, context) {
-
-    super(props, context);
-
-    this.MODE = {
-      INFO: {
-        icon: 'asdcs-icon-info',
-        heading: 'Information',
-      },
-      ERROR: {
-        icon: 'asdcs-icon-exclaim',
-        heading: 'Error',
-      },
-      EDIT: {
-        icon: 'asdcs-icon-edit',
-        heading: 'Edit',
-        edit: true,
-        confirm: true,
-      },
-      CONFIRM: {
-        icon: 'asdcs-icon-question',
-        heading: 'Confirm',
-        confirm: true,
-      },
-    };
-
-    this.state = {
-      mode: this.MODE.INFO,
-      message: '',
-      text: '',
-      visible: false,
-    };
-
-    // Bindings.
-
-    this.onClickOK = this.onClickOK.bind(this);
-    this.onClickCancel = this.onClickCancel.bind(this);
-    this.onChangeText = this.onChangeText.bind(this);
-    this.showConfirmDialog = this.showConfirmDialog.bind(this);
-    this.showInfoDialog = this.showInfoDialog.bind(this);
-    this.showEditDialog = this.showEditDialog.bind(this);
-    this.showErrorDialog = this.showErrorDialog.bind(this);
-    this.showDialog = this.showDialog.bind(this);
-
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Show info dialog.
-   * @param message info message.
-   */
-  showInfoDialog(message) {
-    this.showDialog(this.MODE.INFO, { message });
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Show error dialog.
-   * @param message error message.
-   */
-  showErrorDialog(message) {
-    this.showDialog(this.MODE.ERROR, { message });
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Show edit dialog.
-   * @param message dialog message.
-   * @param text current edit text.
-   * @param callback callback function to be invoked on OK.
-   */
-  showEditDialog(message, text, callback) {
-    this.showDialog(this.MODE.EDIT, { message, text, callback });
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Show confirmation dialog.
-   * @param message dialog message.
-   * @param callback callback function to be invoked on OK.
-   */
-  showConfirmDialog(message, callback) {
-    this.showDialog(this.MODE.CONFIRM, { message, callback });
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle buttonclick.
-   */
-  onClickOK() {
-    this.props.application.hideOverlay();
-    this.setState({ visible: false });
-    if (this.callback) {
-
-      // So far the only thing we can return is edit text, but send it back
-      // as properties to allow for future return values.
-
-      this.callback({ text: this.state.text });
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Render dialog into the page, initially hidden.
+     */
+    render() {
+        const dialogClass = this.state.visible ? '' : 'asdcs-hidden';
+        const cancelClass = this.callback ? '' : 'asdcs-hidden';
+        const textClass =
+            this.state.mode === this.MODE.EDIT ? '' : 'asdcs-hidden';
+
+        return (
+            <div className={`asdcs-dialog ${dialogClass}`}>
+                <div className="asdcs-dialog-header">
+                    {this.state.mode.heading}
+                </div>
+                <div
+                    className="asdcs-dialog-close"
+                    onClick={this.onClickCancel}>
+                    <Icon
+                        glyph={iconClose}
+                        className={this.MODE.CONFIRM.icon}
+                    />
+                </div>
+                <div className={`asdcs-dialog-icon ${this.state.mode.icon}`}>
+                    <Icon
+                        glyph={iconQuestion}
+                        className={this.MODE.CONFIRM.icon}
+                    />
+                    <Icon
+                        glyph={iconExclaim}
+                        className={this.MODE.ERROR.icon}
+                    />
+                    <Icon glyph={iconInfo} className={this.MODE.INFO.icon} />
+                    <Icon glyph={iconEdit} className={this.MODE.EDIT.icon} />
+                </div>
+                <div className="asdcs-dialog-message">{this.state.message}</div>
+                <div className={`asdcs-dialog-text ${textClass}`}>
+                    <textarea
+                        maxLength="255"
+                        value={this.state.text}
+                        onChange={this.onChangeText}
+                    />
+                </div>
+                <div className="asdcs-dialog-buttonbar">
+                    <button
+                        className={`asdcs-dialog-button-cancel ${cancelClass}`}
+                        onClick={this.onClickCancel}>
+                        Cancel
+                    </button>
+                    <button
+                        className="asdcs-dialog-button-ok"
+                        onClick={this.onClickOK}>
+                        OK
+                    </button>
+                </div>
+            </div>
+        );
     }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle buttonclick.
-   */
-  onClickCancel() {
-    this.props.application.hideOverlay();
-    this.setState({ visible: false });
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle text changes.
-   * @param event update event.
-   */
-  onChangeText(event) {
-    this.setState({ text: event.target.value });
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Show dialog in specified configuration.
-   * @param mode dialog mode.
-   * @param args dialog parameters, varying slightly by dialog type.
-   * @private
-   */
-  showDialog(mode, args) {
-    this.props.application.showOverlay();
-    this.callback = args.callback;
-    this.setState({
-      mode,
-      visible: true,
-      message: args.message || '',
-      text: args.text || '',
-    });
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Render dialog into the page, initially hidden.
-   */
-  render() {
-
-    const dialogClass = (this.state.visible) ? '' : 'asdcs-hidden';
-    const cancelClass = (this.callback) ? '' : 'asdcs-hidden';
-    const textClass = (this.state.mode === this.MODE.EDIT) ? '' : 'asdcs-hidden';
-
-    return (
-      <div className={`asdcs-dialog ${dialogClass}`}>
-        <div className="asdcs-dialog-header">{this.state.mode.heading}</div>
-        <div className="asdcs-dialog-close" onClick={this.onClickCancel} >
-          <Icon glyph={iconClose} className={this.MODE.CONFIRM.icon} />
-        </div>
-        <div className={`asdcs-dialog-icon ${this.state.mode.icon}`}>
-          <Icon glyph={iconQuestion} className={this.MODE.CONFIRM.icon} />
-          <Icon glyph={iconExclaim} className={this.MODE.ERROR.icon} />
-          <Icon glyph={iconInfo} className={this.MODE.INFO.icon} />
-          <Icon glyph={iconEdit} className={this.MODE.EDIT.icon} />
-        </div>
-        <div className="asdcs-dialog-message">
-          {this.state.message}
-        </div>
-        <div className={`asdcs-dialog-text ${textClass}`}>
-          <textarea
-            maxLength="255"
-            value={this.state.text}
-            onChange={this.onChangeText}
-          />
-        </div>
-        <div className="asdcs-dialog-buttonbar">
-          <button
-            className={`asdcs-dialog-button-cancel ${cancelClass}`}
-            onClick={this.onClickCancel}
-          >
-            Cancel
-          </button>
-          <button
-            className="asdcs-dialog-button-ok"
-            onClick={this.onClickOK}
-          >
-            OK
-          </button>
-        </div>
-      </div>
-    );
-  }
 }
 
 Dialog.propTypes = {
-  application: PropTypes.object.isRequired,
+    application: PropTypes.object.isRequired
 };
 
 export default Dialog;
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/Editor.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/Editor.jsx
index 00c8f7c47c..087bc8029f 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/Editor.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/Editor.jsx
@@ -26,149 +26,147 @@ import Source from './components/source/Source';
  * Editor view, aggregating the designer, the code editor, the toolbar.
  */
 class Editor extends React.Component {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    /**
+     * Construct React view.
+     * @param props properties.
+     * @param context context.
+     */
+    constructor(props, context) {
+        super(props, context);
 
-  /**
-   * Construct React view.
-   * @param props properties.
-   * @param context context.
-   */
-  constructor(props, context) {
-    super(props, context);
+        this.application = Common.assertNotNull(props.application);
+        this.demo = this.application.getOptions().demo;
 
-    this.application = Common.assertNotNull(props.application);
-    this.demo = this.application.getOptions().demo;
+        // Bindings.
 
-    // Bindings.
+        this.selectMessage = this.selectMessage.bind(this);
+        this.selectLifeline = this.selectLifeline.bind(this);
 
-    this.selectMessage = this.selectMessage.bind(this);
-    this.selectLifeline = this.selectLifeline.bind(this);
-
-    this.onMouseDown = this.onMouseDown.bind(this);
-    this.onMouseUp = this.onMouseUp.bind(this);
-    this.onMouseMove = this.onMouseMove.bind(this);
-  }
+        this.onMouseDown = this.onMouseDown.bind(this);
+        this.onMouseUp = this.onMouseUp.bind(this);
+        this.onMouseMove = this.onMouseMove.bind(this);
+    }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
-   * Select message by ID.
-   * @param id message ID.
-   */
-  selectMessage(id) {
-    if (this.designer) {
-      this.designer.selectMessage(id);
+    /**
+     * Select message by ID.
+     * @param id message ID.
+     */
+    selectMessage(id) {
+        if (this.designer) {
+            this.designer.selectMessage(id);
+        }
     }
-  }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
-   * Select lifeline by ID.
-   * @param id lifeline ID.
-   */
-  selectLifeline(id) {
-    if (this.designer) {
-      this.designer.selectLifeline(id);
+    /**
+     * Select lifeline by ID.
+     * @param id lifeline ID.
+     */
+    selectLifeline(id) {
+        if (this.designer) {
+            this.designer.selectLifeline(id);
+        }
     }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Record that we're dragging.
-   */
-  onMouseDown() {
-    if (this.editor) {
-      this.resize = {
-        initialWidth: this.editor.offsetWidth,
-        initialPageX: undefined,
-      };
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Record that we're dragging.
+     */
+    onMouseDown() {
+        if (this.editor) {
+            this.resize = {
+                initialWidth: this.editor.offsetWidth,
+                initialPageX: undefined
+            };
+        }
     }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Record that we're not dragging.
-   */
-  onMouseUp() {
-    this.resize = undefined;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Record mouse movement.
-   */
-  onMouseMove(event) {
-    if (this.resize) {
-      if (this.editor) {
-        if (this.resize.initialPageX) {
-          const deltaX = event.pageX - this.resize.initialPageX;
-          const newWidth = this.resize.initialWidth + deltaX;
-          const newWidthBounded = Math.min(800, Math.max(400, newWidth));
-          this.editor.style.width = `${newWidthBounded}px`;
-        } else {
-          this.resize.initialPageX = event.pageX;
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Record that we're not dragging.
+     */
+    onMouseUp() {
+        this.resize = undefined;
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Record mouse movement.
+     */
+    onMouseMove(event) {
+        if (this.resize) {
+            if (this.editor) {
+                if (this.resize.initialPageX) {
+                    const deltaX = event.pageX - this.resize.initialPageX;
+                    const newWidth = this.resize.initialWidth + deltaX;
+                    const newWidthBounded = Math.min(
+                        800,
+                        Math.max(400, newWidth)
+                    );
+                    this.editor.style.width = `${newWidthBounded}px`;
+                } else {
+                    this.resize.initialPageX = event.pageX;
+                }
+            }
         }
-      }
     }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Render editor.
-   */
-  render() {
-
-    Logger.info('Editor.jsx - render()');
-
-    return (
-
-      <div
-        className="asdcs-editor"
-        ref={(r) => { this.editor = r; }}
-      >
-
-        <Toolbar application={this.props.application} editor={this} />
-
-        <div className="asdcs-editor-content">
-          <Source application={this.props.application} />
-          <Designer
-            application={this.props.application}
-            ref={(r) => {
-              if (r) {
-                this.designer = r.getDecoratedComponentInstance();
-              } else {
-                this.designer = null;
-              }
-            }}
-          />
-        </div>
-
-        <div className="asdcs-editor-statusbar">
-          <div className="asdcs-editor-status"></div>
-          <div className="asdcs-editor-validation"></div>
-        </div>
-
-        <div
-          className="asdcs-editor-resize-handle"
-          onMouseDown={this.onMouseDown}
-          onMouseUp={this.onMouseUp}
-        >
-        </div>
-      </div>
-    );
-  }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Render editor.
+     */
+    render() {
+        Logger.info('Editor.jsx - render()');
+
+        return (
+            <div
+                className="asdcs-editor"
+                ref={r => {
+                    this.editor = r;
+                }}>
+                <Toolbar application={this.props.application} editor={this} />
+
+                <div className="asdcs-editor-content">
+                    <Source application={this.props.application} />
+                    <Designer
+                        application={this.props.application}
+                        ref={r => {
+                            if (r) {
+                                this.designer = r.getDecoratedComponentInstance();
+                            } else {
+                                this.designer = null;
+                            }
+                        }}
+                    />
+                </div>
+
+                <div className="asdcs-editor-statusbar">
+                    <div className="asdcs-editor-status" />
+                    <div className="asdcs-editor-validation" />
+                </div>
+
+                <div
+                    className="asdcs-editor-resize-handle"
+                    onMouseDown={this.onMouseDown}
+                    onMouseUp={this.onMouseUp}
+                />
+            </div>
+        );
+    }
 }
 
 /** Element properties. */
 Editor.propTypes = {
-  application: PropTypes.object.isRequired,
+    application: PropTypes.object.isRequired
 };
 
 export default Editor;
-
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/Designer.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/Designer.jsx
index c67c68e4e2..09e321dd54 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/Designer.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/Designer.jsx
@@ -35,369 +35,383 @@ import iconCollapsed from '../../../../../../../../res/ecomp/asdc/sequencer/spri
  * LHS design wid` view.
  */
 class Designer extends React.Component {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Construct view.
+     * @param props element properties.
+     * @param context react context.
+     */
+    constructor(props, context) {
+        super(props, context);
+
+        Logger.noop();
+
+        this.application = Common.assertNotNull(props.application);
+
+        this.state = {
+            lifelinesExpanded: false,
+            messagesExpanded: true,
+            activeLifelineId: undefined,
+            activeMessageId: undefined
+        };
+
+        // Bind this.
+
+        this.onToggle = this.onToggle.bind(this);
+        this.onMouseEnterLifeline = this.onMouseEnterLifeline.bind(this);
+        this.onMouseLeaveLifeline = this.onMouseLeaveLifeline.bind(this);
+        this.onMouseEnterMessage = this.onMouseEnterMessage.bind(this);
+        this.onMouseLeaveMessage = this.onMouseLeaveMessage.bind(this);
+
+        this.addMessage = this.addMessage.bind(this);
+        this.updateMessage = this.updateMessage.bind(this);
+        this.deleteMessage = this.deleteMessage.bind(this);
+        this.addLifeline = this.addLifeline.bind(this);
+        this.updateLifeline = this.updateLifeline.bind(this);
+        this.deleteLifeline = this.deleteLifeline.bind(this);
+
+        this.selectMessage = this.selectMessage.bind(this);
+        this.selectLifeline = this.selectLifeline.bind(this);
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Select message by ID.
+     * @param id message ID.
+     */
+    selectMessage(id) {
+        // TODO: scroll into view.
+
+        this.setState({ activeMessageId: id });
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Select lifeline by ID.
+     * @param id lifeline ID.
+     */
+    selectLifeline(id) {
+        // TODO: scroll into view.
+
+        this.setState({ activeLifelineId: id });
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Show/hide lifelines section.
+     */
+    onToggle() {
+        const lifelinesExpanded = !this.state.lifelinesExpanded;
+        const messagesExpanded = !lifelinesExpanded;
+        this.setState({ lifelinesExpanded, messagesExpanded });
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle mouse event.
+     * @param id lifeline identifier.
+     */
+    onMouseEnterLifeline(id) {
+        this.application.selectLifeline(id);
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle mouse event.
+     */
+    onMouseLeaveLifeline() {
+        this.application.selectLifeline();
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle mouse event.
+     * @param id message identifier.
+     */
+    onMouseEnterMessage(id) {
+        this.application.selectMessage(id);
+    }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
-   * Construct view.
-   * @param props element properties.
-   * @param context react context.
-   */
-  constructor(props, context) {
-    super(props, context);
+    /**
+     * Handle mouse event.
+     */
+    onMouseLeaveMessage() {
+        // Only on next selection.
+        // this.application.selectMessage();
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Add new message.
+     */
+    addMessage() {
+        if (this.application.getModel().unwrap().diagram.lifelines.length < 2) {
+            this.application.showErrorDialog(
+                'You need at least two lifelines.'
+            );
+            return;
+        }
 
-    Logger.noop();
-
-    this.application = Common.assertNotNull(props.application);
-
-    this.state = {
-      lifelinesExpanded: false,
-      messagesExpanded: true,
-      activeLifelineId: undefined,
-      activeMessageId: undefined,
-    };
-
-    // Bind this.
-
-    this.onToggle = this.onToggle.bind(this);
-    this.onMouseEnterLifeline = this.onMouseEnterLifeline.bind(this);
-    this.onMouseLeaveLifeline = this.onMouseLeaveLifeline.bind(this);
-    this.onMouseEnterMessage = this.onMouseEnterMessage.bind(this);
-    this.onMouseLeaveMessage = this.onMouseLeaveMessage.bind(this);
-
-    this.addMessage = this.addMessage.bind(this);
-    this.updateMessage = this.updateMessage.bind(this);
-    this.deleteMessage = this.deleteMessage.bind(this);
-    this.addLifeline = this.addLifeline.bind(this);
-    this.updateLifeline = this.updateLifeline.bind(this);
-    this.deleteLifeline = this.deleteLifeline.bind(this);
-
-    this.selectMessage = this.selectMessage.bind(this);
-    this.selectLifeline = this.selectLifeline.bind(this);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Select message by ID.
-   * @param id message ID.
-   */
-  selectMessage(id) {
-
-    // TODO: scroll into view.
-
-    this.setState({ activeMessageId: id });
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Select lifeline by ID.
-   * @param id lifeline ID.
-   */
-  selectLifeline(id) {
-
-    // TODO: scroll into view.
-
-    this.setState({ activeLifelineId: id });
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Show/hide lifelines section.
-   */
-  onToggle() {
-    const lifelinesExpanded = !this.state.lifelinesExpanded;
-    const messagesExpanded = !lifelinesExpanded;
-    this.setState({ lifelinesExpanded, messagesExpanded });
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle mouse event.
-   * @param id lifeline identifier.
-   */
-  onMouseEnterLifeline(id) {
-    this.application.selectLifeline(id);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle mouse event.
-   */
-  onMouseLeaveLifeline() {
-    this.application.selectLifeline();
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle mouse event.
-   * @param id message identifier.
-   */
-  onMouseEnterMessage(id) {
-    this.application.selectMessage(id);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle mouse event.
-   */
-  onMouseLeaveMessage() {
-    // Only on next selection.
-    // this.application.selectMessage();
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Add new message.
-   */
-  addMessage() {
-
-    if (this.application.getModel().unwrap().diagram.lifelines.length < 2) {
-      this.application.showErrorDialog('You need at least two lifelines.');
-      return;
+        this.application.getModel().addMessage();
+        this.forceUpdate();
+        this.application.renderDiagram();
     }
 
-    this.application.getModel().addMessage();
-    this.forceUpdate();
-    this.application.renderDiagram();
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Apply property changes to the message identified by props.id.
-   * @param props properties to be updated (excluding 'id').
-   */
-  updateMessage(props) {
-    Common.assertPlainObject(props);
-    const model = this.application.getModel();
-    const message = model.getMessageById(props.id);
-    if (message) {
-      for (const k of Object.keys(props)) {
-        if (k !== 'id') {
-          message[k] = props[k];
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Apply property changes to the message identified by props.id.
+     * @param props properties to be updated (excluding 'id').
+     */
+    updateMessage(props) {
+        Common.assertPlainObject(props);
+        const model = this.application.getModel();
+        const message = model.getMessageById(props.id);
+        if (message) {
+            for (const k of Object.keys(props)) {
+                if (k !== 'id') {
+                    message[k] = props[k];
+                }
+            }
         }
-      }
+        this.forceUpdate();
+        this.application.renderDiagram();
     }
-    this.forceUpdate();
-    this.application.renderDiagram();
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Delete message after confirmation.
-   * @param id ID of message to be deleted.
-   */
-  deleteMessage(id) {
-
-    const self = this;
-    const model = this.application.getModel();
-
-    const confirmComplete = function f() {
-      model.deleteMessageById(id);
-      self.render();
-      self.application.renderDiagram();
-    };
-
-    this.application.showConfirmDialog('Delete this message?',
-      confirmComplete);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Add new lifeline.
-   */
-  addLifeline() {
-    this.application.getModel().addLifeline();
-    this.forceUpdate();
-    this.application.renderDiagram();
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Apply property changes to the lifeline identified by props.id.
-   * @param props properties to be updated (excluding 'id').
-   */
-  updateLifeline(props) {
-    Common.assertPlainObject(props);
-    const model = this.application.getModel();
-    const lifeline = model.getLifelineById(props.id);
-    if (lifeline) {
-      for (const k of Object.keys(props)) {
-        if (k !== 'id') {
-          lifeline[k] = props[k];
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Delete message after confirmation.
+     * @param id ID of message to be deleted.
+     */
+    deleteMessage(id) {
+        const self = this;
+        const model = this.application.getModel();
+
+        const confirmComplete = function f() {
+            model.deleteMessageById(id);
+            self.render();
+            self.application.renderDiagram();
+        };
+
+        this.application.showConfirmDialog(
+            'Delete this message?',
+            confirmComplete
+        );
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Add new lifeline.
+     */
+    addLifeline() {
+        this.application.getModel().addLifeline();
+        this.forceUpdate();
+        this.application.renderDiagram();
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Apply property changes to the lifeline identified by props.id.
+     * @param props properties to be updated (excluding 'id').
+     */
+    updateLifeline(props) {
+        Common.assertPlainObject(props);
+        const model = this.application.getModel();
+        const lifeline = model.getLifelineById(props.id);
+        if (lifeline) {
+            for (const k of Object.keys(props)) {
+                if (k !== 'id') {
+                    lifeline[k] = props[k];
+                }
+            }
         }
-      }
+        this.forceUpdate();
+        this.application.renderDiagram();
     }
-    this.forceUpdate();
-    this.application.renderDiagram();
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Delete lifeline after confirmation.
-   * @param id candidate for deletion.
-   */
-  deleteLifeline(id) {
-
-    const self = this;
-    const model = this.application.getModel();
-
-    const confirmComplete = function f() {
-      model.deleteLifelineById(id);
-      self.forceUpdate();
-      self.application.renderDiagram();
-    };
-    this.application.showConfirmDialog('Delete this lifeline and all its steps?',
-      confirmComplete);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Render designer.
-   */
-  render() {
-
-    const application = this.props.application;
-    const model = application.getModel();
-    const diagram = model.unwrap().diagram;
-    const metadata = diagram.metadata;
-
-    const lifelinesIcon = this.state.lifelinesExpanded ? iconExpanded : iconCollapsed;
-    const lifelinesClass = this.state.lifelinesExpanded ? '' : 'asdcs-hidden';
-    const messagesIcon = this.state.messagesExpanded ? iconExpanded : iconCollapsed;
-    const messagesClass = this.state.messagesExpanded ? '' : 'asdcs-hidden';
-
-    return (
-
-      <div className="asdcs-editor-designer">
-        <div className="asdcs-designer-accordion">
-
-          <div className="asdcs-designer-metadata-container">
-            <Metadata metadata={metadata} />
-          </div>
-
-          <h3 onClick={this.onToggle}>Lifelines
-            <div className="asdcs-designer-icon" onClick={this.onToggle}>
-              <Icon glyph={lifelinesIcon} />
-            </div>
-          </h3>
-
-          <div className={`asdcs-designer-lifelines-container ${lifelinesClass}`}>
-            <Lifelines
-              application={this.application}
-              designer={this}
-              activeLifelineId={this.state.activeLifelineId}
-            />
-          </div>
-
-          <h3 onClick={this.onToggle}>Steps
-            <div className="asdcs-designer-icon" onClick={this.onToggle}>
-              <Icon glyph={messagesIcon} />
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Delete lifeline after confirmation.
+     * @param id candidate for deletion.
+     */
+    deleteLifeline(id) {
+        const self = this;
+        const model = this.application.getModel();
+
+        const confirmComplete = function f() {
+            model.deleteLifelineById(id);
+            self.forceUpdate();
+            self.application.renderDiagram();
+        };
+        this.application.showConfirmDialog(
+            'Delete this lifeline and all its steps?',
+            confirmComplete
+        );
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Render designer.
+     */
+    render() {
+        const application = this.props.application;
+        const model = application.getModel();
+        const diagram = model.unwrap().diagram;
+        const metadata = diagram.metadata;
+
+        const lifelinesIcon = this.state.lifelinesExpanded
+            ? iconExpanded
+            : iconCollapsed;
+        const lifelinesClass = this.state.lifelinesExpanded
+            ? ''
+            : 'asdcs-hidden';
+        const messagesIcon = this.state.messagesExpanded
+            ? iconExpanded
+            : iconCollapsed;
+        const messagesClass = this.state.messagesExpanded ? '' : 'asdcs-hidden';
+
+        return (
+            <div className="asdcs-editor-designer">
+                <div className="asdcs-designer-accordion">
+                    <div className="asdcs-designer-metadata-container">
+                        <Metadata metadata={metadata} />
+                    </div>
+
+                    <h3 onClick={this.onToggle}>
+                        Lifelines
+                        <div
+                            className="asdcs-designer-icon"
+                            onClick={this.onToggle}>
+                            <Icon glyph={lifelinesIcon} />
+                        </div>
+                    </h3>
+
+                    <div
+                        className={`asdcs-designer-lifelines-container ${lifelinesClass}`}>
+                        <Lifelines
+                            application={this.application}
+                            designer={this}
+                            activeLifelineId={this.state.activeLifelineId}
+                        />
+                    </div>
+
+                    <h3 onClick={this.onToggle}>
+                        Steps
+                        <div
+                            className="asdcs-designer-icon"
+                            onClick={this.onToggle}>
+                            <Icon glyph={messagesIcon} />
+                        </div>
+                    </h3>
+
+                    <div
+                        className={`asdcs-designer-steps-container ${messagesClass}`}>
+                        <Messages
+                            application={this.application}
+                            designer={this}
+                            activeMessageId={this.state.activeMessageId}
+                        />
+                    </div>
+                </div>
+
+                <Actions
+                    application={this.props.application}
+                    model={model}
+                    ref={r => {
+                        this.actions = r;
+                    }}
+                />
             </div>
-          </h3>
-
-          <div className={`asdcs-designer-steps-container ${messagesClass}`} >
-            <Messages
-              application={this.application}
-              designer={this}
-              activeMessageId={this.state.activeMessageId}
-            />
-          </div>
-
-        </div>
-
-        <Actions
-          application={this.props.application}
-          model={model}
-          ref={(r) => { this.actions = r; }}
-        />
-
-      </div>
-    );
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Scroll accordion pane to make
-   * @param $element focused element.
-   * @private
-   */
-  static _scrollIntoView($element) {
-    const $pane = $element.closest('.ui-accordion-content');
-    const paneScrollTop = $pane.scrollTop();
-    const paneHeight = $pane.height();
-    const paneBottom = paneScrollTop + paneHeight;
-    const elementTop = $element[0].offsetTop - $pane[0].offsetTop;
-    const elementHeight = $element.height();
-    const elementBottom = elementTop + elementHeight;
-    if (elementBottom > paneBottom) {
-      $pane.scrollTop(elementTop);
-    } else if (elementTop < paneScrollTop) {
-      $pane.scrollTop(elementTop);
+        );
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Scroll accordion pane to make
+     * @param $element focused element.
+     * @private
+     */
+    static _scrollIntoView($element) {
+        const $pane = $element.closest('.ui-accordion-content');
+        const paneScrollTop = $pane.scrollTop();
+        const paneHeight = $pane.height();
+        const paneBottom = paneScrollTop + paneHeight;
+        const elementTop = $element[0].offsetTop - $pane[0].offsetTop;
+        const elementHeight = $element.height();
+        const elementBottom = elementTop + elementHeight;
+        if (elementBottom > paneBottom) {
+            $pane.scrollTop(elementTop);
+        } else if (elementTop < paneScrollTop) {
+            $pane.scrollTop(elementTop);
+        }
     }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Show actions menu.
-   * @param id selected message ID.
-   * @param position page coordinates.
-   */
-  showActions(id, position) {
-    if (this.actions) {
-      this.actions.show(id, position);
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Show actions menu.
+     * @param id selected message ID.
+     * @param position page coordinates.
+     */
+    showActions(id, position) {
+        if (this.actions) {
+            this.actions.show(id, position);
+        }
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Show notes popup.
+     * @param id selected message identifier.
+     */
+    showNotes(id) {
+        const model = this.application.getModel();
+        const options = this.application.getOptions();
+        const message = model.getMessageById(id);
+        const notes =
+            message.notes && message.notes.length > 0 ? message.notes[0] : '';
+        const editComplete = function f(p) {
+            message.notes = [];
+            if (p && p.text) {
+                const sanitized = Common.sanitizeText(p.text, options, 'notes');
+                message.notes.push(sanitized);
+            }
+        };
+        this.application.showEditDialog('Notes:', notes, editComplete);
     }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Show notes popup.
-   * @param id selected message identifier.
-   */
-  showNotes(id) {
-    const model = this.application.getModel();
-    const options = this.application.getOptions();
-    const message = model.getMessageById(id);
-    const notes = (message.notes && (message.notes.length > 0)) ? message.notes[0] : '';
-    const editComplete = function f(p) {
-      message.notes = [];
-      if (p && p.text) {
-        const sanitized = Common.sanitizeText(p.text, options, 'notes');
-        message.notes.push(sanitized);
-      }
-    };
-    this.application.showEditDialog('Notes:', notes, editComplete);
-  }
 }
 
 /** Element properties. */
 Designer.propTypes = {
-  application: PropTypes.object.isRequired,
+    application: PropTypes.object.isRequired
 };
 
+/* eslint-disable new-cap */
 export default DragDropContext(HTML5Backend)(Designer);
+/* eslint-enable new-cap */
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/actions/Actions.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/actions/Actions.jsx
index 5a8343cccf..a558a14f1d 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/actions/Actions.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/actions/Actions.jsx
@@ -36,439 +36,499 @@ import iconFragmentStop from '../../../../../../../../../../res/ecomp/asdc/seque
  * Action menu view.
  */
 class Actions extends React.Component {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    /**
+     * Construct view.
+     * @param props element properties.
+     * @param context react context.
+     */
+    constructor(props, context) {
+        super(props, context);
 
-  /**
-   * Construct view.
-   * @param props element properties.
-   * @param context react context.
-   */
-  constructor(props, context) {
-    super(props, context);
+        Logger.noop();
 
-    Logger.noop();
+        this.state = {
+            id: undefined,
+            visible: false
+        };
 
-    this.state = {
-      id: undefined,
-      visible: false,
-    };
+        // Bindings.
 
-    // Bindings.
+        this.show = this.show.bind(this);
 
-    this.show = this.show.bind(this);
+        this.onClickOccurrenceToggle = this.onClickOccurrenceToggle.bind(this);
+        this.onClickOccurrenceFrom = this.onClickOccurrenceFrom.bind(this);
+        this.onClickOccurrenceTo = this.onClickOccurrenceTo.bind(this);
 
-    this.onClickOccurrenceToggle = this.onClickOccurrenceToggle.bind(this);
-    this.onClickOccurrenceFrom = this.onClickOccurrenceFrom.bind(this);
-    this.onClickOccurrenceTo = this.onClickOccurrenceTo.bind(this);
+        this.onClickFragmentToggle = this.onClickFragmentToggle.bind(this);
+        this.onChangeFragmentGuard = this.onChangeFragmentGuard.bind(this);
+        this.onChangeFragmentOperator = this.onChangeFragmentOperator.bind(
+            this
+        );
 
-    this.onClickFragmentToggle = this.onClickFragmentToggle.bind(this);
-    this.onChangeFragmentGuard = this.onChangeFragmentGuard.bind(this);
-    this.onChangeFragmentOperator = this.onChangeFragmentOperator.bind(this);
-
-    this.onMouseOut = this.onMouseOut.bind(this);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Show for message.
-   * @param id message ID.
-   * @param position xy coordinates.
-   */
-  show(id, position) {
-    const message = this.props.model.getMessageById(id);
-
-    let occurrencesToggle = false;
-    let fragmentToggle = false;
-    if (message) {
-
-      message.occurrences = message.occurrences || { start: [], stop: [] };
-      message.occurrences.start = message.occurrences.start || [];
-      message.occurrences.stop = message.occurrences.stop || [];
-      message.fragment = message.fragment || {};
-      message.fragment.start = message.fragment.start || false;
-      message.fragment.stop = message.fragment.stop || false;
-      message.fragment.guard = message.fragment.guard || '';
-      message.fragment.operator = message.fragment.operator || '';
-
-      const mo = message.occurrences;
-      occurrencesToggle = (mo.start.length > 0 || mo.stop.length > 0);
-
-      const mf = message.fragment;
-      fragmentToggle = (mf.start || mf.stop);
+        this.onMouseOut = this.onMouseOut.bind(this);
     }
 
-    this.setState({
-      id,
-      message,
-      occurrencesToggle,
-      fragmentToggle,
-      visible: true,
-      x: position.x,
-      y: position.y,
-    });
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Toggle occurrence state.
-   */
-  onClickOccurrenceToggle() {
-    const message = this.state.message;
-    if (message) {
-      const oFromState = Actions.getOccurrenceState(message.occurrences, message.from);
-      const oToState = Actions.getOccurrenceState(message.occurrences, message.to);
-      const oExpanded = oFromState > 0 || oToState > 0;
-      if (oExpanded) {
-        this.setState({ occurrencesExpanded: true });
-      } else {
-        const occurrencesExpanded = !this.state.occurrencesExpanded;
-        this.setState({ occurrencesExpanded });
-      }
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Show for message.
+     * @param id message ID.
+     * @param position xy coordinates.
+     */
+    show(id, position) {
+        const message = this.props.model.getMessageById(id);
+
+        let occurrencesToggle = false;
+        let fragmentToggle = false;
+        if (message) {
+            message.occurrences = message.occurrences || {
+                start: [],
+                stop: []
+            };
+            message.occurrences.start = message.occurrences.start || [];
+            message.occurrences.stop = message.occurrences.stop || [];
+            message.fragment = message.fragment || {};
+            message.fragment.start = message.fragment.start || false;
+            message.fragment.stop = message.fragment.stop || false;
+            message.fragment.guard = message.fragment.guard || '';
+            message.fragment.operator = message.fragment.operator || '';
+
+            const mo = message.occurrences;
+            occurrencesToggle = mo.start.length > 0 || mo.stop.length > 0;
+
+            const mf = message.fragment;
+            fragmentToggle = mf.start || mf.stop;
+        }
+
+        this.setState({
+            id,
+            message,
+            occurrencesToggle,
+            fragmentToggle,
+            visible: true,
+            x: position.x,
+            y: position.y
+        });
     }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
-   * Handle menu click.
-   */
-  onClickOccurrenceFrom() {
-    const message = this.state.message;
-    if (message) {
-      Actions._toggleOccurrence(message.occurrences, message.from);
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Toggle occurrence state.
+     */
+    onClickOccurrenceToggle() {
+        const message = this.state.message;
+        if (message) {
+            const oFromState = Actions.getOccurrenceState(
+                message.occurrences,
+                message.from
+            );
+            const oToState = Actions.getOccurrenceState(
+                message.occurrences,
+                message.to
+            );
+            const oExpanded = oFromState > 0 || oToState > 0;
+            if (oExpanded) {
+                this.setState({ occurrencesExpanded: true });
+            } else {
+                const occurrencesExpanded = !this.state.occurrencesExpanded;
+                this.setState({ occurrencesExpanded });
+            }
+        }
     }
-    this.setState({ message });
-    this.props.application.renderDiagram();
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle menu click.
-   */
-  onClickOccurrenceTo() {
-    const message = this.state.message;
-    if (message) {
-      Actions._toggleOccurrence(message.occurrences, message.to);
-    }
-    this.setState({ message });
-    this.props.application.renderDiagram();
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Toggle fragment.
-   */
-  onClickFragmentToggle() {
-    const message = this.state.message;
-    if (message) {
-      Actions._toggleFragment(message.fragment);
-    }
-    this.setState({ message });
-    this.props.application.renderDiagram();
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle menu click.
-   * @param event update event.
-   */
-  onChangeFragmentGuard(event) {
-    const message = this.state.message;
-    if (message) {
-      const options = this.props.application.getOptions();
-      message.fragment.guard = Common.sanitizeText(event.target.value, options, 'guard');
-    }
-    this.setState({ message });
-    this.props.application.renderDiagram();
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle menu click.
-   * @param value updated value.
-   */
-  onChangeFragmentOperator(value) {
-    const message = this.state.message;
-    if (message) {
-      message.fragment.operator = value.value;
-    }
-    this.setState({ message });
-    this.props.application.renderDiagram();
-  }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle menu click.
+     */
+    onClickOccurrenceFrom() {
+        const message = this.state.message;
+        if (message) {
+            Actions._toggleOccurrence(message.occurrences, message.from);
+        }
+        this.setState({ message });
+        this.props.application.renderDiagram();
+    }
 
-  /**
-   * Handle mouse movement.
-   */
-  onMouseOut() {
-    this.setState({ id: -1, visible: false, x: 0, y: 0 });
-  }
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle menu click.
+     */
+    onClickOccurrenceTo() {
+        const message = this.state.message;
+        if (message) {
+            Actions._toggleOccurrence(message.occurrences, message.to);
+        }
+        this.setState({ message });
+        this.props.application.renderDiagram();
+    }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Toggle fragment.
+     */
+    onClickFragmentToggle() {
+        const message = this.state.message;
+        if (message) {
+            Actions._toggleFragment(message.fragment);
+        }
+        this.setState({ message });
+        this.props.application.renderDiagram();
+    }
 
-  /**
-   * Render view.
-   * @returns {XML}
-   */
-  render() {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle menu click.
+     * @param event update event.
+     */
+    onChangeFragmentGuard(event) {
+        const message = this.state.message;
+        if (message) {
+            const options = this.props.application.getOptions();
+            message.fragment.guard = Common.sanitizeText(
+                event.target.value,
+                options,
+                'guard'
+            );
+        }
+        this.setState({ message });
+        this.props.application.renderDiagram();
+    }
 
-    const actionsStyles = { };
-    const message = this.state.message;
-    if (!message || !this.state.visible) {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle menu click.
+     * @param value updated value.
+     */
+    onChangeFragmentOperator(value) {
+        const message = this.state.message;
+        if (message) {
+            message.fragment.operator = value.value;
+        }
+        this.setState({ message });
+        this.props.application.renderDiagram();
+    }
 
-      // Invisible.
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-      return (<div className="asdcs-actions" ></div>);
+    /**
+     * Handle mouse movement.
+     */
+    onMouseOut() {
+        this.setState({ id: -1, visible: false, x: 0, y: 0 });
     }
 
-    // Position and display.
-
-    actionsStyles.display = 'block';
-    actionsStyles.left = this.state.x - 10;
-    actionsStyles.top = this.state.y - 10;
-
-    const oFromState = Actions.getOccurrenceState(message.occurrences, message.from);
-    const oToState = Actions.getOccurrenceState(message.occurrences, message.to);
-    const fState = Actions.getFragmentState(message.fragment);
-
-    const oExpanded = this.state.occurrencesExpanded || (oFromState > 0) || (oToState > 0);
-    const oAuxClassName = oExpanded ? '' : 'asdcs-hidden';
-
-    const fExpanded = fState !== 0;
-    const fAuxClassName = fExpanded ? '' : 'asdcs-hidden';
-
-    const fragmentOperatorOptions = [{
-      value: 'alt',
-      label: 'Alternate',
-    }, {
-      value: 'opt',
-      label: 'Optional',
-    }, {
-      value: 'loop',
-      label: 'Loop',
-    }];
-
-    const operator = message.fragment.operator || 'alt';
-
-    return (
-      <div
-        className="asdcs-actions"
-        style={actionsStyles}
-        onMouseLeave={this.onMouseOut}
-      >
-        <div className="asdcs-actions-header">
-          <div className="asdcs-actions-icon">
-            <Icon glyph={iconSettings} />
-          </div>
-        </div>
-
-        <div className="asdcs-actions-options">
-
-          <div className="asdcs-actions-optiongroup asdcs-actions-optiongroup-occurrence">
-            <div
-              className="asdcs-actions-option asdcs-actions-option-occurrence-toggle"
-              onClick={this.onClickOccurrenceToggle}
-            >
-              <span className="asdcs-label">Occurrence</span>
-              <div className="asdcs-actions-state">
-                <Icon glyph={iconCollapsed} className={oExpanded ? 'asdcs-hidden' : ''} />
-                <Icon glyph={iconExpanded} className={oExpanded ? '' : 'asdcs-hidden'} />
-              </div>
-            </div>
-          </div>
-
-          <div
-            className={`asdcs-actions-option asdcs-actions-option-occurrence-from ${oAuxClassName}`}
-            onClick={this.onClickOccurrenceFrom}
-          >
-            <span className="asdcs-label">From</span>
-            <div className="asdcs-actions-state">
-              <span className="asdcs-annotation"></span>
-              <Icon glyph={iconOccurrenceDefault} className={oFromState === 0 ? '' : 'asdcs-hidden'} />
-              <Icon glyph={iconOccurrenceStart} className={oFromState === 1 ? '' : 'asdcs-hidden'} />
-              <Icon glyph={iconOccurrenceStop} className={oFromState === 2 ? '' : 'asdcs-hidden'} />
-            </div>
-          </div>
-
-          <div
-            className={`asdcs-actions-option asdcs-actions-option-occurrence-to ${oAuxClassName}`}
-            onClick={this.onClickOccurrenceTo}
-          >
-            <span className="asdcs-label">To</span>
-            <div className="asdcs-actions-state">
-              <span className="asdcs-annotation"></span>
-              <Icon glyph={iconOccurrenceDefault} className={oToState === 0 ? '' : 'asdcs-hidden'} />
-              <Icon glyph={iconOccurrenceStart} className={oToState === 1 ? '' : 'asdcs-hidden'} />
-              <Icon glyph={iconOccurrenceStop} className={oToState === 2 ? '' : 'asdcs-hidden'} />
-            </div>
-          </div>
-
-          <div className="asdcs-actions-optiongroup asdcs-actions-optiongroup-fragment">
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Render view.
+     * @returns {XML}
+     */
+    render() {
+        const actionsStyles = {};
+        const message = this.state.message;
+        if (!message || !this.state.visible) {
+            // Invisible.
+
+            return <div className="asdcs-actions" />;
+        }
+
+        // Position and display.
+
+        actionsStyles.display = 'block';
+        actionsStyles.left = this.state.x - 10;
+        actionsStyles.top = this.state.y - 10;
+
+        const oFromState = Actions.getOccurrenceState(
+            message.occurrences,
+            message.from
+        );
+        const oToState = Actions.getOccurrenceState(
+            message.occurrences,
+            message.to
+        );
+        const fState = Actions.getFragmentState(message.fragment);
+
+        const oExpanded =
+            this.state.occurrencesExpanded || oFromState > 0 || oToState > 0;
+        const oAuxClassName = oExpanded ? '' : 'asdcs-hidden';
+
+        const fExpanded = fState !== 0;
+        const fAuxClassName = fExpanded ? '' : 'asdcs-hidden';
+
+        const fragmentOperatorOptions = [
+            {
+                value: 'alt',
+                label: 'Alternate'
+            },
+            {
+                value: 'opt',
+                label: 'Optional'
+            },
+            {
+                value: 'loop',
+                label: 'Loop'
+            }
+        ];
+
+        const operator = message.fragment.operator || 'alt';
+
+        return (
             <div
-              className="asdcs-actions-option asdcs-actions-fragment-toggle"
-              onClick={this.onClickFragmentToggle}
-            >
-              <span className="asdcs-label">Fragment</span>
-              <div className="asdcs-actions-state">
-                <span className="asdcs-annotation"></span>
-                <Icon glyph={iconFragmentDefault} className={fState === 0 ? '' : 'asdcs-hidden'} />
-                <Icon glyph={iconFragmentStart} className={fState === 1 ? '' : 'asdcs-hidden'} />
-                <Icon glyph={iconFragmentStop} className={fState === 2 ? '' : 'asdcs-hidden'} />
-              </div>
+                className="asdcs-actions"
+                style={actionsStyles}
+                onMouseLeave={this.onMouseOut}>
+                <div className="asdcs-actions-header">
+                    <div className="asdcs-actions-icon">
+                        <Icon glyph={iconSettings} />
+                    </div>
+                </div>
+
+                <div className="asdcs-actions-options">
+                    <div className="asdcs-actions-optiongroup asdcs-actions-optiongroup-occurrence">
+                        <div
+                            className="asdcs-actions-option asdcs-actions-option-occurrence-toggle"
+                            onClick={this.onClickOccurrenceToggle}>
+                            <span className="asdcs-label">Occurrence</span>
+                            <div className="asdcs-actions-state">
+                                <Icon
+                                    glyph={iconCollapsed}
+                                    className={oExpanded ? 'asdcs-hidden' : ''}
+                                />
+                                <Icon
+                                    glyph={iconExpanded}
+                                    className={oExpanded ? '' : 'asdcs-hidden'}
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div
+                        className={`asdcs-actions-option asdcs-actions-option-occurrence-from ${oAuxClassName}`}
+                        onClick={this.onClickOccurrenceFrom}>
+                        <span className="asdcs-label">From</span>
+                        <div className="asdcs-actions-state">
+                            <span className="asdcs-annotation" />
+                            <Icon
+                                glyph={iconOccurrenceDefault}
+                                className={
+                                    oFromState === 0 ? '' : 'asdcs-hidden'
+                                }
+                            />
+                            <Icon
+                                glyph={iconOccurrenceStart}
+                                className={
+                                    oFromState === 1 ? '' : 'asdcs-hidden'
+                                }
+                            />
+                            <Icon
+                                glyph={iconOccurrenceStop}
+                                className={
+                                    oFromState === 2 ? '' : 'asdcs-hidden'
+                                }
+                            />
+                        </div>
+                    </div>
+
+                    <div
+                        className={`asdcs-actions-option asdcs-actions-option-occurrence-to ${oAuxClassName}`}
+                        onClick={this.onClickOccurrenceTo}>
+                        <span className="asdcs-label">To</span>
+                        <div className="asdcs-actions-state">
+                            <span className="asdcs-annotation" />
+                            <Icon
+                                glyph={iconOccurrenceDefault}
+                                className={oToState === 0 ? '' : 'asdcs-hidden'}
+                            />
+                            <Icon
+                                glyph={iconOccurrenceStart}
+                                className={oToState === 1 ? '' : 'asdcs-hidden'}
+                            />
+                            <Icon
+                                glyph={iconOccurrenceStop}
+                                className={oToState === 2 ? '' : 'asdcs-hidden'}
+                            />
+                        </div>
+                    </div>
+
+                    <div className="asdcs-actions-optiongroup asdcs-actions-optiongroup-fragment">
+                        <div
+                            className="asdcs-actions-option asdcs-actions-fragment-toggle"
+                            onClick={this.onClickFragmentToggle}>
+                            <span className="asdcs-label">Fragment</span>
+                            <div className="asdcs-actions-state">
+                                <span className="asdcs-annotation" />
+                                <Icon
+                                    glyph={iconFragmentDefault}
+                                    className={
+                                        fState === 0 ? '' : 'asdcs-hidden'
+                                    }
+                                />
+                                <Icon
+                                    glyph={iconFragmentStart}
+                                    className={
+                                        fState === 1 ? '' : 'asdcs-hidden'
+                                    }
+                                />
+                                <Icon
+                                    glyph={iconFragmentStop}
+                                    className={
+                                        fState === 2 ? '' : 'asdcs-hidden'
+                                    }
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div
+                        className={`asdcs-actions-option asdcs-actions-fragment-operator ${fAuxClassName}`}>
+                        <div className="asdcs-label">Operator</div>
+                        <div className="asdcs-value">
+                            <Select
+                                className="asdcs-editable-select"
+                                openOnFocus
+                                clearable={false}
+                                searchable={false}
+                                value={operator}
+                                onChange={this.onChangeFragmentOperator}
+                                options={fragmentOperatorOptions}
+                            />
+                        </div>
+                    </div>
+
+                    <div
+                        className={`asdcs-actions-option asdcs-actions-fragment-guard ${fAuxClassName}`}>
+                        <div className="asdcs-label">Guard</div>
+                        <div className="asdcs-value">
+                            <input
+                                className="asdcs-editable"
+                                type="text"
+                                size="20"
+                                maxLength="80"
+                                value={message.fragment.guard}
+                                placeholder="Condition"
+                                onChange={this.onChangeFragmentGuard}
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div className="asdcs-actions-footer" />
             </div>
-          </div>
-
-          <div className={`asdcs-actions-option asdcs-actions-fragment-operator ${fAuxClassName}`}>
-            <div className="asdcs-label">Operator</div>
-            <div className="asdcs-value">
-              <Select
-                className="asdcs-editable-select"
-                openOnFocus
-                clearable={false}
-                searchable={false}
-                value={operator}
-                onChange={this.onChangeFragmentOperator}
-                options={fragmentOperatorOptions}
-              />
-            </div>
-          </div>
-
-          <div className={`asdcs-actions-option asdcs-actions-fragment-guard ${fAuxClassName}`}>
-            <div className="asdcs-label">Guard</div>
-            <div className="asdcs-value">
-              <input
-                className="asdcs-editable"
-                type="text"
-                size="20"
-                maxLength="80"
-                value={message.fragment.guard}
-                placeholder="Condition"
-                onChange={this.onChangeFragmentGuard}
-              />
-            </div>
-          </div>
-
-        </div>
-
-        <div className="asdcs-actions-footer"></div>
-
-      </div>
-
-    );
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Toggle through three occurrence states on click.
-   * @param occurrence occurrences state, updated as side-effect.
-   * @param lifelineId message end that's being toggled.
-   * @private
-   */
-  static _toggleOccurrence(occurrence, lifelineId) {
-    const o = occurrence;
-
-    const rm = function rm(array, value) {
-      const index = array.indexOf(value);
-      if (index !== -1) {
-        array.splice(index, 1);
-      }
-    };
-
-    const add = function add(array, value) {
-      if (array.indexOf(value) === -1) {
-        array.push(value);
-      }
-    };
-
-    if (o.start && o.start.indexOf(lifelineId) !== -1) {
-      // Start -> stop.
-      rm(o.start, lifelineId);
-      add(o.stop, lifelineId);
-    } else if (o.stop && o.stop.indexOf(lifelineId) !== -1) {
-      // Stop -> default.
-      rm(o.start, lifelineId);
-      rm(o.stop, lifelineId);
-    } else {
-      // Default -> start.
-      add(o.start, lifelineId);
-      rm(o.stop, lifelineId);
+        );
     }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Toggle fragment setting on click.
-   * @param fragment
-   * @private
-   **/
-  static _toggleFragment(fragment) {
-    const f = fragment;
-    if (f.start === true) {
-      f.start = false;
-      f.stop = true;
-    } else if (f.stop === true) {
-      f.stop = false;
-      f.start = false;
-    } else {
-      f.start = true;
-      f.stop = false;
-    }
-    f.guard = '';
-    f.operator = '';
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get ternary occurrences state.
-   * @param o occurrences.
-   * @param lifelineId from/to lifeline ID.
-   * @returns {number}
-   * @private
-   */
-  static getOccurrenceState(o, lifelineId) {
-    if (o.start.indexOf(lifelineId) !== -1) {
-      return 1;
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Toggle through three occurrence states on click.
+     * @param occurrence occurrences state, updated as side-effect.
+     * @param lifelineId message end that's being toggled.
+     * @private
+     */
+    static _toggleOccurrence(occurrence, lifelineId) {
+        const o = occurrence;
+
+        const rm = function rm(array, value) {
+            const index = array.indexOf(value);
+            if (index !== -1) {
+                array.splice(index, 1);
+            }
+        };
+
+        const add = function add(array, value) {
+            if (array.indexOf(value) === -1) {
+                array.push(value);
+            }
+        };
+
+        if (o.start && o.start.indexOf(lifelineId) !== -1) {
+            // Start -> stop.
+            rm(o.start, lifelineId);
+            add(o.stop, lifelineId);
+        } else if (o.stop && o.stop.indexOf(lifelineId) !== -1) {
+            // Stop -> default.
+            rm(o.start, lifelineId);
+            rm(o.stop, lifelineId);
+        } else {
+            // Default -> start.
+            add(o.start, lifelineId);
+            rm(o.stop, lifelineId);
+        }
     }
-    if (o.stop.indexOf(lifelineId) !== -1) {
-      return 2;
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Toggle fragment setting on click.
+     * @param fragment
+     * @private
+     **/
+    static _toggleFragment(fragment) {
+        const f = fragment;
+        if (f.start === true) {
+            f.start = false;
+            f.stop = true;
+        } else if (f.stop === true) {
+            f.stop = false;
+            f.start = false;
+        } else {
+            f.start = true;
+            f.stop = false;
+        }
+        f.guard = '';
+        f.operator = '';
     }
-    return 0;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get ternary fragment state.
-   * @param f fragment.
-   * @returns {number}
-   * @private
-   */
-  static getFragmentState(f) {
-    if (f.start) {
-      return 1;
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get ternary occurrences state.
+     * @param o occurrences.
+     * @param lifelineId from/to lifeline ID.
+     * @returns {number}
+     * @private
+     */
+    static getOccurrenceState(o, lifelineId) {
+        if (o.start.indexOf(lifelineId) !== -1) {
+            return 1;
+        }
+        if (o.stop.indexOf(lifelineId) !== -1) {
+            return 2;
+        }
+        return 0;
     }
-    if (f.stop) {
-      return 2;
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get ternary fragment state.
+     * @param f fragment.
+     * @returns {number}
+     * @private
+     */
+    static getFragmentState(f) {
+        if (f.start) {
+            return 1;
+        }
+        if (f.stop) {
+            return 2;
+        }
+        return 0;
     }
-    return 0;
-  }
 }
 
 /** Element properties. */
 Actions.propTypes = {
-  application: PropTypes.object.isRequired,
-  model: PropTypes.object.isRequired,
+    application: PropTypes.object.isRequired,
+    model: PropTypes.object.isRequired
 };
 
 export default Actions;
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/Lifeline.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/Lifeline.jsx
index 86ee80f72e..09c8d92c9b 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/Lifeline.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/Lifeline.jsx
@@ -28,238 +28,247 @@ import iconDelete from '../../../../../../../../../../res/ecomp/asdc/sequencer/s
  * LHS lifeline row view.
  */
 class Lifeline extends React.Component {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Construct editor view.
+     * @param props element properties.
+     * @param context react context.
+     */
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {
+            active: false,
+            name: props.lifeline.name
+        };
+
+        const metamodel = Common.assertNotNull(this.props.metamodel).unwrap();
+        this.canReorder = metamodel.diagram.lifelines.constraints.reorder;
+        this.canDelete = metamodel.diagram.lifelines.constraints.delete;
+
+        // Bindings.
+
+        this.onChangeName = this.onChangeName.bind(this);
+        this.onBlurName = this.onBlurName.bind(this);
+        this.onClickDelete = this.onClickDelete.bind(this);
+        this.onMouseEnter = this.onMouseEnter.bind(this);
+        this.onMouseLeave = this.onMouseLeave.bind(this);
+    }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Construct editor view.
-   * @param props element properties.
-   * @param context react context.
-   */
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      active: false,
-      name: props.lifeline.name,
-    };
-
-    const metamodel = Common.assertNotNull(this.props.metamodel).unwrap();
-    this.canReorder = metamodel.diagram.lifelines.constraints.reorder;
-    this.canDelete = metamodel.diagram.lifelines.constraints.delete;
-
-    // Bindings.
-
-    this.onChangeName = this.onChangeName.bind(this);
-    this.onBlurName = this.onBlurName.bind(this);
-    this.onClickDelete = this.onClickDelete.bind(this);
-    this.onMouseEnter = this.onMouseEnter.bind(this);
-    this.onMouseLeave = this.onMouseLeave.bind(this);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle name change.
-   * @param event change event.
-   */
-  onChangeName(event) {
-    this.setState({ name: event.target.value });
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle name change.
-   * @param event change event.
-   */
-  onBlurName(event) {
-    const options = this.props.application.getOptions();
-    const sanitized = Common.sanitizeText(event.target.value, options, 'lifeline');
-    const props = {
-      id: this.props.lifeline.id,
-      name: sanitized,
-    };
-    this.props.designer.updateLifeline(props);
-    this.setState({ name: sanitized });
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
-   * Handle lifeline delete.
-   */
-  onClickDelete() {
-    this.props.designer.deleteLifeline(this.props.lifeline.id);
-  }
+    /**
+     * Handle name change.
+     * @param event change event.
+     */
+    onChangeName(event) {
+        this.setState({ name: event.target.value });
+    }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle name change.
+     * @param event change event.
+     */
+    onBlurName(event) {
+        const options = this.props.application.getOptions();
+        const sanitized = Common.sanitizeText(
+            event.target.value,
+            options,
+            'lifeline'
+        );
+        const props = {
+            id: this.props.lifeline.id,
+            name: sanitized
+        };
+        this.props.designer.updateLifeline(props);
+        this.setState({ name: sanitized });
+    }
 
-  /**
-   * Handle mouseover event.
-   */
-  onMouseEnter() {
-    this.setState({ active: true });
-    this.props.designer.onMouseEnterLifeline(this.props.lifeline.id);
-  }
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    /**
+     * Handle lifeline delete.
+     */
+    onClickDelete() {
+        this.props.designer.deleteLifeline(this.props.lifeline.id);
+    }
 
-  /**
-   * Handle mouseleave event.
-   */
-  onMouseLeave() {
-    this.setState({ active: false });
-    this.props.designer.onMouseLeaveLifeline(this.props.lifeline.id);
-  }
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    /**
+     * Handle mouseover event.
+     */
+    onMouseEnter() {
+        this.setState({ active: true });
+        this.props.designer.onMouseEnterLifeline(this.props.lifeline.id);
+    }
 
-  /**
-   * Get whether metadata permits reorder.
-   * @returns true if reorderable.
-   */
-  isCanReorder() {
-    return this.canReorder;
-  }
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    /**
+     * Handle mouseleave event.
+     */
+    onMouseLeave() {
+        this.setState({ active: false });
+        this.props.designer.onMouseLeaveLifeline(this.props.lifeline.id);
+    }
 
-  /**
-   * Get whether metadata permits delete.
-   * @returns true if lifeline can be deleted.
-   */
-  isCanDelete() {
-    return this.canDelete;
-  }
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    /**
+     * Get whether metadata permits reorder.
+     * @returns true if reorderable.
+     */
+    isCanReorder() {
+        return this.canReorder;
+    }
 
-  /**
-   * React render.
-   * @returns {*}
-   */
-  render() {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-    const id = this.props.lifeline.id;
-    const activeClass = (this.props.active === true) ? 'asdcs-active' : '';
-    const { connectDragSource, connectDropTarget } = this.props;
-    return connectDragSource(connectDropTarget(
+    /**
+     * Get whether metadata permits delete.
+     * @returns true if lifeline can be deleted.
+     */
+    isCanDelete() {
+        return this.canDelete;
+    }
 
-      <div
-        className={`asdcs-designer-lifeline ${activeClass}`}
-        data-id={id}
-        onMouseEnter={this.onMouseEnter}
-        onMouseLeave={this.onMouseLeave}
-      >
-        <table className="asdcs-designer-layout asdcs-designer-lifeline-row1">
-          <tbody>
-            <tr>
-              <td>
-                <div className="asdcs-designer-sort asdcs-designer-icon">
-                  <Icon glyph={iconHandle} />
-                </div>
-              </td>
-              <td>
-                <div className="asdcs-designer-lifeline-index">{this.props.lifeline.index}.</div>
-              </td>
-              <td>
-                <div className="asdcs-designer-lifeline-name">
-                  <input
-                    type="text"
-                    className="asdcs-editable"
-                    placeholder="Unnamed"
-                    value={this.state.name}
-                    onChange={this.onChangeName}
-                    onBlur={this.onBlurName}
-                  />
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * React render.
+     * @returns {*}
+     */
+    render() {
+        const id = this.props.lifeline.id;
+        const activeClass = this.props.active === true ? 'asdcs-active' : '';
+        const { connectDragSource, connectDropTarget } = this.props;
+        return connectDragSource(
+            connectDropTarget(
+                <div
+                    className={`asdcs-designer-lifeline ${activeClass}`}
+                    data-id={id}
+                    onMouseEnter={this.onMouseEnter}
+                    onMouseLeave={this.onMouseLeave}>
+                    <table className="asdcs-designer-layout asdcs-designer-lifeline-row1">
+                        <tbody>
+                            <tr>
+                                <td>
+                                    <div className="asdcs-designer-sort asdcs-designer-icon">
+                                        <Icon glyph={iconHandle} />
+                                    </div>
+                                </td>
+                                <td>
+                                    <div className="asdcs-designer-lifeline-index">
+                                        {this.props.lifeline.index}.
+                                    </div>
+                                </td>
+                                <td>
+                                    <div className="asdcs-designer-lifeline-name">
+                                        <input
+                                            type="text"
+                                            className="asdcs-editable"
+                                            placeholder="Unnamed"
+                                            value={this.state.name}
+                                            onChange={this.onChangeName}
+                                            onBlur={this.onBlurName}
+                                        />
+                                    </div>
+                                </td>
+                                <td>
+                                    <div
+                                        className="asdcs-designer-delete asdcs-designer-icon"
+                                        onClick={this.onClickDelete}>
+                                        <Icon glyph={iconDelete} />
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
                 </div>
-              </td>
-              <td>
-                <div className="asdcs-designer-delete asdcs-designer-icon" onClick={this.onClickDelete}>
-                  <Icon glyph={iconDelete} />
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    ));
-  }
+            )
+        );
+    }
 }
 
 /**
  * Declare properties.
  */
 Lifeline.propTypes = {
-  application: PropTypes.object.isRequired,
-  designer: PropTypes.object.isRequired,
-  lifeline: PropTypes.object.isRequired,
-  active: PropTypes.bool.isRequired,
-  metamodel: PropTypes.object.isRequired,
-  id: PropTypes.any.isRequired,
-  index: PropTypes.number.isRequired,
-  lifelines: PropTypes.object.isRequired,
-  isDragging: PropTypes.bool.isRequired,
-  connectDragSource: PropTypes.func.isRequired,
-  connectDropTarget: PropTypes.func.isRequired,
+    application: PropTypes.object.isRequired,
+    designer: PropTypes.object.isRequired,
+    lifeline: PropTypes.object.isRequired,
+    active: PropTypes.bool.isRequired,
+    metamodel: PropTypes.object.isRequired,
+    id: PropTypes.any.isRequired,
+    index: PropTypes.number.isRequired,
+    lifelines: PropTypes.object.isRequired,
+    isDragging: PropTypes.bool.isRequired,
+    connectDragSource: PropTypes.func.isRequired,
+    connectDropTarget: PropTypes.func.isRequired
 };
 
 /** DND. */
 const source = {
-  beginDrag(props) {
-    return {
-      id: props.id,
-      index: props.index,
-    };
-  },
+    beginDrag(props) {
+        return {
+            id: props.id,
+            index: props.index
+        };
+    }
 };
 
 /** DND. */
 const sourceCollect = function collection(connect, monitor) {
-  return {
-    connectDragSource: connect.dragSource(),
-    isDragging: monitor.isDragging(),
-  };
+    return {
+        connectDragSource: connect.dragSource(),
+        isDragging: monitor.isDragging()
+    };
 };
 
 /** DND. */
 const target = {
-  drop(props, monitor, component) {
-    Common.assertNotNull(props);
-    Common.assertNotNull(monitor);
-    const decorated = component.getDecoratedComponentInstance();
-    if (decorated) {
-      const lifelines = decorated.props.lifelines;
-      if (lifelines) {
-        const dragIndex = monitor.getItem().index;
-        const hoverIndex = lifelines.getHoverIndex();
-        lifelines.onDrop(dragIndex, hoverIndex);
-      }
-    }
-  },
-  hover(props, monitor, component) {
-    Common.assertNotNull(props);
-    Common.assertNotNull(monitor);
-    if (component) {
-      const decorated = component.getDecoratedComponentInstance();
-      if (decorated) {
-        const lifelines = decorated.props.lifelines;
-        if (lifelines) {
-          lifelines.setHoverIndex(decorated.props.index);
+    drop(props, monitor, component) {
+        Common.assertNotNull(props);
+        Common.assertNotNull(monitor);
+        const decorated = component.getDecoratedComponentInstance();
+        if (decorated) {
+            const lifelines = decorated.props.lifelines;
+            if (lifelines) {
+                const dragIndex = monitor.getItem().index;
+                const hoverIndex = lifelines.getHoverIndex();
+                lifelines.onDrop(dragIndex, hoverIndex);
+            }
+        }
+    },
+    hover(props, monitor, component) {
+        Common.assertNotNull(props);
+        Common.assertNotNull(monitor);
+        if (component) {
+            const decorated = component.getDecoratedComponentInstance();
+            if (decorated) {
+                const lifelines = decorated.props.lifelines;
+                if (lifelines) {
+                    lifelines.setHoverIndex(decorated.props.index);
+                }
+            }
         }
-      }
     }
-  },
 };
 
 /** DND. */
 function targetCollect(connect, monitor) {
-  return {
-    connectDropTarget: connect.dropTarget(),
-    isOver: monitor.isOver(),
-  };
+    return {
+        connectDropTarget: connect.dropTarget(),
+        isOver: monitor.isOver()
+    };
 }
-
+/* eslint-disable new-cap */
 const wrapper1 = DragSource('lifeline', source, sourceCollect)(Lifeline);
-export default DropTarget(['lifeline', 'lifeline-new'], target, targetCollect)(wrapper1);
+export default DropTarget(['lifeline', 'lifeline-new'], target, targetCollect)(
+    wrapper1
+);
+/* eslint-enable new-cap */
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/LifelineNew.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/LifelineNew.jsx
index a8147be370..beb6364670 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/LifelineNew.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/LifelineNew.jsx
@@ -26,88 +26,92 @@ import iconHandle from '../../../../../../../../../../res/ecomp/asdc/sequencer/s
  * LHS lifeline row view.
  */
 class LifelineNew extends React.Component {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    /**
+     * Construct view.
+     * @param props element properties.
+     * @param context react context.
+     */
+    constructor(props, context) {
+        super(props, context);
 
-  /**
-   * Construct view.
-   * @param props element properties.
-   * @param context react context.
-   */
-  constructor(props, context) {
-    super(props, context);
+        // Bindings.
 
-    // Bindings.
+        this.onClickAdd = this.onClickAdd.bind(this);
+    }
 
-    this.onClickAdd = this.onClickAdd.bind(this);
-  }
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    /**
+     * Handle click event.
+     */
+    onClickAdd() {
+        this.props.designer.addLifeline();
+    }
 
-  /**
-   * Handle click event.
-   */
-  onClickAdd() {
-    this.props.designer.addLifeline();
-  }
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Render view.
-   * @returns {*}
-   */
-  render() {
-    const { connectDragSource } = this.props;
-    return connectDragSource(
-      <div className="asdcs-designer-lifeline asdcs-designer-lifeline-new">
-        <table className="asdcs-designer-layout asdcs-designer-lifeline-new">
-          <tbody>
-            <tr>
-              <td>
-                <div className="asdcs-designer-sort asdcs-designer-icon">
-                  <Icon glyph={iconHandle} />
-                </div>
-              </td>
-              <td>
-                <div className="asdcs-designer-label" onClick={this.onClickAdd}>
-                  Add Lifeline
-                </div>
-              </td>
-              <td>
-                <div className="asdcs-designer-icon" onClick={this.onClickAdd}>
-                  <Icon glyph={iconPlus} />
-                </div>
-              </td>
-              <td>&nbsp;</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    );
-  }
+    /**
+     * Render view.
+     * @returns {*}
+     */
+    render() {
+        const { connectDragSource } = this.props;
+        return connectDragSource(
+            <div className="asdcs-designer-lifeline asdcs-designer-lifeline-new">
+                <table className="asdcs-designer-layout asdcs-designer-lifeline-new">
+                    <tbody>
+                        <tr>
+                            <td>
+                                <div className="asdcs-designer-sort asdcs-designer-icon">
+                                    <Icon glyph={iconHandle} />
+                                </div>
+                            </td>
+                            <td>
+                                <div
+                                    className="asdcs-designer-label"
+                                    onClick={this.onClickAdd}>
+                                    Add Lifeline
+                                </div>
+                            </td>
+                            <td>
+                                <div
+                                    className="asdcs-designer-icon"
+                                    onClick={this.onClickAdd}>
+                                    <Icon glyph={iconPlus} />
+                                </div>
+                            </td>
+                            <td>&nbsp;</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        );
+    }
 }
 
 /** Element properties. */
 LifelineNew.propTypes = {
-  designer: PropTypes.object.isRequired,
-  lifelines: PropTypes.object.isRequired,
-  connectDragSource: PropTypes.func.isRequired,
+    designer: PropTypes.object.isRequired,
+    lifelines: PropTypes.object.isRequired,
+    connectDragSource: PropTypes.func.isRequired
 };
 
 /** DND. */
 const source = {
-  beginDrag(props) {
-    return { id: props.id };
-  },
+    beginDrag(props) {
+        return { id: props.id };
+    }
 };
 
 /** DND. */
 const collect = function collection(connect, monitor) {
-  return {
-    connectDragSource: connect.dragSource(),
-    isDragging: monitor.isDragging(),
-  };
+    return {
+        connectDragSource: connect.dragSource(),
+        isDragging: monitor.isDragging()
+    };
 };
-
+/* eslint-disable new-cap */
 export default DragSource('lifeline-new', source, collect)(LifelineNew);
+/* eslint-enable new-cap */
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/Lifelines.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/Lifelines.jsx
index 2f82fec7a0..248264b6df 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/Lifelines.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/Lifelines.jsx
@@ -28,111 +28,110 @@ import LifelineNew from './LifelineNew';
  * @constructor
  */
 class Lifelines extends React.Component {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Construct view.
+     * @param props element properties.
+     * @param context react context.
+     */
+    constructor(props, context) {
+        super(props, context);
+        this.setHoverIndex = this.setHoverIndex.bind(this);
+        this.getHoverIndex = this.getHoverIndex.bind(this);
+        this.onDrop = this.onDrop.bind(this);
+    }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Construct view.
-   * @param props element properties.
-   * @param context react context.
-   */
-  constructor(props, context) {
-    super(props, context);
-    this.setHoverIndex = this.setHoverIndex.bind(this);
-    this.getHoverIndex = this.getHoverIndex.bind(this);
-    this.onDrop = this.onDrop.bind(this);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Record last hover index as non-state.
-   * @param index index.
-   */
-  setHoverIndex(index) {
-    this.hoverIndex = index;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get last recorded hover index.
-   * @returns {*}
-   */
-  getHoverIndex() {
-    return this.hoverIndex;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle drop.
-   * @param dragIndex dragged item index; undefined if new.
-   * @param hoverIndex drop index.
-   */
-  onDrop(dragIndex, hoverIndex) {
-    if (hoverIndex >= 0) {
-      const application = this.props.application;
-      const model = application.getModel();
-      if (Common.isNumber(dragIndex)) {
-        if (dragIndex !== hoverIndex) {
-          model.reorderLifelines(dragIndex, hoverIndex);
-        }
-      } else {
-        model.addLifeline(hoverIndex);
-      }
-      this.forceUpdate();
-      application.renderDiagram();
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Record last hover index as non-state.
+     * @param index index.
+     */
+    setHoverIndex(index) {
+        this.hoverIndex = index;
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get last recorded hover index.
+     * @returns {*}
+     */
+    getHoverIndex() {
+        return this.hoverIndex;
     }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Render view.
-   * @returns {XML}
-   */
-  render() {
-    const model = this.props.application.getModel();
-    const metamodel = model.getMetamodel();
-    const diagram = model.unwrap().diagram;
-
-    const lifelines = [];
-    for (const lifeline of diagram.lifelines) {
-      lifelines.push(<Lifeline
-        key={`l${lifeline.id}`}
-        application={this.props.application}
-        designer={this.props.designer}
-        lifeline={lifeline}
-        active={this.props.activeLifelineId === lifeline.id}
-        id={lifeline.id}
-        metamodel={metamodel}
-        lifelines={this}
-        index={lifelines.length}
-      />);
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle drop.
+     * @param dragIndex dragged item index; undefined if new.
+     * @param hoverIndex drop index.
+     */
+    onDrop(dragIndex, hoverIndex) {
+        if (hoverIndex >= 0) {
+            const application = this.props.application;
+            const model = application.getModel();
+            if (Common.isNumber(dragIndex)) {
+                if (dragIndex !== hoverIndex) {
+                    model.reorderLifelines(dragIndex, hoverIndex);
+                }
+            } else {
+                model.addLifeline(hoverIndex);
+            }
+            this.forceUpdate();
+            application.renderDiagram();
+        }
     }
 
-    lifelines.push(<LifelineNew
-      key="_l"
-      designer={this.props.designer}
-      lifelines={this}
-    />);
-
-    return (
-      <div className="asdcs-designer-lifelines">
-        {lifelines}
-      </div>
-    );
-  }
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Render view.
+     * @returns {XML}
+     */
+    render() {
+        const model = this.props.application.getModel();
+        const metamodel = model.getMetamodel();
+        const diagram = model.unwrap().diagram;
+
+        const lifelines = [];
+        for (const lifeline of diagram.lifelines) {
+            lifelines.push(
+                <Lifeline
+                    key={`l${lifeline.id}`}
+                    application={this.props.application}
+                    designer={this.props.designer}
+                    lifeline={lifeline}
+                    active={this.props.activeLifelineId === lifeline.id}
+                    id={lifeline.id}
+                    metamodel={metamodel}
+                    lifelines={this}
+                    index={lifelines.length}
+                />
+            );
+        }
+
+        lifelines.push(
+            <LifelineNew
+                key="_l"
+                designer={this.props.designer}
+                lifelines={this}
+            />
+        );
+
+        return <div className="asdcs-designer-lifelines">{lifelines}</div>;
+    }
 }
 
 /**
  * Declare properties.
  */
 Lifelines.propTypes = {
-  application: PropTypes.object.isRequired,
-  designer: PropTypes.object.isRequired,
-  activeLifelineId: PropTypes.string,
+    application: PropTypes.object.isRequired,
+    designer: PropTypes.object.isRequired,
+    activeLifelineId: PropTypes.string
 };
 
 export default Lifelines;
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/Message.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/Message.jsx
index a2c7f5122a..ba77e8658f 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/Message.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/Message.jsx
@@ -34,482 +34,480 @@ import iconResponse from '../../../../../../../../../../res/ecomp/asdc/sequencer
  * LHS message row view.
  */
 class Message extends React.Component {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Construct view.
+     * @param props element properties.
+     * @param context react context.
+     */
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {
+            active: false,
+            name: props.message.name || ''
+        };
+
+        this.combinedOptions = [
+            {
+                value: 'REQUEST_SYNC'
+            },
+            {
+                value: 'REQUEST_ASYNC'
+            },
+            {
+                value: 'RESPONSE'
+            }
+        ];
+
+        // Bindings.
+
+        this.onChangeName = this.onChangeName.bind(this);
+        this.onBlurName = this.onBlurName.bind(this);
+        this.onChangeType = this.onChangeType.bind(this);
+        this.onChangeFrom = this.onChangeFrom.bind(this);
+        this.onChangeTo = this.onChangeTo.bind(this);
+        this.onClickDelete = this.onClickDelete.bind(this);
+        this.onClickActions = this.onClickActions.bind(this);
+        this.onClickNotes = this.onClickNotes.bind(this);
+        this.onMouseEnter = this.onMouseEnter.bind(this);
+        this.onMouseLeave = this.onMouseLeave.bind(this);
+    }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
-   * Construct view.
-   * @param props element properties.
-   * @param context react context.
-   */
-  constructor(props, context) {
-    super(props, context);
+    /**
+     * Handle name change.
+     * @param event change event.
+     */
+    onChangeName(event) {
+        this.setState({ name: event.target.value });
+    }
 
-    this.state = {
-      active: false,
-      name: props.message.name || '',
-    };
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle name change.
+     * @param event change event.
+     */
+    onBlurName(event) {
+        const options = this.props.application.getOptions();
+        const sanitized = Common.sanitizeText(
+            event.target.value,
+            options,
+            'message'
+        );
+        const props = {
+            id: this.props.message.id,
+            name: sanitized
+        };
+        this.props.designer.updateMessage(props);
+        this.setState({ name: sanitized });
+    }
 
-    this.combinedOptions = [{
-      value: 'REQUEST_SYNC',
-    }, {
-      value: 'REQUEST_ASYNC',
-    }, {
-      value: 'RESPONSE',
-    }];
-
-    // Bindings.
-
-    this.onChangeName = this.onChangeName.bind(this);
-    this.onBlurName = this.onBlurName.bind(this);
-    this.onChangeType = this.onChangeType.bind(this);
-    this.onChangeFrom = this.onChangeFrom.bind(this);
-    this.onChangeTo = this.onChangeTo.bind(this);
-    this.onClickDelete = this.onClickDelete.bind(this);
-    this.onClickActions = this.onClickActions.bind(this);
-    this.onClickNotes = this.onClickNotes.bind(this);
-    this.onMouseEnter = this.onMouseEnter.bind(this);
-    this.onMouseLeave = this.onMouseLeave.bind(this);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle name change.
-   * @param event change event.
-   */
-  onChangeName(event) {
-    this.setState({ name: event.target.value });
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle name change.
-   * @param event change event.
-   */
-  onBlurName(event) {
-    const options = this.props.application.getOptions();
-    const sanitized = Common.sanitizeText(event.target.value, options, 'message');
-    const props = {
-      id: this.props.message.id,
-      name: sanitized,
-    };
-    this.props.designer.updateMessage(props);
-    this.setState({ name: sanitized });
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle delete.
-   */
-  onClickDelete() {
-    this.props.designer.deleteMessage(this.props.message.id);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle menu click.
-   */
-  onClickActions(event) {
-    this.props.designer.showActions(this.props.message.id, { x: event.pageX, y: event.pageY });
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle menu click.
-   */
-  onClickNotes() {
-    this.props.designer.showNotes(this.props.message.id);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle selection.
-   * @param value selection.
-   */
-  onChangeFrom(value) {
-    if (value.target) {
-      this.updateMessage({ from: value.target.value });
-    } else {
-      this.updateMessage({ from: value.value });
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle delete.
+     */
+    onClickDelete() {
+        this.props.designer.deleteMessage(this.props.message.id);
     }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle selection.
-   * @param value selection.
-   */
-  onChangeTo(value) {
-    if (value.target) {
-      this.updateMessage({ to: value.target.value });
-    } else {
-      this.updateMessage({ to: value.value });
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle menu click.
+     */
+    onClickActions(event) {
+        this.props.designer.showActions(this.props.message.id, {
+            x: event.pageX,
+            y: event.pageY
+        });
     }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle selection.
-   * @param selected selection.
-   */
-  onChangeType(selected) {
-
-    const value = selected.target ? selected.target.value : selected.value;
-    const props = {};
-    if (value.indexOf('RESPONSE') !== -1) {
-      props.type = 'response';
-      props.asynchronous = false;
-    } else {
-      props.type = 'request';
-      props.asynchronous = (value.indexOf('ASYNC') !== -1);
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle menu click.
+     */
+    onClickNotes() {
+        this.props.designer.showNotes(this.props.message.id);
     }
 
-    this.updateMessage(props);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle mouse event.
-   */
-  onMouseEnter() {
-    this.setState({ active: true });
-    this.props.designer.onMouseEnterMessage(this.props.message.id);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle mouse event.
-   */
-  onMouseLeave() {
-    this.setState({ active: false });
-    this.props.designer.onMouseLeaveMessage(this.props.message.id);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Update message properties.
-   * @param props properties updates.
-   */
-  updateMessage(props) {
-    const update = {
-      id: this.props.message.id,
-    };
-    for (const k of Object.keys(props)) {
-      update[k] = props[k];
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle selection.
+     * @param value selection.
+     */
+    onChangeFrom(value) {
+        if (value.target) {
+            this.updateMessage({ from: value.target.value });
+        } else {
+            this.updateMessage({ from: value.value });
+        }
     }
-    this.props.designer.updateMessage(update);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Render icon.
-   * @param option selection.
-   * @returns {XML}
-   */
-  renderOption(option) {
-    if (option.value === 'RESPONSE') {
-      return <Icon glyph={iconResponse} />;
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle selection.
+     * @param value selection.
+     */
+    onChangeTo(value) {
+        if (value.target) {
+            this.updateMessage({ to: value.target.value });
+        } else {
+            this.updateMessage({ to: value.value });
+        }
     }
-    if (option.value === 'REQUEST_ASYNC') {
-      return <Icon glyph={iconRequestAsync} />;
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle selection.
+     * @param selected selection.
+     */
+    onChangeType(selected) {
+        const value = selected.target ? selected.target.value : selected.value;
+        const props = {};
+        if (value.indexOf('RESPONSE') !== -1) {
+            props.type = 'response';
+            props.asynchronous = false;
+        } else {
+            props.type = 'request';
+            props.asynchronous = value.indexOf('ASYNC') !== -1;
+        }
+
+        this.updateMessage(props);
     }
-    return <Icon glyph={iconRequestSync} />;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get request/response and asynchronous combined constant.
-   * @param message message whose properties define spec.
-   * @returns {*}
-   */
-  getMessageSpec(message) {
-    if (message.type === 'response') {
-      return 'RESPONSE';
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle mouse event.
+     */
+    onMouseEnter() {
+        this.setState({ active: true });
+        this.props.designer.onMouseEnterMessage(this.props.message.id);
     }
-    if (message.asynchronous) {
-      return 'REQUEST_ASYNC';
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle mouse event.
+     */
+    onMouseLeave() {
+        this.setState({ active: false });
+        this.props.designer.onMouseLeaveMessage(this.props.message.id);
     }
-    return 'REQUEST_SYNC';
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * @returns {*}
-   * @private
-   */
-  renderHTMLSelect() {
-
-    const message = this.props.message;
-    const from = this.props.from;
-    const to = Common.assertNotNull(this.props.to);
-    const messageNotesActiveClass = message.notes && message.notes.length > 0 ? 'asdcs-active' : '';
-    const combinedValue = this.getMessageSpec(message);
-
-    const lifelineOptions = [];
-    for (const lifeline of this.props.model.unwrap().diagram.lifelines) {
-      lifelineOptions.push(<option
-        key={lifeline.id}
-        value={lifeline.id}
-      >
-        {lifeline.name}
-      </option>);
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Update message properties.
+     * @param props properties updates.
+     */
+    updateMessage(props) {
+        const update = {
+            id: this.props.message.id
+        };
+        for (const k of Object.keys(props)) {
+            update[k] = props[k];
+        }
+        this.props.designer.updateMessage(update);
     }
 
-    const activeClass = (this.state.active || this.props.active) ? 'asdcs-active' : '';
-    const { connectDragSource, connectDropTarget } = this.props;
-    return connectDragSource(connectDropTarget(
-      <div
-        className={`asdcs-designer-message ${activeClass}`}
-        data-id={message.id}
-        onMouseEnter={this.onMouseEnter}
-        onMouseLeave={this.onMouseLeave}
-      >
-
-        <table className="asdcs-designer-layout asdcs-designer-message-row1">
-          <tbody>
-            <tr>
-              <td>
-                <div className="asdcs-designer-sort asdcs-designer-icon">
-                  <Icon glyph={iconHandle} />
-                </div>
-              </td>
-              <td>
-                <div className="asdcs-designer-message-index">{message.index}.</div>
-              </td>
-              <td>
-                <div className="asdcs-designer-message-name">
-                  <input
-                    type="text"
-                    className="asdcs-editable"
-                    value={this.state.name}
-                    placeholder="Unnamed"
-                    onBlur={this.onBlurName}
-                    onChange={this.onChangeName}
-                  />
-                </div>
-              </td>
-              <td>
-                <div className="asdcs-designer-actions">
-                  <div
-                    className="asdcs-designer-settings asdcs-designer-icon"
-                    onClick={this.onClickActions}
-                  >
-                    <Icon glyph={iconSettings} />
-                  </div>
-                  <div
-                    className={`asdcs-designer-notes asdcs-designer-icon ${messageNotesActiveClass}`}
-                    onClick={this.onClickNotes}
-                  >
-                    <Icon glyph={iconNotes} />
-                  </div>
-                  <div
-                    className="asdcs-designer-delete asdcs-designer-icon"
-                    onClick={this.onClickDelete}
-                  >
-                    <Icon glyph={iconDelete} />
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <table className="asdcs-designer-layout asdcs-designer-message-row2">
-          <tbody>
-            <tr>
-              <td>
-                <select
-                  onChange={this.onChangeFrom}
-                  className="asdcs-designer-select-message-from"
-                  value={from.id}
-                  onChange={this.onChangeFrom}
-                >
-                  options={lifelineOptions}
-                </select>
-              </td>
-              <td>
-                <select
-                  onChange={this.onChangeFrom}
-                  className="asdcs-designer-select-message-type"
-                  value={combinedValue}
-                  onChange={this.onChangeType}
-                >
-                  <option value="REQUEST_SYNC">⇾</option>
-                  <option value="REQUEST_ASYNC">→</option>
-                  <option value="RESPONSE">⇠</option>
-                </select>
-              </td>
-              <td>
-                <select
-                  onChange={this.onChangeFrom}
-                  className="asdcs-designer-select-message-to"
-                  value={to.id}
-                  onChange={this.onChangeTo}
-                >
-                  options={lifelineOptions}
-                </select>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-      </div>
-    ));
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Render view.
-   * @returns {*}
-   * @private
-   */
-  renderReactSelect() {
-
-    const message = this.props.message;
-    const from = this.props.from;
-    const to = Common.assertNotNull(this.props.to);
-    const messageNotesActiveClass = message.notes && message.notes.length > 0 ? 'asdcs-active' : '';
-    const combinedValue = this.getMessageSpec(message);
-
-    const lifelineOptions = [];
-    for (const lifeline of this.props.model.unwrap().diagram.lifelines) {
-      lifelineOptions.push({
-        value: lifeline.id,
-        label: lifeline.name,
-      });
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Render icon.
+     * @param option selection.
+     * @returns {XML}
+     */
+    renderOption(option) {
+        if (option.value === 'RESPONSE') {
+            return <Icon glyph={iconResponse} />;
+        }
+        if (option.value === 'REQUEST_ASYNC') {
+            return <Icon glyph={iconRequestAsync} />;
+        }
+        return <Icon glyph={iconRequestSync} />;
     }
 
-    const activeClass = (this.state.active || this.props.active) ? 'asdcs-active' : '';
-    const { connectDragSource, connectDropTarget } = this.props;
-    return connectDragSource(connectDropTarget(
-
-      <div
-        className={`asdcs-designer-message ${activeClass}`}
-        data-id={message.id}
-        onMouseEnter={this.onMouseEnter}
-        onMouseLeave={this.onMouseLeave}
-      >
-
-        <table className="asdcs-designer-layout asdcs-designer-message-row1">
-          <tbody>
-            <tr>
-              <td>
-                <div className="asdcs-designer-sort asdcs-designer-icon">
-                  <Icon glyph={iconHandle} />
-                </div>
-              </td>
-              <td>
-                <div className="asdcs-designer-message-index">{message.index}.</div>
-              </td>
-              <td>
-                <div className="asdcs-designer-message-name">
-                  <input
-                    type="text"
-                    className="asdcs-editable"
-                    value={this.state.name}
-                    placeholder="Unnamed"
-                    onBlur={this.onBlurName}
-                    onChange={this.onChangeName}
-                  />
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get request/response and asynchronous combined constant.
+     * @param message message whose properties define spec.
+     * @returns {*}
+     */
+    getMessageSpec(message) {
+        if (message.type === 'response') {
+            return 'RESPONSE';
+        }
+        if (message.asynchronous) {
+            return 'REQUEST_ASYNC';
+        }
+        return 'REQUEST_SYNC';
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * @returns {*}
+     * @private
+     */
+    renderHTMLSelect() {
+        const message = this.props.message;
+        const from = this.props.from;
+        const to = Common.assertNotNull(this.props.to);
+        const messageNotesActiveClass =
+            message.notes && message.notes.length > 0 ? 'asdcs-active' : '';
+        const combinedValue = this.getMessageSpec(message);
+
+        const lifelineOptions = [];
+        for (const lifeline of this.props.model.unwrap().diagram.lifelines) {
+            lifelineOptions.push(
+                <option key={lifeline.id} value={lifeline.id}>
+                    {lifeline.name}
+                </option>
+            );
+        }
+
+        const activeClass =
+            this.state.active || this.props.active ? 'asdcs-active' : '';
+        const { connectDragSource, connectDropTarget } = this.props;
+        return connectDragSource(
+            connectDropTarget(
+                <div
+                    className={`asdcs-designer-message ${activeClass}`}
+                    data-id={message.id}
+                    onMouseEnter={this.onMouseEnter}
+                    onMouseLeave={this.onMouseLeave}>
+                    <table className="asdcs-designer-layout asdcs-designer-message-row1">
+                        <tbody>
+                            <tr>
+                                <td>
+                                    <div className="asdcs-designer-sort asdcs-designer-icon">
+                                        <Icon glyph={iconHandle} />
+                                    </div>
+                                </td>
+                                <td>
+                                    <div className="asdcs-designer-message-index">
+                                        {message.index}.
+                                    </div>
+                                </td>
+                                <td>
+                                    <div className="asdcs-designer-message-name">
+                                        <input
+                                            type="text"
+                                            className="asdcs-editable"
+                                            value={this.state.name}
+                                            placeholder="Unnamed"
+                                            onBlur={this.onBlurName}
+                                            onChange={this.onChangeName}
+                                        />
+                                    </div>
+                                </td>
+                                <td>
+                                    <div className="asdcs-designer-actions">
+                                        <div
+                                            className="asdcs-designer-settings asdcs-designer-icon"
+                                            onClick={this.onClickActions}>
+                                            <Icon glyph={iconSettings} />
+                                        </div>
+                                        <div
+                                            className={`asdcs-designer-notes asdcs-designer-icon ${messageNotesActiveClass}`}
+                                            onClick={this.onClickNotes}>
+                                            <Icon glyph={iconNotes} />
+                                        </div>
+                                        <div
+                                            className="asdcs-designer-delete asdcs-designer-icon"
+                                            onClick={this.onClickDelete}>
+                                            <Icon glyph={iconDelete} />
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <table className="asdcs-designer-layout asdcs-designer-message-row2">
+                        <tbody>
+                            <tr>
+                                <td>
+                                    <select
+                                        className="asdcs-designer-select-message-from"
+                                        value={from.id}
+                                        onChange={this.onChangeFrom}>
+                                        options={lifelineOptions}
+                                    </select>
+                                </td>
+                                <td>
+                                    <select
+                                        className="asdcs-designer-select-message-type"
+                                        value={combinedValue}
+                                        onChange={this.onChangeType}>
+                                        <option value="REQUEST_SYNC">⇾</option>
+                                        <option value="REQUEST_ASYNC">→</option>
+                                        <option value="RESPONSE">⇠</option>
+                                    </select>
+                                </td>
+                                <td>
+                                    <select
+                                        className="asdcs-designer-select-message-to"
+                                        value={to.id}
+                                        onChange={this.onChangeTo}>
+                                        options={lifelineOptions}
+                                    </select>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
                 </div>
-              </td>
-              <td>
-                <div className="asdcs-designer-actions">
-                  <div
-                    className="asdcs-designer-settings asdcs-designer-icon"
-                    onClick={this.onClickActions}
-                  >
-                    <Icon glyph={iconSettings} />
-                  </div>
-                  <div
-                    className={`asdcs-designer-notes asdcs-designer-icon ${messageNotesActiveClass}`}
-                    onClick={this.onClickNotes}
-                  >
-                    <Icon glyph={iconNotes} />
-                  </div>
-                  <div
-                    className="asdcs-designer-delete asdcs-designer-icon"
-                    onClick={this.onClickDelete}
-                  >
-                    <Icon glyph={iconDelete} />
-                  </div>
+            )
+        );
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Render view.
+     * @returns {*}
+     * @private
+     */
+    renderReactSelect() {
+        const message = this.props.message;
+        const from = this.props.from;
+        const to = Common.assertNotNull(this.props.to);
+        const messageNotesActiveClass =
+            message.notes && message.notes.length > 0 ? 'asdcs-active' : '';
+        const combinedValue = this.getMessageSpec(message);
+
+        const lifelineOptions = [];
+        for (const lifeline of this.props.model.unwrap().diagram.lifelines) {
+            lifelineOptions.push({
+                value: lifeline.id,
+                label: lifeline.name
+            });
+        }
+
+        const activeClass =
+            this.state.active || this.props.active ? 'asdcs-active' : '';
+        const { connectDragSource, connectDropTarget } = this.props;
+        return connectDragSource(
+            connectDropTarget(
+                <div
+                    className={`asdcs-designer-message ${activeClass}`}
+                    data-id={message.id}
+                    onMouseEnter={this.onMouseEnter}
+                    onMouseLeave={this.onMouseLeave}>
+                    <table className="asdcs-designer-layout asdcs-designer-message-row1">
+                        <tbody>
+                            <tr>
+                                <td>
+                                    <div className="asdcs-designer-sort asdcs-designer-icon">
+                                        <Icon glyph={iconHandle} />
+                                    </div>
+                                </td>
+                                <td>
+                                    <div className="asdcs-designer-message-index">
+                                        {message.index}.
+                                    </div>
+                                </td>
+                                <td>
+                                    <div className="asdcs-designer-message-name">
+                                        <input
+                                            type="text"
+                                            className="asdcs-editable"
+                                            value={this.state.name}
+                                            placeholder="Unnamed"
+                                            onBlur={this.onBlurName}
+                                            onChange={this.onChangeName}
+                                        />
+                                    </div>
+                                </td>
+                                <td>
+                                    <div className="asdcs-designer-actions">
+                                        <div
+                                            className="asdcs-designer-settings asdcs-designer-icon"
+                                            onClick={this.onClickActions}>
+                                            <Icon glyph={iconSettings} />
+                                        </div>
+                                        <div
+                                            className={`asdcs-designer-notes asdcs-designer-icon ${messageNotesActiveClass}`}
+                                            onClick={this.onClickNotes}>
+                                            <Icon glyph={iconNotes} />
+                                        </div>
+                                        <div
+                                            className="asdcs-designer-delete asdcs-designer-icon"
+                                            onClick={this.onClickDelete}>
+                                            <Icon glyph={iconDelete} />
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <table className="asdcs-designer-layout asdcs-designer-message-row2">
+                        <tbody>
+                            <tr>
+                                <td>
+                                    <Select
+                                        className="asdcs-editable-select asdcs-designer-editable-message-from"
+                                        openOnFocus
+                                        clearable={false}
+                                        searchable={false}
+                                        value={from.id}
+                                        onChange={this.onChangeFrom}
+                                        options={lifelineOptions}
+                                    />
+                                </td>
+                                <td>
+                                    <Select
+                                        className="asdcs-editable-select asdcs-designer-editable-message-type"
+                                        openOnFocus
+                                        clearable={false}
+                                        searchable={false}
+                                        value={combinedValue}
+                                        onChange={this.onChangeType}
+                                        options={this.combinedOptions}
+                                        optionRenderer={this.renderOption}
+                                        valueRenderer={this.renderOption}
+                                    />
+                                </td>
+                                <td>
+                                    <Select
+                                        className="asdcs-editable-select asdcs-designer-editable-message-to"
+                                        openOnFocus
+                                        clearable={false}
+                                        searchable={false}
+                                        value={to.id}
+                                        onChange={this.onChangeTo}
+                                        options={lifelineOptions}
+                                    />
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
                 </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <table className="asdcs-designer-layout asdcs-designer-message-row2">
-          <tbody>
-            <tr>
-              <td>
-                <Select
-                  className="asdcs-editable-select asdcs-designer-editable-message-from"
-                  openOnFocus
-                  clearable={false}
-                  searchable={false}
-                  value={from.id}
-                  onChange={this.onChangeFrom}
-                  options={lifelineOptions}
-                />
-              </td>
-              <td>
-                <Select
-                  className="asdcs-editable-select asdcs-designer-editable-message-type"
-                  openOnFocus
-                  clearable={false}
-                  searchable={false}
-                  value={combinedValue}
-                  onChange={this.onChangeType}
-                  options={this.combinedOptions}
-                  optionRenderer={this.renderOption}
-                  valueRenderer={this.renderOption}
-                />
-              </td>
-              <td>
-                <Select
-                  className="asdcs-editable-select asdcs-designer-editable-message-to"
-                  openOnFocus
-                  clearable={false}
-                  searchable={false}
-                  value={to.id}
-                  onChange={this.onChangeTo}
-                  options={lifelineOptions}
-                />
-              </td>
-
-            </tr>
-          </tbody>
-        </table>
-
-      </div>
-    ));
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  render() {
-    const options = this.props.application.getOptions();
-    if (options.useHtmlSelect) {
-      return this.renderHTMLSelect();
+            )
+        );
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    render() {
+        const options = this.props.application.getOptions();
+        if (options.useHtmlSelect) {
+            return this.renderHTMLSelect();
+        }
+        return this.renderReactSelect();
     }
-    return this.renderReactSelect();
-  }
 }
 
 /**
@@ -517,72 +515,74 @@ class Message extends React.Component {
  * @type {{designer: *, message: *, from: *, to: *, model: *, connectDragSource: *}}
  */
 Message.propTypes = {
-  application: PropTypes.object.isRequired,
-  designer: PropTypes.object.isRequired,
-  message: PropTypes.object.isRequired,
-  active: PropTypes.bool.isRequired,
-  from: PropTypes.object.isRequired,
-  to: PropTypes.object.isRequired,
-  model: PropTypes.object.isRequired,
-  index: PropTypes.number.isRequired,
-  messages: PropTypes.object.isRequired,
-  connectDragSource: PropTypes.func.isRequired,
-  connectDropTarget: PropTypes.func.isRequired,
+    application: PropTypes.object.isRequired,
+    designer: PropTypes.object.isRequired,
+    message: PropTypes.object.isRequired,
+    active: PropTypes.bool.isRequired,
+    from: PropTypes.object.isRequired,
+    to: PropTypes.object.isRequired,
+    model: PropTypes.object.isRequired,
+    index: PropTypes.number.isRequired,
+    messages: PropTypes.object.isRequired,
+    connectDragSource: PropTypes.func.isRequired,
+    connectDropTarget: PropTypes.func.isRequired
 };
 
 /** DND. */
 const source = {
-  beginDrag(props) {
-    return {
-      id: props.id,
-      index: props.index,
-    };
-  },
+    beginDrag(props) {
+        return {
+            id: props.id,
+            index: props.index
+        };
+    }
 };
 
 /** DND. */
 const sourceCollect = function collection(connect, monitor) {
-  return {
-    connectDragSource: connect.dragSource(),
-    isDragging: monitor.isDragging(),
-  };
+    return {
+        connectDragSource: connect.dragSource(),
+        isDragging: monitor.isDragging()
+    };
 };
 
-
 /** DND. */
 const target = {
-  drop(props, monitor, component) {
-    Common.assertNotNull(props);
-    Common.assertNotNull(monitor);
-    const decorated = component.getDecoratedComponentInstance();
-    if (decorated) {
-      const messages = decorated.props.messages;
-      if (messages) {
-        const dragIndex = monitor.getItem().index;
-        const hoverIndex = messages.getHoverIndex();
-        messages.onDrop(dragIndex, hoverIndex);
-      }
+    drop(props, monitor, component) {
+        Common.assertNotNull(props);
+        Common.assertNotNull(monitor);
+        const decorated = component.getDecoratedComponentInstance();
+        if (decorated) {
+            const messages = decorated.props.messages;
+            if (messages) {
+                const dragIndex = monitor.getItem().index;
+                const hoverIndex = messages.getHoverIndex();
+                messages.onDrop(dragIndex, hoverIndex);
+            }
+        }
+    },
+    hover(props, monitor, component) {
+        Common.assertNotNull(props);
+        Common.assertNotNull(monitor);
+        if (component) {
+            const decorated = component.getDecoratedComponentInstance();
+            if (decorated) {
+                decorated.props.messages.setHoverIndex(decorated.props.index);
+            }
+        }
     }
-  },
-  hover(props, monitor, component) {
-    Common.assertNotNull(props);
-    Common.assertNotNull(monitor);
-    if (component) {
-      const decorated = component.getDecoratedComponentInstance();
-      if (decorated) {
-        decorated.props.messages.setHoverIndex(decorated.props.index);
-      }
-    }
-  },
 };
 
 /** DND. */
 function targetCollect(connect, monitor) {
-  return {
-    connectDropTarget: connect.dropTarget(),
-    isOver: monitor.isOver(),
-  };
+    return {
+        connectDropTarget: connect.dropTarget(),
+        isOver: monitor.isOver()
+    };
 }
-
+/* eslint-disable new-cap */
 const wrapper = DragSource('message', source, sourceCollect)(Message);
-export default DropTarget(['message', 'message-new'], target, targetCollect)(wrapper);
+export default DropTarget(['message', 'message-new'], target, targetCollect)(
+    wrapper
+);
+/* eslint-enable new-cap */
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/MessageNew.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/MessageNew.jsx
index c47cf28a64..78e892baf8 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/MessageNew.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/MessageNew.jsx
@@ -26,82 +26,84 @@ import iconHandle from '../../../../../../../../../../res/ecomp/asdc/sequencer/s
  * LHS lifeline row view.
  */
 class MessageNew extends React.Component {
+    /**
+     * Construct view.
+     * @param props element properties.
+     * @param context react context.
+     */
+    constructor(props, context) {
+        super(props, context);
+        this.onClickAdd = this.onClickAdd.bind(this);
+    }
 
-  /**
-   * Construct view.
-   * @param props element properties.
-   * @param context react context.
-   */
-  constructor(props, context) {
-    super(props, context);
-    this.onClickAdd = this.onClickAdd.bind(this);
-  }
+    /**
+     * Handle add.
+     */
+    onClickAdd() {
+        this.props.designer.addMessage();
+    }
 
-  /**
-   * Handle add.
-   */
-  onClickAdd() {
-    this.props.designer.addMessage();
-  }
-
-  /**
-   * Render view.
-   * @returns {*}
-   */
-  render() {
-    const { connectDragSource } = this.props;
-    return connectDragSource(
-      <div className="asdcs-designer-message asdcs-designer-message-new">
-        <table className="asdcs-designer-layout asdcs-designer-message-new">
-          <tbody>
-            <tr>
-              <td>
-                <div className="asdcs-designer-sort asdcs-designer-icon">
-                  <Icon glyph={iconHandle} />
-                </div>
-              </td>
-              <td>
-                <div className="asdcs-designer-label" onClick={this.onClickAdd}>
-                  Add Message
-                </div>
-              </td>
-              <td>
-                <div className="asdcs-designer-icon" onClick={this.onClickAdd}>
-                  <Icon glyph={iconPlus} />
-                </div>
-              </td>
-              <td>
-                &nbsp;
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    );
-  }
+    /**
+     * Render view.
+     * @returns {*}
+     */
+    render() {
+        const { connectDragSource } = this.props;
+        return connectDragSource(
+            <div className="asdcs-designer-message asdcs-designer-message-new">
+                <table className="asdcs-designer-layout asdcs-designer-message-new">
+                    <tbody>
+                        <tr>
+                            <td>
+                                <div className="asdcs-designer-sort asdcs-designer-icon">
+                                    <Icon glyph={iconHandle} />
+                                </div>
+                            </td>
+                            <td>
+                                <div
+                                    className="asdcs-designer-label"
+                                    onClick={this.onClickAdd}>
+                                    Add Message
+                                </div>
+                            </td>
+                            <td>
+                                <div
+                                    className="asdcs-designer-icon"
+                                    onClick={this.onClickAdd}>
+                                    <Icon glyph={iconPlus} />
+                                </div>
+                            </td>
+                            <td>&nbsp;</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        );
+    }
 }
 
 /** Element properties. */
 MessageNew.propTypes = {
-  designer: PropTypes.object.isRequired,
-  messages: PropTypes.object.isRequired,
-  connectDragSource: PropTypes.func.isRequired,
+    designer: PropTypes.object.isRequired,
+    messages: PropTypes.object.isRequired,
+    connectDragSource: PropTypes.func.isRequired
 };
 
 /** DND. */
 const source = {
-  beginDrag(props) {
-    return { id: props.id };
-  },
+    beginDrag(props) {
+        return { id: props.id };
+    }
 };
 
 /** DND. */
 const collect = function collection(connect, monitor) {
-  return {
-    connectDragSource: connect.dragSource(),
-    isDragging: monitor.isDragging(),
-  };
+    return {
+        connectDragSource: connect.dragSource(),
+        isDragging: monitor.isDragging()
+    };
 };
 
+/* eslint-disable new-cap */
 export default DragSource('message-new', source, collect)(MessageNew);
-
+/* eslint-enable new-cap */
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/Messages.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/Messages.jsx
index 417155498e..6d2b35e41d 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/Messages.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/Messages.jsx
@@ -28,116 +28,113 @@ import MessageNew from './MessageNew';
  * @constructor
  */
 export default class Messages extends React.Component {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Construct view.
+     * @param props element properties.
+     * @param context react context.
+     */
+    constructor(props, context) {
+        super(props, context);
+        this.state = {};
+        this.setHoverIndex = this.setHoverIndex.bind(this);
+        this.getHoverIndex = this.getHoverIndex.bind(this);
+    }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Construct view.
-   * @param props element properties.
-   * @param context react context.
-   */
-  constructor(props, context) {
-    super(props, context);
-    this.state = {
-    };
-    this.setHoverIndex = this.setHoverIndex.bind(this);
-    this.getHoverIndex = this.getHoverIndex.bind(this);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Record last hover index as non-state.
-   * @param index index.
-   */
-  setHoverIndex(index) {
-    this.hoverIndex = index;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get last recorded hover index.
-   * @returns {*}
-   */
-  getHoverIndex() {
-    return this.hoverIndex;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handle drop.
-   * @param dragIndex dragged item index; undefined if new.
-   * @param hoverIndex drop index.
-   */
-  onDrop(dragIndex, hoverIndex) {
-    if (hoverIndex >= 0) {
-      const application = this.props.application;
-      const model = application.getModel();
-      if (Common.isNumber(dragIndex)) {
-        if (dragIndex !== hoverIndex) {
-          model.reorderMessages(dragIndex, hoverIndex);
-        }
-      } else {
-        model.addMessage(hoverIndex);
-      }
-      this.forceUpdate();
-      application.renderDiagram();
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Record last hover index as non-state.
+     * @param index index.
+     */
+    setHoverIndex(index) {
+        this.hoverIndex = index;
     }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Render view.
-   * @returns {*}
-   */
-  render() {
-
-    const model = this.props.application.getModel();
-    const diagram = model.unwrap().diagram;
-
-    // Render existing messages.
-
-    const messages = [];
-    for (const step of diagram.steps) {
-      const message = step.message;
-      const from = model.getLifelineById(message.from);
-      const to = model.getLifelineById(message.to);
-      messages.push(<Message
-        key={`m${message.id}`}
-        application={this.props.application}
-        designer={this.props.designer}
-        message={message}
-        active={this.props.activeMessageId === message.id}
-        from={from}
-        to={to}
-        model={model}
-        index={messages.length}
-        messages={this}
-      />);
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get last recorded hover index.
+     * @returns {*}
+     */
+    getHoverIndex() {
+        return this.hoverIndex;
     }
 
-    // Render add.
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Handle drop.
+     * @param dragIndex dragged item index; undefined if new.
+     * @param hoverIndex drop index.
+     */
+    onDrop(dragIndex, hoverIndex) {
+        if (hoverIndex >= 0) {
+            const application = this.props.application;
+            const model = application.getModel();
+            if (Common.isNumber(dragIndex)) {
+                if (dragIndex !== hoverIndex) {
+                    model.reorderMessages(dragIndex, hoverIndex);
+                }
+            } else {
+                model.addMessage(hoverIndex);
+            }
+            this.forceUpdate();
+            application.renderDiagram();
+        }
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Render view.
+     * @returns {*}
+     */
+    render() {
+        const model = this.props.application.getModel();
+        const diagram = model.unwrap().diagram;
+
+        // Render existing messages.
+
+        const messages = [];
+        for (const step of diagram.steps) {
+            const message = step.message;
+            const from = model.getLifelineById(message.from);
+            const to = model.getLifelineById(message.to);
+            messages.push(
+                <Message
+                    key={`m${message.id}`}
+                    application={this.props.application}
+                    designer={this.props.designer}
+                    message={message}
+                    active={this.props.activeMessageId === message.id}
+                    from={from}
+                    to={to}
+                    model={model}
+                    index={messages.length}
+                    messages={this}
+                />
+            );
+        }
 
-    messages.push(<MessageNew
-      key="_m"
-      designer={this.props.designer}
-      messages={this}
-    />);
+        // Render add.
 
-    return (
-      <div className="asdcs-designer-steps">
-        {messages}
-      </div>
-    );
-  }
+        messages.push(
+            <MessageNew
+                key="_m"
+                designer={this.props.designer}
+                messages={this}
+            />
+        );
+
+        return <div className="asdcs-designer-steps">{messages}</div>;
+    }
 }
 
 /** Element properties. */
 Messages.propTypes = {
-  application: PropTypes.object.isRequired,
-  designer: PropTypes.object.isRequired,
-  activeMessageId: PropTypes.string,
+    application: PropTypes.object.isRequired,
+    designer: PropTypes.object.isRequired,
+    activeMessageId: PropTypes.string
 };
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/metadata/Metadata.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/metadata/Metadata.jsx
index cc1faddcba..419c728671 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/metadata/Metadata.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/metadata/Metadata.jsx
@@ -20,15 +20,11 @@ import PropTypes from 'prop-types';
  * Metadata view.
  */
 const Metadata = function Metadata(props) {
-  return (
-    <div className="asdcs-designer-metadata">
-      {props.metadata.name}
-    </div>
-  );
+    return <div className="asdcs-designer-metadata">{props.metadata.name}</div>;
 };
 
 Metadata.propTypes = {
-  metadata: PropTypes.object.isRequired,
+    metadata: PropTypes.object.isRequired
 };
 
 export default Metadata;
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/source/Source.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/source/Source.jsx
index 04ea5280ba..1ba7e9f324 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/source/Source.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/source/Source.jsx
@@ -20,67 +20,69 @@ import PropTypes from 'prop-types';
  * Editor view, aggregating the designer, the code editor, the toolbar.
  */
 export default class Source extends React.Component {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Construct view.
-   */
-  constructor(props, context) {
-    super(props, context);
-    this.demo = this.props.application.getOptions().demo;
-  }
+    /**
+     * Construct view.
+     */
+    constructor(props, context) {
+        super(props, context);
+        this.demo = this.props.application.getOptions().demo;
+    }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
-   * Set JSON mode.
-   * @param json JSON (stringified) code.
-   */
-  setJSON(json = '') {
-    if (this.textarea) {
-      this.textarea.value = json;
+    /**
+     * Set JSON mode.
+     * @param json JSON (stringified) code.
+     */
+    setJSON(json = '') {
+        if (this.textarea) {
+            this.textarea.value = json;
+        }
     }
-  }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
-   * Set YAML mode.
-   * @param yaml YAML code.
-   */
-  setYAML(yaml = '') {
-    if (this.textarea) {
-      this.textarea.value = yaml;
+    /**
+     * Set YAML mode.
+     * @param yaml YAML code.
+     */
+    setYAML(yaml = '') {
+        if (this.textarea) {
+            this.textarea.value = yaml;
+        }
     }
-  }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  componentDidMount() {
-    /*
+    componentDidMount() {
+        /*
     this.cm = CodeMirror.fromTextArea(this.textarea, {
       lineNumbers: true,
       readOnly: true,
     });
     */
-  }
+    }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
-   * Render to DOM.
-   */
-  render() {
-    return (
-      <div className="asdcs-editor-code">
-        <textarea ref={(r) => { this.textarea = r; }}></textarea>
-      </div>
-    );
-  }
+    /**
+     * Render to DOM.
+     */
+    render() {
+        return (
+            <div className="asdcs-editor-code">
+                <textarea
+                    ref={r => {
+                        this.textarea = r;
+                    }}
+                />
+            </div>
+        );
+    }
 }
 
 Source.propTypes = {
-  application: PropTypes.object.isRequired,
+    application: PropTypes.object.isRequired
 };
-
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/toolbar/Toolbar.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/toolbar/Toolbar.jsx
index 4ac9c3dfad..c32172571d 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/toolbar/Toolbar.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/toolbar/Toolbar.jsx
@@ -26,100 +26,120 @@ import iconOpen from '../../../../../../../../res/ecomp/asdc/sequencer/sprites/i
  * all you get are the buttons for toggling between JSON/YAML/Designer.
  */
 export default class Toolbar extends React.Component {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Construct view.
+     */
+    constructor(props, context) {
+        super(props, context);
+        this.application = Common.assertType(this.props.application, 'Object');
+        this.editor = Common.assertType(this.props.editor, 'Object');
+        this.mode = 'design';
+    }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Construct view.
-   */
-  constructor(props, context) {
-    super(props, context);
-    this.application = Common.assertType(this.props.application, 'Object');
-    this.editor = Common.assertType(this.props.editor, 'Object');
-    this.mode = 'design';
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
-   * Set editor mode, one of {design, json, yaml}.
-   * @param mode
-   */
-  setMode(mode = 'design') {
-    this.mode = mode;
-  }
+    /**
+     * Set editor mode, one of {design, json, yaml}.
+     * @param mode
+     */
+    setMode(mode = 'design') {
+        this.mode = mode;
+    }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Render into the DOM.
-   */
-  render() {
-
-    const demo = this.application.getOptions().demo;
-    const demoCss = demo ? '' : 'asdc-hide';
-
-    return (
-      <div className={`asdcs-editor-toolbar ${demoCss}`}>
-        <div className="asdcs-editor-toolbar-demo">
-          <button className="asdcs-button-new" data-title="New sequence">
-            <svg>
-              <use xlinkHref={iconPlus} className="asdcs-icon" />
-            </svg>
-          </button>
-          <button className="asdcs-button-open" data-title="Open sequence">
-            <svg>
-              <use xlinkHref={iconOpen} className="asdcs-icon" />
-            </svg>
-          </button>
-          <button className="asdcs-button-save" data-title="Save checkpoint">
-            <svg>
-              <use xlinkHref="#icon--save" className="asdcs-icon" />
-            </svg>
-          </button>
-          <button className="asdcs-button-validate" data-title="Validate">
-            <svg>
-              <use xlinkHref="#icon--validate" className="asdcs-icon" />
-            </svg>
-          </button>
-          <button className="asdcs-button-download" data-title="Download">
-            <svg>
-              <use xlinkHref="#icon--download" className="asdcs-icon" />
-            </svg>
-          </button>
-          <button className="asdcs-button-upload" data-title="Upload">
-            <svg>
-              <use xlinkHref="#icon--upload" className="asdcs-icon" />
-            </svg>
-          </button>
-        </div>
-        <div className="asdcs-editor-toolbar-toggle">
-          <button className="asdcs-button-design asdcs-button-mode asdcs-button-toggle-left">
-            Design
-          </button>
-          <button className="asdcs-button-json asdcs-button-mode asdcs-button-toggle-center">
-            JSON
-          </button>
-          <button className="asdcs-button-yaml asdcs-button-mode asdcs-button-toggle-right">
-            YAML
-          </button>
-        </div>
-      </div>
-    );
-  }
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Render into the DOM.
+     */
+    render() {
+        const demo = this.application.getOptions().demo;
+        const demoCss = demo ? '' : 'asdc-hide';
+
+        return (
+            <div className={`asdcs-editor-toolbar ${demoCss}`}>
+                <div className="asdcs-editor-toolbar-demo">
+                    <button
+                        className="asdcs-button-new"
+                        data-title="New sequence">
+                        <svg>
+                            <use xlinkHref={iconPlus} className="asdcs-icon" />
+                        </svg>
+                    </button>
+                    <button
+                        className="asdcs-button-open"
+                        data-title="Open sequence">
+                        <svg>
+                            <use xlinkHref={iconOpen} className="asdcs-icon" />
+                        </svg>
+                    </button>
+                    <button
+                        className="asdcs-button-save"
+                        data-title="Save checkpoint">
+                        <svg>
+                            <use
+                                xlinkHref="#icon--save"
+                                className="asdcs-icon"
+                            />
+                        </svg>
+                    </button>
+                    <button
+                        className="asdcs-button-validate"
+                        data-title="Validate">
+                        <svg>
+                            <use
+                                xlinkHref="#icon--validate"
+                                className="asdcs-icon"
+                            />
+                        </svg>
+                    </button>
+                    <button
+                        className="asdcs-button-download"
+                        data-title="Download">
+                        <svg>
+                            <use
+                                xlinkHref="#icon--download"
+                                className="asdcs-icon"
+                            />
+                        </svg>
+                    </button>
+                    <button className="asdcs-button-upload" data-title="Upload">
+                        <svg>
+                            <use
+                                xlinkHref="#icon--upload"
+                                className="asdcs-icon"
+                            />
+                        </svg>
+                    </button>
+                </div>
+                <div className="asdcs-editor-toolbar-toggle">
+                    <button className="asdcs-button-design asdcs-button-mode asdcs-button-toggle-left">
+                        Design
+                    </button>
+                    <button className="asdcs-button-json asdcs-button-mode asdcs-button-toggle-center">
+                        JSON
+                    </button>
+                    <button className="asdcs-button-yaml asdcs-button-mode asdcs-button-toggle-right">
+                        YAML
+                    </button>
+                </div>
+            </div>
+        );
+    }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
    * Initialize eventhandlers.
    * @private
    *
@@ -172,9 +192,9 @@ export default class Toolbar extends React.Component {
   }
   */
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
+    /**
    * Demo action.
    *
   _doDemoOpen() {
@@ -189,9 +209,9 @@ export default class Toolbar extends React.Component {
   }
   */
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
+    /**
    * Demo action.
    *
   _doDemoNew() {
@@ -204,9 +224,9 @@ export default class Toolbar extends React.Component {
   }
   */
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
+    /**
    * Demo action.
    *
   _doDemoSave() {
@@ -217,9 +237,9 @@ export default class Toolbar extends React.Component {
   }
   */
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
+    /**
    * Demo action.
    *
   _doDemoUpload() {
@@ -241,9 +261,9 @@ export default class Toolbar extends React.Component {
   }
   */
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
+    /**
    * Demo action.
    *
   _doDemoDownload() {
@@ -256,9 +276,9 @@ export default class Toolbar extends React.Component {
   }
   */
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
+    /**
    * Demo action.
    *
   _doDemoValidate() {
@@ -270,6 +290,6 @@ export default class Toolbar extends React.Component {
 }
 
 Toolbar.propTypes = {
-  application: PropTypes.object.isRequired,
-  editor: PropTypes.object.isRequired,
+    application: PropTypes.object.isRequired,
+    editor: PropTypes.object.isRequired
 };
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/export/Export.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/export/Export.jsx
index 529ae92ded..a6cb4abb49 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/export/Export.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/export/Export.jsx
@@ -17,15 +17,18 @@
 import React from 'react';
 
 const Export = function Export() {
-  return (
-    <form className="asdcs-export" action="/ossui-svg/services/ossui/svg/export" method="post">
-      <input name="svg" type="hidden" value="" />
-      <input name="css" type="hidden" value="sdc/sequencer/default" />
-      <input name="type" type="hidden" value="PDF" />
-      <input name="height" type="hidden" value="1920" />
-      <input name="width" type="hidden" value="1080" />
-    </form>
-  );
+    return (
+        <form
+            className="asdcs-export"
+            action="/ossui-svg/services/ossui/svg/export"
+            method="post">
+            <input name="svg" type="hidden" value="" />
+            <input name="css" type="hidden" value="sdc/sequencer/default" />
+            <input name="type" type="hidden" value="PDF" />
+            <input name="height" type="hidden" value="1920" />
+            <input name="width" type="hidden" value="1080" />
+        </form>
+    );
 };
 
 export default Export;
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/icons/Icon.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/icons/Icon.jsx
index 6ed2d451d9..51849676e4 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/icons/Icon.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/icons/Icon.jsx
@@ -24,18 +24,17 @@ import PropTypes from 'prop-types';
  * @constructor
  */
 const Icon = function Icon({ glyph, className }) {
-  return (
-    <svg viewBox="0 0 1000 1000" className={className} >
-      <use xlinkHref={glyph} className="asdcs-icon" />
-    </svg>
-  );
+    return (
+        <svg viewBox="0 0 1000 1000" className={className}>
+            <use xlinkHref={glyph} className="asdcs-icon" />
+        </svg>
+    );
 };
 
 /** Declare properties. */
 Icon.propTypes = {
-  className: PropTypes.string,
-  glyph: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    glyph: PropTypes.string.isRequired
 };
 
 export default Icon;
-
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/overlay/Overlay.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/overlay/Overlay.jsx
index 817f4f1697..7d03b468aa 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/overlay/Overlay.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/overlay/Overlay.jsx
@@ -20,42 +20,35 @@ import React from 'react';
  * Overlay view.
  */
 export default class Overlay extends React.Component {
+    /**
+     * Construct view.
+     * @param props element properties.
+     * @param context react context.
+     */
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            visible: false
+        };
+        this.setVisible = this.setVisible.bind(this);
+    }
 
-  /**
-   * Construct view.
-   * @param props element properties.
-   * @param context react context.
-   */
-  constructor(props, context) {
-    super(props, context);
-    this.state = {
-      visible: false,
-    };
-    this.setVisible = this.setVisible.bind(this);
-  }
+    /**
+     * Set visibility.
+     * @param visible true if visible.
+     */
+    setVisible(visible) {
+        this.setState({
+            visible
+        });
+    }
 
-  /**
-   * Set visibility.
-   * @param visible true if visible.
-   */
-  setVisible(visible) {
-    this.setState({
-      visible,
-    });
-  }
-
-  /**
-   * Render view.
-   * @returns {XML}
-   */
-  render() {
-    const display = this.state.visible ? 'block' : 'none';
-    return (
-      <div
-        className="asdcs-overlay"
-        style={{ display }}
-      >
-      </div>
-    );
-  }
+    /**
+     * Render view.
+     * @returns {XML}
+     */
+    render() {
+        const display = this.state.visible ? 'block' : 'none';
+        return <div className="asdcs-overlay" style={{ display }} />;
+    }
 }
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Metamodel.js b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Metamodel.js
index 82e8ada588..140b7ef547 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Metamodel.js
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Metamodel.js
@@ -22,73 +22,71 @@ import Common from '../common/Common';
  * Rules governing what a definition can contain.
  */
 export default class Metamodel {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Construct from JSON definition.
+     * @param json schema definition.
+     */
+    constructor(json) {
+        Common.assertType(json, 'Object');
+        const dfault = require('./templates/default.metamodel.json');
+        this.json = _merge({}, dfault, json);
+    }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Construct from JSON definition.
-   * @param json schema definition.
-   */
-  constructor(json) {
-    Common.assertType(json, 'Object');
-    const dfault = require('./templates/default.metamodel.json');
-    this.json = _merge({}, dfault, json);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get schema identifier.
-   * @returns ID.
-   */
-  getId() {
-    return this.json.diagram.metadata.id;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
-   * Get lifeline constraints.
-   * @returns {*}
-   */
-  getConstraints() {
-    return this.json.diagram.lifelines.constraints;
-  }
+    /**
+     * Get schema identifier.
+     * @returns ID.
+     */
+    getId() {
+        return this.json.diagram.metadata.id;
+    }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
-   * Get lifeline metadata by lifeline ID.
-   * @param id sought lifeline.
-   * @returns lifeline if found.
-   */
-  getLifelineById(id) {
-    for (const lifeline of this.json.diagram.lifelines.lifelines) {
-      if (lifeline.id === id) {
-        return lifeline;
-      }
+    /**
+     * Get lifeline constraints.
+     * @returns {*}
+     */
+    getConstraints() {
+        return this.json.diagram.lifelines.constraints;
     }
-    return undefined;
-  }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get lifeline metadata by lifeline ID.
+     * @param id sought lifeline.
+     * @returns lifeline if found.
+     */
+    getLifelineById(id) {
+        for (const lifeline of this.json.diagram.lifelines.lifelines) {
+            if (lifeline.id === id) {
+                return lifeline;
+            }
+        }
+        return undefined;
+    }
 
-  /**
-   * Get original JSON.
-   * @returns JSON.
-   */
-  unwrap() {
-    return this.json;
-  }
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    /**
+     * Get original JSON.
+     * @returns JSON.
+     */
+    unwrap() {
+        return this.json;
+    }
 
-  /**
-   * Get default schema.
-   * @returns Metamodel default (permissive) Metamodel.
-   */
-  static getDefault() {
-    return new Metamodel({});
-  }
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
+    /**
+     * Get default schema.
+     * @returns Metamodel default (permissive) Metamodel.
+     */
+    static getDefault() {
+        return new Metamodel({});
+    }
 }
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Metamodels.js b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Metamodels.js
index 4ecfc0b5f7..40756a8e09 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Metamodels.js
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Metamodels.js
@@ -21,67 +21,64 @@ import Metamodel from './Metamodel';
  * A simple lookup for schemas by ID.
  */
 export default class Metamodels {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    /**
+     * Construct metamodels from provided JSON definitions.
+     * @param metamodels JSON metamodel definitions.
+     */
+    constructor(metamodels) {
+        Common.assertType(metamodels, 'Array');
 
-  /**
-   * Construct metamodels from provided JSON definitions.
-   * @param metamodels JSON metamodel definitions.
-   */
-  constructor(metamodels) {
+        this.lookup = {};
 
-    Common.assertType(metamodels, 'Array');
+        // Save each metamodel. It's up to the Metamodel class to make sense of
+        // potentially nonsense metamodel definitions.
 
-    this.lookup = {};
+        for (const json of metamodels) {
+            const metamodel = new Metamodel(json);
+            this.lookup[metamodel.getId()] = metamodel;
+        }
 
-    // Save each metamodel. It's up to the Metamodel class to make sense of
-    // potentially nonsense metamodel definitions.
+        // Set (or override) the default metamodel with the inlined one.
 
-    for (const json of metamodels) {
-      const metamodel = new Metamodel(json);
-      this.lookup[metamodel.getId()] = metamodel;
+        this.lookup.$ = Metamodel.getDefault();
+        Common.assertInstanceOf(this.lookup.$, Metamodel);
     }
 
-    // Set (or override) the default metamodel with the inlined one.
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-    this.lookup.$ = Metamodel.getDefault();
-    Common.assertInstanceOf(this.lookup.$, Metamodel);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get Metamodel by its @id.
-   * @param id identifier.
-   * @returns Metamodel, or undefined if no matching metamodel found.
-   */
-  getMetamodel(id) {
-    return this.lookup[id];
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get the default (permissive) metamodel.
-   * @returns default Metamodel.
-   */
-  getDefault() {
-    return this.lookup.$;
-  }
+    /**
+     * Get Metamodel by its @id.
+     * @param id identifier.
+     * @returns Metamodel, or undefined if no matching metamodel found.
+     */
+    getMetamodel(id) {
+        return this.lookup[id];
+    }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-  /**
-   * Get metamodel by its @id, falling back to the default.
-   * @param id identifier.
-   * @returns matching metamodel, or default.
-   */
-  getMetamodelOrDefault(id) {
-    const metamodel = this.getMetamodel(id);
-    if (metamodel) {
-      return metamodel;
+    /**
+     * Get the default (permissive) metamodel.
+     * @returns default Metamodel.
+     */
+    getDefault() {
+        return this.lookup.$;
     }
-    return this.getDefault();
-  }
 
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get metamodel by its @id, falling back to the default.
+     * @param id identifier.
+     * @returns matching metamodel, or default.
+     */
+    getMetamodelOrDefault(id) {
+        const metamodel = this.getMetamodel(id);
+        if (metamodel) {
+            return metamodel;
+        }
+        return this.getDefault();
+    }
 }
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Model.js b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Model.js
index 1e68cd6034..3145506268 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Model.js
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Model.js
@@ -24,489 +24,481 @@ import Metamodel from './Metamodel';
  * A wrapper for a model instance.
  */
 export default class Model {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Construct model from model JSON. JSON is assumed to be in more or less
+     * the correct structure, but it's OK if it's missing IDs.
+     *
+     * @param json initial JSON; will be updated in situ.
+     * @param metamodel Metaobject definition.
+     */
+    constructor(json, metamodel) {
+        if (metamodel) {
+            Common.assertInstanceOf(metamodel, Metamodel);
+        }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+        this.metamodel = metamodel || Metamodel.getDefault();
+        Common.assertInstanceOf(this.metamodel, Metamodel);
 
-  /**
-   * Construct model from model JSON. JSON is assumed to be in more or less
-   * the correct structure, but it's OK if it's missing IDs.
-   *
-   * @param json initial JSON; will be updated in situ.
-   * @param metamodel Metaobject definition.
-   */
-  constructor(json, metamodel) {
+        this.jsonschema = require('./schema/asdc_sequencer_schema.json');
+        this.templates = {
+            defaultModel: require('./templates/default.model.json'),
+            defaultMetamodel: require('./templates/default.metamodel.json')
+        };
 
-    if (metamodel) {
-      Common.assertInstanceOf(metamodel, Metamodel);
-    }
+        this.model = this._preprocess(Common.assertType(json, 'Object'));
+        Common.assertPlainObject(this.model);
 
-    this.metamodel = metamodel || Metamodel.getDefault();
-    Common.assertInstanceOf(this.metamodel, Metamodel);
-
-    this.jsonschema = require('./schema/asdc_sequencer_schema.json');
-    this.templates = {
-      defaultModel: require('./templates/default.model.json'),
-      defaultMetamodel: require('./templates/default.metamodel.json'),
-    };
-
-    this.model = this._preprocess(Common.assertType(json, 'Object'));
-    Common.assertPlainObject(this.model);
-
-    this.renumber();
-
-    this.addLifeline = this.addLifeline.bind(this);
-    this.addMessage = this.addMessage.bind(this);
-    this.renumber = this.renumber.bind(this);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Unwrap to get model object.
-   * @returns {*}
-   */
-  unwrap() {
-    return Common.assertPlainObject(this.model);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get the metamodel which defines valid states for this model.
-   * @returns Metamodel definition.
-   */
-  getMetamodel() {
-    return Common.assertInstanceOf(this.metamodel, Metamodel);
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Find lifeline by its ID.
-   * @param id lifeline ID.
-   * @returns lifeline object, if found.
-   */
-  getLifelineById(id) {
-    for (const lifeline of this.model.diagram.lifelines) {
-      if (lifeline.id === id) {
-        return lifeline;
-      }
-    }
-    return undefined;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get message by ID.
-   * @param id message ID.
-   * @returns message if matched.
-   */
-  getMessageById(id) {
-    Common.assertNotNull(id);
-    const step = this.getStepByMessageId(id);
-    if (step) {
-      return step.message;
+        this.renumber();
+
+        this.addLifeline = this.addLifeline.bind(this);
+        this.addMessage = this.addMessage.bind(this);
+        this.renumber = this.renumber.bind(this);
     }
-    return undefined;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get step by message ID.
-   * @param id step ID.
-   * @returns step if matched.
-   */
-  getStepByMessageId(id) {
-    Common.assertNotNull(id);
-    for (const step of this.model.diagram.steps) {
-      if (step.message && step.message.id === id) {
-        return step;
-      }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Unwrap to get model object.
+     * @returns {*}
+     */
+    unwrap() {
+        return Common.assertPlainObject(this.model);
     }
-    return undefined;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Add message to steps.
-   * @returns {{}}
-   */
-  addMessage(index) {
-    const d = this.model.diagram;
-    const step = {};
-    step.message = {};
-    step.message.id = Model._guid();
-    step.message.name = '[Unnamed Message]';
-    step.message.type = 'request';
-    step.message.from = d.lifelines.length > 0 ? d.lifelines[0].id : -1;
-    step.message.to = d.lifelines.length > 1 ? d.lifelines[1].id : -1;
-    if (index >= 0) {
-      d.steps.splice(index, 0, step);
-    } else {
-      d.steps.push(step);
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get the metamodel which defines valid states for this model.
+     * @returns Metamodel definition.
+     */
+    getMetamodel() {
+        return Common.assertInstanceOf(this.metamodel, Metamodel);
     }
-    this.renumber();
-    return step;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Delete message with ID.
-   * @param id to be deleted.
-   */
-  deleteMessageById(id) {
-    Common.assertNotNull(id);
-    const step = this.getStepByMessageId(id);
-    if (step) {
-      const index = this.model.diagram.steps.indexOf(step);
-      if (index !== -1) {
-        this.model.diagram.steps.splice(index, 1);
-      }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Find lifeline by its ID.
+     * @param id lifeline ID.
+     * @returns lifeline object, if found.
+     */
+    getLifelineById(id) {
+        for (const lifeline of this.model.diagram.lifelines) {
+            if (lifeline.id === id) {
+                return lifeline;
+            }
+        }
+        return undefined;
     }
-    this.renumber();
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Add lifeline to lifelines.
-   * @param index optional index.
-   * @returns {{}}
-   */
-  addLifeline(index) {
-    const lifeline = {};
-    lifeline.id = Model._guid();
-    lifeline.name = '[Unnamed Lifeline]';
-    if (index >= 0) {
-      this.model.diagram.lifelines.splice(index, 0, lifeline);
-    } else {
-      this.model.diagram.lifelines.push(lifeline);
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get message by ID.
+     * @param id message ID.
+     * @returns message if matched.
+     */
+    getMessageById(id) {
+        Common.assertNotNull(id);
+        const step = this.getStepByMessageId(id);
+        if (step) {
+            return step.message;
+        }
+        return undefined;
     }
-    this.renumber();
-    return lifeline;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Delete lifeline with ID.
-   * @param id to be deleted.
-   */
-  deleteLifelineById(id) {
-    Common.assertNotNull(id);
-    this.deleteStepsByLifelineId(id);
-    const lifeline = this.getLifelineById(id);
-    if (lifeline) {
-      const index = this.model.diagram.lifelines.indexOf(lifeline);
-      if (index !== -1) {
-        this.model.diagram.lifelines.splice(index, 1);
-      }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get step by message ID.
+     * @param id step ID.
+     * @returns step if matched.
+     */
+    getStepByMessageId(id) {
+        Common.assertNotNull(id);
+        for (const step of this.model.diagram.steps) {
+            if (step.message && step.message.id === id) {
+                return step;
+            }
+        }
+        return undefined;
     }
-    this.renumber();
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Delete all steps corresponding to lifeline.
-   * @param id lifeline ID.
-   */
-  deleteStepsByLifelineId(id) {
-    Common.assertNotNull(id);
-    const steps = this.getStepsByLifelineId(id);
-    for (const step of steps) {
-      this.deleteMessageById(step.message.id);
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Add message to steps.
+     * @returns {{}}
+     */
+    addMessage(index) {
+        const d = this.model.diagram;
+        const step = {};
+        step.message = {};
+        step.message.id = Model._guid();
+        step.message.name = '[Unnamed Message]';
+        step.message.type = 'request';
+        step.message.from = d.lifelines.length > 0 ? d.lifelines[0].id : -1;
+        step.message.to = d.lifelines.length > 1 ? d.lifelines[1].id : -1;
+        if (index >= 0) {
+            d.steps.splice(index, 0, step);
+        } else {
+            d.steps.push(step);
+        }
+        this.renumber();
+        return step;
     }
-    this.renumber();
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get all steps corresponding to lifeline.
-   * @param id lifeline ID.
-   * @return steps from/to lifeline.
-   */
-  getStepsByLifelineId(id) {
-    Common.assertNotNull(id);
-    const steps = [];
-    for (const step of this.model.diagram.steps) {
-      if (step.message) {
-        if (step.message.from === id || step.message.to === id) {
-          steps.push(step);
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Delete message with ID.
+     * @param id to be deleted.
+     */
+    deleteMessageById(id) {
+        Common.assertNotNull(id);
+        const step = this.getStepByMessageId(id);
+        if (step) {
+            const index = this.model.diagram.steps.indexOf(step);
+            if (index !== -1) {
+                this.model.diagram.steps.splice(index, 1);
+            }
         }
-      }
+        this.renumber();
     }
-    return steps;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Validate model. Disabled, because we removed the jsonschema dependency.
-   * @returns {Array} of validation errors, if any.
-   */
-  validate() {
-    const errors = [];
-    return errors;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Reorder messages.
-   * @param index message index.
-   * @param afterIndex new (after) index.
-   */
-  reorderMessages(index, afterIndex) {
-    Common.assertType(index, 'Number');
-    Common.assertType(afterIndex, 'Number');
-    const steps = this.model.diagram.steps;
-    const element = steps[index];
-    steps.splice(index, 1);
-    steps.splice(afterIndex, 0, element);
-    this.renumber();
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Reorder lifelines.
-   * @param index lifeline index.
-   * @param afterIndex new (after) index.
-   */
-  reorderLifelines(index, afterIndex) {
-    Common.assertType(index, 'Number');
-    Common.assertType(afterIndex, 'Number');
-    const lifelines = this.model.diagram.lifelines;
-    const element = lifelines[index];
-    lifelines.splice(index, 1);
-    lifelines.splice(afterIndex, 0, element);
-    this.renumber();
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Renumber lifelines and messages.
-   */
-  renumber() {
-    const modelJSON = this.unwrap();
-    let stepIndex = 1;
-    let lifelineIndex = 1;
-    for (const step of modelJSON.diagram.steps) {
-      if (step.message) {
-        step.message.index = stepIndex++;
-      }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Add lifeline to lifelines.
+     * @param index optional index.
+     * @returns {{}}
+     */
+    addLifeline(index) {
+        const lifeline = {};
+        lifeline.id = Model._guid();
+        lifeline.name = '[Unnamed Lifeline]';
+        if (index >= 0) {
+            this.model.diagram.lifelines.splice(index, 0, lifeline);
+        } else {
+            this.model.diagram.lifelines.push(lifeline);
+        }
+        this.renumber();
+        return lifeline;
     }
-    for (const lifeline of modelJSON.diagram.lifelines) {
-      lifeline.index = lifelineIndex++;
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Delete lifeline with ID.
+     * @param id to be deleted.
+     */
+    deleteLifelineById(id) {
+        Common.assertNotNull(id);
+        this.deleteStepsByLifelineId(id);
+        const lifeline = this.getLifelineById(id);
+        if (lifeline) {
+            const index = this.model.diagram.lifelines.indexOf(lifeline);
+            if (index !== -1) {
+                this.model.diagram.lifelines.splice(index, 1);
+            }
+        }
+        this.renumber();
     }
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Build a simple, navigable dataset describing fragments.
-   * @returns {{}}, indexed by (stop) message ID, describing fragments.
-   */
-  analyzeFragments() {
-
-    const fData = {};
-
-    let depth = 0;
-    const modelJSON = this.unwrap();
-    const open = [];
-
-    const getData = function g(stop, fragment) {
-      let data = fData[stop];
-      if (!data) {
-        data = { stop, start: [], fragment };
-        fData[stop] = data;
-      }
-      return data;
-    };
-
-    const fragmentsByStart = {};
-    for (const step of modelJSON.diagram.steps) {
-      if (step.message && step.message.fragment) {
-        const message = step.message;
-        const fragment = message.fragment;
-        if (fragment.start) {
-          fragmentsByStart[fragment.start] = fragment;
-          open.push(message.id);
-          depth++;
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Delete all steps corresponding to lifeline.
+     * @param id lifeline ID.
+     */
+    deleteStepsByLifelineId(id) {
+        Common.assertNotNull(id);
+        const steps = this.getStepsByLifelineId(id);
+        for (const step of steps) {
+            this.deleteMessageById(step.message.id);
         }
-        if (fragment.stop) {
-          if (open.length > 0) {
-            getData(message.id).start.push(open.pop());
-          }
-          depth = Math.max(depth - 1, 0);
+        this.renumber();
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get all steps corresponding to lifeline.
+     * @param id lifeline ID.
+     * @return steps from/to lifeline.
+     */
+    getStepsByLifelineId(id) {
+        Common.assertNotNull(id);
+        const steps = [];
+        for (const step of this.model.diagram.steps) {
+            if (step.message) {
+                if (step.message.from === id || step.message.to === id) {
+                    steps.push(step);
+                }
+            }
         }
-      }
+        return steps;
     }
 
-    if (open.length > 0) {
-      for (const o of open) {
-        getData(o, fragmentsByStart[o]).start.push(o);
-      }
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Validate model. Disabled, because we removed the jsonschema dependency.
+     * @returns {Array} of validation errors, if any.
+     */
+    validate() {
+        const errors = [];
+        return errors;
     }
 
-    return fData;
-  }
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Reorder messages.
+     * @param index message index.
+     * @param afterIndex new (after) index.
+     */
+    reorderMessages(index, afterIndex) {
+        Common.assertType(index, 'Number');
+        Common.assertType(afterIndex, 'Number');
+        const steps = this.model.diagram.steps;
+        const element = steps[index];
+        steps.splice(index, 1);
+        steps.splice(afterIndex, 0, element);
+        this.renumber();
+    }
 
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Reorder lifelines.
+     * @param index lifeline index.
+     * @param afterIndex new (after) index.
+     */
+    reorderLifelines(index, afterIndex) {
+        Common.assertType(index, 'Number');
+        Common.assertType(afterIndex, 'Number');
+        const lifelines = this.model.diagram.lifelines;
+        const element = lifelines[index];
+        lifelines.splice(index, 1);
+        lifelines.splice(afterIndex, 0, element);
+        this.renumber();
+    }
 
-  /**
-   * Build a simple, navigable dataset describing occurrences.
-   * @returns a map, indexed by lifeline ID, of objects containing {start:[],stop:[],active[]}.
-   * @private
-   */
-  analyzeOccurrences() {
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Renumber lifelines and messages.
+     */
+    renumber() {
+        const modelJSON = this.unwrap();
+        let stepIndex = 1;
+        let lifelineIndex = 1;
+        for (const step of modelJSON.diagram.steps) {
+            if (step.message) {
+                step.message.index = stepIndex++;
+            }
+        }
+        for (const lifeline of modelJSON.diagram.lifelines) {
+            lifeline.index = lifelineIndex++;
+        }
+    }
 
-    const oData = {};
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-    // A few inline functions. They make this method kinda lengthy, but they
-    // reduce clutter in the class and keep it coherent, so it's OK.
+    /**
+     * Build a simple, navigable dataset describing fragments.
+     * @returns {{}}, indexed by (stop) message ID, describing fragments.
+     */
+    analyzeFragments() {
+        const fData = {};
 
-    const getDataByLifelineId = function get(lifelineId) {
-      if (!oData[lifelineId]) {
-        oData[lifelineId] = { active: [], start: {}, stop: {} };
-      }
-      return oData[lifelineId];
-    };
+        let depth = 0;
+        const modelJSON = this.unwrap();
+        const open = [];
 
-    const contains = function contains(array, value) {
-      return (array && (array.indexOf(value) !== -1));
-    };
+        const getData = function g(stop, fragment) {
+            let data = fData[stop];
+            if (!data) {
+                data = { stop, start: [], fragment };
+                fData[stop] = data;
+            }
+            return data;
+        };
+
+        const fragmentsByStart = {};
+        for (const step of modelJSON.diagram.steps) {
+            if (step.message && step.message.fragment) {
+                const message = step.message;
+                const fragment = message.fragment;
+                if (fragment.start) {
+                    fragmentsByStart[fragment.start] = fragment;
+                    open.push(message.id);
+                    depth++;
+                }
+                if (fragment.stop) {
+                    if (open.length > 0) {
+                        getData(message.id).start.push(open.pop());
+                    }
+                    depth = Math.max(depth - 1, 0);
+                }
+            }
+        }
 
-    const process = function process(message, lifelineId) {
-      const oRule = message.occurrences;
-      if (oRule) {
+        if (open.length > 0) {
+            for (const o of open) {
+                getData(o, fragmentsByStart[o]).start.push(o);
+            }
+        }
 
-        const oDataLifeline = getDataByLifelineId(lifelineId);
-        if (oDataLifeline) {
+        return fData;
+    }
 
-          // Record all starts.
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
 
-          if (contains(oRule.start, lifelineId)) {
-            oDataLifeline.active.push(message.id);
-            oDataLifeline.start[message.id] = undefined;
-          }
+    /**
+     * Build a simple, navigable dataset describing occurrences.
+     * @returns a map, indexed by lifeline ID, of objects containing {start:[],stop:[],active[]}.
+     * @private
+     */
+    analyzeOccurrences() {
+        const oData = {};
 
-          // Reconcile with stops.
+        // A few inline functions. They make this method kinda lengthy, but they
+        // reduce clutter in the class and keep it coherent, so it's OK.
 
-          if (contains(oRule.stop, lifelineId)) {
-            const startMessageId = oDataLifeline.active.pop();
-            oDataLifeline.stop[message.id] = startMessageId;
-            if (startMessageId) {
-              oDataLifeline.start[startMessageId] = message.id;
+        const getDataByLifelineId = function get(lifelineId) {
+            if (!oData[lifelineId]) {
+                oData[lifelineId] = { active: [], start: {}, stop: {} };
+            }
+            return oData[lifelineId];
+        };
+
+        const contains = function contains(array, value) {
+            return array && array.indexOf(value) !== -1;
+        };
+
+        const process = function process(message, lifelineId) {
+            const oRule = message.occurrences;
+            if (oRule) {
+                const oDataLifeline = getDataByLifelineId(lifelineId);
+                if (oDataLifeline) {
+                    // Record all starts.
+
+                    if (contains(oRule.start, lifelineId)) {
+                        oDataLifeline.active.push(message.id);
+                        oDataLifeline.start[message.id] = undefined;
+                    }
+
+                    // Reconcile with stops.
+
+                    if (contains(oRule.stop, lifelineId)) {
+                        const startMessageId = oDataLifeline.active.pop();
+                        oDataLifeline.stop[message.id] = startMessageId;
+                        if (startMessageId) {
+                            oDataLifeline.start[startMessageId] = message.id;
+                        }
+                    }
+                }
+            }
+        };
+
+        // Analyze start and end.
+
+        const modelJSON = this.unwrap();
+        for (const step of modelJSON.diagram.steps) {
+            if (step.message) {
+                const message = step.message;
+                if (message.occurrences) {
+                    process(message, message.from);
+                    process(message, message.to);
+                }
             }
-          }
         }
-      }
-    };
-
-    // Analyze start and end.
-
-    const modelJSON = this.unwrap();
-    for (const step of modelJSON.diagram.steps) {
-      if (step.message) {
-        const message = step.message;
-        if (message.occurrences) {
-          process(message, message.from);
-          process(message, message.to);
+
+        // Reset active. (We used it, but it's not actually for us; it's for keeping
+        // track of active occurrences when rendering the diagram.)
+
+        for (const lifelineId of Object.keys(oData)) {
+            oData[lifelineId].active = [];
         }
-      }
-    }
 
-    // Reset active. (We used it, but it's not actually for us; it's for keeping
-    // track of active occurrences when rendering the diagram.)
+        // Reconcile the start and end (message ID) maps for each lifeline,
+        // finding a "stop" for every start. Default to starting and stopping
+        // on the same message, which is the same as no occurrence.
+
+        for (const lifelineId of Object.keys(oData)) {
+            const lifelineData = oData[lifelineId];
+            for (const startId of Object.keys(lifelineData.start)) {
+                const stopId = lifelineData.start[startId];
+                if (!stopId) {
+                    lifelineData.start[startId] = startId;
+                    lifelineData.stop[startId] = startId;
+                }
+            }
+        }
 
-    for (const lifelineId of Object.keys(oData)) {
-      oData[lifelineId].active = [];
+        return oData;
     }
 
-    // Reconcile the start and end (message ID) maps for each lifeline,
-    // finding a "stop" for every start. Default to starting and stopping
-    // on the same message, which is the same as no occurrence.
-
-    for (const lifelineId of Object.keys(oData)) {
-      const lifelineData = oData[lifelineId];
-      for (const startId of Object.keys(lifelineData.start)) {
-        const stopId = lifelineData.start[startId];
-        if (!stopId) {
-          lifelineData.start[startId] = startId;
-          lifelineData.stop[startId] = startId;
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Preprocess model, adding IDs and whatnot.
+     * @param original to be preprocessed.
+     * @returns preprocessed JSON.
+     * @private
+     */
+    _preprocess(original) {
+        const json = _merge({}, this.templates.defaultModel, original);
+        const metamodel = this.metamodel.unwrap();
+        if (!json.diagram.metadata.ref) {
+            if (metamodel.diagram.metadata.id) {
+                json.diagram.metadata.ref = metamodel.diagram.metadata.id;
+            } else {
+                json.diagram.metadata.ref = '$';
+            }
         }
-      }
-    }
 
-    return oData;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Preprocess model, adding IDs and whatnot.
-   * @param original to be preprocessed.
-   * @returns preprocessed JSON.
-   * @private
-   */
-  _preprocess(original) {
-
-    const json = _merge({}, this.templates.defaultModel, original);
-    const metamodel = this.metamodel.unwrap();
-    if (!json.diagram.metadata.ref) {
-      if (metamodel.diagram.metadata.id) {
-        json.diagram.metadata.ref = metamodel.diagram.metadata.id;
-      } else {
-        json.diagram.metadata.ref = '$';
-      }
-    }
+        for (const lifeline of json.diagram.lifelines) {
+            lifeline.id = lifeline.id || lifeline.name;
+        }
 
-    for (const lifeline of json.diagram.lifelines) {
-      lifeline.id = lifeline.id || lifeline.name;
-    }
+        for (const step of json.diagram.steps) {
+            if (step.message) {
+                step.message.id = step.message.id || Model._guid();
+                const occurrences = step.message.occurrences;
+                if (occurrences) {
+                    occurrences.start = occurrences.start || [];
+                    occurrences.stop = occurrences.stop || [];
+                }
+            }
+        }
 
-    for (const step of json.diagram.steps) {
-      if (step.message) {
-        step.message.id = step.message.id || Model._guid();
-        const occurrences = step.message.occurrences;
-        if (occurrences) {
-          occurrences.start = occurrences.start || [];
-          occurrences.stop = occurrences.stop || [];
+        if (!json.diagram.metadata.id || json.diagram.metadata.id === '$') {
+            json.diagram.metadata.id = Model._guid();
         }
-      }
-    }
 
-    if (!json.diagram.metadata.id || json.diagram.metadata.id === '$') {
-      json.diagram.metadata.id = Model._guid();
+        return json;
     }
 
-    return json;
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Create pseudo-UUID.
-   * @returns {string}
-   * @private
-   */
-  static _guid() {
-    function s4() {
-      return Math.floor((1 + Math.random()) * 0x10000)
-        .toString(16)
-        .substring(1);
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Create pseudo-UUID.
+     * @returns {string}
+     * @private
+     */
+    static _guid() {
+        function s4() {
+            return Math.floor((1 + Math.random()) * 0x10000)
+                .toString(16)
+                .substring(1);
+        }
+        return `${s4()}-${s4()}-${s4()}-${s4()}-${s4()}-${s4()}-${s4()}-${s4()}`;
     }
-    return `${s4()}-${s4()}-${s4()}-${s4()}-${s4()}-${s4()}-${s4()}-${s4()}`;
-  }
-
 }
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/demo/scenarios/Scenarios.js b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/demo/scenarios/Scenarios.js
index 4130ec7ec3..74707d472c 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/demo/scenarios/Scenarios.js
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/demo/scenarios/Scenarios.js
@@ -18,93 +18,96 @@
  * Example scenarios, for development, testing and demos.
  */
 export default class Scenarios {
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Construct scenarios; read model and metamodel templates.
-   */
-  constructor() {
-    this.templates = {
-      model: {
-        ecomp: require('./model/ECOMP.json'),
-        blank: require('./model/BLANK.json'),
-        dimensions: require('./model/DIMENSIONS.json'),
-      },
-      metamodel: {
-        ecomp: require('./metamodel/ECOMP.json'),
-        blank: require('./metamodel/BLANK.json'),
-      },
-    };
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get ECOMP scenario.
-   * @return ECOMP scenario JSON.
-   */
-  getECOMP() {
-    return JSON.parse(JSON.stringify(this.templates.model.ecomp));
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get ECOMP scenario metamodel.
-   * @return scenario metamodel JSON.
-   */
-  getECOMPMetamodel() {
-    return JSON.parse(JSON.stringify(this.templates.metamodel.ecomp));
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get blank scenario.
-   * @return blank scenario JSON.
-   */
-  getBlank() {
-    return JSON.parse(JSON.stringify(this.templates.model.blank));
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get empty scenario metamodel.
-   * @return empty metamodel JSON.
-   */
-  getBlankMetamodel() {
-    return JSON.parse(JSON.stringify(this.templates.metamodel.blank));
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get scenario.
-   * @return scenario JSON.
-   */
-  getDimensions() {
-    return JSON.parse(JSON.stringify(this.templates.model.dimensions));
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get scenario metamodel.
-   * @return metamodel JSON.
-   */
-  getDimensionsMetamodel() {
-    return JSON.parse(JSON.stringify(this.templates.metamodel.blank));
-  }
-
-  // ///////////////////////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Get demo metamodels.
-   * @returns {*[]}
-   */
-  getMetamodels() {
-    return [this.getBlankMetamodel(), this.getDimensionsMetamodel(), this.getECOMPMetamodel()];
-  }
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Construct scenarios; read model and metamodel templates.
+     */
+    constructor() {
+        this.templates = {
+            model: {
+                ecomp: require('./model/ECOMP.json'),
+                blank: require('./model/BLANK.json'),
+                dimensions: require('./model/DIMENSIONS.json')
+            },
+            metamodel: {
+                ecomp: require('./metamodel/ECOMP.json'),
+                blank: require('./metamodel/BLANK.json')
+            }
+        };
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get ECOMP scenario.
+     * @return ECOMP scenario JSON.
+     */
+    getECOMP() {
+        return JSON.parse(JSON.stringify(this.templates.model.ecomp));
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get ECOMP scenario metamodel.
+     * @return scenario metamodel JSON.
+     */
+    getECOMPMetamodel() {
+        return JSON.parse(JSON.stringify(this.templates.metamodel.ecomp));
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get blank scenario.
+     * @return blank scenario JSON.
+     */
+    getBlank() {
+        return JSON.parse(JSON.stringify(this.templates.model.blank));
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get empty scenario metamodel.
+     * @return empty metamodel JSON.
+     */
+    getBlankMetamodel() {
+        return JSON.parse(JSON.stringify(this.templates.metamodel.blank));
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get scenario.
+     * @return scenario JSON.
+     */
+    getDimensions() {
+        return JSON.parse(JSON.stringify(this.templates.model.dimensions));
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get scenario metamodel.
+     * @return metamodel JSON.
+     */
+    getDimensionsMetamodel() {
+        return JSON.parse(JSON.stringify(this.templates.metamodel.blank));
+    }
+
+    // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Get demo metamodels.
+     * @returns {*[]}
+     */
+    getMetamodels() {
+        return [
+            this.getBlankMetamodel(),
+            this.getDimensionsMetamodel(),
+            this.getECOMPMetamodel()
+        ];
+    }
 }
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/main.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/main.jsx
index 4b0f7d2388..1c783cb890 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/main.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/main.jsx
@@ -21,15 +21,15 @@ import '../res/ecomp/asdc/sequencer/sequencer-development.scss';
 import '../res/thirdparty/react-select/react-select.min.css';
 
 function renderApplication() {
-  const shell = document.createElement('div');
-  shell.setAttribute('style', 'height:100%;width:100%;margin:0;padding:0');
-  document.body.appendChild(shell);
-  const options = { demo: true };
-  render(<Sequencer options={options} />, shell);
+    const shell = document.createElement('div');
+    shell.setAttribute('style', 'height:100%;width:100%;margin:0;padding:0');
+    document.body.appendChild(shell);
+    const options = { demo: true };
+    render(<Sequencer options={options} />, shell);
 }
 
 if (window.addEventListener) {
-  window.addEventListener('DOMContentLoaded', renderApplication);
+    window.addEventListener('DOMContentLoaded', renderApplication);
 } else {
-  window.attachEvent('onload', renderApplication);
+    window.attachEvent('onload', renderApplication);
 }