Open RFSH opened 6 months ago
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:
Migration to RichTreeview:
RichTreeview
for our project needs, allowing us to manage complex tree structures more efficiently.Component Experimentation:
RichTreeview
is most suitable for our requirements.Common Component Implementation (chaise-treeview.tsx
):
chaise-treeview.tsx
include:expandDirection
prop.item slot
in RichTreeview
to style various tree configurations.TreeItem2
for all updates and customization moving forward.
Customization Capabilities:
Label
and itemID
, facilitating better interaction and data representation based on our specific data structure requirements.
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, andGridButton
.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.
Ensure Node.js is installed on your machine. I recommend installing it with nvm, allowing you to switch between different versions easily.
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":
Let's continue by cloning ermrestjs and deriva-webapps in this folder:
Our build process can be customized by defining environment variables. The following is how you should define them for this local installation:
Instead of
/absolute/path/to/isi/folder/
, you should use the actual absolute path to this folder.Use
echo
command to make sure these variables are correct, soThis should print the defined values.
Build ermrestjs:
If this step was successful, you should see a
dist
folder underermrestjs
folder.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.
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:Properly define
NODE_ENV
depending on whether you want to install in "development" mode or "production":Build the deriva-webapps app (it will build both matrix and treeview):
If this step was successful, you should see a
dist
folder underderiva-webapps
folder.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 parentisi
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:isi
folder in VS Code. I recommend creating a workspace based on this folder.isi
folder. Navigate toderiva-webapps/dist/react/matrix
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 toderiva-webapps/dist/react/treeview
Your current task is implementing the
chaise-treeview.tsx
. For now just change the implementation to use the MUI'sTreeView
and show a tree with some hard-coded values.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.