Skip to content

Commit

Permalink
multi file upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@amirrr
amirrr committed Aug 4, 2024
1 parent 5951305 commit 56c0d28
Show file tree
Hide file tree
Showing 5 changed files with 115 additions and 78 deletions.
37 changes: 22 additions & 15 deletions client/src/components/View/TableView/ArrangeTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Result, TableData, flattenData } from './hooks/data-handler'

type ArrageTableProps = {
result: Result[]
handleBackend: (file: File) => void
handleBackend: (file: FileList) => void
}

const ArrageTable = ({ result, handleBackend }: ArrageTableProps) => {
Expand Down Expand Up @@ -107,9 +107,9 @@ const ArrageTable = ({ result, handleBackend }: ArrageTableProps) => {
}

const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0]
if (file) {
handleBackend(file)
const files = event.target.files
if (files) {
handleBackend(files)
}
}

Expand Down Expand Up @@ -191,6 +191,7 @@ const ArrageTable = ({ result, handleBackend }: ArrageTableProps) => {
onChange={handleFileChange}
style={{ display: 'none' }}
accept='application/pdf'
multiple
/>
<button
onClick={handleExport}
Expand Down Expand Up @@ -230,17 +231,23 @@ const ArrageTable = ({ result, handleBackend }: ArrageTableProps) => {
<tbody>
{rows.rows.map((row, rowIndex) =>
row ? (
<tr key={rowIndex} className='hover:bg-gray-100'>
{Object.values(row).map((value, colIndex) => (
<td
key={colIndex}
data-col={colIndex}
onMouseEnter={() => handleMouseEnter(colIndex)}
onMouseLeave={() => handleMouseLeave(colIndex)}
>
{value}
</td>
))}
<tr
key={rowIndex}
className={`hover:bg-gray-100 ${row.status === 'inprogress' ? 'skeleton' : ''}`}
>
{Object.entries(row).map((value, colIndex) => {
if (value[0] === 'status') return
return (
<td
key={colIndex}
data-col={colIndex}
onMouseEnter={() => handleMouseEnter(colIndex)}
onMouseLeave={() => handleMouseLeave(colIndex)}
>
{value[1]}
</td>
)
})}
</tr>
) : null,
)}
Expand Down
90 changes: 55 additions & 35 deletions client/src/components/View/TableView/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,24 @@ type RunStatus = {
done: boolean
}

type PaperProcessingStatus = {
file_name: string
task_id: string
status: 'success' | 'failed' | 'inprogress'
}

const Table: React.FC = () => {
// State
const [isDragging, setIsDragging] = useState(false)
const [isUploading, setIsUploading] = useState(false)

const [data, setData] = useState<Result[]>([check_data])

const [status, setStatus] = useState<RunStatus>({
status: '',
progress: 0,
task_id: '',
done: false,
})
const [pathLength, setPathLength] = useState(0)
const [isProcessing, setIsProcessing] = useState<PaperProcessingStatus[]>([])

const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
e.preventDefault()
Expand All @@ -49,9 +54,17 @@ const Table: React.FC = () => {
})

if (data.done) {
getResults(data.task_id).then(() => {
setIsUploading(false)
})
getResults(data.task_id)
.then(() => {
setIsUploading(false)
})
.finally(() => {
setIsProcessing((prev) =>
prev.map((obj) =>
obj.task_id === data.task_id ? { ...obj, status: 'success' } : obj,
),
)
})
}
},
[],
Expand All @@ -69,19 +82,6 @@ const Table: React.FC = () => {
}
}, [socket, onMessage])

useEffect(() => {
// Ensure the path element exists before trying to get its length
const path = document.querySelector<SVGPathElement>('#uploadPath')
if (path) {
const length = path.getTotalLength()
setPathLength(length)
}
}, [status])

const getStrokeDashoffset = () => {
return pathLength - (pathLength * status.progress) / 100
}

const getResults = async (task_id: string) => {
const response = await fetch(
`${API_URL}/run_assistant?task_id=${task_id}
Expand All @@ -98,35 +98,53 @@ const Table: React.FC = () => {
const new_data = await response.json()
try {
flattenData([new_data], true, true, true)
setData((prev) => [...prev, new_data])
setData((prev) => prev.map((obj) => (obj.task_id === task_id ? new_data : obj)))
} catch (error) {
setData((prev) => [...prev, get_failed_data(task_id)])
setData((prev) =>
prev.map((obj) =>
obj.task_id === task_id ? get_failed_data(task_id, false, task_id) : obj,
),
)
console.error('Error parsing data:', error)
} finally {
setStatus({ status: '', progress: 0, task_id: '', done: false })
}
} else {
console.error('Error fetching results')
}
}

const handleBackend = async (file: File) => {
const handleBackend = async (files: FileList) => {
setIsUploading(true)

const formData = new FormData()
formData.append('file', file)
formData.append('sid', socket?.id || '')
formData.append('model', 'gpt')
const data = new FormData()
for (const file of files) {
data.append('files[]', file, file.name)
}
data.append('sid', socket?.id || '')
data.append('model', 'gpt')

try {
const response = await fetch(`${API_URL}/run_assistant`, {
method: 'POST',
body: formData,
body: data,
headers: {},
})
if (response.ok) {
const new_data = await response.json()
console.info(`Task ID: ${new_data.task_id}`)
const new_data: { [key: string]: string } = await response.json()
Object.entries(new_data).forEach(([key, value]) => {
setIsProcessing((prev) => [
...prev,
{
file_name: key,
task_id: value,
status: 'inprogress',
},
])
setData((prev) => [...prev, get_failed_data(key, true, value)])
})
} else {
setData((prev) => [...prev, get_failed_data(file.name)])
setData((prev) => [...prev, get_failed_data(files[0].name, false)])
}
} catch (error) {
console.error('Error uploading file:', error)
Expand All @@ -143,7 +161,7 @@ const Table: React.FC = () => {

const files = e.dataTransfer.files

await handleBackend(files[0])
await handleBackend(files)
}

return (
Expand Down Expand Up @@ -173,8 +191,6 @@ const Table: React.FC = () => {
strokeLinecap='round'
strokeLinejoin='round'
d='M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z'
strokeDasharray={pathLength}
strokeDashoffset={getStrokeDashoffset()}
/>
</svg>
<span className='loading loading-dots loading-lg text-gray-400'></span>
Expand All @@ -188,14 +204,18 @@ const Table: React.FC = () => {
onDrop={handleDrop}
>
<ArrageTable result={data} handleBackend={handleBackend} />
{isUploading && (
{isProcessing.filter((obj) => obj.status === 'inprogress').length > 0 && (
<div className='toast toast-end'>
<div role='alert' className='alert shadow-lg w-96'>
<span className='loading loading-spinner loading-md'></span>
<div>
<h3 className='font-bold'>Processing paper</h3>
<h3 className='font-bold'>Processing papers</h3>
<div className='text-xs'>{status.status || 'Uploading...'}</div>
</div>
<span className=''>
{isProcessing.filter((obj) => obj.status === 'success').length}/
{isProcessing.length}
</span>
</div>
</div>
)}
Expand Down
39 changes: 19 additions & 20 deletions client/src/components/View/TableView/hooks/data-handler.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,9 @@ export interface Experiment {
}

export interface Result {
file_name?: string
task_id: string
status: 'success' | 'failed' | 'inprogress'
file_name: string
experiments: Experiment[]
}

Expand Down Expand Up @@ -113,7 +115,6 @@ export const flattenExperiment = (

if (expandedExperiment) {
if (expandedCondition) {
// expandedExperiment && expandedCondition
const headers = expandedBehavior
? [...defaultHeaders, ...experimentHeaders, ...conditionHeaders, ...behaviorHeaders]
: [...defaultHeaders, ...experimentHeaders, ...conditionHeaders, 'behaviors']
Expand All @@ -123,7 +124,8 @@ export const flattenExperiment = (
experiment.conditions.flatMap((condition, con_index) =>
condition.behaviors.map((behavior, beh_index) => ({
id: `${experiment_id}-${exp_index}-${con_index}-${beh_index}`,
file_name: data.file_name || '',
file_name: data.status === 'inprogress' ? data.task_id : data.file_name,
status: data.status,
experiment_name: experiment.name,
experiment_description: experiment.description,
participant_source: experiment.participant_source,
Expand All @@ -139,11 +141,6 @@ export const flattenExperiment = (
female_perc: experiment.female_perc,
male_perc: experiment.male_perc,
gender_other: experiment.gender_other,
// white_perc: experiment.white_perc,
// black_perc: experiment.black_perc,
// hispanic_perc: experiment.hispanic_perc,
// asian_perc: experiment.asian_perc,
// other_ethnicity_perc: experiment.other_ethnicity_perc,
language: experiment.language,
language_secondary: experiment.language_secondary,
compensation: experiment.compensation,
Expand All @@ -163,7 +160,8 @@ export const flattenExperiment = (
: (data.experiments.flatMap((experiment, exp_index) =>
experiment.conditions.map((condition, con_index) => ({
id: `${experiment_id}-${exp_index}-${con_index}`,
file_name: data.file_name || '',
file_name: data.status === 'inprogress' ? data.task_id : data.file_name,
status: data.status,
experiment_name: experiment.name,
experiment_description: experiment.description,
participant_source: experiment.participant_source,
Expand Down Expand Up @@ -223,7 +221,8 @@ export const flattenExperiment = (
experiment.conditions.flatMap((condition, con_index) =>
condition.behaviors.map((behavior, beh_index) => ({
id: `${experiment_id}-${exp_index}-${con_index}-${beh_index}`,
file_name: data.file_name || '',
file_name: data.status === 'inprogress' ? data.task_id : data.file_name,
status: data.status,
experiment_name: experiment.name,
experiment_description: experiment.description,
participant_source: experiment.participant_source,
Expand Down Expand Up @@ -259,7 +258,8 @@ export const flattenExperiment = (
) as KeyValuePairs[])
: data.experiments.flatMap((experiment, exp_index) => ({
id: `${experiment_id}-${exp_index}`,
file_name: data.file_name || '',
file_name: data.status === 'inprogress' ? data.task_id : data.file_name,
status: data.status,
experiment_name: experiment.name,
experiment_description: experiment.description,
participant_source: experiment.participant_source,
Expand All @@ -275,11 +275,6 @@ export const flattenExperiment = (
female_perc: experiment.female_perc,
male_perc: experiment.male_perc,
gender_other: experiment.gender_other,
// white_perc: experiment.white_perc,
// black_perc: experiment.black_perc,
// hispanic_perc: experiment.hispanic_perc,
// asian_perc: experiment.asian_perc,
// other_ethnicity_perc: experiment.other_ethnicity_perc,
language: experiment.language,
language_secondary: experiment.language_secondary,
compensation: experiment.compensation,
Expand Down Expand Up @@ -319,7 +314,8 @@ export const flattenExperiment = (
experiment.conditions.flatMap((condition, con_index) =>
condition.behaviors.map((behavior, beh_index) => ({
id: `${experiment_id}-${exp_index}-${con_index}-${beh_index}`,
file_name: data.file_name || '',
file_name: data.status === 'inprogress' ? data.task_id : data.file_name,
status: data.status,
experiments: experiment.name,
condition_name: condition.name,
condition_description: condition.description,
Expand All @@ -335,7 +331,8 @@ export const flattenExperiment = (
: (data.experiments.flatMap((experiment, exp_index) =>
experiment.conditions.map((condition, con_index) => ({
id: `${experiment_id}-${exp_index}-${con_index}`,
file_name: data.file_name || '',
file_name: data.status === 'inprogress' ? data.task_id : data.file_name,
status: data.status,
experiments: experiment.name,
condition_name: condition.name,
condition_description: condition.description,
Expand Down Expand Up @@ -370,7 +367,8 @@ export const flattenExperiment = (
experiment.conditions.flatMap((condition, con_index) =>
condition.behaviors.map((behavior, beh_index) => ({
id: `${experiment_id}-${exp_index}-${con_index}-${beh_index}`,
file_name: data.file_name || '',
file_name: data.status === 'inprogress' ? data.task_id : data.file_name,
status: data.status,
experiments: experiment.name,
conditions: condition.name,
behavior_name: behavior.name,
Expand All @@ -383,7 +381,8 @@ export const flattenExperiment = (
: ([
{
id: `${experiment_id}`,
file_name: data.file_name || '',
file_name: data.status === 'inprogress' ? data.task_id : data.file_name,
status: data.status,
experiments: `${data.experiments.length} experiment(s)`,
conditions: `${data.experiments.flatMap((exp) => exp.conditions).length} condition(s)`,
behaviors: `${data.experiments.reduce(
Expand Down
8 changes: 6 additions & 2 deletions client/src/components/View/TableView/hooks/mock-data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { Result } from './data-handler'

// Sample usage
export const check_data: Result = {
task_id: 'task_id',
status: 'success',
file_name:
'whiting-watts-2024-a-framework-for-quantifying-individual-and-collective-common-sense.pdf',
experiments: [
Expand Down Expand Up @@ -78,8 +80,10 @@ export const check_data: Result = {
],
}

export function get_failed_data(name: string): Result {
export function get_failed_data(name: string, inProgress: boolean, task_id: string = ''): Result {
return {
task_id: task_id,
status: inProgress ? 'inprogress' : 'failed',
file_name: name,
experiments: [
{
Expand All @@ -105,7 +109,7 @@ export function get_failed_data(name: string): Result {
],
demographics_conditions: '--',
description: '--',
name: 'failed',
name: '--',
female_perc: '--',
gender_other: '--',
language: '--',
Expand Down
Loading

0 comments on commit 56c0d28

Please sign in to comment.