[13.0.0] Disable oj-gantt tooltip on drag

Philip Sommer

Hi all,

When a gantt task is moved or resized, the tooltip follows the element and obstructs part of the chart. (We have a larger, custom tooltip.) Back in 2021 and JET v9, Wilson Louie gave me a workaround in this thread:

https://community.oracle.com/tech/developers/discussion/4479481/9-2-0-disable-oj-gantt-tooltip-on-drag

However, the workaround is no longer functional, as the DataContext for the tooltip render function no longer updates the start and end dates of the dragged task in real time. I.e. the start and end dates are only updated, once the task is "dropped" and the ojMove event fires.

Is there any way to achieve the same effect with JET v13.0.0 ?

Kind Regards,

Philip

Wilson Louie-Oracle

Hi Philip,

I just tried the workaround in the JET 13.0.0 cookbook, and it appears to work for me:

https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=gantt&demo=taskManipulate

HTML changes:

<oj-gantt
  ...
  tooltip.renderer="[[tooltipFunction]]"
>
</oj-gantt>

<script type="text/html" id="tooltipTemplate">
  <div>asfd</div>
</script>

TS changes:

...
import * as KnockoutTemplateUtils from 'ojs/ojknockouttemplateutils';

class ViewModel {
  constructor() {
    let tooltipCache = { prevItemData: { id: null } };
    this.tooltipFunction = function(dataContext) {
      // Basic drag detection: same task, but start value changed
      const isDragging = (dataContext.data.id === tooltipCache.prevItemData.id
                             && dataContext.data.start !== tooltipCache.prevItemData.begin);
      // looks to me the context start date is updating in real time as expected
      console.log(Date.now(), dataContext.data.start);
      if (isDragging) {
        // Prevent tooltip from showing
        return { preventDefault: true };
      }
      tooltipCache.prevItemData = dataContext.itemData;
          
      // Show template content
      return KnockoutTemplateUtils.getRenderer('tooltipTemplate', false)(dataContext);
    }
  }
  ...
}

I see "asdf" in the tooltip if I just hover over the task, and no tooltip is shown during drag. The console log shows the dataContext.data.start is updating during drag.

Just in case there's a discrepancy between the original data's itemData.begin and the dataContext.data.start ISO strings, can you try setting

tooltipCache.prevItemData = dataContext.data // instead of dataContext.itemData

and in the isDragging condition, reference tooltipCache.prevItemData.start instead of begin?

It's probably better to use dataContext.data anyway so that we can always use "start" rather than the implementation specific "begin", as you alluded to in your last comment in the original v9 post.

Otherwise, happy to assist further if you see any notable discrepancies between the simplified case above and in your app.

HTH,

Wilson

Philip Sommer

Hi Wilson,

Thank you for taking the time to look into things. I can confirm your example works in the cookbook on my end - so it's not the browser.

The first issue on my end was, that I was using the startISO value, which does not update real time. Log:

I switched to dataContext.data. start both for the current and previous value. This disables the tooltip on drag start. However, on drag end it does not display the tooltip again.

I think the issue is as follows: If we start dragging, the previousData is not updated, because we return before the update line. This means the (cached) previousData value will always point to the original dataContext value, as long as 'isDragging' is true. Unless we drag the task to the same position, the start of the current dataContext and the cached value will differ. This means that 'isDragging' is true and the previous value is not updated and so on...

Thinking about it I wonder how this works in the cookbokk. I guess - as we assign an object by reference to the previous value - JET will update some values on the dataContext.itemData and not on the dataContext.data object? If I switch the 'itemData' to 'data' and the 'begin' to 'start' I get the same behaviour as in the cookbook. I.e.

const isDragging = (dataContext.data.id === tooltipCache.prevItemData.id
                             && dataContext.data.start !== tooltipCache.prevItemData.start);
      // looks to me the context start date is updating in real time as expected
      console.log(Date.now(), dataContext.data.start);
      if (isDragging) {
        // Prevent tooltip from showing
        return { preventDefault: true };
      }
      tooltipCache.prevItemData = dataContext.data;

With my code, the difference is, that there is no 'begin' value, as I don't have shaped data. In my oj-gantt-task Mapping Template, I use the 'startISO' value from the data context. This value does not seem to update on drag end.

I will have to investigate further, if this is an issue with the gant task mapping template or with the data objects' startISO value.

Kind Regards,

Philip