fix: add hiding next/prev/header/header text

Author: seveibar

package.json

@@ -19,7 +19,7 @@
     "react-hotkeys": "^2.0.0",
     "react-json-view": "^1.19.1",
     "react-markdown": "^4.0.6",
-    "react-material-workspace-layout": "^1.0.6",
+    "react-material-workspace-layout": "^1.0.8",
     "react-monaco-editor": "^0.25.1",
     "react-remove-scroll": "^2.0.4",
     "react-select": "^3.0.8",

src/Annotator/index.js

@@ -48,6 +48,10 @@ type Props = {
   autoSegmentationOptions?:
     | {| type: "simple" |}
     | {| type: "autoseg", maxClusters?: number, slicWeightFactor?: number |},
+  hideHeader?: boolean,
+  hideHeaderText?: boolean,
+  hideNext?: boolean,
+  hidePrev?: boolean,
 }
 
 export const Annotator = ({
@@ -82,6 +86,10 @@ export const Annotator = ({
   onPrevImage,
   keypointDefinitions,
   autoSegmentationOptions = { type: "autoseg" },
+  hideHeader,
+  hideHeaderText,
+  hideNext,
+  hidePrev,
 }: Props) => {
   if (typeof selectedImage === "string") {
     selectedImage = (images || []).findIndex((img) => img.src === selectedImage)
@@ -172,6 +180,10 @@ export const Annotator = ({
         state={state}
         dispatch={dispatch}
         onRegionClassAdded={onRegionClassAdded}
+        hideHeader={hideHeader}
+        hideHeaderText={hideHeaderText}
+        hideNext={hideNext}
+        hidePrev={hidePrev}
       />
     </SettingsProvider>
   )

src/Annotator/index.story.js

@@ -666,3 +666,36 @@ storiesOf("Annotator", module)
       ]}
     />
   ))
+  .add("Hide Next, Hide Header Text", () => (
+    <Annotator
+      onExit={actionAddon("onExit")}
+      labelImages
+      hideNext
+      hideHeaderText
+      fullImageSegmentationMode
+      enabledTools={["modify-allowed-area"]}
+      regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
+      images={[
+        {
+          src: exampleImage,
+          name: "Frame 0036",
+        },
+      ]}
+    />
+  ))
+  .add("Hide Header", () => (
+    <Annotator
+      onExit={actionAddon("onExit")}
+      labelImages
+      hideHeader
+      fullImageSegmentationMode
+      enabledTools={["modify-allowed-area"]}
+      regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
+      images={[
+        {
+          src: exampleImage,
+          name: "Frame 0036",
+        },
+      ]}
+    />
+  ))

src/MainLayout/index.js

@@ -54,6 +54,8 @@ type Props = {
   alwaysShowNextButton?: boolean,
   alwaysShowPrevButton?: boolean,
   onRegionClassAdded: () => {},
+  hideHeader?: boolean,
+  hideHeaderText?: boolean,
 }
 
 export const MainLayout = ({
@@ -63,6 +65,10 @@ export const MainLayout = ({
   alwaysShowPrevButton = false,
   RegionEditLabel,
   onRegionClassAdded,
+  hideHeader,
+  hideHeaderText,
+  hideNext = false,
+  hidePrev = false,
 }: Props) => {
   const classes = useStyles()
   const settings = useSettings()
@@ -226,6 +232,8 @@ export const MainLayout = ({
           <Workspace
             allowFullscreen
             iconDictionary={iconDictionary}
+            hideHeader={hideHeader}
+            hideHeaderText={hideHeaderText}
             headerLeftSide={[
               state.annotationType === "video" ? (
                 <KeyframeTimeline
@@ -239,8 +247,8 @@ export const MainLayout = ({
               ) : null,
             ].filter(Boolean)}
             headerItems={[
-              { name: "Prev" },
-              { name: "Next" },
+              !hidePrev && { name: "Prev" },
+              !hideNext && { name: "Next" },
               state.annotationType !== "video"
                 ? null
                 : !state.videoPlaying

yarn.lock

@@ -14566,10 +14566,10 @@ react-markdown@^4.0.6:
     unist-util-visit "^1.3.0"
     xtend "^4.0.1"
 
-react-material-workspace-layout@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/react-material-workspace-layout/-/react-material-workspace-layout-1.0.6.tgz#d4495bb62bdc764ee3ccc77cdd1f7c33e4022c92"
-  integrity sha512-CiqdpivEC9ZEELDpJFrrzwfnZgtz2Ijl465bf1ehU7tflJ3Z9Dhm2cYXzGPzeNrqJ0pdmKQoCn27Ht943oHefQ==
+react-material-workspace-layout@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/react-material-workspace-layout/-/react-material-workspace-layout-1.0.8.tgz#3825b7ee2f5d2b219adac98afce4670fd3935bbb"
+  integrity sha512-UT4qIVXJA2MhHiv4D/18jxo5vFnn+q/xWk0x+b01V/niKzIRE6jx/MNSJdmzgAyhzTxU2XixMCMhGVQu19JyOw==
   dependencies:
     "@material-ui/core" "^4.10.0"
     "@material-ui/icons" "^4.9.1"