fix: Merge pull request #300 from UniversalDataTool/better-convert-button

Change convert button to link to universaldatatool.com/convert

Author: seveibar

src/components/DownloadButton/index.js

@@ -7,7 +7,6 @@ import { styled } from "@material-ui/core/styles"
 import * as colors from "@material-ui/core/colors"
 import Button from "@material-ui/core/Button"
 import HeaderPopupBox from "../HeaderPopupBox"
-import SimpleDialog from "../SimpleDialog"
 
 import { useTranslation } from "react-i18next"
 
@@ -16,9 +15,10 @@ const Container = styled("div")({ position: "relative" })
 const StyledButton = styled(Button)({
   justifyContent: "flex-start",
   "& .fakeicon": {
-    display: "inline",
+    display: "inline-block",
     marginRight: 8,
     padding: 4,
+    textAlign: "center",
     paddingTop: 5,
     fontSize: 11,
     fontWeight: "bold",
@@ -40,7 +40,6 @@ const StyledButton = styled(Button)({
 
 export default ({ interfaceType, onDownload }) => {
   const [open, changeOpen] = useState(false)
-  const [downloadMaskDialogOpen, setDownloadMaskDialogOpen] = useState(false)
   const { t } = useTranslation()
 
   return (
@@ -61,37 +60,15 @@ export default ({ interfaceType, onDownload }) => {
           <div className="fakeicon blue">JSON</div>
           {t("download-json")}
         </StyledButton>
-        {(interfaceType || "").includes("image") &&
-          (interfaceType || "").includes("segmentation") && (
-            <StyledButton
-              fullWidth
-              onClick={() => setDownloadMaskDialogOpen(true)}
-            >
-              <div className="fakeicon orange">IMG</div>
-              Download Masks
-            </StyledButton>
-          )}
+        <StyledButton
+          fullWidth
+          target="_blank"
+          href="https://universaldatatool.com/convert"
+        >
+          <div className="fakeicon orange">↗</div>
+          {t("other-formats")}
+        </StyledButton>
       </HeaderPopupBox>
-      <SimpleDialog
-        title="How to Download Masks"
-        open={downloadMaskDialogOpen}
-        onClose={() => setDownloadMaskDialogOpen(false)}
-      >
-        We can't process the image masks online because of processing
-        limitations, however, if you have "npm" installed you can run the line
-        below to get all the masks in your file.
-        <pre>npx autoseg some_file.udt.json -o output_directory</pre>
-        <div style={{ marginTop: 16 }}>
-          Read more about{" "}
-          <a
-            style={{ color: colors.blue[500] }}
-            href="https://github.com/UniversalDataTool/autoseg/blob/master/README.md"
-          >
-            autoseg
-          </a>
-          .
-        </div>
-      </SimpleDialog>
     </Container>
   )
 }

src/i18n/locales/en/translation.json

@@ -77,5 +77,6 @@
   "transform-video-keyframes-dialog-explanation-text": "This operation will convert keyframes set on a video into individual image segmentation frames. Your interface type will change from 'video_segmentation' into 'image_segmentation'. This is sometimes helpful when preparing video data for a computer vision model.",
   "transform-video-keyframes-dialog-explanation-warning": "You need to label some keyframes to use this.",
   "universal-data-viewer-interface-warning": "This interface hasn't been set up properly, try selecting an interface in the 'Setup' tab.",
-  "setup-project": "Setup Project"
+  "setup-project": "Setup Project",
+  "other-formats": "Other Formats"
 }