Chunk-based query with global loading backdrop

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>
open-rmf · Mar 8, 2024 · 1cc0fa2 · 1cc0fa2
1 parent 6014ead
commit 1cc0fa2
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 40 deletions.
diff --git a/packages/dashboard/src/components/app-base.tsx b/packages/dashboard/src/components/app-base.tsx
@@ -1,6 +1,8 @@
 import {
   Alert,
   AlertProps,
+  Backdrop,
+  CircularProgress,
   createTheme,
   CssBaseline,
   GlobalStyles,
@@ -14,6 +16,7 @@ import { loadSettings, saveSettings, Settings, ThemeMode } from '../settings';
 import { AppController, AppControllerContext, SettingsContext } from './app-contexts';
 import AppBar from './appbar';
 import { AlertStore } from './alert-store';
+import { AppEvents } from './app-events';
 import { DeliveryAlertStore } from './delivery-alert-store';
 
 const DefaultAlertDuration = 2000;
@@ -39,6 +42,7 @@ export function AppBase({ children }: React.PropsWithChildren<{}>): JSX.Element
   const [alertMessage, setAlertMessage] = React.useState('');
   const [alertDuration, setAlertDuration] = React.useState(DefaultAlertDuration);
   const [extraAppbarIcons, setExtraAppbarIcons] = React.useState<React.ReactNode>(null);
+  const [openLoadingBackdrop, setOpenLoadingBackdrop] = React.useState(false);
 
   const theme = React.useMemo(() => {
     switch (settings.themeMode) {
@@ -70,10 +74,26 @@ export function AppBase({ children }: React.PropsWithChildren<{}>): JSX.Element
     [updateSettings],
   );
 
+  React.useEffect(() => {
+    const sub = AppEvents.loadingBackdrop.subscribe((value) => {
+      console.log('got event');
+      setOpenLoadingBackdrop(value);
+    });
+    return () => sub.unsubscribe();
+  }, []);
+
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
       {settings.themeMode === ThemeMode.RmfDark && <GlobalStyles styles={rmfDarkLeaflet} />}
+      {openLoadingBackdrop && (
+        <Backdrop
+          sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+          open={openLoadingBackdrop}
+        >
+          <CircularProgress color="inherit" />
+        </Backdrop>
+      )}
       <SettingsContext.Provider value={settings}>
         <AppControllerContext.Provider value={appController}>
           <AlertStore />

diff --git a/packages/dashboard/src/components/app-events.ts b/packages/dashboard/src/components/app-events.ts
@@ -30,4 +30,5 @@ export const AppEvents = {
   levelSelect: new BehaviorSubject<Level | null>(null),
   justLoggedIn: new BehaviorSubject<boolean>(false),
   resetCamera: new Subject<[x: number, y: number, z: number, zoom: number]>(),
+  loadingBackdrop: new Subject<boolean>(),
 };
diff --git a/packages/dashboard/src/components/tasks/tasks-app.tsx b/packages/dashboard/src/components/tasks/tasks-app.tsx
@@ -1,9 +1,9 @@
 import DownloadIcon from '@mui/icons-material/Download';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import {
-  Backdrop,
+  // Backdrop,
   Box,
-  CircularProgress,
+  // CircularProgress,
   IconButton,
   Menu,
   MenuItem,
@@ -85,7 +85,7 @@ export const TasksApp = React.memo(
     ) => {
       const rmf = React.useContext(RmfAppContext);
       const [autoRefresh, setAutoRefresh] = React.useState(true);
-      const [openLoadingBackdrop, setOpenLoadingBackdrop] = React.useState(false);
+      // const [openLoadingBackdrop, setOpenLoadingBackdrop] = React.useState(false);
       const [refreshTaskAppCount, setRefreshTaskAppCount] = React.useState(0);
       const [selectedPanelIndex, setSelectedPanelIndex] = React.useState(TaskTablePanel.QueueTable);
 
@@ -249,6 +249,7 @@ export const TasksApp = React.memo(
         }
 
         const taskStateCount = (await rmf.tasksApi.taskStatesCountTasksCountGet()).data;
+        console.log(taskStateCount);
         const QUERY_LIMIT = 100;
         const queriesRequired = Math.ceil(taskStateCount / QUERY_LIMIT);
         const allTasks: TaskState[] = [];
@@ -272,24 +273,6 @@ export const TasksApp = React.memo(
           );
           allTasks.push(...resp.data);
         }
-
-        // const resp = await rmf.tasksApi.queryTaskStatesTasksGet(
-        //   undefined,
-        //   undefined,
-        //   undefined,
-        //   undefined,
-        //   undefined,
-        //   undefined,
-        //   undefined,
-        //   `0,${timestamp.getTime()}`,
-        //   undefined,
-        //   undefined,
-        //   5000,
-        //   undefined,
-        //   '-unix_millis_start_time',
-        //   undefined,
-        // );
-        // const allTasks = resp.data as TaskState[];
         return allTasks;
       };
 
@@ -315,6 +298,7 @@ export const TasksApp = React.memo(
       };
 
       const exportTasksToCsv = async (minimal: boolean) => {
+        AppEvents.loadingBackdrop.next(true);
         const now = new Date();
         const allTasks = await getAllTasks(now);
         const allTaskRequests = await getAllTaskRequests(allTasks);
@@ -326,6 +310,7 @@ export const TasksApp = React.memo(
         } else {
           downloadCsvFull(now, allTasks);
         }
+        AppEvents.loadingBackdrop.next(false);
       };
 
       const [anchorExportElement, setAnchorExportElement] = React.useState<null | HTMLElement>(
@@ -376,25 +361,17 @@ export const TasksApp = React.memo(
                 >
                   <MenuItem
                     onClick={() => {
-                      handleCloseExportMenu();
-                      console.log('starting minimal export');
-                      setOpenLoadingBackdrop(true);
                       exportTasksToCsv(true);
-                      console.log('ending minimal export');
-                      setOpenLoadingBackdrop(false);
+                      handleCloseExportMenu();
                     }}
                     disableRipple
                   >
                     Export Minimal
                   </MenuItem>
                   <MenuItem
                     onClick={() => {
-                      handleCloseExportMenu();
-                      console.log('starting full export');
-                      setOpenLoadingBackdrop(true);
                       exportTasksToCsv(false);
-                      console.log('ending full export');
-                      setOpenLoadingBackdrop(false);
+                      handleCloseExportMenu();
                     }}
                     disableRipple
                   >
@@ -471,15 +448,6 @@ export const TasksApp = React.memo(
             />
           )}
           {children}
-          <Backdrop
-            sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-            open={openLoadingBackdrop}
-            // onClick={() => {
-            //   setOpenLoadingBackdrop(false);
-            // }}
-          >
-            <CircularProgress color="inherit" />
-          </Backdrop>
         </Window>
       );
     },