Skip to content

feat!: offline detection and navigation catches #776

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Kinukeo wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

feat!: offline detection and navigation catches #776

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1a9dfdd
Created connection warning dialog and offline
Kinukeo Jul 22, 2022
a35f78c
Autosave timer and dialog for connection loss
Kinukeo Jul 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions src/ui.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ import {
generateClassName,
WarningSnackbar,
Popper,
AdvancedDialog,
Button,
} from "@gliff-ai/style";
import { Annotations } from "@/annotation";
import { PositionAndSize } from "@/annotation/interfaces";
Expand Down Expand Up @@ -195,6 +197,15 @@ const styles = {
},
};

const offlineButtonsGrid = {
display: "flex",
justifyContent: "space-between",
};
const warningContainer = {
marginTop: "5px",
marginBottom: "20px",
};

interface Props extends WithStyles<typeof styles> {
slicesData?: ImageBitmap[][] | null;
imageFileInfo?: ImageFileInfo;
Expand All @@ -205,6 +216,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;
Expand All @@ -223,6 +235,7 @@ class UserInterface extends Component<Props, State> {
saveAnnotationsCallback: null,
showAppBar: true,
setIsLoading: null,
offline: false,
slicesData: null,
imageFileInfo: undefined,
userAccess: UserAccess.Collaborator,
Expand All @@ -248,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]:
Expand Down Expand Up @@ -311,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);
}
Expand Down Expand Up @@ -859,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.
Expand Down Expand Up @@ -1314,6 +1342,24 @@ class UserInterface extends Component<Props, State> {
!this.props.readonly
}
/>
<AdvancedDialog
open={this.props.offline}
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>
Expand Down