Implementation of a Client Side interface for File Uploading

mwittep commented 6 months ago

Description

After the design interface has been sketched, it needs to be implemented using React as decided in #11. The input should be sent to the API (#14). The client interface should also account for error-checking (correct file type parsing, a maximal file size, etc.)

Acceptance

Remember: Definition of DONE

[x] Implementation of protoype via React, Yarn and Vite using the sketch designed in #21.
[x] Account for different types of wiggle files (Technical Replicates or different conditions)
[x] File error checking for correct file type.
[x] The files are sent to the API. Contract can be found at #37

Definition of Ready

If this issues has been discussed with the team and everybody agrees that it is implementable within one iteration, you can assign the label ready to it.

MarkusHenkel commented 5 months ago

Ideas on how to send the frontend data to the API:

Erklärung:

FormData-Objekt: Ein FormData-Objekt wird erstellt, um alle Dateien zusammen mit ihren entsprechenden Labels zu sammeln und an das Backend zu senden.
Anhängen von Dateien:
- Die GFF-Datei und die Master-Table-Datei werden zum FormData-Objekt hinzugefügt, falls sie vorhanden sind.
- Jede Datei aus den Condition-Komponenten wird mit einem spezifischen Label (condition_{index + 1}_forward_{idx + 1} und condition_{index + 1}_reverse_{idx + 1}) hinzugefügt, um anzugeben, aus welcher Bedingung sie stammt und ob es sich um eine Vorwärts- oder Rückwärtsdatei handelt.
fetch-Anfrage:
- Die Daten werden mit einer POST-Anfrage an die angegebene Backend-URL gesendet.
- Wenn die Anfrage erfolgreich ist (response.ok), wird eine Bestätigung in der Konsole ausgegeben.
- Bei einem Fehler wird der Fehler in der Konsole protokolliert.

Spezifische Details:

Fehlerbehandlung:
- Die fetch-Anfrage ist in einem try-catch-Block eingeschlossen, um Netzwerkfehler oder andere Probleme beim Senden der Anfrage abzufangen und zu behandeln.
Ref-Handling in Condition:
- Durch useImperativeHandle und forwardRef in der Condition-Komponente wird sichergestellt, dass die ref die Dateien (forwardFiles und reverseFiles) enthält und sie für den ProjectForm-Parent zugänglich macht.
Konsistenzprüfung bei Datei-Uploads:
- In der Condition-Komponente wird überprüft, ob die Anzahl der vorwärts und rückwärts hochgeladenen Dateien übereinstimmt, um konsistente Datenpaare sicherzustellen.

Durch diese Änderungen wird sichergestellt, dass das Frontend alle benötigten Dateien korrekt sammelt, labelt und an das Backend sendet, während Fehler bei der Kommunikation oder Verarbeitung der Dateien vermieden werden.

habicht12 commented 5 months ago

Everything now implemented and a wiki article with instructions on how to set the frontend up has been created: https://github.com/Integrative-Transcriptomics/tss-prediction-comparison/wiki/How-to-set-up-the-frontend-on-your-device

Integrative-Transcriptomics / tss-prediction-comparison