@datalayer/jupyter-react 0.8.2 → 0.9.0

package/lib/jupyter/ipywidgets/plotly/Figure.js

@@ -1,13 +1,18 @@
 /*
- * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ * Copyright (c) 2021-2023 Datalayer, Inc.
  *
  * MIT License
  */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-this-alias */
+/* eslint-disable prefer-rest-params */
+/* eslint-disable no-var */
+/* eslint-disable no-prototype-builtins */
 import { DOMWidgetModel, DOMWidgetView, } from '@jupyter-widgets/base';
 import _ from 'lodash';
 import Plotly from 'plotly.js';
 import { MODULE_NAME, MODULE_VERSION } from './Version';
-// @ts-ignore
+// @ts-expect-error unknown global PlotlyConfig
 window.PlotlyConfig = { MathJaxConfig: 'local' };
 const semver_range = '^' + MODULE_VERSION;
 // Model
@@ -397,7 +402,7 @@ class FigureModel extends DOMWidgetModel {
      */
     _normalize_trace_indexes(trace_indexes) {
         if (trace_indexes === null || trace_indexes === undefined) {
-            var numTraces = this.get('_data').length;
+            const numTraces = this.get('_data').length;
             trace_indexes = _.range(numTraces);
         }
         if (!Array.isArray(trace_indexes)) {
@@ -424,11 +429,11 @@ class FigureModel extends DOMWidgetModel {
     do_addTraces() {
         // add trace to plot
         /** @type {Py2JsAddTracesMsg} */
-        var msgData = this.get('_py2js_addTraces');
+        const msgData = this.get('_py2js_addTraces');
         if (msgData !== null) {
-            var currentTraces = this.get('_data');
-            var newTraces = msgData.trace_data;
-            _.forEach(newTraces, function (newTrace) {
+            const currentTraces = this.get('_data');
+            const newTraces = msgData.trace_data;
+            _.forEach(newTraces, newTrace => {
                 currentTraces.push(newTrace);
             });
         }
@@ -439,16 +444,16 @@ class FigureModel extends DOMWidgetModel {
     do_deleteTraces() {
         // remove traces from plot
         /** @type {Py2JsDeleteTracesMsg} */
-        var msgData = this.get('_py2js_deleteTraces');
+        const msgData = this.get('_py2js_deleteTraces');
         if (msgData !== null) {
-            var delete_inds = msgData.delete_inds;
-            var tracesData = this.get('_data');
+            const delete_inds = msgData.delete_inds;
+            const tracesData = this.get('_data');
             // Remove del inds in reverse order so indexes remain valid
             // throughout loop
             delete_inds
                 .slice()
                 .reverse()
-                .forEach(function (del_ind) {
+                .forEach(del_ind => {
                 tracesData.splice(del_ind, 1);
             });
         }
@@ -458,11 +463,11 @@ class FigureModel extends DOMWidgetModel {
      */
     do_moveTraces() {
         /** @type {Py2JsMoveTracesMsg} */
-        var msgData = this.get('_py2js_moveTraces');
+        const msgData = this.get('_py2js_moveTraces');
         if (msgData !== null) {
-            var tracesData = this.get('_data');
-            var currentInds = msgData.current_trace_inds;
-            var newInds = msgData.new_trace_inds;
+            const tracesData = this.get('_data');
+            const currentInds = msgData.current_trace_inds;
+            const newInds = msgData.new_trace_inds;
             performMoveTracesLike(tracesData, currentInds, newInds);
         }
     }
@@ -471,10 +476,10 @@ class FigureModel extends DOMWidgetModel {
      */
     do_restyle() {
         /** @type {Py2JsRestyleMsg} */
-        var msgData = this.get('_py2js_restyle');
+        const msgData = this.get('_py2js_restyle');
         if (msgData !== null) {
-            var restyleData = msgData.restyle_data;
-            var restyleTraces = this._normalize_trace_indexes(msgData.restyle_traces);
+            const restyleData = msgData.restyle_data;
+            const restyleTraces = this._normalize_trace_indexes(msgData.restyle_traces);
             performRestyleLike(this.get('_data'), restyleData, restyleTraces);
         }
     }
@@ -483,7 +488,7 @@ class FigureModel extends DOMWidgetModel {
      */
     do_relayout() {
         /** @type {Py2JsRelayoutMsg} */
-        var msgData = this.get('_py2js_relayout');
+        const msgData = this.get('_py2js_relayout');
         if (msgData !== null) {
             performRelayoutLike(this.get('_layout'), msgData.relayout_data);
         }
@@ -493,11 +498,11 @@ class FigureModel extends DOMWidgetModel {
      */
     do_update() {
         /** @type {Py2JsUpdateMsg} */
-        var msgData = this.get('_py2js_update');
+        const msgData = this.get('_py2js_update');
         if (msgData !== null) {
-            var style = msgData.style_data;
-            var layout = msgData.layout_data;
-            var styleTraces = this._normalize_trace_indexes(msgData.style_traces);
+            const style = msgData.style_data;
+            const layout = msgData.layout_data;
+            const styleTraces = this._normalize_trace_indexes(msgData.style_traces);
             performRestyleLike(this.get('_data'), style, styleTraces);
             performRelayoutLike(this.get('_layout'), layout);
         }
@@ -507,15 +512,15 @@ class FigureModel extends DOMWidgetModel {
      */
     do_animate() {
         /** @type {Py2JsAnimateMsg} */
-        var msgData = this.get('_py2js_animate');
+        const msgData = this.get('_py2js_animate');
         if (msgData !== null) {
-            var styles = msgData.style_data;
-            var layout = msgData.layout_data;
-            var trace_indexes = this._normalize_trace_indexes(msgData.style_traces);
-            for (var i = 0; i < styles.length; i++) {
-                var style = styles[i];
-                var trace_index = trace_indexes[i];
-                var trace = this.get('_data')[trace_index];
+            const styles = msgData.style_data;
+            const layout = msgData.layout_data;
+            const trace_indexes = this._normalize_trace_indexes(msgData.style_traces);
+            for (let i = 0; i < styles.length; i++) {
+                const style = styles[i];
+                const trace_index = trace_indexes[i];
+                const trace = this.get('_data')[trace_index];
                 performRelayoutLike(trace, style);
             }
             performRelayoutLike(this.get('_layout'), layout);
@@ -526,10 +531,10 @@ class FigureModel extends DOMWidgetModel {
      */
     do_removeLayoutProps() {
         /** @type {Py2JsRemoveLayoutPropsMsg} */
-        var msgData = this.get('_py2js_removeLayoutProps');
+        const msgData = this.get('_py2js_removeLayoutProps');
         if (msgData !== null) {
-            var keyPaths = msgData.remove_props;
-            var layout = this.get('_layout');
+            const keyPaths = msgData.remove_props;
+            const layout = this.get('_layout');
             performRemoveProps(layout, keyPaths);
         }
     }
@@ -538,11 +543,11 @@ class FigureModel extends DOMWidgetModel {
      */
     do_removeTraceProps() {
         /** @type {Py2JsRemoveTracePropsMsg} */
-        var msgData = this.get('_py2js_removeTraceProps');
+        const msgData = this.get('_py2js_removeTraceProps');
         if (msgData !== null) {
-            var keyPaths = msgData.remove_props;
-            var traceIndex = msgData.remove_trace;
-            var trace = this.get('_data')[traceIndex];
+            const keyPaths = msgData.remove_props;
+            const traceIndex = msgData.remove_trace;
+            const trace = this.get('_data')[traceIndex];
             performRemoveProps(trace, keyPaths);
         }
     }
@@ -643,7 +648,7 @@ export class FigureView extends DOMWidgetView {
      * is never displayed in a notebook output cell
      */
     perform_render() {
-        var that = this;
+        const that = this;
         // Wire up message property callbacks
         // ----------------------------------
         // Python -> JS event properties
@@ -661,8 +666,8 @@ export class FigureView extends DOMWidgetView {
         }
         // Get message ids
         // ---------------------
-        var layout_edit_id = this.model.get('_last_layout_edit_id');
-        var trace_edit_id = this.model.get('_last_trace_edit_id');
+        const layout_edit_id = this.model.get('_last_layout_edit_id');
+        const trace_edit_id = this.model.get('_last_trace_edit_id');
         // Set view UID
         // ------------
         this.viewID = randstr();
@@ -670,10 +675,10 @@ export class FigureView extends DOMWidgetView {
         // ---------------------------
         // We must clone the model's data and layout properties so that
         // the model is not directly mutated by the Plotly.js library.
-        var initialTraces = _.cloneDeep(this.model.get('_data'));
-        var initialLayout = _.cloneDeep(this.model.get('_layout'));
-        var config = this.model.get('_config');
-        Plotly.newPlot(that.el, initialTraces, initialLayout, config).then(function () {
+        const initialTraces = _.cloneDeep(this.model.get('_data'));
+        const initialLayout = _.cloneDeep(this.model.get('_layout'));
+        const config = this.model.get('_config');
+        Plotly.newPlot(that.el, initialTraces, initialLayout, config).then(() => {
             // ### Send trace deltas ###
             // We create an array of deltas corresponding to the new
             // traces.
@@ -681,40 +686,40 @@ export class FigureView extends DOMWidgetView {
             // ### Send layout delta ###
             that._sendLayoutDelta(layout_edit_id);
             // Wire up plotly event callbacks
-            that.el.on('plotly_restyle', function (update) {
+            that.el.on('plotly_restyle', (update) => {
                 that.handle_plotly_restyle(update);
             });
-            that.el.on('plotly_relayout', function (update) {
+            that.el.on('plotly_relayout', (update) => {
                 that.handle_plotly_relayout(update);
             });
             /*
-            (<Plotly.PlotlyHTMLElement>that.el).on("plotly_update", function (update: any) {
-              that.handle_plotly_update(update);
-            });
-    */
-            that.el.on('plotly_click', function (update) {
+              (<Plotly.PlotlyHTMLElement>that.el).on("plotly_update", function (update: any) {
+                that.handle_plotly_update(update);
+              });
+      */
+            that.el.on('plotly_click', (update) => {
                 that.handle_plotly_click(update);
             });
-            that.el.on('plotly_hover', function (update) {
+            that.el.on('plotly_hover', (update) => {
                 that.handle_plotly_hover(update);
             });
-            that.el.on('plotly_unhover', function (update) {
+            that.el.on('plotly_unhover', (update) => {
                 that.handle_plotly_unhover(update);
             });
-            that.el.on('plotly_selected', function (update) {
+            that.el.on('plotly_selected', (update) => {
                 that.handle_plotly_selected(update);
             });
             /*
-            (<Plotly.PlotlyHTMLElement>that.el).on("plotly_deselect", function (update: any) {
-              that.handle_plotly_deselect(update);
-            });
-            (<Plotly.PlotlyHTMLElement>that.el).on("plotly_doubleclick", function (update: any) {
-              that.handle_plotly_doubleclick(update);
-            });
-    */
+              (<Plotly.PlotlyHTMLElement>that.el).on("plotly_deselect", function (update: any) {
+                that.handle_plotly_deselect(update);
+              });
+              (<Plotly.PlotlyHTMLElement>that.el).on("plotly_doubleclick", function (update: any) {
+                that.handle_plotly_doubleclick(update);
+              });
+      */
             // Emit event indicating that the widget has finished
             // rendering
-            var event = new CustomEvent('plotlywidget-after-render', {
+            const event = new CustomEvent('plotlywidget-after-render', {
                 detail: { element: that.el, viewID: that.viewID },
             });
             // Dispatch/Trigger/Fire the event
@@ -726,7 +731,7 @@ export class FigureView extends DOMWidgetView {
      */
     processLuminoMessage(msg) {
         super.processLuminoMessage.apply(this, arguments);
-        var that = this;
+        const that = this;
         switch (msg.type) {
             case 'before-attach':
                 // Render an initial empty figure. This establishes with
@@ -742,7 +747,7 @@ export class FigureView extends DOMWidgetView {
                     xaxis: axisHidden,
                     yaxis: axisHidden,
                 });
-                window.addEventListener('resize', function () {
+                window.addEventListener('resize', () => {
                     that.autosizeFigure();
                 });
                 break;
@@ -757,12 +762,12 @@ export class FigureView extends DOMWidgetView {
         }
     }
     autosizeFigure() {
-        var that = this;
-        var layout = that.model.get('_layout');
+        const that = this;
+        const layout = that.model.get('_layout');
         if (_.isNil(layout) || _.isNil(layout.width)) {
             // @ts-ignore
-            Plotly.Plots.resize(that.el).then(function () {
-                var layout_edit_id = that.model.get('_last_layout_edit_id');
+            Plotly.Plots.resize(that.el).then(() => {
+                const layout_edit_id = that.model.get('_last_layout_edit_id');
                 that._sendLayoutDelta(layout_edit_id);
             });
         }
@@ -810,20 +815,21 @@ export class FigureView extends DOMWidgetView {
      * @returns {null|Points}
      */
     buildPointsObject(data) {
-        var pointsObject;
+        let pointsObject;
         if (data.hasOwnProperty('points')) {
             // Most cartesian plots
-            var pointObjects = data['points'];
-            var numPoints = pointObjects.length;
-            var hasNestedPointObjects = true;
+            const pointObjects = data['points'];
+            const numPoints = pointObjects.length;
+            let hasNestedPointObjects = true;
             for (let i = 0; i < numPoints; i++) {
                 hasNestedPointObjects =
                     hasNestedPointObjects &&
                         pointObjects[i].hasOwnProperty('pointNumbers');
-                if (!hasNestedPointObjects)
+                if (!hasNestedPointObjects) {
                     break;
+                }
             }
-            var numPointNumbers = numPoints;
+            let numPointNumbers = numPoints;
             if (hasNestedPointObjects) {
                 numPointNumbers = 0;
                 for (let i = 0; i < numPoints; i++) {
@@ -837,7 +843,7 @@ export class FigureView extends DOMWidgetView {
                 ys: new Array(numPointNumbers),
             };
             if (hasNestedPointObjects) {
-                var flatPointIndex = 0;
+                let flatPointIndex = 0;
                 for (var p = 0; p < numPoints; p++) {
                     for (let i = 0; i < pointObjects[p]['pointNumbers'].length; i++, flatPointIndex++) {
                         pointsObject['point_indexes'][flatPointIndex] =
@@ -855,11 +861,12 @@ export class FigureView extends DOMWidgetView {
                         single_trace &&
                             pointsObject['trace_indexes'][i - 1] ===
                                 pointsObject['trace_indexes'][i];
-                    if (!single_trace)
+                    if (!single_trace) {
                         break;
+                    }
                 }
                 if (single_trace) {
-                    pointsObject['point_indexes'].sort(function (a, b) {
+                    pointsObject['point_indexes'].sort((a, b) => {
                         return a - b;
                     });
                 }
@@ -873,7 +880,7 @@ export class FigureView extends DOMWidgetView {
                 }
             }
             // Add z if present
-            var hasZ = pointObjects[0] !== undefined && pointObjects[0].hasOwnProperty('z');
+            const hasZ = pointObjects[0] !== undefined && pointObjects[0].hasOwnProperty('z');
             if (hasZ) {
                 pointsObject['zs'] = new Array(numPoints);
                 for (p = 0; p < numPoints; p++) {
@@ -893,13 +900,13 @@ export class FigureView extends DOMWidgetView {
      * @returns {null|InputDeviceState}
      */
     buildInputDeviceStateObject(data) {
-        var event = data['event'];
+        const event = data['event'];
         if (event === undefined) {
             return null;
         }
         else {
             /** @type {InputDeviceState} */
-            var inputDeviceState = {
+            const inputDeviceState = {
                 // Keyboard modifiers
                 alt: event['altKey'],
                 ctrl: event['ctrlKey'],
@@ -919,7 +926,7 @@ export class FigureView extends DOMWidgetView {
      * @returns {null|Selector}
      */
     buildSelectorObject(data) {
-        var selectorObject;
+        let selectorObject;
         if (data.hasOwnProperty('range')) {
             // Box selection
             selectorObject = {
@@ -959,11 +966,11 @@ export class FigureView extends DOMWidgetView {
             return;
         }
         // Unpack data
-        var styleData = data[0];
-        var styleTraces = data[1];
+        const styleData = data[0];
+        const styleTraces = data[1];
         // Construct restyle message to send to the Python side
         /** @type {Js2PyRestyleMsg} */
-        var restyleMsg = {
+        const restyleMsg = {
             style_data: styleData,
             style_traces: styleTraces,
             source_view_id: this.viewID,
@@ -985,7 +992,7 @@ export class FigureView extends DOMWidgetView {
             return;
         }
         /** @type {Js2PyRelayoutMsg} */
-        var relayoutMsg = {
+        const relayoutMsg = {
             relayout_data: data,
             source_view_id: this.viewID,
         };
@@ -1006,7 +1013,7 @@ export class FigureView extends DOMWidgetView {
             return;
         }
         /** @type {Js2PyUpdateMsg} */
-        var updateMsg = {
+        const updateMsg = {
             style_data: data['data'][0],
             style_traces: data['data'][1],
             layout_data: data['layout'],
@@ -1071,7 +1078,7 @@ export class FigureView extends DOMWidgetView {
             return;
         }
         /** @type {Js2PyPointsCallbackMsg} */
-        var pointsMsg = {
+        const pointsMsg = {
             event_type: event_type,
             points: this.buildPointsObject(data),
             device_state: this.buildInputDeviceStateObject(data),
@@ -1092,14 +1099,14 @@ export class FigureView extends DOMWidgetView {
      */
     do_addTraces() {
         /** @type {Py2JsAddTracesMsg} */
-        var msgData = this.model.get('_py2js_addTraces');
+        const msgData = this.model.get('_py2js_addTraces');
         if (msgData !== null) {
-            var that = this;
-            Plotly.addTraces(this.el, msgData.trace_data).then(function () {
+            const that = this;
+            Plotly.addTraces(this.el, msgData.trace_data).then(() => {
                 // ### Send trace deltas ###
                 that._sendTraceDeltas(msgData.trace_edit_id);
                 // ### Send layout delta ###
-                var layout_edit_id = msgData.layout_edit_id;
+                const layout_edit_id = msgData.layout_edit_id;
                 that._sendLayoutDelta(layout_edit_id);
             });
         }
@@ -1109,16 +1116,16 @@ export class FigureView extends DOMWidgetView {
      */
     do_deleteTraces() {
         /** @type {Py2JsDeleteTracesMsg} */
-        var msgData = this.model.get('_py2js_deleteTraces');
+        const msgData = this.model.get('_py2js_deleteTraces');
         if (msgData !== null) {
-            var delete_inds = msgData.delete_inds;
-            var that = this;
-            Plotly.deleteTraces(this.el, delete_inds).then(function () {
+            const delete_inds = msgData.delete_inds;
+            const that = this;
+            Plotly.deleteTraces(this.el, delete_inds).then(() => {
                 // ### Send trace deltas ###
-                var trace_edit_id = msgData.trace_edit_id;
+                const trace_edit_id = msgData.trace_edit_id;
                 that._sendTraceDeltas(trace_edit_id);
                 // ### Send layout delta ###
-                var layout_edit_id = msgData.layout_edit_id;
+                const layout_edit_id = msgData.layout_edit_id;
                 that._sendLayoutDelta(layout_edit_id);
             });
         }
@@ -1128,14 +1135,14 @@ export class FigureView extends DOMWidgetView {
      */
     do_moveTraces() {
         /** @type {Py2JsMoveTracesMsg} */
-        var msgData = this.model.get('_py2js_moveTraces');
+        const msgData = this.model.get('_py2js_moveTraces');
         if (msgData !== null) {
             // Unpack message
-            var currentInds = msgData.current_trace_inds;
-            var newInds = msgData.new_trace_inds;
+            const currentInds = msgData.current_trace_inds;
+            const newInds = msgData.new_trace_inds;
             // Check if the new trace indexes are actually different than
             // the current indexes
-            var inds_equal = _.isEqual(currentInds, newInds);
+            const inds_equal = _.isEqual(currentInds, newInds);
             if (!inds_equal) {
                 Plotly.moveTraces(this.el, currentInds, newInds);
             }
@@ -1146,10 +1153,10 @@ export class FigureView extends DOMWidgetView {
      */
     do_restyle() {
         /** @type {Py2JsRestyleMsg} */
-        var msgData = this.model.get('_py2js_restyle');
+        const msgData = this.model.get('_py2js_restyle');
         if (msgData !== null) {
-            var restyleData = msgData.restyle_data;
-            var traceIndexes = this.model._normalize_trace_indexes(msgData.restyle_traces);
+            const restyleData = msgData.restyle_data;
+            const traceIndexes = this.model._normalize_trace_indexes(msgData.restyle_traces);
             restyleData['_doNotReportToPy'] = true;
             Plotly.restyle(this.el, restyleData, traceIndexes);
             // ### Send trace deltas ###
@@ -1157,7 +1164,7 @@ export class FigureView extends DOMWidgetView {
             // traces.
             this._sendTraceDeltas(msgData.trace_edit_id);
             // ### Send layout delta ###
-            var layout_edit_id = msgData.layout_edit_id;
+            const layout_edit_id = msgData.layout_edit_id;
             this._sendLayoutDelta(layout_edit_id);
         }
     }
@@ -1166,15 +1173,15 @@ export class FigureView extends DOMWidgetView {
      */
     do_relayout() {
         /** @type {Py2JsRelayoutMsg} */
-        var msgData = this.model.get('_py2js_relayout');
+        const msgData = this.model.get('_py2js_relayout');
         if (msgData !== null) {
             if (msgData.source_view_id !== this.viewID) {
-                var relayoutData = msgData.relayout_data;
+                const relayoutData = msgData.relayout_data;
                 relayoutData['_doNotReportToPy'] = true;
                 Plotly.relayout(this.el, msgData.relayout_data);
             }
             // ### Send layout delta ###
-            var layout_edit_id = msgData.layout_edit_id;
+            const layout_edit_id = msgData.layout_edit_id;
             this._sendLayoutDelta(layout_edit_id);
         }
     }
@@ -1183,11 +1190,11 @@ export class FigureView extends DOMWidgetView {
      */
     do_update() {
         /** @type {Py2JsUpdateMsg} */
-        var msgData = this.model.get('_py2js_update');
+        const msgData = this.model.get('_py2js_update');
         if (msgData !== null) {
-            var style = msgData.style_data || {};
-            var layout = msgData.layout_data || {};
-            var traceIndexes = this.model._normalize_trace_indexes(msgData.style_traces);
+            const style = msgData.style_data || {};
+            const layout = msgData.layout_data || {};
+            const traceIndexes = this.model._normalize_trace_indexes(msgData.style_traces);
             style['_doNotReportToPy'] = true;
             Plotly.update(this.el, style, layout, traceIndexes);
             // ### Send trace deltas ###
@@ -1195,7 +1202,7 @@ export class FigureView extends DOMWidgetView {
             // traces.
             this._sendTraceDeltas(msgData.trace_edit_id);
             // ### Send layout delta ###
-            var layout_edit_id = msgData.layout_edit_id;
+            const layout_edit_id = msgData.layout_edit_id;
             this._sendLayoutDelta(layout_edit_id);
         }
     }
@@ -1204,29 +1211,29 @@ export class FigureView extends DOMWidgetView {
      */
     do_animate() {
         /** @type {Py2JsAnimateMsg} */
-        var msgData = this.model.get('_py2js_animate');
+        const msgData = this.model.get('_py2js_animate');
         if (msgData !== null) {
             // Unpack params
             // var animationData = msgData[0];
-            var animationOpts = msgData.animation_opts;
-            var styles = msgData.style_data;
-            var layout = msgData.layout_data;
-            var traceIndexes = this.model._normalize_trace_indexes(msgData.style_traces);
-            var animationData = {
+            const animationOpts = msgData.animation_opts;
+            const styles = msgData.style_data;
+            const layout = msgData.layout_data;
+            const traceIndexes = this.model._normalize_trace_indexes(msgData.style_traces);
+            const animationData = {
                 data: styles,
                 layout: layout,
                 traces: traceIndexes,
             };
             animationData['_doNotReportToPy'] = true;
-            var that = this;
+            const that = this;
             // @ts-ignore
-            Plotly.animate(this.el, animationData, animationOpts).then(function () {
+            Plotly.animate(this.el, animationData, animationOpts).then(() => {
                 // ### Send trace deltas ###
                 // We create an array of deltas corresponding to the
                 // animated traces.
                 that._sendTraceDeltas(msgData.trace_edit_id);
                 // ### Send layout delta ###
-                var layout_edit_id = msgData.layout_edit_id;
+                const layout_edit_id = msgData.layout_edit_id;
                 that._sendLayoutDelta(layout_edit_id);
             });
         }
@@ -1241,9 +1248,9 @@ export class FigureView extends DOMWidgetView {
      */
     _sendLayoutDelta(layout_edit_id) {
         // ### Handle layout delta ###
-        var layout_delta = createDeltaObject(this.getFullLayout(), this.model.get('_layout'));
+        const layout_delta = createDeltaObject(this.getFullLayout(), this.model.get('_layout'));
         /** @type{Js2PyLayoutDeltaMsg} */
-        var layoutDeltaMsg = {
+        const layoutDeltaMsg = {
             layout_delta: layout_delta,
             layout_edit_id: layout_edit_id,
         };
@@ -1259,16 +1266,16 @@ export class FigureView extends DOMWidgetView {
      * @private
      */
     _sendTraceDeltas(trace_edit_id) {
-        var trace_data = this.model.get('_data');
-        var traceIndexes = _.range(trace_data.length);
-        var trace_deltas = new Array(traceIndexes.length);
-        var fullData = this.getFullData();
-        for (var i = 0; i < traceIndexes.length; i++) {
-            var traceInd = traceIndexes[i];
+        const trace_data = this.model.get('_data');
+        const traceIndexes = _.range(trace_data.length);
+        const trace_deltas = new Array(traceIndexes.length);
+        const fullData = this.getFullData();
+        for (let i = 0; i < traceIndexes.length; i++) {
+            const traceInd = traceIndexes[i];
             trace_deltas[i] = createDeltaObject(fullData[traceInd], trace_data[traceInd]);
         }
         /** @type{Js2PyTraceDeltasMsg} */
-        var traceDeltasMsg = {
+        const traceDeltasMsg = {
             trace_deltas: trace_deltas,
             trace_edit_id: trace_edit_id,
         };
@@ -1292,7 +1299,7 @@ const numpy_dtype_to_typedarray_type = {
     float64: Float64Array,
 };
 function serializeTypedArray(v) {
-    var numpyType;
+    let numpyType;
     if (v instanceof Int8Array) {
         numpyType = 'int8';
     }
@@ -1321,7 +1328,7 @@ function serializeTypedArray(v) {
         // Don't understand it, return as is
         return v;
     }
-    var res = {
+    const res = {
         dtype: numpyType,
         shape: [v.length],
         value: v.buffer,
@@ -1332,21 +1339,21 @@ function serializeTypedArray(v) {
  * ipywidget JavaScript -> Python serializer
  */
 function js2py_serializer(v, widgetManager) {
-    var res;
+    let res;
     if (_.isTypedArray(v)) {
         res = serializeTypedArray(v);
     }
     else if (Array.isArray(v)) {
         // Serialize array elements recursively
         res = new Array(v.length);
-        for (var i = 0; i < v.length; i++) {
+        for (let i = 0; i < v.length; i++) {
             res[i] = js2py_serializer(v[i]);
         }
     }
     else if (_.isPlainObject(v)) {
         // Serialize object properties recursively
         res = {};
-        for (var p in v) {
+        for (const p in v) {
             if (v.hasOwnProperty(p)) {
                 res[p] = js2py_serializer(v[p]);
             }
@@ -1368,11 +1375,11 @@ function js2py_serializer(v, widgetManager) {
  * ipywidget Python -> Javascript deserializer
  */
 function py2js_deserializer(v, widgetManager) {
-    var res;
+    let res;
     if (Array.isArray(v)) {
         // Deserialize array elements recursively
         res = new Array(v.length);
-        for (var i = 0; i < v.length; i++) {
+        for (let i = 0; i < v.length; i++) {
             res[i] = py2js_deserializer(v[i]);
         }
     }
@@ -1387,14 +1394,14 @@ function py2js_deserializer(v, widgetManager) {
             // This was renamed `value` in 3.2 to work around a naming conflict
             // when saving widget state to a notebook.
             // @ts-ignore
-            var typedarray_type = numpy_dtype_to_typedarray_type[v.dtype];
-            var buffer = _.has(v, 'value') ? v.value.buffer : v.buffer.buffer;
+            const typedarray_type = numpy_dtype_to_typedarray_type[v.dtype];
+            const buffer = _.has(v, 'value') ? v.value.buffer : v.buffer.buffer;
             res = new typedarray_type(buffer);
         }
         else {
             // Deserialize object properties recursively
             res = {};
-            for (var p in v) {
+            for (const p in v) {
                 if (v.hasOwnProperty(p)) {
                     res[p] = py2js_deserializer(v[p]);
                 }
@@ -1463,12 +1470,12 @@ function fullMergeCustomizer(objValue, srcValue, key) {
  */
 function performRelayoutLike(parentObj, relayoutData) {
     // Perform a relayout style operation on a given parent object
-    for (var rawKey in relayoutData) {
+    for (const rawKey in relayoutData) {
         if (!relayoutData.hasOwnProperty(rawKey)) {
             continue;
         }
         // Extract value for this key
-        var relayoutVal = relayoutData[rawKey];
+        const relayoutVal = relayoutData[rawKey];
         // Set property value
         if (relayoutVal === null) {
             _.unset(parentObj, rawKey);
@@ -1504,22 +1511,22 @@ function performRelayoutLike(parentObj, relayoutData) {
  */
 function performRestyleLike(parentArray, restyleData, restyleTraces) {
     // Loop over the properties of restyleData
-    for (var rawKey in restyleData) {
+    for (const rawKey in restyleData) {
         if (!restyleData.hasOwnProperty(rawKey)) {
             continue;
         }
         // Extract value for property and normalize into a value list
-        var valArray = restyleData[rawKey];
+        let valArray = restyleData[rawKey];
         if (!Array.isArray(valArray)) {
             valArray = [valArray];
         }
         // Loop over the indexes of the traces being restyled
-        for (var i = 0; i < restyleTraces.length; i++) {
+        for (let i = 0; i < restyleTraces.length; i++) {
             // Get trace object
-            var traceInd = restyleTraces[i];
-            var trace = parentArray[traceInd];
+            const traceInd = restyleTraces[i];
+            const trace = parentArray[traceInd];
             // Extract value for this trace
-            var singleVal = valArray[i % valArray.length];
+            const singleVal = valArray[i % valArray.length];
             // Set property value
             if (singleVal === null) {
                 _.unset(trace, rawKey);
@@ -1551,14 +1558,14 @@ function performRestyleLike(parentArray, restyleData, restyleTraces) {
  */
 function performMoveTracesLike(parentArray, currentInds, newInds) {
     // ### Remove by currentInds in reverse order ###
-    var movingTracesData = [];
-    for (var ci = currentInds.length - 1; ci >= 0; ci--) {
+    let movingTracesData = [];
+    for (let ci = currentInds.length - 1; ci >= 0; ci--) {
         // Insert moving parentArray at beginning of the list
         movingTracesData.splice(0, 0, parentArray[currentInds[ci]]);
         parentArray.splice(currentInds[ci], 1);
     }
     // ### Sort newInds and movingTracesData by newInds ###
-    var newIndexSortedArrays = _(newInds)
+    const newIndexSortedArrays = _(newInds)
         .zip(movingTracesData)
         .sortBy(0)
         .unzip()
@@ -1566,7 +1573,7 @@ function performMoveTracesLike(parentArray, currentInds, newInds) {
     newInds = newIndexSortedArrays[0];
     movingTracesData = newIndexSortedArrays[1];
     // ### Insert by newInds in forward order ###
-    for (var ni = 0; ni < newInds.length; ni++) {
+    for (let ni = 0; ni < newInds.length; ni++) {
         parentArray.splice(newInds[ni], 0, movingTracesData[ni]);
     }
 }
@@ -1590,8 +1597,8 @@ function performMoveTracesLike(parentArray, currentInds, newInds) {
  *
  */
 function performRemoveProps(parentObj, keyPaths) {
-    for (var i = 0; i < keyPaths.length; i++) {
-        var keyPath = keyPaths[i];
+    for (let i = 0; i < keyPaths.length; i++) {
+        const keyPath = keyPaths[i];
         _.unset(parentObj, keyPath);
     }
 }
@@ -1625,7 +1632,7 @@ function performRemoveProps(parentObj, keyPaths) {
  */
 function createDeltaObject(fullObj, removeObj) {
     // Initialize result as object or array
-    var res;
+    let res;
     if (Array.isArray(fullObj)) {
         res = new Array(fullObj.length);
     }
@@ -1637,7 +1644,7 @@ function createDeltaObject(fullObj, removeObj) {
         removeObj = {};
     }
     // Iterate over object properties or array indices
-    for (var p in fullObj) {
+    for (const p in fullObj) {
         if (p[0] !== '_' && // Don't consider private properties
             fullObj.hasOwnProperty(p) && // Exclude parent properties
             fullObj[p] !== null // Exclude cases where fullObj doesn't
@@ -1651,14 +1658,14 @@ function createDeltaObject(fullObj, removeObj) {
                 // Let uids through
                 // property has non-null value in fullObj that doesn't
                 // match the value in removeObj
-                var fullVal = fullObj[p];
+                const fullVal = fullObj[p];
                 if (removeObj.hasOwnProperty(p) && typeof fullVal === 'object') {
                     // Recurse over object properties
                     if (Array.isArray(fullVal)) {
                         if (fullVal.length > 0 && typeof fullVal[0] === 'object') {
                             // We have an object array
                             res[p] = new Array(fullVal.length);
-                            for (var i = 0; i < fullVal.length; i++) {
+                            for (let i = 0; i < fullVal.length; i++) {
                                 if (!Array.isArray(removeObj[p]) || removeObj[p].length <= i) {
                                     res[p][i] = fullVal[i];
                                 }
@@ -1674,7 +1681,7 @@ function createDeltaObject(fullObj, removeObj) {
                     }
                     else {
                         // object
-                        var full_obj = createDeltaObject(fullVal, removeObj[p]);
+                        const full_obj = createDeltaObject(fullVal, removeObj[p]);
                         if (Object.keys(full_obj).length > 0) {
                             // new object is not empty
                             res[p] = full_obj;
@@ -1698,19 +1705,22 @@ function createDeltaObject(fullObj, removeObj) {
     return res;
 }
 function randstr(existing, bits, base, _recursion) {
-    if (!base)
+    if (!base) {
         base = 16;
-    if (bits === undefined)
+    }
+    if (bits === undefined) {
         bits = 24;
-    if (bits <= 0)
+    }
+    if (bits <= 0) {
         return '0';
-    var digits = Math.log(Math.pow(2, bits)) / Math.log(base);
-    var res = '';
-    var i, b, x;
+    }
+    let digits = Math.log(Math.pow(2, bits)) / Math.log(base);
+    let res = '';
+    let i, b, x;
     for (i = 2; digits === Infinity; i *= 2) {
         digits = (Math.log(Math.pow(2, bits / i)) / Math.log(base)) * i;
     }
-    var rem = digits - Math.floor(digits);
+    const rem = digits - Math.floor(digits);
     for (i = 0; i < Math.floor(digits); i++) {
         x = Math.floor(Math.random() * base).toString(base);
         res = x + res;
@@ -1720,7 +1730,7 @@ function randstr(existing, bits, base, _recursion) {
         x = Math.floor(Math.random() * b).toString(base);
         res = x + res;
     }
-    var parsed = parseInt(res, base);
+    const parsed = parseInt(res, base);
     if ((existing && existing[res]) ||
         (parsed !== Infinity && parsed >= Math.pow(2, bits))) {
         if (_recursion > 10) {
@@ -1729,7 +1739,8 @@ function randstr(existing, bits, base, _recursion) {
         }
         return randstr(existing, bits, base, (_recursion || 0) + 1);
     }
-    else
+    else {
         return res;
+    }
 }
 //# sourceMappingURL=Figure.js.map