Skip to content

Commit

Permalink
fix: Merge pull request #368 from UniversalDataTool/labelhelp-and-ema…
Browse files Browse the repository at this point in the history 
…il-prompt

Crowd Label Refactor + Upload Fix
  • Loading branch information
@seveibar
seveibar authored Nov 6, 2020
2 parents f631618 + 26316bb commit f698043
Show file tree
Hide file tree
Showing 7 changed files with 371 additions and 280 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@
"udt-collaboration-server": "^1.0.7",
"udt-dataset-managers": "^1.0.12",
"udt-format": "0.0.1",
"use-async-effect": "^2.2.2",
"use-event-callback": "^0.1.0",
"wavesurfer.js": "^3.3.3",
"ytdl-core": "^2.0.1"
Expand Down
58 changes: 58 additions & 0 deletions src/components/LabelHelpView/label-help-completed.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React from "react"

import Box from "@material-ui/core/Box"
import Table from "@material-ui/core/Table"
import TableBody from "@material-ui/core/TableBody"
import TableRow from "@material-ui/core/TableRow"
import TableCell from "@material-ui/core/TableCell"
import Button from "@material-ui/core/Button"

import useDatasetProperty from "../../hooks/use-dataset-property"

const usdFormatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
})

export const LabelHelpCompleted = ({ onChangeActiveStep }) => {
const { labelHelp, updateLabelHelp } = useDatasetProperty("labelHelp")
return (
<Box>
<Table>
<TableBody>
<TableRow>
<TableCell>Percent Complete</TableCell>
<TableCell>100%</TableCell>
</TableRow>
{labelHelp?.totalCost && (
<TableRow>
<TableCell>Total Cost</TableCell>
<TableCell>{usdFormatter.format(labelHelp?.totalCost)}</TableCell>
</TableRow>
)}
</TableBody>
</Table>
<Box display="flex" marginTop={2} justifyContent="flex-end">
<Button
onClick={() => {
updateLabelHelp(null)
onChangeActiveStep("setup")
}}
variant="outlined"
>
Restart
</Button>
{/* TODO sync samples merges samples from link */}
{/* <Button
style={{ marginLeft: 12 }}
variant="outlined"
color="primary"
>
Sync Samples
</Button> */}
</Box>
</Box>
)
}

export default LabelHelpCompleted
293 changes: 13 additions & 280 deletions src/components/LabelHelpView/label-help-dialog-content.js
View file
Original file line number Diff line number Diff line change
@@ -1,92 +1,29 @@
// @flow

import React, { useState, useEffect } from "react"
import React, { useState } from "react"
import { styled } from "@material-ui/core/styles"
import Box from "@material-ui/core/Box"
import Button from "@material-ui/core/Button"
import Stepper from "@material-ui/core/Stepper"
import Step from "@material-ui/core/Step"
import StepLabel from "@material-ui/core/StepLabel"
import Table from "@material-ui/core/Table"
import TableBody from "@material-ui/core/TableBody"
import TableCell from "@material-ui/core/TableCell"
import TableHead from "@material-ui/core/TableHead"
import TableRow from "@material-ui/core/TableRow"
import { useAppConfig } from "../AppConfig"
import { useLabelHelp } from "./"
import * as colors from "@material-ui/core/colors"
import CircularProgress from "@material-ui/core/CircularProgress"
import { setIn } from "seamless-immutable"
import usePosthog from "../../hooks/use-posthog"
import useDatasetProperty from "../../hooks/use-dataset-property"
import useDataset from "../../hooks/use-dataset"
import LabelHelpSetup from "./label-help-setup"
import LabelHelpRunning from "./label-help-running"
import LabelHelpCompleted from "./label-help-completed"

const Container = styled("div")({
fontVariantNumeric: "tabular-nums",
})
const Link = styled("a")({
color: colors.blue[500],
textDecoration: "none",
})

const usdFormatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
})
const preciseUSDFormatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
maximumFractionDigits: 4,
minimumFractionDigits: 2,
})

const steps = ["setup", "running", "completed"]

export default () => {
const { fromConfig, setInConfig } = useAppConfig()
const [dataset, setDataset] = useDataset()
const {
labelHelpEnabled,
labelHelpError,
loadMyCredits = () => 0,
variables,
totalCost = 0,
formulaFunc = () => 0,
myCredits = () => 0,
} = useLabelHelp()
const [error, setError] = useState()
const { labelHelp } = useDatasetProperty("labelHelp")

const [labelHelpInfo, setLabelHelpInfo] = useState(labelHelp)
const collabUrl = labelHelpInfo?.url || (labelHelp || {}).url
const [activeStep, setActiveStep] = useState("setup")

console.log({ collabUrl })
const { labelHelpEnabled, labelHelpError } = useLabelHelp()

const posthog = usePosthog()

useEffect(() => {
if (myCredits === null || myCredits === undefined) {
loadMyCredits(dataset)
}
}, [myCredits, dataset, loadMyCredits])

useEffect(() => {
if (!collabUrl) return
async function loadJob() {
const response = await fetch(
`https://labelhelp.universaldatatool.com/api/job?custom_id=${encodeURIComponent(
collabUrl
)}&api_key=${fromConfig("labelhelp.apikey")}`
).then((r) => r.json())
// response contains { progress, status }
setLabelHelpInfo({
...dataset.labelHelp,
...response,
loaded: true,
})
}
loadJob()
}, [collabUrl, dataset.labelHelp, fromConfig])
const [error, setError] = useState()

if (!labelHelpEnabled)
return (
Expand All @@ -103,12 +40,6 @@ export default () => {
</Container>
)

const activeStep = !collabUrl
? "setup"
: labelHelpInfo.progress === 1
? "completed"
: "running"

return (
<Container>
<Stepper activeStep={steps.indexOf(activeStep)}>
Expand All @@ -120,212 +51,14 @@ export default () => {
</Stepper>
{error && <Box color={colors.red[600]}>{error}</Box>}
{activeStep === "setup" ? (
<Box>
<Table>
<TableHead>
<TableRow>
<TableCell>Item</TableCell>
<TableCell>Quantity</TableCell>
<TableCell>Unit Cost</TableCell>
<TableCell>Cost / Sample</TableCell>
<TableCell>Total</TableCell>
</TableRow>
</TableHead>
<TableBody>
{Object.keys(variables).map((varName) => (
<TableRow>
<TableCell style={{ textTransform: "capitalize" }}>
{varName.replace(/_/g, " ")}
</TableCell>
<TableCell>{variables[varName]}</TableCell>
<TableCell>
{varName === "sample_count"
? ""
: preciseUSDFormatter.format(
(totalCost -
formulaFunc({ ...variables, [varName]: 0 })) /
variables.sample_count /
(variables[varName] === 0 ? 1 : variables[varName])
)}
</TableCell>
<TableCell>
{usdFormatter.format(
(totalCost -
formulaFunc({ ...variables, [varName]: 0 })) /
variables.sample_count
)}
</TableCell>
<TableCell></TableCell>
</TableRow>
))}
<TableRow>
<TableCell>Total Cost</TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
<TableCell>{usdFormatter.format(totalCost)}</TableCell>
</TableRow>
<TableRow>
<TableCell>Time to Complete</TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
<TableCell>1-3 days</TableCell>
</TableRow>
</TableBody>
</Table>
<Box
display="flex"
justifyContent="flex-end"
alignItems="center"
padding={2}
paddingTop={4}
>
<Box>Credits: {usdFormatter.format(myCredits)}</Box>
<Box flexGrow={1} />
<Button
onClick={() => {
setInConfig("labelhelp.apikey", null)
posthog.capture("api_key_button_clicked")
}}
variant="outlined"
>
API Key
</Button>
<Button
color={myCredits < totalCost ? "primary" : "none"}
style={{ marginLeft: 12 }}
variant="outlined"
href="https://labelhelp.universaldatatool.com#addcredits"
onClick={() => {
posthog.capture("add_credits_button_clicked")
}}
>
Add Credits
</Button>
<Button
onClick={async () => {
setError(null)
const response = await fetch(
"https://labelhelp.universaldatatool.com/api/submit",
{
method: "POST",
body: JSON.stringify({
dataset,
price: totalCost,
api_key: fromConfig("labelhelp.apikey"),
}),
headers: { "Content-Type": "application/json" },
}
)
.then((r) => r.json())
.catch((e) => {
setError(e.toString())
return null
})
if (!response) {
setError("Empty response from server")
return null
}

setDataset(
setIn(dataset, ["labelHelp"], {
url: response.custom_id,
})
)

posthog.capture("start_label_help_button_clicked")
}}
style={{ marginLeft: 12 }}
variant="outlined"
color={myCredits >= totalCost ? "primary" : "none"}
>
Start Label Help
</Button>
</Box>
</Box>
<LabelHelpSetup onChangeActiveStep={setActiveStep} onError={setError} />
) : activeStep === "running" ? (
<Box>
{labelHelpInfo.loaded ? (
<Table>
<TableBody>
<TableRow>
<TableCell>Status</TableCell>
<TableCell>{labelHelpInfo.status}</TableCell>
</TableRow>
<TableRow>
<TableCell>Link</TableCell>
<TableCell>
<Link href={labelHelpInfo.url}>{labelHelpInfo.url}</Link>
</TableCell>
</TableRow>
<TableRow>
<TableCell>Percent Complete</TableCell>
<TableCell>{labelHelpInfo.progress.toFixed(1)}%</TableCell>
</TableRow>
{labelHelpInfo.price && (
<TableRow>
<TableCell>Budget Used</TableCell>
<TableCell>
${labelHelpInfo.progress * labelHelpInfo.price} / $75
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
) : (
<Box padding={8} textAlign="center">
<CircularProgress size={100} />
</Box>
)}
<Box display="flex" marginTop={2} justifyContent="flex-end">
{/* TODO add stop early by calling /api/stop */}
{/* <Button
variant="outlined"
style={{
color: colors.red[500],
border: `1px solid ${colors.red[200]}`,
}}
>
Stop Early
</Button> */}
<Box flexGrow={1} />
{/* TODO sync samples merges samples from link */}
{/* <Button variant="outlined" color="primary">
Sync Samples
</Button> */}
</Box>
</Box>
<LabelHelpRunning
onChangeActiveStep={setActiveStep}
onError={setError}
/>
) : activeStep === "completed" ? (
<Box>
<Table>
<TableBody>
<TableRow>
<TableCell>Percent Complete</TableCell>
<TableCell>100%</TableCell>
</TableRow>
{labelHelpInfo.price && (
<TableRow>
<TableCell>Total Cost</TableCell>
<TableCell>
{usdFormatter.format(labelHelpInfo.price)}
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
<Box display="flex" marginTop={2} justifyContent="flex-end">
<Button variant="outlined">Restart</Button>
{/* TODO sync samples merges samples from link */}
{/* <Button
style={{ marginLeft: 12 }}
variant="outlined"
color="primary"
>
Sync Samples
</Button> */}
</Box>
</Box>
<LabelHelpCompleted onError={setError} />
) : null}
</Container>
)
Expand Down
Loading

0 comments on commit f698043

Please sign in to comment.