Memory leaks with continue updated input data #270

shenenya · 2019-11-16T08:38:32Z

These is memory leaks with vega-embed. For example, with following example, by clicking button update. The memory used keeps increasing. Is there any way to solve it? Thanks.

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.0.0-beta.2"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@5"></script>
</head>

<body>
  <div id="vis"></div>

  <script>
    const spec1 = {
      $schema: "https://vega.github.io/schema/vega-lite/v3.json",
      description: "A simple bar chart with embedded data.",
      width: 360,
      data: {
        values: [
          { a: "A", b: 28 },
          { a: "B", b: 55 },
          { a: "C", b: 43 },
          { a: "D", b: 91 },
          { a: "E", b: 81 },
          { a: "F", b: 53 },
          { a: "G", b: 19 },
          { a: "H", b: 87 },
          { a: "I", b: 52 }
        ]
      },
      mark: "bar",
      encoding: {
        x: { field: "a", type: "ordinal" },
        y: { field: "b", type: "quantitative" },
        tooltip: { field: "b", type: "quantitative" }
      }
    };
    const spec2 = {
      $schema: "https://vega.github.io/schema/vega-lite/v3.json",
      description: "A simple bar chart with embedded data.",
      width: 500,
      data: {
        values: [
          { a: "A", b: 33 },
          { a: "B", b: 32 },
          { a: "C", b: 16 },
          { a: "D", b: 28 },
          { a: "E", b: 35 },
          { a: "F", b: 81 },
          { a: "G", b: 90 },
          { a: "H", b: 10 },
          { a: "I", b: 5 }
        ]
      },
      mark: "bar",
      encoding: {
        x: { field: "a", type: "ordinal" },
        y: { field: "b", type: "quantitative" },
        tooltip: { field: "b", type: "quantitative" }
      }
    };
    let spec = spec1;
    function myFunction() {
      setInterval(function() {
        if (spec === spec1) spec = spec2;
        else spec = spec1;

        vegaEmbed("#vis", spec)
          .then()
          .catch(console.warn);
      }, 1000);
    }
  </script>

  <button onclick="myFunction()">Update</button>
</body>

domoritz · 2019-11-17T03:26:38Z

In order to free resources when they are not needed anymore, you need to call view.finalize. Here is the updated code for your example

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.0.0-beta.2"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@5"></script>
</head>

<body>
  <div id="vis"></div>

  <script>
    const spec1 = {
      $schema: "https://vega.github.io/schema/vega-lite/v4.json",
      width: 360,
      data: {
        values: [
          { a: "A", b: 28 },
          { a: "B", b: 55 },
          { a: "C", b: 43 },
          { a: "D", b: 91 },
          { a: "E", b: 81 },
          { a: "F", b: 53 },
          { a: "G", b: 19 },
          { a: "H", b: 87 },
          { a: "I", b: 52 }
        ]
      },
      mark: "bar",
      encoding: {
        x: { field: "a", type: "ordinal" },
        y: { field: "b", type: "quantitative" },
        tooltip: { field: "b", type: "quantitative" }
      }
    };
    const spec2 = {
      $schema: "https://vega.github.io/schema/vega-lite/v4.json",
      description: "A simple bar chart with embedded data.",
      width: 500,
      data: {
        values: [
          { a: "A", b: 33 },
          { a: "B", b: 32 },
          { a: "C", b: 16 },
          { a: "D", b: 28 },
          { a: "E", b: 35 },
          { a: "F", b: 81 },
          { a: "G", b: 90 },
          { a: "H", b: 10 },
          { a: "I", b: 5 }
        ]
      },
      mark: "bar",
      encoding: {
        x: { field: "a", type: "ordinal" },
        y: { field: "b", type: "quantitative" },
        tooltip: { field: "b", type: "quantitative" }
      }
    };
    let spec = spec1;
    let view;

    function myFunction() {
      setInterval(function() {
        if (spec === spec1) spec = spec2;
        else spec = spec1;
        
        if (view) {
           view.finalize();
        }

        vegaEmbed("#vis", spec)
          .then(function(result) {
          // save view so we can finalize it
          	view = result.view;
        	})
          .catch(console.warn);
      }, 1000);
    }
  </script>

  <button onclick="myFunction()">Update</button>
</body>

Try it at https://blockbuilder.org/domoritz/cfdc1c68553a7b942ad3055a63995dd3.

domoritz · 2019-11-17T03:27:30Z

The cleaner (and faster) solution is to use the view API instead. I'll leave this as an exercise for the reader ;-)

https://vega.github.io/vega/docs/api/view/

shenenya · 2019-11-17T08:03:20Z

Thanks. How I get it done with react-vega?

shenenya · 2019-11-17T08:10:42Z

I tried the updated code. But the memory is still increasing.

domoritz · 2019-11-17T08:11:45Z

How are you tracking memory usage? can you use the browser memory debugger? It should also show who is holding on to memory.

shenenya · 2019-11-17T08:21:51Z

I only open one tab in chrome, that runs the example above. Do not do anything else with the chrome. Keep looking at the process named "Google Chrome Helper (GPU)". It is found that it keeps increasing, from hundreds MB to several GBs.

domoritz · 2019-11-17T08:28:18Z

Can you find out what's holding on to the memory?

shenenya · 2019-11-17T08:33:08Z

I debug the problem with Chrome Task Manager. I found the memory used by the tab keep increasing slowly. But the task named "GPU Process" keeps increasing markedly.

shenenya · 2019-11-17T08:35:00Z

The chrome performance looks as follows:

domoritz · 2019-11-17T08:35:58Z

The listeners should get deleted on finalize but somehow the number keeps increasing. I have to dig more into this tomorrow.

shenenya · 2019-11-17T08:37:12Z

Thanks.

shenenya · 2019-11-18T10:19:38Z

Do you find why the memory leaks happen?

domoritz · 2019-11-19T05:54:25Z

No, I didn't have time to look yet.

shenenya · 2019-11-25T03:02:52Z

Is there someone still take care of this problem? I believe it is an important problem for practical usage of vega-embed and related vega, vega-lite. I would like to help. Would anyone give some tip for how to debug and challenge this problem? Thanks.

domoritz · 2019-11-26T02:29:28Z

I've been swamped with other requests but completely agree that this is an important issue to look into. What I'm curious about is what objects are holding onto memory that may not need to. I'd use the browser memory debugger to do that.

domoritz · 2019-11-26T20:15:13Z

Looks like the culprit is Vega-Embed. Without Vega-Embed, memory consumption stays low. I think the problem may be the event handlers. Let me try to fix it.

Fixes #270

domoritz · 2019-11-26T21:32:06Z

Fixed in #280

shenenya · 2019-11-27T01:03:02Z

Great. Looking forward to the next release.

shenenya · 2020-05-18T01:21:58Z

I believe the problem appear again. The screenshot below show the memory profile of the example above.

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.12.1"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>

<body>
  <div id="vis"></div>

  <script>
    const spec1 = {
      $schema: "https://vega.github.io/schema/vega-lite/v4.json",
      description: "A simple bar chart with embedded data.",
      width: 360,
      data: {
        values: [
          { a: "A", b: 28 },
          { a: "B", b: 55 },
          { a: "C", b: 43 },
          { a: "D", b: 91 },
          { a: "E", b: 81 },
          { a: "F", b: 53 },
          { a: "G", b: 19 },
          { a: "H", b: 87 },
          { a: "I", b: 52 }
        ]
      },
      mark: "bar",
      encoding: {
        x: { field: "a", type: "ordinal" },
        y: { field: "b", type: "quantitative" },
        tooltip: { field: "b", type: "quantitative" }
      }
    };
    const spec2 = {
      $schema: "https://vega.github.io/schema/vega-lite/v4.json",
      description: "A simple bar chart with embedded data.",
      width: 500,
      data: {
        values: [
          { a: "A", b: 33 },
          { a: "B", b: 32 },
          { a: "C", b: 16 },
          { a: "D", b: 28 },
          { a: "E", b: 35 },
          { a: "F", b: 81 },
          { a: "G", b: 90 },
          { a: "H", b: 10 },
          { a: "I", b: 5 }
        ]
      },
      mark: "bar",
      encoding: {
        x: { field: "a", type: "ordinal" },
        y: { field: "b", type: "quantitative" },
        tooltip: { field: "b", type: "quantitative" }
      }
    };
    let spec = spec1;
    function myFunction() {
      setInterval(function() {
        if (spec === spec1) spec = spec2;
        else spec = spec1;

        vegaEmbed("#vis", spec)
          .then()
          .catch(console.warn);
      }, 1000);
    }
  </script>

  <button onclick="myFunction()">Update</button>
</body>

domoritz · 2020-05-18T01:49:56Z

Please finalize the embed result as described in the docs.

shenenya · 2020-05-18T02:08:49Z

We use react-vega, which calls finalize as follows. Is there something we should do more? Thanks.

  clearView() {
    this.modifyView(view => {
      view.finalize();
    });
    this.viewPromise = undefined;

    return this;
  }

domoritz · 2020-05-18T03:04:33Z

I don't know how this fits into the react lifecycle. However, your example above does not contain finalize. Can you add finalize to see whether it fixes the issue? If yes, then we know the problem is in react vega.

Thanks for your help!

shenenya · 2020-05-18T07:48:55Z

I tried to call finalize as follows. And the memory cost show as the screenshot image.

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.12.1"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>

<body>
  <div id="vis"></div>

  <script>
    const spec1 = {
      $schema: "https://vega.github.io/schema/vega-lite/v3.json",
      description: "A simple bar chart with embedded data.",
      width: 360,
      data: {
        values: [
          { a: "A", b: 28 },
          { a: "B", b: 55 },
          { a: "C", b: 43 },
          { a: "D", b: 91 },
          { a: "E", b: 81 },
          { a: "F", b: 53 },
          { a: "G", b: 19 },
          { a: "H", b: 87 },
          { a: "I", b: 52 }
        ]
      },
      mark: "bar",
      encoding: {
        x: { field: "a", type: "ordinal" },
        y: { field: "b", type: "quantitative" },
        tooltip: { field: "b", type: "quantitative" }
      }
    };
    const spec2 = {
      $schema: "https://vega.github.io/schema/vega-lite/v3.json",
      description: "A simple bar chart with embedded data.",
      width: 500,
      data: {
        values: [
          { a: "A", b: 33 },
          { a: "B", b: 32 },
          { a: "C", b: 16 },
          { a: "D", b: 28 },
          { a: "E", b: 35 },
          { a: "F", b: 81 },
          { a: "G", b: 90 },
          { a: "H", b: 10 },
          { a: "I", b: 5 }
        ]
      },
      mark: "bar",
      encoding: {
        x: { field: "a", type: "ordinal" },
        y: { field: "b", type: "quantitative" },
        tooltip: { field: "b", type: "quantitative" }
      }
    };
    let spec = spec1;
    function myFunction() {
      setInterval(function() {
        if (spec === spec1) spec = spec2;
        else spec = spec1;

        vegaEmbed("#vis", spec)
          .then(function(res){
          	res.finalize();
          })
          .catch(console.warn);
      }, 1000);
    }
  </script>

  <button onclick="myFunction()">Update</button>
</body>

domoritz · 2020-05-18T15:13:11Z

That’s good, right?

shenenya · 2020-05-19T09:08:29Z

Yes. I proposed an issue for react-vega.

brandon-marginalunit · 2020-05-22T20:56:31Z

We're having what I think may be the same problem too; the difference for us is that we aren't using react-vega nor vega-embed. We're creating a new View directly, and then updating it via view.data("foo", [ ... ]).runAsync(). As with the others here, our memory usage monotonically increases each time we update with new data.

Since we aren't creating a new Vega instance each time, or using a fresh config each time, I don't think the .finalize() mitigation applies to us (please correct me if I'm wrong). From looking at the memory profiler, it seems like a bunch of detached SVG group elements are not being released by Vega:

Unfortunately I don't have a clean minimal-reproduction example.

domoritz · 2020-05-23T02:49:24Z

Can you try to reproduce the issue with a small example and file an issue with Vega directly?

shenenya · 2020-05-26T09:52:34Z

Is there any plan to update react-vega to fix the problem? Or else is there any way to use vega-embed with react directly?

brandon-marginalunit · 2020-05-26T16:01:44Z

@domoritz I can file with Vega directly, but I'm not sure I have time to narrow it down to a small example. I'll see what I can do.

domoritz · 2020-05-26T17:02:03Z

Or else is there any way to use vega-embed with react directly?

That's easily possible with a reference. Something like this:

class Vega {
  componentDidMount() {
    var embed = await vegaEmbed(this.refs.vis, spec);
  }

  render() {
    return (
      <div ref="vis" />
    );
  }
}

You may also be interested in vega/vega#2652

shenenya · 2020-05-27T06:25:17Z

You may also be interested in vega/vega#2652

Is the memory leak caused by the Vega caches?

jheer · 2020-05-27T08:42:15Z

Memory leaks could arise from multiple sources:

Creating multiple visualizations (new View instances) without calling finalize on the old View instances.
Using streaming data that involves nested specifications (basically, group marks), in which deleted data leads to deleted groups with content that remains in caches.

PR vega/vega#2652 should fix number 2 above. Number 1 needs to be addressed by developer code (or in libraries such as vega-embed or vega-react).

shenenya · 2020-05-27T08:57:32Z

The memory leaks still happen while react-vega calls finalize. Is it caused by number 2 above?

domoritz mentioned this issue Nov 17, 2019

Memory leaks with updating data vega/vega-lite#5554

Closed

domoritz closed this as completed Nov 17, 2019

domoritz mentioned this issue Nov 17, 2019

Memory leaks with continue updated input data vega/react-vega#69

Closed

domoritz reopened this Nov 17, 2019

domoritz self-assigned this Nov 17, 2019

domoritz added a commit that referenced this issue Nov 26, 2019

Remove document click event listener on finalize.

9a282b5

Fixes #270

domoritz mentioned this issue Nov 26, 2019

Remove document click event listener on finalize. #280

Merged

domoritz closed this as completed in #280 Nov 26, 2019

domoritz added a commit that referenced this issue Nov 26, 2019

Remove document click event listener on finalize. (#280)

777da4a

Fixes #270

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Memory leaks with continue updated input data #270

Memory leaks with continue updated input data #270

shenenya commented Nov 16, 2019 •

edited

Loading

domoritz commented Nov 17, 2019 •

edited

Loading

domoritz commented Nov 17, 2019

shenenya commented Nov 17, 2019

shenenya commented Nov 17, 2019

domoritz commented Nov 17, 2019

shenenya commented Nov 17, 2019

domoritz commented Nov 17, 2019

shenenya commented Nov 17, 2019 •

edited

Loading

shenenya commented Nov 17, 2019 •

edited

Loading

domoritz commented Nov 17, 2019

shenenya commented Nov 17, 2019

shenenya commented Nov 18, 2019

domoritz commented Nov 19, 2019

shenenya commented Nov 25, 2019

domoritz commented Nov 26, 2019

domoritz commented Nov 26, 2019

domoritz commented Nov 26, 2019

shenenya commented Nov 27, 2019

shenenya commented May 18, 2020

domoritz commented May 18, 2020

shenenya commented May 18, 2020 •

edited

Loading

domoritz commented May 18, 2020

shenenya commented May 18, 2020

domoritz commented May 18, 2020

shenenya commented May 19, 2020

brandon-marginalunit commented May 22, 2020 •

edited

Loading

domoritz commented May 23, 2020

shenenya commented May 26, 2020

brandon-marginalunit commented May 26, 2020

domoritz commented May 26, 2020

shenenya commented May 27, 2020

jheer commented May 27, 2020

shenenya commented May 27, 2020

Memory leaks with continue updated input data #270

Memory leaks with continue updated input data #270

Comments

shenenya commented Nov 16, 2019 • edited Loading

domoritz commented Nov 17, 2019 • edited Loading

domoritz commented Nov 17, 2019

shenenya commented Nov 17, 2019

shenenya commented Nov 17, 2019

domoritz commented Nov 17, 2019

shenenya commented Nov 17, 2019

domoritz commented Nov 17, 2019

shenenya commented Nov 17, 2019 • edited Loading

shenenya commented Nov 17, 2019 • edited Loading

domoritz commented Nov 17, 2019

shenenya commented Nov 17, 2019

shenenya commented Nov 18, 2019

domoritz commented Nov 19, 2019

shenenya commented Nov 25, 2019

domoritz commented Nov 26, 2019

domoritz commented Nov 26, 2019

domoritz commented Nov 26, 2019

shenenya commented Nov 27, 2019

shenenya commented May 18, 2020

domoritz commented May 18, 2020

shenenya commented May 18, 2020 • edited Loading

domoritz commented May 18, 2020

shenenya commented May 18, 2020

domoritz commented May 18, 2020

shenenya commented May 19, 2020

brandon-marginalunit commented May 22, 2020 • edited Loading

domoritz commented May 23, 2020

shenenya commented May 26, 2020

brandon-marginalunit commented May 26, 2020

domoritz commented May 26, 2020

shenenya commented May 27, 2020

jheer commented May 27, 2020

shenenya commented May 27, 2020

shenenya commented Nov 16, 2019 •

edited

Loading

domoritz commented Nov 17, 2019 •

edited

Loading

shenenya commented Nov 17, 2019 •

edited

Loading

shenenya commented Nov 17, 2019 •

edited

Loading

shenenya commented May 18, 2020 •

edited

Loading

brandon-marginalunit commented May 22, 2020 •

edited

Loading