Flickering slider saveId bug

[abrman]

The flickering: https://codesandbox.io/s/react-resizable-panels-forked-r68rvr?file=/src/App.js

I've just spent over an hour trying to pinpoint why my sliders were flickering.
Long story short, I had the slider state saved in the local storage with the following content:

{"1:10":[20],"1:10,1:10":[10,30],"1:10,2:10":[16.461173681090695,23.538826318909305],"1:10,2:10,3:10":[18.993775933609953,31.006224066390047,10],"1:10,3:10":[10,30],"1:100,2:10,3:10":[10,40,10],"1:5,2:10,3:10":[10,40,10],"10,10":[16.611570247933884,23.388429752066116],"10,10,10":[0,66.66666666666667,33.333333333333336],"0,10,10":[0,61.74632352941176,38.25367647058824]}"

Deleting the local storage entry fixed my problem.

I don't know how it became broken - I worked off of the codesandbox example so occasionally I had three panels, maybe 4 at most. I'm not sure exactly what the JSON means, but I'm dropping the content of it in here hoping someone will understand what happened, and will help avoid the bug from occurring again. (Not sure whether it's exclusive to development or can also occur in production)

[bvaughn]

If you figure out the cause, or a repro, let me know.

[abrman]

From: #47 (comment)

You should be able to accomplish this using minSize/maxSize and a min/max external height/width though!

I wasn't sure what you meant with min/max external height/width and ran into the bug gain.
I suppose this is how you reproduce it: https://codesandbox.io/s/react-resizable-panels-forked-d8eqci?file=/src/App.js

Would you be willing to explain more of how you'd go about achieving min/max limits?

[abrman]

I suppose I triggered the bug previously with setting max-width on one of the panels previously. It behaves similarly to the beforementioned sandbox link.

[bvaughn]

Ah, right. I don't think I'd consider that a bug in this library (or something I'd try to fix). It's just kind of an invalid configuration.

[bvaughn]

Would you be willing to explain more of how you'd go about achieving min/max limits?

If you want to set min/max sizes in pixels and you control the overall width and height of the panel group, then you can do the conversion to whatever the min/max percentage would be.

In other words, if you wanted to make sure a panel couldn't shrink below 100px wide, and you know the panel group was 1,000 pixels wide, then you'd need to set minSize={10}

[bvaughn]

Here is an example of what I mean:
https://codesandbox.io/s/react-resizable-panels-forked-m5qf69?file=/src/App.js

  const MIN_SIZE_IN_PIXELS = 100;

  const [minSize, setMinSize] = useState(10);

  useLayoutEffect(() => {
    const panelGroup = document.querySelector('[data-panel-group-id="group"]');
    const resizeHandles = document.querySelectorAll(
      "[data-panel-resize-handle-id]"
    );
    const observer = new ResizeObserver(() => {
      let height = panelGroup.offsetHeight;

      resizeHandles.forEach((resizeHandle) => {
        height -= resizeHandle.offsetHeight;
      });

      // Minimum size in pixels is a percentage of the PanelGroup's height,
      // less the (fixed) height of the resize handles.
      setMinSize((MIN_SIZE_IN_PIXELS / height) * 100);
    });
    observer.observe(panelGroup);
    resizeHandles.forEach((resizeHandle) => {
      observer.observe(resizeHandle);
    });

    return () => {
      observer.disconnect();
    };
  }, []);

[bvaughn]

If the available height is ever too small to actually allow that scenario to work– you can decide what to do, but I don't think there's anything PanelGroup could do, since its size is managed externally.

[bvaughn]

I'm going to close this issue because I think it's probably caused by an invalid CSS properties situation but if you see it again let me know and we'll re-open!

[abrman]

Yup - definitely seemed like a invalid configuration. I just tried <Panel style={{maxHeight: 100}}/> which I know I tried before to achieve desired behavior. It does produce similar behavior to the buggy one, but doesn't seem to break it. I don't know what I did to break it earlier.

You were quick with your solution - I was thinking something more along the lines of keeping the window innerWidth in a state (assuming horizontal layout). Update it whenever window size changes, and feed it to Panel props as follows: <Panel minSize={(MIN_SIZE_IN_PIXELS/width)*100} maxSize={(MAX_SIZE_IN_PIXELS/width)*100}/>

ResizeObserver is something new to me. I'm confident it would likely be more performant, however when user resizes the window, it allows the size to go outside of the constraints.

Thank you for your assistance. I'll give it a try and see what I come up with :)

[bvaughn]

Yup! 🙇🏼 Good luck!