Add storage finder page and relevant components #73
Conversation
- Added service filtering based on user-selected facets and display options for non-matching services. - Included a comparison section for selected services with detailed attributes. - Added a sticky info bar and scroll indicators to enhance user experience. - Added responsive design features for mobile and desktop views. - Added dark mode support. - Enhanced accessibility with appropriate ARIA attributes and tooltips. - Implemented `Dialog` and `Tooltip` components using `@radix-ui/react-dialog` and `@radix-ui/react-tooltip`. - Installed `lucide-react` for icons and `react-use` for utilities.
kapuic
added
enhancement
|
kapuic
changed the title
|
How is |
It was downloaded from http://35.206.69.67/rest/servicelist. |
| }, | ||
| { | ||
| "id": "15", | ||
| "title": "Distributed storage on the HSRN", |
There was a problem hiding this comment.
If this is Ceph then most of the data is incorrect
There was a problem hiding this comment.
Do you know who manages the service running on http://35.206.69.67?
|
Can you also add a link from the homepage to the finder page? Thanks! |
|
Where can I see this in https://nyu-rts.github.io/rts-docs-dev/pr-preview/pr-73/? |
|
Is this fully independent of the original http://35.206.69.67/finder (drupal) other than the data download of the JSON? If so, fantastic and I would love to move away from that Drupal site.
|
Yes, it does not rely on any external requests or APIs from the Drupal site. (However, Drupal might still be the best way to edit data in my opinion, because it offers admin UI.)
I wasn't sure where would be a good place to add a link. I'll add one to the homepage later.
This might require a considerable amount of work if we want to provide the same editing experience as Drupal's dashboard. To my knowledge, Drupal has built-in authentication, ensures all IDs are correctly associated, validates data, etc. If we build our own solution to editing data, we might lose these benefits.
One concern is that regardless of whether it's laid out horizontally or vertically, as the user selects more services or as we add more fields/properties, the table might still end up growing horizontally on smaller screens/devices. |
|
@kapuic please grab the latest json from the http://35.206.69.67/rest/servicelist site. @th-blitz has added data lake information. @remram44 what was needed to correct the ceph data? |
|
@genericdata Almost all of it is wrong: link, purge policy, alumni access. I don't know what "synchronous access" means. By the way all the "learn more" buttons next to the attribute names just show "information about " which doesn't tell anything more. |
|
The data was not collected by me or designed/structured by me. It started to come from this page and I copied it to Drupal's data finder. Look at their "syncronous access" to get an idea, but it looks like how many people can edit data at once. @remram44 can you provide that information for ceph? Doesn't have to be in JSON. Just simple text would work and @th-blitz will update the finder drupal site. I agree on removing the "more information" icons. @kapuic Can you remove the information icons for the bottom chart? Keep it documented or commented out so we can add if necessary down the road. Other things are:
|
|
@kapuic @genericdata Hi, can we use a google sheet to maintain the finder app's information and populate the site with it whenever we would want to make a change ? for example if we maintain a publicly viewable sheet like the one here, then we could pull it's data to populate the finder app's information in the new site like : # https://support.google.com/docs/thread/40044224/download-google-sheets-as-csv-in-bash?hl=en
wget --output-file="logs.csv" "https://docs.google.com/spreadsheets/d/1r-ctTSyV2ESJV5w9yvs9PmumOlrq9ulHXGER8UwWSIM/export?format=csv&gid=0" -O "finder_app_info.csv" |
|
The HSRN cluster is for research so there is no alumni access (because there is no student access). We don't purge files after 60 days since it is for long-term storage. I am not sure calling it "distributed" is relevant to users. The "2TB limit" is the maximum size of individual files, I don't think that's clear. It seems that "synchronous access" on that other page is for document editing (e.g. Google Docs), I don't know what that would mean for a file system. Other entries here that are not a web-based document editors have "not available" so maybe that's what it should say? CephFS has strong consistency and locking support so concurrent access to a database on CephFS actually works fine, I just don't know if that what "synchronous access" means. |
|
@genericdata I have synced the service list data with http://35.206.69.67/rest/servicelist, removed the information icon buttons, and made the page content take up the full width.
The title “Research Data Storage Finder” and the info bar (the one that displays the number of available and currently selected services and has the “scroll to” button) take up some space. Maybe I can remove them, although I’m worried that doing so might make the page feel more ambiguous. I might also see if it’s possible to increase the height of the question section while keeping the title and info bar by moving them to the right.
@th-blitz The data format between a Google Sheet and the current JSON data from Drupal is quite different, so there might be some concerns. Another question is, since Docusaurus doesn’t have a backend, when and where should it pull this data (during the build process, via a webhook, or on the client side). |
|
@kapuic we could maintain the contents in a simple JSON file, or as a csv file, whichever is easier to maintain and use it to update the site during build process ( i.e. make changes to the contents file and push it to github ). |
|
Thank you. It looks better. For the height, here are some suggestions.
I think a good height is 80% for the questions. <div class="mainContent_N9f3" style="height: 80vh;">
|
|
@kapuic the old site was originally imported from this repo, but it’s pretty much outdated. Unfortunately, we haven’t come across a more accessible alternative, and with limited expertise in webdev on our end to build a new one from scratch, we stuck with the old site. That said, it would be awesome to have a new site with a more structured and accessible layout. If you have any ideas or are up for a redesign to build a better one, we can go for it ! |
|
@remram44 @genericdata thanks for info. I made changes on the old site. Yes, Synchronous Access means "is the data sharable among different users ?", this part seems confusing so I think it should be changed. |
Update "Name" column to "title". From what I can tell with the code, we list the services within the JSON and work with that. Therefore, we're not required to have the JSON format that was downloaded from the original source. Is this correct @kapuic? I'm really pushing for a google sheet that service owners can edit. Once edited someone here downloads, converts to JSON, and commits to git. This is manual and I'm 100% fine with this. I can't create a branch here to test out a simple JSON I converted from the CSV @th-blitz wrote, so give me access to or please verify. |
|
Realized I can build locally rather than branch. I'll try to make a simple JSON that doesn't require code change. From there I'll work backwards to a CSV that I can convert to that JSON. |
|
This should work, "Datafinder Data Spreadsheet". A clean google sheet for users. We then have a second sheet that grabs the "clean" data into the expected pre-JSON CSV. |
This pull request introduces the Research Data Storage Finder page, enabling users to find and compare research data storage services quickly and efficiently. JSON files with hardcoded data for the storage finder have been added to the data directory.
Key Features:
To implement this page, several reusable components have also been added.
New UI Components:
DialogComponent: Provides modal dialogs with subcomponents for content, header, body, and footer.Location:
src/components/Dialog/index.tsxTooltipComponent: Displays tooltips on hover, including a disabled target variant.Location:
src/components/Tooltip/index.tsxSelectableButtonComponent: Acts as a radio button or checkbox for selection inputs.Location:
src/components/SelectableButton/index.tsxDependency Updates:
@radix-ui/react-dialog: Enables robust dialog/modal functionality.@radix-ui/react-tooltip: Supports flexible and accessible tooltip components.lucide-react: Provides a rich set of icons for enhanced UI.react-use: Adds useful hooks and utilities to simplify common React patterns.Additionally, this pull request adds
stylelint-config-rational-orderto sort CSS property declarations. It also enforces a globalscroll-padding-topand a defaultfont-familyon elements to ensure correct scrolling behavior and consistent styling for buttons and select elements.