vmui: switching to Preact (#2053)

* feat: replace @codemirror to text field * feat: switch to Preact from React * fix: optimize mui imports * fix: remove unused vars * update package-lock.json * app/vmselect/vmui: `make vmui-update` Co-authored-by: Aliaksandr Valialkin <valyala@victoriametrics.com>
2024-11-21 14:44:00 +00:00 · 2022-01-11 11:32:17 +03:00 · 2022-01-11 11:32:17 +03:00 · 7d5ed49d23
commit 7d5ed49d23
parent 5c321c7178
48 changed files with 11814 additions and 5282 deletions
--- a/app/vmselect/vmui/asset-manifest.json
+++ b/app/vmselect/vmui/asset-manifest.json
@ -1,12 +1,12 @@
 {
  "files": {
    "main.css": "./static/css/main.79ff1ad2.css",
-    "main.js": "./static/js/main.22df0342.js",
-    "static/js/27.85f0e2b0.chunk.js": "./static/js/27.85f0e2b0.chunk.js",
+    "main.js": "./static/js/main.31aed9a0.js",
+    "static/js/27.cc1b69f7.chunk.js": "./static/js/27.cc1b69f7.chunk.js",
    "index.html": "./index.html"
  },
  "entrypoints": [
    "static/css/main.79ff1ad2.css",
-    "static/js/main.22df0342.js"
+    "static/js/main.31aed9a0.js"
  ]
 }
--- a/app/vmselect/vmui/index.html
+++ b/app/vmselect/vmui/index.html
@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="VM-UI is a metric explorer for Victoria Metrics"/><link rel="apple-touch-icon" href="./apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png"><link rel="manifest" href="./manifest.json"/><title>VM UI</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/><script defer="defer" src="./static/js/main.22df0342.js"></script><link href="./static/css/main.79ff1ad2.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="VM-UI is a metric explorer for Victoria Metrics"/><link rel="apple-touch-icon" href="./apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png"><link rel="manifest" href="./manifest.json"/><title>VM UI</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/><script defer="defer" src="./static/js/main.31aed9a0.js"></script><link href="./static/css/main.79ff1ad2.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
--- a/app/vmselect/vmui/static/js/27.cc1b69f7.chunk.js
+++ b/app/vmselect/vmui/static/js/27.cc1b69f7.chunk.js
@ -1 +1 @@
-"use strict";(self.webpackChunkvmui=self.webpackChunkvmui||[]).push([[27],{4027:function(e,n,t){t.r(n),t.d(n,{getCLS:function(){return y},getFCP:function(){return g},getFID:function(){return C},getLCP:function(){return P},getTTFB:function(){return D}});var i,r,a,o,u=function(e,n){return{name:e,value:void 0===n?-1:n,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},c=function(e,n){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){if("first-input"===e&&!("PerformanceEventTiming"in self))return;var t=new PerformanceObserver((function(e){return e.getEntries().map(n)}));return t.observe({type:e,buffered:!0}),t}}catch(e){}},f=function(e,n){var t=function t(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),n&&(removeEventListener("visibilitychange",t,!0),removeEventListener("pagehide",t,!0)))};addEventListener("visibilitychange",t,!0),addEventListener("pagehide",t,!0)},s=function(e){addEventListener("pageshow",(function(n){n.persisted&&e(n)}),!0)},m=function(e,n,t){var i;return function(r){n.value>=0&&(r||t)&&(n.delta=n.value-(i||0),(n.delta||void 0===i)&&(i=n.value,e(n)))}},v=-1,p=function(){return"hidden"===document.visibilityState?0:1/0},d=function(){f((function(e){var n=e.timeStamp;v=n}),!0)},l=function(){return v<0&&(v=p(),d(),s((function(){setTimeout((function(){v=p(),d()}),0)}))),{get firstHiddenTime(){return v}}},g=function(e,n){var t,i=l(),r=u("FCP"),a=function(e){"first-contentful-paint"===e.name&&(f&&f.disconnect(),e.startTime<i.firstHiddenTime&&(r.value=e.startTime,r.entries.push(e),t(!0)))},o=window.performance&&performance.getEntriesByName&&performance.getEntriesByName("first-contentful-paint")[0],f=o?null:c("paint",a);(o||f)&&(t=m(e,r,n),o&&a(o),s((function(i){r=u("FCP"),t=m(e,r,n),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,t(!0)}))}))})))},h=!1,T=-1,y=function(e,n){h||(g((function(e){T=e.value})),h=!0);var t,i=function(n){T>-1&&e(n)},r=u("CLS",0),a=0,o=[],v=function(e){if(!e.hadRecentInput){var n=o[0],i=o[o.length-1];a&&e.startTime-i.startTime<1e3&&e.startTime-n.startTime<5e3?(a+=e.value,o.push(e)):(a=e.value,o=[e]),a>r.value&&(r.value=a,r.entries=o,t())}},p=c("layout-shift",v);p&&(t=m(i,r,n),f((function(){p.takeRecords().map(v),t(!0)})),s((function(){a=0,T=-1,r=u("CLS",0),t=m(i,r,n)})))},E={passive:!0,capture:!0},w=new Date,L=function(e,n){i||(i=n,r=e,a=new Date,F(removeEventListener),S())},S=function(){if(r>=0&&r<a-w){var e={entryType:"first-input",name:i.type,target:i.target,cancelable:i.cancelable,startTime:i.timeStamp,processingStart:i.timeStamp+r};o.forEach((function(n){n(e)})),o=[]}},b=function(e){if(e.cancelable){var n=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,n){var t=function(){L(e,n),r()},i=function(){r()},r=function(){removeEventListener("pointerup",t,E),removeEventListener("pointercancel",i,E)};addEventListener("pointerup",t,E),addEventListener("pointercancel",i,E)}(n,e):L(n,e)}},F=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(n){return e(n,b,E)}))},C=function(e,n){var t,a=l(),v=u("FID"),p=function(e){e.startTime<a.firstHiddenTime&&(v.value=e.processingStart-e.startTime,v.entries.push(e),t(!0))},d=c("first-input",p);t=m(e,v,n),d&&f((function(){d.takeRecords().map(p),d.disconnect()}),!0),d&&s((function(){var a;v=u("FID"),t=m(e,v,n),o=[],r=-1,i=null,F(addEventListener),a=p,o.push(a),S()}))},k={},P=function(e,n){var t,i=l(),r=u("LCP"),a=function(e){var n=e.startTime;n<i.firstHiddenTime&&(r.value=n,r.entries.push(e)),t()},o=c("largest-contentful-paint",a);if(o){t=m(e,r,n);var v=function(){k[r.id]||(o.takeRecords().map(a),o.disconnect(),k[r.id]=!0,t(!0))};["keydown","click"].forEach((function(e){addEventListener(e,v,{once:!0,capture:!0})})),f(v,!0),s((function(i){r=u("LCP"),t=m(e,r,n),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,k[r.id]=!0,t(!0)}))}))}))}},D=function(e){var n,t=u("TTFB");n=function(){try{var n=performance.getEntriesByType("navigation")[0]||function(){var e=performance.timing,n={entryType:"navigation",startTime:0};for(var t in e)"navigationStart"!==t&&"toJSON"!==t&&(n[t]=Math.max(e[t]-e.navigationStart,0));return n}();if(t.value=t.delta=n.responseStart,t.value<0||t.value>performance.now())return;t.entries=[n],e(t)}catch(e){}},"complete"===document.readyState?setTimeout(n,0):addEventListener("pageshow",n)}}}]);
+"use strict";(self.webpackChunkvmui=self.webpackChunkvmui||[]).push([[27],{4027:function(e,n,t){t.r(n),t.d(n,{getCLS:function(){return y},getFCP:function(){return g},getFID:function(){return C},getLCP:function(){return P},getTTFB:function(){return D}});var i,r,a,o,u=function(e,n){return{name:e,value:void 0===n?-1:n,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},c=function(e,n){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){if("first-input"===e&&!("PerformanceEventTiming"in self))return;var t=new PerformanceObserver((function(e){return e.getEntries().map(n)}));return t.observe({type:e,buffered:!0}),t}}catch(e){}},f=function(e,n){var t=function t(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),n&&(removeEventListener("visibilitychange",t,!0),removeEventListener("pagehide",t,!0)))};addEventListener("visibilitychange",t,!0),addEventListener("pagehide",t,!0)},s=function(e){addEventListener("pageshow",(function(n){n.persisted&&e(n)}),!0)},m=function(e,n,t){var i;return function(r){n.value>=0&&(r||t)&&(n.delta=n.value-(i||0),(n.delta||void 0===i)&&(i=n.value,e(n)))}},v=-1,p=function(){return"hidden"===document.visibilityState?0:1/0},d=function(){f((function(e){var n=e.timeStamp;v=n}),!0)},l=function(){return v<0&&(v=p(),d(),s((function(){setTimeout((function(){v=p(),d()}),0)}))),{get firstHiddenTime(){return v}}},g=function(e,n){var t,i=l(),r=u("FCP"),a=function(e){"first-contentful-paint"===e.name&&(f&&f.disconnect(),e.startTime<i.firstHiddenTime&&(r.value=e.startTime,r.entries.push(e),t(!0)))},o=window.performance&&performance.getEntriesByName&&performance.getEntriesByName("first-contentful-paint")[0],f=o?null:c("paint",a);(o||f)&&(t=m(e,r,n),o&&a(o),s((function(i){r=u("FCP"),t=m(e,r,n),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,t(!0)}))}))})))},h=!1,T=-1,y=function(e,n){h||(g((function(e){T=e.value})),h=!0);var t,i=function(n){T>-1&&e(n)},r=u("CLS",0),a=0,o=[],v=function(e){if(!e.hadRecentInput){var n=o[0],i=o[o.length-1];a&&e.startTime-i.startTime<1e3&&e.startTime-n.startTime<5e3?(a+=e.value,o.push(e)):(a=e.value,o=[e]),a>r.value&&(r.value=a,r.entries=o,t())}},p=c("layout-shift",v);p&&(t=m(i,r,n),f((function(){p.takeRecords().map(v),t(!0)})),s((function(){a=0,T=-1,r=u("CLS",0),t=m(i,r,n)})))},E={passive:!0,capture:!0},w=new Date,L=function(e,n){i||(i=n,r=e,a=new Date,F(removeEventListener),S())},S=function(){if(r>=0&&r<a-w){var e={entryType:"first-input",name:i.type,target:i.target,cancelable:i.cancelable,startTime:i.timeStamp,processingStart:i.timeStamp+r};o.forEach((function(n){n(e)})),o=[]}},b=function(e){if(e.cancelable){var n=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,n){var t=function(){L(e,n),r()},i=function(){r()},r=function(){removeEventListener("pointerup",t,E),removeEventListener("pointercancel",i,E)};addEventListener("pointerup",t,E),addEventListener("pointercancel",i,E)}(n,e):L(n,e)}},F=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(n){return e(n,b,E)}))},C=function(e,n){var t,a=l(),v=u("FID"),p=function(e){e.startTime<a.firstHiddenTime&&(v.value=e.processingStart-e.startTime,v.entries.push(e),t(!0))},d=c("first-input",p);t=m(e,v,n),d&&f((function(){d.takeRecords().map(p),d.disconnect()}),!0),d&&s((function(){var a;v=u("FID"),t=m(e,v,n),o=[],r=-1,i=null,F(addEventListener),a=p,o.push(a),S()}))},k={},P=function(e,n){var t,i=l(),r=u("LCP"),a=function(e){var n=e.startTime;n<i.firstHiddenTime&&(r.value=n,r.entries.push(e),t())},o=c("largest-contentful-paint",a);if(o){t=m(e,r,n);var v=function(){k[r.id]||(o.takeRecords().map(a),o.disconnect(),k[r.id]=!0,t(!0))};["keydown","click"].forEach((function(e){addEventListener(e,v,{once:!0,capture:!0})})),f(v,!0),s((function(i){r=u("LCP"),t=m(e,r,n),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,k[r.id]=!0,t(!0)}))}))}))}},D=function(e){var n,t=u("TTFB");n=function(){try{var n=performance.getEntriesByType("navigation")[0]||function(){var e=performance.timing,n={entryType:"navigation",startTime:0};for(var t in e)"navigationStart"!==t&&"toJSON"!==t&&(n[t]=Math.max(e[t]-e.navigationStart,0));return n}();if(t.value=t.delta=n.responseStart,t.value<0||t.value>performance.now())return;t.entries=[n],e(t)}catch(e){}},"complete"===document.readyState?setTimeout(n,0):addEventListener("pageshow",n)}}}]);
--- a/app/vmselect/vmui/static/js/main.22df0342.js
+++ b/app/vmselect/vmui/static/js/main.22df0342.js
--- a/app/vmselect/vmui/static/js/main.22df0342.js.LICENSE.txt
+++ b/app/vmselect/vmui/static/js/main.22df0342.js.LICENSE.txt
@ -1,81 +0,0 @@
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-
-/*! @preserve
- * numeral.js
- * version : 2.0.6
- * author : Adam Draper
- * license : MIT
- * http://adamwdraper.github.com/Numeral-js/
- */
-
-/**
- * A better abstraction over CSS.
- *
- * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
- * @website https://github.com/cssinjs/jss
- * @license MIT
- */
-
-/** @license MUI v5.2.6
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v0.20.2
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v17.0.2
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v17.0.2
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v17.0.2
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v17.0.2
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
--- a/app/vmselect/vmui/static/js/main.31aed9a0.js
+++ b/app/vmselect/vmui/static/js/main.31aed9a0.js
--- a/app/vmselect/vmui/static/js/main.31aed9a0.js.LICENSE.txt
+++ b/app/vmselect/vmui/static/js/main.31aed9a0.js.LICENSE.txt
@ -0,0 +1,39 @@
+/*! @preserve
+ * numeral.js
+ * version : 2.0.6
+ * author : Adam Draper
+ * license : MIT
+ * http://adamwdraper.github.com/Numeral-js/
+ */
+
+/**
+ * A better abstraction over CSS.
+ *
+ * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
+ * @website https://github.com/cssinjs/jss
+ * @license MIT
+ */
+
+/** @license MUI v5.2.6
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
--- a/app/vmui/Dockerfile-build
+++ b/app/vmui/Dockerfile-build
@ -1,4 +1,4 @@
-FROM node:alpine3.14
+FROM node:alpine3.15

 RUN apk update && apk add --no-cache bash bash-doc bash-completion libtool autoconf automake nasm pkgconfig libpng gcc make g++ zlib-dev gawk

--- a/app/vmui/packages/vmui/config-overrides.js
+++ b/app/vmui/packages/vmui/config-overrides.js
@ -1,7 +1,13 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires,no-undef
-const {override, addExternalBabelPlugin} = require("customize-cra");
+const {override, addExternalBabelPlugin, addWebpackAlias} = require("customize-cra");

 // eslint-disable-next-line no-undef
 module.exports = override(
-  addExternalBabelPlugin("@babel/plugin-proposal-nullish-coalescing-operator")
+  addExternalBabelPlugin("@babel/plugin-proposal-nullish-coalescing-operator"),
+  addWebpackAlias({
+    "react": "preact/compat",
+    "react-dom/test-utils": "preact/test-utils",
+    "react-dom": "preact/compat", // Must be below test-utils
+    "react/jsx-runtime": "preact/jsx-runtime"
+  })
 );
--- a/app/vmui/packages/vmui/package-lock.json
+++ b/app/vmui/packages/vmui/package-lock.json
--- a/app/vmui/packages/vmui/package.json
+++ b/app/vmui/packages/vmui/package.json
@ -5,7 +5,6 @@
  "homepage": "./",
  "dependencies": {
    "@date-io/dayjs": "^2.11.0",
-    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mui/icons-material": "^5.2.5",
    "@mui/lab": "^5.0.0-alpha.63",
@ -29,12 +28,8 @@
    "lodash.get": "^4.4.2",
    "lodash.throttle": "^4.1.1",
    "numeral": "^2.0.6",
+    "preact": "^10.6.4",
    "qs": "^6.10.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-draggable": "^4.4.4",
-    "react-measure": "^2.5.2",
-    "react-scripts": "5.0.0",
    "typescript": "~4.5.4",
    "uplot": "^1.6.18",
    "web-vitals": "^2.1.3"
--- a/app/vmui/packages/vmui/src/App.test.tsx
+++ b/app/vmui/packages/vmui/src/App.test.tsx
@ -1,4 +1,4 @@
-import React from "react";
+import React from "preact/compat";
 import {render, screen} from "@testing-library/react";
 import App from "./App";

--- a/app/vmui/packages/vmui/src/App.tsx
+++ b/app/vmui/packages/vmui/src/App.tsx
@ -1,11 +1,11 @@
-import React, {FC} from "react";
+import React, {FC} from "preact/compat";
 import {SnackbarProvider} from "./contexts/Snackbar";
 import HomeLayout from "./components/Home/HomeLayout";
 import {StateProvider} from "./state/common/StateContext";
 import {AuthStateProvider} from "./state/auth/AuthStateContext";
 import {GraphStateProvider} from "./state/graph/GraphStateContext";
-import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles";
 import THEME from "./theme/theme";
+import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles";
 import CssBaseline from "@mui/material/CssBaseline";
 import LocalizationProvider from "@mui/lab/LocalizationProvider";
 import DayjsUtils from "@date-io/dayjs";
--- a/app/vmui/packages/vmui/src/components/Header/Header.tsx
+++ b/app/vmui/packages/vmui/src/components/Header/Header.tsx
@ -1,5 +1,9 @@
-import React, {FC} from "react";
-import {AppBar, Box, Link, Toolbar, Typography} from "@mui/material";
+import React, {FC} from "preact/compat";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Link from "@mui/material/Link";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
 import {ExecutionControls} from "../Home/Configurator/Time/ExecutionControls";
 import {DisplayTypeSwitch} from "../Home/Configurator/DisplayTypeSwitch";
 import Logo from "../common/Logo";
--- a/app/vmui/packages/vmui/src/components/Home/Configurator/Auth/AuthDialog.tsx
+++ b/app/vmui/packages/vmui/src/components/Home/Configurator/Auth/AuthDialog.tsx
@ -1,26 +1,24 @@
 /* eslint max-lines: ["error", {"max": 300}] */

-import React, {useState} from "react";
+import React, {useState} from "preact/compat";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Checkbox from "@mui/material/Checkbox";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import FormControl from "@mui/material/FormControl";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormHelperText from "@mui/material/FormHelperText";
+import Input from "@mui/material/Input";
+import InputAdornment from "@mui/material/InputAdornment";
+import InputLabel from "@mui/material/InputLabel";
+import Tab from "@mui/material/Tab";
+import Tabs from "@mui/material/Tabs";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
 import DialogTitle from "@mui/material/DialogTitle";
 import Dialog from "@mui/material/Dialog";
-import {
-  Box,
-  Button,
-  Checkbox,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  FormControl,
-  FormControlLabel,
-  FormHelperText,
-  Input,
-  InputAdornment,
-  InputLabel,
-  Tab,
-  Tabs,
-  TextField,
-  Typography,
-} from "@mui/material";
 import createStyles from "@mui/styles/createStyles";
 import TabPanel from "./AuthTabPanel";
 import PersonIcon from "@mui/icons-material/Person";
@ -28,6 +26,7 @@ import LockIcon from "@mui/icons-material/Lock";
 import makeStyles from "@mui/styles/makeStyles";
 import {useAuthDispatch, useAuthState} from "../../../../state/auth/AuthStateContext";
 import {AUTH_METHOD, WithCheckbox} from "../../../../state/auth/reducer";
+import {ChangeEvent, ClipboardEvent} from "react";

 // TODO: make generic when creating second dialog
 export interface DialogProps {
@ -76,7 +75,7 @@ export const AuthDialog: React.FC<DialogProps> = (props) => {
    setTabIndex(newValue);
  };

-  const handleBearerChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleBearerChange = (event: ChangeEvent<HTMLInputElement>) => {
    const newVal = event.target.value;
    if (newVal.startsWith(BEARER_PREFIX)) {
      setBearerValue(newVal);
@ -89,7 +88,7 @@ export const AuthDialog: React.FC<DialogProps> = (props) => {
    onClose();
  };

-  const onBearerPaste = (e: React.ClipboardEvent) => {
+  const onBearerPaste = (e: ClipboardEvent) => {
    // if you're pasting token word Bearer will be added automagically
    const newVal = e.clipboardData.getData("text/plain");
    if (newVal.startsWith(BEARER_PREFIX)) {
--- a/app/vmui/packages/vmui/src/components/Home/Configurator/Auth/AuthTabPanel.tsx
+++ b/app/vmui/packages/vmui/src/components/Home/Configurator/Auth/AuthTabPanel.tsx
@ -1,4 +1,4 @@
-import React from "react";
+import React from "preact/compat";
 import Box from "@mui/material/Box";

 interface TabPanelProps {
--- a/app/vmui/packages/vmui/src/components/Home/Configurator/DisplayTypeSwitch.tsx
+++ b/app/vmui/packages/vmui/src/components/Home/Configurator/DisplayTypeSwitch.tsx
@ -1,10 +1,9 @@
-import React, {FC} from "react";
-
+import React, {FC} from "preact/compat";
 import TableChartIcon from "@mui/icons-material/TableChart";
 import ShowChartIcon from "@mui/icons-material/ShowChart";
 import CodeIcon from "@mui/icons-material/Code";
-
-import { ToggleButton, ToggleButtonGroup } from "@mui/material";
+import ToggleButton from "@mui/material/ToggleButton";
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import {useAppDispatch, useAppState} from "../../../state/common/StateContext";
 import withStyles from "@mui/styles/withStyles";

--- a/app/vmui/packages/vmui/src/components/Home/Configurator/Graph/AxesLimitsConfigurator.tsx
+++ b/app/vmui/packages/vmui/src/components/Home/Configurator/Graph/AxesLimitsConfigurator.tsx
@ -1,5 +1,8 @@
-import React, {FC, useCallback, useMemo} from "react";
-import {Box, FormControlLabel, TextField} from "@mui/material";
+import React, {FC, useCallback, useMemo} from "preact/compat";
+import {ChangeEvent} from "react";
+import Box from "@mui/material/Box";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import TextField from "@mui/material/TextField";
 import {useGraphDispatch, useGraphState} from "../../../../state/graph/GraphStateContext";
 import debounce from "lodash.debounce";
 import BasicSwitch from "../../../../theme/switch";
@ -12,7 +15,7 @@ const AxesLimitsConfigurator: FC = () => {

  const onChangeYaxisLimits = () => { graphDispatch({type: "TOGGLE_ENABLE_YAXIS_LIMITS"}); };

-  const onChangeLimit = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, axis: string, index: number) => {
+  const onChangeLimit = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, axis: string, index: number) => {
    const newLimits = yaxis.limits.range;
    newLimits[axis][index] = +e.target.value;
    if (newLimits[axis][0] === newLimits[axis][1] || newLimits[axis][0] > newLimits[axis][1]) return;
--- a/app/vmui/packages/vmui/src/components/Home/Configurator/Graph/GraphSettings.tsx
+++ b/app/vmui/packages/vmui/src/components/Home/Configurator/Graph/GraphSettings.tsx
@ -1,18 +1,20 @@
 import SettingsIcon from "@mui/icons-material/Settings";
-import React, {FC, useState, useRef} from "react";
+import React, {FC, useState} from "preact/compat";
 import AxesLimitsConfigurator from "./AxesLimitsConfigurator";
-import {Box, Button, IconButton, Paper, Typography} from "@mui/material";
-import Draggable from "react-draggable";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import Paper from "@mui/material/Paper";
+import Popover from "@mui/material/Popover";
+import Typography from "@mui/material/Typography";
 import makeStyles from "@mui/styles/makeStyles";
 import CloseIcon from "@mui/icons-material/Close";

 const useStyles = makeStyles({
  popover: {
-    position: "absolute",
    display: "grid",
    gridGap: "16px",
    padding: "0 0 25px",
-    zIndex: 2,
  },
  popoverHeader: {
    display: "flex",
@ -22,7 +24,6 @@ const useStyles = makeStyles({
    padding: "6px 6px 6px 12px",
    borderRadius: "4px 4px 0 0",
    color: "#FFF",
-    cursor: "move",
  },
  popoverBody: {
    display: "grid",
@ -32,32 +33,39 @@ const useStyles = makeStyles({
 });

 const GraphSettings: FC = () => {
-  const [open, setOpen] = useState(false);
-  const draggableRef = useRef<HTMLDivElement>(null);
-  const position = { x: 173, y: 0 };
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const open = Boolean(anchorEl);

  const classes = useStyles();

  return <Box display="flex" px={2}>
-    <Button onClick={() => setOpen((old) => !old)} variant="outlined">
+    <Button variant="outlined" aria-describedby="settings-popover"
+      onClick={(e) => setAnchorEl(e.currentTarget)} >
      <SettingsIcon sx={{fontSize: 16, marginRight: "4px"}}/>
      <span style={{lineHeight: 1, paddingTop: "1px"}}>{open ? "Hide" : "Show"} graph settings</span>
    </Button>
-    {open && (
-      <Draggable nodeRef={draggableRef} defaultPosition={position} handle="#handle">
-        <Paper elevation={3} className={classes.popover} ref={draggableRef}>
-          <div id="handle" className={classes.popoverHeader}>
-            <Typography variant="body1"><b>Graph Settings</b></Typography>
-            <IconButton size="small" onClick={() => setOpen(false)}>
-              <CloseIcon style={{color: "white"}}/>
-            </IconButton>
-          </div>
-          <Box className={classes.popoverBody}>
-            <AxesLimitsConfigurator/>
-          </Box>
-        </Paper>
-      </Draggable>
-    )}
+    <Popover
+      id="settings-popover"
+      open={open}
+      anchorEl={anchorEl}
+      onClose={() => setAnchorEl(null)}
+      anchorOrigin={{
+        vertical: "top",
+        horizontal: anchorEl ? anchorEl.offsetWidth + 15 : 200
+      }}
+    >
+      <Paper elevation={3} className={classes.popover}>
+        <div id="handle" className={classes.popoverHeader}>
+          <Typography variant="body1"><b>Graph Settings</b></Typography>
+          <IconButton size="small" onClick={() => setAnchorEl(null)}>
+            <CloseIcon style={{color: "white"}}/>
+          </IconButton>
+        </div>
+        <Box className={classes.popoverBody}>
+          <AxesLimitsConfigurator/>
+        </Box>
+      </Paper>
+    </Popover>
  </Box>;
 };

--- a/app/vmui/packages/vmui/src/components/Home/Configurator/Query/AdditionalSettings.tsx
+++ b/app/vmui/packages/vmui/src/components/Home/Configurator/Query/AdditionalSettings.tsx
@ -1,5 +1,6 @@
-import React, {FC} from "react";
-import {Box, FormControlLabel} from "@mui/material";
+import React, {FC} from "preact/compat";
+import Box from "@mui/material/Box";
+import FormControlLabel from "@mui/material/FormControlLabel";
 import {saveToStorage} from "../../../../utils/storage";
 import {useAppDispatch, useAppState} from "../../../../state/common/StateContext";
 import BasicSwitch from "../../../../theme/switch";
--- a/app/vmui/packages/vmui/src/components/Home/Configurator/Query/QueryConfigurator.tsx
+++ b/app/vmui/packages/vmui/src/components/Home/Configurator/Query/QueryConfigurator.tsx
@ -1,7 +1,13 @@
-import React, {FC, useEffect, useRef, useState} from "react";
-import {
-  Accordion, AccordionDetails, AccordionSummary, Box, Grid, IconButton, Typography, Tooltip, Button
-} from "@mui/material";
+import React, {FC, useEffect, useRef, useState} from "preact/compat";
+import Accordion from "@mui/material/Accordion";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
+import Tooltip from "@mui/material/Tooltip";
+import Button from "@mui/material/Button";
+import Portal from "@mui/material/Portal";
 import QueryEditor from "./QueryEditor";
 import {TimeSelector} from "../Time/TimeSelector";
 import {useAppDispatch, useAppState} from "../../../../state/common/StateContext";
@ -9,7 +15,6 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import HighlightOffIcon from "@mui/icons-material/HighlightOff";
 import AddIcon from "@mui/icons-material/Add";
 import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
-import Portal from "@mui/material/Portal";
 import ServerConfigurator from "./ServerConfigurator";
 import AdditionalSettings from "./AdditionalSettings";
 import {ErrorTypes} from "../../../../types";
@ -21,7 +26,7 @@ export interface QueryConfiguratorProps {

 const QueryConfigurator: FC<QueryConfiguratorProps> = ({error, queryOptions}) => {

-  const {serverUrl, query, queryHistory, queryControls: {autocomplete}} = useAppState();
+  const {query, queryHistory, queryControls: {autocomplete}} = useAppState();
  const dispatch = useAppDispatch();
  const [expanded, setExpanded] = useState(true);
  const queryContainer = useRef<HTMLDivElement>(null);
@ -109,8 +114,8 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({error, queryOptions}) =>
        </Box>
      </AccordionSummary>
      <AccordionDetails>
-        <Grid container columnSpacing={2}>
-          <Grid item xs={6} minWidth={400}>
+        <Box display="flex" flexWrap="wrap" gap={2}>
+          <Box flexGrow="2" minWidth="50%">
            <ServerConfigurator error={error}/>
            {/* for portal QueryEditor */}
            <div ref={queryContainer}/>
@ -120,14 +125,14 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({error, queryOptions}) =>
                <span style={{lineHeight: 1, paddingTop: "1px"}}>Query</span>
              </Button>
            </Box>}
-          </Grid>
-          <Grid item xs>
+          </Box>
+          <Box flexGrow="1">
            <TimeSelector setDuration={onSetDuration}/>
-          </Grid>
-          <Grid item xs={12} pt={1}>
+          </Box>
+          <Box flexBasis="100%" pt={1}>
            <AdditionalSettings/>
-          </Grid>
-        </Grid>
+          </Box>
+        </Box>
      </AccordionDetails>
    </Accordion>
  </>;
--- a/app/vmui/packages/vmui/src/components/Home/Configurator/Query/QueryEditor.tsx
+++ b/app/vmui/packages/vmui/src/components/Home/Configurator/Query/QueryEditor.tsx
@ -1,6 +1,8 @@
-import React, {FC, useEffect, useState} from "react";
+import React, {FC, useEffect, useState} from "preact/compat";
+import {KeyboardEvent} from "react";
 import {ErrorTypes} from "../../../../types";
-import {Autocomplete, TextField} from "@mui/material";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
 import {queryToBreakLine} from "../../../../utils/query-string";

 export interface QueryEditorProps {
@ -33,11 +35,11 @@ const QueryEditor: FC<QueryEditorProps> = ({
    setValue(queryToBreakLine(query));
  }, [query]);

-  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>): void => {
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>): void => {
    if (e.ctrlKey || e.metaKey) setDownMetaKeys([...downMetaKeys, e.key]);
  };

-  const handleKeyUp = (e: React.KeyboardEvent<HTMLDivElement>): void => {
+  const handleKeyUp = (e: KeyboardEvent<HTMLDivElement>): void => {
    const {key, ctrlKey, metaKey} = e;
    if (downMetaKeys.includes(key)) setDownMetaKeys(downMetaKeys.filter(k => k !== key));
    const ctrlMetaKey = ctrlKey || metaKey;
--- a/app/vmui/packages/vmui/src/components/Home/Configurator/Query/ServerConfigurator.tsx
+++ b/app/vmui/packages/vmui/src/components/Home/Configurator/Query/ServerConfigurator.tsx
@ -1,5 +1,8 @@
-import React, {FC, useEffect, useState} from "react";
-import {Box, TextField, Tooltip, IconButton} from "@mui/material";
+import React, {FC, useEffect, useState} from "preact/compat";
+import Box from "@mui/material/Box";
+import TextField from "@mui/material/TextField";
+import Tooltip from "@mui/material/Tooltip";
+import IconButton from "@mui/material/IconButton";
 import SecurityIcon from "@mui/icons-material/Security";
 import {useAppDispatch, useAppState} from "../../../../state/common/StateContext";
 import {AuthDialog} from "../Auth/AuthDialog";
--- a/app/vmui/packages/vmui/src/components/Home/Configurator/Query/StepConfigurator.tsx
+++ b/app/vmui/packages/vmui/src/components/Home/Configurator/Query/StepConfigurator.tsx
@ -1,5 +1,8 @@
-import React, {FC, useCallback, useEffect, useState} from "react";
-import {Box, FormControlLabel, TextField} from "@mui/material";
+import React, {FC, useCallback, useEffect, useState} from "preact/compat";
+import {ChangeEvent} from "react";
+import Box from "@mui/material/Box";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import TextField from "@mui/material/TextField";
 import BasicSwitch from "../../../../theme/switch";
 import {useGraphDispatch, useGraphState} from "../../../../state/graph/GraphStateContext";
 import {useAppState} from "../../../../state/common/StateContext";
@ -11,7 +14,7 @@ const StepConfigurator: FC = () => {
  const [error, setError] = useState(false);
  const {time: {period: {step}}} = useAppState();

-  const onChangeStep = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  const onChangeStep = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const value = +e.target.value;
    if (value > 0) {
      graphDispatch({type: "SET_CUSTOM_STEP", payload: value});
--- a/app/vmui/packages/vmui/src/components/Home/Configurator/Query/useFetchQuery.ts
+++ b/app/vmui/packages/vmui/src/components/Home/Configurator/Query/useFetchQuery.ts
@ -1,4 +1,4 @@
-import {useEffect, useMemo, useState} from "react";
+import {useEffect, useMemo, useState} from "preact/compat";
 import {getQueryOptions, getQueryRangeUrl, getQueryUrl} from "../../../../api/query-range";
 import {useAppState} from "../../../../state/common/StateContext";
 import {InstantMetricResult, MetricBase, MetricResult} from "../../../../api/types";
--- a/app/vmui/packages/vmui/src/components/Home/Configurator/Time/ExecutionControls.tsx
+++ b/app/vmui/packages/vmui/src/components/Home/Configurator/Time/ExecutionControls.tsx
@ -1,5 +1,8 @@
-import React, {FC, useEffect, useState} from "react";
-import {Box, FormControlLabel, IconButton, Tooltip} from "@mui/material";
+import React, {FC, useEffect, useState} from "preact/compat";
+import Box from "@mui/material/Box";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
 import EqualizerIcon from "@mui/icons-material/Equalizer";
 import {useAppDispatch, useAppState} from "../../../../state/common/StateContext";
 import CircularProgressWithLabel from "../../../common/CircularProgressWithLabel";
--- a/app/vmui/packages/vmui/src/components/Home/Configurator/Time/TimeDurationPopover.tsx
+++ b/app/vmui/packages/vmui/src/components/Home/Configurator/Time/TimeDurationPopover.tsx
@ -1,5 +1,11 @@
-import React, {FC} from "react";
-import {Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow} from "@mui/material";
+import React, {FC} from "preact/compat";
+import Paper from "@mui/material/Paper";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
 import {supportedDurations} from "../../../../utils/time";

 export const TimeDurationPopover: FC = () => {
--- a/app/vmui/packages/vmui/src/components/Home/Configurator/Time/TimeDurationSelector.tsx
+++ b/app/vmui/packages/vmui/src/components/Home/Configurator/Time/TimeDurationSelector.tsx
@ -1,5 +1,9 @@
-import React, {FC, useEffect, useState} from "react";
-import {Box, Popover, TextField, Typography} from "@mui/material";
+import React, {FC, useEffect, useState} from "preact/compat";
+import {ChangeEvent, MouseEvent, KeyboardEvent} from "react";
+import Box from "@mui/material/Box";
+import Popover from "@mui/material/Popover";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
 import {checkDurationLimit} from "../../../../utils/time";
 import {TimeDurationPopover} from "./TimeDurationPopover";
 import {InlineBtn} from "../../../common/InlineBtn";
@ -17,11 +21,11 @@ const TimeDurationSelector: FC<TimeDurationSelector> = ({setDuration}) => {
  const [durationStringFocused, setFocused] = useState(false);
  const open = Boolean(anchorEl);

-  const handleDurationChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleDurationChange = (event: ChangeEvent<HTMLInputElement>) => {
    setDurationString(event.target.value);
  };

-  const handlePopoverOpen = (event: React.MouseEvent<Element, MouseEvent>) => {
+  const handlePopoverOpen = (event: MouseEvent<HTMLSpanElement>) => {
    setAnchorEl(event.currentTarget);
  };

@ -29,7 +33,7 @@ const TimeDurationSelector: FC<TimeDurationSelector> = ({setDuration}) => {
    setAnchorEl(null);
  };

-  const onKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  const onKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {
    if (event.key !== "Enter") return;
    const target = event.target as HTMLInputElement;
    target.blur();
--- a/app/vmui/packages/vmui/src/components/Home/Configurator/Time/TimeSelector.tsx
+++ b/app/vmui/packages/vmui/src/components/Home/Configurator/Time/TimeSelector.tsx
@ -1,5 +1,7 @@
-import React, {FC, useEffect, useState} from "react";
-import {Box, TextField, Typography} from "@mui/material";
+import React, {FC, useEffect, useState} from "preact/compat";
+import Box from "@mui/material/Box";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
 import DateTimePicker from "@mui/lab/DateTimePicker";
 import {useAppDispatch, useAppState} from "../../../../state/common/StateContext";
 import {dateFromSeconds, formatDateForNativeInput} from "../../../../utils/time";
--- a/app/vmui/packages/vmui/src/components/Home/HomeLayout.tsx
+++ b/app/vmui/packages/vmui/src/components/Home/HomeLayout.tsx
@ -1,5 +1,8 @@
-import React, {FC} from "react";
-import {Alert, Box, CircularProgress, Fade} from "@mui/material";
+import React, {FC} from "preact/compat";
+import Alert from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+import Fade from "@mui/material/Fade";
 import GraphView from "./Views/GraphView";
 import TableView from "./Views/TableView";
 import {useAppState} from "../../state/common/StateContext";
--- a/app/vmui/packages/vmui/src/components/Home/UrlCopy.tsx
+++ b/app/vmui/packages/vmui/src/components/Home/UrlCopy.tsx
@ -1,5 +1,7 @@
-import React, {FC} from "react";
-import {Box, IconButton, Tooltip} from "@mui/material";
+import React, {FC} from "preact/compat";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
 import FileCopyIcon from "@mui/icons-material/FileCopy";
 import {useSnack} from "../../contexts/Snackbar";

--- a/app/vmui/packages/vmui/src/components/Home/UrlLine.tsx
+++ b/app/vmui/packages/vmui/src/components/Home/UrlLine.tsx
@ -1,5 +1,7 @@
-import React, {FC} from "react";
-import {Box, Button, Grid, Typography} from "@mui/material";
+import React, {FC} from "preact/compat";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
 import {useSnack} from "../../contexts/Snackbar";

 interface UrlLineProps {
@ -10,7 +12,7 @@ export const UrlLine: FC<UrlLineProps> = ({url}) => {

  const {showInfoMessage} = useSnack();

-  return <Grid item style={{backgroundColor: "#eee", width: "100%"}}>
+  return <Box style={{backgroundColor: "#eee", width: "100%"}}>
    <Box flexDirection="row" display="flex" justifyContent="space-between" alignItems="center">
      <Box pl={2} py={1} display="flex" style={{
        flex: 1,
@ -38,5 +40,5 @@ export const UrlLine: FC<UrlLineProps> = ({url}) => {
        }}>Copy Query Url</Button>
      </Box>
    </Box>
-  </Grid>;
+  </Box>;
 };
--- a/app/vmui/packages/vmui/src/components/Home/Views/GraphView.tsx
+++ b/app/vmui/packages/vmui/src/components/Home/Views/GraphView.tsx
@ -1,4 +1,4 @@
-import React, {FC, useEffect, useMemo, useState} from "react";
+import React, {FC, useEffect, useMemo, useState} from "preact/compat";
 import {MetricResult} from "../../../api/types";
 import LineChart from "../../LineChart/LineChart";
 import {AlignedData as uPlotData, Series as uPlotSeries} from "uplot";
--- a/app/vmui/packages/vmui/src/components/Home/Views/JsonView.tsx
+++ b/app/vmui/packages/vmui/src/components/Home/Views/JsonView.tsx
@ -1,6 +1,7 @@
-import React, {FC, useMemo} from "react";
+import React, {FC, useMemo} from "preact/compat";
 import {InstantMetricResult} from "../../../api/types";
-import {Box, Button} from "@mui/material";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
 import {useSnack} from "../../../contexts/Snackbar";

 export interface JsonViewProps {
--- a/app/vmui/packages/vmui/src/components/Home/Views/TableView.tsx
+++ b/app/vmui/packages/vmui/src/components/Home/Views/TableView.tsx
@ -1,7 +1,13 @@
-import React, {FC, useMemo} from "react";
+import React, {FC, useMemo} from "preact/compat";
 import {InstantMetricResult} from "../../../api/types";
 import {InstantDataSeries} from "../../../types";
-import {Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow} from "@mui/material";
+import Paper from "@mui/material/Paper";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
 import makeStyles from "@mui/styles/makeStyles";
 import {useSortedCategories} from "../../../hooks/useSortedCategories";

--- a/app/vmui/packages/vmui/src/components/Legend/Legend.tsx
+++ b/app/vmui/packages/vmui/src/components/Legend/Legend.tsx
@ -1,4 +1,4 @@
-import React, {FC, useMemo} from "react";
+import React, {FC, useMemo} from "preact/compat";
 import {hexToRGB} from "../../utils/color";
 import {useAppState} from "../../state/common/StateContext";
 import {LegendItem} from "../../utils/uplot/types";
--- a/app/vmui/packages/vmui/src/components/LineChart/LineChart.tsx
+++ b/app/vmui/packages/vmui/src/components/LineChart/LineChart.tsx
@ -1,4 +1,4 @@
-import React, {FC, useCallback, useEffect, useRef, useState} from "react";
+import React, {FC, useCallback, useEffect, useRef, useState} from "preact/compat";
 import {useAppDispatch, useAppState} from "../../state/common/StateContext";
 import uPlot, {AlignedData as uPlotData, Options as uPlotOptions, Series as uPlotSeries, Range, Scales, Scale} from "uplot";
 import {useGraphState} from "../../state/graph/GraphStateContext";
--- a/app/vmui/packages/vmui/src/components/common/CircularProgressWithLabel.tsx
+++ b/app/vmui/packages/vmui/src/components/common/CircularProgressWithLabel.tsx
@ -1,7 +1,7 @@
+import Box from "@mui/material/Box";
 import CircularProgress, {CircularProgressProps} from "@mui/material/CircularProgress";
-import {Box} from "@mui/material";
 import Typography from "@mui/material/Typography";
-import React, {FC} from "react";
+import React, {FC} from "preact/compat";

 const CircularProgressWithLabel: FC<CircularProgressProps & { label: number }> = (props) => {
  return (
--- a/app/vmui/packages/vmui/src/components/common/InlineBtn.tsx
+++ b/app/vmui/packages/vmui/src/components/common/InlineBtn.tsx
@ -1,6 +1,6 @@
 import makeStyles from "@mui/styles/makeStyles";
-import React from "react";
-import {Link} from "@mui/material";
+import React from "preact/compat";
+import Link from "@mui/material/Link";

 const useStyles = makeStyles({
  inlineBtn: {
--- a/app/vmui/packages/vmui/src/components/common/Logo.tsx
+++ b/app/vmui/packages/vmui/src/components/common/Logo.tsx
@ -1,8 +1,9 @@
-import React, {FC} from "react";
-import {SvgIcon} from "@mui/material";
+import React, {FC} from "preact/compat";
+import {CSSProperties} from "@mui/styles";
+import SvgIcon from "@mui/material/SvgIcon";

 interface LogoProps {
-  style?: React.CSSProperties
+  style?: CSSProperties
 }

 const Logo: FC<LogoProps> = ({style}) => (
--- a/app/vmui/packages/vmui/src/contexts/Snackbar.tsx
+++ b/app/vmui/packages/vmui/src/contexts/Snackbar.tsx
@ -1,5 +1,6 @@
-import React, {createContext, FC, useContext, useEffect, useState} from "react";
-import {Alert, Snackbar} from "@mui/material";
+import React, {createContext, FC, useContext, useEffect, useState} from "preact/compat";
+import Alert from "@mui/material/Alert";
+import Snackbar from "@mui/material/Snackbar";

 export interface SnackModel {
  message?: string;
--- a/app/vmui/packages/vmui/src/hooks/useResize.ts
+++ b/app/vmui/packages/vmui/src/hooks/useResize.ts
@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect } from "preact/compat";

 const useResize = (node: HTMLElement | null): {width: number, height: number} => {
  const [windowSize, setWindowSize] = useState({
--- a/app/vmui/packages/vmui/src/hooks/useSortedCategories.ts
+++ b/app/vmui/packages/vmui/src/hooks/useSortedCategories.ts
@ -1,4 +1,4 @@
-import {useMemo} from "react";
+import {useMemo} from "preact/compat";
 import {MetricBase} from "../api/types";

 export type MetricCategory = {
--- a/app/vmui/packages/vmui/src/index.tsx
+++ b/app/vmui/packages/vmui/src/index.tsx
@ -1,14 +1,11 @@
-import React from "react";
-import ReactDOM from "react-dom";
+import React, { render } from "preact/compat";
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById("root")
-);
+
+const root = document.getElementById("root");
+if (root) render(<App />, root);
+

 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
--- a/app/vmui/packages/vmui/src/state/auth/AuthStateContext.tsx
+++ b/app/vmui/packages/vmui/src/state/auth/AuthStateContext.tsx
@ -1,5 +1,6 @@
-import React, {createContext, Dispatch, FC, useContext, useMemo, useReducer} from "react";
+import React, {createContext, FC, useContext, useMemo, useReducer} from "preact/compat";
 import {AuthAction, AuthState, initialPrepopulatedState, reducer} from "./reducer";
+import {Dispatch} from "react";

 type AuthStateContextType = { state: AuthState, dispatch: Dispatch<AuthAction> };

--- a/app/vmui/packages/vmui/src/state/common/StateContext.tsx
+++ b/app/vmui/packages/vmui/src/state/common/StateContext.tsx
@ -1,6 +1,7 @@
-import React, {createContext, Dispatch, FC, useContext, useEffect, useMemo, useReducer} from "react";
+import React, {createContext, FC, useContext, useEffect, useMemo, useReducer} from "preact/compat";
 import {Action, AppState, initialState, reducer} from "./reducer";
 import {getQueryStringValue, setQueryStringValue} from "../../utils/query-string";
+import {Dispatch} from "react";

 type StateContextType = { state: AppState, dispatch: Dispatch<Action> };

--- a/app/vmui/packages/vmui/src/state/graph/GraphStateContext.tsx
+++ b/app/vmui/packages/vmui/src/state/graph/GraphStateContext.tsx
@ -1,5 +1,6 @@
-import React, {createContext, Dispatch, FC, useContext, useMemo, useReducer} from "react";
+import React, {createContext, FC, useContext, useMemo, useReducer} from "preact/compat";
 import {GraphAction, GraphState, initialGraphState, reducer} from "./reducer";
+import {Dispatch} from "react";

 type GraphStateContextType = { state: GraphState, dispatch: Dispatch<GraphAction> };

--- a/app/vmui/packages/vmui/src/theme/switch.ts
+++ b/app/vmui/packages/vmui/src/theme/switch.ts
@ -1,5 +1,5 @@
-import {styled} from "@mui/material/styles";
 import Switch from "@mui/material/Switch";
+import {styled} from "@mui/styles";

 const BasicSwitch = styled(Switch)(() => ({
  padding: 10,