fix: Merge pull request #268 from UniversalDataTool/feat/edit-allowed…

…-area-version-fixed

Edit Allowed Area and React Component Control Fixes

package.json

@@ -110,7 +110,7 @@
     "react-hotkeys": "^2.0.0",
     "react-i18next": "^11.4.0",
     "react-icons": "^3.9.0",
-    "react-image-annotate": "^1.5.3",
+    "react-image-annotate": "^1.6.1",
     "react-material-workspace-layout": "^0.1.6",
     "react-scripts": "^3.4.1",
     "react-select": "^3.0.8",

src/components/ImageSegmentation/index.js

@@ -13,6 +13,7 @@ const regionTypeToTool = {
   "bounding-box": "create-box",
   polygon: ["create-polygon", "create-expanding-line"],
   point: "create-point",
+  "allowed-area": "modify-allowed-area",
 }
 
 const [emptyObj, emptyArr] = [{}, []]
@@ -23,7 +24,9 @@ export default ({
   sampleIndex,
   samples = emptyArr,
   containerProps = emptyObj,
+  // TODO DEPRECATE onSaveTaskOutputItem
   onSaveTaskOutputItem,
+  onModifySample,
 }) => {
   // TODO remove legacy "availableLabels" support
   if (iface.availableLabels && !iface.labels) {
@@ -44,12 +47,22 @@ export default ({
 
   const saveCurrentIndexAnnotation = useEventCallback((output) => {
     const img = output.images[selectedIndex]
-    onSaveTaskOutputItem(
-      selectedIndex,
-      multipleRegions
-        ? (img.regions || []).map(convertFromRIARegionFmt)
-        : convertToRIAImageFmt((img.regions || [])[0])
-    )
+    const annotation = multipleRegions
+      ? (img.regions || []).map(convertFromRIARegionFmt)
+      : convertToRIAImageFmt((img.regions || [])[0])
+    if (onModifySample) {
+      const { x, y, w: width, h: height } = output.allowedArea || {}
+      onModifySample(selectedIndex, {
+        annotation,
+        ...(output.allowedArea
+          ? {
+              allowedArea: { x, y, width, height },
+            }
+          : {}),
+      })
+    } else {
+      onSaveTaskOutputItem(selectedIndex, annotation)
+    }
   })
 
   const labelProps = useMemo(

src/components/StartingPage/index.js

@@ -288,12 +288,19 @@ export default ({
                 </Action>
                 {onClickOpenSession && (
                   <Action onClick={onClickOpenSession}>
-                    {t("open-collabrative-session")}
+                    {t("open-collaborative-session")}
                   </Action>
                 )}
                 <Action onClick={() => changeAddAuthFromDialogOpen(true)}>
                   {t("add-authentication")}
                 </Action>
+                <Action
+                  onClick={() => {
+                    window.location.href = "/courses"
+                  }}
+                >
+                  Create a Training Course
+                </Action>
                 {/* <Action>Open Folder</Action> */}
               </ActionList>
               <ActionList>

src/components/UniversalDataViewer/index.js

@@ -25,7 +25,8 @@ export const UniversalDataViewer = ({
   disableHotkeys = false,
   datasetName,
   requireCompleteToPressNext,
-  onSaveTaskOutputItem,
+  onSaveTaskOutputItem: onSaveTaskOutputItemProp,
+  onModifySample,
   sampleIndex: globalSampleIndex,
   height,
   onClickSetup,
@@ -36,17 +37,25 @@ export const UniversalDataViewer = ({
   const [sampleIndex, setSampleIndex] = useClobberedState(globalSampleIndex, 0)
 
   const onExit = useEventCallback((...args) => {
-    if (onExitProp) return onExitProp(...args)
-    if (
-      args[0] === "go-to-next" &&
-      sampleIndex !== dataset.samples.length - 1
-    ) {
-      setSampleIndex(sampleIndex + 1)
-    } else if (args[0] === "go-to-previous" && sampleIndex !== 0) {
-      setSampleIndex(sampleIndex - 1)
+    if (globalSampleIndex === undefined) {
+      if (
+        args[0] === "go-to-next" &&
+        sampleIndex !== dataset.samples.length - 1
+      ) {
+        setSampleIndex(sampleIndex + 1)
+      } else if (args[0] === "go-to-previous" && sampleIndex !== 0) {
+        setSampleIndex(sampleIndex - 1)
+      }
     }
+    if (onExitProp) return onExitProp(...args)
   })
 
+  let onSaveTaskOutputItem = onSaveTaskOutputItemProp
+  if (onModifySample && !onSaveTaskOutputItem) {
+    onSaveTaskOutputItem = (sampleIndex, annotation) =>
+      onModifySample(sampleIndex, { annotation })
+  }
+
   const containerProps = useMemo(
     () => ({
       hideHeader,
@@ -130,6 +139,7 @@ export const UniversalDataViewer = ({
           {...dataset}
           onExit={onExit}
           onSaveTaskOutputItem={onSaveTaskOutputItem}
+          onModifySample={onModifySample}
         />
       )
     case "image_classification":

src/i18n/locales/cn/translations.json

@@ -5,7 +5,7 @@
   "new-file": "新文件",
   "start-from-template": "从模板开始",
   "open-file": "打开文件",
-  "open-collabrative-session": "公开合作会议",
+  "open-collaborative-session": "公开合作会议",
   "add-authentication": "添加认证",
   "no-recent-files": "最近没有文件",
   "downloading-and-installing-udt": "下载和安装UDT",

src/i18n/locales/en/translation.json

@@ -7,7 +7,7 @@
   "new-file": "New File",
   "start-from-template": "Start from Template",
   "open-file": "Open File",
-  "open-collabrative-session": "Open Collaborative Session",
+  "open-collaborative-session": "Open Collaborative Session",
   "add-authentication": "Add Authentification",
   "no-recent-files": "No Recent Files",
   "downloading-and-installing-udt": "Downloading and Installing UDT",

src/i18n/locales/fr/translations.json

@@ -5,7 +5,7 @@
   "new-file": "Nouveau dossier",
   "start-from-template": "Partir du modèle",
   "open-file": "Dossier public",
-  "open-collabrative-session": "Session de collaboration ouverte",
+  "open-collaborative-session": "Session de collaboration ouverte",
   "add-authentication": "Ajouter l'authentification",
   "no-recent-files": "Aucun dossier récent",
   "downloading-and-installing-udt": "Téléchargement et installation d'UDT",

src/utils/file-handlers/index.js

@@ -74,7 +74,7 @@ export default () => {
     window.history.replaceState(
       {},
       window.document.title,
-      `/?s=${encodeURIComponent(sessionId)}${
+      `/app/?s=${encodeURIComponent(sessionId)}${
         labelOnly ? "&mode=labelonly" : ""
       }`
     )
@@ -105,7 +105,7 @@ export default () => {
     window.history.replaceState(
       {},
       window.document.title,
-      `/?s=${encodeURIComponent(newFile.sessionId)}`
+      `/app/?s=${encodeURIComponent(newFile.sessionId)}`
     )
   })
 

src/utils/file-handlers/use-server/index.js

@@ -17,7 +17,7 @@ export const convertToCollaborativeFile = async (file) => {
     fileName: file.fileName,
     id: file.id,
     sessionId: collab.sessionId,
-    url: `${window.location.origin}?s=${collab.sessionId}`,
+    url: `${window.location.origin}/app/?s=${collab.sessionId}`,
     content: file.content,
     mode: "server",
   }

src/vanilla/image-segmentation-layouts.story.js

@@ -16,6 +16,10 @@ const useVanillaImageSegmentation = () => {
         imageUrl:
           "https://s3.amazonaws.com/asset.workaround.online/example-jobs/sticky-notes/image1.jpg",
       },
+      {
+        imageUrl:
+          "https://s3.amazonaws.com/asset.workaround.online/example-jobs/sticky-notes/image2.jpg",
+      },
     ],
   })
 }

yarn.lock

@@ -6319,6 +6319,11 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+clamp@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634"
+  integrity sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ=
+
 class-utils@^0.3.5:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
@@ -16157,10 +16162,10 @@ react-icons@^3.9.0:
   dependencies:
     camelcase "^5.0.0"
 
-react-image-annotate@^1.5.3:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/react-image-annotate/-/react-image-annotate-1.5.3.tgz#a001461d5acde342e151db58162c63eeba8aa44c"
-  integrity sha512-UjisZ42IcCE6N9VntYi8L3fHhtdYclX9D/wo5WW79Jr7nJkRjxwkQC6kAUExYcrLS5l6Q76I1/iXqb4ZY1oQHQ==
+react-image-annotate@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/react-image-annotate/-/react-image-annotate-1.6.1.tgz#4a77a0edd04b955d745d3a75ddda857fde0d7066"
+  integrity sha512-G1jdOczI+EtTkOn70JoFD450qAz56CXEQdRFcQFOCfvjTHMBzu9JuqfdsZUw8hHDi4fIkOXK3v70hOTiwz2hFQ==
   dependencies:
     "@fortawesome/fontawesome-svg-core" "^1.2.12"
     "@fortawesome/free-solid-svg-icons" "^5.6.3"
@@ -16169,6 +16174,7 @@ react-image-annotate@^1.5.3:
     "@material-ui/icons" "^4.9.1"
     "@semantic-release/git" "^9.0.0"
     autoseg "^0.0.8"
+    clamp "^1.0.1"
     color-alpha "^1.0.4"
     get-image-data "^3.0.1"
     material-survey "^1.0.34"