tbonelee commented on code in PR #4788:
URL: https://github.com/apache/zeppelin/pull/4788#discussion_r1730391415
##########
zeppelin-web/src/app/visualization/builtins/visualization-d3network.js:
##########
@@ -166,23 +166,23 @@ export default class NetworkVisualization extends
Visualization {
const drag = d3.behavior.drag()
.origin((d) => d)
- .on('dragstart', function(d) {
+ .on('dragstart', (d) => {
console.log('dragstart');
d3.event.sourceEvent.stopPropagation();
- d3.select(this).classed('dragging', true);
+ d3.select(d3.event.sourceEvent.target).classed('dragging', true);
self.force.stop();
})
- .on('drag', function(d) {
+ .on('drag', (d) => {
console.log('drag');
d.px += d3.event.dx;
d.py += d3.event.dy;
d.x += d3.event.dx;
d.y += d3.event.dy;
})
- .on('dragend', function(d) {
+ .on('dragend', (d) => {
console.log('dragend');
d.fixed = true;
- d3.select(this).classed('dragging', false);
+ d3.select(d3.event.sourceEvent.target).classed('dragging', false);
self.force.resume();
});
Review Comment:
I added logs to the code and ran the Neo4j interpreter to check whether the
`this` in the regular function actually matches `d3.event.sourceEvent.target`.
It matched in the 'dragstart' event and the early 'drag' events, but it did
not match during the later 'drag' events and the 'dragend' event.
So, if you want the same behavior as the original code, you might need to
maintain a reference to the DOM element like this.
```suggestion
let clickedOnDOMElement;
const drag = d3.behavior.drag()
.origin((d) => d)
.on('dragstart', (d) => {
console.log('dragstart');
d3.event.sourceEvent.stopPropagation();
clickedOnDOMElement = d3.event.sourceEvent.target;
d3.select(clickedOnDOMElement).classed('dragging', true);
self.force.stop();
})
.on('drag', (d) => {
console.log('drag');
d.px += d3.event.dx;
d.py += d3.event.dy;
d.x += d3.event.dx;
d.y += d3.event.dy;
})
.on('dragend', (d) => {
console.log('dragend');
d.fixed = true;
d3.select(clickedOnDOMElement).classed('dragging', false);
self.force.resume();
});
```
##########
zeppelin-web/src/app/visualization/builtins/visualization-table.js:
##########
@@ -364,12 +364,12 @@ export default class TableVisualization extends
Visualization {
gridApi.colResizable.on.columnSizeChanged(scope, () => {
self.persistConfigWithGridState(self.config);
});
- gridApi.edit.on.beginCellEdit(scope, function(rowEntity, colDef,
triggerEvent) {
+ gridApi.edit.on.beginCellEdit(scope, (rowEntity, colDef, triggerEvent)
=> {
let textArea =
triggerEvent.currentTarget.children[1].children[0].children[0];
textArea.style.height = textArea.scrollHeight + 'px';
- textArea.addEventListener('keydown', function() {
+ textArea.addEventListener('keydown', () => {
let elem = this;
- setTimeout(function() {
+ setTimeout(() => {
elem.style.height = 'auto';
elem.style.height = elem.scrollHeight + 'px';
});
Review Comment:
In the previous code, `this` was `textArea`, but it is some other value in
the arrow function.
So I suggest using `textArea` directly in the `setTimeout` callback argument.
```js
textArea.addEventListener('keydown', () => {
setTimeout(() => {
textArea.style.height = 'auto';
textArea.style.height = textArea.scrollHeight + 'px';
});
}, 0);
```
##########
zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js:
##########
Review Comment:
Changing `completionSupportWithoutBackend` to an arrow function might cause
`this` to behave differently than expected.
It looks like `this` inside `completionSupportWithoutBackend` is intended to
refer to the object it's called on, but with an arrow function, it will instead
refer to the `this` of `ParagraphCtrl`.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
