fix: Merge pull request #274 from UniversalDataTool/new-setup-page

Separate Setup Page into Tabs
UniversalDataTool · Aug 25, 2020 · 82c54ff · 82c54ff
2 parents 76ea3ba + ddbcd82
commit 82c54ff
Show file tree

Hide file tree

Showing 12 changed files with 265 additions and 271 deletions.
diff --git a/cypress/integration/create-new-file.spec.js b/cypress/integration/create-new-file.spec.js
@@ -9,30 +9,46 @@ describe("Create a new file in the universal data tool", () => {
     cy.matchImageSnapshot("image_segmentation", {
       failureThresholdType: "percent",
     })
+
+    cy.contains("Data Type").click()
     cy.contains("Image Classification").click()
     cy.matchImageSnapshot("image_classification", {
       failureThresholdType: "percent",
     })
+
+    cy.contains("Data Type").click()
     cy.contains("Video Segmentation").click()
     cy.matchImageSnapshot("video_segmentation", {
       failureThresholdType: "percent",
     })
+
+    cy.contains("Data Type").click()
     cy.contains("Data Entry").click()
     cy.matchImageSnapshot("data_entry", { failureThresholdType: "percent" })
+
+    cy.contains("Data Type").click()
     cy.contains("Named Entity Recognition").click()
     cy.matchImageSnapshot("named_entity_recognition", {
       failureThresholdType: "percent",
     })
+
+    cy.contains("Data Type").click()
     cy.contains("Text Classification").click()
     cy.matchImageSnapshot("text_classification", {
       failureThresholdType: "percent",
     })
+
+    cy.contains("Data Type").click()
     cy.contains("Audio Transcription").click()
     cy.matchImageSnapshot("audio_transctiption", {
       failureThresholdType: "percent",
     })
+
+    cy.contains("Data Type").click()
     cy.contains("Composite").click()
     cy.matchImageSnapshot("composite", { failureThresholdType: "percent" })
+
+    cy.contains("Data Type").click()
     cy.contains("3D Bounding Box").click()
     cy.matchImageSnapshot("3d_bounding_box", {
       failureThresholdType: "percent",

diff --git a/src/components/AdvancedOptionsView/index.js b/src/components/AdvancedOptionsView/index.js
@@ -26,9 +26,6 @@ export const AdvancedOptionsView = ({ onClickEditJSON, onClearLabelData }) => {
 
   return (
     <Box padding={2}>
-      <Button onClick={onClickEditJSON} variant="outlined">
-        {t("edit-json")}
-      </Button>
       <Button
         onClick={() => {
           if (

diff --git a/src/components/BigInterfaceSelect/index.js b/src/components/BigInterfaceSelect/index.js
@@ -0,0 +1,75 @@
+import React from "react"
+import templates from "../StartingPage/templates"
+import Button from "@material-ui/core/Button"
+import { styled } from "@material-ui/core/styles"
+import * as colors from "@material-ui/core/colors"
+
+const Container = styled("div")({
+  padding: 24,
+  "&.emptyState": {
+    textAlign: "center",
+    backgroundColor: colors.blue[800],
+    minHeight: "71vh",
+    padding: 64,
+    "& .bigText": {
+      textAlign: "left",
+      fontSize: 48,
+      color: "#fff",
+      fontWeight: "bold",
+      marginBottom: 48,
+    },
+  },
+})
+
+const BigButton = styled(Button)({
+  padding: 10,
+  width: 200,
+  height: 150,
+  boxShadow: "0px 3px 5px rgba(0,0,0,0.3)",
+  margin: 12,
+  "& .bigIcon": {
+    marginTop: 16,
+    width: 64,
+    height: 64,
+  },
+  transition: "transform 100ms",
+  "&:hover": {
+    backgroundColor: "#fff",
+    transform: "scale(1.04,1.04)",
+  },
+  backgroundColor: colors.blue[100],
+  "&.selected": {
+    backgroundColor: "#fff",
+  },
+})
+
+export const BigInterfaceSelect = ({ onChange, currentInterfaceType }) => {
+  return (
+    <Container className="emptyState">
+      <div className="bigText">Choose an Interface:</div>
+      {templates
+        .filter((t) => t.name !== "Empty")
+        .map((template) => (
+          <BigButton
+            key={template.name}
+            className={
+              currentInterfaceType === template.dataset.interface.type
+                ? "selected"
+                : ""
+            }
+            disabled={currentInterfaceType === template.dataset.interface.type}
+            onClick={() => onChange(template.dataset.interface)}
+          >
+            <div>
+              <div>{template.name}</div>
+              <div>
+                <template.Icon className="bigIcon" />
+              </div>
+            </div>
+          </BigButton>
+        ))}
+    </Container>
+  )
+}
+
+export default BigInterfaceSelect