better web app layout

App/package-lock.json

@@ -770,7 +770,6 @@
       "version": "7.3.4",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.4.tgz",
       "integrity": "sha512-IvfvnMdSaLBateu0jfsYIpZTxAc2cKEXEMiezGGN75QcBcecDUKd3PgLAncT0oOgxKy8dd8hrJKj9MfzgfZd6g==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.12.0"
       }
@@ -1096,6 +1095,39 @@
         "physical-cpu-count": "^2.0.0"
       }
     },
+    "@react-bootstrap/react-popper": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@react-bootstrap/react-popper/-/react-popper-1.2.1.tgz",
+      "integrity": "sha512-4l3q7LcZEhrSkI4d3Ie3g4CdrXqqTexXX4PFT45CB0z5z2JUbaxgRwKNq7r5j2bLdVpZm+uvUGqxJw8d9vgbJQ==",
+      "requires": {
+        "babel-runtime": "6.x.x",
+        "create-react-context": "^0.2.1",
+        "popper.js": "^1.14.4",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.5",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
+    "@restart/context": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
+      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
+    },
+    "@restart/hooks": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.9.tgz",
+      "integrity": "sha512-6gL84qcdZHUN0V5czyMXzAbcBBpHm8H5Gwj7eqnVi6p3JzGwJ5m2at19dKE9Gv3SsU3Hv9SPDX+6zQSExCjjkQ=="
+    },
     "@types/autoprefixer": {
       "version": "9.5.0",
       "resolved": "https://registry.npmjs.org/@types/autoprefixer/-/autoprefixer-9.5.0.tgz",
@@ -1147,6 +1179,16 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/bootstrap": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-4.3.1.tgz",
+      "integrity": "sha512-n7Zv7Y+C98Yv4oqbyqGn3alCvNRCya2xMYzOdVEnmnFlu04MXQk1ntVrBhXzDkiwhZZYNkNfBZn2yhTnEh/mHQ==",
+      "dev": true,
+      "requires": {
+        "@types/jquery": "*",
+        "popper.js": "^1.14.1"
+      }
+    },
     "@types/browserslist": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@types/browserslist/-/browserslist-4.4.0.tgz",
@@ -1231,6 +1273,15 @@
       "integrity": "sha512-yALhelO3i0hqZwhjtcr6dYyaLoCHbAMshwtj6cGxTvHZAKXHsYGdff6E8EPw3xLKY0ELUTQ69Q1rQiJENnccMA==",
       "dev": true
     },
+    "@types/jquery": {
+      "version": "3.3.31",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.31.tgz",
+      "integrity": "sha512-Lz4BAJihoFw5nRzKvg4nawXPzutkv7wmfQ5121avptaSIXlDNJCUuxZxX/G+9EVidZGuO0UBlk+YjKbwRKJigg==",
+      "dev": true,
+      "requires": {
+        "@types/sizzle": "*"
+      }
+    },
     "@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -1295,6 +1346,15 @@
         "csstype": "^2.2.0"
       }
     },
+    "@types/react-bootstrap": {
+      "version": "0.32.19",
+      "resolved": "https://registry.npmjs.org/@types/react-bootstrap/-/react-bootstrap-0.32.19.tgz",
+      "integrity": "sha512-WT108qFXs462RALsnA51e/Q5UJMtCCwIubhgv1U/YtVh2Rh18ZLALkNfAJZO9iroj7fk5RHcfMg7cZxirZp47w==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-dom": {
       "version": "16.8.5",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.8.5.tgz",
@@ -1313,6 +1373,12 @@
         "@types/node": "*"
       }
     },
+    "@types/sizzle": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
+      "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==",
+      "dev": true
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -1509,6 +1575,11 @@
         "function-bind": "^1.1.1"
       }
     },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -1684,7 +1755,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
       "requires": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -1693,8 +1763,7 @@
         "regenerator-runtime": {
           "version": "0.11.1",
           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
-          "dev": true
         }
       }
     },
@@ -1835,6 +1904,11 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz",
+      "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2261,6 +2335,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "cli-cursor": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
@@ -2498,8 +2577,7 @@
     "core-js": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
-      "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==",
+      "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A=="
-      "dev": true
     },
     "core-util-is": {
       "version": "1.0.2",
@@ -2556,6 +2634,15 @@
         "sha.js": "^2.4.8"
       }
     },
+    "create-react-context": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz",
+      "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==",
+      "requires": {
+        "fbjs": "^0.8.0",
+        "gud": "^1.0.0"
+      }
+    },
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -3136,6 +3223,14 @@
       "integrity": "sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=",
       "dev": true
     },
+    "dom-helpers": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
@@ -3303,6 +3398,14 @@
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
       "dev": true
     },
+    "encoding": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "requires": {
+        "iconv-lite": "~0.4.13"
+      }
+    },
     "end-of-stream": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
@@ -3741,6 +3844,27 @@
         "bser": "^2.0.0"
       }
     },
+    "fbjs": {
+      "version": "0.8.17",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+      "requires": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        }
+      }
+    },
     "filesize": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
@@ -4515,6 +4639,11 @@
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
       "dev": true
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
     "handlebars": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.2.tgz",
@@ -4775,7 +4904,6 @@
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
       "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dev": true,
       "requires": {
         "safer-buffer": ">= 2.1.2 < 3"
       }
@@ -4850,7 +4978,6 @@
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
       "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.0.0"
       }
@@ -5101,8 +5228,7 @@
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
-      "dev": true
     },
     "is-string": {
       "version": "1.0.4",
@@ -5176,6 +5302,15 @@
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
       "dev": true
     },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "requires": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -5807,6 +5942,11 @@
         "verror": "1.10.0"
       }
     },
+    "keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
+    },
     "kind-of": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
@@ -6334,6 +6474,15 @@
       "integrity": "sha512-2+DuKodWvwRTrCfKOeR24KIc5unKjOh8mz17NCzVnHWfjAdDqbfbjqh7gUT+BkXBRQM52+xCHciKWonJ3CbJMQ==",
       "dev": true
     },
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "requires": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      }
+    },
     "node-forge": {
       "version": "0.7.6",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.6.tgz",
@@ -7238,6 +7387,11 @@
       "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
       "dev": true
     },
+    "popper.js": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
+      "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
+    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -7960,6 +8114,14 @@
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
       "dev": true
     },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "requires": {
+        "asap": "~2.0.3"
+      }
+    },
     "prompts": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.1.0.tgz",
@@ -7991,6 +8153,25 @@
         "reflect.ownkeys": "^0.2.0"
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.0.tgz",
+      "integrity": "sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
     "proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -8135,6 +8316,48 @@
         "scheduler": "^0.13.6"
       }
     },
+    "react-bootstrap": {
+      "version": "1.0.0-beta.10",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.10.tgz",
+      "integrity": "sha512-hSvUrVbm+2uEpsGLVbAKJe/HOBT8ou+AX8Oo3VHlXSbG/9dHonwNP/wXu1NcsJ+TemMk7UnzdX2J8BN5MDnIxA==",
+      "requires": {
+        "@babel/runtime": "^7.4.2",
+        "@react-bootstrap/react-popper": "1.2.1",
+        "@restart/context": "^2.1.4",
+        "@restart/hooks": "^0.3.0",
+        "classnames": "^2.2.6",
+        "dom-helpers": "^3.4.0",
+        "invariant": "^2.2.4",
+        "keycode": "^2.2.0",
+        "popper.js": "^1.14.7",
+        "prop-types": "^15.7.2",
+        "prop-types-extra": "^1.1.0",
+        "react-overlays": "^1.2.0",
+        "react-transition-group": "^4.0.0",
+        "uncontrollable": "^7.0.0",
+        "warning": "^4.0.3"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+          "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
+        }
+      }
+    },
+    "react-context-toolbox": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-context-toolbox/-/react-context-toolbox-2.0.2.tgz",
+      "integrity": "sha512-tY4j0imkYC3n5ZlYSgFkaw7fmlCp3IoQQ6DxpqeNHzcD0hf+6V+/HeJxviLUZ1Rv1Yn3N3xyO2EhkkZwHn0m1A=="
+    },
     "react-dom": {
       "version": "16.8.6",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz",
@@ -8160,6 +8383,74 @@
         "scheduler": "^0.13.6"
       }
     },
+    "react-overlays": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-1.2.0.tgz",
+      "integrity": "sha512-i/FCV8wR6aRaI+Kz/dpJhOdyx+ah2tN1RhT9InPrexyC4uzf3N4bNayFTGtUeQVacj57j1Mqh1CwV60/5153Iw==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "dom-helpers": "^3.4.0",
+        "prop-types": "^15.6.2",
+        "prop-types-extra": "^1.1.0",
+        "react-context-toolbox": "^2.0.2",
+        "react-popper": "^1.3.2",
+        "uncontrollable": "^6.0.0",
+        "warning": "^4.0.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+          "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
+        },
+        "uncontrollable": {
+          "version": "6.2.3",
+          "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-6.2.3.tgz",
+          "integrity": "sha512-VgOAoBU2ptCL2bfTG2Mra0I8i1u6Aq84AFonD5tmCAYSfs3hWvr2Rlw0q2ntoxXTHjcQOmZOh3FKaN+UZVyREQ==",
+          "requires": {
+            "@babel/runtime": "^7.4.5",
+            "invariant": "^2.2.4"
+          }
+        }
+      }
+    },
+    "react-popper": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.3.tgz",
+      "integrity": "sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "create-react-context": "<=0.2.2",
+        "popper.js": "^1.14.4",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.7",
+        "warning": "^4.0.2"
+      },
+      "dependencies": {
+        "create-react-context": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz",
+          "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==",
+          "requires": {
+            "fbjs": "^0.8.0",
+            "gud": "^1.0.0"
+          }
+        },
+        "typed-styles": {
+          "version": "0.0.7",
+          "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
+          "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
+        }
+      }
+    },
     "react-reconciler": {
       "version": "0.20.4",
       "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.20.4.tgz",
@@ -8183,6 +8474,32 @@
         "scheduler": "^0.13.6"
       }
     },
+    "react-transition-group": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.2.2.tgz",
+      "integrity": "sha512-uP0tjqewtvjb7kGZFpZYPoD/NlVZmIgts9eTt1w35pAaEApPxQGv94lD3VkqyXf2aMqrSGwhs6EV/DLaoKbLSw==",
+      "requires": {
+        "@babel/runtime": "^7.4.5",
+        "dom-helpers": "^3.4.0",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+          "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
+        }
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -8291,8 +8608,7 @@
     "regenerator-runtime": {
       "version": "0.12.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
-      "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==",
+      "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
-      "dev": true
     },
     "regenerator-transform": {
       "version": "0.14.1",
@@ -8563,8 +8879,7 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
-      "dev": true
     },
     "safer-eval": {
       "version": "1.3.5",
@@ -8714,8 +9029,7 @@
     "setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=",
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
-      "dev": true
     },
     "setprototypeof": {
       "version": "1.1.1",
@@ -9732,6 +10046,11 @@
         "prelude-ls": "~1.1.2"
       }
     },
+    "typed-styles": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.5.tgz",
+      "integrity": "sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw=="
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -9744,6 +10063,11 @@
       "integrity": "sha512-ACzBtm/PhXBDId6a6sDJfroT2pOWt/oOnk4/dElG5G33ZL776N3Y6/6bKZJBFpd+b05F3Ct9qDjMeJmRWtE2/g==",
       "dev": true
     },
+    "ua-parser-js": {
+      "version": "0.7.20",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz",
+      "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw=="
+    },
     "uglify-js": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.6.0.tgz",
@@ -9755,6 +10079,30 @@
         "source-map": "~0.6.1"
       }
     },
+    "uncontrollable": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.0.0.tgz",
+      "integrity": "sha512-HFhKHDACiAsTYoV3el/LP4PqcLzqyWrNRHE6nMdr0h8f7qbvTPXIN2S4q+tdfc64PHEXaSFBs/fKVB2+UwSYOA==",
+      "requires": {
+        "@babel/runtime": "^7.4.5",
+        "invariant": "^2.2.4"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+          "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
+        }
+      }
+    },
     "uncss": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/uncss/-/uncss-0.17.0.tgz",
@@ -10140,6 +10488,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
@@ -10164,6 +10520,11 @@
         "iconv-lite": "0.4.24"
       }
     },
+    "whatwg-fetch": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
+      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
+    },
     "whatwg-mimetype": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",

App/package.json

@@ -7,6 +7,7 @@
   },
   "devDependencies": {
     "@types/autoprefixer": "^9.5.0",
+    "@types/bootstrap": "^4.3.1",
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/jest": "^24.0.15",
@@ -14,6 +15,7 @@
     "@types/parcel-bundler": "^1.12.0",
     "@types/prettier": "^1.18.1",
     "@types/react": "^16.8.23",
+    "@types/react-bootstrap": "^0.32.19",
     "@types/react-dom": "^16.8.4",
     "@types/sass": "^1.16.0",
     "autoprefixer": "^9.6.1",
@@ -34,9 +36,11 @@
     "typescript": "^3.5.3"
   },
   "dependencies": {
+    "bootstrap": "^4.3.1",
     "konva": "^4.0.0",
     "normalize.css": "^8.0.1",
     "react": "^16.8.6",
+    "react-bootstrap": "^1.0.0-beta.10",
     "react-dom": "^16.8.6",
     "react-konva": "^16.8.7-3"
   },

App/src/CommandsList.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+export interface ICommandsListProps {
+    gcodeLinesQueue: string[];
+    gcodeLinesSent: string[];
+}
+
+function CommandsListComponent({
+    gcodeLinesQueue,
+    gcodeLinesSent,
+}: ICommandsListProps) {
+    const queuedCommandsList = gcodeLinesQueue.map((el, i) => (
+        <li key={i}>{el}</li>
+    ));
+    const executedCommandsList = gcodeLinesSent.map((el, i) => (
+        <li style={{ color: "green" }} key={i}>
+            {el}
+        </li>
+    ));
+
+    return (
+        <ul style={{ listStyle: "none" }}>
+            {[...executedCommandsList, ...queuedCommandsList]}
+        </ul>
+    );
+}
+
+export const CommandsList = CommandsListComponent;

App/src/GcodeSender.tsx

@@ -2,6 +2,8 @@ import * as React from "react";
 import { IEggbotStatus, getStatus, putCommand } from "~api/eggbot";
 import GcodeVisualiser from "~GcodeVisualiser";
 import { parseCommand } from "~GcodeParser";
+import { CommandsList } from "~CommandsList";
+import { Container, Row, Col } from "react-bootstrap";
 
 interface IGcodeSenderComponentState {
     eggbotStatus: IEggbotStatus | null;
@@ -65,7 +67,6 @@ export class GcodeSenderComponent extends React.PureComponent<
         if (executing && status.commandQueue < 10) {
             if (gcodeLinesQueue && gcodeLinesQueue.length > 0) {
                 const command = gcodeLinesQueue.shift();
-                console.log(parseCommand(command));
                 putCommand(command.substr(0, 50));
                 gcodeLinesSent.push(command);
             }
@@ -77,36 +78,36 @@ export class GcodeSenderComponent extends React.PureComponent<
     render() {
         const { gcodeLinesQueue, gcodeLinesSent } = this.state;
 
-        const queuedCommandsList = gcodeLinesQueue.map(el => <div>{el}</div>);
-
-        const executedCommandsList = gcodeLinesSent.map(el => <div>{el}</div>);
-
         return (
-            <>
+            <Container>
-                <div>
+                <Row>
-                    {this.state.executing ? (
+                    <Col>
-                        <div>
+                        {this.state.executing ? (
-                            <div style={{ color: "green" }}>
+                            <div>
-                                {executedCommandsList}
+                                <CommandsList
+                                    gcodeLinesQueue={gcodeLinesQueue}
+                                    gcodeLinesSent={gcodeLinesSent}
+                                />
                             </div>
-                            <div>{queuedCommandsList}</div>
+                        ) : (
-                        </div>
+                            <div>
-                    ) : (
+                                <textarea
-                        <div>
+                                    name="gcodeInput"
-                            <textarea
+                                    value={this.state.gcodeInput}
-                                name="gcodeInput"
+                                    onChange={this.handleInputChange}
-                                value={this.state.gcodeInput}
+                                />
-                                onChange={this.handleInputChange}
+                                <button onClick={this.handleSend}>send</button>
-                            />
+                            </div>
-                            <button onClick={this.handleSend}>send</button>
+                        )}
-                        </div>
+                    </Col>
-                    )}
+                    <Col>
-                </div>
+                        <GcodeVisualiser
-                <GcodeVisualiser
+                            gcodeLinesQueue={gcodeLinesQueue}
-                    gcodeLinesQueue={gcodeLinesQueue}
+                            gcodeLinesSent={gcodeLinesSent}
-                    gcodeLinesSent={gcodeLinesSent}
+                        />
-                />
+                    </Col>
-            </>
+                </Row>
+            </Container>
         );
     }
 }

App/src/GcodeVisualiser.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Layer, Rect, Stage, Group, Line } from "react-konva";
-import { parseCommand, CommandType } from "~GcodeParser";
+import { parseCommand, CommandType, Command } from "~GcodeParser";
+import { ShapeConfig } from "konva/types/Shape";
 
 interface IGcodeVisualiserProps {
     gcodeLinesSent: string[];
@@ -11,6 +12,44 @@ const mult = 3;
 const width = 500;
 const height = 500;
 
+interface ILastPos {
+    x: number;
+    y: number;
+    eng: boolean;
+}
+
+function cmdToLine(cmds: string, color: string, lastPos: ILastPos) {
+    const command = parseCommand(cmds);
+    if (command.type === CommandType.G00 || command.type === CommandType.G01) {
+        const line = (
+            <Line
+                points={[
+                    lastPos.x * mult,
+                    height - lastPos.y * mult,
+                    (command.X ? command.X : lastPos.x) * mult,
+                    height - (command.Y ? command.Y : lastPos.y) * mult,
+                ]}
+                stroke={(command.Z ? command.Z : lastPos.eng) ? color : "blue"}
+                strokeWidth={(command.Z ? command.Z : lastPos.eng) ? 1 : 0.5}
+            />
+        );
+        if (command.X) {
+            lastPos.x = command.X;
+        }
+        if (command.Y) {
+            lastPos.y = command.Y;
+        }
+        if (command.Z) {
+            if (command.Z >= 0) {
+                lastPos.eng = false;
+            } else {
+                lastPos.eng = true;
+            }
+        }
+        return line;
+    }
+}
+
 export default class GcodeVisualiser extends React.PureComponent<
     IGcodeVisualiserProps,
     {}
@@ -19,98 +58,20 @@ export default class GcodeVisualiser extends React.PureComponent<
         super(props);
     }
     render() {
-        let lastPos: { x: number; y: number; eng: boolean } = {
+        const { gcodeLinesQueue, gcodeLinesSent } = this.props;
+
+        let lastPos: ILastPos = {
             x: 60,
             y: 0,
             eng: false,
         };
 
-        const { gcodeLinesQueue, gcodeLinesSent } = this.props;
-
         const sentLines = gcodeLinesSent.map(sl => {
-            const command = parseCommand(sl);
+            return cmdToLine(sl, "green", lastPos);
-            if (
-                command.type === CommandType.G00 ||
-                command.type === CommandType.G01
-            ) {
-                const line = (
-                    <Line
-                        points={[
-                            lastPos.x * mult,
-                            height - lastPos.y * mult,
-                            (command.X ? command.X : lastPos.x) * mult,
-                            height - (command.Y ? command.Y : lastPos.y) * mult,
-                        ]}
-                        stroke={
-                            (command.Z
-                              ? command.Z
-                              : lastPos.eng)
-                                ? "green"
-                                : "blue"
-                        }
-                        strokeWidth={
-                            (command.Z ? command.Z : lastPos.eng) ? 1 : 0.5
-                        }
-                    />
-                );
-                if (command.X) {
-                    lastPos.x = command.X;
-                }
-                if (command.Y) {
-                    lastPos.y = command.Y;
-                }
-                if (command.Z) {
-                    if (command.Z >= 0) {
-                        lastPos.eng = false;
-                    } else {
-                        lastPos.eng = true;
-                    }
-                }
-                return line;
-            }
         });
 
         const pendLines = gcodeLinesQueue.map(sl => {
-            const command = parseCommand(sl);
+            return cmdToLine(sl, "black", lastPos);
-            if (
-                command.type === CommandType.G00 ||
-                command.type === CommandType.G01
-            ) {
-                const line = (
-                    <Line
-                        points={[
-                            lastPos.x * mult,
-                            height - lastPos.y * mult,
-                            (command.X ? command.X : lastPos.x) * mult,
-                            height - (command.Y ? command.Y : lastPos.y) * mult,
-                        ]}
-                        stroke={
-                            (command.Z
-                              ? command.Z
-                              : lastPos.eng)
-                                ? "black"
-                                : "blue"
-                        }
-                        strokeWidth={
-                            (command.Z ? command.Z : lastPos.eng) ? 1 : 0.5
-                        }
-                    />
-                );
-                if (command.X) {
-                    lastPos.x = command.X;
-                }
-                if (command.Y) {
-                    lastPos.y = command.Y;
-                }
-                if (command.Z) {
-                    if (command.Z >= 0) {
-                        lastPos.eng = false;
-                    } else {
-                        lastPos.eng = true;
-                    }
-                }
-                return line;
-            }
         });
 
         return (

App/src/index.tsx

@@ -1,4 +1,5 @@
 import "normalize.css/normalize.css";
+import "bootstrap/dist/css/bootstrap.min.css";
 
 import * as React from "react";
 import { render } from "react-dom";