fix: Merge pull request #231 from UniversalDataTool/fix/funnel

Better User Event Tracking, Community Updates on Starting Page, Aesthetic, Translation Fixes, Switch to Yarn

Author: seveibar

package-lock.json

@@ -70,7 +70,7 @@ export const AdvancedOptionsView = ({ onClickEditJSON, onClearLabelData }) => {
           window.location.reload()
         }}
       >
-        {t("custom-collobration-server")}
+        {t("custom-collaboration-server")}
       </Button>
       <Button
         variant="outlined"

src/components/AdvancedOptionsView/index.js

@@ -51,7 +51,7 @@ export default ({ iface, onChange }) => {
                 />
                 <ConfigureInterface
                   isNested
-                  iface={f.interface}
+                  dataset={{ interface: f.interface }}
                   onChange={(newFieldInterface) => {
                     onChange({
                       ...iface,

src/components/ConfigureComposite/index.js

@@ -126,11 +126,12 @@ const SelectType = ({ currentlySelected, onChange }) => {
 }
 
 export const ConfigureInterface = ({
-  iface = {},
+  dataset,
   onChange: onChangeProp,
   onClickEditJSON,
   isNested = false,
 }) => {
+  const iface = dataset.interface
   const [previewChangedTime, changePreviewChangedTime] = useState(0)
   const [previewLoading, changePreviewLoading] = useState(false)
   const onChange = useEventCallback((...args) => {
@@ -199,7 +200,9 @@ export const ConfigureInterface = ({
                   onSaveTaskOutputItem={noop}
                   dataset={{
                     interface: iface,
-                    samples: [templateMap[iface.type].dataset.samples[0]],
+                    samples: dataset?.samples?.length
+                      ? [dataset.samples[0]]
+                      : [templateMap[iface.type].dataset.samples[0]],
                   }}
                 />
               </LabelErrorBoundary>

src/components/ConfigureInterface/index.js

@@ -9,9 +9,10 @@ import ConfigureInterface from "./"
 
 storiesOf("ConfigureInterface", module).add("Data Entry", () => {
   const [iface, changeIFace] = useState({ type: "data_entry" })
+  const dataset = { interface: iface }
   return (
     <ConfigureInterface
-      iface={iface}
+      dataset={dataset}
       onChange={(...args) => {
         action("onChange")(...args)
         changeIFace(args[0])

src/components/ConfigureInterface/index.story.js

@@ -4,7 +4,6 @@ import React, { useState, useEffect, useMemo } from "react"
 import { makeStyles } from "@material-ui/core/styles"
 
 import Header from "../Header"
-import AceEditor from "react-ace"
 import EditableTitleText from "./EditableTitleText.js"
 import SamplesView from "../SamplesView"
 import InterfacePage from "../InterfacePage"
@@ -21,6 +20,7 @@ import LabelView from "../LabelView"
 import useIsLabelOnlyMode from "../../utils/use-is-label-only-mode"
 import { HotKeys } from "react-hotkeys"
 import { useHotkeyStorage } from "../HotkeyStorage"
+import RawJSONEditor from "../RawJSONEditor"
 
 import "brace/mode/javascript"
 import "brace/theme/github"
@@ -67,7 +67,6 @@ export default ({
   const [mode, changeMode] = useState(labelOnlyMode ? "label" : initialMode)
   const [singleSampleDataset, setSingleSampleDataset] = useState()
   const [sampleInputEditor, changeSampleInputEditor] = useState({})
-  const [jsonText, changeJSONText] = useState()
   const { ipcRenderer } = useElectron() || {}
   const posthog = usePosthog()
 
@@ -94,22 +93,17 @@ export default ({
   }, [ipcRenderer])
 
   useEffect(() => {
-    if (mode === "json") {
-      changeJSONText(JSON.stringify(dataset, null, "  "))
-    }
+    posthog.people.set({
+      average_time_to_complete_sample: sampleTimeToComplete,
+    })
+  }, [sampleTimeToComplete, posthog.people])
+
+  useEffect(() => {
     if (mode !== "label") {
       setSingleSampleDataset(null)
     }
     posthog.capture("open_editor_tab", { tab: mode })
-  }, [mode, posthog, changeJSONText, dataset])
-
-  useEffect(() => {
-    if (!jsonText || mode !== "json") return
-    try {
-      // TODO schema validation etc.
-      onChangeDataset(JSON.parse(jsonText))
-    } catch (e) {}
-  }, [jsonText, mode, onChangeDataset])
+  }, [mode, posthog])
 
   const onChangeTab = useEventCallback((tab) => changeMode(tab.toLowerCase()))
 
@@ -154,13 +148,12 @@ export default ({
         />
         <div style={{ height: "100%", overflowY: "scroll" }}>
           {mode === "json" && (
-            <AceEditor
-              theme="github"
-              mode="javascript"
-              width="100%"
-              value={jsonText || ""}
-              editorProps={{ $blockScrolling: Infinity }}
-              onChange={(t) => changeJSONText(t)}
+            <RawJSONEditor
+              content={dataset}
+              onSave={(newDataset) => {
+                onChangeDataset(newDataset)
+                changeMode("setup")
+              }}
             />
           )}
           {mode === "setup" && (

src/components/DatasetEditor/index.js

@@ -50,11 +50,11 @@ export default ({ onDownload }) => {
         <h1>{t("download")}</h1>
         <StyledButton fullWidth onClick={() => onDownload("csv")}>
           <div className="fakeicon green">CSV</div>
-          {t("download")} CSV
+          {t("download-csv")}
         </StyledButton>
         <StyledButton fullWidth onClick={() => onDownload("json")}>
           <div className="fakeicon blue">JSON</div>
-          {t("download")} JSON
+          {t("download-json")}
         </StyledButton>
       </HeaderPopupBox>
     </Container>

src/components/DownloadButton/index.js

@@ -170,6 +170,17 @@ export default ({
     closeDialog()
   })
 
+  const onAddSamplesAsToyDataset = useEventCallback(async (samplesToAdd) => {
+    onChangeDataset(
+      setIn(
+        dataset,
+        ["samples"],
+        (dataset.samples || []).concat(samplesToAdd)
+      ).setIn(["usedToyDataset"], true)
+    )
+    closeDialog()
+  })
+
   return (
     <SelectDialogContext.Provider value={{ onChangeDialog }}>
       <div>
@@ -270,7 +281,7 @@ export default ({
         <ImportToyDataset
           open={selectedDialog === "import-toy-dataset"}
           onClose={closeDialog}
-          onAddSamples={onAddSamples}
+          onAddSamples={onAddSamplesAsToyDataset}
         />
         <ImportFromYoutubeUrls
           open={selectedDialog === "youtube-urls"}

src/components/ImportPage/index.js

@@ -42,10 +42,10 @@ const ImportToyDatasetDialog = ({ onClose, onAddSamples, open }) => {
         <Table>
           <TableHead>
             <TableRow>
-              <TableCell>{t("Name")}</TableCell>
-              <TableCell>{t("Type")}</TableCell>
-              <TableCell>{t("Size")}</TableCell>
-              <TableCell>{t("Actions")}</TableCell>
+              <TableCell>{t("name")}</TableCell>
+              <TableCell>{t("type")}</TableCell>
+              <TableCell>{t("size")}</TableCell>
+              <TableCell>{t("actions")}</TableCell>
             </TableRow>
           </TableHead>
           <TableBody>

src/components/ImportToyDatasetDialog/index.js

@@ -6,12 +6,10 @@ import PaperContainer from "../PaperContainer"
 import AdvancedOptionsView from "../AdvancedOptionsView"
 
 export default ({ dataset, onChange, onClickEditJSON, onClearLabelData }) => {
-  const { interface: iface } = dataset
-
   return (
     <div>
       <ConfigureInterface
-        iface={iface}
+        dataset={dataset}
         onChange={onChange}
         onClickEditJSON={onClickEditJSON}
         isNotNested