Treeview migration | Implemeting the page skeleton

[RFSH]

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.

[sakshisingh0598]

Eventual goal -> Implement a similar search functionality for the 2d matrix ( every deep tree should have the following search capabilities )

1. Highlight all matching strings
2. Scroll to the first occurrence of the match
3. Expand and show all the matches

3rd point all functionalities are implemented - 10th July