halbritter-lab / pld-progression-grouper Goto Github PK

Add guideline how to cite the tool and which publication to both the README and the App

If applicable add links to funders and Institutions.

The download buttons for image, JSON and Excel should be disabled if no data is available.

When the input values are out of the allowed range the output fields are now empty (null values) and thus change size.
Force the size to stay same with CSS.

Description

To improve user experience, we should implement state management for the acknowledgment of the disclaimer banner, using cookies or similar technology. This will ensure that returning users do not need to acknowledge the banner each time they visit the site if they have done so previously on the same device/browser.

Goals

1. Implement cookie-based (or similar) state management for banner acknowledgment.
2. Display a message or indicator confirming acknowledgment when a returning user visits the site.

Implementation Details

• Use cookies or local storage to save the banner acknowledgment state.
• Check the stored state upon user visit and bypass the disclaimer if already acknowledged.
• Implement a user-friendly message or visual cue to confirm acknowledgment status to the user.

Develop a suite of automated tests to cover the various functionalities of the application, ensuring stability with future changes.

There is a small layout shift when laoding the page until the last commit ist fetched.
Solution: Set a default value, like"offline".

Implement more robust error handling for user input validation to prevent the application from crashing due to unexpected or incorrect data entries.

Currently the app calculates and shows the nTLV and LGR even for entered values outside of the allowed ranges.

Users might like their data as Excel table, add this possibility.

Issue Description: The footer is a reusable component that is currently hardcoded in the main template.

Proposed Solution: Refactor the footer into a mixin or a separate component to enhance reusability and maintainability across different parts of the application.

Issue Description: Currently, long text sections are directly embedded within components. This practice can hinder maintainability and readability.

Proposed Solution: Externalize long text sections into Vue mixins or similar structures. This approach will simplify updates and improve code organization.

Issue Description: Some buttons lack sufficient contrast between background and foreground colors, potentially affecting accessibility (Lighthouse).

Proposed Solution: Adjust button styles to improve contrast ratios, adhering to WCAG guidelines for accessibility.

Allow users to download their entered data as a table or JSON file and load it again.

Lighthosue warning:
" element does not have a [lang] attribute"

Issue Description: Users currently cannot easily cite and archive page snapshots.

Proposed Solution: Add a 'Copy Citation' button, integrated with WayBack Machine functionality or similar, to allow users to cite and save snapshots of the page.

Issue Description: There are "magic numbers" within the application's configuration, leading to potential confusion and maintainability issues.

Proposed Solution: Identify and replace these magic numbers with named constants, defined in a centralized configuration file.

Issue Description: The application currently does not support data input via URL parameters.

Proposed Solution: Implement functionality allowing users to input data through URL parameters, facilitating easier data sharing and manipulation.

Example: https://halbritter-lab.github.io/pld-progression-grouper/?acknowledge_banner=true&id=p1&age=45&tlv=7000 should directly acknowledge the banner, generate the plot and table for id "p1 with data avlues for age = 45 and tlv = 7000

The Sample ID is currently not displayed when hovering the point.

Add the data from the individuals in the manuscript to the plot (grey dots maybe), make this optional and hideable.

The WebApp needs some text and links to documentation.

It should be possible to remove data points again after adding them (errors).

Issue Description: Input fields' current styling may not provide optimal user experience.

Proposed Solution: Redesign input field styles, focusing on visual appeal and user interaction.

Description

The application should detect the user's internet connectivity status. If there is no internet access, the application should notify the user and display an 'offline' version status.

Goals

1. Implement an internet connectivity check within the app.
2. Display a clear indicator or message when the app is offline.
3. Ensure the version status reflects the 'offline' state appropriately.

Implementation Details

• Utilize window.navigator.onLine or a similar approach to detect connectivity status.
• Update the UI dynamically based on the connectivity status.
• Ensure the feature is responsive and updates in real-time when connectivity status changes.

Add variables to control the visibility of the footer, citation, documentation and control elements.

Please review the README.md and, if necessary, add any additional information or correct any typographical errors.

Convert SPA to Progressive Web App (PWA)

Description

Our current SPA provides a great user experience, but it can be enhanced by leveraging PWA capabilities. Converting to a PWA will provide offline support, improved loading times, and a more app-like experience, especially on mobile devices.

Goals

1. Implement a service worker for offline functionality and caching.
2. Create a manifest file with proper app icons and theme colors.
3. Ensure the application meets PWA standards as per Lighthouse in Chrome DevTools.

Implementation details

• Use Vue CLI's PWA plugin for initial setup.
• Customize the service worker and manifest file as per our app's requirements.
• Test with Lighthouse and ensure PWA criteria are met.

Configure linting for the app

Add PG1-PG2-PG3 labels to the plot.

Make Github Pages use the URL pld-progression-grouper.org/

Make the ID required and have a warning popup if it is not entered.

Add appropriate meta tags to the app to improve search engine finding.

Summary

Externalize all mathematical formulas into a separate configuration file.

Current Implementation

Currently, mathematical formulas for calculations (e.g., progression group thresholds) are hardcoded within the component script.

Proposed Change

Shift all these formulas to an external configuration file. This change would allow for easier adjustments and better maintainability, especially when dealing with frequent formula modifications or different parameter sets.

Benefits

• Maintainability: Simplifies the process of updating formulas without the need to delve into the component logic.
• Flexibility: Allows for quicker adaptations to new research findings or different calculation models.
• Readability: Enhances code readability by segregating the mathematical logic from the component code.

Suggested Implementation

Create a formulas.js or calculationsConfig.js in the config folder. Import this file in the components where calculations are done.

I believe this enhancement would significantly improve the code structure and ease the process of future updates.

Implement a system to provide user feedback (e.g. google forms, see SysNDD).

The banner does not resize on mobile screens and can't be dismissed.

add a sitemap.xml for indexing

add a robots.txt file for crawlers

Assign each input to the respective group PG1-PG2-PG3 and highlight in respective color.

Document the App code HTML, JS and CSS.

Issue Description: Downloaded file names lack timestamps, making version management challenging.

Proposed Solution: Modify the download functionality to append the current date and time in ISO8601 format to file names for better tracking and organization.

The download/save buttons should have deactivated state when no data is added to the plot/table.

The main plot does reduce size but not increase again with changes of browser width.

LGR is the liver growth rate and it should be an output righjt next to the PG calcualtion.
Se Figure S1 for formula.

The app should be versioned semantically.
The current version should also be shown on the website.

The acknowledged banner is currently to prominent at the position and stays sticky when scrolling.
Position it at the bottom.

Issue Description: The application currently lacks a comprehensive method to gather and analyze user interaction data.

Proposed Solution: Integrate Google Analytics into the application. This integration will enable detailed tracking of user interactions, providing valuable insights into usage patterns, visitor demographics, and other important metrics. It will also help in making data-driven decisions for future improvements.

If multiple individuals are added, make a table with these and display it. Add a download button for the table.

Add last commit to the version information.

example:
https://api.github.com/repos/halbritter-lab/pld-progression-grouper/commits?per_page=1

based on:
https://stackoverflow.com/questions/67986923/how-to-display-the-name-of-the-latest-commit-on-github-to-my-website

Describe how to install the PWA and it's usage in the readme.

To reduce manual updating the screenshots of the webapp and the PWA should be produced automatically on build.

Example library:
https://www.npmjs.com/package/capture-website