Feat(batch): Add Interactive Table Display For Batch Results

by ADMIN 61 views

Description

The current batch processing implementation only provides results as a downloadable file. To enhance user experience, an interactive display of the processed batch results directly within the UI is needed. This feature aims to provide a more efficient and user-friendly way to view, sort, and interact with batch results.

Desired Behavior

After batch processing completes successfully (or partially with errors), display the results in an interactive table (v-data-table) within the BatchView.vue component. The table should include key columns:

  • Input Variant: The input variant used for processing.
  • Gene Symbol: The gene symbol associated with the variant.
  • Genomic Position: The genomic position of the variant.
  • Most Severe Consequence: The most severe consequence of the variant.
  • Gene Score: The gene score calculated for the variant.
  • Variant Score: The variant score calculated for the variant.
  • Inheritance Score: The inheritance score calculated for the variant.
  • Combined NCS: The combined NCS score calculated for the variant.

Allow users to sort the table by different columns (especially scores). Potentially allow basic filtering within the table results. Provide clear visual indication for variants that failed processing. The download option should remain available, downloading the content currently displayed in the table.

Implementation Ideas

Modify the processAndDownload function in BatchView.vue

  • Instead of directly downloading, store the processed results (likely an array of objects, even if the API initially returned CSV/TSV) in a reactive ref (e.g., batchResults = ref([])).
  • Ensure results include flags or messages for variants that failed.

Add a <v-data-table> component to the BatchView.vue template

  • Conditionally display the table (v-if) when batchResults.value.length > 0.
  • Define the headers for the v-data-table corresponding to the desired output columns.
  • Bind the :items prop of the table to the batchResults ref.
  • Use slots within v-data-table for custom rendering if needed (e.g., formatting scores, linking gene symbols, highlighting errors).
  • Modify the "Download" button logic to generate the file content based on the batchResults array instead of the direct API response.

Tasks

Add a reactive ref (batchResults) to store processed batch data in BatchView.vue

  • Create a reactive ref (batchResults) to store the processed batch data.
  • Update the processAndDownload function to populate the batchResults ref instead of immediate download.

Update processAndDownload to populate batchResults instead of immediate download

  • Handle different API output formats (convert CSV/TSV back to objects or request JSON).
  • Populate the batchResults ref with the processed data.

Add a v-data-table to the BatchView.vue template

  • Add a v-data-table component to the template.
  • Define the headers for the table corresponding to the desired output columns.

Define appropriate table headers

  • Define the `` for the table, including the desired output columns.

Bind the table items to batchResults

  • Bind the :items prop of the table to the batchResults ref.

Implement sorting functionality (default v-data-table feature)

  • Use the default sorting functionality provided by v-data-table.

Update the download button logic to use batchResults

  • Modify the "Download" button logic to generate the file content based on the batchResults array instead of the direct API response.

Add visual indicators for rows corresponding to variants that failed processing

  • Add visual indicators (e.g., colors, icons) to highlight rows corresponding to variants that failed processing.

Motivation

This feature allows users to immediately view, sort, and interact with batch results within the application before deciding to download, improving workflow efficiency and data exploration capabilities.

Benefits

  • Improved user experience with interactive table display.
  • Enhanced data exploration capabilities with sorting and filtering.
  • Increased workflow efficiency with immediate access to batch results.

Future Development

  • Consider adding more advanced filtering and sorting capabilities.
  • Explore integrating with other features, such as data visualization or machine learning algorithms.

Conclusion

Q: What is the purpose of the interactive table display for batch results?

A: The purpose of the interactive table display for batch results is to provide a more efficient and user-friendly way to view, sort, and interact with batch results within the application. This feature aims to improve workflow efficiency and data exploration capabilities.

Q: What columns will be included in the interactive table?

A: The interactive table will include the following columns:

  • Input Variant: The input variant used for processing.
  • Gene Symbol: The gene symbol associated with the variant.
  • Genomic Position: The genomic position of the variant.
  • Most Severe Consequence: The most severe consequence of the variant.
  • Gene Score: The gene score calculated for the variant.
  • Variant Score: The variant score calculated for the variant.
  • Inheritance Score: The inheritance score calculated for the variant.
  • Combined NCS: The combined NCS score calculated for the variant.

Q: Will users be able to sort the table by different columns?

A: Yes, users will be able to sort the table by different columns, especially scores. The default sorting functionality provided by v-data-table will be used.

Q: Will users be able to filter the table results?

A: Potentially, users will be able to filter the table results. Basic filtering will be implemented, but more advanced filtering capabilities may be considered in future development.

Q: How will variants that failed processing be indicated in the table?

A: Variants that failed processing will be indicated in the table with clear visual indicators, such as colors or icons.

Q: Will the download option remain available?

A: Yes, the download option will remain available. The "Download" button logic will be modified to generate the file content based on the batchResults array instead of the direct API response.

Q: What are the benefits of this feature?

A: The benefits of this feature include:

  • Improved user experience with interactive table display.
  • Enhanced data exploration capabilities with sorting and filtering.
  • Increased workflow efficiency with immediate access to batch results.

Q: What are the future development plans for this feature?

A: Future development plans for this feature include:

  • Considering more advanced filtering and sorting capabilities.
  • Exploring integrating with other features, such as data visualization or machine learning algorithms.

Q: Why is this feature important?

A: This feature is important because it will enable users to make more informed decisions and explore their data more effectively. By providing a more efficient and user-friendly way to view, sort, and interact with batch results, this feature will improve workflow efficiency and data exploration capabilities.