Add Data

[rwx-yxu]

Summary

The user wants to add their experimental data to the repository

Basic Path

1. The use case starts when a user indicates that he/she wants to add data to the system.
2. The system presents a dialog for the user to enter details regarding the data.
3. The system presents a dialog for the user to upload the data.
4. The user uploads data.
5. The system checks that the data file is the required format.
6. The system checks that there are only two columns of data (see preconditions).
7. The system stores the data.
8. The system adds and records a timestamp.
9. The system plots/graphs/charts the data.
10. The system sends a confirmation email to the user. Email should contain the recorded timestamp and other pertinent information.

    Alternative Paths

    Step 4: If the file is the wrong format, the system displays a message and the use case repeats step 2. Step 5: If other than two columns of data exist, a message is displayed and the use case repeats step 2.

    Exception Paths

    The user can cancel the operation at any time.

    Preconditions

    The data is stored in a csv file or developer-required format. There are only two columns of data, e.g., force and time. [This is also the developer’s choice but there should be a verification of the format and the layout of the data].

    Postconditions

    The data is now in the repository.

[D4ni3l8]

Add data component. The user fills in the form which contains textboxes which are force and time. When the user submits the form, a timestamp will be recorded. The file has to be in csv format.

[rwx-yxu]

Are we making two forms? One for manual user input and another file component?

[rwx-yxu]

If user uploads file. should we present a visual representation parsed as a preview? If so, that might very well be another component

[D4ni3l8]

I read the use case description again and the user uploads the data and it is stored in the repository in csv format. We dont need to make a preview.

[D4ni3l8]

• Create a button on dashboard that routes to the add data
• Create a component that allows the user to complete the form
• Research on how to drag and drop files with bootstrap

[rwx-yxu]

Please list the high priority fields here for the form. Create a new .js file in utils to parse and upload csv data. Check utils/uploadHcmData.js as an example for parsing and uploading data to firebase.

[rwx-yxu]

How are you going to add a route for add user data?

[D4ni3l8]

The high priority fields are: a. left/right ventricular end diastolic volume (ledv/redv) b. left/right ventricular end systolic volume (lesv/resv) c. left/right ventricular ejection fraction (lvef/rvef) d. left/right ventricular mass (lvmass/rvmass) e. left/right systolic volume (lsv/rsv) f. fibrosis/scarring (scar) g. gender h. age at MRI i. apical HCM j. sudden cardiac death k. hypertension l. diabetes m. myectomy

n. MYH7 o. MYBPC3 p. TNNT2 q. ACTC r. TPM1 s. TNNCI t. TNNI3 u. MYL2 v. TT

I can make a route that takes the user to the add data page like this: path: '/addData', name: 'addData', component: AddDataView

[advweb-grp1]

How to navigate to the new route? Button from the Dashboard?

[advweb-grp1]

Have you looked into file uploading component?

[D4ni3l8]

To navigate to the addData route, i could create a button in the navigation bar when the user is logged in or have a button for it on the dashboard.

File uploading https://usecsv.com/community/usecsv-vuejs To upload data, i can use UseCSV which supports CSV and Excel files and allows me to drag and drop. To use UseCSV, i will need to create an account and then 'npm install @usecsv/vuejs3', then insert the import button with a template.

[D4ni3l8]

I ran the test and it failed. It says the server closed unexpectedly.

[D4ni3l8]

https://flatfile.com/docs/2.0/vuejs/getting-started/

• Another option to upload csv files is Flatfile, but it doesn't allow you to drag and drop files.
• Flatfile needs be installed and imported in vue and a flatfile button component to be created in App.vue
• The reason why we need to create an account is to get the license key, the license key enables the flatfile button component to work.
• The data will not be uploaded to a different website as it will be used in Vue
• For example when the user clicks on the import button, the user will see a dialog box open, then the user will be able to import the file and see if the columns match with each other.
• You will also be able to see a preview of the data that they want to upload
• Also, in the developer tools, you can see the response that has been sent
• This could be useful for our use case needs because the user clicks the button then select which files they want to upload

[advweb-grp1]

Decision made to use html tag with file type. Example: https://uploadcare.com/blog/html-file-upload-button/ .This solution is much more simpler than creating another external account because we already have some code that can parse the hcm data.

[LiamSingh64]

• [x] Change form inputs to appropriately reflect data types, Boolean = checkbox etc.
• [x] add <input type="file">
• [x] Use Bootstrap to split form into 2 columns, 'heart' data and 'gene' data so it is more readable

[advweb-grp1]

Do not need to implement sending email when data has been added. Spec page 4, head 8.