upload button

client/src/components/View/TableView/ArrangeTable.tsx

@@ -1,11 +1,12 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Result, TableData, flattenData } from './hooks/data-handler'
 
 type ArrageTableProps = {
   result: Result[]
+  handleBackend: (file: File) => void
 }
 
-const ArrageTable = ({ result }: ArrageTableProps) => {
+const ArrageTable = ({ result, handleBackend }: ArrageTableProps) => {
   const [expandedExperiment, setExpandedExperiment] = useState<boolean>(false)
   const [expandedCondition, setExpandedCondition] = useState<boolean>(false)
   const [expandedBehavior, setExpandedBehavior] = useState<boolean>(false)
@@ -98,10 +99,24 @@ const ArrageTable = ({ result }: ArrageTableProps) => {
     document.body.removeChild(link)
   }
 
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const handleButtonClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click()
+    }
+  }
+
+  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      handleBackend(file)
+    }
+  }
+
   return (
     <>
       <div className='navbar bg-base-100 flex flex-col sm:flex-row'>
-        <div className='navbar-start z-10 pl-5'>
+        <div className='navbar-start z-10 md:pl-5'>
           <div className='flex-none'>
             <span className='normal-case text-xl '>
               ATLAS {`  `}
@@ -155,7 +170,7 @@ const ArrageTable = ({ result }: ArrageTableProps) => {
             </ul>
           </div>
         </div>
-        <div className='navbar-end z-10'>
+        <div className='md:navbar-end z-10 max-sm:pt-4'>
           {/* <select
             id='countries'
             defaultValue={'gpt'}
@@ -164,7 +179,23 @@ const ArrageTable = ({ result }: ArrageTableProps) => {
             <option value='gpt'>GPT-4o</option>
             <option value='claude'>Claude 3.5</option>
           </select> */}
-          <button onClick={handleExport} className='btn btn-ghost badge badge-xs badge-primary'>
+          <button
+            onClick={handleButtonClick}
+            className='btn btn-sm btn-ghost border border-teal-100'
+          >
+            Browse file
+          </button>
+          <input
+            type='file'
+            ref={fileInputRef}
+            onChange={handleFileChange}
+            style={{ display: 'none' }}
+            accept='application/pdf'
+          />
+          <button
+            onClick={handleExport}
+            className='btn btn-sm btn-ghost badge badge-xs badge-primary'
+          >
             Export .csv
           </button>
         </div>

client/src/components/View/TableView/Table.tsx

@@ -2,8 +2,8 @@ import React, { useState, DragEvent, useEffect, useCallback } from 'react'
 import { useSocket } from '../../../context/Socket/UseSocket'
 import { API_URL } from '../../../service/api'
 import ArrageTable from './ArrangeTable'
-import { Result } from './hooks/data-handler'
-import { check_data } from './hooks/mock-data'
+import { flattenData, Result } from './hooks/data-handler'
+import { check_data, get_failed_data } from './hooks/mock-data'
 
 type RunStatus = {
   status: string
@@ -61,16 +61,11 @@ const Table: React.FC = () => {
     return pathLength - (pathLength * status.progress) / 100
   }
 
-  const handleDrop = async (e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault()
-    e.stopPropagation()
-
-    setIsDragging(false)
+  const handleBackend = async (file: File) => {
     setIsUploading(true)
 
-    const files = e.dataTransfer.files
     const formData = new FormData()
-    formData.append('file', files[0])
+    formData.append('file', file)
     formData.append('sid', socket?.id || '')
     formData.append('model', 'gpt')
 
@@ -82,8 +77,15 @@ const Table: React.FC = () => {
       })
       if (response.ok) {
         const new_data = await response.json()
-        setData((prev) => [...prev, new_data])
+        try {
+          flattenData([new_data], true, true, true)
+          setData((prev) => [...prev, new_data])
+        } catch (error) {
+          setData((prev) => [...prev, get_failed_data(file.name)])
+          console.error('Error parsing data:', error)
+        }
       } else {
+        setData((prev) => [...prev, get_failed_data(file.name)])
         console.error('Upload failed')
       }
     } catch (error) {
@@ -94,6 +96,17 @@ const Table: React.FC = () => {
     }
   }
 
+  const handleDrop = async (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    setIsDragging(false)
+
+    const files = e.dataTransfer.files
+
+    await handleBackend(files[0])
+  }
+
   return (
     <>
       {isDragging && (
@@ -135,7 +148,7 @@ const Table: React.FC = () => {
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
       >
-        <ArrageTable result={data} />
+        <ArrageTable result={data} handleBackend={handleBackend} />
         {isUploading && (
           <div className='toast toast-end'>
             <div role='alert' className='alert shadow-lg w-96'>

client/src/components/View/TableView/hooks/mock-data.ts

@@ -77,3 +77,49 @@ export const check_data: Result = {
     },
   ],
 }
+
+export function get_failed_data(name: string): Result {
+  return {
+    file_name: name,
+    experiments: [
+      {
+        adults: '--',
+        age_mean: '--',
+        age_sd: '--',
+        compensation: '--',
+        conditions: [
+          {
+            behaviors: [
+              {
+                description: '--',
+                focal: '--',
+                name: '--',
+                priority: '--',
+              },
+            ],
+            description: '--',
+            message: '--',
+            name: '--',
+            type: '--',
+          },
+        ],
+        demographics_conditions: '--',
+        description: '--',
+        name: 'failed',
+        female_perc: '--',
+        gender_other: '--',
+        language: '--',
+        language_secondary: '--',
+        male_perc: '--',
+        participant_source: '--',
+        participant_source_category: '--',
+        population_other: '--',
+        sample_size_analyzed: 0,
+        sample_size_notes: '--',
+        sample_size_randomized: 0,
+        units_analyzed: '--',
+        units_randomized: '--',
+      },
+    ],
+  }
+}

server/controllers/assisstant.py

@@ -60,14 +60,6 @@ def post(self):
                     "experiments": result["experiments"],
                 }
 
-                # Delete the uploaded
-                if os.path.isfile(file_path):
-                    os.remove(file_path)
-                    print("File removed from local storage successfully")
-                else:
-                    # If it fails, inform the user.
-                    print(f"Error: {file_path} file not found")
-
                 response = make_response(jsonify(response_data))
                 response.status_code = 200
                 return response
@@ -80,6 +72,13 @@ def post(self):
                 response = make_response(jsonify(response_data))
                 response.status_code = 500
                 return response
+            finally:
+                # Delete the uploaded
+                if os.path.isfile(file_path):
+                    os.remove(file_path)
+                    print("File removed from local storage successfully")
+                else:
+                    print(f"Error: {file_path} file not found")
         else:
             response_data = {"error": "File upload failed"}
             response = make_response(jsonify(response_data))

server/gpt_assistant.py

@@ -309,10 +309,6 @@ def call_asssistant_api(file_path: str, sid: str, sio):
         run = client.beta.threads.runs.create_and_poll(
             thread_id=thread_message.id,
             assistant_id=updated_assistant.id,
-            tool_choice={
-                "type": "function",
-                "function": {"name": "define_experiments_and_conditions_and_behaviors"},
-            },
         )
 
         sio.emit(