haryle / miappe_api_frontend

MIAPPE-API frontend

This repository contains the frontend code for APPN's data packaging service, that allows the user to enter plant phenotyping experminent metadata that conforms to the MIAPPE data standard.

The repository is written using React + React-Router + Radix-ui.

To run the frontend in developer mode

Please note that you may need to run the backend code.

npm run dev

To run the tests

npm run test 

To view stories via storybook

npm run storybook 

miappe_api_frontend's Issues

[ENHANCEMENT] Reimplement memoisation of table

Summary
Describe the new feature you want to be added

At the moment, switching between detail pages - i.e. /investigation and /study causes the console to log a warning due to changing memoisation dependencies of useMemo. While this does not affect the output, it's more ideal to separate memoisation dependencies between pages

Example
Provide an example or use-case of the requested feature

Set title for create and update pages

Improve table features - fuzzy search

The current search only filters by title and checks for exact matching.

Enable fuzzy matching of field title

Set up CI

• Run storybook test - for verifying that storybook loads successfully
• Run component unit test

Improve table features - select/unselect fields

At the moment, the fields to be displayed are static.

Allow users to add/remove fields to display on the table.

Add tests for table, page, and form factory methods

Let select fetcher ignore own id for self-referencing id

[UI/UX] More robust redirection for form create/update/delete

Summary
Describe changes for the current UI/UX that you want to see.

Previously, form submissions trigger redirection to static routes - i.e. after submitting create, user is always directed to the details page. This is fine in most cases, except for when users want to create a new dependent entry in a create form. For instance, a user is creating a new study, but also wants to create a new investigation that the new entry references. Upon finishing creating the investigation, the previous logic redirects the user to the /study pages, whereas the ideal behavior is to direct the user to /study/create page.

This is probably solved using state and useLocation logic

Screenshots
If applicable, add screenshots to help explain your request.

Improve table features - pagination

Allow the user to control the number of entries to be displayed - i.e 20, 50 or 100 - could also try for the endless scrolling feature.

This ticket should only focus on the display aspect of table pagination. The data fetching pagination should be done by another ticket.

Add Navigation Bar and Menu Bar

Set up issue templates for CIs

Improve table features - multiple field query search

At the moment users can only query by title.

Allow to perform query by different fields - i.e submissionDate, endDate etc

Improve table features - bulk delete

Allow users to select entries to be bulk deleted.

[UI/UX] Use labelKey and defaultValue for table header and data.

Summary
Describe changes for the current UI/UX that you want to see.

Allow table field renaming strategy.

At the moment, fields defined in schema are defined as-is in header. Use schema LabelKey for header title. Also use
getDefaultValue to display as table data - i.e. to avoid the ugly "2020-01-01T00:00:00Z"

Screenshots
If applicable, add screenshots to help explain your request.

[ENHANCEMENT] Add a field rename stragegy in SchemaEntryType

Summary
Describe the new feature you want to be added

At the moment, referencing fields - i.e. investigationId are renamed at the component level. While this is fine for many cases, the current ad-hoc solution is cumbersome for vocabulary references. For generality, it's simpler to have another field in the schema rather than to transform the field in-situ at component creation level.

Example
Provide an example or use-case of the requested feature

TBA

Improve table features - sortable columns

Allow for columns to be sorted

Set defaultValue for select component for PUT request

This update is similar to setting defaultValue for regular input component

Implement Form and Form Dialog

Tests - add more tests for factory form generation methods

Update README

Create a factory methods to generate routes

Routes are fairly homogeneous so this should be a clean way to organise the main page.

Implement select component with fetcher

Improve navigation for completing page creation/update

At the moment, after filling out the create form, users are redirected to the detail page. This is an inconvenience if they were directed to the create form of one MIAPPE field after clicking on the create button of another MIAPPE field.

For instance, study references investigation, so there is a create button that directs to the investigation creation page if the investigation that study wants to reference is not yet available. Completing the investigation creation form redirects user to the investigation detail page. The correct behaviour is to direct the user to the previous study create form.

Create an index page for help

Refactor hierarchical routing

At the moment, routers are flat. An idea is to arrange them in logical groups.

Set up linter and typing check for validation CI

[ENHANCEMENT] Make select be a separate component

Summary
Describe the new feature you want to be added

The current select component can be reused. Simply pack it to a library

Example
Provide an example or use-case of the requested feature

• Selection style - single and multiple

Add spinner for pending states for UX

[ENHANCEMENT] Remove double dipping of schema with both types and json

Summary
Describe the new feature you want to be added

Currently, every route generation requires creating a data.json as schema and a .types.ts file which duplicates information. A more elegant solution would be to create an object/class directly from the interface outline in types.ts.

Example
Provide an example or use case of the requested feature

N/A

Generate router, actions, loaders, handlers, and pages for the remainning MIAPPE fields

• Investigation
• Study
• Biological Material
• Data File
• Device
• Environment
• Event
• Experiment
• Experiment Factor
• Facility
• Institution
• Method
• Observation Unit
• Observed Variable
• Sample
• Unit
• Variable
• Vocabulary