chore(ami): drop unused assets, save new snippets

[wesleyboar]

Overview & Changes

• Remove unused assets.
• Save new snippets.

Related

• un-referenced deleted stylesheet in https://github.com/TACC/Core-Portal-Deployments/commit/853d330

Testing & UI

N/A

Notes

These iframe-… snippets deserve to become a new TACC/Core-CMS template.

[taoteg]

Excellent! I added a comment butt leave it up to you if you wanna add it in.

[taoteg]

I ended up adding this line as well, because the iframe content can take a few seconds to populate and kept getting inconsistent resizing behavior, often having to trigger a resize event to get the redraw to take. This seems to properly trigger it without having to touch anything.

window.addEventListener('load', () => window.dispatchEvent(new Event('resize')));

Note: There are still some load time issues from the upstream end, right now it can be up to 6 seconds before the iframe fully 'loads'.

[wesleyboar]

Okay. Doesn't hurt, but I think we're still fighting race condition, cuz iFrame content (not part of this window) can load after window load.

I think what we really need is the iFrame content (i.e. every app) to dispatch that event to it's parent doc when it actually "loads".

[wesleyboar]

Or a custom event to which we also listen. Google says window.parent.dispatchEvent(ourEvent);. And it seems simple to create a custom event.

[taoteg]

Following up here...

I requested the following code be added to the upstream iframe generated by the Dash app:

// Inside the iframe

// Init Event.
function dispatchCustomIFrameInitEventToParent() {
    const event = new CustomEvent('IFrameInit', {
        detail: { message: 'initializing iframe' }, // optional
        bubbles: true, // Allow the event to bubble up
        cancelable: true // Allow the event to be canceled if needed
    });

    // Dispatch the event to the parent window
    window.parent.dispatchEvent(event);
}

// Trigger the event.
dispatchCustomIFrameInitEventToParent();

// Loaded Event.
function dispatchCustomIFrameLoadedEventToParent() {
    const event = new CustomEvent('IFrameLoaded', {
        detail: { message: 'Iframe loaded' }, // optional
        bubbles: true, // Allow the event to bubble up
        cancelable: true // Allow the event to be canceled if needed
    });

    // Dispatch the event to the parent window
    window.parent.dispatchEvent(event);
}

// Trigger the event.
dispatchCustomIFrameLoadedEventToParent();

Then in the CMS template we should be able to resize accordingly when we intercept the events:

window.addEventListener('IFrameInit', () => debouncedResizeIframe(iframe));
window.addEventListener('IFrameLoaded', () => debouncedResizeIframe(iframe));

Note: There is a dash-extensions component named DeferScript that will enable the JS code to be called after the React code has completed loading in Plotly.

• https://www.dash-extensions.com/components/defer_script
• https://github.com/emilhe/dash-extensions/blob/master/tests/components/defer_script.py