Bump minimist from 1.2.5 to 1.2.8 in /cloverExtension

cloverExtension/package.json

@@ -81,7 +81,9 @@
     "glob": "^7.1.6",
     "mocha": "^8.0.1",
     "typescript": "^4.1.5",
-    "vscode-test": "^1.4.0"
+    "vscode-test": "^1.4.0",
+    "webpack-bundle-analyzer": "^4.8.0",
+    "webpack-cli": "^5.0.1"
   },
   "dependencies": {
     "@svgr/webpack": "^6.5.1",
@@ -104,7 +106,6 @@
     "ts-loader": "^8.0.3",
     "ts-node": "^9.1.1",
     "webpack": "5",
-    "webpack-cli": "^3.3.12",
     "webworkify-webpack": "^2.1.5",
     "xo": "^0.33.1"
   },

cloverExtension/src/components/copterStatus/Main.tsx

@@ -1,11 +1,13 @@
-import React from 'react'
+import React, { lazy, Suspense } from 'react'
 import { Attitude } from './Attitude'
 import { Value } from './Value'
-import ImageTopic from '../ImageTopic'
 import { AttitudeInfo } from '../../useMav'
 import styles from './main.css'
 import { Translation } from '../../ros/builtinTypes'
 import Choose from '../Choose'
+import Loader from '../loader/Loader'
+
+const ImageTopic = lazy(() => import('../ImageTopic'))
 
 export function Main({
   attitude,
@@ -22,14 +24,22 @@ export function Main({
   altitude: number | null | undefined
   translation: Translation
   frames: string[]
-  cordFrame: string, 
+  cordFrame: string
   distToNav: number
-  setCordFrame: (n: string)=>void
+  setCordFrame: (n: string) => void
 }) {
   return (
     <div className={styles.root}>
       <div className={styles.altitude}>
-        <ImageTopic topic="/main_camera/image_raw" />
+        <Suspense
+          fallback={
+            <div className={styles.fallbackImage}>
+              <Loader />
+            </div>
+          }
+        >
+          <ImageTopic topic="/main_camera/image_raw" />
+        </Suspense>
         <Choose
           getVariants={() => frames}
           text="Frame"
@@ -48,14 +58,8 @@ export function Main({
           roll={-attitude.roll}
           pitch={-attitude.pitch}
         />
-        <Value
-          title="Altitude (rel) (m)"
-          value={altitude}
-        />
-        <Value
-          title="Ground speed (m/s)"
-          value={groundSpeed}
-        />
+        <Value title="Altitude (rel) (m)" value={altitude} />
+        <Value title="Ground speed (m/s)" value={groundSpeed} />
         <Value title="Distance to target (m)" value={distToNav} />
       </div>
     </div>

cloverExtension/src/components/copterStatus/main.css

@@ -12,4 +12,12 @@
 .cords {
   display: flex;
   justify-content: space-around;
+}
+
+.fallbackImage {
+  width: 320px;
+  height: 240px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

cloverExtension/src/opencv/index.ts

@@ -4,16 +4,15 @@ let isInited = false
 let initHandlers: (() => void)[] = []
 
 cv['onRuntimeInitialized'] = () => {
+  console.log('cvloaded')
   isInited = true
   initHandlers.forEach((e) => e())
   initHandlers = []
 }
 
 export function load() {
-  console.log(cv)
   if (isInited) return cv
   return new Promise<void>((resolve) => {
-    console.log('CV', cv)
     initHandlers.push(() => resolve())
   })
 }

cloverExtension/src/views/imageVis.tsx

@@ -1,17 +1,19 @@
-import React, { Suspense, useEffect } from 'react'
+import React, { lazy, Suspense, useEffect } from 'react'
 import { render } from 'react-dom'
 import Choose from '../components/Choose'
-import ImageTopic from '../components/ImageTopic'
+// import ImageTopic from '../components/ImageTopic'
 import { getTopicsForType } from '../ros/topic'
 import '../common'
 import { changeTitle } from '../vscode'
 import { useVsState } from '../useVSState'
 import GlobalLoader from '../components/loader/GlobalLoader'
 
+const ImageTopic = lazy(() => import('../components/ImageTopic'))
+
 function App() {
   const [topic, setTopic] = useVsState<null | string>(null)
-  useEffect(()=>{
-    changeTitle(topic ?? "Image topic visualization")
+  useEffect(() => {
+    changeTitle(topic ?? 'Image topic visualization')
   }, [topic])
   return (
     <>
@@ -25,14 +27,15 @@ function App() {
         }
         onChange={(newTopic) => setTopic(newTopic)}
       />
-      {topic && <ImageTopic topic={topic} />}
+      <Suspense fallback={<GlobalLoader />}>
+        {topic && <ImageTopic topic={topic} />}
+      </Suspense>
     </>
   )
 }
 
-render(
-  <Suspense fallback={<GlobalLoader />}>
-    <App />
-  </Suspense>,
-  document.querySelector('#root')
-)
+let el = document.querySelector<HTMLDivElement>('#root')
+if (el) {
+  render(<App />, el)
+  el.style.padding = '10px'
+}

cloverExtension/src/views/serviceCaller.tsx

@@ -31,4 +31,8 @@ function App() {
   )
 }
 
-render(<App />, document.querySelector('#root'))
+let el = document.querySelector<HTMLDivElement>('#root')
+if (el) {
+  render(<App />, el)
+  el.style.padding = '10px'
+}

cloverExtension/src/views/topicVis.tsx

@@ -30,9 +30,8 @@ function App() {
   )
 }
 
-render(
-  <Suspense fallback={<GlobalLoader/ >}>
-    <App />
-  </Suspense>,
-  document.querySelector('#root')
-)
+let el = document.querySelector<HTMLDivElement>('#root')
+if (el) {
+  render(<App />, el)
+  el.style.padding = '10px'
+}

cloverExtension/webpack.config.ts

@@ -39,7 +39,8 @@ const config: webpack.Configuration[] = [
       path: path.resolve(__dirname, 'out', 'ui'),
       filename: '[name].js'
     },
-    devtool: 'eval-source-map',
+    devtool:
+      process.env.NODE_ENV === 'development' ? 'eval-source-map' : undefined,
     resolve: {
       extensions: ['.js', '.ts', '.tsx', '.json'],
       alias: {
@@ -89,8 +90,8 @@ const config: webpack.Configuration[] = [
         },
         {
           test: /\.svg$/,
-          use: ['@svgr/webpack'],
-        },
+          use: ['@svgr/webpack']
+        }
       ]
     }
   }