Merge pull request #234 from pnnl/offline_support_2

Changes for Offline support
pnnl · Oct 18, 2024 · aea178e · aea178e
2 parents f46abfd + ce38db3
commit aea178e
Show file tree

Hide file tree

Showing 26 changed files with 13,232 additions and 421 deletions.
diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -704,7 +704,7 @@ module.exports = async function (webpackEnv) {
           // Bump up the default maximum size (2mb) that's precached,
           // to make lazy-loading failure scenarios less likely.
           // See https://github.com/cra-template/pwa/issues/13#issuecomment-722667270
-          maximumFileSizeToCacheInBytes: 20 * 1024 * 1024
+          maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
         }),
       // TypeScript type checking
       useTypeScript &&

diff --git a/package.json b/package.json
@@ -21,9 +21,9 @@
     "@types/node": "^17.0.10",
     "@types/pouchdb": "^6.4.0",
     "@types/pouchdb-upsert": "^2.2.6",
-    "@types/react": "^18.0.0",
+    "@types/react": "^18.2.0",
     "@types/react-bootstrap": "^0.32.32",
-    "@types/react-dom": "^18.0.0",
+    "@types/react-dom": "^18.2.0",
     "babel-jest": "^27.4.2",
     "babel-loader": "^8.2.3",
     "babel-plugin-named-asset-import": "^0.3.8",
@@ -51,7 +51,6 @@
     "heic2any": "^0.0.4",
     "html-webpack-plugin": "^5.5.0",
     "identity-obj-proxy": "^3.0.0",
-    "image-blob-reduce": "^4.1.0",
     "jest": "^27.4.3",
     "jest-resolve": "^27.4.2",
     "jest-watch-typeahead": "^1.0.0",
@@ -137,6 +136,7 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.22.9",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@types/react-router-bootstrap": "^0.26.0",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
     "@typescript-eslint/parser": "^5.0.0",
@@ -148,7 +148,7 @@
     "eslint-plugin-react": "^7.33.0",
     "prettier": "^3.0.0",
     "react-dev-utils": "^12.0.1"
-    },
+  },
   "jest": {
     "roots": [
       "<rootDir>/src"

diff --git a/public/index.html b/public/index.html
@@ -26,6 +26,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Quality Install Tool</title>
+
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,27 +1,40 @@
 import 'bootstrap/dist/css/bootstrap.css'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import './App.css'
-import TemplateEditor from './components/editor'
-import WorkFlowView from './components/workflow_view'
-import JobsView from './components/jobs_view'
-import JsonStoreView from './components/json_store_view'
-import MdxTemplateView from './components/mdx_template_view'
-import RootLayout from './components/root_layout'
-import Home from './components/home'
-import MdxProjectView from './components/mdx_project_details_view'
-import MdxCombustionSafetyView from './components/mdx_combustion_appliance_safety_view'
+import React, { Suspense, lazy } from 'react'
+
+// Lazily initializes the views, rendering them only when requested.
+const RootLayout = lazy(() => import('./components/root_layout'))
+const WorkFlowView = lazy(() => import('./components/workflow_view'))
+const JobsView = lazy(() => import('./components/jobs_view'))
+const Home = lazy(() => import('./components/home'))
+const MdxProjectView = lazy(
+    () => import('./components/mdx_project_details_view'),
+)
+const MdxTemplateView = lazy(() => import('./components/mdx_template_view'))
+const MdxCombustionSafetyView = lazy(
+    () => import('./components/mdx_combustion_appliance_safety_view'),
+)
 
 // Routes to be used by React Router, which handles all the
 // browser routing within this domain.
 
+/**
+ * Wraps the application in a <Suspense> component to handle loading states.
+ *
+ * The `fallback` prop displays a loading indicator while the child components
+ * are being loaded asynchronously.
+ */
 const routes = [
     {
         path: '/',
         // App Home page : Lists existing projects provides functionality to create new one
         element: (
-            <RootLayout>
-                <Home />
-            </RootLayout>
+            <Suspense fallback={<div>Loading...</div>}>
+                <RootLayout>
+                    <Home />
+                </RootLayout>
+            </Suspense>
         ),
     },
     // TODO: This route will be revisited and revised in the future
@@ -33,48 +46,58 @@ const routes = [
         path: `/app/:projectId/workflows`,
         // Workflow list view:  List the names of workflows available for generating installation report.
         element: (
-            <RootLayout>
-                <WorkFlowView />
-            </RootLayout>
+            <Suspense fallback={<div>Loading...</div>}>
+                <RootLayout>
+                    <WorkFlowView />
+                </RootLayout>
+            </Suspense>
         ),
     },
     {
         path: `/app/:projectId/doe_workflow_combustion_safety_testing`,
         // Workflow list view:  List the names of workflows available for generating installation report.
         element: (
-            <RootLayout>
-                <MdxCombustionSafetyView />
-            </RootLayout>
+            <Suspense fallback={<div>Loading...</div>}>
+                <RootLayout>
+                    <MdxCombustionSafetyView />
+                </RootLayout>
+            </Suspense>
         ),
     },
     {
         path: `/app/:projectId`,
         // Project details view: Collects information related to the project.
         element: (
-            <RootLayout>
-                <MdxProjectView />
-            </RootLayout>
+            <Suspense fallback={<div>Loading...</div>}>
+                <RootLayout>
+                    <MdxProjectView />
+                </RootLayout>
+            </Suspense>
         ),
     },
     {
         path: `/app/:projectId/:workflowName`,
         // Jobs List View: Lists existing installations associated with a particular workflow
         // and provides functionality to create new installations
         element: (
-            <RootLayout>
-                <div>
-                    <JobsView />
-                </div>
-            </RootLayout>
+            <Suspense fallback={<div>Loading...</div>}>
+                <RootLayout>
+                    <div>
+                        <JobsView />
+                    </div>
+                </RootLayout>
+            </Suspense>
         ),
     },
     {
         path: `/app/:projectId/:workflowName/:jobId`,
         // Jobs View: Gathering and displaying information pertinent to individual installations
         element: (
-            <RootLayout>
-                <MdxTemplateView />
-            </RootLayout>
+            <Suspense fallback={<div>Loading...</div>}>
+                <RootLayout>
+                    <MdxTemplateView />
+                </RootLayout>
+            </Suspense>
         ),
     },
     // TODO: This route will be revisited and revised in the future

diff --git a/src/components/combustion_safety_checks_inputs.tsx b/src/components/combustion_safety_checks_inputs.tsx
@@ -2,11 +2,10 @@ import { FC, Key, useEffect, useState } from 'react'
 import RadioWrapper from './radio_wrapper'
 import { Button } from 'react-bootstrap'
 import PhotoInputWrapper from './photo_input_wrapper'
-import dbName from './db_details'
 import { useParams } from 'react-router-dom'
-import PouchDB from 'pouchdb'
 import ShowOrHide from './show_or_hide'
 import Collapsible from './collapsible'
+import { useDB } from '../utilities/database_utils'
 
 interface ApplianceSafetyTestProps {
     appliance_key: string
@@ -221,7 +220,7 @@ const CombustionSafetyChecks: FC<{ path: string }> = ({ path }) => {
     )
     const allowedApplianceKeys = ['A1', 'A2', 'A3', 'A4']
     const { projectId } = useParams()
-    const db = new PouchDB(dbName)
+    const db = useDB()
 
     const fetchAppliances = async () => {
         if (!projectId) {
@@ -249,11 +248,11 @@ const CombustionSafetyChecks: FC<{ path: string }> = ({ path }) => {
                 since: 'now',
                 include_docs: true,
             })
-            .on('change', change => {
+            .on('change', () => {
                 // Call fetchAppliances() when a change is detected in DB
                 fetchAppliances()
             })
-            .on('error', err => {
+            .on('error', (err: any) => {
                 console.error('Changes feed error:', err)
             })
 

diff --git a/src/components/combustion_safety_checks_report.tsx b/src/components/combustion_safety_checks_report.tsx
@@ -1,16 +1,15 @@
 import { FC, useEffect, useState } from 'react'
-import dbName from './db_details'
 import { useParams } from 'react-router-dom'
-import PouchDB from 'pouchdb'
 import PhotoWrapper from './photo_wrapper'
+import { useDB } from '../utilities/database_utils'
 
 const CombustionSafetyChecksReport: FC<{ path: string }> = ({ path }) => {
     const [appliances, setAppliances] = useState<any>({})
     const [appliancesKey, setAppliancesKey] = useState<any[]>(
         Object.keys(appliances),
     )
     const { projectId } = useParams()
-    const db = new PouchDB(dbName)
+    const db = useDB()
 
     const fetchAppliances = async () => {
         if (!projectId) {
@@ -38,11 +37,11 @@ const CombustionSafetyChecksReport: FC<{ path: string }> = ({ path }) => {
                 since: 'now',
                 include_docs: true,
             })
-            .on('change', change => {
+            .on('change', () => {
                 // Call fetchAppliances() when a change is detected in DB
                 fetchAppliances()
             })
-            .on('error', err => {
+            .on('error', (err: any) => {
                 console.error('Changes feed error:', err)
             })
 

diff --git a/src/components/doc_name_input.tsx b/src/components/doc_name_input.tsx
@@ -1,9 +1,7 @@
 import React, { FC, useState, useEffect } from 'react'
 import FloatingLabel from 'react-bootstrap/FloatingLabel'
 import Form from 'react-bootstrap/Form'
-import { retrieveProjectDocs } from '../utilities/database_utils'
-import PouchDB from 'pouchdb'
-import dbName from './db_details'
+import { retrieveProjectDocs, useDB } from '../utilities/database_utils'
 
 /**
  * Props interface for the DocNameInput component.
@@ -49,7 +47,7 @@ const DocNameInput: FC<DocNameInputProps> = ({
     const [projectList, setProjectList] = useState<any[]>([])
     const [projectNames, setProjectNames] = useState<any[]>([])
 
-    const db = new PouchDB(dbName)
+    const db = useDB()
 
     /*
      * Retrieves project information from the database and updates the component state.