Integrate React Material Workspace Layout + Add Collapsing Sidebar

.flowconfig

@@ -0,0 +1,2 @@
+[options]
+esproposal.optional_chaining=enable

package.json

@@ -18,6 +18,7 @@
     "react-hotkeys": "^2.0.0",
     "react-json-view": "^1.19.1",
     "react-markdown": "^4.0.6",
+    "react-material-workspace-layout": "^0.1.16",
     "react-monaco-editor": "^0.25.1",
     "react-remove-scroll": "^2.0.4",
     "react-select": "^3.0.8",
@@ -66,6 +67,7 @@
   "devDependencies": {
     "@babel/cli": "^7.2.3",
     "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-optional-chaining": "^7.10.4",
     "@storybook/addon-actions": "^5.3.14",
     "@storybook/addon-links": "^5.3.14",
     "@storybook/addons": "^5.3.14",
@@ -76,7 +78,7 @@
     "prettier": "^2.0.5",
     "raw.macro": "^0.3.0",
     "react-github-btn": "^1.1.1",
-    "react-scripts": "^2.1.8"
+    "react-scripts": "^3.4.1"
   },
   "prettier": {
     "semi": false

src/Annotator/index.js

@@ -79,8 +79,6 @@ export const Annotator = ({
   onPrevImage,
   autoSegmentationOptions = { type: "autoseg" },
 }: Props) => {
-  if (!images && !videoSrc)
-    return 'Missing required prop "images" or "videoSrc"'
   const annotationType = images ? "image" : "video"
   const [state, dispatchToReducer] = useReducer(
     historyHandler(
@@ -152,6 +150,9 @@ export const Annotator = ({
     })
   }, [selectedImage])
 
+  if (!images && !videoSrc)
+    return 'Missing required prop "images" or "videoSrc"'
+
   return (
     <SettingsProvider>
       <MainLayout

src/FullImageSegmentationAnnotator/index.story.js

@@ -13,7 +13,7 @@ import FullImageSegmentationAnnotator from "./"
 
 storiesOf("FullImageSegmentationAnnotator.Basic", module)
   .add("Orange 2 Class", () => (
-    <div style={{ width: "100vw", height: "100vh" }}>
+    <div style={{ width: "95vw", height: "95vh" }}>
       <FullImageSegmentationAnnotator
         images={[
           {
@@ -59,7 +59,7 @@ storiesOf("FullImageSegmentationAnnotator.Basic", module)
     </div>
   ))
   .add("S3 CORS domain", () => (
-    <div style={{ width: "100vw", height: "100vh" }}>
+    <div style={{ width: "95vw", height: "95vh" }}>
       <FullImageSegmentationAnnotator
         images={[
           {
@@ -90,7 +90,7 @@ storiesOf("FullImageSegmentationAnnotator.Basic", module)
     </div>
   ))
   .add("Orange 3 Class", () => (
-    <div style={{ width: "100vw", height: "100vh" }}>
+    <div style={{ width: "95vw", height: "95vh" }}>
       <FullImageSegmentationAnnotator
         images={[
           {
@@ -120,7 +120,7 @@ storiesOf("FullImageSegmentationAnnotator.Basic", module)
     </div>
   ))
   .add("Hard 1, 8 Class, Simple Mode", () => (
-    <div style={{ width: "100vw", height: "100vh" }}>
+    <div style={{ width: "95vw", height: "95vh" }}>
       <FullImageSegmentationAnnotator
         images={[
           {
@@ -135,7 +135,7 @@ storiesOf("FullImageSegmentationAnnotator.Basic", module)
     </div>
   ))
   .add("Hard 1, 8 Class", () => (
-    <div style={{ width: "100vw", height: "100vh" }}>
+    <div style={{ width: "95vw", height: "95vh" }}>
       <FullImageSegmentationAnnotator
         images={[
           {
@@ -149,7 +149,7 @@ storiesOf("FullImageSegmentationAnnotator.Basic", module)
     </div>
   ))
   .add("Hard 2, 8 Class", () => (
-    <div style={{ width: "100vw", height: "100vh" }}>
+    <div style={{ width: "95vw", height: "95vh" }}>
       <FullImageSegmentationAnnotator
         images={[
           {
@@ -163,7 +163,7 @@ storiesOf("FullImageSegmentationAnnotator.Basic", module)
     </div>
   ))
   .add("Hard 3, 8 Class", () => (
-    <div style={{ width: "100vw", height: "100vh" }}>
+    <div style={{ width: "95vw", height: "95vh" }}>
       <FullImageSegmentationAnnotator
         images={[
           {

src/KeyframeTimeline/index.js

@@ -14,6 +14,7 @@ const Container = styled("div")({
   display: "flex",
   flexGrow: 1,
   minWidth: 240,
+  height: 64,
   marginLeft: 16,
   marginRight: 16,
 })