From 1a9dfdd2513eff3d469c2bd949a82d84a037caec Mon Sep 17 00:00:00 2001
From: Kim Lida <88290393+Kinukeo@users.noreply.github.com>
Date: Fri, 22 Jul 2022 01:33:15 +0100
Subject: [PATCH 1/2]  Created connection warning dialog and offline boolean

---
 src/ui.tsx | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/ui.tsx b/src/ui.tsx
index 52fec794..f9477699 100644
--- a/src/ui.tsx
+++ b/src/ui.tsx
@@ -22,6 +22,8 @@ import {
   generateClassName,
   WarningSnackbar,
   Popper,
+  AdvancedDialog,
+  Button,
 } from "@gliff-ai/style";
 import { Annotations } from "@/annotation";
 import { PositionAndSize } from "@/annotation/interfaces";
@@ -195,6 +197,18 @@ const styles = {
   },
 };
 
+const connectionError = {
+  // maxHeight: "200px",
+};
+const offlineButtonsGrid = {
+  display: "flex",
+  justifyContent: "space-between",
+};
+const warningContainer = {
+  marginTop: "5px",
+  marginBottom: "20px",
+};
+
 interface Props extends WithStyles<typeof styles> {
   slicesData?: ImageBitmap[][] | null;
   imageFileInfo?: ImageFileInfo;
@@ -205,6 +219,7 @@ interface Props extends WithStyles<typeof styles> {
   // setIsLoading is used, but in progress.tsx
   // eslint-disable-next-line react/no-unused-prop-types
   setIsLoading?: (isLoading: boolean) => void;
+  offline?: boolean;
   userAccess?: UserAccess;
   plugins?: PluginObject | null;
   launchPluginSettingsCallback?: (() => void) | null;
@@ -223,6 +238,7 @@ class UserInterface extends Component<Props, State> {
     saveAnnotationsCallback: null,
     showAppBar: true,
     setIsLoading: null,
+    offline: false,
     slicesData: null,
     imageFileInfo: undefined,
     userAccess: UserAccess.Collaborator,
@@ -1314,6 +1330,25 @@ class UserInterface extends Component<Props, State> {
                 !this.props.readonly
               }
             />
+            <AdvancedDialog
+              sx={connectionError}
+              open={this.props.offline || true}
+              title="Connection Error"
+              warningDialog={true}
+            >
+              <Container sx={warningContainer}>
+                Please check your connection. Your unsaved changes will be lost
+                if we are unable to establish a connection.
+              </Container>
+              <Grid sx={offlineButtonsGrid}>
+                <Button color="secondary" variant="outlined">
+                  Exit without Saving
+                </Button>
+                <Button color="secondary" variant="contained">
+                  Retry Saving
+                </Button>
+              </Grid>
+            </AdvancedDialog>
           </ThemeProvider>
         </StyledEngineProvider>
       </StylesProvider>

From a35f78c26e515d8f31b74beea542547f83d247e9 Mon Sep 17 00:00:00 2001
From: Kim Lida <88290393+Kinukeo@users.noreply.github.com>
Date: Fri, 29 Jul 2022 13:32:25 +0100
Subject: [PATCH 2/2] Autosave timer and dialog for connection loss

---
 src/ui.tsx | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/ui.tsx b/src/ui.tsx
index f9477699..6c62776f 100644
--- a/src/ui.tsx
+++ b/src/ui.tsx
@@ -197,9 +197,6 @@ const styles = {
   },
 };
 
-const connectionError = {
-  // maxHeight: "200px",
-};
 const offlineButtonsGrid = {
   display: "flex",
   justifyContent: "space-between",
@@ -264,6 +261,8 @@ class UserInterface extends Component<Props, State> {
 
   private keyListener: (event: KeyboardEvent) => boolean;
 
+  private saveTimeout: NodeJS.Timeout | undefined;
+
   // private leftCanvasRefs: { [name: string]: SplineCanvasClass };
   private leftCanvasRefs: {
     [name: string]:
@@ -327,6 +326,8 @@ class UserInterface extends Component<Props, State> {
     this.keyListener = keydownListener(this.isTyping);
     document.addEventListener("keydown", this.keyListener);
 
+    document.addEventListener("mousedown", this.autoSave);
+
     for (const event of events) {
       document.addEventListener(event, this.handleEvent);
     }
@@ -875,6 +876,17 @@ class UserInterface extends Component<Props, State> {
     this.annotationsObject.redo();
   };
 
+  autoSave = (): void => {
+    if (this.saveTimeout) {
+      clearTimeout(this.saveTimeout);
+    }
+
+    this.saveTimeout = setTimeout(() => {
+      this.saveAnnotations();
+      this.saveTimeout = undefined;
+    }, 5000);
+  };
+
   isTyping = (): boolean =>
     // Added to prevent single-key shortcuts that are also valid text input
     // to get triggered during text input.
@@ -1331,8 +1343,7 @@ class UserInterface extends Component<Props, State> {
               }
             />
             <AdvancedDialog
-              sx={connectionError}
-              open={this.props.offline || true}
+              open={this.props.offline}
               title="Connection Error"
               warningDialog={true}
             >