Merge pull request #56 from bnmajor/loading-progress

thewtex · web-flow · commit cad7d7779dd2 · 2022-04-12T11:00:37.000-04:00
feat(progress): Add progress circle and text while plugin is loading
diff --git a/client/index.html b/client/index.html
@@ -3,10 +3,18 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.png" />
+    <link rel="stylesheet" type="text/css" href="/client/src/style.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/itk-vtk-viewer@11.12.4/dist/itkVtkViewer.js">
+      var loading = true
+    </script>
   </head>
   <body>
     <div class="content" style="position: absolute; width: 100vw; height: 100vh; top: 0; left: 0; overflow: hidden; background: black; margin: 0; padding: 0;"></div>
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/itk-vtk-viewer@11.12.4/dist/itkVtkViewer.js"></script>
+    <div id="loadingText" class="loadingText">
+      TensorBoard 3D is loading, please wait...
+    </div>
+    <div id="loading" class="loading"/>
+    <div id="progress" class="progress"/>
   </body>
 </html>
diff --git a/client/package.json b/client/package.json
@@ -30,6 +30,7 @@
     "material-ui": "^0.20.2",
     "ndarray-pack": "^1.2.1",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "regenerator-runtime": "^0.13.9"
   }
 }
diff --git a/client/src/ImageSelector.jsx b/client/src/ImageSelector.jsx
@@ -19,6 +19,12 @@ function ImageSelector(props) {
   const component = state.context.images.selectedComponent;
   const actorContext = state.context.images.actorContext.get(name)
 
+  useEffect(() => {
+    if (actorContext && window.loading) {
+      toggleProgressCircle(false)
+    }
+  }, [actorContext])
+
   useEffect(async() => {
     const counts = await fetchJSON(`../tensorboard_plugin_3d/images/count`);
     setImageCount(counts);
@@ -36,6 +42,12 @@ function ImageSelector(props) {
     }
   }, [name, component, actorContext])
 
+  const toggleProgressCircle = (state) => {
+    window.loading = state
+    let elem = document.getElementById('loading')
+    elem.style.display = state ? 'block' : 'none'
+  }
+
   const changeImage = async (idx) => {
     if (idx < 1)
       idx = 1
@@ -53,6 +65,7 @@ function ImageSelector(props) {
       }
       return image_data
     })
+    toggleProgressCircle(true)
     window.itkVtkViewer.createViewer(
       document.querySelector('.content'),
       {
diff --git a/client/src/main.jsx b/client/src/main.jsx
@@ -29,6 +29,11 @@ function modifiedCreateInterface(context) {
     context.uiGroups = new Map()
   }
 
+  if (window.loading) {
+    const elem = document.getElementById('loadingText')
+    elem.style.display = 'none'
+  }
+
   ReactDOM.render(
     <React.StrictMode>
       <CollapseUIButton service={ context.service }/>
diff --git a/client/src/style.css b/client/src/style.css
@@ -55,3 +55,42 @@
   top: 35px !important;
   max-width: 400px;
 }
+
+.progress {
+  color: white;
+  font-size: 200%;
+  height: 100vh;
+  width: 100vw;
+  text-align: center;
+  vertical-align: middle;
+  line-height: 100vh;
+}
+
+.loading {
+  border: 16px solid #f3f3f3; /* Light grey */
+  border-top: 16px solid #3498db; /* Blue */
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  position: absolute;
+  left: calc(50% - 60px);
+  top: calc(50% - 60px);
+  animation: spin 2s linear infinite;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.loadingText {
+  position: fixed;
+  top: calc(50% + 80px);
+  font-size: xx-large;
+  color: white;
+  text-align: center;
+  width: 100%;
+  font-style: italic;
+}
diff --git a/client/webpack.config.js b/client/webpack.config.js
@@ -6,7 +6,7 @@ const isDev = process.env.NODE_ENV !== 'production'
 
 module.exports = {
   mode: isDev ? 'development' : 'production',
-  entry: './src/index.js',
+  entry: ['regenerator-runtime/runtime.js', './src/index.js'],
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'index.js'
diff --git a/client/yarn.lock b/client/yarn.lock
@@ -4642,7 +4642,7 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
-regenerator-runtime@^0.13.4:
+regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.9:
   version "0.13.9"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
diff --git a/tensorboard_plugin_3d/static/index.html b/tensorboard_plugin_3d/static/index.html

Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,7 @@`
`30`	`30`	`"material-ui": "^0.20.2",`
`31`	`31`	`"ndarray-pack": "^1.2.1",`
`32`	`32`	`"react": "^17.0.2",`
`33`		`- "react-dom": "^17.0.2"`
	`33`	`+ "react-dom": "^17.0.2",`
	`34`	`+ "regenerator-runtime": "^0.13.9"`
`34`	`35`	`}`
`35`	`36`	`}`