Bug: Tasks loaded from Firebase are not editable, draggable, or linkable

SonaBIMSandroDASILVA

Hi there! 👋
I'm experiencing an issue using the <Gantt /> component from wx-react-gantt.

🔧 Context
I'm building a React application where tasks are dynamically loaded from Firebase. The raw data structure looks like this:

{
id: "1740388072996",
name: "Test Group",
startDate: "2025-02-25T00:00:00.000Z",
endDate: "2025-02-26T00:00:00.000Z",
color: "#ff80c0",
description: "<p>...</p>",
selectionSets: ["group:Default_Id"]
}
I then convert it into the required Gantt format with the following code:

const tasks = phases.map((phase) => ({
id: phase.id,
text: phase.name,
start: new Date(phase.startDate),
end: new Date(phase.endDate),
type: "task",
progress: 0,
parent: 0,
color: phase.color,
draggable: true,
editable: true,
}));
❌ The Problem
While the tasks appear correctly in the Gantt chart:

I cannot drag or move them

I cannot create links between them

They seem to be read-only

👉 However, if I create a new task manually using the built-in editor (show-editor intercepted with api.intercept()), everything works fine: I can move and link those tasks.

✅ Things I’ve Tried
Adding editable: true to each task → no effect

Comparing Firebase tasks vs. manually created ones → same structure

💡 Question
Is there any required flag or transformation I need to apply to make tasks loaded from an external source (like Firebase) fully interactive (draggable, editable, linkable) like the ones created through the editor?

Thanks a lot in advance! 🙏

PS : There is my full code :
import React, { useRef, useEffect, useState } from 'react';
import { Gantt, Willow } from 'wx-react-gantt';
import "wx-react-gantt/dist/gantt.css";

const MyGanttComponent = ({ setShowOffcanvas, setNewPhase, setIsEditing, data }) => {
const apiRef = useRef();

useEffect(() => {
if (apiRef.current) {
apiRef.current.intercept("show-editor", (data) => {
setNewPhase({
name: data.text "",
selectionSets: [],
startDate: data.start new Date(),
endDate: data.end new Date(),
description: "",
color: data.color "#cccccc",
});
setIsEditing(true);
setShowOffcanvas(true);
return false;
});
}
}, [apiRef.current]);

return (
<Willow>
<div className="menuContainer">
<Gantt
init={(api) => (apiRef.current = api)}
tasks={data.tasks}
links={data.links}
scales={data.scales}
/>
</div>
</Willow>
);
};

const generateGanttData = () => {
const tasks = phases.map((phase) => ({
id: phase.id,
text: phase.name,
start: new Date(phase.startDate),
end: new Date(phase.endDate),
type: "task",
progress: 0,
parent: 0,
color: phase.color,
draggable: true,
editable: true,
}));

const scales = [
  { unit: "month", step: 1, format: "MMMM yyyy" },
  { unit: "week", step: 1, format: "'Semaine' w" },
];
  
return { tasks, scales };

};

    <link rel="stylesheet" href="https://cdn.svar.dev/fonts/wxi/wx-icons.css" />
  </Willow>
  </div>

tasha

Hello SonaBIMSandroDASILVA

Could you clarify how do you load the data from your external source?

The best practice of working with the server and loading data from external source is to use the RestDataProvider service.
To connect RestDataProvider to your backend, you need to import the RestDataProvider component from wx-gantt-data-provider, and then create an instance by providing the path to your server this way:

const url = 'https://master--svar-gantt-go--dev.webix.io';
const restProvider = new RestDataProvider(url);

To load the external data use getData() of RestDataProvider:

useEffect(() => {
    restProvider.getData().then(({ tasks: t, links: l }) => {
      //convert tasks into the required Gantt format here
      setAllTasks(t);
      setLinks(l);
    });
  }, []);

And also don't forget to include RestDataProvider into the Event Bus order via the api.setNext() method to send the corresponding requests to the server:

const init = (api) => {
    api.setNext(restProvider);
  };

If you need to send an arbitrary request you can use the send() method of the RestDataProvider where you can pass the parameters object manually:
restProvider.send(customEndpoint, "PUT", params).then(data => {});

Also please note when using RestDataProvider you dont't need to change tasks ids to the Firebase ids because RestDataProvider stores the corresponding server and client ID pairs and the subsequent requests to the server will be sent using the definitive ID returned by the server.

Please take a look at the example and try to apply RestDataProvider for tasks loading: https://stackblitz.com/edit/vitejs-vite-du4nzvyk?file=src%2FApp.jsx,src%2FGanttComponent.jsx