Add docs button on the annotation screen

Author: linyers

client/src/Annotator/index.jsx

@@ -52,6 +52,7 @@ export const Annotator = ({
   onPrevImage,
   keypointDefinitions,
   onSelectJump,
+  openDocs,
   hideHeader,
   hideHeaderText,
   hideNext,
@@ -169,6 +170,8 @@ export const Annotator = ({
       } else if (action.buttonName === "Prev" && onPrevImage) {
         saveCurrentData(getActiveImage(state).activeImage);
         return onPrevImage(without(state, "history"));
+      } else if (action.buttonName === "Docs" ) {
+        return openDocs();
       }
     }
     dispatchToReducer(action);
@@ -247,6 +250,7 @@ Annotator.propTypes = {
   onExit: PropTypes.func.isRequired,
   onNextImage: PropTypes.func,
   onPrevImage: PropTypes.func,
+  openDocs: PropTypes.func.isRequired,
   keypointDefinitions: PropTypes.object,
   hideHeader: PropTypes.bool,
   hideHeaderText: PropTypes.bool,

client/src/DemoSite/index.jsx

@@ -160,6 +160,7 @@ export default () => {
         const updatedIndex = (selectedImageIndex - 1 + imageNames.length) % imageNames.length
         changeSelectedImageIndex(isNaN(updatedIndex ) ? 0 : updatedIndex)
       }}
+      openDocs={() => window.open("https://annotate-docs.dwaste.live/", '_blank')}
       hideSettings={true}
       disabledNextAndPrev={settings.images.length <= 1}
       selectedImageIndex={selectedImageIndex}

client/src/Localization/translation-en-EN.js

@@ -25,6 +25,7 @@ const translationEnEN = {
   "btn.download": "Download",
   "btn.upload_images": "Upload Images",
   "btn.open_lab": "Open Lab",
+  "btn.docs": "Docs",
   "region.no.name" : "Enter a Name",
   "setup.tabs.taskinfo": "Task Info",
   "setup.tabs.configure": "Configure",
@@ -66,4 +67,4 @@ const translationEnEN = {
   "more_info": "More information can be found in our documentation",
 };
 
-export default translationEnEN;
+export default translationEnEN;

client/src/MainLayout/index.jsx

@@ -185,8 +185,8 @@ export const MainLayout = ({
   const onClickHeaderItem = useEventCallback((item) => {
     if(item.name === "Exit"){
       logout()
-    }else {
-     dispatch({type: "HEADER_BUTTON_CLICKED", buttonName: item.name})
+    } else {
+      dispatch({type: "HEADER_BUTTON_CLICKED", buttonName: item.name})
     }
   })
   const debugModeOn = Boolean(window.localStorage.$ANNOTATE_DEBUG_MODE && state)
@@ -236,6 +236,7 @@ export const MainLayout = ({
                 !nextImageHasRegions &&
                 activeImage.regions && {name: "Clone", label: t("btn.clone")},
                 !hideSave && {name: "Save", label:t("btn.save"), disabled: !state.hasNewChange, icon: <Save />},
+                {name: "Docs", label: t("btn.docs")},
                 !hideSettings && {name: "Settings", label: t("btn.settings")},
                 {name: "Exit", label:t("btn.exit"), icon: <ExitToApp />}
               ].filter(Boolean)}

client/src/workspace/icon-mapping.js

@@ -7,6 +7,7 @@ import HelpIcon from "@mui/icons-material/Help"
 import ExitIcon from "@mui/icons-material/ExitToApp"
 import QueuePlayNextIcon from "@mui/icons-material/QueuePlayNext"
 import HotkeysIcon from "@mui/icons-material/Keyboard"
+import DescriptionIcon from "@mui/icons-material/Description"
 
 export const iconMapping = {
   back: BackIcon,
@@ -26,6 +27,7 @@ export const iconMapping = {
   clone: QueuePlayNextIcon,
   hotkeys: HotkeysIcon,
   shortcuts: HotkeysIcon,
+  docs: DescriptionIcon,
 }
 
 export default iconMapping