Added icons instead of buttons to box header

client/package-lock.json

@@ -25,7 +25,8 @@
         "prettier": "^2.5.1",
         "ts-node": "^8.10.1",
         "typescript": "^4.3.2",
-        "vite": "^3.0.9"
+        "vite": "^3.0.9",
+        "vite-plugin-svgr": "^2.2.1"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -776,6 +777,217 @@
         "node": ">= 8.0.0"
       }
     },
+    "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.3.1.tgz",
+      "integrity": "sha512-jDBKArXYO1u0B1dmd2Nf8Oy6aTF5vLDfLoO9Oon/GLkqZ/NiggYWZA+a2HpUMH4ITwNqS3z43k8LWApB8S583w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-6.3.1.tgz",
+      "integrity": "sha512-dQzyJ4prwjcFd929T43Z8vSYiTlTu8eafV40Z2gO7zy/SV5GT+ogxRJRBIKWomPBOiaVXFg3jY4S5hyEN3IBjQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-6.3.1.tgz",
+      "integrity": "sha512-HBOUc1XwSU67fU26V5Sfb8MQsT0HvUyxru7d0oBJ4rA2s4HW3PhyAPC7fV/mdsSGpAvOdd8Wpvkjsr0fWPUO7A==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.3.1.tgz",
+      "integrity": "sha512-C12e6aN4BXAolRrI601gPn5MDFCRHO7C4TM8Kks+rDtl8eEq+NN1sak0eAzJu363x3TmHXdZn7+Efd2nr9I5dA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.3.1.tgz",
+      "integrity": "sha512-6NU55Mmh3M5u2CfCCt6TX29/pPneutrkJnnDCHbKZnjukZmmgUAZLtZ2g6ZoSPdarowaQmAiBRgAHqHmG0vuqA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.3.1.tgz",
+      "integrity": "sha512-HV1NGHYTTe1vCNKlBgq/gKuCSfaRlKcHIADn7P8w8U3Zvujdw1rmusutghJ1pZJV7pDt3Gt8ws+SVrqHnBO/Qw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.3.1.tgz",
+      "integrity": "sha512-2wZhSHvTolFNeKDAN/ZmIeSz2O9JSw72XD+o2bNp2QAaWqa8KGpn5Yk5WHso6xqfSAiRzAE+GXlsrBO4UP9LLw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-svg-component": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.3.1.tgz",
+      "integrity": "sha512-cZ8Tr6ZAWNUFfDeCKn/pGi976iWSkS8ijmEYKosP+6ktdZ7lW9HVLHojyusPw3w0j8PI4VBeWAXAmi/2G7owxw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-preset": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-6.3.1.tgz",
+      "integrity": "sha512-tQtWtzuMMQ3opH7je+MpwfuRA1Hf3cKdSgTtAYwOBDfmhabP7rcTfBi3E7V3MuwJNy/Y02/7/RutvwS1W4Qv9g==",
+      "dev": true,
+      "dependencies": {
+        "@svgr/babel-plugin-add-jsx-attribute": "^6.3.1",
+        "@svgr/babel-plugin-remove-jsx-attribute": "^6.3.1",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "^6.3.1",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "^6.3.1",
+        "@svgr/babel-plugin-svg-dynamic-title": "^6.3.1",
+        "@svgr/babel-plugin-svg-em-dimensions": "^6.3.1",
+        "@svgr/babel-plugin-transform-react-native-svg": "^6.3.1",
+        "@svgr/babel-plugin-transform-svg-component": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-Sm3/7OdXbQreemf9aO25keerZSbnKMpGEfmH90EyYpj1e8wMD4TuwJIb3THDSgRMWk1kYJfSRulELBy4gVgZUA==",
+      "dev": true,
+      "dependencies": {
+        "@svgr/plugin-jsx": "^6.3.1",
+        "camelcase": "^6.2.0",
+        "cosmiconfig": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/hast-util-to-babel-ast": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-6.3.1.tgz",
+      "integrity": "sha512-NgyCbiTQIwe3wHe/VWOUjyxmpUmsrBjdoIxKpXt3Nqc3TN30BpJG22OxBvVzsAh9jqep0w0/h8Ywvdk3D9niNQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.18.4",
+        "entities": "^4.3.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/plugin-jsx": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-6.3.1.tgz",
+      "integrity": "sha512-r9+0mYG3hD4nNtUgsTXWGYJomv/bNd7kC16zvsM70I/bGeoCi/3lhTmYqeN6ChWX317OtQCSZZbH4wq9WwoXbw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.18.5",
+        "@svgr/babel-preset": "^6.3.1",
+        "@svgr/hast-util-to-babel-ast": "^6.3.1",
+        "svg-parser": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "^6.0.0"
+      }
+    },
     "node_modules/@turf/area": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/area/-/area-6.5.0.tgz",
@@ -843,6 +1055,12 @@
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "dev": true
+    },
     "node_modules/@types/plotly.js": {
       "version": "2.12.2",
       "resolved": "https://registry.npmjs.org/@types/plotly.js/-/plotly.js-2.12.2.tgz",
@@ -1373,6 +1591,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001380",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001380.tgz",
@@ -1545,6 +1775,22 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
+    "node_modules/cosmiconfig": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
+      "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/country-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/country-regex/-/country-regex-1.1.0.tgz",
@@ -1886,6 +2132,27 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/entities": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.3.1.tgz",
+      "integrity": "sha512-o4q/dYJlmyjP2zfnaWDUC6A3BQFmVTX+tZPezK7k0GLSU9QYCauscf5Y+qcEPzKL+EixVouYDgLQK5H9GrLpkg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
@@ -3655,6 +3922,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true
+    },
     "node_modules/is-base64": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-base64/-/is-base64-0.1.0.tgz",
@@ -3999,6 +4272,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -4060,6 +4339,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -4528,6 +4813,24 @@
       "resolved": "https://registry.npmjs.org/parenthesis/-/parenthesis-3.1.8.tgz",
       "integrity": "sha512-KF/U8tk54BgQewkJPvB4s/US3VQY68BRDpH638+7O/n58TpnwiwnOtGIOsT2/i+M78s61BBpeC83STB88d8sqw=="
     },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/parse-rect": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/parse-rect/-/parse-rect-1.2.0.tgz",
@@ -5438,6 +5741,12 @@
       "resolved": "https://registry.npmjs.org/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz",
       "integrity": "sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g=="
     },
+    "node_modules/svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
+      "dev": true
+    },
     "node_modules/svg-path-bounds": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/svg-path-bounds/-/svg-path-bounds-1.0.2.tgz",
@@ -5913,6 +6222,19 @@
         }
       }
     },
+    "node_modules/vite-plugin-svgr": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-2.2.1.tgz",
+      "integrity": "sha512-+EqwahbwjETJH/ssA/66dNYyKN1cO0AStq96MuXmq5maU7AePBMf2lDKfQna49tJZAjtRz+R899BWCsUUP45Fg==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^4.2.1",
+        "@svgr/core": "^6.3.1"
+      },
+      "peerDependencies": {
+        "vite": "^2.6.0 || 3"
+      }
+    },
     "node_modules/vt-pbf": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
@@ -6002,6 +6324,15 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/yn": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
@@ -6601,6 +6932,111 @@
         "picomatch": "^2.2.2"
       }
     },
+    "@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.3.1.tgz",
+      "integrity": "sha512-jDBKArXYO1u0B1dmd2Nf8Oy6aTF5vLDfLoO9Oon/GLkqZ/NiggYWZA+a2HpUMH4ITwNqS3z43k8LWApB8S583w==",
+      "dev": true,
+      "requires": {}
+    },
+    "@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-6.3.1.tgz",
+      "integrity": "sha512-dQzyJ4prwjcFd929T43Z8vSYiTlTu8eafV40Z2gO7zy/SV5GT+ogxRJRBIKWomPBOiaVXFg3jY4S5hyEN3IBjQ==",
+      "dev": true,
+      "requires": {}
+    },
+    "@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-6.3.1.tgz",
+      "integrity": "sha512-HBOUc1XwSU67fU26V5Sfb8MQsT0HvUyxru7d0oBJ4rA2s4HW3PhyAPC7fV/mdsSGpAvOdd8Wpvkjsr0fWPUO7A==",
+      "dev": true,
+      "requires": {}
+    },
+    "@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.3.1.tgz",
+      "integrity": "sha512-C12e6aN4BXAolRrI601gPn5MDFCRHO7C4TM8Kks+rDtl8eEq+NN1sak0eAzJu363x3TmHXdZn7+Efd2nr9I5dA==",
+      "dev": true,
+      "requires": {}
+    },
+    "@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.3.1.tgz",
+      "integrity": "sha512-6NU55Mmh3M5u2CfCCt6TX29/pPneutrkJnnDCHbKZnjukZmmgUAZLtZ2g6ZoSPdarowaQmAiBRgAHqHmG0vuqA==",
+      "dev": true,
+      "requires": {}
+    },
+    "@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.3.1.tgz",
+      "integrity": "sha512-HV1NGHYTTe1vCNKlBgq/gKuCSfaRlKcHIADn7P8w8U3Zvujdw1rmusutghJ1pZJV7pDt3Gt8ws+SVrqHnBO/Qw==",
+      "dev": true,
+      "requires": {}
+    },
+    "@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.3.1.tgz",
+      "integrity": "sha512-2wZhSHvTolFNeKDAN/ZmIeSz2O9JSw72XD+o2bNp2QAaWqa8KGpn5Yk5WHso6xqfSAiRzAE+GXlsrBO4UP9LLw==",
+      "dev": true,
+      "requires": {}
+    },
+    "@svgr/babel-plugin-transform-svg-component": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.3.1.tgz",
+      "integrity": "sha512-cZ8Tr6ZAWNUFfDeCKn/pGi976iWSkS8ijmEYKosP+6ktdZ7lW9HVLHojyusPw3w0j8PI4VBeWAXAmi/2G7owxw==",
+      "dev": true,
+      "requires": {}
+    },
+    "@svgr/babel-preset": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-6.3.1.tgz",
+      "integrity": "sha512-tQtWtzuMMQ3opH7je+MpwfuRA1Hf3cKdSgTtAYwOBDfmhabP7rcTfBi3E7V3MuwJNy/Y02/7/RutvwS1W4Qv9g==",
+      "dev": true,
+      "requires": {
+        "@svgr/babel-plugin-add-jsx-attribute": "^6.3.1",
+        "@svgr/babel-plugin-remove-jsx-attribute": "^6.3.1",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "^6.3.1",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "^6.3.1",
+        "@svgr/babel-plugin-svg-dynamic-title": "^6.3.1",
+        "@svgr/babel-plugin-svg-em-dimensions": "^6.3.1",
+        "@svgr/babel-plugin-transform-react-native-svg": "^6.3.1",
+        "@svgr/babel-plugin-transform-svg-component": "^6.3.1"
+      }
+    },
+    "@svgr/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-Sm3/7OdXbQreemf9aO25keerZSbnKMpGEfmH90EyYpj1e8wMD4TuwJIb3THDSgRMWk1kYJfSRulELBy4gVgZUA==",
+      "dev": true,
+      "requires": {
+        "@svgr/plugin-jsx": "^6.3.1",
+        "camelcase": "^6.2.0",
+        "cosmiconfig": "^7.0.1"
+      }
+    },
+    "@svgr/hast-util-to-babel-ast": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-6.3.1.tgz",
+      "integrity": "sha512-NgyCbiTQIwe3wHe/VWOUjyxmpUmsrBjdoIxKpXt3Nqc3TN30BpJG22OxBvVzsAh9jqep0w0/h8Ywvdk3D9niNQ==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.18.4",
+        "entities": "^4.3.0"
+      }
+    },
+    "@svgr/plugin-jsx": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-6.3.1.tgz",
+      "integrity": "sha512-r9+0mYG3hD4nNtUgsTXWGYJomv/bNd7kC16zvsM70I/bGeoCi/3lhTmYqeN6ChWX317OtQCSZZbH4wq9WwoXbw==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.18.5",
+        "@svgr/babel-preset": "^6.3.1",
+        "@svgr/hast-util-to-babel-ast": "^6.3.1",
+        "svg-parser": "^2.0.4"
+      }
+    },
     "@turf/area": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/area/-/area-6.5.0.tgz",
@@ -6653,6 +7089,12 @@
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
+    "@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "dev": true
+    },
     "@types/plotly.js": {
       "version": "2.12.2",
       "resolved": "https://registry.npmjs.org/@types/plotly.js/-/plotly.js-2.12.2.tgz",
@@ -7017,6 +7459,12 @@
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
       "dev": true
     },
+    "camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true
+    },
     "caniuse-lite": {
       "version": "1.0.30001380",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001380.tgz",
@@ -7173,6 +7621,19 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
+    "cosmiconfig": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
+      "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==",
+      "dev": true,
+      "requires": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      }
+    },
     "country-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/country-regex/-/country-regex-1.1.0.tgz",
@@ -7478,6 +7939,21 @@
         "once": "^1.4.0"
       }
     },
+    "entities": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.3.1.tgz",
+      "integrity": "sha512-o4q/dYJlmyjP2zfnaWDUC6A3BQFmVTX+tZPezK7k0GLSU9QYCauscf5Y+qcEPzKL+EixVouYDgLQK5H9GrLpkg==",
+      "dev": true
+    },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "es-abstract": {
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
@@ -8764,6 +9240,12 @@
         "side-channel": "^1.0.4"
       }
     },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true
+    },
     "is-base64": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-base64/-/is-base64-0.1.0.tgz",
@@ -8989,6 +9471,12 @@
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
       "dev": true
     },
+    "json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
+    },
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -9038,6 +9526,12 @@
         "type-check": "~0.4.0"
       }
     },
+    "lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true
+    },
     "locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -9416,6 +9910,18 @@
       "resolved": "https://registry.npmjs.org/parenthesis/-/parenthesis-3.1.8.tgz",
       "integrity": "sha512-KF/U8tk54BgQewkJPvB4s/US3VQY68BRDpH638+7O/n58TpnwiwnOtGIOsT2/i+M78s61BBpeC83STB88d8sqw=="
     },
+    "parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      }
+    },
     "parse-rect": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/parse-rect/-/parse-rect-1.2.0.tgz",
@@ -10136,6 +10642,12 @@
       "resolved": "https://registry.npmjs.org/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz",
       "integrity": "sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g=="
     },
+    "svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
+      "dev": true
+    },
     "svg-path-bounds": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/svg-path-bounds/-/svg-path-bounds-1.0.2.tgz",
@@ -10518,6 +11030,16 @@
         "rollup": ">=2.75.6 <2.77.0 || ~2.77.0"
       }
     },
+    "vite-plugin-svgr": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-2.2.1.tgz",
+      "integrity": "sha512-+EqwahbwjETJH/ssA/66dNYyKN1cO0AStq96MuXmq5maU7AePBMf2lDKfQna49tJZAjtRz+R899BWCsUUP45Fg==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^4.2.1",
+        "@svgr/core": "^6.3.1"
+      }
+    },
     "vt-pbf": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
@@ -10592,6 +11114,12 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true
+    },
     "yn": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",

client/package.json

@@ -21,7 +21,8 @@
     "prettier": "^2.5.1",
     "ts-node": "^8.10.1",
     "typescript": "^4.3.2",
-    "vite": "^3.0.9"
+    "vite": "^3.0.9",
+    "vite-plugin-svgr": "^2.2.1"
   },
   "dependencies": {
     "plotly.js": "^2.14.0",

client/src/assets/icons/refresh.svg

@@ -0,0 +1 @@
+<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>

client/src/assets/icons/settings.svg

@@ -0,0 +1 @@
+<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>

client/src/assets/style.css

@@ -21,6 +21,8 @@ button {
 	border: none;
 	padding: 0.25rem 1rem;
 	border-radius: 0.25rem;
+	display: inline-flex;
+	align-items: center;
 }
 
 button:hover {
@@ -69,31 +71,6 @@ input, select {
 	border-radius: 0.5rem;
 }
 
-.sensor {
-	background: #fff;
-	border-radius: 0.5rem;
-	margin: 0.5rem;
-	box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
-	overflow: hidden;
-	min-height: 350px;
-	height: 350px;
-}
-
-.sensor .header {
-	display: flex;
-	align-items: center;
-	padding: 0.5rem;
-}
-
-.sensor .header .actions {
-	margin-left: auto;
-	display: flex;
-}
-
-.sensor .header .actions button {
-	margin-left: 0.4rem;
-}
-
 .settings-modal {
 	position: fixed;
 	top: 0;
@@ -249,15 +226,38 @@ form.horizontal .input label {
 	display: flex;
 	flex-grow: 0;
 	flex-shrink: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .grid-sensors .grid-box .box .header .drag-handle {
 	flex: 1;
 	cursor: move;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.grid-sensors .grid-box .box .header .name {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding: 0.25rem 0.4rem;
 }
 
 .grid-sensors .grid-box .box .header .actions {
 	margin-left: auto;
+	white-space: nowrap;
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	padding-right: 0.4rem;
+}
+
+.grid-sensors .grid-box .box .header .actions .action {
+	margin-left: 0.25rem;
+	font-size: 110%;
+	cursor: pointer;
+	color: #666;
 }
 
 .grid-sensors .grid-box .box .body {
@@ -288,3 +288,8 @@ form.horizontal .input label {
 	display: flex;
 	flex-direction: column;
 }
+
+.svg-icon {
+	height: 1em;
+	stroke: currentColor;
+}

client/src/index.tsx

@@ -1,3 +1,5 @@
+/// <reference types="vite-plugin-svgr/client" />
+
 import { Root } from './Root'
 import { render } from 'preact'
 

client/src/pages/dashboard/components/EditableBox.tsx

@@ -8,6 +8,8 @@ import { BoxDefinition } from '../types'
 import { BoxDialContent } from './BoxDialContent'
 import { BoxGraphContent } from './BoxGraphContent'
 import { BoxSettings } from './BoxSettings/BoxSettings'
+import { ReactComponent as SettingsIcon } from '@/assets/icons/settings.svg'
+import { ReactComponent as RefreshIcon } from '@/assets/icons/refresh.svg'
 
 type Props = {
 	box: BoxDefinition
@@ -120,10 +122,12 @@ export const EditableBox = ({
 							<div className="name">{box.title ?? box.sensor ?? ''}</div>
 						</div>
 						<div className="actions">
-							<button className="config" onClick={() => setEditing(true)}>
-								Config
-							</button>
-							<button className="refresh">Refresh</button>
+							<div className="action">
+								<RefreshIcon />
+							</div>
+							<div className="action" onClick={() => setEditing(true)}>
+								<SettingsIcon />
+							</div>
 						</div>
 					</div>
 					<div className="body">

client/src/pages/dashboard/constants.ts

@@ -1,2 +1,2 @@
-export const GRID_WIDTH = 20
+export const GRID_WIDTH = 40
 export const GRID_H_SNAP = 10

client/vite.config.js

@@ -1,6 +1,7 @@
 import preact from '@preact/preset-vite'
 import path from 'path'
 import { defineConfig } from 'vite'
+import svgr from 'vite-plugin-svgr'
 
 export default defineConfig({
 	resolve: {
@@ -19,5 +20,14 @@ export default defineConfig({
 			},
 		},
 	},
-	plugins: [preact()],
+	plugins: [
+		preact(),
+		svgr({
+			svgrOptions: {
+				svgProps: {
+					className: 'svg-icon',
+				},
+			},
+		}),
+	],
 })