// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`PageMappingDiagrams renders correctly using snapshot 1`] = `
<div
  className="form-group"
>
  <div>
    <button
      className="btn btn-default"
      disabled={false}
      onClick={[MockFunction]}
      type="button"
    >
      Hide Source Diagram
    </button>
     
    <button
      className="btn btn-default"
      disabled={false}
      onClick={[MockFunction]}
      type="button"
    >
      Hide Target Diagram
    </button>
  </div>
  <br />
  <label
    style={
      Object {
        "display": "block",
      }
    }
  >
    Source Process Definition Diagram
    <div>
      <div
        style={
          Object {
            "border": "1px solid black",
            "height": 400,
            "position": "relative",
            "width": 800,
          }
        }
      >
        <svg
          height={400}
          onClick={[Function]}
          onDoubleClick={[Function]}
          onMouseDown={[Function]}
          onMouseEnter={[Function]}
          onMouseLeave={[Function]}
          onMouseMove={[Function]}
          onMouseUp={[Function]}
          onTouchCancel={[Function]}
          onTouchEnd={[Function]}
          onTouchMove={[Function]}
          onTouchStart={[Function]}
          onWheel={[Function]}
          style={
            Object {
              "display": "block",
              "touchAction": "none",
            }
          }
          width={800}
        >
          <rect
            fill="#616264"
            height={400}
            style={
              Object {
                "pointerEvents": "none",
              }
            }
            width={800}
            x={0}
            y={0}
          />
          <g
            style={Object {}}
            transform="matrix(0.4,0,0,0.4,0,0)"
          >
            <rect
              fill="#fff"
              height={1000}
              style={Object {}}
              width={2000}
              x={0}
              y={0}
            />
            <g>
              <svg
                data-src={null}
                style={null}
              />
            </g>
          </g>
        </svg>
        <div
          role="toolbar"
          style={
            Object {
              "backgroundColor": "rgba(19, 20, 22, 0.90)",
              "borderRadius": "2px",
              "bottom": "unset",
              "display": "flex",
              "flexDirection": "column",
              "left": "unset",
              "padding": "2px 1px",
              "position": "absolute",
              "right": "5px",
              "top": "5px",
              "transform": "none",
            }
          }
        >
          <button
            name="unselect-tools"
            onClick={[Function]}
            onMouseEnter={[Function]}
            onMouseLeave={[Function]}
            onTouchCancel={[Function]}
            onTouchEnd={[Function]}
            onTouchStart={[Function]}
            role="button"
            style={
              Object {
                "background": "none",
                "border": "0px",
                "color": "#1CA6FC",
                "cursor": "pointer",
                "display": "block",
                "height": "24px",
                "margin": "1px 2px",
                "outline": "0px",
                "padding": "0px",
                "transition": "color 200ms ease",
                "width": "24px",
              }
            }
            title="Selection"
            type="button"
          >
            <svg
              height={24}
              stroke="currentColor"
              width={24}
            >
              <path
                d="M10.07,14.27C10.57,14.03 11.16,14.25 11.4,14.75L13.7,19.74L15.5,18.89L13.19,13.91C12.95,13.41 13.17,12.81 13.67,12.58L13.95,12.5L16.25,12.05L8,5.12V15.9L9.82,14.43L10.07,14.27M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C18,19.46 17.76,20.05 17.26,20.28L13.64,21.97Z"
              />
            </svg>
          </button>
          <button
            name="select-tool-pan"
            onClick={[Function]}
            onMouseEnter={[Function]}
            onMouseLeave={[Function]}
            onTouchCancel={[Function]}
            onTouchEnd={[Function]}
            onTouchStart={[Function]}
            role="button"
            style={
              Object {
                "background": "none",
                "border": "0px",
                "color": "#FFF",
                "cursor": "pointer",
                "display": "block",
                "height": "24px",
                "margin": "1px 2px",
                "outline": "0px",
                "padding": "0px",
                "transition": "color 200ms ease",
                "width": "24px",
              }
            }
            title="Pan"
            type="button"
          >
            <svg
              height={24}
              stroke="currentColor"
              width={24}
            >
              <path
                d="M13,6V11H18V7.75L22.25,12L18,16.25V13H13V18H16.25L12,22.25L7.75,18H11V13H6V16.25L1.75,12L6,7.75V11H11V6H7.75L12,1.75L16.25,6H13Z"
              />
            </svg>
          </button>
          <button
            name="select-tool-zoom-in"
            onClick={[Function]}
            onMouseEnter={[Function]}
            onMouseLeave={[Function]}
            onTouchCancel={[Function]}
            onTouchEnd={[Function]}
            onTouchStart={[Function]}
            role="button"
            style={
              Object {
                "background": "none",
                "border": "0px",
                "color": "#FFF",
                "cursor": "pointer",
                "display": "block",
                "height": "24px",
                "margin": "1px 2px",
                "outline": "0px",
                "padding": "0px",
                "transition": "color 200ms ease",
                "width": "24px",
              }
            }
            title="Zoom in"
            type="button"
          >
            <svg
              height={24}
              stroke="currentColor"
              width={24}
            >
              <g>
                <path
                  d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
                />
                <path
                  d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"
                />
              </g>
            </svg>
          </button>
          <button
            name="select-tool-zoom-out"
            onClick={[Function]}
            onMouseEnter={[Function]}
            onMouseLeave={[Function]}
            onTouchCancel={[Function]}
            onTouchEnd={[Function]}
            onTouchStart={[Function]}
            role="button"
            style={
              Object {
                "background": "none",
                "border": "0px",
                "color": "#FFF",
                "cursor": "pointer",
                "display": "block",
                "height": "24px",
                "margin": "1px 2px",
                "outline": "0px",
                "padding": "0px",
                "transition": "color 200ms ease",
                "width": "24px",
              }
            }
            title="Zoom out"
            type="button"
          >
            <svg
              height={24}
              stroke="currentColor"
              width={24}
            >
              <path
                d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"
              />
            </svg>
          </button>
          <button
            name="fit-to-viewer"
            onClick={[Function]}
            onMouseEnter={[Function]}
            onMouseLeave={[Function]}
            onTouchCancel={[Function]}
            onTouchEnd={[Function]}
            onTouchStart={[Function]}
            role="button"
            style={
              Object {
                "background": "none",
                "border": "0px",
                "color": "#FFF",
                "cursor": "pointer",
                "display": "block",
                "height": "24px",
                "margin": "1px 2px",
                "outline": "0px",
                "padding": "0px",
                "transition": "color 200ms ease",
                "width": "24px",
              }
            }
            title="Fit to viewer"
            type="button"
          >
            <svg
              height={24}
              stroke="currentColor"
              width={24}
            >
              <path
                d="M15 3l2.3 2.3-2.89 2.87 1.42 1.42L18.7 6.7 21 9V3zM3 9l2.3-2.3 2.87 2.89 1.42-1.42L6.7 5.3 9 3H3zm6 12l-2.3-2.3 2.89-2.87-1.42-1.42L5.3 17.3 3 15v6zm12-6l-2.3 2.3-2.87-2.89-1.42 1.42 2.89 2.87L15 21h6z"
              />
            </svg>
          </button>
        </div>
        <div
          role="navigation"
          style={
            Object {
              "background": "#616264",
              "bottom": "6px",
              "height": "80px",
              "left": "6px",
              "outline": "1px solid rgba(19, 20, 22, 0.90)",
              "overflow": "hidden",
              "position": "absolute",
              "transition": "width 200ms ease, height 200ms ease, bottom 200ms ease",
              "width": "100px",
            }
          }
        >
          <svg
            height={80}
            style={
              Object {
                "pointerEvents": "none",
              }
            }
            width={100}
          >
            <g
              transform="translate(0, 15)"
            >
              <g
                transform="scale(0.05, 0.05)"
              >
                <rect
                  fill="#fff"
                  height={1000}
                  width={2000}
                  x={0}
                  y={0}
                />
                <svg
                  data-src={null}
                  style={null}
                />
                <g>
                  <defs>
                    <mask
                      id="react-svg-pan-zoom_miniature_mask_uid1"
                    >
                      <rect
                        fill="#ffffff"
                        height={1000}
                        width={2000}
                        x="0"
                        y="0"
                      />
                      <rect
                        height={999.9999999999998}
                        width={1999.9999999999995}
                        x={0}
                        y={0}
                      />
                    </mask>
                  </defs>
                  <rect
                    height={1000}
                    style={
                      Object {
                        "fill": "#000",
                        "mask": "url(#react-svg-pan-zoom_miniature_mask_uid1)",
                        "opacity": 0.4,
                        "stroke": "none",
                      }
                    }
                    width={2000}
                    x="0"
                    y="0"
                  />
                </g>
              </g>
            </g>
          </svg>
          <button
            onClick={[Function]}
            role="button"
            style={
              Object {
                "background": "rgba(19, 20, 22, 0.901961)",
                "border": 0,
                "bottom": 0,
                "color": "#fff",
                "display": "block",
                "height": "24px",
                "left": "0px",
                "outline": 0,
                "padding": 0,
                "position": "absolute",
                "width": "24px",
              }
            }
            type="button"
          >
            <svg
              height={24}
              stroke="currentColor"
              width={24}
            >
              <g
                transform="rotate(225, 12, 13)"
              >
                <path
                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
                  fill="#000000"
                />
              </g>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </label>
  <br />
  <label
    style={
      Object {
        "display": "block",
      }
    }
  >
    Target Process Definition Diagram
    <div>
      <div
        style={
          Object {
            "border": "1px solid black",
            "height": 400,
            "position": "relative",
            "width": 800,
          }
        }
      >
        <svg
          height={400}
          onClick={[Function]}
          onDoubleClick={[Function]}
          onMouseDown={[Function]}
          onMouseEnter={[Function]}
          onMouseLeave={[Function]}
          onMouseMove={[Function]}
          onMouseUp={[Function]}
          onTouchCancel={[Function]}
          onTouchEnd={[Function]}
          onTouchMove={[Function]}
          onTouchStart={[Function]}
          onWheel={[Function]}
          style={
            Object {
              "display": "block",
              "touchAction": "none",
            }
          }
          width={800}
        >
          <rect
            fill="#616264"
            height={400}
            style={
              Object {
                "pointerEvents": "none",
              }
            }
            width={800}
            x={0}
            y={0}
          />
          <g
            style={Object {}}
            transform="matrix(0.4,0,0,0.4,0,0)"
          >
            <rect
              fill="#fff"
              height={1000}
              style={Object {}}
              width={2000}
              x={0}
              y={0}
            />
            <g>
              <svg
                data-src={null}
                style={null}
              />
            </g>
          </g>
        </svg>
        <div
          role="toolbar"
          style={
            Object {
              "backgroundColor": "rgba(19, 20, 22, 0.90)",
              "borderRadius": "2px",
              "bottom": "unset",
              "display": "flex",
              "flexDirection": "column",
              "left": "unset",
              "padding": "2px 1px",
              "position": "absolute",
              "right": "5px",
              "top": "5px",
              "transform": "none",
            }
          }
        >
          <button
            name="unselect-tools"
            onClick={[Function]}
            onMouseEnter={[Function]}
            onMouseLeave={[Function]}
            onTouchCancel={[Function]}
            onTouchEnd={[Function]}
            onTouchStart={[Function]}
            role="button"
            style={
              Object {
                "background": "none",
                "border": "0px",
                "color": "#1CA6FC",
                "cursor": "pointer",
                "display": "block",
                "height": "24px",
                "margin": "1px 2px",
                "outline": "0px",
                "padding": "0px",
                "transition": "color 200ms ease",
                "width": "24px",
              }
            }
            title="Selection"
            type="button"
          >
            <svg
              height={24}
              stroke="currentColor"
              width={24}
            >
              <path
                d="M10.07,14.27C10.57,14.03 11.16,14.25 11.4,14.75L13.7,19.74L15.5,18.89L13.19,13.91C12.95,13.41 13.17,12.81 13.67,12.58L13.95,12.5L16.25,12.05L8,5.12V15.9L9.82,14.43L10.07,14.27M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C18,19.46 17.76,20.05 17.26,20.28L13.64,21.97Z"
              />
            </svg>
          </button>
          <button
            name="select-tool-pan"
            onClick={[Function]}
            onMouseEnter={[Function]}
            onMouseLeave={[Function]}
            onTouchCancel={[Function]}
            onTouchEnd={[Function]}
            onTouchStart={[Function]}
            role="button"
            style={
              Object {
                "background": "none",
                "border": "0px",
                "color": "#FFF",
                "cursor": "pointer",
                "display": "block",
                "height": "24px",
                "margin": "1px 2px",
                "outline": "0px",
                "padding": "0px",
                "transition": "color 200ms ease",
                "width": "24px",
              }
            }
            title="Pan"
            type="button"
          >
            <svg
              height={24}
              stroke="currentColor"
              width={24}
            >
              <path
                d="M13,6V11H18V7.75L22.25,12L18,16.25V13H13V18H16.25L12,22.25L7.75,18H11V13H6V16.25L1.75,12L6,7.75V11H11V6H7.75L12,1.75L16.25,6H13Z"
              />
            </svg>
          </button>
          <button
            name="select-tool-zoom-in"
            onClick={[Function]}
            onMouseEnter={[Function]}
            onMouseLeave={[Function]}
            onTouchCancel={[Function]}
            onTouchEnd={[Function]}
            onTouchStart={[Function]}
            role="button"
            style={
              Object {
                "background": "none",
                "border": "0px",
                "color": "#FFF",
                "cursor": "pointer",
                "display": "block",
                "height": "24px",
                "margin": "1px 2px",
                "outline": "0px",
                "padding": "0px",
                "transition": "color 200ms ease",
                "width": "24px",
              }
            }
            title="Zoom in"
            type="button"
          >
            <svg
              height={24}
              stroke="currentColor"
              width={24}
            >
              <g>
                <path
                  d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
                />
                <path
                  d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"
                />
              </g>
            </svg>
          </button>
          <button
            name="select-tool-zoom-out"
            onClick={[Function]}
            onMouseEnter={[Function]}
            onMouseLeave={[Function]}
            onTouchCancel={[Function]}
            onTouchEnd={[Function]}
            onTouchStart={[Function]}
            role="button"
            style={
              Object {
                "background": "none",
                "border": "0px",
                "color": "#FFF",
                "cursor": "pointer",
                "display": "block",
                "height": "24px",
                "margin": "1px 2px",
                "outline": "0px",
                "padding": "0px",
                "transition": "color 200ms ease",
                "width": "24px",
              }
            }
            title="Zoom out"
            type="button"
          >
            <svg
              height={24}
              stroke="currentColor"
              width={24}
            >
              <path
                d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"
              />
            </svg>
          </button>
          <button
            name="fit-to-viewer"
            onClick={[Function]}
            onMouseEnter={[Function]}
            onMouseLeave={[Function]}
            onTouchCancel={[Function]}
            onTouchEnd={[Function]}
            onTouchStart={[Function]}
            role="button"
            style={
              Object {
                "background": "none",
                "border": "0px",
                "color": "#FFF",
                "cursor": "pointer",
                "display": "block",
                "height": "24px",
                "margin": "1px 2px",
                "outline": "0px",
                "padding": "0px",
                "transition": "color 200ms ease",
                "width": "24px",
              }
            }
            title="Fit to viewer"
            type="button"
          >
            <svg
              height={24}
              stroke="currentColor"
              width={24}
            >
              <path
                d="M15 3l2.3 2.3-2.89 2.87 1.42 1.42L18.7 6.7 21 9V3zM3 9l2.3-2.3 2.87 2.89 1.42-1.42L6.7 5.3 9 3H3zm6 12l-2.3-2.3 2.89-2.87-1.42-1.42L5.3 17.3 3 15v6zm12-6l-2.3 2.3-2.87-2.89-1.42 1.42 2.89 2.87L15 21h6z"
              />
            </svg>
          </button>
        </div>
        <div
          role="navigation"
          style={
            Object {
              "background": "#616264",
              "bottom": "6px",
              "height": "80px",
              "left": "6px",
              "outline": "1px solid rgba(19, 20, 22, 0.90)",
              "overflow": "hidden",
              "position": "absolute",
              "transition": "width 200ms ease, height 200ms ease, bottom 200ms ease",
              "width": "100px",
            }
          }
        >
          <svg
            height={80}
            style={
              Object {
                "pointerEvents": "none",
              }
            }
            width={100}
          >
            <g
              transform="translate(0, 15)"
            >
              <g
                transform="scale(0.05, 0.05)"
              >
                <rect
                  fill="#fff"
                  height={1000}
                  width={2000}
                  x={0}
                  y={0}
                />
                <svg
                  data-src={null}
                  style={null}
                />
                <g>
                  <defs>
                    <mask
                      id="react-svg-pan-zoom_miniature_mask_uid2"
                    >
                      <rect
                        fill="#ffffff"
                        height={1000}
                        width={2000}
                        x="0"
                        y="0"
                      />
                      <rect
                        height={999.9999999999998}
                        width={1999.9999999999995}
                        x={0}
                        y={0}
                      />
                    </mask>
                  </defs>
                  <rect
                    height={1000}
                    style={
                      Object {
                        "fill": "#000",
                        "mask": "url(#react-svg-pan-zoom_miniature_mask_uid2)",
                        "opacity": 0.4,
                        "stroke": "none",
                      }
                    }
                    width={2000}
                    x="0"
                    y="0"
                  />
                </g>
              </g>
            </g>
          </svg>
          <button
            onClick={[Function]}
            role="button"
            style={
              Object {
                "background": "rgba(19, 20, 22, 0.901961)",
                "border": 0,
                "bottom": 0,
                "color": "#fff",
                "display": "block",
                "height": "24px",
                "left": "0px",
                "outline": 0,
                "padding": 0,
                "position": "absolute",
                "width": "24px",
              }
            }
            type="button"
          >
            <svg
              height={24}
              stroke="currentColor"
              width={24}
            >
              <g
                transform="rotate(225, 12, 13)"
              >
                <path
                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
                  fill="#000000"
                />
              </g>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </label>
</div>
`;
