Treeview migration | creating the treeview component

[RFSH]

We have a "treeview" app that uses jQuery and jsTree to show a tree structure. You can access the app here, and here you can see the jQuery code for the app. We're currently directly using this jQuery code in a React warpper.

The matrix app is currently directly using the MUI treeview component as you can see in RowTreeHeaders, ColumnTreeHeaders, and GridButton.

We currently don't have tree-like data to support the matrix on any of the deployments, so I cannot provide a linked example to you. In the following, I'll go over how you can install deriva-webapps locally and look at the matrix app using some fake data.

1. Ensure Node.js is installed on your machine. I recommend installing it with nvm, allowing you to switch between different versions easily.

2. You need to create a parent folder that, in the end, we can serve. All the repositories you will clone must have the same parent folder and are siblings. In this example, I'm creating a folder called "isi":

   mkdir isi
   cd isi

3. Let's continue by cloning ermrestjs and deriva-webapps in this folder:

   git clone [email protected]:informatics-isi-edu/ermrestjs.git
   git clone [email protected]:informatics-isi-edu/deriva-webapps.git

4. Our build process can be customized by defining environment variables. The following is how you should define them for this local installation:

export WEB_URL_ROOT=/
export WEBAPPS_REL_PATH=deriva-webapps/dist/react/
export ERMRESTJS_REL_PATH=ermrestjs/dist/
export WEB_INSTALL_ROOT=/absolute/path/to/isi/folder/
export CHAISE_REL_PATH=chaise/

Instead of /absolute/path/to/isi/folder/, you should use the actual absolute path to this folder.

5. Use echo command to make sure these variables are correct, so

   echo $WEB_URL_ROOT
   echo $WEB_INSTALL_ROOT
   echo $ERMRESTJS_REL_PATH
   echo $CHAISE_REL_PATH

   This should print the defined values.

6. Build ermrestjs:

    cd ermrestjs
    make dist

   If this step was successful, you should see a dist folder under ermrestjs folder.

7. The previous steps are only needed for the initial setup, and you don't need to repeat them when implementing deriva-webapps features. So now let's go to the deriva-webapps folder and switch to the proper branch. In this branch, I made the initial changes to make the matrix and treeview apps work locally.

   cd ../deriva-webapps
   git checkout treeview-react

8. While you can build deriva-webapps with the same make dist command as ermrestjs, it will always reinstall npm packages. While developing features, I would like to skip this step. That's why I directly install the dependencies and then use an alternative command to skip the reinstallation of npm packages. So run the following to install all the Chaise dependencies:

   make npm-install-all-modules

9. Properly define NODE_ENV depending on whether you want to install in "development" mode or "production":

   export NODE_ENV="production"

   • Use "production" mode by default. Use "development" mode only when you want to debug.
   • If this environment variable is not defined, it will default to "production" mode.
   • The matrix app example is very heavy. So make sure you're using production mode; otherwise, it would be slow.

10. Build the deriva-webapps app (it will build both matrix and treeview):

    make dist-wo-deps

    If this step was successful, you should see a dist folder under deriva-webapps folder.

11. You can now access the matrix app by opening the deriva-webapps/dist/react/matrix/index.html file in a browser. But this will give you a CORS error while fetching the data. To solve this, you need to serve the parent isi folder we created using some server plugin. The simplest way to achieve this is using the Live Server extension of VS code. I highly recommend using VSCode for development in general. For this, follow the following steps:

    1. Install VS Code.
    2. Install Live server extension
    3. Open the isi folder in VS Code. I recommend creating a workspace based on this folder.
    4. You will see a "Go Live" button on the bottom right of VS Code. Click on it.
    5. It will open a browser and shows the content of isi folder. Navigate to deriva-webapps/dist/react/matrix
    6. You should see the matrix app properly loaded.

12. In this branch, I also included the treeview skeleton. If you followed the previous step, you can also access this treeview skeleton by opening the deriva-webapps/dist/react/treeview/index.html file in a browser. Or if you used Live server extension, navigate to deriva-webapps/dist/react/treeview

13. Your current task is implementing the chaise-treeview.tsx. For now just change the implementation to use the MUI's TreeView and show a tree with some hard-coded values.

14. If you make any changes to your local deriva-webapps, you just need to run make dist-wo-deps and that should create the new bundles for you.

[sakshisingh0598]

Issue Update

Overview

We have successfully completed the migration of our component from Treeview to RichTreeview as supported by MUI. This update brings more flexibility and functionality to our tree structure implementations. Below are the details of the tasks completed:

Completed Tasks

• Migration to RichTreeview:

  • Adopted RichTreeview for our project needs, allowing us to manage complex tree structures more efficiently.
  • Reference: RichTreeview Migration Guide

• Component Experimentation:

  • Evaluated various tree view components and concluded that RichTreeview is most suitable for our requirements.
  • Allows sending the entire tree structure as a prop.
  • API Reference: RichTreeview API

• Common Component Implementation (chaise-treeview.tsx):

  • Developed a reusable component that can dynamically display tree structures.
  • Features of the chaise-treeview.tsx include:
    • Expandable Nodes: Nodes can expand to the top, left, or right based on the expandDirection prop.
    • Customizable Nodes: Node customization is enhanced, targeting internal elements for style adjustments.
    • Slot Assignment: Nodes are assigned types through the item slot in RichTreeview to style various tree configurations.
    • Future Proofing: Utilizes TreeItem2 for all updates and customization moving forward.
      • Reference: TreeItem2 Documentation

• Customization Capabilities:

  • Enhanced node identification using properties such as Label and itemID, facilitating better interaction and data representation based on our specific data structure requirements.