Our flexible Kanban board for managing tasks with drag drop


Post by markus »

Problem description from our developer:

We use TaskBoard for showing cards of orders. For rendering of TaskBoard we use react components BryntumTaskBoardProjectModel and BryntumTaskBoard.

 <>
            <BryntumTaskBoardProjectModel
                ref={projectRef}
                tasks={orders.map(cardToTask)}
            />
            <BryntumTaskBoard
                ref={taskBoardRef}
                project={projectRef}
                {...locationsBoardConfig}
                showCollapseInHeader={false}
            />
        </>. 

In the TaskBoard configuration, we have a method taskRenderer which renders card's view (in this method we use taskRecord.get for getting card's fields) and also we use TaskBoard with virtualization. For defining the column of a card we use one of the order fields (status).

All order data stored in the application's store (Zustand).

Also, we have a function called by timer which updates data of orders in the store. After updating of the store the application updates the properties of components, including TaskBoard, are updated.
We have a problem: when we receive data from a server which differs from the current TaskBoard's data, sometimes we see empty white card instead card of changed order.

We checked all path of data from store to TaskBoard and we see that property tasks of BryntumTaskBoardProjectModel is changed with new data, but also we see that method taskRenderer called less times than quantity of orders we have and this method is not called for an order changed on the backend

This situation repeats in 20% of store updates, sometimes all is ok and card moved in the column according order's status, sometimes card moved but we see only white square instead card, sometimes card updated with new status but without moving to the target column.


Post by tasnim »

Hi,

How can we reproduce it? Would it be possible to share a runnable test case with us where we can reproduce the issue and debug it?

Best regards,
Tasnim


Post by markus »

That's quite difficult, because it's embedded in our application...


Post by tasnim »

Any chance you can make a runnable test case maybe on top of our React Taskboard demo and attach it here?
So we can replicate/debug it?


Post by markus »

We'll try...


Post by markus »

Maybe in the meantime: do you have a React/TS example that uses an external store?


Post by tasnim »

Hi,

Sorry, not sure what you mean by an external store? Could you please explain in a bit more detail about it?


Post by markus »

Hi,

By the way, we use virtualization.

Well - we use a separate store (Zustand) to fetch the backend data. With those data, we build the task configurations and provide them to the TaskBoardProject (bascially upon each render).

That works well for initially filling the taskboard and also when we update certain attributes: for example one that decides in which column the tasks shall appear. Sometimes the tasks moves to the correct column, sometimes it doesn't.

We're wonderung, if we're missing something, especially when it comes to updating data for the tasks.

Therefore my question.


Post by mats »

Would you be able to provide us a small test case so we can run this locally to debug?


Post by markus »

We will try to do that, however we have to build a test case with the configuration we use, which takes some time...


Post Reply