[REACT] notesTooltip Bug

[burnit]

Good day!

I am facing an issue with the notesTooltip.
When the tooltip is displayed and i scroll on x-axis to fast, then it shows multiple tooltips buth there is no event?

Unbenanntes Video – Mit Clipchamp erstellt.mp4

(14.06 MiB) Downloaded 50 times

if (eventRecord.name) {
        eventRecord.meta.mutationObserver?.disconnect();
        if (!eventRecord.meta.notesTooltip) {
          const t = (eventRecord.meta.notesTooltip = new Tooltip({
            appendTo: this.timeAxisSubGridElement,
            constrainTo: this.timeAxisSubGridElement,
            floating: false,
            positioned: true,
            style: {
              zIndex: 10,
              fontSize: '8pt',
            },
            html: `Notes for ${eventRecord.name}`,
            autoClose: false,
          }));
          document.addEventListener(
            'scroll',
            () => t.alignTo({ target: t.lastAlignSpec.target, ...t.align }),
            true
          );
          eventRecord.meta.mutationObserver = new MutationObserver(() => t.realign());
        }
        eventRecord.meta.notesTooltip.showBy(element);
        // Make the tip follow the element upon mutation of attributes
        eventRecord.meta.mutationObserver.observe(element, { attributes: true });
      }

[Animal]

I'm guessing this is the experimental incantation which I suggested a few weeks ago.

I worked out a more reliable way. The rendered element is overflow:visible so you could render the tooltip directly into it. The align process will still work:

    listeners : {
        renderEvent({ eventRecord, element }) {
            if (!eventRecord.meta.notesTooltip) {
                const t = eventRecord.meta.notesTooltip = new Tooltip({
                    constrainTo  : null,
                    floating     : false,
                    positioned   : true,
                    scrollAction : 'realign',
                    style        : {
                        zIndex      : 10,
                        'font-size' : 'initial'
                    },
                    html         : `Notes for ${eventRecord.name}`,
                    autoClose    : false
                });
            }
            eventRecord.meta.notesTooltip.render(element);
            eventRecord.meta.notesTooltip.showBy(element);
        }
    }

[burnit]

Hi @Animal,

sorry for bringing up this old topic
The problem is, that my tooltip will be hidden when the event is out of view.
If is scroll back the event does not fire every time, so the tooltip will not coming up every time.
It looks like if i scroll the event out of view just for a bit and then scroll back, the event is still in DOM and the event doesn't fire again, because it is still there. But the tooltip is not visible anymore.

Any idea how to solve this?

Many thanks!

[burnit]

Hi @Animal,

sorry for bringing up this old topic
The problem is, that my tooltip will be hidden when the event is out of view.
If is scroll back the event does not fire every time, so the tooltip will not coming up every time.
It looks like if i scroll the event out of view just for a bit and then scroll back, the event is still in DOM and the event doesn't fire again, because it is still there. But the tooltip is not visible anymore.

Any idea how to solve this?

Many thanks!

Does anyone else have an idea how to get it solved?

Many thanks

[Animal]

It works here. The render event does fire whenever an event is rendered.

tooltips.mov

(4.18 MiB) Downloaded 38 times

[burnit]

@Animal Yes i can confirm. But can you change zoom? is it still visible?

[alex.l]

Hi, it works fine after zooming, please see video attached

Screen Recording 2023-06-01 at 17.57.31.mov

(9.01 MiB) Downloaded 42 times

[burnit]

Looks like a bug.
Your code works fine until version 5.2.10!
Starting with version 5.3.0 and later it is not working anymore.
But from version renderEvent is fired only sporadically.

I also found out, that a change of an custom field in the EventModel triggers eventRender only one time.
If i change the field again, it does not trigger eventRender.

Please find attached the test case.
Please check console there you can see value changes but renderEvent is not triggered again after the first click.

Can you please verify this once?

[alex.l]

Hi burnit,

There are few moment I can say regarding to this point.
Event rendering is quite complex algorithm with main goal - optimization and performance. Event will be re-rendered only when it's required, as example If its DOM object needs to be updated. So, if you will use your test field value somewhere in event DOM, it definitely will be re-rendered after each change. Or if you will use value of test field somewhere in event renderer https://bryntum.com/products/scheduler/docs/api/Scheduler/view/mixin/SchedulerEventRendering#config-eventRenderer

Actually test is not a field on EventModel. You need to declare it in data model to have all functionality working as expected. Please see https://bryntum.com/products/scheduler/docs/api/Scheduler/model/EventModel#subclassing-the-event-model-class

class MyEvent extends EventModel {

static get fields() {
    return [
       { name: 'test', type : 'string' },

    ];
},
...
});

[burnit]

HI alex,

i added it to the eventModel but still the same issues:

Issue 1: Tolltip won't be displayed on version 5.3.0 an later, 5.2.10 is working. Please test it.

Issue 2: Content is not updating in DOM. Please watch the attached video and demo code.

Greetings,
André