Skip to content

Commit 8be70fe

Browse files
seveibarseveibar
committed
various fixes, error boundary
1 parent dc40470 commit 8be70fe

File tree

7 files changed

+108
-14
lines changed

7 files changed

+108
-14
lines changed

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@
2828
"build": "npm run build:babel && cp ./package.json ./dist/package.json",
2929
"build:babel": "NODE_ENV=production babel ./src --out-dir=./dist",
3030
"build-storybook": "build-storybook",
31-
"deploy-storybook": "storybook-to-ghpages"
31+
"build:gh-pages": "react-scripts build",
32+
"deploy:gh-pages": "gh-pages -d build"
3233
},
3334
"eslintConfig": {
3435
"extends": "react-app"

‎public/favicon.ico

3.78 KB
Binary file not shown.

‎public/index.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<meta name="theme-color" content="#000000">
7+
<!--
8+
manifest.json provides metadata used when your web app is added to the
9+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10+
-->
11+
<!--
12+
Notice the use of %PUBLIC_URL% in the tags above.
13+
It will be replaced with the URL of the `public` folder during the build.
14+
Only files inside the `public` folder can be referenced from the HTML.
15+
16+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
17+
work correctly both with client-side routing and a non-root public URL.
18+
Learn how to configure a non-root public URL by running `npm run build`.
19+
-->
20+
<title>React Image Annotation</title>
21+
</head>
22+
<body>
23+
<noscript>
24+
You need to enable JavaScript to run this app.
25+
</noscript>
26+
<div id="root"></div>
27+
<!--
28+
This HTML file is a template.
29+
If you open it directly in the browser, you will see an empty page.
30+
31+
You can add webfonts, meta tags, or analytics to this file.
32+
The build step will place the bundled scripts into the <body> tag.
33+
34+
To begin the development, run `npm start` or `yarn start`.
35+
To create a production bundle, use `npm run build` or `yarn build`.
36+
-->
37+
</body>
38+
</html>

‎src/DemoSite/Editor.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const useStyles = makeStyles({
2929
}
3030
})
3131

32-
const examples = {
32+
export const examples = {
3333
"Simple Bounding Box": {
3434
taskDescription:
3535
"Annotate each image according to this _markdown_ specification.",
@@ -52,9 +52,7 @@ const examples = {
5252

5353
const Editor = ({ onOpenAnnotator, lastOutput }: any) => {
5454
const c = useStyles()
55-
const [selectedExample, changeSelectedExample] = useState(
56-
"Simple Bounding Box"
57-
)
55+
const [selectedExample, changeSelectedExample] = useState("Custom")
5856
const [outputDialogOpen, changeOutputOpen] = useState(false)
5957
return (
6058
<div>
@@ -87,7 +85,9 @@ const Editor = ({ onOpenAnnotator, lastOutput }: any) => {
8785
variant="outlined"
8886
onClick={() =>
8987
onOpenAnnotator(
90-
JSON.parse(window.localStorage.getItem("customInput"))
88+
selectedExample === "Custom"
89+
? JSON.parse(window.localStorage.getItem("customInput"))
90+
: examples[selectedExample]
9191
)
9292
}
9393
>

‎src/DemoSite/ErrorBoundaryDialog.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// @flow
2+
3+
import React, { Component } from "react"
4+
import Dialog from "@material-ui/core/Dialog"
5+
import Button from "@material-ui/core/Button"
6+
import DialogTitle from "@material-ui/core/DialogTitle"
7+
import DialogContent from "@material-ui/core/DialogContent"
8+
import DialogActions from "@material-ui/core/DialogActions"
9+
10+
export default class ErrorBoundaryDialog extends Component {
11+
state = { hasError: false, err: "" }
12+
componentDidCatch(err, info) {
13+
this.setState({
14+
hasError: true,
15+
err: err.toString() + "\n\n" + info.componentStack
16+
})
17+
}
18+
render() {
19+
if (this.state.hasError) {
20+
return (
21+
<Dialog open={this.state.hasError} onClose={this.props.onClose}>
22+
<DialogTitle>Error Loading Annotator</DialogTitle>
23+
<DialogContent>
24+
<pre>{this.state.err}</pre>
25+
</DialogContent>
26+
<DialogActions>
27+
<Button onClick={this.props.onClose}>Close</Button>
28+
</DialogActions>
29+
</Dialog>
30+
)
31+
}
32+
return this.props.children
33+
}
34+
}

‎src/DemoSite/index.js

+16-8
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,32 @@
11
// @flow
22
import React, { useState } from "react"
3-
import Editor from "./Editor"
3+
import ReactDOM from "react-dom"
4+
import Editor, { examples } from "./Editor"
45
import Annotator from "../Annotator"
6+
import ErrorBoundaryDialog from "./ErrorBoundaryDialog.js"
57

68
export default () => {
79
const [annotatorOpen, changeAnnotatorOpen] = useState(false)
8-
const [annotatorProps, changeAnnotatorProps] = useState({})
10+
const [annotatorProps, changeAnnotatorProps] = useState(examples["Custom"]())
911
const [lastOutput, changeLastOutput] = useState()
1012

1113
return (
1214
<div>
1315
{annotatorOpen ? (
14-
<Annotator
15-
{...(annotatorProps: any)}
16-
onExit={output => {
17-
delete (output: any)["lastAction"]
18-
changeLastOutput(output)
16+
<ErrorBoundaryDialog
17+
onClose={() => {
1918
changeAnnotatorOpen(false)
2019
}}
21-
/>
20+
>
21+
<Annotator
22+
{...(annotatorProps: any)}
23+
onExit={output => {
24+
delete (output: any)["lastAction"]
25+
changeLastOutput(output)
26+
changeAnnotatorOpen(false)
27+
}}
28+
/>
29+
</ErrorBoundaryDialog>
2230
) : (
2331
<Editor
2432
lastOutput={lastOutput}

‎src/index.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// @flow
2+
3+
import React from "react"
4+
import ReactDOM from "react-dom"
5+
import Theme from "./Theme"
6+
import DemoSite from "./DemoSite"
7+
8+
ReactDOM.render(
9+
<Theme>
10+
<DemoSite />
11+
</Theme>,
12+
document.getElementById("root")
13+
)

0 commit comments

Comments
 (0)