Do not update charts that are out of view

[domoritz]

In large dashboards, some charts may be outside the current view and therefore don't need to be updated. It would be interesting to explore ways to not update charts that are invisible at the moment but update them when they come into view.

[willium]

• it could be interesting to explore if cube indexes could be created as charts come into view, rather than on-the-fly with selections.

[declann]

+1, I'm experiencing duckdb is like a rocket shipping results at any granularity but when it results in many marks and their interactor stores, the front-end gets janky relatively quickly.

I'm putting busy vgplots under Details elements so that I can programaticaly introduce them (and the corresponding front-end load), but there is no mechanism to disconnect them (and their front-end updates) afterwards.

[jheer]

Mosaic has support for this since https://github.com/uwdata/mosaic/pull/721.

You can use an IntersectionObserver to toggle the client enabled property in response to the visibility of a corresponding DOM element.

Here is one way to set that up in TypeScript, using the makeClient utility:

import { makeClient, type MosaicClient } from "@uwdata/mosaic-core";

const CLIENT = "__client__";

type ClientElement = Element & { [CLIENT]: MosaicClient };

let observer: IntersectionObserver;

if (typeof IntersectionObserver !== "undefined") {
  observer = new IntersectionObserver(entries => {
    for (const entry of entries) {
      const target = entry.target as ClientElement;
      target[CLIENT].enabled = entry.isIntersecting;
    }
  });
}

/**
 * Create a new client instance associated with an observed DOM element.
 * When the DOM element is off-screen, the client is deactivated.
 */
export function observeClient(
  options: Parameters<typeof makeClient>[0] & { element?: Element }
): ReturnType<typeof makeClient> {
  const { element, ...clientOptions } = options;

  // create the client instance
  const client = makeClient({
    enabled: !element,
    ...clientOptions
  });

  if (element) {
    // annotate DOM element with client
    Object.assign(element, { [CLIENT]: client });
    // add the DOM element to the IntersectionObserver
    observer.observe(element);
  }

  return client;
}

[declann]

Isn't this still an issue in relation to vgplot ?

[jheer]

Isn't this still an issue in relation to vgplot ?

Yes, that's right. This issue did not specify that exactly as the Mosaic architecture and vgplot are separate packages. Can you please open a new issue to track vgplot adoption of the enabled flag? Thanks!!