Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Treeview migration | Implemeting the page skeleton #212

Open
6 of 18 tasks
RFSH opened this issue Apr 10, 2024 · 1 comment
Open
6 of 18 tasks

Treeview migration | Implemeting the page skeleton #212

RFSH opened this issue Apr 10, 2024 · 1 comment
Labels
help wanted Extra attention is needed treeview

Comments

@RFSH
Copy link
Member

RFSH commented Apr 10, 2024

In the existing React-jQuery hybrid treeview component I just copied the HTML template that we used to have in the jQuery app.

In this task we want to implement the page in React. The focus of this step is just the HTML structure, and we will use static values. Later, these values will be fetched based on the database. So,

  1. Under the src/components/treeview/ folder, I've created a new treeview-container.tsx, which is where you'll focus. You should add all your SCSS styles to src/assets/scss/_treeview-app.scss.

  2. All our apps follow the same top-panel, bottom-panel, etc. structure I've added in this component. For example take a look at our recordset app. You aim to implement the parts I've added TODO.

  3. You should start by changing the "content" to show a tree structure similar to what you see on the actual treeview app.

    • Just use some static data for it.
    • For some nodes, add the icons that you see in this mode to demonstrate that you can achieve this.
    • The "camera" icon opens up a modal. You should have at least one node with this feature. We're using react-bootstrap in our apps, and you can see how modals work here.
  4. The next step is "header":

    • For the dropdown selector, use the src/components/plot/dropdown-select.tsx. You can see how it works on this violin plot.
    • For the search input use the chaise's SearchInput (import SearchInput from '@isrd-isi-edu/chaise/src/components/search-input'). You can see how it's used in the recordset component. Search functionality should work similarly to the jQuery version.
    • For buttons, make sure to use chaise-btn chaise-btn-secondary class so they look similar to chaise buttons. The buttons in the current Treeview app are not aligned with the rest of the chaise and we should fix that.
  5. For the side panel, instead of just implementing the content, you should replace it with SplitView like you see on the recordset component.

In the following you can find the summary of tasks:

  • Display a treeview with hardcoded production data.
    • Show ChaiseSpinner while waiting for tree to load. This spinner will be used for indicating that a change is going to happen to the displayed data (so initial load, search, changing the tree selector option, expand/collapse).
    • It should handle duplicate label names.
    • The lines should be properly aligned.
    • Last child shouldn't have any extra line if possible.
  • Search functionality
    • Show the spinner while loading.
    • On failure it should show an alert below the header indicating what went wrong.
    • On success:
      • Scroll to the first match
      • Highlight and expand all matches
      • We should set a limit on this if it's causing performance issues (so for example if it matches >100 rows we show only 100 highlights and show an alert that we're only showing first 100).
  • Expand/Collapse
    • Show the spinner while loading.
    • The existing button is useless at it freezes the app. Is that still an issue on React? If it is, can we do it in batches?
  • Tree selector.
    • Use the DropdownSelect component (example).
    • Hardcode the options for now and have tree options:
      • All stages: Use the biggest tree that the app can handle without any performance issues.
      • Default: Use the default tree data that I've shared with you.
      • Default with focus: Same as before, but some items should be bolded and automatically scroll to the first one (mimicking this one)

Useful links:

  • This branch includes the changes that we've made so far for this issue.
  • In this wiki page we've summarized the code details and parts of the code that we decided to not push but might be useful.
@RFSH RFSH added the treeview label Apr 10, 2024
@RFSH RFSH added the help wanted Extra attention is needed label Apr 10, 2024
@sakshisingh0598

This comment was marked as outdated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed treeview
Projects
None yet
Development

No branches or pull requests

2 participants