Panel does not load when suddenly in view, not scrolled into

[csaladenes]

The panel does not receive load event, when suddenly is displayed, but not scrolled into view - say panel on page bottom of a large dashboard, and the user presses End key or PgDn. I figured it has to do with grafana's isInView parameter, which only fires when the panel is scrolled into view or it is half in-view, but not fully. It might be a grafana-side fix, but since @ryantxu did the lazy loading part there, I figured I'd post it here.

Here the AJAX panel is on the top left. When the user navigates to the view, it does not load, after a few up and down scroll events, it does.

[csaladenes]

Solved it with a temporary workaround for now: in the DashboardPage.XXX.js where the isInView property get's defined, I brute-forced all ryantxu-ajax-panels to to be "in view": if (n.panelMap[e.id.toString()].type == 'ryantxu-ajax-panel') return 1;

[jayden-xie]

@csaladenes Did you just edit the compiled file? I also have this issue after upgrade to v7.0.

                            }, n.isInView = function(e) {
                                if (e.isViewing || e.isEditing) return !0;
                                var t = n.panelRef[e.id.toString()];
                                if (!t) return !1;
                                var r = t.offsetTop,
                                    o = r + (e.gridPos.h * h.d + 40),
                                    a = n.props.scrollTop;
                                return !(a > o + 250) && (!(r > a + (isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight) + 250) && !n.props.dashboard.otherPanelInFullscreen(e))
                            }, n

Or this block?

                            key: "renderPanels",
                            value: function() {
                                var e = this,
                                    t = [],
                                    n = !0,
                                    r = !1,
                                    a = void 0;
                                try {
                                    for (var i, l = function() {
                                            var n = i.value,
                                                r = c()({
                                                    "react-grid-item--fullscreen": n.isViewing
                                                }),
                                                a = n.id.toString();
                                            n.isInView = e.isInView(n), t.push(o.a.createElement("div", {
                                                key: a,
                                                className: r,
                                                id: "panel-" + a,
                                                ref: function(t) {
                                                    return t && (e.panelRef[a] = t)
                                                }
                                            }, e.renderPanel(n)))
                                        }, s = this.props.dashboard.panels[Symbol.iterator](); !(n = (i = s.next()).done); n = !0) l()
                                } catch (e) {
                                    r = !0, a = e
                                } finally {
                                    try {
                                        n || null == s.return || s.return()
                                    } finally {
                                        if (r) throw a
                                    }
                                }
                                return t
                            }

[csaladenes]

Just the compiled file as quick fix - in the definition of the isInView function.

n.isInView = function(e) {
  if (n.panelMap[e.id.toString()].type == 'ryantxu-ajax-panel') return 1; // *** new line ***
  (e.isViewing || e.isEditing) return !0;
...

This is a really dirty trick though, so I wonder if there was an actual fix...
PS: correct, this bug did not appear in v6.x!

[jayden-xie]

@csaladenes Thanks, I'll give it a shot later.