Plotly refresh prevents me from doing certain actions

I'm currently developing an Angular app which displays customizable real-time charts. Basically we're fetching data from a database that get its data from a MQTT server.

To customize the chart, I added a little button which opens a PrimeNG modal, where you can change trace color (handled with a HTML color input) and the time range over which data is displayed.

The issue is that, since it's real time data, it get updated every seconds or so (this will be configurable as well), which has for now two disadvantages :

• the little toolbar at the top returns to default (if one select the drag tool, it returns to the zoom tool)
• the color picker on the modal is removed if it was clicked

This is the update function, which is called everytime the component receive a new data from the parent component :

private _dataGraph!: GraphLastDataTopicsDetailsModel[] | null;
@Input()
get iDataGraph(): GraphLastDataTopicsDetailsModel[] | null {
return this._dataGraph;
}
set iDataGraph(data: GraphLastDataTopicsDetailsModel[] | null) {
if (data) {
this._dataGraph = data;
this.fillData(data);
}
}
fillData(dataGraphReceived: GraphLastDataTopicsDetailsModel[]) {
// Get data with correct title
let dataReceived = dataGraphReceived.find(el => el.name === this._layout.title.text);

if (dataReceived) {

let newTraces: PlotlyDataModel[] = [];
let oldData: PlotlyDataModel[] = this._data;

for (let currentTopic of dataReceived.dataTopics) {
const dataTopicGraph = oldData.find(el => el.name === currentTopic.topic);
if (dataTopicGraph) {

let newX = [...dataTopicGraph.x, currentTopic.date];
let newY = [...dataTopicGraph.y, currentTopic.dataDouble];

// To do : create a different way of cleaning the array after x seconds
if (newX.length > this._maxValues) {
newX.shift();
}
if (newY.length > this._maxValues) {
newY.shift();
}
// Push the current values in the trace array
newTraces.push(
{
...dataTopicGraph,
x: newX,
y: newY,
}
);
}
else {
// On init (no data yet), we push the values as well as the trace's options
this.rgbStringToHex(this.colors[newTraces.length])
newTraces.push(
{
x: [currentTopic.date],
y: [currentTopic.dataDouble],
type: 'scatter',
name: currentTopic.topic,
marker: { color: this.colors[newTraces.length] },
line: { shape: 'spline' },
mode: 'lines+markers',
connectgaps: true,
showlegend: true,
}
);
}
}


This is the HTML part :

<plotly-plot class="w-full" [data]="_data" [layout]="_layout" [config]="{ scrollZoom: true, displaylogo: false }" />


This is how the data is updated :

serviceSubscribe(): void {
// Get all words for screen
this._subscription.add(
this._getLastDataTopic$.pipe(
concatMap(variables => {
return this.getLastDataTopicService.getLastDataTopic(variables);
}),
tap(data => {
if (data) {
this._data = data;
// this._intervalTest = this._intervalTest + 1000;
this.realTimeService.setIntervalDuration(this._intervalTest);
} else {
console.warn('No data received');
// TODO: Ajouter un message toast ici pour notifier l'utilisateur
}
})
).subscribe()
);

this._subscription.add(
this.realTimeService.getRealTimeData().subscribe((data) => {
this.realTimeData = data;
this._getLastDataTopic$.next([
{ name: "Chart n°1", topicsName: ['adress/equipment1/Process1/temp'] },
{ name: "Chart n°2", topicsName: ['adress/equipment1/Process1/pressure1', 'adress/equipment1/Process1/pressure2'] }
]);
}));
}


We had to fetch data this way because we've had some issues with components completely refreshing each time otherwise. I'd like to know if there's any solution to prevent this behavior (even if it only fixes the issue with the color picker it'd be amazing).

Continue reading...