introduced yarn workspace

2026-05-01 12:03:58 +00:00 · 2020-02-03 19:43:11 +01:00
parent 56e6777044
commit acf6a1ce74
151 changed files with 1515 additions and 8576 deletions
--- a/packages/web/.eslintrc.js
+++ b/packages/web/.eslintrc.js
@@ -0,0 +1,28 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended"
+    ],
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "react/prop-types": "off",
+        "no-unused-vars": "warn"
+    }
+};
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "@dbgate/web",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "ace-builds": "^1.4.8",
+    "axios": "^0.19.0",
+    "cross-env": "^6.0.3",
+    "eslint": "^6.8.0",
+    "eslint-plugin-react": "^7.17.0",
+    "formik": "^2.1.0",
+    "json-stable-stringify": "^1.0.1",
+    "react": "^16.12.0",
+    "react-ace": "^8.0.0",
+    "react-dom": "^16.12.0",
+    "react-modal": "^3.11.1",
+    "react-scripts": "3.3.0",
+    "resize-observer-polyfill": "^1.5.1",
+    "socket.io-client": "^2.3.0",
+    "styled-components": "^4.4.1",
+    "uuid": "^3.4.0"
+  },
+  "scripts": {
+    "start": "cross-env PORT=5000 react-scripts start",
+    "start:silent": "cross-env BROWSER=none PORT=5000 react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "ts": "tsc"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@fortawesome/fontawesome-free": "^5.12.0",
+    "@dbgate/types": "^0.1.0",
+    "@types/react": "^16.9.17",
+    "@types/styled-components": "^4.4.2",
+    "typescript": "^3.7.4"
+  }
+}
--- a/packages/web/prettier.config.js
+++ b/packages/web/prettier.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  arrowParen: 'avoid',
+  printWidth: 120,
+};
--- a/packages/web/public/favicon.ico
+++ b/packages/web/public/favicon.ico
--- a/packages/web/public/icons/binaryfile.svg
+++ b/packages/web/public/icons/binaryfile.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="548.291px" height="548.291px" viewBox="0 0 548.291 548.291" style="enable-background:new 0 0 548.291 548.291;"
+	 xml:space="preserve">
+<g>
+	<path d="M186.908,266.804c0-11.443-8.735-17.49-24.21-17.49c-7.392,0-11.655,0.452-14.562,0.892v35.195h11.202
+		C177.275,285.401,186.908,278.008,186.908,266.804z"/>
+	<path d="M486.201,196.124h-13.166V132.59c0-0.396-0.062-0.795-0.115-1.196c-0.021-2.523-0.825-5-2.552-6.963L364.651,3.677
+		c-0.032-0.031-0.063-0.042-0.09-0.073c-0.624-0.707-1.364-1.292-2.138-1.795c-0.23-0.157-0.46-0.286-0.701-0.421
+		c-0.673-0.366-1.387-0.671-2.127-0.892c-0.199-0.055-0.373-0.134-0.571-0.188C358.23,0.118,357.39,0,356.556,0H96.757
+		C84.894,0,75.256,9.651,75.256,21.502v174.616H62.09c-16.968,0-30.729,13.756-30.729,30.73v159.812
+		c0,16.968,13.761,30.731,30.729,30.731h13.166V526.79c0,11.854,9.638,21.501,21.501,21.501h354.776
+		c11.853,0,21.501-9.647,21.501-21.501V417.397h13.166c16.966,0,30.729-13.769,30.729-30.736V226.854
+		C516.93,209.874,503.167,196.124,486.201,196.124z M451.534,520.962H96.757V417.397h354.776V520.962z M226.368,332.489
+		c0,13.668-6.284,24.43-15.69,32.052c-10.988,8.735-29.366,13.67-59.403,13.67c-16.813,0-29.365-1.124-36.995-2.247V227.571
+		c8.974-1.796,27.126-3.14,44.166-3.14c20.851,0,33.617,2.016,44.604,8.514c10.536,5.617,18.164,15.917,18.164,29.586
+		c0,13.461-7.848,26.007-24.882,32.297v0.431C213.585,299.983,226.368,312.981,226.368,332.489z M249.699,376.636V225.554h34.295
+		v151.069h-34.295V376.636z M407.291,269.712v-44.158h31.381v151.069h-35.863l-32.272-58.277
+		c-8.967-16.138-18.835-35.646-26.226-53.342l-0.673,0.21c0.893,19.956,1.343,41.258,1.343,65.908v45.501h-31.386V225.554h39.911
+		l31.382,55.362c8.956,15.927,17.921,34.752,24.65,51.791h0.672C407.963,312.75,407.291,292.351,407.291,269.712z M451.534,196.124
+		H96.757V21.502h249.054v110.009c0,5.939,4.817,10.75,10.751,10.75h94.972V196.124z"/>
+	<path d="M159.8,309.841h-11.659v42.584c3.359,0.462,7.391,0.462,13.218,0.462c15.475,0,29.149-5.838,29.149-21.754
+		C190.503,315.889,176.829,309.841,159.8,309.841z"/>
+</g>
+</svg>
--- a/packages/web/public/icons/changeset.svg
+++ b/packages/web/public/icons/changeset.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<rect x="10.667" style="fill:#B7E4F8;" width="380" height="512"/>
+<rect x="202.67" style="fill:#6FC8F1;" width="188" height="512"/>
+<path style="fill:#265D77;" d="M318,185.667H83.334v-30H318V185.667z M254,81H147.333v30H254V81z M330.667,219.667H83.334v30
+	h247.333V219.667z M318,283.667H83.334v30H318V283.667z M246.875,420.333h18.792v-30h-27.875l-21.641,14.427l-23.541-47.082
+	l-29.593,32.654h-27.351v30h40.649l9.074-10.013l19.126,38.252L246.875,420.333z"/>
+<g>
+	<rect x="202.67" y="81" style="fill:#132F3B;" width="51.33" height="30"/>
+	<rect x="202.67" y="155.67" style="fill:#132F3B;" width="115.33" height="30"/>
+	<rect x="202.67" y="283.67" style="fill:#132F3B;" width="115.33" height="30"/>
+	<polygon style="fill:#132F3B;" points="216.151,404.76 202.667,377.793 202.667,444.874 204.516,448.573 246.875,420.333 
+		265.667,420.333 265.667,390.333 237.792,390.333 	"/>
+	<rect x="202.67" y="219.67" style="fill:#132F3B;" width="128" height="30"/>
+</g>
+<polygon style="fill:#FFDB2D;" points="450.141,66.77 264.491,314.199 270.882,359 315.683,352.609 501.333,105.181 "/>
+<polygon style="fill:#FF7B00;" points="264.491,314.199 270.882,359 315.683,352.609 "/>
+<polygon style="fill:#FF4F19;" points="421.913,211.03 501.333,105.181 450.141,66.77 370.72,172.621 421.911,211.031 "/>
+</svg>
--- a/packages/web/public/icons/check.svg
+++ b/packages/web/public/icons/check.svg
@@ -0,0 +1,4 @@
+<?xml version='1.0' encoding='iso-8859-1'?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 44 44">
+  <path d="m22,0c-12.2,0-22,9.8-22,22s9.8,22 22,22 22-9.8 22-22-9.8-22-22-22zm12.7,15.1l0,0-16,16.6c-0.2,0.2-0.4,0.3-0.7,0.3-0.3,0-0.6-0.1-0.7-0.3l-7.8-8.4-.2-.2c-0.2-0.2-0.3-0.5-0.3-0.7s0.1-0.5 0.3-0.7l1.4-1.4c0.4-0.4 1-0.4 1.4,0l.1,.1 5.5,5.9c0.2,0.2 0.5,0.2 0.7,0l13.4-13.9h0.1c0.4-0.4 1-0.4 1.4,0l1.4,1.4c0.4,0.3 0.4,0.9 0,1.3z"/>
+</svg>
--- a/packages/web/public/icons/column.svg
+++ b/packages/web/public/icons/column.svg
@@ -0,0 +1,7 @@
+<?xml version='1.0' encoding='iso-8859-1'?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<g transform="translate(-326-532.36)">
+    <rect width="6" height="15" x="329" y="537.36" fill="#52b6ff" stroke="#4d4d4d" stroke-linejoin="round" stroke-linecap="round" stroke-width=".837" rx=".646"/>   
+    <path d="m507.95 46.02c-1.367-16.368-14.588-30.13-31.21-30.13h-444.96c-16.622 0-29.844 13.762-31.24 30.13h-.54v414.82c0 17.544 14.239 31.782 31.782 31.782h444.95c17.544 0 31.782-14.239 31.782-31.782v-414.82h-.571m-349.04 414.82h-127.13v-95.35h127.13v95.35m0-124.49h-127.13v-97.99h127.13v97.99m0-129.77h-127.13v-95.35h127.13v95.35m158.91 254.26h-127.13v-95.35h127.13v95.35m0-124.49h-127.13v-97.99h127.13v97.99m0-129.77h-127.13v-95.35h127.13v95.35m158.91 254.26h-127.13v-95.35h127.13v95.35m0-124.49h-127.13v-97.99h127.13v97.99m0-129.77h-127.13v-95.35h127.13v95.35" transform="matrix(.03776 0 0 .03776 328.4 534.76)" fill="#4d4d4d"/>
+</g>
+</svg>
--- a/packages/web/public/icons/complexkey.svg
+++ b/packages/web/public/icons/complexkey.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32.787 32.787" style="enable-background:new 0 0 32.787 32.787;" xml:space="preserve">
+<g>
+	<path style="fill:#EFC75E;" d="M21.627,17.145c1.596-1.705,2.195-4.227,1.336-6.564c-0.619-1.678-1.873-2.938-3.391-3.611
+		c0.057-0.33,0.092-0.668,0.092-1.016c0-3.29-2.636-5.954-5.89-5.954S7.886,2.664,7.886,5.953c0,1.25,0.381,2.406,1.031,3.365
+		c-0.942,1.112-1.51,2.543-1.51,4.112c0,2.49,1.431,4.648,3.516,5.699v2.877c0,0,2.263,0.182,2.263,1.568
+		c0,0.963-1.166,1.35-1.833,1.732c-0.293,0.168-0.951,0.525-0.013,1.014c0.504,0.268,1.788,0.586,1.788,1.836
+		c0,1.252-2.084,1.85-2.084,1.85l2.782,2.781l2.801-2.799v-9.93l0.645,1.76c0,0,2.188-0.615,2.666,0.686
+		c0.332,0.904-0.627,1.674-1.121,2.26c-0.217,0.26-0.713,0.824,0.338,0.957c0.564,0.076,1.881-0.066,2.312,1.105
+		c0.432,1.176-1.318,2.455-1.318,2.455l3.572,1.648l1.66-3.594L21.627,17.145z M13.776,0.957c2.729,0,4.939,2.238,4.939,4.996
+		c0,0.236-0.035,0.461-0.066,0.686c-1.232-0.332-2.576-0.307-3.865,0.166c-0.221,0.08-0.428,0.174-0.633,0.273
+		c-0.127-0.006-0.248-0.017-0.375-0.017c-1.596,0-3.048,0.592-4.167,1.561C9.124,7.848,8.833,6.936,8.833,5.953
+		C8.833,3.195,11.046,0.957,13.776,0.957z M15.09,12.66h-2.742c0.016-0.305,0.064-0.604,0.141-0.896
+		c0.412,0.092,0.844,0.146,1.285,0.146c1.383,0,2.65-0.486,3.654-1.291c0.238,0.293,0.432,0.619,0.592,0.963L15.09,12.66z
+		 M14.541,8.928c0.828,0.137,1.584,0.484,2.205,0.996c-0.828,0.633-1.85,1.025-2.971,1.025c-0.328,0-0.645-0.035-0.955-0.098
+		C13.198,10.076,13.78,9.402,14.541,8.928z M11.173,10.186c-0.127-0.082-0.248-0.17-0.369-0.262
+		c0.242-0.199,0.507-0.365,0.785-0.512C11.433,9.66,11.294,9.918,11.173,10.186z M17.942,8.621c-0.156-0.135-0.32-0.264-0.486-0.383
+		c0.215,0.021,0.428,0.053,0.635,0.102C18.039,8.434,17.996,8.533,17.942,8.621z M9.163,12.66c0.146-0.762,0.488-1.455,0.957-2.039
+		c0.229,0.182,0.469,0.348,0.725,0.494c-0.137,0.502-0.213,1.018-0.223,1.545C10.622,12.66,9.163,12.66,9.163,12.66z M19.653,10.982
+		c-0.252-0.611-0.602-1.168-1.021-1.664c0.145-0.209,0.27-0.43,0.385-0.656c0.824,0.385,1.543,0.994,2.033,1.807L19.653,10.982z"/>
+</g>
+</svg>
--- a/packages/web/public/icons/csv.svg
+++ b/packages/web/public/icons/csv.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;" xml:space="preserve">
+<polygon style="fill:#EFEEEE;" points="64,0 64,384 288,384 384,288 384,0 "/>
+<polygon style="fill:#ABABAB;" points="288,288 288,384 384,288 "/>
+<polygon style="fill:#DEDEDD;" points="192,384 288,384 288,288 "/>
+<path style="fill:#448E47;" d="M0,96v112h256V96L0,96L0,96z"/>
+<g>
+	<path style="fill:#FFFFFF;" d="M64.32,130.112c-1.184-2.288-3.344-3.424-6.48-3.424c-1.728,0-3.152,0.464-4.272,1.408
+		c-1.12,0.928-2,2.416-2.64,4.496s-1.088,4.8-1.344,8.176c-0.272,3.36-0.384,7.472-0.384,12.336c0,5.184,0.176,9.376,0.528,12.576
+		c0.336,3.2,0.896,5.664,1.632,7.44s1.664,2.96,2.784,3.552c1.12,0.608,2.416,0.928,3.888,0.928c1.216,0,2.352-0.208,3.408-0.624
+		s1.968-1.248,2.736-2.496c0.784-1.248,1.392-3.008,1.824-5.28c0.448-2.272,0.672-5.264,0.672-8.976H80.48
+		c0,3.696-0.288,7.232-0.864,10.56s-1.664,6.24-3.216,8.736c-1.584,2.48-3.776,4.432-6.624,5.84
+		c-2.848,1.408-6.544,2.128-11.088,2.128c-5.168,0-9.312-0.848-12.368-2.496c-3.072-1.664-5.424-4.064-7.056-7.2
+		s-2.688-6.88-3.168-11.232c-0.464-4.336-0.72-9.152-0.72-14.384c0-5.184,0.256-9.968,0.72-14.352
+		c0.48-4.368,1.552-8.144,3.168-11.28c1.648-3.12,3.984-5.584,7.056-7.344c3.056-1.744,7.2-2.64,12.368-2.64
+		c4.944,0,8.816,0.8,11.664,2.4c2.848,1.6,4.976,3.632,6.368,6.096s2.304,5.12,2.64,7.968c0.352,2.848,0.528,5.52,0.528,8.016H66.08
+		C66.08,136,65.488,132.368,64.32,130.112z"/>
+	<path style="fill:#FFFFFF;" d="M109.072,167.008c0,1.6,0.144,3.056,0.384,4.352c0.272,1.312,0.736,2.416,1.44,3.312
+		c0.704,0.912,1.664,1.616,2.848,2.128c1.168,0.496,2.672,0.768,4.448,0.768c2.128,0,4.016-0.688,5.712-2.064
+		c1.68-1.376,2.544-3.52,2.544-6.384c0-1.536-0.224-2.864-0.624-3.984c-0.416-1.12-1.104-2.128-2.064-3.008
+		c-0.976-0.912-2.24-1.712-3.792-2.448s-3.504-1.488-5.808-2.256c-3.056-1.024-5.712-2.16-7.968-3.376
+		c-2.24-1.2-4.112-2.624-5.616-4.272c-1.504-1.632-2.608-3.52-3.312-5.664c-0.704-2.16-1.056-4.624-1.056-7.456
+		c0-6.784,1.888-11.824,5.664-15.152c3.76-3.328,8.96-4.992,15.552-4.992c3.072,0,5.904,0.336,8.496,1.008s4.832,1.744,6.72,3.264
+		c1.888,1.504,3.36,3.424,4.416,5.744c1.04,2.336,1.584,5.136,1.584,8.4v1.92h-13.232c0-3.264-0.576-5.776-1.712-7.552
+		c-1.152-1.744-3.072-2.64-5.76-2.64c-1.536,0-2.816,0.24-3.84,0.672c-1.008,0.448-1.84,1.04-2.448,1.776s-1.04,1.616-1.264,2.576
+		c-0.24,0.96-0.336,1.952-0.336,2.976c0,2.128,0.448,3.888,1.344,5.328c0.896,1.456,2.816,2.784,5.76,3.984l10.656,4.608
+		c2.624,1.152,4.768,2.352,6.416,3.616c1.664,1.248,3.008,2.592,3.984,4.032c0.992,1.44,1.68,3.008,2.064,4.752
+		c0.384,1.712,0.576,3.648,0.576,5.744c0,7.232-2.096,12.496-6.288,15.792c-4.192,3.296-10.032,4.96-17.52,4.96
+		c-7.808,0-13.392-1.696-16.768-5.088c-3.36-3.392-5.024-8.256-5.024-14.592v-2.784h13.824L109.072,167.008L109.072,167.008z"/>
+	<path style="fill:#FFFFFF;" d="M177.344,168.544h0.304l10.176-50.688h14.32L186.4,186.4h-17.76l-15.728-68.544h14.784
+		L177.344,168.544z"/>
+</g>
+</svg>
--- a/packages/web/public/icons/database.svg
+++ b/packages/web/public/icons/database.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 53 53" style="enable-background:new 0 0 53 53;" xml:space="preserve">
+<path style="fill:#424A60;" d="M50.455,8L50.455,8C49.724,3.538,39.281,0,26.5,0S3.276,3.538,2.545,8l0,0H2.5v0.5V20v0.5V21v11v0.5
+	V33v12h0.045c0.731,4.461,11.175,8,23.955,8s23.224-3.539,23.955-8H50.5V33v-0.5V32V21v-0.5V20V8.5V8H50.455z"/>
+<g>
+	<path style="fill:#424A60;" d="M26.5,41c-13.255,0-24-3.806-24-8.5V45h0.045c0.731,4.461,11.175,8,23.955,8s23.224-3.539,23.955-8
+		H50.5V32.5C50.5,37.194,39.755,41,26.5,41z"/>
+	<path style="fill:#424A60;" d="M2.5,32v0.5c0-0.168,0.018-0.334,0.045-0.5H2.5z"/>
+	<path style="fill:#424A60;" d="M50.455,32c0.027,0.166,0.045,0.332,0.045,0.5V32H50.455z"/>
+</g>
+<g>
+	<path style="fill:#556080;" d="M26.5,29c-13.255,0-24-3.806-24-8.5V33h0.045c0.731,4.461,11.175,8,23.955,8s23.224-3.539,23.955-8
+		H50.5V20.5C50.5,25.194,39.755,29,26.5,29z"/>
+	<path style="fill:#556080;" d="M2.5,20v0.5c0-0.168,0.018-0.334,0.045-0.5H2.5z"/>
+	<path style="fill:#556080;" d="M50.455,20c0.027,0.166,0.045,0.332,0.045,0.5V20H50.455z"/>
+</g>
+<ellipse style="fill:#7FABDA;" cx="26.5" cy="8.5" rx="24" ry="8.5"/>
+<g>
+	<path style="fill:#7383BF;" d="M26.5,17c-13.255,0-24-3.806-24-8.5V21h0.045c0.731,4.461,11.175,8,23.955,8s23.224-3.539,23.955-8
+		H50.5V8.5C50.5,13.194,39.755,17,26.5,17z"/>
+	<path style="fill:#7383BF;" d="M2.5,8v0.5c0-0.168,0.018-0.334,0.045-0.5H2.5z"/>
+	<path style="fill:#7383BF;" d="M50.455,8C50.482,8.166,50.5,8.332,50.5,8.5V8H50.455z"/>
+</g>
+</svg>
--- a/packages/web/public/icons/diagram.svg
+++ b/packages/web/public/icons/diagram.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve">
+<g>
+	<rect x="28" y="17" style="fill:#556080;" width="2" height="24"/>
+	<polygon style="fill:#556080;" points="52,41 50,41 50,30 8,30 8,41 6,41 6,28 52,28 	"/>
+	<rect y="41" style="fill:#F0C419;" width="14" height="14"/>
+	<rect x="44" y="41" style="fill:#F18D46;" width="14" height="14"/>
+	<rect x="22" y="41" style="fill:#F29C1F;" width="14" height="14"/>
+	<rect x="22" y="3" style="fill:#0096E6;" width="14" height="14"/>
+</g>
+</svg>
--- a/packages/web/public/icons/down_circle.svg
+++ b/packages/web/public/icons/down_circle.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 54 54" style="enable-background:new 0 0 54 54;" xml:space="preserve">
+<g>
+	<g>
+		<path style="fill:#9B507E;" d="M27,1L27,1c14.359,0,26,11.641,26,26v0c0,14.359-11.641,26-26,26h0C12.641,53,1,41.359,1,27v0
+			C1,12.641,12.641,1,27,1z"/>
+		<path style="fill:#9B507E;" d="M27,54C12.112,54,0,41.888,0,27S12.112,0,27,0s27,12.112,27,27S41.888,54,27,54z M27,2
+			C13.215,2,2,13.215,2,27s11.215,25,25,25s25-11.215,25-25S40.785,2,27,2z"/>
+	</g>
+	<path style="fill:#FFFFFF;" d="M27,40.5c-0.552,0-1-0.447-1-1v-26c0-0.553,0.448-1,1-1s1,0.447,1,1v26
+		C28,40.053,27.552,40.5,27,40.5z"/>
+	<polygon style="fill:#FFFFFF;" points="27,41.914 16.293,31.207 17.707,29.793 27,39.086 36.293,29.793 37.707,31.207 	"/>
+</g>
+</svg>
--- a/packages/web/public/icons/excel.svg
+++ b/packages/web/public/icons/excel.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#ECEFF1;" d="M496,432.011H272c-8.832,0-16-7.168-16-16s0-311.168,0-320s7.168-16,16-16h224
+	c8.832,0,16,7.168,16,16v320C512,424.843,504.832,432.011,496,432.011z"/>
+<g>
+	<path style="fill:#388E3C;" d="M336,176.011h-64c-8.832,0-16-7.168-16-16s7.168-16,16-16h64c8.832,0,16,7.168,16,16
+		S344.832,176.011,336,176.011z"/>
+	<path style="fill:#388E3C;" d="M336,240.011h-64c-8.832,0-16-7.168-16-16s7.168-16,16-16h64c8.832,0,16,7.168,16,16
+		S344.832,240.011,336,240.011z"/>
+	<path style="fill:#388E3C;" d="M336,304.011h-64c-8.832,0-16-7.168-16-16s7.168-16,16-16h64c8.832,0,16,7.168,16,16
+		S344.832,304.011,336,304.011z"/>
+	<path style="fill:#388E3C;" d="M336,368.011h-64c-8.832,0-16-7.168-16-16s7.168-16,16-16h64c8.832,0,16,7.168,16,16
+		S344.832,368.011,336,368.011z"/>
+	<path style="fill:#388E3C;" d="M432,176.011h-32c-8.832,0-16-7.168-16-16s7.168-16,16-16h32c8.832,0,16,7.168,16,16
+		S440.832,176.011,432,176.011z"/>
+	<path style="fill:#388E3C;" d="M432,240.011h-32c-8.832,0-16-7.168-16-16s7.168-16,16-16h32c8.832,0,16,7.168,16,16
+		S440.832,240.011,432,240.011z"/>
+	<path style="fill:#388E3C;" d="M432,304.011h-32c-8.832,0-16-7.168-16-16s7.168-16,16-16h32c8.832,0,16,7.168,16,16
+		S440.832,304.011,432,304.011z"/>
+	<path style="fill:#388E3C;" d="M432,368.011h-32c-8.832,0-16-7.168-16-16s7.168-16,16-16h32c8.832,0,16,7.168,16,16
+		S440.832,368.011,432,368.011z"/>
+</g>
+<path style="fill:#2E7D32;" d="M282.208,19.691c-3.648-3.04-8.544-4.352-13.152-3.392l-256,48C5.472,65.707,0,72.299,0,80.011v352
+	c0,7.68,5.472,14.304,13.056,15.712l256,48c0.96,0.192,1.952,0.288,2.944,0.288c3.712,0,7.328-1.28,10.208-3.68
+	c3.68-3.04,5.792-7.584,5.792-12.32v-448C288,27.243,285.888,22.731,282.208,19.691z"/>
+<path style="fill:#FAFAFA;" d="M220.032,309.483l-50.592-57.824l51.168-65.792c5.44-6.976,4.16-17.024-2.784-22.464
+	c-6.944-5.44-16.992-4.16-22.464,2.784l-47.392,60.928l-39.936-45.632c-5.856-6.72-15.968-7.328-22.56-1.504
+	c-6.656,5.824-7.328,15.936-1.504,22.56l44,50.304L83.36,310.187c-5.44,6.976-4.16,17.024,2.784,22.464
+	c2.944,2.272,6.432,3.36,9.856,3.36c4.768,0,9.472-2.112,12.64-6.176l40.8-52.48l46.528,53.152
+	c3.168,3.648,7.584,5.504,12.032,5.504c3.744,0,7.488-1.312,10.528-3.968C225.184,326.219,225.856,316.107,220.032,309.483z"/>
+</svg>
--- a/packages/web/public/icons/foreignkey.svg
+++ b/packages/web/public/icons/foreignkey.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
+<polygon style="fill:#BEC8D6;" points="294.884,265.574 0.073,511.855 0.206,445.392 230.678,214.921 "/>
+<path style="fill:#A2A9AF;" d="M468.441,43.486c-57.97-57.982-151.973-57.982-209.955,0
+	c-46.383,46.383-55.652,115.83-27.808,171.434c6.94,13.892,16.221,26.934,27.808,38.521L0.073,511.855l128.873,0.146v-62.677h62.689
+	v-62.689h62.677v-62.677l42.695-42.707c55.616,27.844,125.051,18.575,171.434-27.808C526.423,195.46,526.423,101.468,468.441,43.486
+	z M427.974,147.443c-17.53,17.53-45.954,17.53-63.485,0c-17.53-17.53-17.53-45.954,0-63.485c17.53-17.53,45.955-17.53,63.485,0
+	C445.505,101.489,445.505,129.912,427.974,147.443z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/packages/web/public/icons/function.svg
+++ b/packages/web/public/icons/function.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="142.514px" height="142.514px" viewBox="0 0 142.514 142.514" style="enable-background:new 0 0 142.514 142.514;"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M34.367,142.514c11.645,0,17.827-10.4,19.645-16.544c0.029-0.097,0.056-0.196,0.081-0.297
+			c4.236-17.545,10.984-45.353,15.983-65.58h17.886c3.363,0,6.09-2.726,6.09-6.09c0-3.364-2.727-6.09-6.09-6.09H73.103
+			c1.6-6.373,2.771-10.912,3.232-12.461l0.512-1.734c1.888-6.443,6.309-21.535,13.146-21.535c6.34,0,7.285,9.764,7.328,10.236
+			c0.27,3.343,3.186,5.868,6.537,5.579c3.354-0.256,5.864-3.187,5.605-6.539C108.894,14.036,104.087,0,89.991,0
+			C74.03,0,68.038,20.458,65.159,30.292l-0.49,1.659c-0.585,1.946-2.12,7.942-4.122,15.962H39.239c-3.364,0-6.09,2.726-6.09,6.09
+			c0,3.364,2.726,6.09,6.09,6.09H57.53c-6.253,25.362-14.334,58.815-15.223,62.498c-0.332,0.965-2.829,7.742-7.937,7.742
+			c-7.8,0-11.177-10.948-11.204-11.03c-0.936-3.229-4.305-5.098-7.544-4.156c-3.23,0.937-5.092,4.314-4.156,7.545
+			C13.597,130.053,20.816,142.514,34.367,142.514z"/>
+		<path d="M124.685,126.809c3.589,0,6.605-2.549,6.605-6.607c0-1.885-0.754-3.586-2.359-5.474l-12.646-14.534l12.271-14.346
+			c1.132-1.416,1.98-2.926,1.98-4.908c0-3.59-2.927-6.231-6.703-6.231c-2.547,0-4.527,1.604-6.229,3.684l-9.531,12.454L98.73,78.391
+			c-1.89-2.357-3.869-3.682-6.7-3.682c-3.59,0-6.607,2.551-6.607,6.609c0,1.885,0.756,3.586,2.357,5.471l11.799,13.592
+			L86.647,115.67c-1.227,1.416-1.98,2.926-1.98,4.908c0,3.589,2.926,6.229,6.699,6.229c2.549,0,4.53-1.604,6.229-3.682l10.19-13.4
+			l10.193,13.4C119.872,125.488,121.854,126.809,124.685,126.809z"/>
+	</g>
+</g>
+</svg>
--- a/packages/web/public/icons/home.svg
+++ b/packages/web/public/icons/home.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 414.789 414.789" style="enable-background:new 0 0 414.789 414.789;" xml:space="preserve">
+<g>
+	<path style="fill:none;" d="M78.279,144.455v216.821h80.21V232.593c0-6.627,5.373-12,12-12h73.814c6.627,0,12,5.373,12,12v128.683
+		h80.209v-216.82L207.395,56.083L78.279,144.455z"/>
+	<rect x="182.488" y="244.593" style="fill:#73D0F4;" width="49.814" height="116.683"/>
+	<polygon style="fill:#73D0F4;" points="302.067,91.796 336.512,115.373 336.512,57.883 302.067,57.883 	"/>
+	<path style="fill:#3D6889;" d="M409.566,165.374l-49.054-33.574V45.883c0-6.627-5.373-12-12-12h-58.445c-6.628,0-12,5.373-12,12
+		v29.487c0,0-62.987-43.156-63.812-43.731c-3.974-2.769-9.405-2.899-13.638,0L5.223,165.374c-5.469,3.743-6.868,11.211-3.125,16.68
+		c2.325,3.397,6.086,5.224,9.914,5.224c2.335,0,4.695-0.68,6.767-2.099l35.499-24.297v212.394c0,6.627,5.373,12,12,12h282.233
+		c6.627,0,12-5.373,12-12V160.881l35.499,24.297c2.073,1.419,4.432,2.099,6.767,2.099c3.827,0,7.589-1.827,9.914-5.224
+		C416.434,176.585,415.035,169.117,409.566,165.374z M232.303,361.276h-49.814V244.593h49.814V361.276z M336.512,361.276h-80.209
+		V232.593c0-6.627-5.373-12-12-12h-73.814c-6.627,0-12,5.373-12,12v128.683h-80.21V144.455l129.117-88.372l129.117,88.373V361.276z
+		 M336.512,115.373l-34.445-23.576V57.883h34.445V115.373z"/>
+</g>
+</svg>
--- a/packages/web/public/icons/index.svg
+++ b/packages/web/public/icons/index.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 511.997 511.997" style="enable-background:new 0 0 511.997 511.997;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M456.026,263.284h-12.068l-0.004-163.922c0-23.114-18.805-41.919-41.919-41.919H257.599
+			c-9.513,0-17.909-5.721-21.387-14.577l-6.394-16.276C223.47,10.437,208.157,0,190.801,0h-80.84
+			C86.847,0,68.043,18.805,68.043,41.919v199.268c0,5.23,4.239,9.47,9.47,9.47c5.231,0,9.47-4.24,9.47-9.47v-57.711
+			c0-12.667,10.305-22.974,22.972-22.974h80.849c9.509,0,17.905,5.724,21.386,14.574l6.392,16.285
+			c6.353,16.142,21.667,26.572,39.012,26.572h144.438c12.651,0,22.944,10.272,22.984,22.914v22.434H55.971
+			c-5.231,0-9.47,4.24-9.47,9.47v180.565c0,5.23,4.239,9.47,9.47,9.47c5.231,0,9.47-4.24,9.47-9.47V282.222h381.114v210.835H65.442
+			v-12.382c0-5.23-4.239-9.47-9.47-9.47c-5.231,0-9.47,4.24-9.47,9.47v21.852c0,5.23,4.239,9.47,9.47,9.47h400.055
+			c5.231,0,9.47-4.24,9.47-9.47V272.755C465.496,267.525,461.257,263.284,456.026,263.284z M425.014,135.111
+			c-6.605-4.346-14.502-6.884-22.984-6.884h-23.126c-5.231,0-9.47,4.24-9.47,9.47c0,5.23,4.239,9.47,9.47,9.47h23.126
+			c12.651,0,22.944,10.267,22.984,22.9v35.814c-6.605-4.346-14.501-6.885-22.982-6.885H257.594c-9.508,0-17.904-5.719-21.385-14.56
+			l-6.391-16.282c-6.35-16.152-21.664-26.591-39.013-26.591h-80.849c-8.478,0-16.37,2.538-22.972,6.883v-35.751
+			c0-12.667,10.305-22.974,22.972-22.974h80.849c9.509,0,17.905,5.724,21.386,14.574l6.391,16.282
+			c6.35,16.152,21.664,26.59,39.012,26.59h92.691c5.231,0,9.47-4.24,9.47-9.47c0-5.23-4.239-9.47-9.47-9.47h-92.691
+			c-9.509,0-17.904-5.723-21.385-14.574l-6.391-16.282c-6.35-16.152-21.664-26.591-39.013-26.591h-80.849
+			c-8.478,0-16.37,2.538-22.972,6.883V41.919c0-12.67,10.307-22.979,22.977-22.979h80.84c9.513,0,17.909,5.721,21.388,14.577
+			l6.394,16.276c6.345,16.154,21.66,26.591,39.015,26.591h144.438c12.67,0,22.979,10.309,22.979,22.979V135.111z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M229.348,425.75l-12.811-29.44c-0.01-0.024-0.02-0.048-0.032-0.072l-23.212-53.337c-1.504-3.456-4.914-5.691-8.684-5.691
+			c-3.768,0-7.18,2.236-8.684,5.691l-23.208,53.33c-0.013,0.029-0.025,0.057-0.037,0.085l-12.81,29.435
+			c-2.087,4.796,0.109,10.376,4.904,12.463c1.229,0.537,2.512,0.789,3.773,0.789c3.655,0,7.137-2.129,8.689-5.693l10.388-23.87
+			h33.968l10.388,23.87c2.086,4.796,7.665,6.99,12.463,4.904C229.24,436.126,231.436,430.546,229.348,425.75z M175.867,390.499
+			l8.742-20.086l8.74,20.086H175.867z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M367.134,402.066c-4.815-2.037-10.374,0.215-12.411,5.033c-3.331,7.874-11.007,12.963-19.555,12.963
+			c-11.701,0-21.221-9.519-21.221-21.221v-22.394c0-11.703,9.519-21.221,21.22-21.221c7.061,0,13.641,3.5,17.601,9.363
+			c2.926,4.334,8.816,5.473,13.148,2.546c4.335-2.928,5.474-8.815,2.547-13.148c-7.489-11.083-19.935-17.699-33.296-17.699
+			c-22.145,0-40.161,18.016-40.161,40.16v22.394c0,22.145,18.016,40.161,40.161,40.161c16.176,0,30.699-9.627,37-24.525
+			C374.203,409.66,371.949,404.104,367.134,402.066z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M271.911,380.623h-25.254c-5.231,0-9.47,4.24-9.47,9.47c0,5.23,4.239,9.47,9.47,9.47h25.254c5.231,0,9.47-4.24,9.47-9.47
+			C281.381,384.863,277.143,380.623,271.911,380.623z"/>
+	</g>
+</g>
+</svg>
--- a/packages/web/public/icons/link.svg
+++ b/packages/web/public/icons/link.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
+<g>
+	<path style="fill:#6FC5D6;" d="M82.972,269.94l-50.16,50.16c-43.749,43.749-43.749,115.338,0,159.088s115.338,43.749,159.088,0
+		l50.16-50.16c43.749-43.749,43.749-115.338,0-159.088S126.722,226.191,82.972,269.94z M210.243,397.211l-50.16,50.16
+		c-26.316,26.316-69.137,26.316-95.453,0c-26.316-26.316-26.316-69.137,0-95.453l50.16-50.16c26.316-26.316,69.137-26.316,95.453,0
+		C236.559,328.074,236.559,370.894,210.243,397.211z"/>
+	<path style="fill:#6FC5D6;" d="M320.101,32.812l-50.16,50.16c-43.749,43.749-43.749,115.338,0,159.088s115.338,43.749,159.088,0
+		l50.16-50.16c43.749-43.749,43.749-115.338,0-159.088S363.85-10.937,320.101,32.812z M447.371,160.083l-50.16,50.16
+		c-26.316,26.316-69.137,26.316-95.453,0c-26.316-26.316-26.316-69.137,0-95.453l50.16-50.16c26.316-26.316,69.137-26.316,95.453,0
+		C473.688,90.946,473.688,133.766,447.371,160.083z"/>
+</g>
+<path style="fill:#609399;" d="M357.449,186.369c8.786-8.787,8.786-23.032,0-31.817c-8.787-8.787-23.032-8.787-31.817,0
+	c-0.588,0.588-170.654,170.654-171.081,171.081c-8.787,8.787-8.787,23.032,0,31.817c8.786,8.786,23.032,8.787,31.817,0
+	C186.776,357.043,356.833,186.986,357.449,186.369z"/>
+</svg>
--- a/packages/web/public/icons/linkedserver.svg
+++ b/packages/web/public/icons/linkedserver.svg
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512.002 512.002" style="enable-background:new 0 0 512.002 512.002;" xml:space="preserve">
+<path style="fill:#A5DC69;" d="M156.038,502.001h-16c-11.046,0-20-8.954-20-20l0,0c0-11.046,8.954-20,20-20h16
+	c11.046,0,20,8.954,20,20l0,0C176.038,493.047,167.084,502.001,156.038,502.001z"/>
+<g>
+	<polygon style="fill:#F5B955;" points="502.001,25.027 445.479,25.027 439.108,10.001 383.812,10.001 377.441,25.027 
+		362.001,25.027 362.001,130.001 502.001,130.001 	"/>
+	<polygon style="fill:#F5B955;" points="502.001,173.027 445.479,173.027 439.108,158.001 383.812,158.001 377.441,173.027 
+		362.001,173.027 362.001,278.001 502.001,278.001 	"/>
+	<polygon style="fill:#F5B955;" points="502.001,325.001 445.479,325.001 439.108,309.976 383.812,309.976 377.441,325.001 
+		362.001,325.001 362.001,429.976 502.001,429.976 	"/>
+</g>
+<path style="fill:#78D2FA;" d="M286.077,218.001L286.077,218.001c0,30.928-25.072,56-56,56H66c-30.928,0-56-25.072-56-56l0,0
+	c0-30.928,25.072-56,56-56h164.077C261.005,162.001,286.077,187.074,286.077,218.001z"/>
+<path style="fill:#AAE6FF;" d="M286.077,106.001L286.077,106.001c0,30.928-25.072,56-56,56H66c-30.928,0-56-25.072-56-56l0,0
+	c0-30.928,25.072-56,56-56h164.077C261.005,50.001,286.077,75.074,286.077,106.001z"/>
+<path style="fill:#4BB9F5;" d="M286.077,330.001L286.077,330.001c0,30.928-25.072,56-56,56H66c-30.928,0-56-25.072-56-56l0,0
+	c0-30.928,25.072-56,56-56h164.077C261.005,274.001,286.077,299.074,286.077,330.001z"/>
+<path d="M465.668,472.001h-281.35c-3.915-11.038-14.116-19.121-26.28-19.926v-56.074h49.014v33.975c0,5.522,4.478,10,10,10h109.282
+	c5.522,0,10-4.478,10-10s-4.478-10-10-10h-99.282v-23.975h3.025c36.393,0,66-29.607,66-66c0-23.597-12.456-44.33-31.13-56
+	c15.43-9.643,26.599-25.476,30.017-44h31.37c5.522,0,10-4.478,10-10s-4.478-10-10-10h-30.759c-2.458-20.235-14.098-37.67-30.628-48
+	c18.674-11.67,31.13-32.403,31.13-56c0-36.393-29.607-66-66-66h-3.025v-20h59.025c5.522,0,10-4.478,10-10s-4.478-10-10-10h-69.025
+	c-5.522,0-10,4.478-10,10v30H66c-36.393,0-66,29.608-66,66c0,23.597,12.456,44.33,31.13,56C12.456,173.672,0,194.404,0,218.001
+	s12.456,44.33,31.13,56C12.456,285.672,0,306.404,0,330.001c0,36.393,29.607,66,66,66h72.038v56.074
+	c-12.163,0.805-22.365,8.887-26.28,19.926H10.001c-5.522,0-10,4.478-10,10s4.478,10,10,10h101.757c4.128,11.639,15.243,20,28.28,20
+	h16c13.036,0,24.152-8.361,28.28-20h281.35c5.522,0,10-4.478,10-10S471.19,472.001,465.668,472.001z M20,106.001
+	c0-25.364,20.636-46,46-46h164.077c25.364,0,46,20.636,46,46s-20.636,46-46,46H66C40.636,152.001,20,131.366,20,106.001z
+	 M20,218.001c0-25.364,20.636-46,46-46h164.077c25.364,0,46,20.636,46,46s-20.636,46-46,46H66C40.636,264.001,20,243.366,20,218.001
+	z M20,330.001c0-25.364,20.636-46,46-46h164.077c25.364,0,46,20.636,46,46s-20.636,46-46,46H66
+	C40.636,376.001,20,355.366,20,330.001z M156.038,492.001h-16c-5.514,0-10-4.486-10-10s4.486-10,10-10h16c5.514,0,10,4.486,10,10
+	S161.552,492.001,156.038,492.001z"/>
+<path d="M502.001,472.001c-2.63,0-5.21,1.069-7.07,2.93s-2.93,4.44-2.93,7.07s1.069,5.21,2.93,7.069
+	c1.86,1.86,4.44,2.931,7.07,2.931s5.21-1.07,7.069-2.931c1.86-1.859,2.931-4.439,2.931-7.069s-1.07-5.21-2.931-7.07
+	C507.211,473.071,504.631,472.001,502.001,472.001z"/>
+<path d="M502.001,15.027h-49.899l-3.787-8.929c-1.567-3.696-5.192-6.097-9.207-6.097h-55.297c-4.015,0-7.64,2.4-9.207,6.097
+	l-3.786,8.929h-8.817c-5.522,0-10,4.478-10,10v104.974c0,5.522,4.478,10,10,10h140c5.522,0,10-4.478,10-10V25.027
+	C512.001,19.504,507.523,15.027,502.001,15.027z M492.001,120.001h-120V35.027h5.439c4.015,0,7.64-2.4,9.207-6.097l3.787-8.929
+	h42.053l3.786,8.929c1.567,3.696,5.192,6.097,9.207,6.097h46.521V120.001z"/>
+<path d="M502.001,163.027h-49.899l-3.787-8.929c-1.566-3.696-5.191-6.097-9.206-6.097h-55.297c-4.015,0-7.64,2.4-9.207,6.097
+	l-3.786,8.929h-8.817c-5.522,0-10,4.478-10,10v104.974c0,5.522,4.478,10,10,10h140c5.522,0,10-4.478,10-10V173.027
+	C512.001,167.504,507.523,163.027,502.001,163.027z M492.001,268.001h-120v-84.975h5.439c4.015,0,7.64-2.4,9.207-6.097l3.786-8.929
+	h42.053l3.786,8.929c1.567,3.696,5.192,6.097,9.207,6.097H492L492.001,268.001L492.001,268.001z"/>
+<path d="M502.001,315.001h-49.899l-3.787-8.929c-1.566-3.696-5.191-6.097-9.206-6.097h-55.297c-4.015,0-7.64,2.4-9.207,6.097
+	l-3.787,8.929h-8.817c-5.522,0-10,4.478-10,10v104.975c0,5.522,4.478,10,10,10h140c5.522,0,10-4.478,10-10V325.001
+	C512.001,319.479,507.523,315.001,502.001,315.001z M492.001,419.976h-120v-84.975h5.439c4.015,0,7.64-2.4,9.207-6.097l3.786-8.929
+	h42.053l3.786,8.929c1.567,3.696,5.192,6.097,9.207,6.097H492L492.001,419.976L492.001,419.976z"/>
+<path d="M241.884,332.001c0-5.522-4.478-10-10-10h-29.665c-5.522,0-10,4.478-10,10s4.478,10,10,10h29.665
+	C237.406,342.001,241.884,337.524,241.884,332.001z"/>
+<path d="M110.171,322.001c-2.63,0-5.21,1.069-7.07,2.93c-1.859,1.86-2.93,4.44-2.93,7.07s1.07,5.21,2.93,7.069
+	c1.86,1.86,4.44,2.931,7.07,2.931c2.64,0,5.21-1.07,7.07-2.931c1.869-1.859,2.939-4.439,2.939-7.069s-1.07-5.21-2.939-7.07
+	C115.381,323.071,112.811,322.001,110.171,322.001z"/>
+<path d="M156.291,322.001c-2.641,0-5.21,1.069-7.07,2.93s-2.93,4.44-2.93,7.07s1.069,5.21,2.93,7.069
+	c1.86,1.86,4.43,2.931,7.07,2.931c2.63,0,5.21-1.07,7.069-2.931c1.86-1.859,2.931-4.439,2.931-7.069s-1.07-5.21-2.931-7.07
+	C161.501,323.071,158.921,322.001,156.291,322.001z"/>
+<path d="M71.001,322.001c-2.63,0-5.21,1.069-7.07,2.93s-2.93,4.44-2.93,7.07s1.069,5.21,2.93,7.069c1.86,1.86,4.44,2.931,7.07,2.931
+	s5.21-1.07,7.069-2.931c1.86-1.859,2.931-4.439,2.931-7.069s-1.07-5.21-2.931-7.07C76.211,323.071,73.631,322.001,71.001,322.001z"
+	/>
+<path d="M241.884,220.001c0-5.522-4.478-10-10-10h-29.665c-5.522,0-10,4.478-10,10s4.478,10,10,10h29.665
+	C237.406,230.001,241.884,225.524,241.884,220.001z"/>
+<path d="M110.171,210.001c-2.63,0-5.21,1.069-7.07,2.93c-1.859,1.86-2.93,4.44-2.93,7.07s1.07,5.21,2.93,7.069
+	c1.86,1.86,4.44,2.931,7.07,2.931c2.64,0,5.21-1.07,7.07-2.931c1.869-1.859,2.939-4.439,2.939-7.069s-1.07-5.21-2.939-7.07
+	C115.381,211.071,112.811,210.001,110.171,210.001z"/>
+<path d="M156.291,210.001c-2.641,0-5.21,1.069-7.07,2.93s-2.93,4.44-2.93,7.07s1.069,5.21,2.93,7.069
+	c1.86,1.86,4.43,2.931,7.07,2.931c2.63,0,5.21-1.07,7.069-2.931c1.86-1.859,2.931-4.439,2.931-7.069s-1.07-5.21-2.931-7.07
+	C161.501,211.071,158.921,210.001,156.291,210.001z"/>
+<path d="M71.001,210.001c-2.63,0-5.21,1.069-7.07,2.93s-2.93,4.44-2.93,7.07s1.069,5.21,2.93,7.069c1.86,1.86,4.44,2.931,7.07,2.931
+	s5.21-1.07,7.069-2.931c1.86-1.859,2.931-4.439,2.931-7.069s-1.07-5.21-2.931-7.07C76.211,211.071,73.631,210.001,71.001,210.001z"
+	/>
+<path d="M241.884,108.001c0-5.522-4.478-10-10-10h-29.665c-5.522,0-10,4.478-10,10s4.478,10,10,10h29.665
+	C237.406,118.001,241.884,113.524,241.884,108.001z"/>
+<path d="M110.171,98.001c-2.63,0-5.21,1.069-7.07,2.93c-1.859,1.86-2.93,4.44-2.93,7.07s1.07,5.21,2.93,7.069
+	c1.86,1.86,4.44,2.931,7.07,2.931c2.64,0,5.21-1.07,7.07-2.931c1.869-1.859,2.939-4.439,2.939-7.069s-1.07-5.21-2.939-7.07
+	C115.381,99.071,112.811,98.001,110.171,98.001z"/>
+<path d="M71.001,98.001c-2.63,0-5.21,1.069-7.07,2.93s-2.93,4.44-2.93,7.07s1.069,5.21,2.93,7.069c1.86,1.86,4.44,2.931,7.07,2.931
+	s5.21-1.07,7.069-2.931c1.86-1.859,2.931-4.439,2.931-7.069s-1.07-5.21-2.931-7.07C76.211,99.071,73.631,98.001,71.001,98.001z"/>
+<path d="M156.291,98.001c-2.641,0-5.21,1.069-7.07,2.93s-2.93,4.44-2.93,7.07s1.069,5.21,2.93,7.069
+	c1.86,1.86,4.43,2.931,7.07,2.931c2.63,0,5.21-1.07,7.069-2.931c1.86-1.859,2.931-4.439,2.931-7.069s-1.07-5.21-2.931-7.07
+	C161.501,99.071,158.921,98.001,156.291,98.001z"/>
+<path d="M326.331,20.001c2.63,0,5.21-1.07,7.069-2.931c1.87-1.859,2.931-4.439,2.931-7.069s-1.061-5.21-2.931-7.07
+	c-1.859-1.86-4.43-2.93-7.069-2.93c-2.63,0-5.21,1.069-7.07,2.93s-2.93,4.44-2.93,7.07s1.069,5.21,2.93,7.069
+	C321.121,18.931,323.701,20.001,326.331,20.001z"/>
+</svg>
--- a/packages/web/public/icons/localdb.svg
+++ b/packages/web/public/icons/localdb.svg
@@ -0,0 +1,218 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg3961"
+   sodipodi:docname="SQLite_icon.svg"
+   viewBox="0 0 384.29 511.43"
+   version="1.1"
+   inkscape:version="0.91+devel r">
+  <defs
+     id="defs3963">
+    <linearGradient
+       id="linearGradient3807">
+      <stop
+         id="stop3809"
+         style="stop-color:#e3e3e3"
+         offset="0" />
+      <stop
+         id="stop3811"
+         style="stop-color:#66647b;stop-opacity:.89804"
+         offset="1" />
+    </linearGradient>
+    <radialGradient
+       id="radialGradient4100"
+       xlink:href="#linearGradient3807"
+       gradientUnits="userSpaceOnUse"
+       cy="287.71"
+       cx="376.02"
+       gradientTransform="matrix(1.0132 -.0097151 .0035796 .37336 -19.591 188.17)"
+       r="182.64"
+       inkscape:collect="always" />
+    <linearGradient
+       id="linearGradient4656"
+       y2="362.36"
+       xlink:href="#linearGradient3807"
+       spreadMethod="reflect"
+       gradientUnits="userSpaceOnUse"
+       x2="559.07"
+       gradientTransform="translate(-13.571 7.8572)"
+       y1="362.36"
+       x1="425.67"
+       inkscape:collect="always" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     fit-margin-left="10"
+     inkscape:zoom="1.4"
+     borderopacity="1.0"
+     inkscape:current-layer="layer1"
+     inkscape:cx="175.35756"
+     inkscape:cy="244.5418"
+     inkscape:snap-page="true"
+     inkscape:window-maximized="1"
+     showgrid="false"
+     fit-margin-right="10"
+     inkscape:document-units="px"
+     bordercolor="#666666"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     fit-margin-bottom="10"
+     inkscape:window-width="1920"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     pagecolor="#ffffff"
+     inkscape:window-height="1026"
+     fit-margin-top="10" />
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     transform="translate(-173.57 -219.51)">
+    <use
+       id="use3823"
+       xlink:href="#path2985"
+       transform="translate(-7.1429e-7 320)"
+       height="1052.3622"
+       width="744.09448"
+       y="0"
+       x="0" />
+    <use
+       id="use3825"
+       xlink:href="#path2997"
+       transform="translate(-7.1429e-7 320)"
+       height="1052.3622"
+       width="744.09448"
+       y="0"
+       x="0" />
+    <use
+       id="use3827"
+       xlink:href="#path2985"
+       transform="translate(-7.1429e-7 240)"
+       height="1052.3622"
+       width="744.09448"
+       y="0"
+       x="0" />
+    <use
+       id="use3829"
+       xlink:href="#path2997"
+       transform="translate(-7.1429e-7 240)"
+       height="1052.3622"
+       width="744.09448"
+       y="0"
+       x="0" />
+    <use
+       id="use3819"
+       xlink:href="#path2985"
+       transform="translate(-7.1429e-7 160)"
+       height="1052.3622"
+       width="744.09448"
+       y="0"
+       x="0" />
+    <use
+       id="use3821"
+       xlink:href="#path2997"
+       transform="translate(-7.1429e-7 160)"
+       height="1052.3622"
+       width="744.09448"
+       y="0"
+       x="0" />
+    <use
+       id="use3815"
+       xlink:href="#path2985"
+       transform="translate(-7.1429e-7 80)"
+       height="1052.3622"
+       width="744.09448"
+       y="0"
+       x="0" />
+    <use
+       id="use3817"
+       xlink:href="#path2997"
+       transform="translate(-7.1429e-7 80)"
+       height="1052.3622"
+       width="744.09448"
+       y="0"
+       x="0" />
+    <path
+       id="path2985"
+       style="fill:url(#radialGradient4100)"
+       inkscape:connector-curvature="0"
+       d="m547.86 290.22c0 33.532-81.548 60.714-182.14 60.714s-182.14-27.183-182.14-60.714c0-33.532 81.548-60.714 182.14-60.714s182.14 27.183 182.14 60.714z" />
+    <path
+       id="path2997"
+       sodipodi:nodetypes="csccscc"
+       style="fill:url(#linearGradient4656)"
+       inkscape:connector-curvature="0"
+       d="m183.57 289.51c0 33.532 81.548 60.714 182.14 60.714s182.14-27.183 182.14-60.714v50c0 33.532-81.548 60.714-182.14 60.714s-182.14-27.183-182.14-60.714z" />
+    <g
+       id="g3419"
+       style="fill:#4169e1;stroke:#000000;stroke-width:1">
+      <path
+         id="path3788"
+         transform="translate(173.57,219.51)"
+         d="M 217.65625 450.10742 C 215.93645 450.18783 214.21142 450.26384 212.47656 450.32812 C 223.24311 464.16776 239.51158 483.93775 254.13867 497.09961 C 254.46836 497.05983 254.8001 497.02282 255.12891 496.98242 C 253.76883 495.32573 252.42462 493.65328 251.09766 491.95898 C 239.51106 477.96136 228.32382 464.00992 217.65625 450.10742 z "
+         clip-path="none"
+         style="fill:#4169e1;stroke:#000000;stroke-width:1" />
+      <path
+         id="path3363"
+         transform="translate(173.57,219.51)"
+         d="M 119.80078 365.72656 C 121.0841 367.69951 122.39311 369.65582 123.74023 371.58984 C 123.74023 371.58984 144.70881 362.84584 166.99023 380.73438 C 146.71285 369.61954 129.83789 379.89844 129.83789 379.89844 C 132.21004 382.9832 134.67015 386.01165 137.2207 388.97852 C 137.39532 388.63543 152.10589 377.271 171.65625 388.91211 C 147.5148 385.08603 141.86133 393.94141 141.86133 393.94141 C 145.9468 398.40005 150.04862 402.76147 154.57031 406.9082 C 154.57031 406.9082 168.09175 406.51745 186.11719 420.66406 C 188.12144 420.68582 190.12051 420.71484 192.14062 420.71484 C 193.38846 420.71484 194.61947 420.69192 195.86133 420.68359 C 183.76419 403.67177 172.65277 386.74516 162.79492 369.91797 C 147.76614 369.10623 133.35826 367.68486 119.80078 365.72656 z M 175.84766 370.45898 C 184.92922 387.02829 194.85511 403.73434 205.35938 420.53711 C 205.85551 420.52523 206.35068 420.5132 206.8457 420.5 C 198.03823 397.00483 196.99238 380.90319 198.17578 370.66406 C 196.16766 370.6859 194.16467 370.71484 192.14062 370.71484 C 186.64547 370.71484 181.21896 370.61782 175.84766 370.45898 z "
+         clip-path="none"
+         style="fill:#4169e1;stroke:#000000;stroke-width:1" />
+      <path
+         id="path3365"
+         transform="translate(173.57,219.51)"
+         d="M 84.451172 278.23633 C 88.409747 296.77919 94.068267 314.82448 101.60742 331.95508 C 115.26883 334.5698 130.02438 336.61687 145.61719 337.98633 C 137.06446 320.44149 130.10243 303.0172 125.07227 285.72656 C 110.51953 283.80352 96.882285 281.27978 84.451172 278.23633 z M 138.17578 287.2832 C 143.94106 304.30258 151.2057 321.56299 159.61523 339.00977 C 164.39784 339.29733 169.23017 339.53484 174.13477 339.69531 C 177.44391 312.66054 188.02734 310.16602 188.02734 310.16602 C 186.23126 303.64008 184.48948 296.79646 182.95898 289.91602 C 167.44031 289.65916 152.43405 288.75556 138.17578 287.2832 z M 192.24414 324.66406 C 192.24414 324.66406 184.35929 325.70627 178.42188 339.80469 C 182.95579 339.91736 187.5203 339.99414 192.14062 339.99414 C 193.82275 339.99414 195.48507 339.96628 197.15625 339.95117 C 195.65871 335.48876 193.98974 330.36844 192.24414 324.66406 z "
+         clip-path="none"
+         style="fill:#4169e1;stroke:#000000;stroke-width:1" />
+      <path
+         id="path3367"
+         transform="translate(173.57,219.51)"
+         d="M 80.242188 197.16602 C 78.025256 214.57911 77.979722 232.42315 79.423828 246.95117 C 91.245913 250.06137 104.24367 252.69314 118.17188 254.75977 C 115.61191 237.88981 115.12938 221.15995 117.01562 204.58594 C 103.8436 202.59459 91.51548 200.09725 80.242188 197.16602 z M 123.25781 205.48828 C 123.24485 222.09441 125.39084 239.04596 129.33398 256.28711 C 144.76246 258.17645 161.18567 259.36937 178.25 259.79883 C 176.64736 243.96701 175.70429 226.55082 174.08398 209.69336 C 156.25724 209.10845 139.19972 207.66144 123.25781 205.48828 z "
+         clip-path="none"
+         style="fill:#4169e1;stroke:#000000;stroke-width:1" />
+      <path
+         id="path3369"
+         transform="translate(173.57,219.51)"
+         d="M 127.29883 128.06836 C 121.76882 127.98226 116.79011 129.16013 112.33203 131.37109 L 112.32812 131.36133 C 99.981302 137.48455 91.593152 151.55092 86.244141 168.66211 C 97.56887 171.36538 109.84613 173.65105 122.90039 175.44141 C 125.21817 167.53747 128.11496 159.67135 131.66406 151.8457 C 129.05467 159.73393 127.08829 167.72491 125.71289 175.81055 C 139.7022 177.63867 154.52738 178.90432 169.95508 179.5293 C 164.28616 150.55301 153.14025 128.47194 127.29883 128.06836 z "
+         clip-path="none"
+         style="fill:#4169e1;stroke:#000000;stroke-width:1" />
+    </g>
+  </g>
+  <metadata
+     id="metadata29">
+    <rdf:RDF>
+      <cc:Work>
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <cc:license
+           rdf:resource="http://creativecommons.org/licenses/publicdomain/" />
+        <dc:publisher>
+          <cc:Agent
+             rdf:about="http://openclipart.org/">
+            <dc:title>Openclipart</dc:title>
+          </cc:Agent>
+        </dc:publisher>
+        <dc:title></dc:title>
+      </cc:Work>
+      <cc:License
+         rdf:about="http://creativecommons.org/licenses/publicdomain/">
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Reproduction" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Distribution" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
+      </cc:License>
+    </rdf:RDF>
+  </metadata>
+</svg>
--- a/packages/web/public/icons/microsoft.svg
+++ b/packages/web/public/icons/microsoft.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 291.346 291.346" style="enable-background:new 0 0 291.346 291.346;" xml:space="preserve">
+<g>
+	<path style="fill:#26A6D1;" d="M117.547,266.156L0,249.141v-94.296h117.547V266.156z"/>
+	<path style="fill:#3DB39E;" d="M291.346,136.51H136.31l0.055-114.06L291.346,0.009V136.51z"/>
+	<path style="fill:#F4B459;" d="M291.346,291.337l-155.091-22.459l0.182-114.015h154.909V291.337z"/>
+	<path style="fill:#E2574C;" d="M117.547,136.51H0V42.205l117.547-17.024V136.51z"/>
+</g>
+</svg>
--- a/packages/web/public/icons/mysql.svg
+++ b/packages/web/public/icons/mysql.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#F2F2F2;" d="M512,256c0,36.937-7.826,72.056-21.911,103.769c-2.288,5.183-4.765,10.271-7.387,15.266
+	C439.85,456.474,354.408,512,256,512c-103.685,0-192.972-61.639-233.221-150.277c-7.022-15.464-12.549-31.744-16.394-48.661
+	C2.205,294.713,0,275.613,0,256C0,114.615,114.615,0,256,0c115.012,0,212.302,75.839,244.611,180.245
+	c1.024,3.323,1.985,6.687,2.884,10.073v0.01c1.672,6.332,3.114,12.737,4.305,19.247c0.554,3.03,1.055,6.071,1.494,9.132
+	c0.303,2.048,0.585,4.096,0.825,6.165c0.46,3.699,0.825,7.429,1.118,11.18C511.739,242.636,512,249.292,512,256z"/>
+<g>
+	<path style="fill:#5181A2;" d="M367.961,77.614c0,0,7.42,7.632,8.691,13.355c0,0,5.3-4.028,1.696-10.387
+		C374.744,74.222,367.961,77.614,367.961,77.614z"/>
+	<path style="fill:#5181A2;" d="M503.495,190.318c-6.666-3.354-12.727-5.339-17.471-6.51c-6.416-1.588-11.609-6.311-13.855-12.528
+		c-2.884-7.973-8.255-20.888-18.139-40.458c-19.508-38.578-41.127-50.448-55.327-60.416c-9.32-6.541-21.567-7.868-28.881-8.014
+		c-3.688-0.073-7.241-1.421-10.073-3.793c-7.45-6.269-22.1-13.636-26.76-10.877c-5.726,3.396,0,11.243,8.046,21.201
+		c8.056,9.968,9.759,20.992,15.475,35.83c2.644,6.844,5.831,10.982,8.485,13.448c2.779,2.591,3.688,6.614,2.215,10.104
+		c-5.371,12.696-7.168,28.776-4.127,43.645c3.605,17.596,11.87,17.387,11.87,17.387c-0.846-23.531,11.452-33.708,11.452-33.708
+		c11.233,34.335,36.885,59.988,36.885,59.988c-20.773-7.419-36.247-41.336-36.247-41.336s-1.693,1.693-3.177,12.936
+		c-1.484,11.233-15.057,18.014-25.015-6.572c-9.968-24.597,2.967-55.547,2.967-55.547c-5.726-2.968-17.596-30.312-17.596-34.555
+		c0-4.232-4.671-13.563-10.386-19.289c-5.726-5.716-16.959-22.256-3.814-29.884c13.134-7.638,39.215,12.925,39.215,12.925
+		c41.127-1.484,83.519,48.546,90.3,66.351c6.781,17.805,25.861,53.426,25.861,53.426c5.413,1.641,10.501,3.762,15.214,6.175
+		C501.635,183.568,502.596,186.932,503.495,190.318z"/>
+	<path style="fill:#5181A2;" d="M511.237,236.053c-0.209-0.094-0.408-0.199-0.606-0.293c-13.145-6.363-18.442-19.717-18.442-19.717
+		c3.406-3.406,9.446-5.36,15.611-6.468c0.554,3.03,1.055,6.071,1.494,9.132c-2.299,0.449-3.751,0.721-3.751,0.721
+		c0,1.296,1.808,3.229,4.577,5.444C510.579,228.571,510.945,232.302,511.237,236.053z"/>
+</g>
+<g>
+	<path style="fill:#FFA600;" d="M133.371,374.659H113.34c0,0,0-45.777-6.677-100.153L75.18,374.659H58.964l-31.953-99.673
+		c0,0-3.72,29.288-4.232,86.737c-7.022-15.464-12.549-31.744-16.394-48.661c1.473-21.264,3.542-44.44,6.322-63.352h26.07
+		l29.727,92.526l31.483-92.526h23.845C123.831,249.71,133.371,331.264,133.371,374.659z"/>
+	<path style="fill:#FFA600;" d="M144.423,283.452l20.668-0.318c0,0,23.212,69.637,20.987,78.222c0,0,14.945-41.655,18.761-78.222
+		h20.35c0,0-10.812,73.771-43.88,112.564c-12.375,14.517-26.262,14.695-38.799,9.236v-11.143c0,0,17.177,6.042,26.081-6.678
+		c7.168-10.24,0.322-27.898-5.938-46.671C161.135,335.896,144.423,283.452,144.423,283.452z"/>
+</g>
+<g>
+	<path style="fill:#5181A2;" d="M237.908,365.491l5.405-10.812c0,0,37.204,16.534,46.742,0c9.539-16.534,0.318-25.438-18.442-35.296
+		c-18.76-9.858-38.475-22.258-29.89-49.287c8.586-27.028,54.056-25.12,67.093-12.083l-4.451,10.493c0,0-33.705-14.309-42.926,4.451
+		c-9.221,18.76,15.263,27.664,20.987,30.208c5.724,2.544,37.521,15.58,34.024,38.793s-17.807,37.521-50.558,34.659
+		C254.124,373.758,247.447,371.85,237.908,365.491z"/>
+	<path style="fill:#5181A2;" d="M405.452,367c14.054-11.295,20.083-31.389,20.083-54.293c0-35.328-10.167-63.969-50.333-63.969
+		c-34.586,0-50.333,28.641-50.333,63.969s11.515,63.969,50.333,63.969c5.622,0,10.721-0.7,15.318-2.017l29.905,17.544l7.314-14.315
+		L405.452,367z M375.202,361.357c-22.507,0-29.184-21.786-29.184-48.65c0-26.875,6.363-48.65,29.184-48.65
+		c23.28,0,29.174,21.776,29.174,48.65C404.375,339.571,398.482,361.357,375.202,361.357z"/>
+	<path style="fill:#5181A2;" d="M490.088,359.769c-2.288,5.183-4.765,10.271-7.387,15.266h-39.382V250.378h19.717v109.39H490.088z"
+		/>
+</g>
+</svg>
--- a/packages/web/public/icons/postgresql.svg
+++ b/packages/web/public/icons/postgresql.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg width="432.071pt" height="445.383pt" viewBox="0 0 432.071 445.383" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
+<g id="orginal" style="fill-rule:nonzero;clip-rule:nonzero;stroke:#000000;stroke-miterlimit:4;">
+	</g>
+<g id="Layer_x0020_3" style="fill-rule:nonzero;clip-rule:nonzero;fill:none;stroke:#FFFFFF;stroke-width:12.4651;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;">
+<path style="fill:#000000;stroke:#000000;stroke-width:37.3953;stroke-linecap:butt;stroke-linejoin:miter;" d="M323.205,324.227c2.833-23.601,1.984-27.062,19.563-23.239l4.463,0.392c13.517,0.615,31.199-2.174,41.587-7c22.362-10.376,35.622-27.7,13.572-23.148c-50.297,10.376-53.755-6.655-53.755-6.655c53.111-78.803,75.313-178.836,56.149-203.322    C352.514-5.534,262.036,26.049,260.522,26.869l-0.482,0.089c-9.938-2.062-21.06-3.294-33.554-3.496c-22.761-0.374-40.032,5.967-53.133,15.904c0,0-161.408-66.498-153.899,83.628c1.597,31.936,45.777,241.655,98.47,178.31    c19.259-23.163,37.871-42.748,37.871-42.748c9.242,6.14,20.307,9.272,31.912,8.147l0.897-0.765c-0.281,2.876-0.157,5.689,0.359,9.019c-13.572,15.167-9.584,17.83-36.723,23.416c-27.457,5.659-11.326,15.734-0.797,18.367c12.768,3.193,42.305,7.716,62.268-20.224    l-0.795,3.188c5.325,4.26,4.965,30.619,5.72,49.452c0.756,18.834,2.017,36.409,5.856,46.771c3.839,10.36,8.369,37.05,44.036,29.406c29.809-6.388,52.6-15.582,54.677-101.107"/>
+<path style="fill:#336791;stroke:none;" d="M402.395,271.23c-50.302,10.376-53.76-6.655-53.76-6.655c53.111-78.808,75.313-178.843,56.153-203.326c-52.27-66.785-142.752-35.2-144.262-34.38l-0.486,0.087c-9.938-2.063-21.06-3.292-33.56-3.496c-22.761-0.373-40.026,5.967-53.127,15.902    c0,0-161.411-66.495-153.904,83.63c1.597,31.938,45.776,241.657,98.471,178.312c19.26-23.163,37.869-42.748,37.869-42.748c9.243,6.14,20.308,9.272,31.908,8.147l0.901-0.765c-0.28,2.876-0.152,5.689,0.361,9.019c-13.575,15.167-9.586,17.83-36.723,23.416    c-27.459,5.659-11.328,15.734-0.796,18.367c12.768,3.193,42.307,7.716,62.266-20.224l-0.796,3.188c5.319,4.26,9.054,27.711,8.428,48.969c-0.626,21.259-1.044,35.854,3.147,47.254c4.191,11.4,8.368,37.05,44.042,29.406c29.809-6.388,45.256-22.942,47.405-50.555    c1.525-19.631,4.976-16.729,5.194-34.28l2.768-8.309c3.192-26.611,0.507-35.196,18.872-31.203l4.463,0.392c13.517,0.615,31.208-2.174,41.591-7c22.358-10.376,35.618-27.7,13.573-23.148z"/>
+<path d="M215.866,286.484c-1.385,49.516,0.348,99.377,5.193,111.495c4.848,12.118,15.223,35.688,50.9,28.045c29.806-6.39,40.651-18.756,45.357-46.051c3.466-20.082,10.148-75.854,11.005-87.281"/>
+<path d="M173.104,38.256c0,0-161.521-66.016-154.012,84.109c1.597,31.938,45.779,241.664,98.473,178.316c19.256-23.166,36.671-41.335,36.671-41.335"/>
+<path d="M260.349,26.207c-5.591,1.753,89.848-34.889,144.087,34.417c19.159,24.484-3.043,124.519-56.153,203.329"/>
+<path style="stroke-linejoin:bevel;" d="M348.282,263.953c0,0,3.461,17.036,53.764,6.653c22.04-4.552,8.776,12.774-13.577,23.155c-18.345,8.514-59.474,10.696-60.146-1.069c-1.729-30.355,21.647-21.133,19.96-28.739c-1.525-6.85-11.979-13.573-18.894-30.338    c-6.037-14.633-82.796-126.849,21.287-110.183c3.813-0.789-27.146-99.002-124.553-100.599c-97.385-1.597-94.19,119.762-94.19,119.762"/>
+<path d="M188.604,274.334c-13.577,15.166-9.584,17.829-36.723,23.417c-27.459,5.66-11.326,15.733-0.797,18.365c12.768,3.195,42.307,7.718,62.266-20.229c6.078-8.509-0.036-22.086-8.385-25.547c-4.034-1.671-9.428-3.765-16.361,3.994z"/>
+<path d="M187.715,274.069c-1.368-8.917,2.93-19.528,7.536-31.942c6.922-18.626,22.893-37.255,10.117-96.339c-9.523-44.029-73.396-9.163-73.436-3.193c-0.039,5.968,2.889,30.26-1.067,58.548c-5.162,36.913,23.488,68.132,56.479,64.938"/>
+<path style="fill:#FFFFFF;stroke-width:4.155;stroke-linecap:butt;stroke-linejoin:miter;" d="M172.517,141.7c-0.288,2.039,3.733,7.48,8.976,8.207c5.234,0.73,9.714-3.522,9.998-5.559c0.284-2.039-3.732-4.285-8.977-5.015c-5.237-0.731-9.719,0.333-9.996,2.367z"/>
+<path style="fill:#FFFFFF;stroke-width:2.0775;stroke-linecap:butt;stroke-linejoin:miter;" d="M331.941,137.543c0.284,2.039-3.732,7.48-8.976,8.207c-5.238,0.73-9.718-3.522-10.005-5.559c-0.277-2.039,3.74-4.285,8.979-5.015c5.239-0.73,9.718,0.333,10.002,2.368z"/>
+<path d="M350.676,123.432c0.863,15.994-3.445,26.888-3.988,43.914c-0.804,24.748,11.799,53.074-7.191,81.435"/>
+<path style="stroke-width:3;" d="M0,60.232"/>
+</g>
+</svg>
--- a/packages/web/public/icons/primarykey.svg
+++ b/packages/web/public/icons/primarykey.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 280.062 280.062" style="enable-background:new 0 0 280.062 280.062;" xml:space="preserve">
+<g>
+	<path style="fill:#EFC75E;" d="M262.797,219.065c-1.636-1.505-17.773-0.464-17.773-0.464l-0.184-17.073l-7.893-9.022l-18.709-0.306
+		l-0.018-0.026l0,0c-0.079,0.254-0.009-18.779-0.009-18.779l-8.733-6.327c0,0-16.985-0.499-17.125-0.63l-1.365-17.449
+		l-15.725-18.613c5.434-11.726,8.567-24.756,8.567-38.539c0-50.711-41.147-91.823-91.901-91.823C41.147,0.004,0,41.116,0,91.827
+		c0,50.72,41.147,91.84,91.91,91.84c14.08,0,27.373-3.264,39.3-8.926L235.739,279.9c0,0,44.253,0.122,44.253,0.105l0.07-44.664
+		C280.062,235.341,273.114,228.568,262.797,219.065z M74.374,96.378c-12.032,0-21.781-9.81-21.781-21.912
+		s9.748-21.921,21.781-21.921s21.79,9.818,21.79,21.921S86.406,96.378,74.374,96.378z"/>
+	<path style="fill:#CA9F30;" d="M74.391,43.767c-16.915,0-30.628,13.713-30.628,30.628s13.713,30.628,30.628,30.628
+		c16.924,0,30.628-13.713,30.628-30.628S91.315,43.767,74.391,43.767z M74.391,87.522c-7.246,0-13.126-5.881-13.126-13.126
+		c0-7.254,5.881-13.126,13.126-13.126c7.246,0,13.126,5.872,13.126,13.126C87.517,81.641,81.637,87.522,74.391,87.522z"/>
+	<path style="fill:#CA9F30;" d="M152.239,161.011c-8.357,7.281-18.027,13.03-28.624,16.942l103.916,102.096h43.754L152.239,161.011z
+		"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/packages/web/public/icons/procedure.svg
+++ b/packages/web/public/icons/procedure.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path d="M496,200h-47.944c-4.084-13.958-9.683-27.427-16.696-40.168l33.944-33.936c6.246-6.248,6.246-16.376,0-22.624
+				l-56.568-56.576c-6.248-6.246-16.376-6.246-22.624,0L352.16,80.64c-12.735-7.016-26.203-12.613-40.16-16.688V16
+				c0-8.837-7.163-16-16-16h-80c-8.837,0-16,7.163-16,16v47.952c-13.957,4.08-27.424,9.679-40.16,16.696l-33.944-33.952
+				c-6.248-6.246-16.376-6.246-22.624,0l-56.576,56.576c-6.241,6.247-6.241,16.369,0,22.616l33.944,33.944
+				C73.625,172.571,68.029,186.041,63.952,200H16c-8.837,0-16,7.163-16,16v80c0,8.837,7.163,16,16,16h47.952
+				c4.075,13.957,9.672,27.425,16.688,40.16l-33.944,33.952c-6.246,6.248-6.246,16.376,0,22.624l56.568,56.568
+				c6.248,6.246,16.376,6.246,22.624,0l33.944-33.944c12.741,7.013,26.21,12.612,40.168,16.696V496c0,8.837,7.163,16,16,16h80
+				c8.837,0,16-7.163,16-16v-47.944c13.958-4.084,27.427-9.683,40.168-16.696l33.944,33.944c6.248,6.246,16.376,6.246,22.624,0
+				l56.568-56.568c6.246-6.248,6.246-16.376,0-22.624l-33.944-33.944c7.014-12.74,12.613-26.21,16.696-40.168H496
+				c8.837,0,16-7.163,16-16v-80C512,207.163,504.837,200,496,200z M496,296h-54.048c-3.664,0.003-6.858,2.495-7.752,6.048
+				c-4.298,16.657-10.929,32.623-19.696,47.424c-1.86,3.142-1.356,7.145,1.224,9.728l38.264,38.224l-56.568,56.568l-38.264-38.264
+				c-2.583-2.58-6.586-3.084-9.728-1.224c-14.804,8.762-30.769,15.392-47.424,19.696c-3.537,0.909-6.01,4.099-6.008,7.752V496h-80
+				v-54.048c0.003-3.65-2.466-6.839-6-7.752c-16.659-4.301-32.627-10.931-47.432-19.696c-1.229-0.732-2.633-1.119-4.064-1.12
+				c-2.124-0.002-4.162,0.842-5.664,2.344l-38.264,38.264l-56.568-56.568l38.264-38.264c2.583-2.581,3.09-6.584,1.232-9.728
+				c-8.767-14.803-15.403-30.768-19.712-47.424c-0.909-3.535-4.094-6.006-7.744-6.008H16v-80h54.048
+				c3.647-0.001,6.832-2.469,7.744-6c4.306-16.659,10.942-32.628,19.712-47.432c1.858-3.144,1.351-7.147-1.232-9.728l-38.264-38.264
+				l56.568-56.568l38.264,38.264c2.581,2.583,6.584,3.09,9.728,1.232c14.804-8.77,30.773-15.406,47.432-19.712
+				c3.531-0.912,5.999-4.097,6-7.744V16h80v54.048c0.007,3.661,2.497,6.851,6.048,7.744c16.656,4.309,32.621,10.945,47.424,19.712
+				c3.144,1.858,7.147,1.351,9.728-1.232l38.224-38.264l56.568,56.568l-38.264,38.264c-2.58,2.583-3.084,6.586-1.224,9.728
+				c8.765,14.805,15.395,30.773,19.696,47.432c0.913,3.534,4.102,6.003,7.752,6H496V296z"/>
+			<path d="M256,104c-83.909,0.093-151.907,68.091-152,152h16c0.084-75.076,60.924-135.916,136-136V104z"/>
+			<path d="M256,392v16c83.909-0.093,151.907-68.091,152-152h-16C391.916,331.076,331.076,391.916,256,392z"/>
+			<path d="M336,328V192c0-21.984-41.472-32-80-32s-80,10.016-80,32v136c0,21.984,41.472,32,80,32S336,349.984,336,328z M256,176
+				c41.992,0,64,11.888,64,16s-22,16-64,16s-64-11.888-64-16S214,176,256,176z M192,212.225C207.596,220.224,232.351,224,256,224
+				s48.404-3.776,64-11.775V256c0,4.112-22,16-64,16s-64-11.888-64-16V212.225z M192,328v-51.775
+				C207.596,284.224,232.351,288,256,288s48.404-3.776,64-11.775V328c0,4.112-22,16-64,16S192,332.112,192,328z"/>
+		</g>
+	</g>
+</g>
+</svg>
--- a/packages/web/public/icons/procedure2.svg
+++ b/packages/web/public/icons/procedure2.svg
@@ -0,0 +1,133 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#36A1CB;" d="M498.643,214.92h-22.5c-2.126-11.474-5.132-22.638-8.937-33.426l19.469-11.241
+	c6.387-3.689,8.576-11.856,4.89-18.245l-27.724-48.019c-3.689-6.389-11.856-8.577-18.245-4.888l-19.514,11.268
+	c-7.513-8.764-15.687-16.939-24.452-24.45l11.267-19.515c3.689-6.388,1.5-14.556-4.89-18.245l-48.017-27.724
+	c-6.389-3.689-14.556-1.5-18.246,4.888l-11.242,19.469c-10.786-3.805-21.95-6.811-33.424-8.938V13.357
+	C297.08,5.98,291.1,0,283.724,0h-55.447C220.9,0,214.92,5.98,214.92,13.357v22.499c-11.474,2.128-22.637,5.132-33.424,8.938
+	l-11.242-19.469c-3.688-6.388-11.856-8.577-18.246-4.888l-48.017,27.724c-6.389,3.688-8.578,11.857-4.89,18.245l11.267,19.514
+	c-8.765,7.511-16.939,15.686-24.45,24.45L66.404,99.102c-6.387-3.688-14.556-1.499-18.246,4.89l-27.721,48.019
+	c-3.689,6.388-1.5,14.557,4.887,18.245l19.469,11.241c-3.804,10.788-6.811,21.951-8.937,33.425h-22.5
+	C5.98,214.922,0,220.901,0,228.279v55.445c0,7.378,5.98,13.357,13.357,13.357h22.5c2.126,11.474,5.132,22.639,8.937,33.426
+	l-19.469,11.24c-6.387,3.689-8.576,11.858-4.887,18.245l27.721,48.02c3.689,6.389,11.858,8.576,18.246,4.89l19.515-11.267
+	c7.511,8.763,15.685,16.939,24.448,24.45l-11.265,19.513c-3.688,6.389-1.5,14.559,4.89,18.246l48.018,27.724
+	c6.389,3.689,14.559,1.5,18.246-4.89l11.242-19.467c10.786,3.804,21.95,6.808,33.424,8.937v22.498
+	c0,7.376,5.98,13.357,13.357,13.357h55.447c7.376,0,13.357-5.98,13.357-13.357v-22.5c11.474-2.128,22.637-5.132,33.426-8.937
+	l11.24,19.467c3.69,6.389,11.856,8.578,18.246,4.89l48.018-27.724c6.389-3.688,8.578-11.856,4.89-18.244l-11.265-19.515
+	c8.763-7.511,16.939-15.687,24.45-24.45l19.513,11.267c6.389,3.688,14.556,1.498,18.245-4.89l27.724-48.02
+	c3.688-6.387,1.498-14.556-4.89-18.244l-19.469-11.242c3.804-10.786,6.811-21.953,8.937-33.426h22.499
+	c7.376,0,13.357-5.978,13.357-13.357v-55.445C512,220.899,506.02,214.92,498.643,214.92z M377.744,331.725l-16.539,21.638
+	c-26.213,28.302-63.676,46.047-105.204,46.047c-79.076,0-143.409-64.333-143.409-143.409s64.333-143.409,143.409-143.409
+	S399.409,176.924,399.409,256C399.409,283.778,391.472,309.736,377.744,331.725z"/>
+<path style="fill:#1D89BF;" d="M256,432.8c-97.487,0-176.8-79.313-176.8-176.8c0-97.488,79.313-176.8,176.8-176.8
+	c97.489,0,176.8,79.312,176.8,176.8C432.8,353.487,353.489,432.8,256,432.8z M377.744,331.725
+	c13.728-21.989,21.665-47.947,21.665-75.725c0-79.076-64.333-143.409-143.409-143.409S112.592,176.924,112.592,256
+	s64.333,143.409,143.409,143.409c41.529,0,78.992-17.744,105.204-46.047"/>
+<path style="opacity:0.1;fill:#F5F5F5;enable-background:new    ;" d="M498.643,214.92h-22.5
+	c-2.126-11.474-5.132-22.638-8.937-33.426l19.469-11.241c6.387-3.689,8.576-11.856,4.89-18.245l-27.724-48.019
+	c-3.689-6.389-11.856-8.577-18.245-4.888l-19.514,11.268c-7.513-8.764-15.687-16.939-24.452-24.45l11.267-19.515
+	c3.689-6.388,1.5-14.556-4.89-18.245l-48.017-27.724c-6.389-3.689-14.556-1.5-18.246,4.888l-11.242,19.469
+	c-10.786-3.805-21.95-6.811-33.424-8.938V13.357c0-0.109-0.013-0.214-0.016-0.322C241.84,37.26,197.76,82.174,174.632,137.978
+	c23.135-16,51.174-25.387,81.368-25.387c79.076,0,143.409,64.333,143.409,143.409c0,27.778-7.937,53.736-21.665,75.725
+	l-16.539,21.638c-26.213,28.302-63.676,46.047-105.204,46.047c-9.123,0-18.046-0.866-26.701-2.503
+	c42.04,40.164,99.007,64.833,161.74,64.833c6.919,0,13.763-0.318,20.529-0.906c3.493-4.178,4.212-10.248,1.329-15.236
+	l-11.265-19.515c8.763-7.511,16.939-15.687,24.45-24.45l19.513,11.267c6.389,3.688,14.556,1.498,18.245-4.89l27.724-48.02
+	c3.688-6.387,1.498-14.556-4.89-18.244l-19.469-11.242c3.804-10.786,6.811-21.953,8.937-33.426h22.501
+	c7.376,0,13.357-5.978,13.357-13.357v-55.445C512,220.899,506.02,214.92,498.643,214.92z"/>
+<path style="fill:#36A1CB;" d="M315.15,253.233c-0.013-0.28-0.032-0.559-0.05-0.838c-0.039-0.653-0.087-1.304-0.148-1.952
+	c-0.028-0.298-0.057-0.595-0.088-0.892c-0.076-0.702-0.166-1.399-0.266-2.094c-0.028-0.203-0.052-0.407-0.083-0.609
+	c-0.138-0.889-0.297-1.772-0.473-2.648c-0.041-0.199-0.088-0.396-0.13-0.594c-0.146-0.682-0.302-1.361-0.47-2.035
+	c-0.069-0.275-0.141-0.55-0.214-0.824c-0.167-0.627-0.344-1.248-0.53-1.865c-0.073-0.244-0.145-0.488-0.221-0.73
+	c-0.037-0.122-0.072-0.247-0.111-0.368l-0.029-0.048c-2.948-9.101-8.034-17.238-14.675-23.814l-0.013-0.022
+	c-0.308-0.304-0.63-0.593-0.945-0.89c-0.333-0.315-0.66-0.636-0.998-0.943c-0.354-0.319-0.72-0.624-1.081-0.936
+	c-0.356-0.306-0.707-0.618-1.07-0.916c-0.363-0.299-0.741-0.583-1.111-0.875c-0.374-0.292-0.741-0.589-1.121-0.872
+	c-0.38-0.283-0.77-0.549-1.155-0.823c-0.387-0.274-0.769-0.554-1.163-0.819c-0.388-0.26-0.788-0.506-1.182-0.759
+	c-0.404-0.258-0.805-0.523-1.215-0.772c-0.397-0.239-0.805-0.462-1.207-0.693c-0.422-0.242-0.839-0.491-1.269-0.723
+	c-0.407-0.22-0.825-0.423-1.239-0.634c-0.435-0.223-0.866-0.452-1.308-0.664c-0.422-0.203-0.854-0.386-1.28-0.58
+	c-0.444-0.2-0.885-0.408-1.335-0.599c-0.433-0.183-0.876-0.346-1.316-0.519c-0.455-0.179-0.906-0.366-1.366-0.534
+	c-0.45-0.164-0.909-0.308-1.365-0.462c-0.46-0.155-0.914-0.319-1.377-0.462c-0.472-0.146-0.951-0.27-1.427-0.405
+	c-0.457-0.129-0.912-0.268-1.374-0.387c-0.492-0.127-0.994-0.23-1.49-0.344c-0.454-0.105-0.906-0.219-1.365-0.313
+	c-0.519-0.106-1.045-0.189-1.568-0.28c-0.446-0.078-0.889-0.168-1.339-0.237c-0.563-0.086-1.135-0.147-1.704-0.217
+	c-0.416-0.051-0.828-0.115-1.246-0.157c-0.657-0.067-1.32-0.106-1.98-0.151c-0.341-0.023-0.676-0.059-1.017-0.077
+	c-1.006-0.05-2.018-0.077-3.037-0.077c-1.017,0-2.03,0.026-3.038,0.077c-0.341,0.018-0.676,0.053-1.015,0.077
+	c-0.662,0.046-1.326,0.085-1.98,0.151c-0.419,0.042-0.83,0.106-1.245,0.157c-0.57,0.069-1.141,0.131-1.706,0.217
+	c-0.45,0.069-0.892,0.159-1.337,0.237c-0.524,0.091-1.05,0.175-1.569,0.28c-0.459,0.093-0.908,0.208-1.363,0.313
+	c-0.498,0.114-0.998,0.217-1.491,0.344c-0.463,0.119-0.916,0.258-1.373,0.387c-0.476,0.135-0.956,0.259-1.426,0.405
+	c-0.465,0.144-0.919,0.307-1.378,0.462c-0.454,0.154-0.913,0.297-1.363,0.462c-0.459,0.167-0.908,0.354-1.361,0.533
+	c-0.441,0.174-0.887,0.337-1.322,0.521c-0.447,0.189-0.887,0.396-1.329,0.597c-0.43,0.193-0.863,0.377-1.286,0.581
+	c-0.441,0.211-0.872,0.442-1.307,0.664c-0.413,0.21-0.831,0.414-1.239,0.634c-0.429,0.232-0.846,0.482-1.269,0.723
+	c-0.402,0.232-0.81,0.454-1.205,0.693c-0.412,0.249-0.811,0.514-1.215,0.772c-0.395,0.253-0.796,0.498-1.184,0.759
+	c-0.394,0.265-0.774,0.545-1.162,0.819c-0.386,0.274-0.776,0.54-1.155,0.823c-0.38,0.283-0.748,0.581-1.12,0.872
+	c-0.372,0.291-0.748,0.575-1.113,0.875c-0.363,0.298-0.713,0.61-1.067,0.916c-0.361,0.312-0.727,0.617-1.081,0.936
+	c-0.341,0.307-0.668,0.628-1,0.943c-0.314,0.298-0.637,0.587-0.944,0.89l-0.016,0.022c-6.64,6.576-11.725,14.712-14.674,23.814
+	l-0.03,0.048c-0.039,0.121-0.071,0.246-0.111,0.368c-0.076,0.243-0.147,0.488-0.219,0.73c-0.187,0.618-0.364,1.24-0.531,1.865
+	c-0.072,0.274-0.146,0.548-0.214,0.824c-0.168,0.675-0.325,1.352-0.47,2.035c-0.042,0.198-0.09,0.395-0.13,0.594
+	c-0.177,0.876-0.335,1.759-0.473,2.648c-0.03,0.203-0.055,0.406-0.085,0.609c-0.1,0.695-0.189,1.392-0.265,2.094
+	c-0.032,0.296-0.061,0.593-0.088,0.892c-0.06,0.648-0.11,1.299-0.149,1.952c-0.017,0.279-0.036,0.558-0.049,0.838
+	c-0.042,0.918-0.07,1.839-0.07,2.767c0,32.707,26.513,59.221,59.219,59.221s59.219-26.513,59.219-59.221
+	C315.219,255.072,315.193,254.15,315.15,253.233z"/>
+<path style="fill:#2393B5;" d="M219.041,256c0-0.928,0.028-1.85,0.07-2.767c0.013-0.28,0.032-0.559,0.049-0.838
+	c0.039-0.653,0.089-1.304,0.149-1.952c0.027-0.298,0.056-0.595,0.088-0.892c0.076-0.702,0.165-1.399,0.265-2.094
+	c0.03-0.203,0.055-0.407,0.085-0.609c0.138-0.889,0.296-1.772,0.473-2.648c0.04-0.199,0.088-0.396,0.13-0.594
+	c0.145-0.682,0.301-1.361,0.47-2.035c0.069-0.275,0.141-0.55,0.214-0.824c0.166-0.627,0.344-1.248,0.531-1.865
+	c0.072-0.244,0.144-0.488,0.219-0.73c0.039-0.122,0.071-0.247,0.111-0.368l0.03-0.048c2.95-9.101,8.034-17.238,14.674-23.814
+	l0.016-0.022c0.306-0.304,0.629-0.593,0.944-0.89c0.333-0.315,0.66-0.636,1-0.943c0.353-0.319,0.719-0.624,1.081-0.936
+	c0.354-0.306,0.705-0.618,1.067-0.916c0.365-0.299,0.741-0.583,1.113-0.875c0.372-0.292,0.74-0.589,1.12-0.872
+	c0.38-0.283,0.769-0.549,1.155-0.823c0.388-0.274,0.769-0.554,1.162-0.819c0.39-0.26,0.789-0.506,1.184-0.759
+	c0.404-0.258,0.804-0.523,1.215-0.772c0.395-0.239,0.804-0.462,1.205-0.693c0.423-0.242,0.84-0.491,1.269-0.723
+	c0.407-0.22,0.826-0.423,1.239-0.634c0.435-0.223,0.865-0.452,1.307-0.664c0.424-0.204,0.857-0.388,1.286-0.581
+	c0.442-0.2,0.882-0.407,1.329-0.597c0.435-0.184,0.88-0.347,1.322-0.521c0.452-0.178,0.903-0.365,1.361-0.533
+	c0.45-0.164,0.908-0.308,1.363-0.462c0.459-0.155,0.913-0.319,1.378-0.462c0.47-0.146,0.951-0.27,1.426-0.405
+	c0.457-0.129,0.91-0.268,1.374-0.387c0.492-0.127,0.994-0.23,1.491-0.344c0.454-0.105,0.905-0.219,1.363-0.313
+	c0.253-0.051,0.506-0.092,0.761-0.136c-0.269-0.047-0.536-0.097-0.807-0.145c-0.446-0.078-0.889-0.168-1.339-0.237
+	c-0.563-0.086-1.135-0.147-1.704-0.217c-0.416-0.051-0.828-0.115-1.245-0.157c-0.657-0.067-1.32-0.106-1.98-0.151
+	c-0.341-0.023-0.676-0.059-1.017-0.077c-1.006-0.05-2.018-0.077-3.038-0.077c-1.017,0-2.03,0.026-3.038,0.077
+	c-0.341,0.018-0.676,0.053-1.015,0.077c-0.662,0.046-1.326,0.085-1.98,0.151c-0.419,0.042-0.83,0.106-1.245,0.157
+	c-0.57,0.069-1.141,0.131-1.706,0.217c-0.45,0.069-0.892,0.159-1.337,0.237c-0.524,0.091-1.05,0.175-1.569,0.28
+	c-0.459,0.093-0.908,0.208-1.363,0.313c-0.498,0.114-0.998,0.217-1.491,0.344c-0.463,0.119-0.916,0.258-1.373,0.387
+	c-0.476,0.135-0.956,0.259-1.426,0.405c-0.465,0.144-0.919,0.307-1.378,0.462c-0.454,0.154-0.913,0.297-1.363,0.462
+	c-0.459,0.167-0.908,0.354-1.361,0.533c-0.441,0.174-0.887,0.337-1.322,0.521c-0.447,0.189-0.887,0.396-1.329,0.597
+	c-0.43,0.193-0.863,0.377-1.286,0.581c-0.441,0.211-0.872,0.442-1.307,0.664c-0.413,0.21-0.831,0.414-1.239,0.634
+	c-0.429,0.232-0.846,0.482-1.269,0.723c-0.402,0.231-0.81,0.454-1.205,0.693c-0.412,0.249-0.811,0.514-1.215,0.772
+	c-0.395,0.253-0.796,0.498-1.184,0.759c-0.394,0.265-0.774,0.545-1.162,0.819c-0.386,0.274-0.776,0.54-1.155,0.823
+	c-0.38,0.283-0.748,0.581-1.12,0.872c-0.372,0.291-0.748,0.575-1.113,0.875c-0.363,0.298-0.713,0.61-1.067,0.916
+	c-0.361,0.312-0.727,0.617-1.081,0.936c-0.341,0.307-0.668,0.628-0.999,0.943c-0.314,0.298-0.637,0.587-0.944,0.89l-0.016,0.022
+	c-6.64,6.576-11.725,14.712-14.674,23.814l-0.03,0.048c-0.039,0.121-0.071,0.246-0.111,0.368c-0.076,0.243-0.147,0.488-0.219,0.73
+	c-0.187,0.618-0.364,1.24-0.531,1.865c-0.072,0.274-0.146,0.548-0.214,0.824c-0.168,0.675-0.325,1.352-0.47,2.035
+	c-0.042,0.198-0.09,0.395-0.13,0.594c-0.177,0.876-0.335,1.759-0.473,2.648c-0.03,0.203-0.055,0.406-0.085,0.609
+	c-0.1,0.695-0.189,1.392-0.265,2.094c-0.032,0.296-0.061,0.593-0.088,0.892c-0.06,0.648-0.11,1.299-0.149,1.952
+	c-0.017,0.279-0.036,0.558-0.049,0.838c-0.042,0.918-0.07,1.839-0.07,2.767c0,32.707,26.513,59.221,59.219,59.221
+	c3.807,0,7.524-0.373,11.13-1.06C239.748,308.951,219.041,284.9,219.041,256z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/packages/web/public/icons/querydesign.svg
+++ b/packages/web/public/icons/querydesign.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#E6F9FF;" d="M361,180H151V0h210V180z"/>
+<path style="fill:#CCEFFF;" d="M361,180H256V0h105V180z"/>
+<polygon style="fill:#66E26F;" points="271,241 271,210 241,210 241,241 90,241 90,302 120,302 120,271 392,271 392,302 422,302 
+	422,241 "/>
+<rect x="151" style="fill:#EA596E;" width="210" height="60"/>
+<rect x="256" style="fill:#DD2E44;" width="105" height="60"/>
+<path style="fill:#E6F9FF;" d="M210,512H0V332h210V512z"/>
+<path style="fill:#CCEFFF;" d="M210,512H105V332h105V512z"/>
+<rect y="332" style="fill:#EA596E;" width="210" height="60"/>
+<rect x="105" y="332" style="fill:#DD2E44;" width="105" height="60"/>
+<path style="fill:#E6F9FF;" d="M512,512H302V332h210V512z"/>
+<path style="fill:#CCEFFF;" d="M512,512H407V332h105V512z"/>
+<rect x="302" y="332" style="fill:#EA596E;" width="210" height="60"/>
+<rect x="407" y="332" style="fill:#DD2E44;" width="105" height="60"/>
+<polygon style="fill:#48CC4E;" points="271,241 271,210 256,210 256,271 392,271 392,302 422,302 422,241 "/>
+</svg>
--- a/packages/web/public/icons/reference.svg
+++ b/packages/web/public/icons/reference.svg
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<polygon style="fill:#EF2648;" points="42.223,480.563 26.044,475.17 85.222,297.6 67.388,65.766 288.563,118.852 430.566,26.974 
+		439.834,41.293 291.703,137.148 86.212,87.834 102.511,299.733 101.956,301.363 	"/>
+	
+		<rect x="375.457" y="42.303" transform="matrix(-0.0905 0.9959 -0.9959 -0.0905 554.7352 -233.503)" style="fill:#EF2648;" width="17.067" height="188.502"/>
+	
+		<rect x="115.199" y="293.828" transform="matrix(-0.9487 0.3162 -0.3162 -0.9487 363.8856 717.54)" style="fill:#EF2648;" width="17.058" height="188.929"/>
+	<polygon style="fill:#EF2648;" points="234.308,402.509 196.463,232.252 213.137,228.548 243.558,365.491 334.857,258.978 
+		347.81,270.089 	"/>
+	
+		<rect x="328.563" y="308.237" transform="matrix(-0.2524 0.9676 -0.9676 -0.2524 818.5704 186.871)" style="fill:#EF2648;" width="17.066" height="202.833"/>
+</g>
+<circle style="fill:#B7E5FF;" cx="76.8" cy="76.8" r="68.267"/>
+<path style="fill:#99C8E0;" d="M115.755,20.779c21.538,30.916,13.926,73.438-16.99,94.976c-23.433,16.324-54.554,16.324-77.986,0
+	c21.444,31.01,63.966,38.767,94.976,17.331s38.767-63.966,17.331-94.976C128.401,31.334,122.53,25.463,115.755,20.779z"/>
+<circle style="fill:#B7E5FF;" cx="435.2" cy="435.2" r="68.267"/>
+<path style="fill:#99C8E0;" d="M474.155,379.179c21.538,30.916,13.926,73.438-16.99,94.976c-23.433,16.324-54.554,16.324-77.986,0
+	c21.444,31.01,63.966,38.767,94.976,17.331c31.01-21.436,38.767-63.966,17.331-94.976
+	C486.801,389.734,480.93,383.863,474.155,379.179z"/>
+<circle style="fill:#4DB5FF;" cx="238.933" cy="384" r="42.667"/>
+<path style="fill:#3596D8;" d="M264.431,349.969c14.182,18.697,10.522,45.346-8.166,59.529c-15.181,11.52-36.181,11.52-51.362,0
+	c14.02,18.859,40.67,22.784,59.529,8.772c18.859-14.02,22.784-40.67,8.772-59.529C270.72,355.405,267.767,352.444,264.431,349.969z"
+	/>
+<circle style="fill:#4DB5FF;" cx="93.867" cy="298.667" r="42.667"/>
+<path style="fill:#3596D8;" d="M119.364,264.636c14.182,18.697,10.522,45.346-8.166,59.529c-15.181,11.52-36.181,11.52-51.362,0
+	c14.02,18.859,40.67,22.784,59.529,8.772c18.859-14.02,22.784-40.67,8.772-59.529C125.653,270.071,122.701,267.11,119.364,264.636z"
+	/>
+<circle style="fill:#4DB5FF;" cx="290.133" cy="128" r="42.667"/>
+<path style="fill:#3596D8;" d="M315.631,93.969c14.182,18.697,10.522,45.346-8.166,59.529c-15.181,11.52-36.181,11.52-51.362,0
+	c14.02,18.859,40.67,22.784,59.529,8.772c18.859-14.02,22.784-40.67,8.772-59.529C321.92,99.405,318.967,96.444,315.631,93.969z"/>
+<circle style="fill:#235087;" cx="34.133" cy="477.867" r="25.6"/>
+<path style="fill:#163768;" d="M47.394,456.073c2.475,3.985,3.789,8.576,3.806,13.261c0,14.14-11.46,25.6-25.6,25.6
+	c-4.685-0.017-9.276-1.331-13.261-3.806c7.287,12.066,22.989,15.94,35.055,8.653s15.94-22.989,8.653-35.055
+	C53.905,461.184,50.935,458.214,47.394,456.073z"/>
+<circle style="fill:#235087;" cx="153.6" cy="477.867" r="25.6"/>
+<path style="fill:#163768;" d="M166.861,456.073c2.475,3.985,3.789,8.576,3.806,13.261c0,14.14-11.46,25.6-25.6,25.6
+	c-4.685-0.017-9.276-1.331-13.261-3.806c7.287,12.066,22.989,15.94,35.055,8.653c12.066-7.287,15.94-22.989,8.653-35.055
+	C173.372,461.184,170.402,458.214,166.861,456.073z"/>
+<circle style="fill:#235087;" cx="204.8" cy="230.4" r="25.6"/>
+<path style="fill:#163768;" d="M218.061,208.606c2.475,3.985,3.789,8.576,3.806,13.261c0,14.14-11.46,25.6-25.6,25.6
+	c-4.685-0.017-9.276-1.331-13.261-3.806c7.287,12.066,22.989,15.94,35.055,8.653s15.94-22.989,8.653-35.055
+	C224.572,213.717,221.602,210.748,218.061,208.606z"/>
+<circle style="fill:#235087;" cx="341.333" cy="264.533" r="25.6"/>
+<path style="fill:#163768;" d="M354.594,242.739c2.475,3.985,3.789,8.576,3.806,13.261c0,14.14-11.46,25.6-25.6,25.6
+	c-4.685-0.017-9.276-1.331-13.261-3.806c7.287,12.066,22.989,15.94,35.055,8.653c12.066-7.287,15.94-22.989,8.653-35.055
+	C361.105,247.851,358.135,244.881,354.594,242.739z"/>
+<circle style="fill:#235087;" cx="477.867" cy="145.067" r="25.6"/>
+<path style="fill:#163768;" d="M491.128,123.273c2.475,3.985,3.789,8.576,3.806,13.261c0,14.14-11.46,25.6-25.6,25.6
+	c-4.685-0.017-9.276-1.331-13.261-3.806c7.287,12.066,22.989,15.94,35.055,8.653c12.066-7.287,15.94-22.989,8.653-35.055
+	C497.638,128.384,494.669,125.414,491.128,123.273z"/>
+<circle style="fill:#235087;" cx="435.2" cy="34.133" r="25.6"/>
+<path style="fill:#163768;" d="M448.461,12.339c2.475,3.985,3.789,8.576,3.806,13.261c0,14.14-11.46,25.6-25.6,25.6
+	c-4.685-0.017-9.276-1.331-13.261-3.806c7.287,12.066,22.989,15.94,35.055,8.653c12.066-7.287,15.94-22.989,8.653-35.055
+	C454.972,17.451,452.002,14.481,448.461,12.339z"/>
+<path d="M76.8,153.6C34.381,153.6,0,119.219,0,76.8S34.381,0,76.8,0s76.8,34.381,76.8,76.8
+	C153.549,119.194,119.194,153.549,76.8,153.6z M76.8,17.067c-32.99,0-59.733,26.743-59.733,59.733S43.81,136.533,76.8,136.533
+	s59.733-26.743,59.733-59.733C136.499,43.827,109.773,17.101,76.8,17.067z"/>
+<path d="M435.2,68.267c-18.85,0-34.133-15.283-34.133-34.133S416.35,0,435.2,0s34.133,15.283,34.133,34.133
+	S454.05,68.267,435.2,68.267z M435.2,17.067c-9.429,0-17.067,7.637-17.067,17.067S425.771,51.2,435.2,51.2
+	c9.429,0,17.067-7.637,17.067-17.067S444.629,17.067,435.2,17.067z"/>
+<path d="M290.133,179.2c-28.279,0-51.2-22.921-51.2-51.2s22.921-51.2,51.2-51.2c28.279,0,51.2,22.921,51.2,51.2
+	C341.308,156.262,318.396,179.174,290.133,179.2z M290.133,93.867C271.283,93.867,256,109.15,256,128s15.283,34.133,34.133,34.133
+	c18.85,0,34.133-15.283,34.133-34.133S308.983,93.867,290.133,93.867z"/>
+<path d="M477.867,179.2c-18.85,0-34.133-15.283-34.133-34.133s15.283-34.133,34.133-34.133S512,126.217,512,145.067
+	S496.717,179.2,477.867,179.2z M477.867,128c-9.429,0-17.067,7.637-17.067,17.067c0,9.429,7.637,17.067,17.067,17.067
+	c9.429,0,17.067-7.637,17.067-17.067C494.933,135.637,487.296,128,477.867,128z"/>
+<path d="M435.2,512c-42.419,0-76.8-34.381-76.8-76.8s34.381-76.8,76.8-76.8s76.8,34.381,76.8,76.8
+	C511.949,477.594,477.594,511.949,435.2,512z M435.2,375.467c-32.99,0-59.733,26.743-59.733,59.733s26.743,59.733,59.733,59.733
+	s59.733-26.743,59.733-59.733C494.899,402.227,468.173,375.501,435.2,375.467z"/>
+<path d="M93.867,349.867c-28.279,0-51.2-22.921-51.2-51.2c0-28.279,22.921-51.2,51.2-51.2s51.2,22.921,51.2,51.2
+	C145.041,326.929,122.129,349.841,93.867,349.867z M93.867,264.533c-18.85,0-34.133,15.283-34.133,34.133S75.017,332.8,93.867,332.8
+	S128,317.517,128,298.667S112.717,264.533,93.867,264.533z"/>
+<path d="M34.133,512C15.283,512,0,496.717,0,477.867s15.283-34.133,34.133-34.133s34.133,15.283,34.133,34.133
+	S52.983,512,34.133,512z M34.133,460.8c-9.429,0-17.067,7.637-17.067,17.067c0,9.429,7.637,17.067,17.067,17.067
+	S51.2,487.296,51.2,477.867C51.2,468.437,43.563,460.8,34.133,460.8z"/>
+<path d="M238.933,435.2c-28.279,0-51.2-22.921-51.2-51.2c0-28.279,22.921-51.2,51.2-51.2s51.2,22.921,51.2,51.2
+	C290.108,412.262,267.196,435.174,238.933,435.2z M238.933,349.867c-18.85,0-34.133,15.283-34.133,34.133
+	s15.283,34.133,34.133,34.133S273.067,402.85,273.067,384S257.783,349.867,238.933,349.867z"/>
+<path d="M204.8,264.533c-18.85,0-34.133-15.283-34.133-34.133s15.283-34.133,34.133-34.133s34.133,15.283,34.133,34.133
+	S223.65,264.533,204.8,264.533z M204.8,213.333c-9.429,0-17.067,7.637-17.067,17.067c0,9.429,7.637,17.067,17.067,17.067
+	c9.429,0,17.067-7.637,17.067-17.067C221.867,220.971,214.229,213.333,204.8,213.333z"/>
+<path d="M341.333,298.667c-18.85,0-34.133-15.283-34.133-34.133s15.283-34.133,34.133-34.133s34.133,15.283,34.133,34.133
+	S360.183,298.667,341.333,298.667z M341.333,247.467c-9.429,0-17.067,7.637-17.067,17.067c0,9.429,7.637,17.067,17.067,17.067
+	c9.429,0,17.067-7.637,17.067-17.067C358.4,255.104,350.763,247.467,341.333,247.467z"/>
+<path d="M153.6,512c-18.85,0-34.133-15.283-34.133-34.133s15.283-34.133,34.133-34.133s34.133,15.283,34.133,34.133
+	S172.45,512,153.6,512z M153.6,460.8c-9.429,0-17.067,7.637-17.067,17.067c0,9.429,7.637,17.067,17.067,17.067
+	c9.429,0,17.067-7.637,17.067-17.067C170.667,468.437,163.029,460.8,153.6,460.8z"/>
+</svg>
--- a/packages/web/public/icons/sequence.svg
+++ b/packages/web/public/icons/sequence.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#6EE1FF;" d="M453.959,302.36h-35.536V209.64h35.536c32.009,0,58.041-26.032,58.041-58.031
+	s-26.032-58.031-58.041-58.031h-35.536V58.041C418.423,26.032,392.39,0,360.391,0S302.36,26.032,302.36,58.041v35.536H209.64V58.041
+	C209.64,26.032,183.607,0,151.609,0S93.577,26.032,93.577,58.041v35.536H58.041C26.032,93.577,0,119.61,0,151.609
+	s26.032,58.031,58.041,58.031h35.536v92.721H58.041C26.032,302.36,0,328.393,0,360.391s26.032,58.031,58.041,58.031h35.536v35.536
+	c0,32.009,26.032,58.041,58.031,58.041s58.031-26.032,58.031-58.041v-35.536h92.721v35.536c0,32.009,26.032,58.041,58.031,58.041
+	s58.031-26.032,58.031-58.041v-35.536h35.536c32.009,0,58.041-26.032,58.041-58.031S485.968,302.36,453.959,302.36z M302.36,209.64
+	v92.721H209.64V209.64L302.36,209.64L302.36,209.64z"/>
+<path style="fill:#05CDFF;" d="M453.959,209.64c32.009,0,58.041-26.032,58.041-58.031s-26.032-58.031-58.041-58.031h-35.536V58.041
+	C418.423,26.032,392.39,0,360.391,0S302.36,26.032,302.36,58.041v35.536H256V209.64h46.36v92.721H256v116.062h46.36v35.536
+	c0,32.009,26.032,58.041,58.031,58.041s58.031-26.032,58.031-58.041v-35.536h35.536c32.009,0,58.041-26.032,58.041-58.031
+	s-26.032-58.031-58.041-58.031h-35.536V209.64L453.959,209.64L453.959,209.64z"/>
+</svg>
--- a/packages/web/public/icons/server.svg
+++ b/packages/web/public/icons/server.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 395 395" style="enable-background:new 0 0 395 395;" xml:space="preserve">
+<g>
+	<path d="M395,279.46V382.5c0,4.14-3.36,7.5-7.5,7.5H7.5c-4.15,0-7.5-3.36-7.5-7.5V279.46c0-4.14,3.35-7.5,7.5-7.5h21.87v-15.44H7.5
+		c-4.15,0-7.5-3.36-7.5-7.5V145.98c0-4.14,3.35-7.5,7.5-7.5h21.87v-15.44H7.5c-4.15,0-7.5-3.36-7.5-7.5V12.5C0,8.36,3.35,5,7.5,5
+		h380c4.14,0,7.5,3.36,7.5,7.5v103.04c0,4.14-3.36,7.5-7.5,7.5h-21.87v15.44h21.87c4.14,0,7.5,3.36,7.5,7.5v103.04
+		c0,4.14-3.36,7.5-7.5,7.5h-21.87v15.44h21.87C391.64,271.96,395,275.32,395,279.46z M380,375v-88.04h-39.17V375H380z M380,241.52
+		v-88.04h-39.17v88.04H380z M380,108.04V20h-39.17v88.04H380z M350.63,271.96v-15.44H44.37v15.44H350.63z M350.63,138.48v-15.44
+		H44.37v15.44H350.63z M325.83,375v-88.04h-39.01V375H325.83z M325.83,241.52v-88.04h-39.01v88.04H325.83z M325.83,108.04V20h-39.01
+		v88.04H325.83z M271.82,375v-88.04H15V375H271.82z M271.82,241.52v-88.04H15v88.04H271.82z M271.82,108.04V20H15v88.04H271.82z"/>
+	<rect x="340.83" y="286.96" style="fill:#3DD0F2;" width="39.17" height="88.04"/>
+	<rect x="340.83" y="153.48" style="fill:#3DD0F2;" width="39.17" height="88.04"/>
+	<rect x="340.83" y="20" style="fill:#3DD0F2;" width="39.17" height="88.04"/>
+	<path style="fill:#3DD0F2;" d="M271.82,286.96V375H15v-88.04H271.82z M75,330.98c0-1.97-0.8-3.91-2.2-5.3
+		c-1.4-1.4-3.33-2.2-5.3-2.2c-1.98,0-3.91,0.8-5.31,2.2c-1.39,1.4-2.19,3.33-2.19,5.3s0.8,3.91,2.19,5.3c1.4,1.4,3.33,2.2,5.31,2.2
+		c1.97,0,3.9-0.8,5.3-2.2C74.2,334.89,75,332.96,75,330.98z M51,330.98c0-1.97-0.8-3.9-2.2-5.3c-1.4-1.4-3.33-2.2-5.3-2.2
+		c-1.98,0-3.91,0.8-5.31,2.2c-1.39,1.39-2.19,3.33-2.19,5.3c0,1.98,0.8,3.91,2.19,5.3c1.4,1.4,3.33,2.2,5.31,2.2
+		c1.97,0,3.9-0.8,5.3-2.2C50.2,334.89,51,332.95,51,330.98z"/>
+	<path style="fill:#3DD0F2;" d="M271.82,153.48v88.04H15v-88.04H271.82z M75,197.5c0-1.97-0.8-3.91-2.2-5.3
+		c-1.4-1.4-3.33-2.2-5.3-2.2c-1.98,0-3.91,0.8-5.31,2.2c-1.39,1.39-2.19,3.33-2.19,5.3c0,1.98,0.8,3.91,2.19,5.3
+		c1.4,1.4,3.33,2.2,5.31,2.2c1.97,0,3.9-0.8,5.3-2.2C74.2,201.41,75,199.48,75,197.5z M51,197.5c0-1.97-0.8-3.91-2.2-5.3
+		c-1.4-1.4-3.33-2.2-5.3-2.2c-1.98,0-3.91,0.8-5.31,2.2c-1.39,1.39-2.19,3.33-2.19,5.3s0.8,3.91,2.19,5.3c1.4,1.4,3.33,2.2,5.31,2.2
+		c1.97,0,3.9-0.8,5.3-2.2C50.2,201.41,51,199.47,51,197.5z"/>
+	<path style="fill:#3DD0F2;" d="M271.82,20v88.04H15V20H271.82z M75,64.02c0-1.97-0.8-3.91-2.2-5.3c-1.4-1.4-3.33-2.2-5.3-2.2
+		c-1.98,0-3.91,0.8-5.31,2.2C60.8,60.11,60,62.05,60,64.02c0,1.97,0.8,3.91,2.19,5.3c1.4,1.4,3.33,2.2,5.31,2.2
+		c1.97,0,3.9-0.8,5.3-2.2C74.2,67.93,75,65.99,75,64.02z M51,64.02c0-1.97-0.8-3.91-2.2-5.3c-1.4-1.4-3.33-2.2-5.3-2.2
+		c-1.98,0-3.91,0.8-5.31,2.2C36.8,60.11,36,62.05,36,64.02c0,1.97,0.8,3.91,2.19,5.3c1.4,1.4,3.33,2.2,5.31,2.2
+		c1.97,0,3.9-0.8,5.3-2.2C50.2,67.93,51,65.99,51,64.02z"/>
+	<path d="M72.8,58.72c1.4,1.39,2.2,3.33,2.2,5.3c0,1.97-0.8,3.91-2.2,5.3c-1.4,1.4-3.33,2.2-5.3,2.2c-1.98,0-3.91-0.8-5.31-2.2
+		C60.8,67.93,60,65.99,60,64.02c0-1.97,0.8-3.91,2.19-5.3c1.4-1.4,3.33-2.2,5.31-2.2C69.47,56.52,71.4,57.32,72.8,58.72z"/>
+	<path d="M72.8,192.2c1.4,1.39,2.2,3.33,2.2,5.3c0,1.98-0.8,3.91-2.2,5.3c-1.4,1.4-3.33,2.2-5.3,2.2c-1.98,0-3.91-0.8-5.31-2.2
+		c-1.39-1.39-2.19-3.32-2.19-5.3c0-1.97,0.8-3.91,2.19-5.3c1.4-1.4,3.33-2.2,5.31-2.2C69.47,190,71.4,190.8,72.8,192.2z"/>
+	<path d="M72.8,325.68c1.4,1.39,2.2,3.33,2.2,5.3c0,1.98-0.8,3.91-2.2,5.3c-1.4,1.4-3.33,2.2-5.3,2.2c-1.98,0-3.91-0.8-5.31-2.2
+		c-1.39-1.39-2.19-3.33-2.19-5.3s0.8-3.9,2.19-5.3c1.4-1.4,3.33-2.2,5.31-2.2C69.47,323.48,71.4,324.28,72.8,325.68z"/>
+	<path d="M48.8,58.72c1.4,1.39,2.2,3.33,2.2,5.3c0,1.97-0.8,3.91-2.2,5.3c-1.4,1.4-3.33,2.2-5.3,2.2c-1.98,0-3.91-0.8-5.31-2.2
+		C36.8,67.93,36,65.99,36,64.02c0-1.97,0.8-3.91,2.19-5.3c1.4-1.4,3.33-2.2,5.31-2.2C45.47,56.52,47.4,57.32,48.8,58.72z"/>
+	<path d="M48.8,192.2c1.4,1.39,2.2,3.33,2.2,5.3s-0.8,3.91-2.2,5.3c-1.4,1.4-3.33,2.2-5.3,2.2c-1.98,0-3.91-0.8-5.31-2.2
+		c-1.39-1.39-2.19-3.33-2.19-5.3s0.8-3.91,2.19-5.3c1.4-1.4,3.33-2.2,5.31-2.2C45.47,190,47.4,190.8,48.8,192.2z"/>
+	<path d="M48.8,325.68c1.4,1.4,2.2,3.33,2.2,5.3s-0.8,3.91-2.2,5.3c-1.4,1.4-3.33,2.2-5.3,2.2c-1.98,0-3.91-0.8-5.31-2.2
+		c-1.39-1.39-2.19-3.32-2.19-5.3c0-1.97,0.8-3.91,2.19-5.3c1.4-1.4,3.33-2.2,5.31-2.2C45.47,323.48,47.4,324.28,48.8,325.68z"/>
+</g>
+</svg>
--- a/packages/web/public/icons/sql.svg
+++ b/packages/web/public/icons/sql.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="548.29px" height="548.291px" viewBox="0 0 548.29 548.291" style="enable-background:new 0 0 548.29 548.291;"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M276.043,244.216c-24.575,0-38.741,24.087-38.741,53.862c-0.241,30.228,14.407,53.382,38.5,53.382
+			c24.323,0,38.512-22.92,38.512-54.091C314.313,268.303,300.604,244.216,276.043,244.216z"/>
+		<path d="M486.2,196.116h-13.164V132.59c0-0.399-0.064-0.795-0.116-1.2c-0.021-2.52-0.824-4.997-2.551-6.96L364.656,3.677
+			c-0.031-0.031-0.064-0.044-0.085-0.075c-0.629-0.704-1.364-1.29-2.141-1.796c-0.231-0.154-0.462-0.283-0.704-0.419
+			c-0.672-0.365-1.386-0.672-2.121-0.893c-0.199-0.052-0.377-0.134-0.576-0.186C358.229,0.118,357.4,0,356.562,0H96.757
+			C84.893,0,75.256,9.649,75.256,21.502v174.613H62.093c-16.967,0-30.733,13.756-30.733,30.733v159.812
+			c0,16.961,13.766,30.731,30.733,30.731h13.163V526.79c0,11.854,9.637,21.501,21.501,21.501h354.777
+			c11.853,0,21.502-9.647,21.502-21.501V417.392H486.2c16.977,0,30.729-13.771,30.729-30.731V226.849
+			C516.93,209.872,503.177,196.116,486.2,196.116z M96.757,21.502h249.053v110.006c0,5.943,4.818,10.751,10.751,10.751h94.973
+			v53.861H96.757V21.502z M353.033,376.96l-10.394,27.884c-22.666-6.619-41.565-13.479-62.828-22.445
+			c-3.527-1.418-7.317-2.132-11.094-2.362c-35.909-2.352-69.449-28.819-69.449-80.778c0-47.711,30.236-83.623,77.71-83.623
+			c48.675,0,75.351,36.854,75.351,80.317c0,36.142-16.766,61.638-37.785,71.091v0.945
+			C326.828,371.528,340.519,374.367,353.033,376.96z M72.912,370.116l7.328-29.764c9.69,4.96,24.554,9.915,39.917,9.915
+			c16.525,0,25.271-6.84,25.271-17.228c0-9.928-7.56-15.597-26.691-22.442c-26.457-9.217-43.696-23.858-43.696-47.014
+			c0-27.163,22.68-47.948,60.231-47.948c17.954,0,31.184,3.791,40.623,8.03l-8.021,29.061c-6.375-3.076-17.711-7.564-33.3-7.564
+			c-15.599,0-23.163,7.079-23.163,15.357c0,10.15,8.977,14.646,29.533,22.447c28.108,10.394,41.332,25.023,41.332,47.464
+			c0,26.699-20.557,49.365-64.253,49.365C99.844,379.785,81.899,375.06,72.912,370.116z M451.534,520.962H96.757v-103.57h354.777
+			V520.962z M475.387,377.428h-99.455V218.231h36.158v128.97h63.297V377.428z"/>
+	</g>
+</g>
+</svg>
--- a/packages/web/public/icons/sqlite.svg
+++ b/packages/web/public/icons/sqlite.svg
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg2985"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   width="256"
+   height="256"
+   xml:space="preserve"
+   sodipodi:docname="sqlite-square-icon.svg"><metadata
+     id="metadata2991"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
+     id="defs2989"><linearGradient
+       x1="0"
+       y1="0"
+       x2="1"
+       y2="0"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(-4.02e-6,-91.8907,-91.8907,4.02e-6,85.8809,161.434)"
+       spreadMethod="pad"
+       id="linearGradient3027"><stop
+         style="stop-opacity:1;stop-color:#97d9f6"
+         offset="0"
+         id="stop3029" /><stop
+         style="stop-opacity:1;stop-color:#0f80cc"
+         offset="0.920245"
+         id="stop3031" /><stop
+         style="stop-opacity:1;stop-color:#0f80cc"
+         offset="1"
+         id="stop3033" /></linearGradient><linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3027"
+       id="linearGradient5421"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(-4.02e-7,-9.18907,-9.18907,4.02e-7,8.58809,16.1434)"
+       spreadMethod="pad"
+       x1="-15.614694"
+       y1="-9.1082983"
+       x2="-6.7410073"
+       y2="-9.1082983" /><linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3027"
+       id="linearGradient3003"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(-4.02e-7,-9.18907,-9.18907,4.02e-7,8.58809,16.1434)"
+       spreadMethod="pad"
+       x1="-15.614694"
+       y1="-9.1082983"
+       x2="-6.7410073"
+       y2="-9.1082983" /></defs><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     id="namedview2987"
+     showgrid="false"
+     inkscape:zoom="0.73710525"
+     inkscape:cx="217.03271"
+     inkscape:cy="157.19018"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g2993"
+     fit-margin-top="10"
+     fit-margin-left="10"
+     fit-margin-right="10"
+     fit-margin-bottom="10"
+     inkscape:snap-page="true"
+     inkscape:snap-bbox="true" /><g
+     id="g2993"
+     inkscape:groupmode="layer"
+     inkscape:label="ink_ext_XXXXXX"
+     transform="matrix(1.25,0,0,-1.25,-41.57475,299.78375)"><g
+       id="g2998"
+       transform="matrix(1.5512433,0,0,1.5512433,-16.326028,-27.718348)"><path
+         d="m 103.096,71.5961 c -0.057,0.7219 -0.091,1.191 -0.091,1.191 0,0 -2.189,14.7578 -4.7948,19.1617 -0.4122,0.6981 0.0449,3.5653 1.1953,7.8121 0.6725,-1.1629 3.5115,-6.1371 4.0815,-7.7398 0.642,-1.8121 0.777,-2.3313 0.777,-2.3313 0,0 -1.557,8.0114 -4.112,12.6862 0.56,1.89 1.229,3.979 1.986,6.212 0.968,-1.698 3.285,-5.809 3.795,-7.235 0.103,-0.293 0.19,-0.542 0.268,-0.77 0.025,0.137 0.05,0.274 0.075,0.411 -0.585,2.482 -1.734,6.801 -3.307,9.992 3.49,18.165 15.393,42.445 27.596,53.278 l -79.6048,0 c -5.3352,0 -9.7004,-4.366 -9.7004,-9.701 l 0,-87.7892 c 0,-5.3347 4.3652,-9.7 9.7004,-9.7 l 52.4298,0 c -0.378,4.5762 -0.504,9.6391 -0.294,14.5223"
+         style="fill:#0f80cc;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3005"
+         inkscape:connector-curvature="0" /><path
+         d="m 99.4055,99.7609 c 0.6725,-1.1629 3.5115,-6.1371 4.0815,-7.7398 0.642,-1.8121 0.777,-2.3313 0.777,-2.3313 0,0 -1.557,8.0114 -4.112,12.6862 0.56,1.89 1.229,3.979 1.986,6.212 0.885,-1.553 2.896,-5.12 3.623,-6.81 0.027,0.319 0.054,0.638 0.082,0.954 -0.644,2.475 -1.622,5.715 -2.874,8.254 3.214,16.725 13.559,38.625 24.704,50.448 l -76.7128,0 c -3.7883,0 -6.8711,-3.082 -6.8711,-6.871 l 0,-81.3841 c 17.3738,6.668 38.323,12.7633 56.3529,12.502 -0.6693,2.5812 -1.4315,4.9152 -2.2318,6.2679 -0.4122,0.6981 0.0449,3.5653 1.1953,7.8121"
+         style="fill:url(#linearGradient3003);fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3035"
+         inkscape:connector-curvature="0" /><path
+         d="m 149.133,167.137 c -5.452,4.862 -12.053,2.909 -18.568,-2.873 -0.967,-0.859 -1.932,-1.812 -2.892,-2.83 -11.145,-11.823 -21.49,-33.723 -24.704,-50.448 1.252,-2.539 2.23,-5.779 2.874,-8.254 0.165,-0.635 0.314,-1.231 0.433,-1.738 0.283,-1.1999 0.435,-1.978 0.435,-1.978 0,0 -0.1,0.3781 -0.51,1.567 -0.078,0.228 -0.165,0.477 -0.268,0.77 -0.044,0.121 -0.105,0.268 -0.172,0.425 -0.727,1.69 -2.738,5.257 -3.623,6.81 -0.757,-2.233 -1.426,-4.322 -1.986,-6.212 2.555,-4.6748 4.112,-12.6862 4.112,-12.6862 0,0 -0.135,0.5192 -0.777,2.3313 -0.57,1.6027 -3.409,6.5769 -4.0815,7.7398 -1.1504,-4.2468 -1.6075,-7.114 -1.1953,-7.8121 0.8003,-1.3527 1.5625,-3.6867 2.2318,-6.2679 1.512,-5.8149 2.563,-12.8938 2.563,-12.8938 0,0 0.034,-0.4691 0.091,-1.191 -0.21,-4.8832 -0.084,-9.9461 0.294,-14.5223 0.501,-6.0578 1.444,-11.2617 2.646,-14.0468 l 0.816,0.4449 c -1.765,5.4871 -2.482,12.6781 -2.168,20.9711 0.475,12.6761 3.392,27.9629 8.782,43.896 9.106,24.052 21.74,43.35 33.303,52.566 -10.539,-9.518 -24.803,-40.327 -29.073,-51.736 -4.781,-12.776 -8.169,-24.7651 -10.211,-36.2518 3.523,10.7687 14.914,15.3976 14.914,15.3976 0,0 5.587,6.8903 12.116,16.7342 -3.911,-0.892 -10.333,-2.419 -12.484,-3.323 -3.173,-1.331 -4.028,-1.785 -4.028,-1.785 0,0 10.278,6.259 19.096,9.093 12.127,19.1 25.339,46.234 12.034,58.103"
+         style="fill:#003b57;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3045"
+         inkscape:connector-curvature="0" /></g></g></svg>
--- a/packages/web/public/icons/start.svg
+++ b/packages/web/public/icons/start.svg
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<polygon style="fill:#49618C;" points="61.342,226.39 61.342,454.002 30.906,454.002 30.906,222.741 	"/>
+	<polygon style="fill:#49618C;" points="481.09,222.751 481.09,454.002 450.654,454.002 450.654,226.39 	"/>
+</g>
+<path style="fill:#EDD154;" d="M504.399,57.998v161.589c-69.095,9.834-138.635,15.542-208.237,17.134
+	c-96.378,2.19-192.887-3.518-288.555-17.134V57.998c23.522,3.346,47.094,6.215,70.697,8.608h0.01
+	C220.082,80.972,363.148,78.103,504.399,57.998z"/>
+<g>
+	<path style="fill:#3B4773;" d="M30.906,222.741l30.436,3.65v34.978c-10.149-1.125-20.298-2.342-30.436-3.65
+		C30.906,257.719,30.906,222.741,30.906,222.741z"/>
+	<path style="fill:#3B4773;" d="M481.09,222.751v34.968c-10.139,1.308-20.287,2.525-30.436,3.65V226.39L481.09,222.751z"/>
+</g>
+<path style="fill:#D6B31D;" d="M296.162,236.722c-96.378,2.19-192.887-3.518-288.555-17.134V57.998
+	c23.522,3.346,47.094,6.215,70.697,8.608c0,0,63.113,159.612,217.727,170.106C296.071,236.712,296.122,236.722,296.162,236.722z"/>
+<path d="M181.863,195.095c4.199,0,7.604-3.405,7.604-7.604v-57.699c5.463,0.3,10.922,0.578,16.358,0.803
+	c0.106,0.004,0.213,0.006,0.319,0.006c4.054,0,7.422-3.201,7.592-7.29c0.173-4.195-3.087-7.738-7.284-7.912
+	c-16.027-0.663-32.252-1.664-48.223-2.972c-4.186-0.34-7.856,2.772-8.199,6.958c-0.343,4.185,2.772,7.856,6.958,8.199
+	c5.73,0.469,11.496,0.885,17.27,1.274v58.632C174.259,191.69,177.664,195.095,181.863,195.095z"/>
+<path d="M393.631,189.493c4.2,0,7.604-3.405,7.604-7.604v-59c5.877-0.709,11.747-1.444,17.576-2.234
+	c4.161-0.564,7.078-4.394,6.515-8.555c-0.564-4.162-4.397-7.082-8.556-6.515c-15.905,2.154-32.072,4.013-48.055,5.523
+	c-4.18,0.395-7.249,4.105-6.855,8.285c0.372,3.938,3.684,6.889,7.561,6.889c0.239,0,0.482-0.011,0.725-0.034
+	c5.279-0.499,10.579-1.048,15.881-1.621v57.261C386.027,186.088,389.43,189.493,393.631,189.493z"/>
+<path d="M344.334,140.402v-2.251c0-6.557-2.568-12.603-7.231-17.026c-4.711-4.469-10.956-6.747-17.626-6.383
+	c-6.317,0.335-12.708,0.623-18.992,0.857c-4.087,0.151-7.322,3.509-7.322,7.599v35.91v29.834c0,4.199,3.404,7.604,7.604,7.604
+	s7.604-3.405,7.604-7.604v-22.499c5.57,0.049,10.703,2.073,14.558,5.771c3.995,3.831,6.196,9.106,6.196,14.853
+	c0,4.199,3.404,7.604,7.604,7.604s7.604-3.405,7.604-7.604c0-9.929-3.864-19.102-10.878-25.829
+	c-0.011-0.011-0.024-0.021-0.035-0.032C339.985,156.537,344.334,148.857,344.334,140.402z M308.371,130.501
+	c3.969-0.171,7.955-0.363,11.911-0.573c2.43-0.134,4.702,0.662,6.356,2.232c1.604,1.522,2.488,3.65,2.488,5.992v2.251
+	c0,5.279-4.417,9.972-9.648,10.248h-0.001c-3.676,0.195-7.39,0.375-11.106,0.537V130.501z"/>
+<path d="M266.856,197.327c4.2,0,7.604-3.405,7.604-7.604v-48.287c0-13.723-11.243-24.951-25.064-25.03
+	c-6.787-0.008-13.105,2.548-17.856,7.273c-4.699,4.674-7.287,10.911-7.287,17.563v48.287c0,4.199,3.405,7.604,7.604,7.604
+	c4.199,0,7.604-3.405,7.604-7.604v-22.704c5.519,0.075,11.051,0.127,16.576,0.127c1.075,0,2.141-0.011,3.215-0.014v22.786
+	C259.252,193.923,262.656,197.327,266.856,197.327z M239.462,151.626v-10.384c0-2.575,0.996-4.983,2.804-6.782
+	c1.86-1.85,4.347-2.823,7.047-2.847c5.48,0.031,9.939,4.437,9.939,9.822v10.301C252.665,151.754,246.052,151.717,239.462,151.626z"
+	/>
+<path d="M103.969,124.335c1.442-1.277,3.466-1.833,5.699-1.561c6.141,0.746,12.381,1.456,18.551,2.11
+	c4.179,0.441,7.92-2.584,8.362-6.761c0.442-4.176-2.585-7.92-6.761-8.362c-6.091-0.645-12.254-1.345-18.318-2.082
+	c-6.618-0.804-12.873,1.072-17.618,5.276c-4.693,4.159-7.278,10.055-7.278,16.605c0,13.061,10.132,24.52,23.065,26.089l2.043,0.246
+	c5.259,0.632,9.702,5.549,9.702,10.737c0,2.206-0.808,4.139-2.276,5.44c-1.453,1.289-3.446,1.856-5.614,1.595
+	c-6.073-0.728-12.229-1.514-18.295-2.335c-4.165-0.563-7.992,2.354-8.555,6.515c-0.564,4.162,2.353,7.992,6.515,8.555
+	c6.143,0.831,12.376,1.627,18.524,2.364c0.971,0.117,1.934,0.174,2.887,0.174c5.471,0,10.584-1.902,14.631-5.492
+	c4.697-4.167,7.392-10.297,7.392-16.817c0-12.932-10.146-24.28-23.099-25.836l-2.024-0.243c-5.161-0.627-9.687-5.763-9.687-10.992
+	C101.815,127.39,102.56,125.584,103.969,124.335z"/>
+<path d="M509.379,52.256c-1.665-1.445-3.875-2.098-6.055-1.785C362.914,70.454,220.173,73.339,79.069,59.042
+	c-4.176-0.427-7.908,2.621-8.332,6.799c-0.424,4.178,2.621,7.908,6.799,8.332C216.962,88.3,357.959,85.797,496.792,66.74v146.232
+	c-159.823,22.136-321.76,22.136-481.584,0V66.74c11.705,1.606,23.504,3.105,35.186,4.472c4.181,0.494,7.949-2.498,8.435-6.669
+	c0.488-4.171-2.498-7.948-6.669-8.435c-14.449-1.689-29.08-3.585-43.485-5.636c-2.186-0.311-4.391,0.341-6.055,1.785
+	C0.956,53.7,0,55.796,0,57.999v161.584c0,3.786,2.785,6.995,6.532,7.528c5.587,0.795,11.177,1.558,16.769,2.299v224.592
+	c0,4.199,3.405,7.604,7.604,7.604h30.436c4.199,0,7.604-3.405,7.604-7.604V234.866c62.188,6.609,124.621,9.915,187.054,9.915
+	c62.433,0,124.864-3.305,187.05-9.915v67.591c0,4.199,3.404,7.604,7.604,7.604c4.2,0,7.604-3.405,7.604-7.604v-69.275
+	c5.078-0.584,10.154-1.191,15.229-1.82v215.036h-15.229V327.804c0-4.199-3.404-7.604-7.604-7.604c-4.2,0-7.604,3.405-7.604,7.604
+	v126.198c0,4.199,3.404,7.604,7.604,7.604h30.437c4.2,0,7.604-3.405,7.604-7.604V229.412c5.593-0.741,11.184-1.505,16.772-2.3
+	c3.747-0.533,6.532-3.742,6.532-7.528V57.999C512,55.796,511.044,53.7,509.379,52.256z M53.738,446.398H38.509V231.361
+	c5.074,0.629,10.15,1.236,15.228,1.82V446.398z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/packages/web/public/icons/table.svg
+++ b/packages/web/public/icons/table.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 502 502" style="enable-background:new 0 0 502 502;" xml:space="preserve">
+<g>
+	<rect x="10" y="66.375" style="fill:#4EC9DC;" width="482" height="73.896"/>
+	<rect x="10" y="140.039" style="fill:#D1DCEB;" width="482" height="295.586"/>
+	<g>
+		<path d="M492,445.625c5.522,0,10-4.477,10-10V66.375c0-5.523-4.478-10-10-10H10c-5.522,0-10,4.477-10,10v369.25
+			c0,5.523,4.478,10,10,10H492z M482,277.832H381.5v-53.896H482V277.832z M20,223.936h100.5v53.896H20V223.936z M361.5,150.271
+			v53.664H261v-53.664H361.5z M241,150.271v53.664H140.5v-53.664H241z M140.5,223.936H241v53.896H140.5V223.936z M261,223.936h100.5
+			v53.896H261V223.936z M381.5,203.936v-53.664H482v53.664H381.5z M120.5,150.271v53.664H20v-53.664H120.5z M20,297.832h100.5
+			v53.896H20V297.832z M140.5,297.832H241v53.896H140.5V297.832z M261,297.832h100.5v53.896H261V297.832z M381.5,297.832H482v53.896
+			H381.5V297.832z M20,130.039V76.375h462v53.664H20z M20,371.729h100.5v53.896H20V371.729z M140.5,371.729H241v53.896H140.5
+			V371.729z M261,371.729h100.5v53.896H261V371.729z M482,425.625H381.5v-53.896H482V425.625z"/>
+		<path d="M209,107.625h192c5.522,0,10-4.477,10-10s-4.478-10-10-10H209c-5.522,0-10,4.477-10,10S203.478,107.625,209,107.625z"/>
+		<path d="M436,107.625h22c5.522,0,10-4.477,10-10s-4.478-10-10-10h-22c-5.522,0-10,4.477-10,10S430.478,107.625,436,107.625z"/>
+	</g>
+</g>
+</svg>
--- a/packages/web/public/icons/table2.svg
+++ b/packages/web/public/icons/table2.svg
@@ -0,0 +1,10 @@
+<?xml version='1.0' encoding='iso-8859-1'?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<g transform="translate(-326-532.36)">
+    <rect width="18" height="6" x="329" y="537.36" fill="#88bbff" stroke="#2d2d2d" stroke-linejoin="round" stroke-linecap="round" stroke-width=".837" rx=".646"/>   
+
+    <rect width="18" height="5" x="329" y="547.86" fill="#88bbff" stroke="#2d2d2d" stroke-linejoin="round" stroke-linecap="round" stroke-width=".837" rx=".646"/>   
+    
+    <path d="m507.95 46.02c-1.367-16.368-14.588-30.13-31.21-30.13h-444.96c-16.622 0-29.844 13.762-31.24 30.13h-.54v414.82c0 17.544 14.239 31.782 31.782 31.782h444.95c17.544 0 31.782-14.239 31.782-31.782v-414.82h-.571m-349.04 414.82h-127.13v-95.35h127.13v95.35m0-124.49h-127.13v-97.99h127.13v97.99m0-129.77h-127.13v-95.35h127.13v95.35m158.91 254.26h-127.13v-95.35h127.13v95.35m0-124.49h-127.13v-97.99h127.13v97.99m0-129.77h-127.13v-95.35h127.13v95.35m158.91 254.26h-127.13v-95.35h127.13v95.35m0-124.49h-127.13v-97.99h127.13v97.99m0-129.77h-127.13v-95.35h127.13v95.35" transform="matrix(.03776 0 0 .03776 328.4 534.76)" fill="#2d2d2d"/>
+</g>
+</svg>
--- a/packages/web/public/icons/trigger.svg
+++ b/packages/web/public/icons/trigger.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#ECBA16;" d="M397.241,176.552H276.303L388.414,0H247.172L114.759,264.828h104.166L114.759,512L397.241,176.552z"
+	/>
+</svg>
--- a/packages/web/public/icons/unique.svg
+++ b/packages/web/public/icons/unique.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g transform="matrix(1.25 0 0 -1.25 0 45)">
+	<g>
+		<g>
+			<path style="fill:#3B88C3;" d="M409.6-328.089c0-25.134-20.378-45.511-45.511-45.511H45.511C20.378-373.6,0-353.222,0-328.089
+				V-9.511C0,15.622,20.378,36,45.511,36h318.578C389.222,36,409.6,15.622,409.6-9.511V-328.089z"/>
+			<path style="fill:#FFFFFF;" d="M187.301-91.147h-20.81c-16.93,0-23.996,12.345-23.996,24.337
+				c0,12.356,8.818,24.348,23.996,24.348h50.085c15.178,0,23.643-10.934,23.643-25.042v-200.738
+				c0-17.647-11.287-27.511-26.465-27.511c-15.167,0-26.453,9.865-26.453,27.511V-91.147z"/>
+		</g>
+	</g>
+</g>
+</svg>
--- a/packages/web/public/icons/variable.svg
+++ b/packages/web/public/icons/variable.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 26 26" style="enable-background:new 0 0 26 26;" xml:space="preserve">
+<g>
+	<path style="fill:#030104;" d="M23,2H3C1.344,2,0,3.343,0,5v16c0,1.656,1.344,3,3,3h20c1.656,0,3-1.344,3-3V5
+		C26,3.343,24.656,2,23,2z M24,21c0,0.551-0.449,1-1,1H3c-0.551,0-1-0.449-1-1V7h22V21z"/>
+	<path style="fill:#030104;" d="M19.402,14.215c0,1.029-0.125,1.926-0.374,2.691c-0.147,0.453-0.464,1.16-0.935,2.094h1.166
+		c0.546-0.87,0.923-1.553,1.109-2.024c0.335-0.826,0.502-1.766,0.502-2.819c0-0.402-0.036-0.82-0.109-1.255
+		c-0.073-0.434-0.195-0.874-0.366-1.318c-0.135-0.359-0.261-0.642-0.376-0.847c-0.069-0.121-0.224-0.377-0.446-0.736h-1.206
+		c0.276,0.565,0.482,1.035,0.603,1.391C19.258,12.245,19.402,13.187,19.402,14.215z"/>
+	<path style="fill:#030104;" d="M6.563,14.215c0,1.029,0.125,1.926,0.374,2.691C7.084,17.359,7.4,18.066,7.871,19H6.705
+		c-0.546-0.87-0.923-1.553-1.109-2.024c-0.335-0.826-0.502-1.766-0.502-2.819c0-0.402,0.036-0.82,0.109-1.255
+		c0.073-0.434,0.195-0.874,0.366-1.318c0.135-0.359,0.261-0.642,0.376-0.847c0.07-0.122,0.224-0.378,0.447-0.737h1.206
+		c-0.276,0.565-0.482,1.035-0.603,1.391C6.707,12.245,6.563,13.187,6.563,14.215z"/>
+	<g>
+		<path style="fill:#030104;" d="M17.03,12.088c0,0.378-0.12,0.679-0.361,0.902s-0.535,0.335-0.882,0.335
+			c-0.208,0-0.413-0.026-0.615-0.078c-0.201-0.052-0.376-0.104-0.524-0.156c-0.069,0.048-0.171,0.152-0.305,0.313
+			c-0.135,0.161-0.286,0.356-0.456,0.586c0.155,0.665,0.281,1.137,0.377,1.417c0.095,0.279,0.186,0.563,0.272,0.85
+			c0.074,0.228,0.183,0.407,0.325,0.536c0.144,0.129,0.369,0.193,0.678,0.193c0.113,0,0.254-0.021,0.423-0.065
+			c0.17-0.043,0.309-0.087,0.417-0.13l-0.144,0.589c-0.43,0.184-0.805,0.317-1.125,0.399c-0.321,0.084-0.607,0.125-0.859,0.125
+			c-0.183,0-0.362-0.018-0.541-0.052c-0.178-0.035-0.341-0.098-0.487-0.189c-0.16-0.096-0.296-0.215-0.407-0.357
+			c-0.11-0.144-0.205-0.344-0.283-0.6c-0.053-0.16-0.101-0.343-0.144-0.547c-0.044-0.204-0.088-0.385-0.132-0.541
+			c-0.126,0.188-0.217,0.326-0.273,0.417c-0.057,0.092-0.139,0.22-0.247,0.385c-0.343,0.525-0.641,0.899-0.893,1.123
+			s-0.554,0.335-0.905,0.335c-0.265,0-0.49-0.089-0.677-0.267s-0.28-0.41-0.28-0.696c0-0.387,0.12-0.691,0.361-0.916
+			c0.242-0.223,0.536-0.335,0.885-0.335c0.208,0,0.408,0.025,0.6,0.075s0.372,0.105,0.541,0.166
+			c0.065-0.053,0.167-0.154,0.304-0.307c0.137-0.151,0.285-0.34,0.446-0.566c-0.145-0.581-0.262-1.02-0.354-1.315
+			c-0.093-0.295-0.186-0.588-0.282-0.879c-0.078-0.232-0.191-0.412-0.339-0.538c-0.147-0.128-0.369-0.191-0.664-0.191
+			c-0.131,0-0.276,0.023-0.437,0.068c-0.161,0.046-0.295,0.088-0.403,0.127l0.143-0.589c0.391-0.175,0.76-0.307,1.109-0.394
+			c0.35-0.088,0.642-0.131,0.876-0.131c0.213,0,0.395,0.016,0.547,0.046c0.151,0.03,0.312,0.095,0.48,0.195
+			c0.156,0.095,0.292,0.216,0.407,0.361s0.21,0.344,0.283,0.596c0.054,0.174,0.102,0.354,0.146,0.54
+			c0.044,0.188,0.081,0.348,0.112,0.482c0.091-0.139,0.186-0.282,0.283-0.43s0.181-0.278,0.25-0.391
+			c0.335-0.525,0.634-0.902,0.899-1.13c0.264-0.229,0.563-0.342,0.897-0.342c0.273,0,0.501,0.09,0.684,0.27
+			C16.939,11.568,17.03,11.802,17.03,12.088z"/>
+	</g>
+</g>
+</svg>
--- a/packages/web/public/icons/view.svg
+++ b/packages/web/public/icons/view.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 502 502" style="enable-background:new 0 0 502 502;" xml:space="preserve">
+<g>
+	<rect x="10" y="66.375" style="fill:#DC4EDC;" width="482" height="73.896"/>
+	<rect x="10" y="140.039" style="fill:#D1DCEB;" width="482" height="295.586"/>
+	<g>
+		<path d="M492,445.625c5.522,0,10-4.477,10-10V66.375c0-5.523-4.478-10-10-10H10c-5.522,0-10,4.477-10,10v369.25
+			c0,5.523,4.478,10,10,10H492z M482,277.832H381.5v-53.896H482V277.832z M20,223.936h100.5v53.896H20V223.936z M361.5,150.271
+			v53.664H261v-53.664H361.5z M241,150.271v53.664H140.5v-53.664H241z M140.5,223.936H241v53.896H140.5V223.936z M261,223.936h100.5
+			v53.896H261V223.936z M381.5,203.936v-53.664H482v53.664H381.5z M120.5,150.271v53.664H20v-53.664H120.5z M20,297.832h100.5
+			v53.896H20V297.832z M140.5,297.832H241v53.896H140.5V297.832z M261,297.832h100.5v53.896H261V297.832z M381.5,297.832H482v53.896
+			H381.5V297.832z M20,130.039V76.375h462v53.664H20z M20,371.729h100.5v53.896H20V371.729z M140.5,371.729H241v53.896H140.5
+			V371.729z M261,371.729h100.5v53.896H261V371.729z M482,425.625H381.5v-53.896H482V425.625z"/>
+		<path d="M209,107.625h192c5.522,0,10-4.477,10-10s-4.478-10-10-10H209c-5.522,0-10,4.477-10,10S203.478,107.625,209,107.625z"/>
+		<path d="M436,107.625h22c5.522,0,10-4.477,10-10s-4.478-10-10-10h-22c-5.522,0-10,4.477-10,10S430.478,107.625,436,107.625z"/>
+	</g>
+</g>
+</svg>
--- a/packages/web/public/icons/view2.svg
+++ b/packages/web/public/icons/view2.svg
@@ -0,0 +1,10 @@
+<?xml version='1.0' encoding='iso-8859-1'?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<g transform="translate(-326-532.36)">
+    <rect width="18" height="6" x="329" y="537.36" fill="#ff52ff" stroke="#4d4d4d" stroke-linejoin="round" stroke-linecap="round" stroke-width=".837" rx=".646"/>   
+
+    <rect width="18" height="5" x="329" y="547.86" fill="#ff52ff" stroke="#4d4d4d" stroke-linejoin="round" stroke-linecap="round" stroke-width=".837" rx=".646"/>   
+    
+    <path d="m507.95 46.02c-1.367-16.368-14.588-30.13-31.21-30.13h-444.96c-16.622 0-29.844 13.762-31.24 30.13h-.54v414.82c0 17.544 14.239 31.782 31.782 31.782h444.95c17.544 0 31.782-14.239 31.782-31.782v-414.82h-.571m-349.04 414.82h-127.13v-95.35h127.13v95.35m0-124.49h-127.13v-97.99h127.13v97.99m0-129.77h-127.13v-95.35h127.13v95.35m158.91 254.26h-127.13v-95.35h127.13v95.35m0-124.49h-127.13v-97.99h127.13v97.99m0-129.77h-127.13v-95.35h127.13v95.35m158.91 254.26h-127.13v-95.35h127.13v95.35m0-124.49h-127.13v-97.99h127.13v97.99m0-129.77h-127.13v-95.35h127.13v95.35" transform="matrix(.03776 0 0 .03776 328.4 534.76)" fill="#4d4d4d"/>
+</g>
+</svg>
--- a/packages/web/public/index.html
+++ b/packages/web/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>DbGate</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
--- a/packages/web/public/logo192.png
+++ b/packages/web/public/logo192.png
--- a/packages/web/public/logo512.png
+++ b/packages/web/public/logo512.png
--- a/packages/web/public/manifest.json
+++ b/packages/web/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/packages/web/public/robots.txt
+++ b/packages/web/public/robots.txt
@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
--- a/packages/web/src/App.css
+++ b/packages/web/src/App.css
@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
--- a/packages/web/src/App.js
+++ b/packages/web/src/App.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import './index.css';
+import Screen from './Screen';
+import { CurrentWidgetProvider, CurrentDatabaseProvider, OpenedTabsProvider } from './utility/globalState';
+import { SocketProvider } from './utility/SocketProvider';
+
+function App() {
+  return (
+    <CurrentWidgetProvider>
+      <CurrentDatabaseProvider>
+        <SocketProvider>
+          <OpenedTabsProvider>
+            <Screen />
+          </OpenedTabsProvider>
+        </SocketProvider>
+      </CurrentDatabaseProvider>
+    </CurrentWidgetProvider>
+  );
+}
+
+export default App;
--- a/packages/web/src/App.test.js
+++ b/packages/web/src/App.test.js
@@ -0,0 +1,11 @@
+// @ts-nocheck
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  const { getByText } = render(<App />);
+  const linkElement = getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
--- a/packages/web/src/Screen.js
+++ b/packages/web/src/Screen.js
@@ -0,0 +1,79 @@
+// @ts-nocheck
+
+import React from 'react';
+import theme from './theme';
+import styled from 'styled-components';
+import TabsPanel from './TabsPanel';
+import TabContent from './TabContent';
+import WidgetIconPanel from './widgets/WidgetIconPanel';
+import { useCurrentWidget } from './utility/globalState';
+import WidgetContainer from './widgets/WidgetContainer';
+
+const BodyDiv = styled.div`
+  position: fixed;
+  top: ${theme.tabsPanel.height}px;
+  left: ${props => theme.widgetMenu.iconSize + props.leftPanelWidth}px;
+  bottom: ${theme.statusBar.height}px;
+  right: 0;
+  background-color: ${theme.mainArea.background};
+`;
+
+const IconBar = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: ${theme.statusBar.height}px;
+  width: ${theme.widgetMenu.iconSize}px;
+  background-color: ${theme.widgetMenu.background};
+`;
+
+const LeftPanel = styled.div`
+  position: fixed;
+  top: 0;
+  left: ${theme.widgetMenu.iconSize}px;
+  bottom: ${theme.statusBar.height}px;
+  width: ${theme.leftPanel.width}px;
+  background-color: ${theme.leftPanel.background};
+  display: flex;
+`;
+
+const TabsPanelContainer = styled.div`
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: ${props => theme.widgetMenu.iconSize + props.leftPanelWidth}px;
+  height: ${theme.tabsPanel.height}px;
+  right: 0;
+  background-color: ${theme.tabsPanel.background};
+`;
+
+const StausBar = styled.div`
+  position: fixed;
+  height: ${theme.statusBar.height}px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: ${theme.statusBar.background};
+`;
+
+export default function Screen() {
+  const currentWidget = useCurrentWidget();
+  const leftPanelWidth = currentWidget ? theme.leftPanel.width : 0;
+  return (
+    <>
+      <IconBar>
+        <WidgetIconPanel />
+      </IconBar>
+      {!!currentWidget && (
+        <LeftPanel>
+          <WidgetContainer />
+        </LeftPanel>
+      )}
+      <TabsPanelContainer leftPanelWidth={leftPanelWidth}>
+        <TabsPanel></TabsPanel>
+      </TabsPanelContainer>
+      <BodyDiv leftPanelWidth={leftPanelWidth}><TabContent/></BodyDiv>
+      <StausBar></StausBar>
+    </>
+  );
+}
--- a/packages/web/src/TabContent.js
+++ b/packages/web/src/TabContent.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from 'styled-components';
+import theme from './theme';
+import tabs from './tabs';
+
+import { useOpenedTabs } from './utility/globalState';
+
+export default function TabContent() {
+  const files = useOpenedTabs();
+
+  const selectedTab = files.find(x => x.selected);
+  if (!selectedTab) return null;
+
+  const TabComponent = tabs[selectedTab.tabComponent];
+  if (TabComponent) return <TabComponent {...selectedTab.props} />;
+
+  return null;
+}
--- a/packages/web/src/TabsPanel.js
+++ b/packages/web/src/TabsPanel.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import styled from 'styled-components';
+import theme from './theme';
+
+import { useOpenedTabs, useSetOpenedTabs } from './utility/globalState';
+import { getIconImage } from './icons';
+
+// const files = [
+//   { name: 'app.js' },
+//   { name: 'BranchCategory', type: 'table', selected: true },
+//   { name: 'ApplicationList' },
+// ];
+
+const FileTabItem = styled.div`
+  border-right: 1px solid white;
+  padding-left: 15px;
+  padding-right: 15px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    color: ${theme.tabsPanel.hoverFont};
+  }
+  background-color: ${props =>
+    // @ts-ignore
+    props.selected ? theme.mainArea.background : 'inherit'};
+`;
+
+const FileNameWrapper = styled.span`
+  margin-left: 5px;
+`;
+
+export default function TabsPanel() {
+  const tabs = useOpenedTabs();
+  const setOpenedTabs = useSetOpenedTabs();
+
+  const handleTabClick = tabid => {
+    setOpenedTabs(files =>
+      files.map(x => ({
+        ...x,
+        selected: x.tabid == tabid,
+      }))
+    );
+  };
+  const handleMouseUp = (e, tabid) => {
+    if (e.button == 1) {
+      setOpenedTabs(files => files.filter(x => x.tabid != tabid));
+    }
+  };
+  return (
+    <>
+      {tabs.map(tab => (
+        <FileTabItem
+          {...tab}
+          key={tab.tabid}
+          onClick={() => handleTabClick(tab.tabid)}
+          onMouseUp={e => handleMouseUp(e, tab.tabid)}
+        >
+          {getIconImage(tab.icon)}
+          <FileNameWrapper>{tab.title}</FileNameWrapper>
+        </FileTabItem>
+      ))}
+    </>
+  );
+}
--- a/packages/web/src/appobj/AppObjectList.js
+++ b/packages/web/src/appobj/AppObjectList.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+import { showMenu } from '../modals/DropDownMenu';
+import { AppObjectCore } from './AppObjects';
+import { useSetOpenedTabs } from '../utility/globalState';
+
+export function AppObjectList({ list, makeAppObj, SubItems = undefined, onObjectClick = undefined }) {
+  const setOpenedTabs = useSetOpenedTabs();
+  return (list || []).map(x => {
+    const appobj = makeAppObj(x, { setOpenedTabs });
+    if (onObjectClick) appobj.onClick = onObjectClick;
+    let res = <AppObjectCore key={appobj.key} data={x} makeAppObj={makeAppObj} {...appobj} />;
+    if (SubItems) {
+      res = (
+        <>
+          {res}
+          <SubItems data={x} />
+        </>
+      );
+    }
+    return res;
+  });
+}
--- a/packages/web/src/appobj/AppObjects.js
+++ b/packages/web/src/appobj/AppObjects.js
@@ -0,0 +1,52 @@
+// @ts-nocheck
+
+import React from 'react';
+import styled from 'styled-components';
+import { showMenu } from '../modals/DropDownMenu';
+import { useSetOpenedTabs } from '../utility/globalState';
+
+const AppObjectDiv = styled.div`
+  padding: 5px;
+  &:hover {
+    background-color: lightblue;
+  }
+  cursor: pointer;
+  white-space: nowrap;
+`;
+
+const AppObjectSpan = styled.span`
+  white-space: nowrap;
+  font-weight: ${props => (props.isBold ? 'bold' : 'normal')};
+`;
+
+const IconWrap = styled.span`
+  margin-right: 10px;
+`;
+
+export function AppObjectCore({ title, Icon, Menu, data, makeAppObj, onClick, isBold, component = 'div' }) {
+  const setOpenedTabs = useSetOpenedTabs();
+
+  const handleContextMenu = event => {
+    if (!Menu) return;
+
+    event.preventDefault();
+    showMenu(event.pageX, event.pageY, <Menu data={data} makeAppObj={makeAppObj} setOpenedTabs={setOpenedTabs} />);
+  };
+
+  const Component = component == 'div' ? AppObjectDiv : AppObjectSpan;
+
+  return (
+    <Component onContextMenu={handleContextMenu} onClick={onClick ? () => onClick(data) : undefined} isBold={isBold}>
+      <IconWrap>
+        <Icon />
+      </IconWrap>
+      {title}
+    </Component>
+  );
+}
+
+export function AppObjectControl({ data, makeAppObj, component = 'div' }) {
+  const setOpenedTabs = useSetOpenedTabs();
+  const appobj = makeAppObj(data, { setOpenedTabs });
+  return <AppObjectCore {...appobj} data={data} makeAppObj={makeAppObj} component={component} />;
+}
--- a/packages/web/src/appobj/columnAppObject.js
+++ b/packages/web/src/appobj/columnAppObject.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { ColumnIcon, SequenceIcon } from '../icons';
+import { DropDownMenuItem } from '../modals/DropDownMenu';
+import showModal from '../modals/showModal';
+import ConnectionModal from '../modals/ConnectionModal';
+import axios from '../utility/axios';
+import { openNewTab } from '../utility/common';
+import { useSetOpenedTabs } from '../utility/globalState';
+
+/** @param columnProps {import('dbgate').ColumnInfo} */
+function getColumnIcon(columnProps) {
+  if (columnProps.autoIncrement) return SequenceIcon;
+  return ColumnIcon;
+}
+
+/** @param columnProps {import('dbgate').ColumnInfo} */
+export default function columnAppObject(columnProps, { setOpenedTabs }) {
+  const title = columnProps.columnName;
+  const key = title;
+  const Icon = getColumnIcon(columnProps);
+  const isBold = columnProps.notNull;
+
+  return { title, key, Icon, isBold };
+}
--- a/packages/web/src/appobj/connectionAppObject.js
+++ b/packages/web/src/appobj/connectionAppObject.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { MicrosoftIcon, SqliteIcon, PostgreSqlIcon, MySqlIcon, ServerIcon } from '../icons';
+import { DropDownMenuItem } from '../modals/DropDownMenu';
+import showModal from '../modals/showModal';
+import ConnectionModal from '../modals/ConnectionModal';
+import axios from '../utility/axios';
+
+function getIcon(engine) {
+  switch (engine) {
+    case 'mssql':
+      return MicrosoftIcon;
+    case 'sqlite':
+      return SqliteIcon;
+    case 'postgres':
+      return PostgreSqlIcon;
+    case 'mysql':
+      return MySqlIcon;
+  }
+  return ServerIcon;
+}
+
+function Menu({ data, makeAppObj }) {
+  const handleEdit = () => {
+    showModal(modalState => <ConnectionModal modalState={modalState} connection={data} />);
+  };
+  const handleDelete = () => {
+    axios.post('connections/delete', data);
+  };
+  return (
+    <>
+      <DropDownMenuItem onClick={handleEdit}>Edit</DropDownMenuItem>
+      <DropDownMenuItem onClick={handleDelete}>Delete</DropDownMenuItem>
+    </>
+  );
+}
+
+export default function connectionAppObject({ _id, server, displayName, engine }) {
+  const title = displayName || server;
+  const key = _id;
+  const Icon = getIcon(engine);
+
+  return { title, key, Icon, Menu };
+}
--- a/packages/web/src/appobj/constraintAppObject.js
+++ b/packages/web/src/appobj/constraintAppObject.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { PrimaryKeyIcon, ForeignKeyIcon } from '../icons';
+import { DropDownMenuItem } from '../modals/DropDownMenu';
+import showModal from '../modals/showModal';
+import ConnectionModal from '../modals/ConnectionModal';
+import axios from '../utility/axios';
+import { openNewTab } from '../utility/common';
+import { useSetOpenedTabs } from '../utility/globalState';
+
+/** @param props {import('dbgate').ConstraintInfo} */
+function getConstraintIcon(props) {
+  if (props.constraintType == 'primaryKey') return PrimaryKeyIcon;
+  if (props.constraintType == 'foreignKey') return ForeignKeyIcon;
+  return null;
+}
+
+/** @param props {import('dbgate').ConstraintInfo} */
+export default function constraintAppObject(props, { setOpenedTabs }) {
+  const title = props.constraintName;
+  const key = title;
+  const Icon = getConstraintIcon(props);
+
+  return { title, key, Icon };
+}
--- a/packages/web/src/appobj/databaseAppObject.js
+++ b/packages/web/src/appobj/databaseAppObject.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { DatabaseIcon } from '../icons';
+import { DropDownMenuItem } from '../modals/DropDownMenu';
+import showModal from '../modals/showModal';
+import ConnectionModal from '../modals/ConnectionModal';
+import axios from '../utility/axios';
+
+function Menu({ data, makeAppObj }) {
+  const handleEdit = () => {
+    showModal(modalState => <ConnectionModal modalState={modalState} connection={data} />);
+  };
+  const handleDelete = () => {
+    axios.post('connections/delete', data);
+  };
+  return (
+    <>
+      <DropDownMenuItem onClick={handleEdit}>Edit</DropDownMenuItem>
+      <DropDownMenuItem onClick={handleDelete}>Delete</DropDownMenuItem>
+    </>
+  );
+}
+
+export default function databaseAppObject({ name }) {
+  const title = name;
+  const key = name;
+  const Icon = DatabaseIcon;
+
+  return { title, key, Icon, Menu };
+}
--- a/packages/web/src/appobj/tableAppObject.js
+++ b/packages/web/src/appobj/tableAppObject.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import { TableIcon } from '../icons';
+import { DropDownMenuItem } from '../modals/DropDownMenu';
+import showModal from '../modals/showModal';
+import ConnectionModal from '../modals/ConnectionModal';
+import axios from '../utility/axios';
+import { openNewTab } from '../utility/common';
+import { useSetOpenedTabs } from '../utility/globalState';
+
+function openTableDetail(setOpenedTabs, tabComponent, { schemaName, pureName, conid, database }) {
+  openNewTab(setOpenedTabs, {
+    title: pureName,
+    icon: 'table2.svg',
+    tabComponent,
+    props: {
+      schemaName,
+      pureName,
+      conid,
+      database,
+    },
+  });
+}
+
+function Menu({ data, makeAppObj, setOpenedTabs }) {
+  const handleOpenData = () => {
+    openTableDetail(setOpenedTabs, 'TableDataTab', data);
+  };
+  const handleOpenStructure = () => {
+    openTableDetail(setOpenedTabs, 'TableStructureTab', data);
+  };
+  const handleOpenCreateScript = () => {
+    openTableDetail(setOpenedTabs, 'TableCreateScriptTab', data);
+  };
+  return (
+    <>
+      <DropDownMenuItem onClick={handleOpenData}>Open data</DropDownMenuItem>
+      <DropDownMenuItem onClick={handleOpenStructure}>Open structure</DropDownMenuItem>
+      <DropDownMenuItem onClick={handleOpenCreateScript}>Create SQL</DropDownMenuItem>
+    </>
+  );
+}
+
+export default function tableAppObject({ conid, database, pureName, schemaName }, { setOpenedTabs }) {
+  const title = schemaName ? `${schemaName}.${pureName}` : pureName;
+  const key = title;
+  const Icon = TableIcon;
+  const onClick = ({ schemaName, pureName }) => {
+    openTableDetail(setOpenedTabs, 'TableDataTab', {
+      schemaName,
+      pureName,
+      conid,
+      database,
+    });
+  };
+
+  return { title, key, Icon, Menu, onClick };
+}
--- a/packages/web/src/datagrid/DataGrid.js
+++ b/packages/web/src/datagrid/DataGrid.js
@@ -0,0 +1,252 @@
+import React from 'react';
+import useFetch from '../utility/useFetch';
+import styled from 'styled-components';
+import theme from '../theme';
+import { HorizontalScrollBar, VerticalScrollBar } from './ScrollBars';
+import useDimensions from '../utility/useDimensions';
+import { SeriesSizes } from './SeriesSizes';
+
+const GridContainer = styled.div`
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+`;
+
+const Table = styled.table`
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 20px;
+  right: 20px;
+  overflow: scroll;
+  border-collapse: collapse;
+`;
+const TableHead = styled.thead`
+  // display: block;
+  // width: 300px;
+`;
+const TableBody = styled.tbody`
+  // display: block;
+  // overflow: auto;
+  // height: 100px;
+`;
+const TableHeaderRow = styled.tr`
+  // height: 35px;
+`;
+const TableBodyRow = styled.tr`
+  // height: 35px;
+  background-color: #ffffff;
+  &:nth-child(6n + 4) {
+    background-color: #ebebeb;
+  }
+  &:nth-child(6n + 7) {
+    background-color: #ebf5ff;
+  }
+`;
+const TableHeaderCell = styled.td`
+  font-weight: bold;
+  border: 1px solid #c0c0c0;
+  // border-collapse: collapse;
+  text-align: left;
+  padding: 2px;
+  background-color: #f6f7f9;
+  overflow: hidden;
+`;
+const TableBodyCell = styled.td`
+  font-weight: normal;
+  border: 1px solid #c0c0c0;
+  // border-collapse: collapse;
+  padding: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+
+export default function DataGrid({ params }) {
+  const data = useFetch({
+    url: 'tables/table-data',
+    params,
+  });
+  const { rows, columns } = data || {};
+  const [firstVisibleRowScrollIndex, setFirstVisibleRowScrollIndex] = React.useState(0);
+  const [firstVisibleColumnScrollIndex, setFirstVisibleColumnScrollIndex] = React.useState(0);
+
+  const [headerRowRef, { height: rowHeight }] = useDimensions();
+  const [tableBodyRef] = useDimensions();
+  const [containerRef, { height: containerHeight, width: containerWidth }] = useDimensions();
+
+  const columnSizes = React.useMemo(() => countColumnSizes(), [data, containerWidth]);
+
+  console.log('containerWidth', containerWidth);
+
+  const gridScrollAreaHeight = containerHeight - 2 * rowHeight;
+  const gridScrollAreaWidth = containerWidth - columnSizes.frozenSize;
+
+  const visibleRowCountUpperBound = Math.ceil(gridScrollAreaHeight / Math.floor(rowHeight));
+  const visibleRowCountLowerBound = Math.floor(gridScrollAreaHeight / Math.ceil(rowHeight));
+  //   const visibleRowCountUpperBound = 20;
+  //   const visibleRowCountLowerBound = 20;
+
+  if (!columns || !rows) return null;
+  const rowCountNewIncluded = rows.length;
+
+  const handleRowScroll = value => {
+    setFirstVisibleRowScrollIndex(value);
+  };
+
+  const handleColumnScroll = value => {
+    setFirstVisibleColumnScrollIndex(value);
+  };
+
+  function countColumnSizes() {
+    let canvas = document.createElement('canvas');
+    let context = canvas.getContext('2d');
+
+    //return this.context.measureText(txt).width;
+    const columnSizes = new SeriesSizes();
+    if (!rows || !columns) return columnSizes;
+
+    console.log('countColumnSizes', rows.length, containerWidth);
+
+    columnSizes.maxSize = (containerWidth * 2) / 3;
+    columnSizes.count = columns.length;
+
+    // columnSizes.setExtraordinaryIndexes(this.getHiddenColumnIndexes(), this.getFrozenColumnIndexes());
+    columnSizes.setExtraordinaryIndexes([], []);
+
+    for (let colIndex = 0; colIndex < columns.length; colIndex++) {
+        //this.columnSizes.PutSizeOverride(col, this.columns[col].Name.length * 8);
+        let column = columns[colIndex];
+
+        // if (column.columnClientObject != null && column.columnClientObject.notNull) context.font = "bold 14px Helvetica";
+        // else context.font = "14px Helvetica";
+        context.font = "bold 14px Helvetica";
+
+        let text = column.name;
+        let headerWidth = context.measureText(text).width + 32;
+
+        // if (column.columnClientObject != null && column.columnClientObject.icon != null) headerWidth += 16;
+        // if (this.getFilterOnColumn(column.uniquePath)) headerWidth += 16;
+        // if (this.getSortOrder(column.uniquePath)) headerWidth += 16;
+
+        columnSizes.putSizeOverride(colIndex, headerWidth);
+    }
+
+    // let headerWidth = this.rowHeaderWidthDefault;
+    // if (this.rowCount) headerWidth = context.measureText(this.rowCount.toString()).width + 8;
+    // this.rowHeaderWidth = this.rowHeaderWidthDefault;
+    // if (headerWidth > this.rowHeaderWidth) this.rowHeaderWidth = headerWidth;
+
+    context.font = '14px Helvetica';
+    for (let row of data.rows) {
+      for (let colIndex = 0; colIndex < columns.length; colIndex++) {
+        let colName = columns[colIndex].name;
+        let text = row[colName];
+        let width = context.measureText(text).width + 8;
+        // console.log('colName', colName, text, width);
+        columnSizes.putSizeOverride(colIndex, width);
+        // let colName = this.columns[colIndex].uniquePath;
+        // let text: string = row[colName].gridText;
+        // let width = context.measureText(text).width + 8;
+        // if (row[colName].dataPrefix) width += context.measureText(row[colName].dataPrefix).width + 3;
+        // this.columnSizes.putSizeOverride(colIndex, width);
+      }
+    }
+
+    // for (let modelIndex = 0; modelIndex < this.columns.length; modelIndex++) {
+    //     let width = getHashValue(this.widthHashPrefix + this.columns[modelIndex].uniquePath);
+    //     if (width) this.columnSizes.putSizeOverride(modelIndex, _.toNumber(width), true);
+    // }
+
+    columnSizes.buildIndex();
+    return columnSizes;
+  }
+
+  //   console.log('visibleRowCountUpperBound', visibleRowCountUpperBound);
+  //   console.log('gridScrollAreaHeight', gridScrollAreaHeight);
+  //   console.log('containerHeight', containerHeight);
+
+  const visibleColumnCount = columnSizes.getVisibleScrollCount(firstVisibleColumnScrollIndex, gridScrollAreaWidth);
+  console.log('visibleColumnCount', visibleColumnCount);
+
+  const visibleRealColumnIndexes = [];
+  const modelIndexes = {};
+  const realColumns = [];
+
+  // frozen columns
+  for (let colIndex = 0; colIndex < columnSizes.frozenCount; colIndex++) {
+    visibleRealColumnIndexes.push(colIndex);
+  }
+  // scroll columns
+  for (
+    let colIndex = firstVisibleColumnScrollIndex;
+    colIndex < firstVisibleColumnScrollIndex + visibleColumnCount;
+    colIndex++
+  ) {
+    visibleRealColumnIndexes.push(colIndex + columnSizes.frozenCount);
+  }
+
+  // real columns
+  for (let colIndex of visibleRealColumnIndexes) {
+    let modelColumnIndex = columnSizes.realToModel(colIndex);
+    modelIndexes[colIndex] = modelColumnIndex;
+
+    let col = columns[modelColumnIndex];
+    if (!col) continue;
+    const widthNumber = columnSizes.getSizeByRealIndex(colIndex);
+    realColumns.push({
+      ...col,
+      widthPx: `${widthNumber}px`,
+    });
+  }
+
+  console.log('visibleRealColumnIndexes', visibleRealColumnIndexes);
+
+  return (
+    <GridContainer ref={containerRef}>
+      <Table>
+        <TableHead>
+          <TableHeaderRow ref={headerRowRef}>
+            {realColumns.map(col => (
+              <TableHeaderCell
+                key={col.name}
+                style={{ width: col.widthPx, minWidth: col.widthPx, maxWidth: col.widthPx }}
+              >
+                {col.name}
+              </TableHeaderCell>
+            ))}
+          </TableHeaderRow>
+        </TableHead>
+        <TableBody ref={tableBodyRef}>
+          {rows
+            .slice(firstVisibleRowScrollIndex, firstVisibleRowScrollIndex + visibleRowCountUpperBound)
+            .map((row, index) => (
+              <TableBodyRow key={firstVisibleRowScrollIndex + index}>
+                {realColumns.map(col => (
+                  <TableBodyCell
+                    key={col.name}
+                    style={{ width: col.widthPx, minWidth: col.widthPx, maxWidth: col.widthPx }}
+                  >
+                    {row[col.name]}
+                  </TableBodyCell>
+                ))}
+              </TableBodyRow>
+            ))}
+        </TableBody>
+      </Table>
+      <HorizontalScrollBar
+        minimum={0}
+        maximum={columns.length - 1}
+        viewportRatio={gridScrollAreaWidth / columnSizes.getVisibleScrollSizeSum()}
+        onScroll={handleColumnScroll}
+      />
+      <VerticalScrollBar
+        minimum={0}
+        maximum={rowCountNewIncluded - visibleRowCountUpperBound + 2}
+        onScroll={handleRowScroll}
+        viewportRatio={visibleRowCountUpperBound / rowCountNewIncluded}
+      />
+    </GridContainer>
+  );
+}
--- a/packages/web/src/datagrid/ScrollBars.js
+++ b/packages/web/src/datagrid/ScrollBars.js
@@ -0,0 +1,222 @@
+import _ from 'lodash';
+import React from 'react';
+import styled from 'styled-components';
+import useDimensions from '../utility/useDimensions';
+
+const StyledHorizontalScrollBar = styled.div`
+  overflow-x: scroll;
+  height: 16px;
+  position: absolute;
+  bottom: 0;
+  //left: 100px;
+  // right: 20px;
+  right: 0;
+  left: 0;
+`;
+
+const StyledHorizontalScrollContent = styled.div``;
+
+const StyledVerticalScrollBar = styled.div`
+  overflow-y: scroll;
+  width: 20px;
+  position: absolute;
+  right: 0px;
+  width: 20px;
+  bottom: 16px;
+  // bottom: 0;
+  top: 0;
+`;
+
+const StyledVerticalScrollContent = styled.div``;
+
+export function HorizontalScrollBar({
+  onScroll = undefined,
+  valueToSet = undefined,
+  valueToSetDate = undefined,
+  minimum,
+  maximum,
+  viewportRatio = 0.5,
+}) {
+  const [ref, { width }, node] = useDimensions();
+  const contentSize = Math.round(width / viewportRatio);
+
+  React.useEffect(() => {
+    const position01 = (valueToSet - minimum) / (maximum - minimum + 1);
+    const position = position01 * (contentSize - width);
+    if (node) node.scrollLeft = Math.floor(position);
+  }, [valueToSetDate]);
+
+  const handleScroll = () => {
+    const position = node.scrollLeft;
+    const ratio = position / (contentSize - width);
+    if (ratio < 0) return 0;
+    let res = ratio * (maximum - minimum + 1) + minimum;
+    onScroll(Math.floor(res + 0.3));
+  };
+
+  return (
+    <StyledHorizontalScrollBar ref={ref} onScroll={handleScroll}>
+      <StyledHorizontalScrollContent style={{ width: `${contentSize}px` }}>&nbsp;</StyledHorizontalScrollContent>
+    </StyledHorizontalScrollBar>
+  );
+}
+
+export function VerticalScrollBar({
+  onScroll,
+  valueToSet = undefined,
+  valueToSetDate = undefined,
+  minimum,
+  maximum,
+  viewportRatio = 0.5,
+}) {
+  const [ref, { height }, node] = useDimensions();
+  const contentSize = Math.round(height / viewportRatio);
+
+  React.useEffect(() => {
+    const position01 = (valueToSet - minimum) / (maximum - minimum + 1);
+    const position = position01 * (contentSize - height);
+    if (node) node.scrollTop = Math.floor(position);
+  }, [valueToSetDate]);
+
+  const handleScroll = () => {
+    const position = node.scrollTop;
+    const ratio = position / (contentSize - height);
+    if (ratio < 0) return 0;
+    let res = ratio * (maximum - minimum + 1) + minimum;
+    onScroll(Math.floor(res + 0.3));
+  };
+
+  return (
+    <StyledVerticalScrollBar ref={ref} onScroll={handleScroll}>
+      <StyledVerticalScrollContent style={{ height: `${contentSize}px` }}>&nbsp;</StyledVerticalScrollContent>
+    </StyledVerticalScrollBar>
+  );
+}
+
+// export interface IScrollBarProps {
+//     viewportRatio: number;
+//     minimum: number;
+//     maximum: number;
+//     containerStyle: any;
+//     onScroll?: any;
+// }
+
+// export abstract class ScrollBarBase extends React.Component<IScrollBarProps, {}> {
+//     domScrollContainer: Element;
+//     domScrollContent: Element;
+//     contentSize: number;
+//     containerResizedBind: any;
+
+//     constructor(props) {
+//         super(props);
+//         this.containerResizedBind = this.containerResized.bind(this);
+//     }
+
+//     componentDidMount() {
+//         $(this.domScrollContainer).scroll(this.onScroll.bind(this));
+//         createResizeDetector(this.domScrollContainer, this.containerResized.bind(this));
+//         window.addEventListener('resize', this.containerResizedBind);
+//         this.updateContentSize();
+//     }
+
+//     componentWillUnmount() {
+//         deleteResizeDetector(this.domScrollContainer);
+//         window.removeEventListener('resize', this.containerResizedBind);
+//     }
+
+//     onScroll() {
+//         if (this.props.onScroll) {
+//             this.props.onScroll(this.value);
+//         }
+//     }
+
+//     get value(): number {
+//         let position = this.getScrollPosition();
+//         let ratio = position / (this.contentSize - this.getContainerSize());
+//         if (ratio < 0) return 0;
+//         let res = ratio * (this.props.maximum - this.props.minimum + 1) + this.props.minimum;
+//         return Math.floor(res + 0.3);
+//     }
+
+//     set value(value: number) {
+//         let position01 = (value - this.props.minimum) / (this.props.maximum - this.props.minimum + 1);
+//         let position = position01 * (this.contentSize - this.getContainerSize());
+//         this.setScrollPosition(Math.floor(position));
+//     }
+
+//     containerResized() {
+//         this.setContentSizeField();
+//         this.updateContentSize();
+//     }
+
+//     setContentSizeField() {
+//         let lastContentSize = this.contentSize;
+//         this.contentSize = Math.round(this.getContainerSize() / this.props.viewportRatio);
+//         if (_.isNaN(this.contentSize)) this.contentSize = 0;
+//         if (this.contentSize > 1000000 && detectBrowser() == BrowserType.Firefox) this.contentSize = 1000000;
+//         if (lastContentSize != this.contentSize) {
+//             this.updateContentSize();
+//         }
+//     }
+
+//     abstract getContainerSize(): number;
+//     abstract updateContentSize();
+//     abstract getScrollPosition(): number;
+//     abstract setScrollPosition(value: number);
+// }
+
+// export class HorizontalScrollBar extends ScrollBarBase {
+//     render() {
+//         this.setContentSizeField();
+
+//         return <div className='ReactGridHorizontalScrollBar' ref={x => this.domScrollContainer = x} style={this.props.containerStyle}>
+//             <div className='ReactGridHorizontalScrollContent' ref={x => this.domScrollContent = x} style={{ width: this.contentSize }}>
+//                 &nbsp;
+//                 </div>
+//         </div>;
+//     }
+
+//     getContainerSize(): number {
+//         return $(this.domScrollContainer).width();
+//     }
+
+//     updateContentSize() {
+//         $(this.domScrollContent).width(this.contentSize);
+//     }
+
+//     getScrollPosition() {
+//         return $(this.domScrollContainer).scrollLeft();
+//     }
+
+//     setScrollPosition(value: number) {
+//         $(this.domScrollContainer).scrollLeft(value);
+//     }
+// }
+
+// export class VerticalScrollBar extends ScrollBarBase {
+//     render() {
+//         this.setContentSizeField();
+
+//         return <div className='ReactGridVerticalScrollBar' ref={x => this.domScrollContainer = x} style={this.props.containerStyle}>
+//             <div className='ReactGridVerticalScrollContent' ref={x => this.domScrollContent = x} style={{ height: this.contentSize }}>
+//                 &nbsp;
+//                 </div>
+//         </div>;
+//     }
+
+//     getContainerSize(): number {
+//         return $(this.domScrollContainer).height();
+//     }
+
+//     updateContentSize() {
+//         $(this.domScrollContent).height(this.contentSize);
+//     }
+
+//     getScrollPosition() {
+//         return $(this.domScrollContainer).scrollTop();
+//     }
+
+//     setScrollPosition(value: number) {
+//         $(this.domScrollContainer).scrollTop(value);
+//     }
+// }
--- a/packages/web/src/datagrid/SeriesSizes.js
+++ b/packages/web/src/datagrid/SeriesSizes.js
@@ -0,0 +1,340 @@
+import _ from 'lodash';
+
+export class SeriesSizeItem {
+  constructor() {
+    this.scrollIndex = -1;
+    this.frozenIndex = -1;
+    this.modelIndex = 0;
+    this.size = 0;
+    this.position = 0;
+  }
+
+  // modelIndex;
+  // size;
+  // position;
+
+  get endPosition() {
+    return this.position + this.size;
+  }
+}
+
+export class SeriesSizes {
+  constructor() {
+    this.scrollItems = [];
+    this.sizeOverridesByModelIndex = {};
+    this.positions = [];
+    this.scrollIndexes = [];
+    this.frozenItems = [];
+    this.hiddenAndFrozenModelIndexes = null;
+    this.frozenModelIndexes = null;
+
+    this.count = 0;
+    this.maxSize = 1000;
+    this.defaultSize = 50;
+  }
+
+  // private sizeOverridesByModelIndex: { [id] } = {};
+  // count;
+  // defaultSize;
+  // maxSize;
+  // private hiddenAndFrozenModelIndexes[] = [];
+  // private frozenModelIndexes[] = [];
+  // private hiddenModelIndexes[] = [];
+  // private scrollItems: SeriesSizeItem[] = [];
+  // private positions[] = [];
+  // private scrollIndexes[] = [];
+  // private frozenItems: SeriesSizeItem[] = [];
+
+  get scrollCount() {
+    return this.count - (this.hiddenAndFrozenModelIndexes != null ? this.hiddenAndFrozenModelIndexes.length : 0);
+  }
+  get frozenCount() {
+    return this.frozenModelIndexes != null ? this.frozenModelIndexes.length : 0;
+  }
+  get frozenSize() {
+    return _.sumBy(this.frozenItems, x => x.size);
+  }
+  get realCount() {
+    return this.frozenCount + this.scrollCount;
+  }
+
+  putSizeOverride(modelIndex, size, sizeByUser = false) {
+    if (this.maxSize && size > this.maxSize && !sizeByUser) {
+      size = this.maxSize;
+    }
+
+    let currentSize = this.sizeOverridesByModelIndex[modelIndex];
+    if (sizeByUser || !currentSize || size > currentSize) {
+      this.sizeOverridesByModelIndex[modelIndex] = size;
+    }
+    // if (!_.has(this.sizeOverridesByModelIndex, modelIndex))
+    //     this.sizeOverridesByModelIndex[modelIndex] = size;
+    // if (size > this.sizeOverridesByModelIndex[modelIndex])
+    //     this.sizeOverridesByModelIndex[modelIndex] = size;
+  }
+  buildIndex() {
+    this.scrollItems = [];
+    this.scrollIndexes = _.filter(
+      _.map(this.intKeys(this.sizeOverridesByModelIndex), x => this.modelToReal(x) - this.frozenCount),
+      x => x >= 0
+    );
+    this.scrollIndexes.sort();
+    let lastScrollIndex = -1;
+    let lastEndPosition = 0;
+    this.scrollIndexes.forEach(scrollIndex => {
+      let modelIndex = this.realToModel(scrollIndex + this.frozenCount);
+      let size = this.sizeOverridesByModelIndex[modelIndex];
+      let item = new SeriesSizeItem();
+      item.scrollIndex = scrollIndex;
+      item.modelIndex = modelIndex;
+      item.size = size;
+      item.position = lastEndPosition + (scrollIndex - lastScrollIndex - 1) * this.defaultSize;
+      this.scrollItems.push(item);
+      lastScrollIndex = scrollIndex;
+      lastEndPosition = item.endPosition;
+    });
+    this.positions = _.map(this.scrollItems, x => x.position);
+    this.frozenItems = [];
+    let lastpos = 0;
+    for (let i = 0; i < this.frozenCount; i++) {
+      let modelIndex = this.frozenModelIndexes[i];
+      let size = this.getSizeByModelIndex(modelIndex);
+      let item = new SeriesSizeItem();
+      item.frozenIndex = i;
+      item.modelIndex = modelIndex;
+      item.size = size;
+      item.position = lastpos;
+      this.frozenItems.push(item);
+      lastpos += size;
+    }
+  }
+
+  getScrollIndexOnPosition(position) {
+    let itemOrder = _.sortedIndex(this.positions, position);
+    if (this.positions[itemOrder] == position) return itemOrder;
+    if (itemOrder == 0) return Math.floor(position / this.defaultSize);
+    if (position <= this.scrollItems[itemOrder - 1].endPosition) return this.scrollItems[itemOrder - 1].scrollIndex;
+    return (
+      Math.floor((position - this.scrollItems[itemOrder - 1].position) / this.defaultSize) +
+      this.scrollItems[itemOrder - 1].scrollIndex
+    );
+  }
+  getFrozenIndexOnPosition(position) {
+    this.frozenItems.forEach(function(item) {
+      if (position >= item.position && position <= item.endPosition) return item.frozenIndex;
+    });
+    return -1;
+  }
+  // getSizeSum(startScrollIndex, endScrollIndex) {
+  //     let order1 = _.sortedIndexOf(this.scrollIndexes, startScrollIndex);
+  //     let order2 = _.sortedIndexOf(this.scrollIndexes, endScrollIndex);
+  //     let count = endScrollIndex - startScrollIndex;
+  //     if (order1 < 0)
+  //         order1 = ~order1;
+  //     if (order2 < 0)
+  //         order2 = ~order2;
+  //     let result = 0;
+  //     for (let i = order1; i <= order2; i++) {
+  //         if (i < 0)
+  //             continue;
+  //         if (i >= this.scrollItems.length)
+  //             continue;
+  //         let item = this.scrollItems[i];
+  //         if (item.scrollIndex < startScrollIndex)
+  //             continue;
+  //         if (item.scrollIndex >= endScrollIndex)
+  //             continue;
+  //         result += item.size;
+  //         count--;
+  //     }
+  //     result += count * this.defaultSize;
+  //     return result;
+  // }
+  getSizeByModelIndex(modelIndex) {
+    if (_.has(this.sizeOverridesByModelIndex, modelIndex)) return this.sizeOverridesByModelIndex[modelIndex];
+    return this.defaultSize;
+  }
+  getSizeByScrollIndex(scrollIndex) {
+    return this.getSizeByRealIndex(scrollIndex + this.frozenCount);
+  }
+  getSizeByRealIndex(realIndex) {
+    let modelIndex = this.realToModel(realIndex);
+    return this.getSizeByModelIndex(modelIndex);
+  }
+  removeSizeOverride(realIndex) {
+    let modelIndex = this.realToModel(realIndex);
+    delete this.sizeOverridesByModelIndex[modelIndex];
+  }
+  getScroll(sourceScrollIndex, targetScrollIndex) {
+    if (sourceScrollIndex < targetScrollIndex) {
+      return -_.sum(
+        _.map(_.range(sourceScrollIndex, targetScrollIndex - sourceScrollIndex), x => this.getSizeByScrollIndex(x))
+      );
+    } else {
+      return _.sum(
+        _.map(_.range(targetScrollIndex, sourceScrollIndex - targetScrollIndex), x => this.getSizeByScrollIndex(x))
+      );
+    }
+  }
+  modelIndexIsInScrollArea(modelIndex) {
+    let realIndex = this.modelToReal(modelIndex);
+    return realIndex >= this.frozenCount;
+  }
+  getTotalScrollSizeSum() {
+    let scrollSizeOverrides = _.map(
+      _.filter(this.intKeys(this.sizeOverridesByModelIndex), x => this.modelIndexIsInScrollArea(x)),
+      x => this.sizeOverridesByModelIndex[x]
+    );
+    return _.sum(scrollSizeOverrides) + (this.count - scrollSizeOverrides.length) * this.defaultSize;
+  }
+  getVisibleScrollSizeSum() {
+    let scrollSizeOverrides = _.map(
+      _.filter(this.intKeys(this.sizeOverridesByModelIndex), x => !_.includes(this.hiddenAndFrozenModelIndexes, x)),
+      x => this.sizeOverridesByModelIndex[x]
+    );
+    return (
+      _.sum(scrollSizeOverrides) +
+      (this.count - this.hiddenModelIndexes.length - scrollSizeOverrides.length) * this.defaultSize
+    );
+  }
+  intKeys(value) {
+    return _.keys(value).map(x => _.parseInt(x));
+  }
+  getPositionByRealIndex(realIndex) {
+    if (realIndex < 0) return 0;
+    if (realIndex < this.frozenCount) return this.frozenItems[realIndex].position;
+    return this.getPositionByScrollIndex(realIndex - this.frozenCount);
+  }
+  getPositionByScrollIndex(scrollIndex) {
+    let order = _.sortedIndex(this.scrollIndexes, scrollIndex);
+    if (this.scrollIndexes[order] == scrollIndex) return this.scrollItems[order].position;
+    order--;
+    if (order < 0) return scrollIndex * this.defaultSize;
+    return (
+      this.scrollItems[order].endPosition + (scrollIndex - this.scrollItems[order].scrollIndex - 1) * this.defaultSize
+    );
+  }
+  getVisibleScrollCount(firstVisibleIndex, viewportSize) {
+    let res = 0;
+    let index = firstVisibleIndex;
+    let count = 0;
+    while (res < viewportSize && index <= this.scrollCount) {
+      console.log('this.getSizeByScrollIndex(index)', this.getSizeByScrollIndex(index));
+      res += this.getSizeByScrollIndex(index);
+      index++;
+      count++;
+    }
+    console.log('getVisibleScrollCount', firstVisibleIndex, viewportSize, count);
+    return count;
+  }
+  getVisibleScrollCountReversed(lastVisibleIndex, viewportSize) {
+    let res = 0;
+    let index = lastVisibleIndex;
+    let count = 0;
+    while (res < viewportSize && index >= 0) {
+      res += this.getSizeByScrollIndex(index);
+      index--;
+      count++;
+    }
+    return count;
+  }
+  invalidateAfterScroll(oldFirstVisible, newFirstVisible, invalidate, viewportSize) {
+    if (newFirstVisible > oldFirstVisible) {
+      let oldVisibleCount = this.getVisibleScrollCount(oldFirstVisible, viewportSize);
+      let newVisibleCount = this.getVisibleScrollCount(newFirstVisible, viewportSize);
+      for (let i = oldFirstVisible + oldVisibleCount - 1; i <= newFirstVisible + newVisibleCount; i++) {
+        invalidate(i + this.frozenCount);
+      }
+    } else {
+      for (let i = newFirstVisible; i <= oldFirstVisible; i++) {
+        invalidate(i + this.frozenCount);
+      }
+    }
+  }
+  isWholeInView(firstVisibleIndex, index, viewportSize) {
+    let res = 0;
+    let testedIndex = firstVisibleIndex;
+    while (res < viewportSize && testedIndex < this.count) {
+      res += this.getSizeByScrollIndex(testedIndex);
+      if (testedIndex == index) return res <= viewportSize;
+      testedIndex++;
+    }
+    return false;
+  }
+  scrollInView(firstVisibleIndex, scrollIndex, viewportSize) {
+    if (this.isWholeInView(firstVisibleIndex, scrollIndex, viewportSize)) {
+      return firstVisibleIndex;
+    }
+    if (scrollIndex < firstVisibleIndex) {
+      return scrollIndex;
+    }
+    let res = 0;
+    let testedIndex = scrollIndex;
+    while (res < viewportSize && testedIndex >= 0) {
+      let size = this.getSizeByScrollIndex(testedIndex);
+      if (res + size > viewportSize) return testedIndex + 1;
+      testedIndex--;
+      res += size;
+    }
+    if (res >= viewportSize && testedIndex < scrollIndex) return testedIndex + 1;
+    return firstVisibleIndex;
+  }
+  resize(realIndex, newSize) {
+    if (realIndex < 0) return;
+    let modelIndex = this.realToModel(realIndex);
+    if (modelIndex < 0) return;
+    this.sizeOverridesByModelIndex[modelIndex] = newSize;
+    this.buildIndex();
+  }
+  setExtraordinaryIndexes(hidden, frozen) {
+    //this._hiddenAndFrozenModelIndexes = _.clone(hidden);
+    hidden = hidden.filter(x => x >= 0);
+    frozen = frozen.filter(x => x >= 0);
+
+    hidden.sort((a, b) => a - b);
+    frozen.sort((a, b) => a - b);
+    this.frozenModelIndexes = _.filter(frozen, x => !_.includes(hidden, x));
+    this.hiddenModelIndexes = _.filter(hidden, x => !_.includes(frozen, x));
+    this.hiddenAndFrozenModelIndexes = _.concat(hidden, this.frozenModelIndexes);
+    this.frozenModelIndexes.sort((a, b) => a - b);
+    if (this.hiddenAndFrozenModelIndexes.length == 0) this.hiddenAndFrozenModelIndexes = null;
+    if (this.frozenModelIndexes.length == 0) this.frozenModelIndexes = null;
+    this.buildIndex();
+  }
+  realToModel(realIndex) {
+    if (this.hiddenAndFrozenModelIndexes == null && this.frozenModelIndexes == null) return realIndex;
+    if (realIndex < 0) return -1;
+    if (realIndex < this.frozenCount && this.frozenModelIndexes != null) return this.frozenModelIndexes[realIndex];
+    if (this.hiddenAndFrozenModelIndexes == null) return realIndex;
+    realIndex -= this.frozenCount;
+    for (let hidItem of this.hiddenAndFrozenModelIndexes) {
+      if (realIndex < hidItem) return realIndex;
+      realIndex++;
+    }
+    return realIndex;
+  }
+  modelToReal(modelIndex) {
+    if (this.hiddenAndFrozenModelIndexes == null && this.frozenModelIndexes == null) return modelIndex;
+    if (modelIndex < 0) return -1;
+    let frozenIndex = this.frozenModelIndexes != null ? _.indexOf(this.frozenModelIndexes, modelIndex) : -1;
+    if (frozenIndex >= 0) return frozenIndex;
+    if (this.hiddenAndFrozenModelIndexes == null) return modelIndex;
+    let hiddenIndex = _.sortedIndex(this.hiddenAndFrozenModelIndexes, modelIndex);
+    if (this.hiddenAndFrozenModelIndexes[hiddenIndex] == modelIndex) return -1;
+    if (hiddenIndex >= 0) return modelIndex - hiddenIndex + this.frozenCount;
+    return modelIndex;
+  }
+  getFrozenPosition(frozenIndex) {
+    return this.frozenItems[frozenIndex].position;
+  }
+  hasSizeOverride(modelIndex) {
+    return _.has(this.sizeOverridesByModelIndex, modelIndex);
+  }
+  isVisible(testedRealIndex, firstVisibleScrollIndex, viewportSize) {
+    if (testedRealIndex < 0) return false;
+    if (testedRealIndex >= 0 && testedRealIndex < this.frozenCount) return true;
+    let scrollIndex = testedRealIndex - this.frozenCount;
+    let onPageIndex = scrollIndex - firstVisibleScrollIndex;
+    return onPageIndex >= 0 && onPageIndex < this.getVisibleScrollCount(firstVisibleScrollIndex, viewportSize);
+  }
+}
--- a/packages/web/src/icons.js
+++ b/packages/web/src/icons.js
@@ -0,0 +1,97 @@
+import React from 'react';
+import _ from 'lodash';
+
+export function getIconImage(src, props) {
+  const { size = 16, style = {}, className, title } = props || {};
+  if (!src) return null;
+  if (src.endsWith('.svg')) {
+    src = '/icons/' + src;
+  }
+  //   if (props.alignToLine) {
+  //     style["position"] = "relative";
+  //     style["top"] = "-2px";
+  //     style["marginRight"] = "4px";
+  //   }
+  return <img width={size} height={size} src={src} style={style} className={className} title={title} />;
+}
+
+export function getFontIcon(fontIconSpec, props = {}) {
+  let iconClass = fontIconSpec;
+  if (!iconClass) return null;
+  var parts = iconClass.split(' ');
+  var name = parts[0];
+  parts = parts.slice(1);
+
+  var className = props.className || '';
+
+  // if (_.startsWith(name, 'bs-')) className += ` glyphicon glyphicon-${name.substr(3)}`;
+  if (_.startsWith(name, 'fa-')) className += ` fas fa-${name.substr(3)}`;
+
+  if (_.includes(parts, 'spin')) className += ' fa-spin';
+
+  var style = props.style || {};
+
+  var last = parts[parts.length - 1];
+  if (last && last != 'spin') {
+    style['color'] = last;
+  }
+
+  return <i className={className} style={style} title={props.title} />;
+}
+
+export const TableIcon = props => getIconImage('table2.svg', props);
+export const ViewIcon = props => getIconImage('view2.svg', props);
+export const DatabaseIcon = props => getIconImage('database.svg', props);
+export const ServerIcon = props => getIconImage('server.svg', props);
+
+export const MicrosoftIcon = props => getIconImage('microsoft.svg', props);
+export const MySqlIcon = props => getIconImage('mysql.svg', props);
+export const PostgreSqlIcon = props => getIconImage('postgresql.svg', props);
+export const SqliteIcon = props => getIconImage('sqlite.svg', props);
+
+export const ProcedureIcon = props => getIconImage('procedure2.svg', props);
+export const FunctionIcon = props => getIconImage('function.svg', props);
+export const TriggerIcon = props => getIconImage('trigger.svg', props);
+
+export const HomeIcon = props => getIconImage('home.svg', props);
+export const PrimaryKeyIcon = props => getIconImage('primarykey.svg', props);
+export const ForeignKeyIcon = props => getIconImage('foreignkey.svg', props);
+export const ComplexKeyIcon = props => getIconImage('complexkey.svg', props);
+export const VariableIcon = props => getIconImage('variable.svg', props);
+export const UniqueIcon = props => getIconImage('unique.svg', props);
+export const IndexIcon = props => getIconImage('index.svg', props);
+
+export const StartIcon = props => getIconImage('start.svg', props);
+export const DownCircleIcon = props => getIconImage('down_circle.svg', props);
+
+export const ColumnIcon = props => getIconImage('column.svg', props);
+
+export const SqlIcon = props => getIconImage('sql.svg', props);
+export const ExcelIcon = props => getIconImage('excel.svg', props);
+export const DiagramIcon = props => getIconImage('diagram.svg', props);
+export const QueryDesignIcon = props => getIconImage('querydesign.svg', props);
+export const LocalDbIcon = props => getIconImage('localdb.svg', props);
+export const CsvIcon = props => getIconImage('csv.svg', props);
+export const ChangeSetIcon = props => getIconImage('changeset.svg', props);
+export const BinaryFileIcon = props => getIconImage('binaryfile.svg', props);
+
+export const ReferenceIcon = props => getIconImage('reference.svg', props);
+export const LinkIcon = props => getIconImage('link.svg', props);
+
+export const SequenceIcon = props => getIconImage('sequence.svg', props);
+export const CheckIcon = props => getIconImage('check.svg', props);
+
+export const LinkedServerIcon = props => getIconImage('linkedserver.svg', props);
+
+export const EmptyIcon = props => getIconImage('data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=', props);
+
+export const TimesRedIcon = props => getFontIcon('fa-times red', props);
+export const TimesGreenCircleIcon = props => getFontIcon('fa-times-circle green', props);
+export const GrayFilterIcon = props => getFontIcon('fa-filter lightgray', props);
+export const ExclamationTriangleIcon = props => getFontIcon('fa-exclamation-triangle', props);
+export const HourGlassIcon = props => getFontIcon('fa-hourglass', props);
+export const InfoBlueCircleIcon = props => getFontIcon('fa-info-circle blue', props);
+
+export const SpinnerIcon = props => getFontIcon('fa-spinner spin', props);
+
+export const FontIcon = ({ name }) => <i className={`fas ${name}`}></i>;
--- a/packages/web/src/index.css
+++ b/packages/web/src/index.css
@@ -0,0 +1,15 @@
+body {
+  font-family: -apple-system,BlinkMacSystemFont,Segoe WPC,Segoe UI,HelveticaNeue-Light,Ubuntu,Droid Sans,sans-serif;
+  font-size: 14px;
+  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif; 
+    */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
--- a/packages/web/src/index.js
+++ b/packages/web/src/index.js
@@ -0,0 +1,19 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import "@fortawesome/fontawesome-free/css/all.css";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
+
+import "ace-builds/src-noconflict/mode-sql";
+import "ace-builds/src-noconflict/mode-mysql";
+import "ace-builds/src-noconflict/mode-pgsql";
+import "ace-builds/src-noconflict/mode-sqlserver";
+import "ace-builds/src-noconflict/theme-github";
+
+ReactDOM.render(<App />, document.getElementById("root"));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();
--- a/packages/web/src/modals/ConnectionModal.js
+++ b/packages/web/src/modals/ConnectionModal.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import axios from '../utility/axios';
+import ModalBase from './ModalBase';
+import { FormRow, FormButton, FormTextField, FormSelectField, FormSubmit } from '../utility/forms';
+import { TextField } from '../utility/inputs';
+import { Formik, Form } from 'formik';
+// import FormikForm from '../utility/FormikForm';
+
+export default function ConnectionModal({ modalState, connection = undefined }) {
+  const [sqlConnectResult, setSqlConnectResult] = React.useState('Not connected');
+
+  const handleTest = async values => {
+    const resp = await axios.post('connections/test', values);
+    const { error, version } = resp.data;
+
+    setSqlConnectResult(error || version);
+  };
+
+  const handleSubmit = async values => {
+    const resp = await axios.post('connections/save', values);
+
+    modalState.close();
+  };
+  return (
+    <ModalBase modalState={modalState}>
+      <h2>{connection ? 'Edit connection' : 'Add connection'}</h2>
+      <Formik onSubmit={handleSubmit} initialValues={connection || { server: 'localhost', engine: 'mssql' }}>
+        <Form>
+          <FormSelectField label="Database engine" name="engine">
+            <option value="mssql">Microsoft SQL Server</option>
+            <option value="mysql">MySQL</option>
+            <option value="postgres">Postgre SQL</option>
+          </FormSelectField>
+          <FormTextField label="Server" name="server" />
+          <FormTextField label="Port" name="port" />
+          <FormTextField label="User" name="user" />
+          <FormTextField label="Password" name="password" />
+          <FormTextField label="Display name" name="displayName" />
+
+          <FormRow>
+            <FormButton text="Test" onClick={handleTest} />
+            <FormSubmit text="Save" />
+          </FormRow>
+        </Form>
+      </Formik>
+      <div>Connect result: {sqlConnectResult}</div>
+    </ModalBase>
+  );
+}
--- a/packages/web/src/modals/DropDownMenu.js
+++ b/packages/web/src/modals/DropDownMenu.js
@@ -0,0 +1,291 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import styled from 'styled-components';
+import { LoadingToken, sleep } from '../utility/common';
+
+const ContextMenuStyled = styled.ul`
+  position: absolute;
+  list-style: none;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  padding: 5px 0;
+  margin: 2px 0 0;
+  font-size: 14px;
+  text-align: left;
+  min-width: 160px;
+  z-index: 1050;
+`;
+
+const KeyTextSpan = styled.span`
+  font-style: italic;
+  font-weight: bold;
+  text-align: right;
+  margin-left: 16px;
+`;
+
+const StyledLink = styled.a`
+  padding: 3px 20px;
+  line-height: 1.42;
+  display: block;
+  white-space: nop-wrap;
+  color: #262626;
+
+  &:hover {
+    background-color: #f5f5f5;
+    text-decoration: none;
+    color: #262626;
+  }
+`;
+
+export function DropDownMenuItem({ children, keyText = undefined, onClick }) {
+  const handleMouseEnter = () => {
+    // if (this.context.parentMenu) this.context.parentMenu.closeSubmenu();
+  };
+
+  return (
+    <li onMouseEnter={handleMouseEnter}>
+      <StyledLink onClick={onClick}>
+        {children}
+        {keyText && <KeyTextSpan>{keyText}</KeyTextSpan>}
+      </StyledLink>
+    </li>
+  );
+}
+
+// (DropDownMenuItem as any).contextTypes = {
+//     parentMenu: PropTypes.any
+// };
+
+// interface IDropDownMenuLinkProps {
+//     href: string;
+//     keyText?: string;
+// }
+
+// export class DropDownMenuLink extends React.Component<IDropDownMenuLinkProps> {
+//     render() {
+//         return <li onMouseEnter={this.handleMouseEnter.bind(this)}><Link forceSimpleLink href={this.props.href}>{this.props.children}{this.props.keyText && <span className='context_menu_key_text'>{this.props.keyText}</span>}</Link></li>;
+//     }
+
+//     handleMouseEnter() {
+//         if (this.context.parentMenu) this.context.parentMenu.closeSubmenu();
+//     }
+// }
+
+// (DropDownMenuLink as any).contextTypes = {
+//     parentMenu: PropTypes.any
+// };
+
+// // export function DropDownMenu(props: { children?: any }) {
+// //     return <div className="btn-group">
+// //         <button type="button" className="btn btn-default dropdown-toggle btn-xs" data-toggle="dropdown"
+// //             aria-haspopup="true" aria-expanded="false" tabIndex={-1}>
+// //             <span className="caret"></span>
+// //         </button>
+// //         <ul className="dropdown-menu">
+// //             {props.children}
+// //         </ul>
+// //     </div>
+// // }
+
+// export function DropDownMenuDivider(props: {}) {
+//     return <li className="dropdown-divider"></li>;
+// }
+
+// export class DropDownSubmenuItem extends React.Component<IDropDownSubmenuItemProps> {
+//     menuInstance: ContextMenu;
+//     domObject: Element;
+
+//     render() {
+//         return <li onMouseEnter={this.handleMouseEnter.bind(this)} ref={x => this.domObject = x}><Link onClick={() => null}>{this.props.title} <IconSpan icon='fa-caret-right' /></Link></li>;
+//     }
+
+//     closeSubmenu() {
+//         if (this.menuInstance != null) {
+//             this.menuInstance.close();
+//             this.menuInstance = null;
+//         }
+
+//         if (this.context.parentMenu) this.context.parentMenu.submenu = null;
+//     }
+
+//     closeOtherSubmenu() {
+//         if (this.context.parentMenu) this.context.parentMenu.closeSubmenu();
+//     }
+
+//     handleMouseEnter() {
+//         this.closeOtherSubmenu();
+
+//         let offset = $(this.domObject).offset();
+//         let width = $(this.domObject).width();
+
+//         this.menuInstance = showMenuCore(offset.left + width, offset.top, this);
+//         if (this.context.parentMenu) this.context.parentMenu.submenu = this;
+//     }
+// }
+
+// (DropDownSubmenuItem as any).contextTypes = {
+//     parentMenu: PropTypes.any
+// };
+
+// export class DropDownMenu extends React.Component<IDropDownMenuProps, IDropDownMenuState> {
+//     domButton: Element;
+
+//     constructor(props) {
+//         super(props);
+//         this.state = {
+//             isExpanded: false,
+//         };
+//     }
+
+//     render() {
+//         let className = this.props.classOverride || ('btn btn-xs btn-default drop_down_menu_button ' + (this.props.className || ''));
+//         return <button id={this.props.buttonElementId} type="button" className={className} tabIndex={-1} onClick={this.menuButtonClick} ref={x => this.domButton = x}>
+//             { this.props.title  }
+//             { this.props.iconSpan || <span className="caret"></span>}
+//         </button>
+//     }
+
+//     @autobind
+//     menuButtonClick() {
+//         if (this.state.isExpanded) {
+//             hideMenu();
+//             return;
+//         }
+//         let offset = $(this.domButton).offset();
+//         let height = $(this.domButton).height();
+//         this.setState({ isExpanded: true })
+//         showMenu(offset.left, offset.top + height + 5, this, () => this.setState({ isExpanded: false }));
+//     }
+// }
+
+export function ContextMenu({ left, top, children }) {
+  return <ContextMenuStyled style={{ left: `${left}px`, top: `${top}px` }}>{children}</ContextMenuStyled>;
+}
+
+// export class ContextMenu extends React.Component<IContextMenuProps> {
+//     domObject: Element;
+//     submenu: DropDownSubmenuItem;
+
+//     render() {
+//         return <ul className='context_menu' style={{ left: `${this.props.left}px`, top: `${this.props.top}px` }} ref={x => this.domObject = x} onContextMenu={e => e.preventDefault()}>
+//             {this.props.children}
+//         </ul>;
+//     }
+
+//     componentDidMount() {
+//         fixPopupPlacement(this.domObject);
+//     }
+
+//     getChildContext() {
+//         return { parentMenu: this };
+//     }
+
+//     closeSubmenu() {
+//         if (this.submenu) {
+//             this.submenu.closeSubmenu();
+//         }
+//     }
+
+//     close() {
+//         this.props.container.remove();
+//         this.closeSubmenu();
+//     }
+// }
+
+// (ContextMenu as any).childContextTypes = {
+//     parentMenu: PropTypes.any
+// };
+
+let menuHandle = null;
+let hideToken = null;
+
+function showMenuCore(left, top, contentHolder, closeCallback = null) {
+  let container = document.createElement('div');
+  let handle = {
+    container,
+    closeCallback,
+    close() {
+      this.container.remove();
+    },
+  };
+  document.body.appendChild(container);
+  ReactDOM.render(
+    <ContextMenu left={left} top={top}>
+      {contentHolder}
+    </ContextMenu>,
+    container
+  );
+  return handle;
+}
+
+export function showMenu(left, top, contentHolder, closeCallback = null) {
+  hideMenu();
+  if (hideToken) hideToken.cancel();
+  menuHandle = showMenuCore(left, top, contentHolder, closeCallback);
+  captureMouseDownEvents();
+}
+
+function captureMouseDownEvents() {
+  document.addEventListener('mousedown', mouseDownListener, true);
+}
+
+function releaseMouseDownEvents() {
+  document.removeEventListener('mousedown', mouseDownListener, true);
+}
+
+function captureMouseUpEvents() {
+  document.addEventListener('mouseup', mouseUpListener, true);
+}
+
+function releaseMouseUpEvents() {
+  document.removeEventListener('mouseup', mouseUpListener, true);
+}
+
+async function mouseDownListener(e) {
+  captureMouseUpEvents();
+}
+
+async function mouseUpListener(e) {
+  let token = new LoadingToken();
+  hideToken = token;
+  await sleep(0);
+  if (token.isCanceled) return;
+  hideMenu();
+}
+
+function hideMenu() {
+  if (menuHandle == null) return;
+  menuHandle.close();
+  if (menuHandle.closeCallback) menuHandle.closeCallback();
+  menuHandle = null;
+  releaseMouseDownEvents();
+  releaseMouseUpEvents();
+}
+
+function getElementOffset(element) {
+  var de = document.documentElement;
+  var box = element.getBoundingClientRect();
+  var top = box.top + window.pageYOffset - de.clientTop;
+  var left = box.left + window.pageXOffset - de.clientLeft;
+  return { top: top, left: left };
+}
+
+export function fixPopupPlacement(element) {
+  const { width, height } = element.getBoundingClientRect();
+  let offset = getElementOffset(element);
+
+  let newLeft = null;
+  let newTop = null;
+
+  if (offset.left + width > window.innerWidth) {
+    newLeft = offset.left - width;
+  }
+  if (offset.top + height > window.innerHeight) {
+    newTop = offset.top - height;
+  }
+
+  if (newLeft != null) element.style.left = `${newLeft}px`;
+  if (newTop != null) element.style.top = `${newTop}px`;
+}
--- a/packages/web/src/modals/ModalBase.js
+++ b/packages/web/src/modals/ModalBase.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import Modal from 'react-modal';
+import styled from 'styled-components';
+
+// const StyledModal = styled(Modal)`
+//   position: absolute;
+//   top: 40px;
+//   left: 40px;
+//   right: 40px;
+//   bottom: 40px;
+//   border: 1px solid #ccc;
+//   background: #fff;
+//   overflow: auto;
+//   webkitoverflowscrolling: touch;
+//   borderradius: 4px;
+//   outline: none;
+//   padding: 20px;
+// `;
+
+const StyledModal = styled(Modal)`
+  border: 1px solid #ccc;
+  background: #fff;
+  overflow: auto;
+  webkitoverflowscrolling: touch;
+  borderradius: 4px;
+  outline: none;
+  padding: 20px;
+
+  width: 50%;
+  margin: auto;
+  margin-top: 15vh;
+`;
+
+export default function ModalBase({ modalState, children }) {
+  return (
+    <StyledModal isOpen={modalState.isOpen} onRequestClose={modalState.close}>
+      {children}
+    </StyledModal>
+  );
+}
--- a/packages/web/src/modals/showModal.js
+++ b/packages/web/src/modals/showModal.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import useModalState from './useModalState';
+
+function ShowModalComponent({ renderModal, container }) {
+  const modalState = useModalState(true);
+  if (!modalState.isOpen) {
+    container.remove();
+  }
+  return renderModal(modalState);
+}
+
+export default function showModal(renderModal) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  ReactDOM.render(<ShowModalComponent renderModal={renderModal} container={container} />, container);
+}
--- a/packages/web/src/modals/useModalState.js
+++ b/packages/web/src/modals/useModalState.js
@@ -0,0 +1,8 @@
+import React from 'react';
+
+export default function useModalState(isOpenDefault = false) {
+  const [isOpen, setOpen] = React.useState(isOpenDefault);
+  const close = () => setOpen(false);
+  const open = () => setOpen(true);
+  return { isOpen, open, close };
+}
--- a/packages/web/src/react-app-env.d.ts
+++ b/packages/web/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
--- a/packages/web/src/serviceWorker.js
+++ b/packages/web/src/serviceWorker.js
@@ -0,0 +1,137 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.0/8 are considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl, {
+    headers: { 'Service-Worker': 'script' }
+  })
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}
--- a/packages/web/src/setupTests.js
+++ b/packages/web/src/setupTests.js
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';
--- a/packages/web/src/tabs/TableCreateScriptTab.js
+++ b/packages/web/src/tabs/TableCreateScriptTab.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import useFetch from '../utility/useFetch';
+import styled from 'styled-components';
+import theme from '../theme';
+import AceEditor from 'react-ace';
+import useDimensions from '../utility/useDimensions';
+
+const Wrapper = styled.div`
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+`;
+
+export default function TableCreateScriptTab({ conid, database, schemaName, pureName }) {
+  const sql = `SELECT * FROM MOJE`;
+  const [containerRef, { height, width }] = useDimensions();
+
+  /** @type {import('dbgate').TableInfo} */
+  const tableInfo = useFetch({
+    url: 'tables/table-info',
+    params: { conid, database, schemaName, pureName },
+  });
+
+  return (
+    <Wrapper ref={containerRef}>
+      <AceEditor
+        mode="sql"
+        theme="github"
+        // onChange={onChange}
+        name="UNIQUE_ID_OF_DIV"
+        editorProps={{ $blockScrolling: true }}
+        value={sql}
+        readOnly
+        fontSize="11pt"
+        width={`${width}px`}
+        height={`${height}px`}
+      />
+    </Wrapper>
+  );
+}
--- a/packages/web/src/tabs/TableDataTab.js
+++ b/packages/web/src/tabs/TableDataTab.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import useFetch from '../utility/useFetch';
+import styled from 'styled-components';
+import theme from '../theme';
+import DataGrid from '../datagrid/DataGrid';
+
+export default function TableDataTab({ conid, database, schemaName, pureName }) {
+  return <DataGrid params={{ conid, database, schemaName, pureName }} />;
+}
--- a/packages/web/src/tabs/TableStructureTab.js
+++ b/packages/web/src/tabs/TableStructureTab.js
@@ -0,0 +1,123 @@
+import React from 'react';
+import styled from 'styled-components';
+import _ from 'lodash';
+import theme from '../theme';
+import useFetch from '../utility/useFetch';
+import ObjectListControl from '../utility/ObjectListControl';
+import { TableColumn } from '../utility/TableControl';
+import columnAppObject from '../appobj/columnAppObject';
+import constraintAppObject from '../appobj/constraintAppObject';
+
+const WhitePage = styled.div`
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: white;
+`;
+
+export default function TableStructureTab({ conid, database, schemaName, pureName }) {
+  /** @type {import('dbgate').TableInfo} */
+  const tableInfo = useFetch({
+    url: 'tables/table-info',
+    params: { conid, database, schemaName, pureName },
+  });
+  if (!tableInfo) return null;
+  const { columns, primaryKey, foreignKeys, dependencies } = tableInfo;
+  return (
+    <WhitePage>
+      <ObjectListControl
+        collection={columns.map((x, index) => ({ ...x, ordinal: index + 1 }))}
+        makeAppObj={columnAppObject}
+        title="Columns"
+      >
+        <TableColumn
+          fieldName="notNull"
+          header="Not NULL"
+          sortable={true}
+          formatter={row => (row.notNull ? 'YES' : 'NO')}
+        />
+        <TableColumn fieldName="dataType" header="Data Type" sortable={true} />
+        <TableColumn fieldName="defaultValue" header="Default value" sortable={true} />
+        <TableColumn
+          fieldName="isSparse"
+          header="Is Sparse"
+          sortable={true}
+          formatter={row => (row.isSparse ? 'YES' : 'NO')}
+        />
+        <TableColumn fieldName="computedExpression" header="Computed Expression" sortable={true} />
+        <TableColumn
+          fieldName="isPersisted"
+          header="Is Persisted"
+          sortable={true}
+          formatter={row => (row.isPersisted ? 'YES' : 'NO')}
+        />
+        {/* {_.includes(dbCaps.columnListOptionalColumns, 'referencedTableNamesFormatted') && (
+          <TableColumn fieldName="referencedTableNamesFormatted" header="References" sortable={true} />
+        )}
+        <TableColumn
+          fieldName="actions"
+          header=""
+          formatter={row => (
+            <span>
+              <Link
+                linkElementId={encodeHtmlId(`button_delete_column_${row.column.name}`)}
+                onClick={() => this.deleteColumn(row)}
+              >
+                Delete
+              </Link>{' '}
+              |{' '}
+              <Link
+                linkElementId={encodeHtmlId(`button_edit_column__${row.column.name}`)}
+                onClick={() => this.editColumn(row)}
+              >
+                Edit
+              </Link>
+            </span>
+          )}
+        /> */}
+      </ObjectListControl>
+
+      <ObjectListControl collection={_.compact([primaryKey])} makeAppObj={constraintAppObject} title="Primary key">
+        <TableColumn
+          fieldName="columns"
+          header="Columns"
+          formatter={row => row.columns.map(x => x.columnName).join(', ')}
+        />
+      </ObjectListControl>
+
+      <ObjectListControl collection={foreignKeys} makeAppObj={constraintAppObject} title="Foreign keys">
+        <TableColumn
+          fieldName="baseColumns"
+          header="Base columns"
+          formatter={row => row.columns.map(x => x.columnName).join(', ')}
+        />
+        <TableColumn fieldName="refTable" header="Referenced table" formatter={row => row.refTableName} />
+        <TableColumn
+          fieldName="refColumns"
+          header="Referenced columns"
+          formatter={row => row.columns.map(x => x.refColumnName).join(', ')}
+        />
+        <TableColumn fieldName="updateAction" header="ON UPDATE" />
+        <TableColumn fieldName="deleteAction" header="ON DELETE" />
+      </ObjectListControl>
+
+      <ObjectListControl collection={dependencies} makeAppObj={constraintAppObject} title="Dependencies">
+        <TableColumn
+          fieldName="baseColumns"
+          header="Base columns"
+          formatter={row => row.columns.map(x => x.columnName).join(', ')}
+        />
+        <TableColumn fieldName="baseTable" header="Base table" formatter={row => row.pureName} />
+        <TableColumn
+          fieldName="refColumns"
+          header="Referenced columns"
+          formatter={row => row.columns.map(x => x.refColumnName).join(', ')}
+        />
+        <TableColumn fieldName="updateAction" header="ON UPDATE" />
+        <TableColumn fieldName="deleteAction" header="ON DELETE" />
+      </ObjectListControl>
+    </WhitePage>
+  );
+}
--- a/packages/web/src/tabs/index.js
+++ b/packages/web/src/tabs/index.js
@@ -0,0 +1,9 @@
+import TableDataTab from './TableDataTab';
+import TableStructureTab from './TableStructureTab';
+import TableCreateScriptTab from './TableCreateScriptTab'
+
+export default {
+  TableDataTab,
+  TableStructureTab,
+  TableCreateScriptTab,
+};
--- a/packages/web/src/theme.js
+++ b/packages/web/src/theme.js
@@ -0,0 +1,26 @@
+export default {
+  widgetMenu: {
+    iconSize: 60,
+    background: "#222",
+    iconFontSize: "23pt",
+    iconFontColor: "#eee",
+    backgroundHover: "#555",
+    backgroundSelected: "#4CAF50",
+  },
+  leftPanel: {
+    width: 300,
+    background: "#ccc"
+  },
+  tabsPanel: {
+    height: 30,
+    background: "#ddd",
+    hoverFont: "#338"
+  },
+  statusBar: {
+    height: 20,
+    background: "#00c"
+  },
+  mainArea: {
+    background: "#eee"
+  }
+};
--- a/packages/web/src/utility/ObjectListControl.js
+++ b/packages/web/src/utility/ObjectListControl.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import useFetch from '../utility/useFetch';
+import styled from 'styled-components';
+import theme from '../theme';
+import TableControl, { TableColumn } from './TableControl';
+import { AppObjectControl } from '../appobj/AppObjects';
+import columnAppObject from '../appobj/columnAppObject';
+
+const ObjectListWrapper = styled.div`
+  margin-bottom: 20px;
+`;
+
+const ObjectListHeader = styled.div`
+  background-color: #ebedef;
+  padding: 5px;
+`;
+
+const ObjectListHeaderTitle = styled.span`
+  font-weight: bold;
+  margin-left: 5px;
+`;
+
+const ObjectListBody = styled.div`
+  margin: 20px;
+  //   margin-left: 20px;
+  //   margin-right: 20px;
+  //   margin-top: 3px;
+`;
+
+export default function ObjectListControl({ collection = [], title, showIfEmpty = false, makeAppObj, children }) {
+  if (collection.length == 0 && !showIfEmpty) return null;
+
+  return (
+    <ObjectListWrapper>
+      <ObjectListHeader>
+        <ObjectListHeaderTitle>{title}</ObjectListHeaderTitle>
+      </ObjectListHeader>
+      <ObjectListBody>
+        <TableControl rows={collection}>
+          <TableColumn
+            fieldName="displayName"
+            header="Name"
+            formatter={col => <AppObjectControl data={col} makeAppObj={makeAppObj} component="span" />}
+          />
+          {children}
+        </TableControl>
+      </ObjectListBody>
+    </ObjectListWrapper>
+  );
+}
--- a/packages/web/src/utility/SocketProvider.js
+++ b/packages/web/src/utility/SocketProvider.js
@@ -0,0 +1,18 @@
+import io from 'socket.io-client';
+import React from 'react';
+
+const SocketContext = React.createContext(null);
+
+export function SocketProvider({ children }) {
+  const [socket, setSocket] = React.useState();
+  React.useEffect(() => {
+    // const newSocket = io('http://localhost:3000', { transports: ['websocket'] });
+    const newSocket = io('http://localhost:3000');
+    setSocket(newSocket);
+  }, []);
+  return <SocketContext.Provider value={socket}>{children}</SocketContext.Provider>;
+}
+
+export default function useSocket() {
+  return React.useContext(SocketContext);
+}
--- a/packages/web/src/utility/TableControl.js
+++ b/packages/web/src/utility/TableControl.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import _ from 'lodash';
+import useFetch from '../utility/useFetch';
+import styled from 'styled-components';
+import theme from '../theme';
+
+const Table = styled.table`
+  border-collapse: collapse;
+  width: 100%;
+`;
+const TableHead = styled.thead``;
+const TableBody = styled.tbody``;
+const TableHeaderRow = styled.tr``;
+const TableBodyRow = styled.tr``;
+const TableHeaderCell = styled.td`
+  border: 1px solid #e8eef4;
+  background-color: #e8eef4;
+  padding: 5px;
+`;
+const TableBodyCell = styled.td`
+  border: 1px solid #e8eef4;
+  padding: 5px;
+`;
+
+export function TableColumn({ fieldName, header, sortable = false, formatter = undefined }) {
+  return <></>;
+}
+
+function format(row, col) {
+  const { formatter, fieldName } = col;
+  if (formatter) return formatter(row);
+  return row[fieldName];
+}
+
+export default function TableControl({ rows = [], children }) {
+  console.log('children', children);
+
+  const columns = (children instanceof Array ? _.flatten(children) : [children])
+    .filter(child => child && child.props && child.props.fieldName)
+    .map(child => child.props);
+
+  return (
+    <Table>
+      <TableHead>
+        <TableHeaderRow>
+          {columns.map(x => (
+            <TableHeaderCell key={x.fieldName}>{x.header}</TableHeaderCell>
+          ))}
+        </TableHeaderRow>
+      </TableHead>
+      <TableBody>
+        {rows.map((row, index) => (
+          <TableBodyRow key={index}>
+            {columns.map(col => (
+              <TableBodyCell key={col.fieldName}>{format(row, col)}</TableBodyCell>
+            ))}
+          </TableBodyRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
--- a/packages/web/src/utility/axios.js
+++ b/packages/web/src/utility/axios.js
@@ -0,0 +1,5 @@
+import axios from 'axios';
+
+export default axios.create({
+  baseURL: 'http://localhost:3000',
+});
--- a/packages/web/src/utility/common.js
+++ b/packages/web/src/utility/common.js
@@ -0,0 +1,27 @@
+import uuidv1 from 'uuid/v1';
+
+export class LoadingToken {
+  constructor() {
+    this.isCanceled = false;
+  }
+
+  cancel() {
+    this.isCanceled = true;
+  }
+}
+
+export function sleep(milliseconds) {
+  return new Promise(resolve => window.setTimeout(() => resolve(null), milliseconds));
+}
+
+export function openNewTab(setOpenedTabs, newTab) {
+  const tabid = uuidv1();
+  setOpenedTabs(files => [
+    ...(files || []).map(x => ({ ...x, selected: false })),
+    {
+      tabid,
+      selected: true,
+      ...newTab,
+    },
+  ]);
+}
--- a/packages/web/src/utility/forms.js
+++ b/packages/web/src/utility/forms.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import styled from 'styled-components';
+import { TextField, SelectField } from './inputs';
+import { Field, useFormikContext } from 'formik';
+
+export const FormRow = styled.div`
+  display: flex;
+  margin: 10px;
+`;
+
+export const FormLabel = styled.div`
+  width: 10vw;
+  font-weight: bold;
+`;
+
+export const FormValue = styled.div``;
+
+export function FormTextField({ label, ...other }) {
+  return (
+    <FormRow>
+      <FormLabel>{label}</FormLabel>
+      <FormValue>
+        <Field {...other} as={TextField} />
+      </FormValue>
+    </FormRow>
+  );
+}
+
+export function FormSelectField({ label, children, ...other }) {
+  return (
+    <FormRow>
+      <FormLabel>{label}</FormLabel>
+      <FormValue>
+        <Field {...other} as={SelectField}>
+          {children}
+        </Field>
+      </FormValue>
+    </FormRow>
+  );
+}
+
+export function FormSubmit({ text }) {
+  return <input type="submit" value={text} />;
+}
+
+export function FormButton({ text, onClick, ...other }) {
+  const { values } = useFormikContext();
+  return <input type="button" value={text} onClick={() => onClick(values)} {...other} />;
+}
--- a/packages/web/src/utility/globalState.js
+++ b/packages/web/src/utility/globalState.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import useStorage from './useStorage';
+
+function createGlobalState(defaultValue) {
+  const Context = React.createContext(null);
+
+  function Provider({ children }) {
+    const [currentvalue, setCurrentValue] = React.useState(defaultValue);
+    return <Context.Provider value={[currentvalue, setCurrentValue]}>{children}</Context.Provider>;
+  }
+
+  function useValue() {
+    return React.useContext(Context)[0];
+  }
+
+  function useSetValue() {
+    return React.useContext(Context)[1];
+  }
+
+  return [Provider, useValue, useSetValue];
+}
+
+function createStorageState(storageKey, defaultValue) {
+  const Context = React.createContext(null);
+
+  function Provider({ children }) {
+    const [currentvalue, setCurrentValue] = useStorage(storageKey, localStorage, defaultValue);
+    return <Context.Provider value={[currentvalue, setCurrentValue]}>{children}</Context.Provider>;
+  }
+
+  function useValue() {
+    return React.useContext(Context)[0];
+  }
+
+  function useSetValue() {
+    return React.useContext(Context)[1];
+  }
+
+  return [Provider, useValue, useSetValue];
+}
+
+const [CurrentWidgetProvider, useCurrentWidget, useSetCurrentWidget] = createGlobalState('database');
+export { CurrentWidgetProvider, useCurrentWidget, useSetCurrentWidget };
+
+const [CurrentDatabaseProvider, useCurrentDatabase, useSetCurrentDatabase] = createGlobalState(null);
+export { CurrentDatabaseProvider, useCurrentDatabase, useSetCurrentDatabase };
+
+const [OpenedTabsProvider, useOpenedTabs, useSetOpenedTabs] = createStorageState('openedTabs', []);
+export { OpenedTabsProvider, useOpenedTabs, useSetOpenedTabs };
--- a/packages/web/src/utility/inputs.js
+++ b/packages/web/src/utility/inputs.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export function TextField({ ...other }) {
+  return <input type="text" {...other}></input>;
+}
+
+export function SelectField({ children, ...other }) {
+  return (
+    <select {...other}>
+      {children}
+    </select>
+  );
+}
--- a/packages/web/src/utility/layout.js
+++ b/packages/web/src/utility/layout.js
@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const Grid = styled.div``;
+
+export const Row = styled.div``;
+
+export const Col = styled.div``;
--- a/packages/web/src/utility/useDimensions.js
+++ b/packages/web/src/utility/useDimensions.js
@@ -0,0 +1,107 @@
+// import { useState, useCallback, useLayoutEffect } from 'react';
+
+// function getDimensionObject(node) {
+//   const rect = node.getBoundingClientRect();
+
+//   return {
+//     width: rect.width,
+//     height: rect.height,
+//     top: 'x' in rect ? rect.x : rect.top,
+//     left: 'y' in rect ? rect.y : rect.left,
+//     x: 'x' in rect ? rect.x : rect.left,
+//     y: 'y' in rect ? rect.y : rect.top,
+//     right: rect.right,
+//     bottom: rect.bottom,
+//   };
+// }
+
+// function useDimensions({ liveMeasure = true } = {}) {
+//   const [dimensions, setDimensions] = useState({});
+//   const [node, setNode] = useState(null);
+
+//   const ref = useCallback(node => {
+//     setNode(node);
+//   }, []);
+
+//   useLayoutEffect(() => {
+//     if (node) {
+//       const measure = () => window.requestAnimationFrame(() => setDimensions(getDimensionObject(node)));
+//       measure();
+
+//       if (liveMeasure) {
+//         window.addEventListener('resize', measure);
+//         window.addEventListener('scroll', measure);
+
+//         return () => {
+//           window.removeEventListener('resize', measure);
+//           window.removeEventListener('scroll', measure);
+//         };
+//       }
+//     }
+//   }, [node]);
+
+//   return [ref, dimensions, node];
+// }
+
+// export default useDimensions;
+
+import { useLayoutEffect, useState, useCallback } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+
+// Export hook
+export default function useDimensions(dependencies = []) {
+  const [node, setNode] = useState(null);
+  const ref = useCallback(newNode => {
+    setNode(newNode);
+  }, []);
+
+  // Keep track of measurements
+  const [dimensions, setDimensions] = useState({
+    x: 0,
+    y: 0,
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: 0,
+    height: 0,
+  });
+
+  // Define measure function
+  const measure = useCallback(innerNode => {
+    const rect = innerNode.getBoundingClientRect();
+    setDimensions({
+      x: rect.left,
+      y: rect.top,
+      left: rect.left,
+      top: rect.top,
+      right: rect.right,
+      bottom: rect.bottom,
+      width: rect.width,
+      height: rect.height,
+    });
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!node) {
+      return;
+    }
+
+    // Set initial measurements
+    measure(node);
+
+    // Observe resizing of element
+    const resizeObserver = new ResizeObserver(() => {
+      measure(node);
+    });
+
+    resizeObserver.observe(node);
+
+    // Cleanup
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [node, measure, ...dependencies]);
+
+  return [ref, dimensions, node];
+}
--- a/packages/web/src/utility/useFetch.js
+++ b/packages/web/src/utility/useFetch.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import axios from './axios';
+import useSocket from './SocketProvider';
+import stableStringify from 'json-stable-stringify';
+
+export default function useFetch({
+  url,
+  params = undefined,
+  defaultValue = undefined,
+  reloadTrigger = undefined,
+  ...config
+}) {
+  const [value, setValue] = React.useState(defaultValue);
+  const [loadCounter, setLoadCounter] = React.useState(0);
+  const socket = useSocket();
+
+  const handleReload = () => {
+    setLoadCounter(loadCounter + 1);
+  };
+
+  async function loadValue() {
+    const resp = await axios.request({
+      method: 'get',
+      params,
+      url,
+      ...config,
+    });
+    setValue(resp.data);
+  }
+  React.useEffect(() => {
+    loadValue();
+    if (reloadTrigger && socket) {
+      socket.on(reloadTrigger, handleReload);
+      return () => {
+        socket.off(reloadTrigger, handleReload);
+      };
+    }
+  }, [url, stableStringify(params), socket, loadCounter]);
+
+  return value;
+}
--- a/packages/web/src/utility/useStorage.js
+++ b/packages/web/src/utility/useStorage.js
@@ -0,0 +1,36 @@
+import React from 'react';
+
+export default function useStorage(key, storageObject, initialValue) {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = React.useState(() => {
+    try {
+      // Get from local storage by key
+      const item = storageObject.getItem(key);
+      // Parse stored json or if none return initialValue
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      // If error also return initialValue
+      console.log(error);
+      return initialValue;
+    }
+  });
+
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = value => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      // Save state
+      setStoredValue(valueToStore);
+      // Save to local storage
+      storageObject.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      // A more advanced implementation would handle the error case
+      console.log(error);
+    }
+  };
+
+  return [storedValue, setValue];
+}
--- a/packages/web/src/widgets/DatabaseWidget.js
+++ b/packages/web/src/widgets/DatabaseWidget.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import useModalState from '../modals/useModalState';
+import ConnectionModal from '../modals/ConnectionModal';
+import useFetch from '../utility/useFetch';
+import { AppObjectList } from '../appobj/AppObjectList';
+import connectionAppObject from '../appobj/connectionAppObject';
+import databaseAppObject from '../appobj/databaseAppObject';
+import { useSetCurrentDatabase, useCurrentDatabase } from '../utility/globalState';
+import tableAppObject from '../appobj/tableAppObject';
+import theme from '../theme';
+
+const MainContainer = styled.div`
+  position: relative;
+  display: flex;
+  flex-flow: column wrap;
+  flex: 1;
+`;
+
+const InnerContainer = styled.div`
+  flex: 1 0;
+  overflow: scroll;
+  width: ${theme.leftPanel.width}px;
+`;
+
+function SubDatabaseList({ data }) {
+  const setDb = useSetCurrentDatabase();
+  const handleDatabaseClick = database => {
+    setDb({
+      ...database,
+      connection: data,
+    });
+  };
+  const { _id } = data;
+  const databases = useFetch({
+    url: `server-connections/list-databases?conid=${_id}`,
+    reloadTrigger: `database-list-changed-${_id}`,
+  });
+  return <AppObjectList list={databases} makeAppObj={databaseAppObject} onObjectClick={handleDatabaseClick} />;
+}
+
+function ConnectionList() {
+  const modalState = useModalState();
+  const connections = useFetch({
+    url: 'connections/list',
+    reloadTrigger: 'connection-list-changed',
+  });
+  return (
+    <>
+      <ConnectionModal modalState={modalState} />
+      <button onClick={modalState.open}>Add connection</button>
+      <AppObjectList list={connections} makeAppObj={connectionAppObject} SubItems={SubDatabaseList} />
+    </>
+  );
+}
+
+function SqlObjectList({ conid, database }) {
+  const objects = useFetch({
+    url: `database-connections/list-objects?conid=${conid}&database=${database}`,
+    reloadTrigger: `database-structure-changed-${conid}-${database}`,
+  });
+  const { tables } = objects || {};
+  return (
+    <>
+      <AppObjectList list={(tables || []).map(x => ({ ...x, conid, database }))} makeAppObj={tableAppObject} />
+    </>
+  );
+}
+
+function SqlObjectListWrapper() {
+  const db = useCurrentDatabase();
+
+  if (!db) return <div>(Choose database)</div>;
+  const { name, connection } = db;
+
+  return <SqlObjectList conid={connection._id} database={name} />;
+  // return <div>tables of {db && db.name}</div>
+  // return <div>tables of {JSON.stringify(db)}</div>
+}
+
+export default function DatabaseWidget() {
+  return (
+    <MainContainer>
+      <InnerContainer>
+        <ConnectionList />
+      </InnerContainer>
+      <InnerContainer>
+        <SqlObjectListWrapper />
+      </InnerContainer>
+    </MainContainer>
+  );
+}
--- a/packages/web/src/widgets/WidgetContainer.js
+++ b/packages/web/src/widgets/WidgetContainer.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { useCurrentWidget } from '../utility/globalState';
+import DatabaseWidget from './DatabaseWidget';
+
+export default function WidgetContainer() {
+  const currentWidget = useCurrentWidget();
+  if (currentWidget === 'database') return <DatabaseWidget />;
+  return null;
+}
--- a/packages/web/src/widgets/WidgetIconPanel.js
+++ b/packages/web/src/widgets/WidgetIconPanel.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import theme from '../theme';
+import styled from 'styled-components';
+import { FontIcon } from '../icons';
+import { useCurrentWidget, useSetCurrentWidget } from '../utility/globalState';
+
+const IconWrapper = styled.div`
+  color: ${theme.widgetMenu.iconFontColor};
+  font-size: ${theme.widgetMenu.iconFontSize};
+  height: ${theme.widgetMenu.iconSize}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${props =>
+    // @ts-ignore
+    props.isSelected ? theme.widgetMenu.backgroundSelected : 'inherit'};
+  &:hover {
+    background-color: ${theme.widgetMenu.backgroundHover};
+  }
+`;
+
+export default function WidgetIconPanel() {
+  const widgets = [
+    {
+      icon: 'fa-database',
+      name: 'database',
+    },
+    {
+      icon: 'fa-table',
+      name: 'table',
+    },
+    {
+      icon: 'fa-file-alt',
+      name: 'file',
+    },
+    {
+      icon: 'fa-cog',
+      name: 'settings',
+    },
+    // {
+    //   icon: 'fa-check',
+    //   name: 'settings',
+    // },
+  ];
+
+  const currentWidget = useCurrentWidget();
+  const setCurrentWidget = useSetCurrentWidget();
+
+  return (
+    <>
+      {widgets.map(({ icon, name }) => (
+        <IconWrapper
+          key={icon}
+          // @ts-ignore
+          isSelected={name === currentWidget}
+          onClick={() => setCurrentWidget(name === currentWidget ? null : name)}
+        >
+          <FontIcon name={icon} />
+        </IconWrapper>
+      ))}
+    </>
+  );
+}
--- a/packages/web/tsconfig.json
+++ b/packages/web/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "allowJs": true,
+    "checkJs": true,
+    "noEmit": true,
+    "jsx": "react",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "moduleResolution": "Node",
+    "noImplicitAny": false,
+    "strictNullChecks": false,
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    // doesn't work
+    "types": [
+      "dbgate"
+    ]
+  },
+  "include": [
+    "src"
+  ]
+}