Use re-resizable for dataframe

[willhuang1997]

📚 Context

Integrate reresizable into the dataframe because safari, firefox, and chrome have different ui's and inconsistencies. Please describe the project or issue background here

• What kind of change does this PR introduce?

  • [x] Bugfix
  • [ ] Feature
  • [x] Refactoring
  • [ ] Other, please describe:

🧠 Description of Changes

Add state so that when we zoom out, we can reset it to the initial state integrate reresizable so that it only has the bottom right resizability and follows the StyledContainer Parent size as a child

• Add bullet points summarizing your changes here

  • [ ] This is a breaking API change
  • [x] This is a visible (user-facing) change

Revised:

Insert screenshot of your updated UI/code here

Current:

Insert screenshot of existing UI/code here

🧪 Testing Done

• [ ] Screenshots included
• [x] Added/Updated unit tests
• [ ] Added/Updated e2e tests

🌐 References

Does this depend on other work, documents, or tickets?

• Issue: Closes #XXXX

---

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

[lukasmasuch]

Hmm, the screenshot in the cypress test looks bit strange

[willhuang1997]

Hmm, the screenshot in the cypress test looks bit strange

@LukasMasuch is it I will work on these later tonight! Let me know if you need it sooner. I also am trying to get the multiselect code nits in.

Update: Found the problem and fixed it.

[lukasmasuch]

@willhuang1997 I think you can solve this add_rows problem also with a layout effect, e.g. (above the fullscreen layout effect):

  React.useLayoutEffect(() => {
    if (resizableRef.current) {
      // Reset the height if the number of rows changes (e.g. via add_rows)
      setResizableSize({
        width: resizableSize.width,
        height: initialHeight,
      })
    }
  }, [numRows])

The solution without layout effect might have some negative side effects.