plotly / plotly/plotly.js

Unhandled exception on "ctrl+left/right-click" drag or "shift+right-click" drag on a chart

Open
#6,879 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug P2
Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
2d 12h
Merged PRs (30d)
28

Description

On a chart if I hold ctrl and try to drag with left-click or right-click or shift+right-click drag, then getting an exception.

After analyzing the code, I found that ctrl is treated as right-click, and if drag operation and right click then "options.moveFn(dx, dy);" function is not getting called which results in not updating "updates" for the dragTail() function that calls "_guiRelayout" with undefined updates and in that function exception is raised if updates are undefined. Pasting js code of these function below:

This issue can be replicated easily in plotly's samples as well. Just hold ctrl and drag with left/right-click, you can see error in console.

Attaching snapshot:

image

function onMove(e) {
  e.preventDefault();

  var offset = pointerOffset(e);
  var minDrag = options.minDrag || constants.MINDRAG;
  var dxdy = clampFn(offset[0] - startX, offset[1] - startY, minDrag);
  var dx = dxdy[0];
  var dy = dxdy[1];

  if (dx || dy) {
    gd._dragged = true;
    dragElement.unhover(gd);
  }

  if (gd._dragged && options.moveFn && !rightClick) {
    gd._dragdata = {
      element: element,
      dx: dx,
      dy: dy,
    };
    options.moveFn(dx, dy);
  }

  return;
}

// dragTail - finish a drag event with a redraw
function dragTail() {
  // put the subplot viewboxes back to default (Because we're going to)
  // be repositioning the data in the relayout. But DON'T call
  // ticksAndAnnotations again - it's unnecessary and would overwrite `updates`
  updateSubplots([0, 0, pw, ph]);

  // since we may have been redrawing some things during the drag, we may have
  // accumulated MathJax promises - wait for them before we relayout.
  Lib.syncOrAsync(
    [
      Plots.previousPromises,
      function () {
        gd._fullLayout._replotting = false;
        Registry.call("_guiRelayout", gd, updates);
      },
    ],
    gd
  );
}

function relayout(gd, astr, val) {
  gd = Lib.getGraphDiv(gd);
  helpers.clearPromiseQueue(gd);

  if (gd.framework && gd.framework.isPolar) {
    return Promise.resolve(gd);
  }

  var aobj = {};
  if (typeof astr === "string") {
    aobj[astr] = val;
  } else if (Lib.isPlainObject(astr)) {
    aobj = Lib.extendFlat({}, astr);
  } else {
    Lib.warn("Relayout fail.", astr, val);
    return Promise.reject(); // From here exception is raised
  }
  .... Rest of the code
}

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the failure in Plotly's samples with ctrl plus left/right drag or shift plus right drag, then trace the onMove and dragTail functions shown in the issue. Verify that the drag completes without passing undefined updates to _guiRelayout and that the exception no longer appears in the console.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.