Change download flow and the output file name

[bhumulanandinireddy]

Issue Description

The current download functionality uses a generic "Download Output" button, which does not align with modern UI patterns. Additionally, downloaded files have generic names, making it difficult for users to organize and identify multiple documents with different search terms. The Preview modal also lacks a download option, and there is no error handling for download failures.

Current Status

The download button is currently labeled "Download Output" instead of using a standard download icon. Downloaded files have generic names without meaningful identifiers, making them hard to organize. There is no tooltip for accessibility, and no filename length restrictions are in place. The Preview modal does not have a download option, and no specific error handling is implemented for download failures.

Acceptance Criteria

• Download Icon Implementation:

  • Replace "Download Output" with a download icon (downward arrow).
  • Maintain the current blue color scheme (#4169E1).
  • Add a hover tooltip displaying "Download."

• Descriptive Filename Convention:

  • Format: {YYYYMMDD}_{input_filename}_{search_term}.docx
  • Date format: YYYYMMDD
  • Maximum filename length: 100 characters

• Component limits:

  • Input filename: truncate to 40 characters if longer.
  • Search term: truncate to 40 characters if longer.
  • Add ellipsis (...) when truncating.
    - Example: "20241116_Styrene-H_CARTESIAN-COORDINATES.docx"

• Preview Modal Enhancement:

  • Add the download icon in the Preview modal.

• Error Handling:

  • Display an error message if the download fails, based on the API response.

[paulongkiko]

@bhumulanandinireddy Regarding the download button, I was looking through the app to see if there was a specific set of icons to use. Would you prefer any set such as React or MUI in particular, or would you prefer I add only a download icon to the public folder?

[bhumulanandinireddy]

Hi @paulongkiko - any icon is fine until it refers a download icon by matching the color code which was specified in the issue.