FileBrowser Implementation

[wadjih-bencheikh18]

closes : https://github.com/zakodium-oss/react-science/issues/748

https://748-create-nmr-file-browser.react-science.pages.dev/stories/?path=/story/components-nmrfilebrowser--basic

[cloudflare-pages[bot]]

Deploying react-science with    Cloudflare Pages

Latest commit:	e321505
Status:	✅  Deploy successful!
Preview URL:	https://a170dc6c.react-science.pages.dev
Branch Preview URL:	https://748-create-nmr-file-browser.react-science.pages.dev

View logs

[lpatiny]

Nice idea that if you click on a row the ellipsis property is removed !

Could you make this design responsive to width ? I would like also to test it in the storybook.

First level if not enough room:

• date disappear
• 1D, 2D, FT, FID, Download disappear (only All is kept)

Second level if not enough room:

• Date disappear

Mouse over the row can display an information about the last modification date (and propably more things in the future)

For solvent please put all the numbers in subscript. I guess something like: value.replaceAll(/([0-9]+)/g, '<sub>$1</sub>');

Could you remove about, over, almost from relative date. It takes quite a lot of place.

The green button what just an example but this is not something I'm attached to. At the end if has to fit the design of nmrium.org and replace the left column in

I think it should be the same kind of icons as you did in the detail view (so no color) and those icons should be aligned. In detail view the last icon should be empty.

For All and Set you could use an icon like

There should be a trotling of 250ms on the search button.

[lpatiny]

Nice design !

There are some strange behaviour on change of width. Is this done only with CSS ?

For the first level it is not the right columns that disappear when width is too small.

• date disappear
• 1D, 2D, FT, FID, Download disappear (only All is kept)

but if you make a query you don't have the same layout and if you enlarge the icons do not reappear.

For the second level the date should also disappear if not enough room.

[targos]

The resize issue is related to my comment in https://github.com/zakodium-oss/react-science/pull/750#discussion_r1697907760

[wadjih-bencheikh18]

• The API of the Table component has changed in a recent commit, and another change is pending: feat!: replace getRowTrProps with render prop renderRowTr #753

Is there a way to hide table headers?

[targos]

There's no way to hide headers, but tbh, with this kind of "table", I think a grid-based layout would make more sense.

[targos]

Is it ready for a new review @wadjih-bencheikh18 ?

[wadjih-bencheikh18]

Is it ready for a new review @wadjih-bencheikh18 ?

Yes

[lpatiny]

@wadjih-bencheikh18 could you remove the date at the second level when there is not enough space ?

Also at the first level the row height changes depending the width of the panel. Could you avoid this ?

The number of spectra is a good idea but please add an option to remove them and have a more compact design.

@targos you wanted to change the property to have a callback I think. We still have time to update it now.

[targos]

Let's keep the callback change for a future PR