From 145c26608867dc1dbbace7a27ef00e8385acb5bd Mon Sep 17 00:00:00 2001 From: Bruno Juca Date: Sat, 14 Aug 2021 20:10:37 -0300 Subject: [PATCH] New results page layout prototype #9 --- src/components/JobHeader.js | 56 +++++++++ src/components/JobResults.js | 157 ++++++++++++++++++++++++ src/components/Status.js | 2 +- src/pages/Pipeline/PipelineResult.js | 171 +++------------------------ 4 files changed, 232 insertions(+), 154 deletions(-) create mode 100644 src/components/JobHeader.js create mode 100644 src/components/JobResults.js diff --git a/src/components/JobHeader.js b/src/components/JobHeader.js new file mode 100644 index 0000000..dbbfb9f --- /dev/null +++ b/src/components/JobHeader.js @@ -0,0 +1,56 @@ +import { Card, CardContent, Typography, makeStyles, Grid } from "@material-ui/core"; +import React from "react"; +import Status from "./Status"; + +const useStyle = makeStyles((theme) => ({ + root: { + width: "100%", + }, + statusContainer: { + marginTop: theme.spacing(2) + }, +})); + +function JobHeader() { + + const classes = useStyle(); + + return ( + + + + + + + ORC-JPG + + + + Runs ocr on jpg files + + + + version 1.0 + + + + Status:{""} + + + + + DONE + + + + + + #23 + + + + + ); +} + +export default JobHeader; diff --git a/src/components/JobResults.js b/src/components/JobResults.js new file mode 100644 index 0000000..96c601f --- /dev/null +++ b/src/components/JobResults.js @@ -0,0 +1,157 @@ +import React, { useState } from "react"; +import { + Button, + Card, + CardContent, + Divider, + makeStyles, + Typography, + Box, +} from "@material-ui/core"; +import GetAppIcon from "@material-ui/icons/GetApp"; +import axios from "axios"; +import API from "../api/API"; + +const useStyle = makeStyles((theme) => ({ + resultCard: { + marginBottom: theme.spacing(3), + backgroundColor: theme.palette.primary.main, + color: "white", + }, + divider: { + marginBottom: theme.spacing(3), + marginTop: theme.spacing(2), + marginLeft: theme.spacing(4), + marginRight: theme.spacing(4), + }, + downloadIcon: { + marginRight: theme.spacing(), + }, + mediaPreview: { + maxWidth: "640px", + marginBottom: theme.spacing(2), + }, + container: {}, +})); + +function JobResults({ jobData, pipeline }) { + const [downloadArray, setDownloadArray] = useState([]); + const classes = useStyle(); + + function downloadText(text) { + const blob = new Blob([text], { type: "text/plain;charset=utf-8" }); + const url = window.URL.createObjectURL(blob); + downloadArray.push(url); + console.log(url); + return url; + } + + function downloadFile(file, type) { + axios.get(API.getFileLink(file), { responseType: "blob" }).then((res) => { + console.log(res.data); + const url = window.URL.createObjectURL(res.data); + console.log(url); + downloadArray.push(url); + const link = document.createElement("a"); + link.href = url; + link.download = file; + document.body.appendChild(link); + link.click(); + link.remove(); + }); + } + + return ( + + + + Results + + + + {jobData && + jobData.status == "done" && + jobData.data && + pipeline && + pipeline.id == jobData.type + ? pipeline.output.map((value, i) => { + let cardData = {}; + if (value.from) { + console.log(value); + const stringSplit = value.from.split(":"); + console.log(stringSplit); + cardData = jobData.data[stringSplit[0]][stringSplit[1]]; + } else { + cardData = + jobData.data[ + Object.keys(jobData.data).find( + (key) => jobData.data[key][value.id] + ) + ][value.id]; + } + if (value.type == "file") + return ( + + + {value.name} + + {value.description} + + + + {cardData.mimetype.split("/")[0] == "video" ? ( +
+
+ ) : cardData.mimetype.split("/")[0] == "image" ? ( +
+ +
+ ) : null} + + + + + ); + return ( + + + {value.name} + {value.description} + + {cardData} + + + + ); + }) + : null} + + + + ); +} + +export default JobResults; diff --git a/src/components/Status.js b/src/components/Status.js index d80ac37..06e94b1 100644 --- a/src/components/Status.js +++ b/src/components/Status.js @@ -22,7 +22,7 @@ const useStyle = makeStyles((theme) => ({ } })); -function Status({ children, color, center }) { +function Status({ children, color, center=false }) { const classes = useStyle(); return ( diff --git a/src/pages/Pipeline/PipelineResult.js b/src/pages/Pipeline/PipelineResult.js index 674d71d..4795372 100644 --- a/src/pages/Pipeline/PipelineResult.js +++ b/src/pages/Pipeline/PipelineResult.js @@ -1,41 +1,19 @@ import React, { useEffect, useState } from "react"; -import { - makeStyles, - Typography, - Card, - CardContent, - Button, - Divider, - CardMedia, -} from "@material-ui/core"; +import { makeStyles, Divider, Grid } from "@material-ui/core"; import { useGlobalContext } from "../../contexts/GlobalContext"; import API from "../../api/API"; -import GetAppIcon from "@material-ui/icons/GetApp"; -import axios from "axios"; +import JobHeader from "../../components/JobHeader"; +import JobResults from "../../components/JobResults"; const useStyle = makeStyles((theme) => ({ - root: {}, - results: { - display: "flex", - flexDirection: "column", - alignItems: "center", - height: "100%", - margin: theme.spacing(5), - }, - resultCard: { - marginBottom: theme.spacing(3), - backgroundColor: theme.palette.primary.main, - color: "white", + root: { + margin: theme.spacing(2), }, divider: { - margin: theme.spacing(3), - }, - downloadIcon: { - marginRight: theme.spacing(), - }, - mediaPreview: { - maxWidth: "640px", - marginBottom: theme.spacing(2), + marginBottom: theme.spacing(3), + marginTop: theme.spacing(2), + marginLeft: theme.spacing(4), + marginRight: theme.spacing(4), }, })); @@ -45,144 +23,31 @@ export default function PipelineResult({ }, }) { const classes = useStyle(); - const { - setRunning, - running, - processData, - setProcessData, - pipeline, - setPipeline, - pipelineOptions, - } = useGlobalContext(); + const { pipeline, setPipeline, pipelineOptions } = useGlobalContext(); const [jobData, setJobData] = useState({}); - const [downloadArray, setDownloadArray] = useState([]); useEffect(() => { if (!jobData || jobData.status !== "done") { API.getJob(id).then((res) => { setJobData(res.data); pipelineOptions.map((pipeline) => console.log(pipeline.id)); - console.log(res.data.type); setPipeline( pipelineOptions.find((pipeline) => pipeline.id === res.data.type) ); - console.log("setpipeline"); - console.log(res.data); }); } }, [jobData]); - function downloadText(text) { - const blob = new Blob([text], { type: "text/plain;charset=utf-8" }); - const url = window.URL.createObjectURL(blob); - downloadArray.push(url); - console.log(url); - return url; - } - - function downloadFile(file, type) { - axios.get(API.getFileLink(file), { responseType: "blob" }).then((res) => { - console.log(res.data); - const url = window.URL.createObjectURL(res.data); - console.log(url); - downloadArray.push(url); - const link = document.createElement("a"); - link.href = url; - link.download = file; - document.body.appendChild(link); - link.click(); - link.remove(); - }); - } - return (
-
- {/* {(!running && !processData.response) ? {pipeline.description} : null } */} - {!jobData || jobData.status !== "done" ? ( - Loading... - ) : null} - {jobData.status=="done" && jobData.data && pipeline && pipeline.id == jobData.type - ? pipeline.output.map((value, i) => { - console.log(pipeline); - let cardData = {}; - if (value.from) { - console.log(value); - const stringSplit = value.from.split(':'); - console.log(stringSplit); - cardData = jobData.data[stringSplit[0]][stringSplit[1]]; - } else { - cardData = - jobData.data[ - Object.keys(jobData.data).find( - (key) => jobData.data[key][value.id] - ) - ][value.id]; - } - if (value.type == "file") - return ( - - - {value.name} - {value.description} - - - {cardData.mimetype.split("/")[0] == - "video" ? ( -
-
- ) : cardData.mimetype.split("/")[0] == - "image" ? ( -
- -
- ) : null} - - - - - ); - return ( - - - {value.name} - {value.description} - - {cardData} - - - - ); - }) - : null} -
+ + + + + + + +
); }