Search code examples
reactjsnext.jsmaterial-uiplotly-pythonplotly.js

Firefox Plotly plot gets smaller every time it is redrawn. console.trace() WARN: Too many auto-margin redraws

I have a Plotly problem where the plot gets about 10% smaller each time it is redrawn which can happen anytime a user chooses to click the plot generation button or if they update the input data and generate a new plot.

The project is in Next.js v13.5.6, React v18.2.0, react-plotly.js v2.6.0 and this is happening in Firefox v120.0.1 on Linux, Windows, Mac, and on older versions of Google Chrome (v87.0.4280). However Chrome v120.0.6099 does not have this issue.

Right now, the plot is generated via Plotly.py, converted to JSON, and sent to the frontend which displays it inside a react-plotly.js Plot component which is itself in a MUI v5 tab component.

This composite image shows the sizing getting smaller each time the plot generator is clicked: enter image description here

And here is the code to plot the object:

'use client';
import React, { useState, useEffect, useCallback } from 'react';
import dynamic from 'next/dynamic';

import { PlotData, Layout } from 'plotly.js';
// TODO: Plotly and NextJS don't place nice,
// TODO: so run a dynamic import which takes a couple seconds to load
const Plot = dynamic(() => import('react-plotly.js'), { ssr: false });
import { BARE_PLOT_LAYOUT, PLOT_CONFIG } from '../utils/plotUtils';



export default function SummaryPlot() {
  const [plotData, setPlotData] = useState<PlotData[]>([]);
  const [plotLayout, setPlotLayout] =
    useState<Partial<Layout>>(BARE_PLOT_LAYOUT);

  //Implementation details {
  ...
  }


  return (
    <>
      <Plot
        data={plotData}
        layout={plotLayout}
        config={PLOT_CONFIG}
        useResizeHandler={true}
        style={{ width: '100%', height: '100%' }}
      />
    </>
  );
}

And it produces this error message:

console.trace() WARN: Too many auto-margin redraws. 5 plotly.js:27692
    warn plotly.js:27692
    doAutoMargin plotly.js:57862
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    syncOrAsync plotly.js:26542
    react plotly.js:34002
    p factory.js:89
Solution

  • I've found the solution via the frontend. The backend sends the plotly object which includes 2 properties called data and layout. Nested deep inside layout is a property called xaxis and yaxis which contain a property called automargin. The default for automargin is 'true' and it is causing the recursive auto-margining.

    In the photo below I've highlighted the automargin field that I changed from the default 'true' value to 'false'.

    enter image description here

    The backend solution is simply to set automargin to false and not use the default value.