React integration: multiple controlled grids issues

[dprokop]

Hi, I've been struggling a lot trying to get multiple controlled grids working with React. At Grafana we are exploring alternatives to react-grid-layour and gridstack seems interesting.

I've created this demo that sort of solves the issue dprokop#1, but it feels like it's hacky.

A couple of questions from my side:

1. Is there a way to tell gridstack not to create "phantom" element, when grid item is dropped from one grid to another? I've solved it by identifying the grid items by <gridId>:<itemId> and removing the phantom one manually by using the removeWidget method.
2. The removeAll in the batch update in react demo that you provide triggers the removed event on the grid. It makes it impossible to change the state of the grid from which the item is removed. Basically what I want to do is to remove item from the state when it's moved from one grid to another, and then re-initialize gridstack. To achieve that in my demo I'm relying on a silent removeWidget call again: https://github.com/dprokop/gridstack.js/pull/1/files#diff-857613860ab6ab3d2b25db0b15493cce1fb0fcf3a188fdf199ed129b1d6e6965R86 . The demo when performed on code sandbox throws a React error related to the underlying dom being modified by gridstack (basically widget dom element is removed and React goes funky with it). Interestingly enough the demo does not suffer from this when run locally (try https://github.com/dprokop/gridstack.js/tree/dprokop/multi-grid-react)
3. When moving items from one grid to another at some point the grid container starts growing in a weird way - can you provide some insights on why this may be happening? I went through the code but couldn't figure this out yet. The phenomenon is visible on the attached video of my demo. Looking into the generated html it seems like gs-current-row is being increased with every interaction.

Screen.Recording.2022-11-03.at.14.37.38.mov

4. Do you have any suggestions on how to reliably destroy gridstack instances when react component is unmounted? I've tried to do it the legitimate react way (via useEffect return callback) but unfortunately, this is basically breaking gridstack all together with the follwing error:

gridstack.ts:1240 Uncaught TypeError: Cannot set properties of undefined (setting 'removedNodes')
    at a._triggerRemoveEvent (gridstack.ts:1240:19)
    at dd-gridstack.ts:339:15
    at Object.drop (dd-gridstack.ts:134:9)
    at l.triggerEvent (dd-base-impl.ts:40:34)
    at l.drop (dd-droppable.ts:146:10)
    at l._mouseUp (dd-draggable.ts:245:31)
_triggerRemoveEvent @ gridstack.ts:1240
(anonymous) @ dd-gridstack.ts:339
(anonymous) @ dd-gridstack.ts:134
triggerEvent @ dd-base-impl.ts:40
drop @ dd-droppable.ts:146
_mouseUp @ dd-draggable.ts:245
dd-gridstack.ts:598 Uncaught TypeError: Cannot read properties of undefined (reading 'removeNode')
    at o.GridStack._leave (dd-gridstack.ts:598:15)
    at dd-gridstack.ts:257:19
    at Object.dropover (dd-gridstack.ts:134:9)
    at l.triggerEvent (dd-base-impl.ts:40:34)
    at l._mouseEnter (dd-droppable.ts:104:10)

Steps to reproduce

Partially working demo: https://codesandbox.io/s/blazing-browser-6dqptj?file=/src/App.js
You can also run https://github.com/dprokop/gridstack.js/tree/dprokop/multi-grid-react which even though is the same as above, it works better ;)

I would appreciate any help from your side!

[Meierschlumpf]

Same problem here!

[adumesny]

whoa, that is a lot of questions - I don't use React, but have no issue using my Angular wrapper (which is not open sourced) and different from the examples provided. I create Component wrapper around grid and gridItem and dynamically create items on the fly (don't read static or ngFor dom created items).

For # 4 are the dom elements (grid or item ?) gone and you need to clear the grid ? if the elements gone there is nothing to do (any event handlers should be gone and not trigger)

For debugging I recommend you use the source code and modify webpack config to get fuller debug info and run a local copy - then you can step through the TS source code and see it all - my code is pretty well documented. good luck.

[adumesny]

with that said I would love for Graphana to use this lib instead - so let's figure how to make it work. I just need to be educated about React and how to make the lib work in that framework. There are many ways to use it virtual dom frameworks, and even with Angular there are some more straightforward ways than others...

[adumesny]

@dprokop FYI, I spent the last 4 days getting a really good solid Angular wrapper for Gridstack (and released v7.1.2 with required fixes) which may help here https://github.com/gridstack/gridstack.js/tree/master/demo/angular/src/app, and last night fixing a bunch of Vuejs demos (which is new to me). Would love to get good React examples and Grafana to use GS.

Are you still interested in this ? I had some ttime during the xmas break, otherwise work is really busy. You can slack or email me. thanks

[adumesny]

Oh, I'm seeing this

const gridRef = useRef()
gridRef.current = GridStack.init()

which breaks gridstack very badly in the Vuejs case - maybe same issue here ? see #2115 (comment)

maybe need let grid = GridStack.init() instead ?
I'm pulling your code and checking it out...

Update: nevermind, that doesn't seem to use proxy/copies unlike Vuejs.

[adumesny]

fixeds part of the demo @dprokop sent out, but running into a React issue I'm not familiar with...

• ultimately this is NOT the way to do things (added comment), and will concentrate on a good Angular complex demo instead... already spent 1.5d on this!

[fredericrous]

@adumesny in React, the setter from useState can take a function as an argument. the first argument passed to this function is the current value of useState

setItems2(items2.filter(i => i.id !== id))

can be transformed to

setItems2(items => items.filter(i => i.id !== id))

if I do this for addItem and removeItem for both ControlledStack, it solves your issue. However this unveils another issue: once the item appears in the other grid, it loses its ability to be moved and resized. hopped that helps

[adumesny]

@fredericrous thanks, this actually works for me now - maybe not using latest lib ? I recall having to make GS fixes but I tought I published them all...

UPDATE: found I forgot to push last week partial fix. all good now.

I'll update the demo. Still not the right way to do this as re-creating widgets (and especially all their real content and state that might get lost) is dumb... will focus on what I do in Angular as good example, but I don't use React | Vuejs

20230107_083030.mp4