diff --git a/lib-demo-gallery/jest.config.js b/lib-demo-gallery/jest.config.js
index 1fa6de4..4ab794a 100644
--- a/lib-demo-gallery/jest.config.js
+++ b/lib-demo-gallery/jest.config.js
@@ -2,17 +2,12 @@ const path = require("path");
 module.exports = {
 	"preset": "jest-puppeteer",
 	transform: {
-		'^.+\\.tsx?$': 'ts-jest',
-		'^.+\\.jsx?$': 'babel-jest'
-	},
-	moduleNameMapper: {
-		"\\.(scss|css|png)$": path.join(__dirname, "tests-e2e", "helpers", "css-mock.js"),
+		'^.+\\.tsx?$': 'ts-jest'
 	},
 	roots:[
-		path.join(__dirname, 'tests-e2e'),
-		path.join(__dirname, 'tests-snapshots')
+		path.join(__dirname, 'tests-e2e')
 	],
 	testMatch: [
-		"**/*\.test\.ts"
+		"**/*\.test\.{ts,tsx}"
 	]
 };
diff --git a/lib-demo-gallery/tests-snapshots/__snapshots__/storybook.test.tsx.snap b/lib-demo-gallery/tests-snapshots/__snapshots__/storybook.test.tsx.snap
deleted file mode 100644
index c5c1408..0000000
--- a/lib-demo-gallery/tests-snapshots/__snapshots__/storybook.test.tsx.snap
+++ /dev/null
@@ -1,17738 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots 3rd party libraries Auto Distribute (Dagre) 1`] = `
-<div
-  className="srd-demo-workspace"
->
-  <div
-    className="srd-demo-workspace__toolbar"
-  >
-    <button
-      onClick={[Function]}
-    >
-      Re-distribute
-    </button>
-  </div>
-  <div
-    className="srd-demo-workspace__content"
-  >
-    <div
-      className="srd-diagram srd-demo-canvas "
-      onMouseDown={[Function]}
-      onWheel={[Function]}
-    >
-      <svg
-        className="srd-link-layer "
-        style={
-          Object {
-            "transform": "translate(0px,0px) scale(1)",
-          }
-        }
-      />
-      <div
-        className="srd-node-layer "
-        style={
-          Object {
-            "transform": "translate(0px,0px) scale(1)",
-          }
-        }
-      >
-        <div
-          className="node srd-node "
-          data-nodeid="6"
-          style={
-            Object {
-              "left": 22.5,
-              "top": 0,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                from-1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="from-1-out-1"
-                    data-nodeid="6"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                </div>
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="from-1-out-4"
-                    data-nodeid="6"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="7"
-          style={
-            Object {
-              "left": 55,
-              "top": 220,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                from-2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="from-2-out-2"
-                    data-nodeid="7"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                </div>
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="from-2-out-6"
-                    data-nodeid="7"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    IN
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="to-1-to-5"
-                    data-nodeid="7"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="8"
-          style={
-            Object {
-              "left": 165,
-              "top": 220,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                from-3
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="from-3-out-3"
-                    data-nodeid="8"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="9"
-          style={
-            Object {
-              "left": 55,
-              "top": 110,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                to-1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="to-1-out-5"
-                    data-nodeid="9"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    IN
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="from-1-to-1"
-                    data-nodeid="9"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="10"
-          style={
-            Object {
-              "left": 0,
-              "top": 330,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                to-2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    IN
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="from-2-to-2"
-                    data-nodeid="10"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    IN
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="from-1-to-4"
-                    data-nodeid="10"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="11"
-          style={
-            Object {
-              "left": 155,
-              "top": 330,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                to-3
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    IN
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="from-3-to-3"
-                    data-nodeid="11"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    IN
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="from-2-to-6"
-                    data-nodeid="11"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Advanced Techniques Clone Selected 1`] = `
-<div
-  className="srd-demo-workspace"
->
-  <div
-    className="srd-demo-workspace__toolbar"
-  >
-    <button
-      onClick={[Function]}
-    >
-      Clone Selected
-    </button>
-  </div>
-  <div
-    className="srd-demo-workspace__content"
-  >
-    <div
-      className="srd-diagram srd-demo-canvas "
-      onMouseDown={[Function]}
-      onWheel={[Function]}
-    >
-      <svg
-        className="srd-link-layer "
-        style={
-          Object {
-            "transform": "translate(0px,0px) scale(1)",
-          }
-        }
-      />
-      <div
-        className="srd-node-layer "
-        style={
-          Object {
-            "transform": "translate(0px,0px) scale(1)",
-          }
-        }
-      >
-        <div
-          className="node srd-node "
-          data-nodeid="6"
-          style={
-            Object {
-              "left": 100,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="7"
-                    data-nodeid="6"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="9"
-          style={
-            Object {
-              "left": 400,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="10"
-                    data-nodeid="9"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Advanced Techniques Drag and drop 1`] = `
-<div
-  className="body"
->
-  <div
-    className="header"
-  >
-    <div
-      className="title"
-    >
-      Storm React Diagrams - Demo 5
-    </div>
-  </div>
-  <div
-    className="content"
-  >
-    <div
-      className="tray"
-    >
-      <div
-        className="tray-item"
-        draggable={true}
-        onDragStart={[Function]}
-        style={
-          Object {
-            "borderColor": "rgb(192,255,0)",
-          }
-        }
-      >
-        In Node
-      </div>
-      <div
-        className="tray-item"
-        draggable={true}
-        onDragStart={[Function]}
-        style={
-          Object {
-            "borderColor": "rgb(0,192,255)",
-          }
-        }
-      >
-        Out Node
-      </div>
-    </div>
-    <div
-      className="diagram-layer"
-      onDragOver={[Function]}
-      onDrop={[Function]}
-    >
-      <div
-        className="srd-diagram srd-demo-canvas "
-        onMouseDown={[Function]}
-        onWheel={[Function]}
-      >
-        <svg
-          className="srd-link-layer "
-          style={
-            Object {
-              "transform": "translate(0px,0px) scale(1)",
-            }
-          }
-        />
-        <div
-          className="srd-node-layer "
-          style={
-            Object {
-              "transform": "translate(0px,0px) scale(1)",
-            }
-          }
-        >
-          <div
-            className="node srd-node "
-            data-nodeid="6"
-            style={
-              Object {
-                "left": 100,
-                "top": 100,
-              }
-            }
-          >
-            <div
-              className="srd-default-node "
-              style={
-                Object {
-                  "background": "rgb(0,192,255)",
-                }
-              }
-            >
-              <div
-                className="srd-default-node__title "
-              >
-                <div
-                  className="srd-default-node__name "
-                >
-                  Node 1
-                </div>
-              </div>
-              <div
-                className="srd-default-node__ports "
-              >
-                <div
-                  className="srd-default-node__in "
-                />
-                <div
-                  className="srd-default-node__out "
-                >
-                  <div
-                    className="srd-default-port srd-default-port--out "
-                  >
-                    <div
-                      className="name"
-                    >
-                      Out
-                    </div>
-                    <div
-                      className="port srd-port "
-                      data-name="7"
-                      data-nodeid="6"
-                      onMouseEnter={[Function]}
-                      onMouseLeave={[Function]}
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            className="node srd-node "
-            data-nodeid="9"
-            style={
-              Object {
-                "left": 400,
-                "top": 100,
-              }
-            }
-          >
-            <div
-              className="srd-default-node "
-              style={
-                Object {
-                  "background": "rgb(192,255,0)",
-                }
-              }
-            >
-              <div
-                className="srd-default-node__title "
-              >
-                <div
-                  className="srd-default-node__name "
-                >
-                  Node 2
-                </div>
-              </div>
-              <div
-                className="srd-default-node__ports "
-              >
-                <div
-                  className="srd-default-node__in "
-                >
-                  <div
-                    className="srd-default-port srd-default-port--in "
-                  >
-                    <div
-                      className="port srd-port "
-                      data-name="10"
-                      data-nodeid="9"
-                      onMouseEnter={[Function]}
-                      onMouseLeave={[Function]}
-                    />
-                    <div
-                      className="name"
-                    >
-                      In
-                    </div>
-                  </div>
-                </div>
-                <div
-                  className="srd-default-node__out "
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Advanced Techniques Programatically modifying graph 1`] = `
-<div
-  className="srd-demo-workspace"
->
-  <div
-    className="srd-demo-workspace__toolbar"
-  >
-    <button
-      onClick={[Function]}
-    >
-      Update position
-    </button>
-    <button
-      onClick={[Function]}
-    >
-      Update position via serialize
-    </button>
-  </div>
-  <div
-    className="srd-demo-workspace__content"
-  >
-    <div
-      className="srd-diagram srd-demo-canvas "
-      onMouseDown={[Function]}
-      onWheel={[Function]}
-    >
-      <svg
-        className="srd-link-layer "
-        style={
-          Object {
-            "transform": "translate(0px,0px) scale(1)",
-          }
-        }
-      />
-      <div
-        className="srd-node-layer "
-        style={
-          Object {
-            "transform": "translate(0px,0px) scale(1)",
-          }
-        }
-      >
-        <div
-          className="node srd-node "
-          data-nodeid="6"
-          style={
-            Object {
-              "left": 100,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="7"
-                    data-nodeid="6"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="9"
-          style={
-            Object {
-              "left": 400,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="10"
-                    data-nodeid="9"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Advanced Techniques Serializing and de-serializing 1`] = `
-<div
-  className="srd-demo-workspace"
->
-  <div
-    className="srd-demo-workspace__toolbar"
-  >
-    <button
-      onClick={[Function]}
-    >
-      Serialize Graph
-    </button>
-  </div>
-  <div
-    className="srd-demo-workspace__content"
-  >
-    <div
-      className="srd-diagram srd-demo-canvas "
-      onMouseDown={[Function]}
-      onWheel={[Function]}
-    >
-      <svg
-        className="srd-link-layer "
-        style={
-          Object {
-            "transform": "translate(0px,0px) scale(1)",
-          }
-        }
-      />
-      <div
-        className="srd-node-layer "
-        style={
-          Object {
-            "transform": "translate(0px,0px) scale(1)",
-          }
-        }
-      >
-        <div
-          className="node srd-node "
-          data-nodeid="6"
-          style={
-            Object {
-              "left": 100,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="7"
-                    data-nodeid="6"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="9"
-          style={
-            Object {
-              "left": 400,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="10"
-                    data-nodeid="9"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Advanced Techniques Smart routing 1`] = `
-<div
-  className="srd-demo-workspace"
->
-  <div
-    className="srd-demo-workspace__toolbar"
-  >
-    <button
-      onClick={[Function]}
-    >
-      Serialize Graph
-    </button>
-  </div>
-  <div
-    className="srd-demo-workspace__content"
-  >
-    <div
-      className="srd-diagram srd-demo-canvas "
-      onMouseDown={[Function]}
-      onWheel={[Function]}
-    >
-      <svg
-        className="srd-link-layer "
-        style={
-          Object {
-            "transform": "translate(0px,0px) scale(1)",
-          }
-        }
-      />
-      <div
-        className="srd-node-layer "
-        style={
-          Object {
-            "transform": "translate(0px,0px) scale(1)",
-          }
-        }
-      >
-        <div
-          className="node srd-node "
-          data-nodeid="6"
-          style={
-            Object {
-              "left": 340,
-              "top": 350,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node A
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="out-1"
-                    data-nodeid="6"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="8"
-          style={
-            Object {
-              "left": 240,
-              "top": 80,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(255,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node B
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="out-1"
-                    data-nodeid="8"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="10"
-          style={
-            Object {
-              "left": 540,
-              "top": 180,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node C
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="in-1"
-                    data-nodeid="10"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="12"
-          style={
-            Object {
-              "left": 95,
-              "top": 185,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,0,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node D
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="in-1"
-                    data-nodeid="12"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="14"
-          style={
-            Object {
-              "left": 250,
-              "top": 180,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node E
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Custom Models Custom animated links 1`] = `
-<div
-  className="srd-diagram srd-demo-canvas "
-  onMouseDown={[Function]}
-  onWheel={[Function]}
->
-  <svg
-    className="srd-link-layer "
-    style={
-      Object {
-        "transform": "translate(0px,0px) scale(1)",
-      }
-    }
-  />
-  <div
-    className="srd-node-layer "
-    style={
-      Object {
-        "transform": "translate(0px,0px) scale(1)",
-      }
-    }
-  >
-    <div
-      className="node srd-node "
-      data-nodeid="6"
-      style={
-        Object {
-          "left": 100,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Source
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out thick
-              </div>
-              <div
-                className="port srd-port "
-                data-name="out-1"
-                data-nodeid="6"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out default
-              </div>
-              <div
-                className="port srd-port "
-                data-name="out-2"
-                data-nodeid="6"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="9"
-      style={
-        Object {
-          "left": 300,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Target
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="in-1"
-                data-nodeid="9"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In thick
-              </div>
-            </div>
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="in-2"
-                data-nodeid="9"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In default
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="12"
-      style={
-        Object {
-          "left": 100,
-          "top": 200,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Source
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out thick
-              </div>
-              <div
-                className="port srd-port "
-                data-name="out-1"
-                data-nodeid="12"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out default
-              </div>
-              <div
-                className="port srd-port "
-                data-name="out-2"
-                data-nodeid="12"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="15"
-      style={
-        Object {
-          "left": 300,
-          "top": 200,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Target
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="in-1"
-                data-nodeid="15"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In thick
-              </div>
-            </div>
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="in-2"
-                data-nodeid="15"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In default
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Custom Models Custom diamond node 1`] = `
-<div
-  className="srd-diagram srd-demo-canvas "
-  onMouseDown={[Function]}
-  onWheel={[Function]}
->
-  <svg
-    className="srd-link-layer "
-    style={
-      Object {
-        "transform": "translate(0px,0px) scale(1)",
-      }
-    }
-  />
-  <div
-    className="srd-node-layer "
-    style={
-      Object {
-        "transform": "translate(0px,0px) scale(1)",
-      }
-    }
-  >
-    <div
-      className="node srd-node "
-      data-nodeid="8"
-      style={
-        Object {
-          "left": 100,
-          "top": 150,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="9"
-                data-nodeid="8"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="11"
-      style={
-        Object {
-          "left": 250,
-          "top": 108,
-        }
-      }
-    >
-      <div
-        className="diamond-node"
-        style={
-          Object {
-            "height": 150,
-            "position": "relative",
-            "width": 150,
-          }
-        }
-      >
-        <svg
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "
-          <g id=\\"Layer_1\\">
-          </g>
-          <g id=\\"Layer_2\\">
-            <polygon fill=\\"purple\\" stroke=\\"#000000\\" stroke-width=\\"3\\" stroke-miterlimit=\\"10\\" points=\\"10,75 75,10 140,75 75,140 \\"/>
-          </g>
-        ",
-            }
-          }
-          height={150}
-          width={150}
-        />
-        <div
-          style={
-            Object {
-              "left": -8,
-              "position": "absolute",
-              "top": 67,
-              "zIndex": 10,
-            }
-          }
-        >
-          <div
-            className="port srd-port "
-            data-name="left"
-            data-nodeid="11"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-          />
-        </div>
-        <div
-          style={
-            Object {
-              "left": 67,
-              "position": "absolute",
-              "top": -8,
-              "zIndex": 10,
-            }
-          }
-        >
-          <div
-            className="port srd-port "
-            data-name="top"
-            data-nodeid="11"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-          />
-        </div>
-        <div
-          style={
-            Object {
-              "left": 142,
-              "position": "absolute",
-              "top": 67,
-              "zIndex": 10,
-            }
-          }
-        >
-          <div
-            className="port srd-port "
-            data-name="right"
-            data-nodeid="11"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-          />
-        </div>
-        <div
-          style={
-            Object {
-              "left": 67,
-              "position": "absolute",
-              "top": 142,
-              "zIndex": 10,
-            }
-          }
-        >
-          <div
-            className="port srd-port "
-            data-name="bottom"
-            data-nodeid="11"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="16"
-      style={
-        Object {
-          "left": 500,
-          "top": 150,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "red",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 3
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="17"
-                data-nodeid="16"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Simple Usage Canvas grid size 1`] = `
-<div
-  className="srd-diagram srd-demo-canvas "
-  onMouseDown={[Function]}
-  onWheel={[Function]}
->
-  <svg
-    className="srd-link-layer "
-    style={
-      Object {
-        "transform": "translate(0px,0px) scale(1)",
-      }
-    }
-  />
-  <div
-    className="srd-node-layer "
-    style={
-      Object {
-        "transform": "translate(0px,0px) scale(1)",
-      }
-    }
-  >
-    <div
-      className="node srd-node "
-      data-nodeid="7"
-      style={
-        Object {
-          "left": 100,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="8"
-                data-nodeid="7"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="10"
-      style={
-        Object {
-          "left": 400,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="11"
-                data-nodeid="10"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Simple Usage Events and listeners 1`] = `
-<div>
-  <p>
-    Click the diagram elements to inspect some of the possible events.
-  </p>
-  <div
-    className="srd-diagram srd-demo-canvas "
-    onMouseDown={[Function]}
-    onWheel={[Function]}
-  >
-    <svg
-      className="srd-link-layer "
-      style={
-        Object {
-          "transform": "translate(0px,0px) scale(1)",
-        }
-      }
-    />
-    <div
-      className="srd-node-layer "
-      style={
-        Object {
-          "transform": "translate(0px,0px) scale(1)",
-        }
-      }
-    >
-      <div
-        className="node srd-node "
-        data-nodeid="6"
-        style={
-          Object {
-            "left": 100,
-            "top": 100,
-          }
-        }
-      >
-        <div
-          className="srd-default-node "
-          style={
-            Object {
-              "background": "rgb(255,99,66)",
-            }
-          }
-        >
-          <div
-            className="srd-default-node__title "
-          >
-            <div
-              className="srd-default-node__name "
-            >
-              Node 1
-            </div>
-          </div>
-          <div
-            className="srd-default-node__ports "
-          >
-            <div
-              className="srd-default-node__in "
-            />
-            <div
-              className="srd-default-node__out "
-            >
-              <div
-                className="srd-default-port srd-default-port--out "
-              >
-                <div
-                  className="name"
-                >
-                  Out
-                </div>
-                <div
-                  className="port srd-port "
-                  data-name="7"
-                  data-nodeid="6"
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="node srd-node "
-        data-nodeid="9"
-        style={
-          Object {
-            "left": 400,
-            "top": 40,
-          }
-        }
-      >
-        <div
-          className="srd-default-node "
-          style={
-            Object {
-              "background": "rgb(192,255,0)",
-            }
-          }
-        >
-          <div
-            className="srd-default-node__title "
-          >
-            <div
-              className="srd-default-node__name "
-            >
-              Node 2
-            </div>
-          </div>
-          <div
-            className="srd-default-node__ports "
-          >
-            <div
-              className="srd-default-node__in "
-            >
-              <div
-                className="srd-default-port srd-default-port--in "
-              >
-                <div
-                  className="port srd-port "
-                  data-name="10"
-                  data-nodeid="9"
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                />
-                <div
-                  className="name"
-                >
-                  In
-                </div>
-              </div>
-            </div>
-            <div
-              className="srd-default-node__out "
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        className="node srd-node "
-        data-nodeid="12"
-        style={
-          Object {
-            "left": 300,
-            "top": 160,
-          }
-        }
-      >
-        <div
-          className="srd-default-node "
-          style={
-            Object {
-              "background": "rgb(128,99,255)",
-            }
-          }
-        >
-          <div
-            className="srd-default-node__title "
-          >
-            <div
-              className="srd-default-node__name "
-            >
-              Node 3
-            </div>
-          </div>
-          <div
-            className="srd-default-node__ports "
-          >
-            <div
-              className="srd-default-node__in "
-            >
-              <div
-                className="srd-default-port srd-default-port--in "
-              >
-                <div
-                  className="port srd-port "
-                  data-name="13"
-                  data-nodeid="12"
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                />
-                <div
-                  className="name"
-                >
-                  In
-                </div>
-              </div>
-            </div>
-            <div
-              className="srd-default-node__out "
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Simple Usage Limiting link points 1`] = `
-<div>
-  <p>
-    A maximum of 5 points can be created per link.
-  </p>
-  <div
-    className="srd-diagram srd-demo-canvas "
-    onMouseDown={[Function]}
-    onWheel={[Function]}
-  >
-    <svg
-      className="srd-link-layer "
-      style={
-        Object {
-          "transform": "translate(0px,0px) scale(1)",
-        }
-      }
-    />
-    <div
-      className="srd-node-layer "
-      style={
-        Object {
-          "transform": "translate(0px,0px) scale(1)",
-        }
-      }
-    >
-      <div
-        className="node srd-node "
-        data-nodeid="6"
-        style={
-          Object {
-            "left": 100,
-            "top": 100,
-          }
-        }
-      >
-        <div
-          className="srd-default-node "
-          style={
-            Object {
-              "background": "rgb(0,192,255)",
-            }
-          }
-        >
-          <div
-            className="srd-default-node__title "
-          >
-            <div
-              className="srd-default-node__name "
-            >
-              Node 1
-            </div>
-          </div>
-          <div
-            className="srd-default-node__ports "
-          >
-            <div
-              className="srd-default-node__in "
-            />
-            <div
-              className="srd-default-node__out "
-            >
-              <div
-                className="srd-default-port srd-default-port--out "
-              >
-                <div
-                  className="name"
-                >
-                  Out
-                </div>
-                <div
-                  className="port srd-port "
-                  data-name="7"
-                  data-nodeid="6"
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="node srd-node "
-        data-nodeid="9"
-        style={
-          Object {
-            "left": 400,
-            "top": 100,
-          }
-        }
-      >
-        <div
-          className="srd-default-node "
-          style={
-            Object {
-              "background": "rgb(192,255,0)",
-            }
-          }
-        >
-          <div
-            className="srd-default-node__title "
-          >
-            <div
-              className="srd-default-node__name "
-            >
-              Node 2
-            </div>
-          </div>
-          <div
-            className="srd-default-node__ports "
-          >
-            <div
-              className="srd-default-node__in "
-            >
-              <div
-                className="srd-default-port srd-default-port--in "
-              >
-                <div
-                  className="port srd-port "
-                  data-name="10"
-                  data-nodeid="9"
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                />
-                <div
-                  className="name"
-                >
-                  In
-                </div>
-              </div>
-            </div>
-            <div
-              className="srd-default-node__out "
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Simple Usage Links with labels 1`] = `
-<div
-  className="srd-demo-workspace"
->
-  <div
-    className="srd-demo-workspace__toolbar"
-  >
-    <button
-      onClick={[Function]}
-    >
-      Serialize Graph
-    </button>
-  </div>
-  <div
-    className="srd-demo-workspace__content"
-  >
-    <div
-      className="srd-diagram srd-demo-canvas "
-      onMouseDown={[Function]}
-      onWheel={[Function]}
-    >
-      <svg
-        className="srd-link-layer "
-        style={
-          Object {
-            "transform": "translate(0px,0px) scale(1)",
-          }
-        }
-      />
-      <div
-        className="srd-node-layer "
-        style={
-          Object {
-            "transform": "translate(0px,0px) scale(1)",
-          }
-        }
-      >
-        <div
-          className="node srd-node "
-          data-nodeid="6"
-          style={
-            Object {
-              "left": 100,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node A
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="7"
-                    data-nodeid="6"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="9"
-          style={
-            Object {
-              "left": 400,
-              "top": 50,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(255,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node B
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="10"
-                    data-nodeid="9"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="12"
-          style={
-            Object {
-              "left": 450,
-              "top": 180,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node C (no label)
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="13"
-                    data-nodeid="12"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="15"
-          style={
-            Object {
-              "left": 300,
-              "top": 250,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,0,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node D
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="16"
-                    data-nodeid="15"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Simple Usage Locked widget 1`] = `
-<div
-  className="srd-diagram srd-demo-canvas "
-  onMouseDown={[Function]}
-  onWheel={[Function]}
->
-  <svg
-    className="srd-link-layer "
-    style={
-      Object {
-        "transform": "translate(0px,0px) scale(1)",
-      }
-    }
-  />
-  <div
-    className="srd-node-layer "
-    style={
-      Object {
-        "transform": "translate(0px,0px) scale(1)",
-      }
-    }
-  >
-    <div
-      className="node srd-node "
-      data-nodeid="6"
-      style={
-        Object {
-          "left": 100,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="7"
-                data-nodeid="6"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="9"
-      style={
-        Object {
-          "left": 400,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="10"
-                data-nodeid="9"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="23"
-      style={
-        Object {
-          "left": 100,
-          "top": 250,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 3
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="24"
-                data-nodeid="23"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="26"
-      style={
-        Object {
-          "left": 400,
-          "top": 250,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 4
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="27"
-                data-nodeid="26"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Simple Usage Performance demo 1`] = `
-<div
-  className="srd-diagram srd-demo-canvas "
-  onMouseDown={[Function]}
-  onWheel={[Function]}
->
-  <svg
-    className="srd-link-layer "
-    style={
-      Object {
-        "transform": "translate(0px,0px) scale(1)",
-      }
-    }
-  />
-  <div
-    className="srd-node-layer "
-    style={
-      Object {
-        "transform": "translate(0px,0px) scale(1)",
-      }
-    }
-  >
-    <div
-      className="node srd-node "
-      data-nodeid="6"
-      style={
-        Object {
-          "left": 100,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="7"
-                data-nodeid="6"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="9"
-      style={
-        Object {
-          "left": 200,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="10"
-                data-nodeid="9"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="23"
-      style={
-        Object {
-          "left": 100,
-          "top": 200,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="24"
-                data-nodeid="23"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="26"
-      style={
-        Object {
-          "left": 200,
-          "top": 200,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="27"
-                data-nodeid="26"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="40"
-      style={
-        Object {
-          "left": 100,
-          "top": 300,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="41"
-                data-nodeid="40"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="43"
-      style={
-        Object {
-          "left": 200,
-          "top": 300,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="44"
-                data-nodeid="43"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="57"
-      style={
-        Object {
-          "left": 100,
-          "top": 400,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="58"
-                data-nodeid="57"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="60"
-      style={
-        Object {
-          "left": 200,
-          "top": 400,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="61"
-                data-nodeid="60"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="74"
-      style={
-        Object {
-          "left": 100,
-          "top": 500,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="75"
-                data-nodeid="74"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="77"
-      style={
-        Object {
-          "left": 200,
-          "top": 500,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="78"
-                data-nodeid="77"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="91"
-      style={
-        Object {
-          "left": 100,
-          "top": 600,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="92"
-                data-nodeid="91"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="94"
-      style={
-        Object {
-          "left": 200,
-          "top": 600,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="95"
-                data-nodeid="94"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="108"
-      style={
-        Object {
-          "left": 100,
-          "top": 700,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="109"
-                data-nodeid="108"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="111"
-      style={
-        Object {
-          "left": 200,
-          "top": 700,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="112"
-                data-nodeid="111"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="125"
-      style={
-        Object {
-          "left": 100,
-          "top": 800,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="126"
-                data-nodeid="125"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="128"
-      style={
-        Object {
-          "left": 200,
-          "top": 800,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="129"
-                data-nodeid="128"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="142"
-      style={
-        Object {
-          "left": 300,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="143"
-                data-nodeid="142"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="145"
-      style={
-        Object {
-          "left": 400,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="146"
-                data-nodeid="145"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="159"
-      style={
-        Object {
-          "left": 300,
-          "top": 200,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="160"
-                data-nodeid="159"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="162"
-      style={
-        Object {
-          "left": 400,
-          "top": 200,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="163"
-                data-nodeid="162"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="176"
-      style={
-        Object {
-          "left": 300,
-          "top": 300,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="177"
-                data-nodeid="176"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="179"
-      style={
-        Object {
-          "left": 400,
-          "top": 300,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="180"
-                data-nodeid="179"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="193"
-      style={
-        Object {
-          "left": 300,
-          "top": 400,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="194"
-                data-nodeid="193"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="196"
-      style={
-        Object {
-          "left": 400,
-          "top": 400,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="197"
-                data-nodeid="196"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="210"
-      style={
-        Object {
-          "left": 300,
-          "top": 500,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="211"
-                data-nodeid="210"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="213"
-      style={
-        Object {
-          "left": 400,
-          "top": 500,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="214"
-                data-nodeid="213"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="227"
-      style={
-        Object {
-          "left": 300,
-          "top": 600,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="228"
-                data-nodeid="227"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="230"
-      style={
-        Object {
-          "left": 400,
-          "top": 600,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="231"
-                data-nodeid="230"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="244"
-      style={
-        Object {
-          "left": 300,
-          "top": 700,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="245"
-                data-nodeid="244"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="247"
-      style={
-        Object {
-          "left": 400,
-          "top": 700,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="248"
-                data-nodeid="247"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="261"
-      style={
-        Object {
-          "left": 300,
-          "top": 800,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="262"
-                data-nodeid="261"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="264"
-      style={
-        Object {
-          "left": 400,
-          "top": 800,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="265"
-                data-nodeid="264"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="278"
-      style={
-        Object {
-          "left": 500,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="279"
-                data-nodeid="278"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="281"
-      style={
-        Object {
-          "left": 600,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="282"
-                data-nodeid="281"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="295"
-      style={
-        Object {
-          "left": 500,
-          "top": 200,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="296"
-                data-nodeid="295"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="298"
-      style={
-        Object {
-          "left": 600,
-          "top": 200,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="299"
-                data-nodeid="298"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="312"
-      style={
-        Object {
-          "left": 500,
-          "top": 300,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="313"
-                data-nodeid="312"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="315"
-      style={
-        Object {
-          "left": 600,
-          "top": 300,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="316"
-                data-nodeid="315"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="329"
-      style={
-        Object {
-          "left": 500,
-          "top": 400,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="330"
-                data-nodeid="329"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="332"
-      style={
-        Object {
-          "left": 600,
-          "top": 400,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="333"
-                data-nodeid="332"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="346"
-      style={
-        Object {
-          "left": 500,
-          "top": 500,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="347"
-                data-nodeid="346"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="349"
-      style={
-        Object {
-          "left": 600,
-          "top": 500,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="350"
-                data-nodeid="349"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="363"
-      style={
-        Object {
-          "left": 500,
-          "top": 600,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="364"
-                data-nodeid="363"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="366"
-      style={
-        Object {
-          "left": 600,
-          "top": 600,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="367"
-                data-nodeid="366"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="380"
-      style={
-        Object {
-          "left": 500,
-          "top": 700,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="381"
-                data-nodeid="380"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="383"
-      style={
-        Object {
-          "left": 600,
-          "top": 700,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="384"
-                data-nodeid="383"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="397"
-      style={
-        Object {
-          "left": 500,
-          "top": 800,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="398"
-                data-nodeid="397"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="400"
-      style={
-        Object {
-          "left": 600,
-          "top": 800,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="401"
-                data-nodeid="400"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="414"
-      style={
-        Object {
-          "left": 700,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="415"
-                data-nodeid="414"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="417"
-      style={
-        Object {
-          "left": 800,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="418"
-                data-nodeid="417"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="431"
-      style={
-        Object {
-          "left": 700,
-          "top": 200,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="432"
-                data-nodeid="431"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="434"
-      style={
-        Object {
-          "left": 800,
-          "top": 200,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="435"
-                data-nodeid="434"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="448"
-      style={
-        Object {
-          "left": 700,
-          "top": 300,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="449"
-                data-nodeid="448"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="451"
-      style={
-        Object {
-          "left": 800,
-          "top": 300,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="452"
-                data-nodeid="451"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="465"
-      style={
-        Object {
-          "left": 700,
-          "top": 400,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="466"
-                data-nodeid="465"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="468"
-      style={
-        Object {
-          "left": 800,
-          "top": 400,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="469"
-                data-nodeid="468"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="482"
-      style={
-        Object {
-          "left": 700,
-          "top": 500,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="483"
-                data-nodeid="482"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="485"
-      style={
-        Object {
-          "left": 800,
-          "top": 500,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="486"
-                data-nodeid="485"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="499"
-      style={
-        Object {
-          "left": 700,
-          "top": 600,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="500"
-                data-nodeid="499"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="502"
-      style={
-        Object {
-          "left": 800,
-          "top": 600,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="503"
-                data-nodeid="502"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="516"
-      style={
-        Object {
-          "left": 700,
-          "top": 700,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="517"
-                data-nodeid="516"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="519"
-      style={
-        Object {
-          "left": 800,
-          "top": 700,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="520"
-                data-nodeid="519"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="533"
-      style={
-        Object {
-          "left": 700,
-          "top": 800,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="534"
-                data-nodeid="533"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="536"
-      style={
-        Object {
-          "left": 800,
-          "top": 800,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="537"
-                data-nodeid="536"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="550"
-      style={
-        Object {
-          "left": 900,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="551"
-                data-nodeid="550"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="553"
-      style={
-        Object {
-          "left": 1000,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="554"
-                data-nodeid="553"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="567"
-      style={
-        Object {
-          "left": 900,
-          "top": 200,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="568"
-                data-nodeid="567"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="570"
-      style={
-        Object {
-          "left": 1000,
-          "top": 200,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="571"
-                data-nodeid="570"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="584"
-      style={
-        Object {
-          "left": 900,
-          "top": 300,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="585"
-                data-nodeid="584"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="587"
-      style={
-        Object {
-          "left": 1000,
-          "top": 300,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="588"
-                data-nodeid="587"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="601"
-      style={
-        Object {
-          "left": 900,
-          "top": 400,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="602"
-                data-nodeid="601"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="604"
-      style={
-        Object {
-          "left": 1000,
-          "top": 400,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="605"
-                data-nodeid="604"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="618"
-      style={
-        Object {
-          "left": 900,
-          "top": 500,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="619"
-                data-nodeid="618"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="621"
-      style={
-        Object {
-          "left": 1000,
-          "top": 500,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="622"
-                data-nodeid="621"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="635"
-      style={
-        Object {
-          "left": 900,
-          "top": 600,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="636"
-                data-nodeid="635"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="638"
-      style={
-        Object {
-          "left": 1000,
-          "top": 600,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="639"
-                data-nodeid="638"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="652"
-      style={
-        Object {
-          "left": 900,
-          "top": 700,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="653"
-                data-nodeid="652"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="655"
-      style={
-        Object {
-          "left": 1000,
-          "top": 700,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="656"
-                data-nodeid="655"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="669"
-      style={
-        Object {
-          "left": 900,
-          "top": 800,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="670"
-                data-nodeid="669"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="672"
-      style={
-        Object {
-          "left": 1000,
-          "top": 800,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="673"
-                data-nodeid="672"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="686"
-      style={
-        Object {
-          "left": 1100,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="687"
-                data-nodeid="686"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="689"
-      style={
-        Object {
-          "left": 1200,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="690"
-                data-nodeid="689"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="703"
-      style={
-        Object {
-          "left": 1100,
-          "top": 200,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="704"
-                data-nodeid="703"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="706"
-      style={
-        Object {
-          "left": 1200,
-          "top": 200,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="707"
-                data-nodeid="706"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="720"
-      style={
-        Object {
-          "left": 1100,
-          "top": 300,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="721"
-                data-nodeid="720"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="723"
-      style={
-        Object {
-          "left": 1200,
-          "top": 300,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="724"
-                data-nodeid="723"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="737"
-      style={
-        Object {
-          "left": 1100,
-          "top": 400,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="738"
-                data-nodeid="737"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="740"
-      style={
-        Object {
-          "left": 1200,
-          "top": 400,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="741"
-                data-nodeid="740"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="754"
-      style={
-        Object {
-          "left": 1100,
-          "top": 500,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="755"
-                data-nodeid="754"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="757"
-      style={
-        Object {
-          "left": 1200,
-          "top": 500,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="758"
-                data-nodeid="757"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="771"
-      style={
-        Object {
-          "left": 1100,
-          "top": 600,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="772"
-                data-nodeid="771"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="774"
-      style={
-        Object {
-          "left": 1200,
-          "top": 600,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="775"
-                data-nodeid="774"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="788"
-      style={
-        Object {
-          "left": 1100,
-          "top": 700,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="789"
-                data-nodeid="788"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="791"
-      style={
-        Object {
-          "left": 1200,
-          "top": 700,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="792"
-                data-nodeid="791"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="805"
-      style={
-        Object {
-          "left": 1100,
-          "top": 800,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="806"
-                data-nodeid="805"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="808"
-      style={
-        Object {
-          "left": 1200,
-          "top": 800,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="809"
-                data-nodeid="808"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="822"
-      style={
-        Object {
-          "left": 1300,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="823"
-                data-nodeid="822"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="825"
-      style={
-        Object {
-          "left": 1400,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="826"
-                data-nodeid="825"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="839"
-      style={
-        Object {
-          "left": 1300,
-          "top": 200,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="840"
-                data-nodeid="839"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="842"
-      style={
-        Object {
-          "left": 1400,
-          "top": 200,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="843"
-                data-nodeid="842"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="856"
-      style={
-        Object {
-          "left": 1300,
-          "top": 300,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="857"
-                data-nodeid="856"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="859"
-      style={
-        Object {
-          "left": 1400,
-          "top": 300,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="860"
-                data-nodeid="859"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="873"
-      style={
-        Object {
-          "left": 1300,
-          "top": 400,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="874"
-                data-nodeid="873"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="876"
-      style={
-        Object {
-          "left": 1400,
-          "top": 400,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="877"
-                data-nodeid="876"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="890"
-      style={
-        Object {
-          "left": 1300,
-          "top": 500,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="891"
-                data-nodeid="890"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="893"
-      style={
-        Object {
-          "left": 1400,
-          "top": 500,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="894"
-                data-nodeid="893"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="907"
-      style={
-        Object {
-          "left": 1300,
-          "top": 600,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="908"
-                data-nodeid="907"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="910"
-      style={
-        Object {
-          "left": 1400,
-          "top": 600,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="911"
-                data-nodeid="910"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="924"
-      style={
-        Object {
-          "left": 1300,
-          "top": 700,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="925"
-                data-nodeid="924"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="927"
-      style={
-        Object {
-          "left": 1400,
-          "top": 700,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="928"
-                data-nodeid="927"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="941"
-      style={
-        Object {
-          "left": 1300,
-          "top": 800,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="942"
-                data-nodeid="941"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="944"
-      style={
-        Object {
-          "left": 1400,
-          "top": 800,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="945"
-                data-nodeid="944"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="958"
-      style={
-        Object {
-          "left": 1500,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="959"
-                data-nodeid="958"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="961"
-      style={
-        Object {
-          "left": 1600,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="962"
-                data-nodeid="961"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="975"
-      style={
-        Object {
-          "left": 1500,
-          "top": 200,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="976"
-                data-nodeid="975"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="978"
-      style={
-        Object {
-          "left": 1600,
-          "top": 200,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="979"
-                data-nodeid="978"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="992"
-      style={
-        Object {
-          "left": 1500,
-          "top": 300,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="993"
-                data-nodeid="992"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="995"
-      style={
-        Object {
-          "left": 1600,
-          "top": 300,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="996"
-                data-nodeid="995"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="1009"
-      style={
-        Object {
-          "left": 1500,
-          "top": 400,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="1010"
-                data-nodeid="1009"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="1012"
-      style={
-        Object {
-          "left": 1600,
-          "top": 400,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="1013"
-                data-nodeid="1012"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="1026"
-      style={
-        Object {
-          "left": 1500,
-          "top": 500,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="1027"
-                data-nodeid="1026"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="1029"
-      style={
-        Object {
-          "left": 1600,
-          "top": 500,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="1030"
-                data-nodeid="1029"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="1043"
-      style={
-        Object {
-          "left": 1500,
-          "top": 600,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="1044"
-                data-nodeid="1043"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="1046"
-      style={
-        Object {
-          "left": 1600,
-          "top": 600,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="1047"
-                data-nodeid="1046"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="1060"
-      style={
-        Object {
-          "left": 1500,
-          "top": 700,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="1061"
-                data-nodeid="1060"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="1063"
-      style={
-        Object {
-          "left": 1600,
-          "top": 700,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="1064"
-                data-nodeid="1063"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="1077"
-      style={
-        Object {
-          "left": 1500,
-          "top": 800,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="1078"
-                data-nodeid="1077"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="1080"
-      style={
-        Object {
-          "left": 1600,
-          "top": 800,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="1081"
-                data-nodeid="1080"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Simple Usage Simple example 1`] = `
-<div
-  className="srd-diagram srd-demo-canvas "
-  onMouseDown={[Function]}
-  onWheel={[Function]}
->
-  <svg
-    className="srd-link-layer "
-    style={
-      Object {
-        "transform": "translate(0px,0px) scale(1)",
-      }
-    }
-  />
-  <div
-    className="srd-node-layer "
-    style={
-      Object {
-        "transform": "translate(0px,0px) scale(1)",
-      }
-    }
-  >
-    <div
-      className="node srd-node "
-      data-nodeid="6"
-      style={
-        Object {
-          "left": 100,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="7"
-                data-nodeid="6"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="9"
-      style={
-        Object {
-          "left": 400,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="10"
-                data-nodeid="9"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Simple Usage Simple flow example 1`] = `
-<div
-  className="srd-diagram srd-demo-canvas "
-  onMouseDown={[Function]}
-  onWheel={[Function]}
->
-  <svg
-    className="srd-link-layer "
-    style={
-      Object {
-        "transform": "translate(0px,0px) scale(1)",
-      }
-    }
-  />
-  <div
-    className="srd-node-layer "
-    style={
-      Object {
-        "transform": "translate(0px,0px) scale(1)",
-      }
-    }
-  >
-    <div
-      className="node srd-node "
-      data-nodeid="6"
-      style={
-        Object {
-          "left": 100,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 1
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="7"
-                data-nodeid="6"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="9"
-      style={
-        Object {
-          "left": 400,
-          "top": 100,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(192,255,0)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 2
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          >
-            <div
-              className="srd-default-port srd-default-port--in "
-            >
-              <div
-                className="port srd-port "
-                data-name="10"
-                data-nodeid="9"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-              <div
-                className="name"
-              >
-                In
-              </div>
-            </div>
-          </div>
-          <div
-            className="srd-default-node__out "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="node srd-node "
-      data-nodeid="17"
-      style={
-        Object {
-          "left": 100,
-          "top": 200,
-        }
-      }
-    >
-      <div
-        className="srd-default-node "
-        style={
-          Object {
-            "background": "rgb(0,192,255)",
-          }
-        }
-      >
-        <div
-          className="srd-default-node__title "
-        >
-          <div
-            className="srd-default-node__name "
-          >
-            Node 3
-          </div>
-        </div>
-        <div
-          className="srd-default-node__ports "
-        >
-          <div
-            className="srd-default-node__in "
-          />
-          <div
-            className="srd-default-node__out "
-          >
-            <div
-              className="srd-default-port srd-default-port--out "
-            >
-              <div
-                className="name"
-              >
-                Out
-              </div>
-              <div
-                className="port srd-port "
-                data-name="18"
-                data-nodeid="17"
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Simple Usage Zoom to fit 1`] = `
-<div
-  className="srd-demo-workspace"
->
-  <div
-    className="srd-demo-workspace__toolbar"
-  >
-    <button
-      onClick={[Function]}
-    >
-      Zoom to fit
-    </button>
-  </div>
-  <div
-    className="srd-demo-workspace__content"
-  >
-    <div
-      className="srd-diagram srd-demo-canvas "
-      onMouseDown={[Function]}
-      onWheel={[Function]}
-    >
-      <svg
-        className="srd-link-layer "
-        style={
-          Object {
-            "transform": "translate(0px,0px) scale(1)",
-          }
-        }
-      />
-      <div
-        className="srd-node-layer "
-        style={
-          Object {
-            "transform": "translate(0px,0px) scale(1)",
-          }
-        }
-      >
-        <div
-          className="node srd-node "
-          data-nodeid="6"
-          style={
-            Object {
-              "left": 100,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="7"
-                    data-nodeid="6"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="9"
-          style={
-            Object {
-              "left": 200,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="10"
-                    data-nodeid="9"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="23"
-          style={
-            Object {
-              "left": 100,
-              "top": 200,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="24"
-                    data-nodeid="23"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="26"
-          style={
-            Object {
-              "left": 200,
-              "top": 200,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="27"
-                    data-nodeid="26"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="40"
-          style={
-            Object {
-              "left": 100,
-              "top": 300,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="41"
-                    data-nodeid="40"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="43"
-          style={
-            Object {
-              "left": 200,
-              "top": 300,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="44"
-                    data-nodeid="43"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="57"
-          style={
-            Object {
-              "left": 100,
-              "top": 400,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="58"
-                    data-nodeid="57"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="60"
-          style={
-            Object {
-              "left": 200,
-              "top": 400,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="61"
-                    data-nodeid="60"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="74"
-          style={
-            Object {
-              "left": 100,
-              "top": 500,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="75"
-                    data-nodeid="74"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="77"
-          style={
-            Object {
-              "left": 200,
-              "top": 500,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="78"
-                    data-nodeid="77"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="91"
-          style={
-            Object {
-              "left": 100,
-              "top": 600,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="92"
-                    data-nodeid="91"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="94"
-          style={
-            Object {
-              "left": 200,
-              "top": 600,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="95"
-                    data-nodeid="94"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="108"
-          style={
-            Object {
-              "left": 100,
-              "top": 700,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="109"
-                    data-nodeid="108"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="111"
-          style={
-            Object {
-              "left": 200,
-              "top": 700,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="112"
-                    data-nodeid="111"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="125"
-          style={
-            Object {
-              "left": 100,
-              "top": 800,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="126"
-                    data-nodeid="125"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="128"
-          style={
-            Object {
-              "left": 200,
-              "top": 800,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="129"
-                    data-nodeid="128"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="142"
-          style={
-            Object {
-              "left": 300,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="143"
-                    data-nodeid="142"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="145"
-          style={
-            Object {
-              "left": 400,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="146"
-                    data-nodeid="145"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="159"
-          style={
-            Object {
-              "left": 300,
-              "top": 200,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="160"
-                    data-nodeid="159"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="162"
-          style={
-            Object {
-              "left": 400,
-              "top": 200,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="163"
-                    data-nodeid="162"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="176"
-          style={
-            Object {
-              "left": 300,
-              "top": 300,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="177"
-                    data-nodeid="176"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="179"
-          style={
-            Object {
-              "left": 400,
-              "top": 300,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="180"
-                    data-nodeid="179"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="193"
-          style={
-            Object {
-              "left": 300,
-              "top": 400,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="194"
-                    data-nodeid="193"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="196"
-          style={
-            Object {
-              "left": 400,
-              "top": 400,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="197"
-                    data-nodeid="196"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="210"
-          style={
-            Object {
-              "left": 300,
-              "top": 500,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="211"
-                    data-nodeid="210"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="213"
-          style={
-            Object {
-              "left": 400,
-              "top": 500,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="214"
-                    data-nodeid="213"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="227"
-          style={
-            Object {
-              "left": 300,
-              "top": 600,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="228"
-                    data-nodeid="227"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="230"
-          style={
-            Object {
-              "left": 400,
-              "top": 600,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="231"
-                    data-nodeid="230"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="244"
-          style={
-            Object {
-              "left": 300,
-              "top": 700,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="245"
-                    data-nodeid="244"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="247"
-          style={
-            Object {
-              "left": 400,
-              "top": 700,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="248"
-                    data-nodeid="247"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="261"
-          style={
-            Object {
-              "left": 300,
-              "top": 800,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="262"
-                    data-nodeid="261"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="264"
-          style={
-            Object {
-              "left": 400,
-              "top": 800,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="265"
-                    data-nodeid="264"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="278"
-          style={
-            Object {
-              "left": 500,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="279"
-                    data-nodeid="278"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="281"
-          style={
-            Object {
-              "left": 600,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="282"
-                    data-nodeid="281"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="295"
-          style={
-            Object {
-              "left": 500,
-              "top": 200,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="296"
-                    data-nodeid="295"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="298"
-          style={
-            Object {
-              "left": 600,
-              "top": 200,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="299"
-                    data-nodeid="298"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="312"
-          style={
-            Object {
-              "left": 500,
-              "top": 300,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="313"
-                    data-nodeid="312"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="315"
-          style={
-            Object {
-              "left": 600,
-              "top": 300,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="316"
-                    data-nodeid="315"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="329"
-          style={
-            Object {
-              "left": 500,
-              "top": 400,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="330"
-                    data-nodeid="329"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="332"
-          style={
-            Object {
-              "left": 600,
-              "top": 400,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="333"
-                    data-nodeid="332"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="346"
-          style={
-            Object {
-              "left": 500,
-              "top": 500,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="347"
-                    data-nodeid="346"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="349"
-          style={
-            Object {
-              "left": 600,
-              "top": 500,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="350"
-                    data-nodeid="349"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="363"
-          style={
-            Object {
-              "left": 500,
-              "top": 600,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="364"
-                    data-nodeid="363"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="366"
-          style={
-            Object {
-              "left": 600,
-              "top": 600,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="367"
-                    data-nodeid="366"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="380"
-          style={
-            Object {
-              "left": 500,
-              "top": 700,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="381"
-                    data-nodeid="380"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="383"
-          style={
-            Object {
-              "left": 600,
-              "top": 700,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="384"
-                    data-nodeid="383"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="397"
-          style={
-            Object {
-              "left": 500,
-              "top": 800,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="398"
-                    data-nodeid="397"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="400"
-          style={
-            Object {
-              "left": 600,
-              "top": 800,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="401"
-                    data-nodeid="400"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="414"
-          style={
-            Object {
-              "left": 700,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="415"
-                    data-nodeid="414"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="417"
-          style={
-            Object {
-              "left": 800,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="418"
-                    data-nodeid="417"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="431"
-          style={
-            Object {
-              "left": 700,
-              "top": 200,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="432"
-                    data-nodeid="431"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="434"
-          style={
-            Object {
-              "left": 800,
-              "top": 200,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="435"
-                    data-nodeid="434"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="448"
-          style={
-            Object {
-              "left": 700,
-              "top": 300,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="449"
-                    data-nodeid="448"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="451"
-          style={
-            Object {
-              "left": 800,
-              "top": 300,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="452"
-                    data-nodeid="451"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="465"
-          style={
-            Object {
-              "left": 700,
-              "top": 400,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="466"
-                    data-nodeid="465"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="468"
-          style={
-            Object {
-              "left": 800,
-              "top": 400,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="469"
-                    data-nodeid="468"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="482"
-          style={
-            Object {
-              "left": 700,
-              "top": 500,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="483"
-                    data-nodeid="482"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="485"
-          style={
-            Object {
-              "left": 800,
-              "top": 500,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="486"
-                    data-nodeid="485"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="499"
-          style={
-            Object {
-              "left": 700,
-              "top": 600,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="500"
-                    data-nodeid="499"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="502"
-          style={
-            Object {
-              "left": 800,
-              "top": 600,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="503"
-                    data-nodeid="502"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="516"
-          style={
-            Object {
-              "left": 700,
-              "top": 700,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="517"
-                    data-nodeid="516"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="519"
-          style={
-            Object {
-              "left": 800,
-              "top": 700,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="520"
-                    data-nodeid="519"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="533"
-          style={
-            Object {
-              "left": 700,
-              "top": 800,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="534"
-                    data-nodeid="533"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="536"
-          style={
-            Object {
-              "left": 800,
-              "top": 800,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="537"
-                    data-nodeid="536"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="550"
-          style={
-            Object {
-              "left": 900,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="551"
-                    data-nodeid="550"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="553"
-          style={
-            Object {
-              "left": 1000,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="554"
-                    data-nodeid="553"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="567"
-          style={
-            Object {
-              "left": 900,
-              "top": 200,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="568"
-                    data-nodeid="567"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="570"
-          style={
-            Object {
-              "left": 1000,
-              "top": 200,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="571"
-                    data-nodeid="570"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="584"
-          style={
-            Object {
-              "left": 900,
-              "top": 300,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="585"
-                    data-nodeid="584"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="587"
-          style={
-            Object {
-              "left": 1000,
-              "top": 300,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="588"
-                    data-nodeid="587"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="601"
-          style={
-            Object {
-              "left": 900,
-              "top": 400,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="602"
-                    data-nodeid="601"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="604"
-          style={
-            Object {
-              "left": 1000,
-              "top": 400,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="605"
-                    data-nodeid="604"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="618"
-          style={
-            Object {
-              "left": 900,
-              "top": 500,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="619"
-                    data-nodeid="618"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="621"
-          style={
-            Object {
-              "left": 1000,
-              "top": 500,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="622"
-                    data-nodeid="621"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="635"
-          style={
-            Object {
-              "left": 900,
-              "top": 600,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="636"
-                    data-nodeid="635"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="638"
-          style={
-            Object {
-              "left": 1000,
-              "top": 600,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="639"
-                    data-nodeid="638"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="652"
-          style={
-            Object {
-              "left": 900,
-              "top": 700,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="653"
-                    data-nodeid="652"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="655"
-          style={
-            Object {
-              "left": 1000,
-              "top": 700,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="656"
-                    data-nodeid="655"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="669"
-          style={
-            Object {
-              "left": 900,
-              "top": 800,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="670"
-                    data-nodeid="669"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="672"
-          style={
-            Object {
-              "left": 1000,
-              "top": 800,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="673"
-                    data-nodeid="672"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="686"
-          style={
-            Object {
-              "left": 1100,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="687"
-                    data-nodeid="686"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="689"
-          style={
-            Object {
-              "left": 1200,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="690"
-                    data-nodeid="689"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="703"
-          style={
-            Object {
-              "left": 1100,
-              "top": 200,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="704"
-                    data-nodeid="703"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="706"
-          style={
-            Object {
-              "left": 1200,
-              "top": 200,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="707"
-                    data-nodeid="706"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="720"
-          style={
-            Object {
-              "left": 1100,
-              "top": 300,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="721"
-                    data-nodeid="720"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="723"
-          style={
-            Object {
-              "left": 1200,
-              "top": 300,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="724"
-                    data-nodeid="723"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="737"
-          style={
-            Object {
-              "left": 1100,
-              "top": 400,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="738"
-                    data-nodeid="737"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="740"
-          style={
-            Object {
-              "left": 1200,
-              "top": 400,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="741"
-                    data-nodeid="740"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="754"
-          style={
-            Object {
-              "left": 1100,
-              "top": 500,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="755"
-                    data-nodeid="754"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="757"
-          style={
-            Object {
-              "left": 1200,
-              "top": 500,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="758"
-                    data-nodeid="757"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="771"
-          style={
-            Object {
-              "left": 1100,
-              "top": 600,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="772"
-                    data-nodeid="771"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="774"
-          style={
-            Object {
-              "left": 1200,
-              "top": 600,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="775"
-                    data-nodeid="774"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="788"
-          style={
-            Object {
-              "left": 1100,
-              "top": 700,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="789"
-                    data-nodeid="788"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="791"
-          style={
-            Object {
-              "left": 1200,
-              "top": 700,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="792"
-                    data-nodeid="791"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="805"
-          style={
-            Object {
-              "left": 1100,
-              "top": 800,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="806"
-                    data-nodeid="805"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="808"
-          style={
-            Object {
-              "left": 1200,
-              "top": 800,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="809"
-                    data-nodeid="808"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="822"
-          style={
-            Object {
-              "left": 1300,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="823"
-                    data-nodeid="822"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="825"
-          style={
-            Object {
-              "left": 1400,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="826"
-                    data-nodeid="825"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="839"
-          style={
-            Object {
-              "left": 1300,
-              "top": 200,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="840"
-                    data-nodeid="839"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="842"
-          style={
-            Object {
-              "left": 1400,
-              "top": 200,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="843"
-                    data-nodeid="842"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="856"
-          style={
-            Object {
-              "left": 1300,
-              "top": 300,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="857"
-                    data-nodeid="856"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="859"
-          style={
-            Object {
-              "left": 1400,
-              "top": 300,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="860"
-                    data-nodeid="859"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="873"
-          style={
-            Object {
-              "left": 1300,
-              "top": 400,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="874"
-                    data-nodeid="873"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="876"
-          style={
-            Object {
-              "left": 1400,
-              "top": 400,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="877"
-                    data-nodeid="876"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="890"
-          style={
-            Object {
-              "left": 1300,
-              "top": 500,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="891"
-                    data-nodeid="890"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="893"
-          style={
-            Object {
-              "left": 1400,
-              "top": 500,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="894"
-                    data-nodeid="893"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="907"
-          style={
-            Object {
-              "left": 1300,
-              "top": 600,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="908"
-                    data-nodeid="907"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="910"
-          style={
-            Object {
-              "left": 1400,
-              "top": 600,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="911"
-                    data-nodeid="910"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="924"
-          style={
-            Object {
-              "left": 1300,
-              "top": 700,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="925"
-                    data-nodeid="924"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="927"
-          style={
-            Object {
-              "left": 1400,
-              "top": 700,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="928"
-                    data-nodeid="927"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="941"
-          style={
-            Object {
-              "left": 1300,
-              "top": 800,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="942"
-                    data-nodeid="941"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="944"
-          style={
-            Object {
-              "left": 1400,
-              "top": 800,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="945"
-                    data-nodeid="944"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="958"
-          style={
-            Object {
-              "left": 1500,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="959"
-                    data-nodeid="958"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="961"
-          style={
-            Object {
-              "left": 1600,
-              "top": 100,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="962"
-                    data-nodeid="961"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="975"
-          style={
-            Object {
-              "left": 1500,
-              "top": 200,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="976"
-                    data-nodeid="975"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="978"
-          style={
-            Object {
-              "left": 1600,
-              "top": 200,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="979"
-                    data-nodeid="978"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="992"
-          style={
-            Object {
-              "left": 1500,
-              "top": 300,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="993"
-                    data-nodeid="992"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="995"
-          style={
-            Object {
-              "left": 1600,
-              "top": 300,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="996"
-                    data-nodeid="995"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="1009"
-          style={
-            Object {
-              "left": 1500,
-              "top": 400,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="1010"
-                    data-nodeid="1009"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="1012"
-          style={
-            Object {
-              "left": 1600,
-              "top": 400,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="1013"
-                    data-nodeid="1012"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="1026"
-          style={
-            Object {
-              "left": 1500,
-              "top": 500,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="1027"
-                    data-nodeid="1026"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="1029"
-          style={
-            Object {
-              "left": 1600,
-              "top": 500,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="1030"
-                    data-nodeid="1029"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="1043"
-          style={
-            Object {
-              "left": 1500,
-              "top": 600,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="1044"
-                    data-nodeid="1043"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="1046"
-          style={
-            Object {
-              "left": 1600,
-              "top": 600,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="1047"
-                    data-nodeid="1046"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="1060"
-          style={
-            Object {
-              "left": 1500,
-              "top": 700,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="1061"
-                    data-nodeid="1060"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="1063"
-          style={
-            Object {
-              "left": 1600,
-              "top": 700,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="1064"
-                    data-nodeid="1063"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="1077"
-          style={
-            Object {
-              "left": 1500,
-              "top": 800,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(0,192,255)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 1
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              />
-              <div
-                className="srd-default-node__out "
-              >
-                <div
-                  className="srd-default-port srd-default-port--out "
-                >
-                  <div
-                    className="name"
-                  >
-                    Out
-                  </div>
-                  <div
-                    className="port srd-port "
-                    data-name="1078"
-                    data-nodeid="1077"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="node srd-node "
-          data-nodeid="1080"
-          style={
-            Object {
-              "left": 1600,
-              "top": 800,
-            }
-          }
-        >
-          <div
-            className="srd-default-node "
-            style={
-              Object {
-                "background": "rgb(192,255,0)",
-              }
-            }
-          >
-            <div
-              className="srd-default-node__title "
-            >
-              <div
-                className="srd-default-node__name "
-              >
-                Node 2
-              </div>
-            </div>
-            <div
-              className="srd-default-node__ports "
-            >
-              <div
-                className="srd-default-node__in "
-              >
-                <div
-                  className="srd-default-port srd-default-port--in "
-                >
-                  <div
-                    className="port srd-port "
-                    data-name="1081"
-                    data-nodeid="1080"
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  />
-                  <div
-                    className="name"
-                  >
-                    In
-                  </div>
-                </div>
-              </div>
-              <div
-                className="srd-default-node__out "
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/lib-demo-gallery/tests-snapshots/storybook.test.tsx b/lib-demo-gallery/tests-snapshots/storybook.test.tsx
deleted file mode 100644
index 83d36c5..0000000
--- a/lib-demo-gallery/tests-snapshots/storybook.test.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import initStoryshots from '@storybook/addon-storyshots';
-import 'raf/polyfill';
-
-initStoryshots();
diff --git a/package.json b/package.json
index fe4d959..e615ad5 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,6 @@
 		"@babel/preset-react": "^7.0.0",
 		"@storybook/addon-actions": "^5.1.9",
 		"@storybook/addon-options": "^5.1.9",
-		"@storybook/addon-storyshots": "^5.1.9",
 		"@storybook/addons": "^5.1.9",
 		"@storybook/react": "^5.1.9",
 		"@storybook/storybook-deployer": "^2.8.1",
@@ -55,7 +54,6 @@
 		"@types/promise": "^7.1.30",
 		"@types/puppeteer": "^1.12.4",
 		"@types/react": "^16.8.23",
-		"babel-jest": "^24.8.0",
 		"babel-loader": "^8.0.6",
 		"closest": "^0.0.1",
 		"copy-webpack-plugin": "^5.0.3",