Condition watcher for initial embedded dashboard scrollsize

[kevglatt]

Hi Superset Team,

In a PoC, we used the embedded dashboard and struggled with the scroll size of the iframe. The initial height of the iframe is always the default 150px because the dashboard hasn't finished loading. We ended up polling for a change in the size. We think polling is very unsexy, so we changed the call requesting the size to only reply after the dashboard has finished loading.

We implemented a ConditionWatcher that handles the waiting. For our use case, we defined the dashboard as "loaded" by calling setScrollSizeFixed() in DashBoardPage.tsx when isReadyToRender === true. We’re sure there are better places to define "loaded," but our understanding of your application and the technologies is limited. Therefore it isn't working properly yet.

After implementing it, we thought this change might also be helpful for others. So we wanted to share our idea with you.

Thanks for the amazing project you’ve created!

Best regards,
Kevin

//from superset-frontend/src/embedded/api.tsx

...

class ConditionWatcher {
  private conditionMet = false;

  private readonly conditionPromise: Promise<void>;

  private resolveConditionPromise!: () => void;

  constructor() {
    this.conditionPromise = new Promise<void>(resolve => {
      this.resolveConditionPromise = resolve;
    });
  }

  async waitForCondition(): Promise<void> {

    if (this.conditionMet) {
      return;
    }

    await this.conditionPromise;
  }

  setConditionMet(): void {
    if (!this.conditionMet) {
      this.conditionMet = true;
      this.resolveConditionPromise();
    }
  }
}

const scrollSizeFixed = new ConditionWatcher();

...

const getScrollSize = function (): Promise<Size> {
  return new Promise(resolve => {
    scrollSizeFixed.waitForCondition().then(() => {
      resolve({
        width: document.body.scrollWidth,
        height: document.body.scrollHeight,
      });
    });
  });
};

...

export const setScrollSizeFixed = function (): void {
  scrollSizeFixed.setConditionMet();
};

...