Create a tree split widget

[CarolineDenis]

Fixes #3600

[maxpatiiuk]

looking good for the most part. I will do a deeper review when you say it's ready

[CarolineDenis]

Split-scroll-open.mov

Edit_1.mov

Edit2.mov

[grantfitzsimmons]

👍

[maxpatiiuk]

all good!

[grantfitzsimmons]

On narrow screens, the slider is made incredibly small

Screen.Recording.2023-09-29.at.10.31.21.PM.mov

[maxpatiiuk]

should it fallback to horizontal on narrow screens? or hide the split view?

[grantfitzsimmons]

@maxpatiiuk Split view should probably not be supported on narrow screens. Horizontal would be fine!

[CarolineDenis]

@maxpatiiuk , do you have a better solution than the magic number '670' for narrow screen checker to disable split option?

[CarolineDenis]

Screen.Recording.2023-10-02.at.8.59.26.AM.mov

Screen.Recording.2023-10-02.at.8.58.55.AM.mov

[maxpatiiuk]

@CarolineDenis (optional) you can define the threathhold in rem instead of px if you want

( in specifyweb/frontend/js_src/lib/components/Atoms/index.tsx there is a variable called oneRem which corresponds to 1rem in CSS)

though the value of 640px is good too since it matches the threthhold value in tailwind

[grantfitzsimmons]

👍

[maxpatiiuk]

The changes you made look good, but I noticed one new problem (sorry for being late):

Your useEffect listen for screen width change, and in response to that the canSplit variable may get changed.

The problem is that the screen width may change a lot (imagine you are resizing the window), thus leading to the screenWidth state changing a lot, thus leading to a lot of re-renders, thus bad performance (or at least inefficient). And yet, it may be that despite all those changes to screenWith, the value of canSplit will still remain the same, thus all of those re-renders were useless.

So to optimize your code, instead of having screenWidth state, have a canSplit state, and set that state to true or false inside of useEffect in response to resize

Basically, the logic is the same, but by having canSplit be your state instead of screenWidth, you avoid all the useless re-renders of the component, as the component would only get updated on screen change only when canSplit changes

Fixed :)