convert all remaining components/ to TypeScript

87 files: annotations (11), annotations3d (5), calendars (2),
colorbar (6), grid (1), images (5), modebar (7), rangeselector (6),
rangeslider (8), selections (7+2 subdirs), shapes (11+4 subdirs),
sliders (5), updatemenus (6+1 scrollbox).

Fixed 118 tsc errors: mostly `: any` on object literals that get
dynamic properties, `as any` casts, optional params.

src/components/ is now 100% TypeScript (136 files, 0 JS).
Total: 308 .ts / 527 .js (37% converted). tsc --noEmit: 0 errors.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: ryan-williams

src/components/annotations/arrow_paths.js src/components/annotations/arrow_paths.tssrc/components/annotations/arrow_paths.js renamed to src/components/annotations/arrow_paths.ts

@@ -4,7 +4,7 @@ import cartesianConstants from '../../plots/cartesian/constants.js';
 import { templatedArray } from '../../plot_api/plot_template.js';
 import axisPlaceableObjs from '../../constants/axis_placeable_objects.js';
 
-function arrowAxisRefDescription(axis) {
+function arrowAxisRefDescription(axis: any) {
     return [
         'In order for absolute positioning of the arrow to work, *a' + axis +
         'ref* must be exactly the same as *' + axis + 'ref*, otherwise *a' + axis +
@@ -19,7 +19,7 @@ function arrowAxisRefDescription(axis) {
     ].join(' ');
 }
 
-function arrowCoordinateDescription(axis, lower, upper) {
+function arrowCoordinateDescription(axis: any, lower: any, upper: any) {
     return [
         'Sets the', axis, 'component of the arrow tail about the arrow head.',
         'If `a' + axis + 'ref` is `pixel`, a positive (negative)',

src/components/annotations/attributes.js src/components/annotations/attributes.tssrc/components/annotations/attributes.js renamed to src/components/annotations/attributes.ts

@@ -3,7 +3,7 @@ import Axes from '../../plots/cartesian/axes.js';
 import _draw from './draw.js';
 const { draw } = _draw;
 
-export default function calcAutorange(gd) {
+export default function calcAutorange(gd: any) {
     var fullLayout = gd._fullLayout;
     var annotationList = Lib.filterVisible(fullLayout.annotations);
 
@@ -12,14 +12,14 @@ export default function calcAutorange(gd) {
     }
 }
 
-function annAutorange(gd) {
+function annAutorange(gd: any) {
     var fullLayout = gd._fullLayout;
 
     // find the bounding boxes for each of these annotations'
     // relative to their anchor points
     // use the arrow and the text bg rectangle,
     // as the whole anno may include hidden text in its bbox
-    Lib.filterVisible(fullLayout.annotations).forEach(function(ann) {
+    Lib.filterVisible(fullLayout.annotations).forEach(function(ann: any) {
         var xa = Axes.getFromId(gd, ann.xref);
         var ya = Axes.getFromId(gd, ann.yref);
         var xRefType = Axes.getRefType(ann.xref);
@@ -31,7 +31,7 @@ function annAutorange(gd) {
     });
 }
 
-function calcAxisExpansion(ann, ax) {
+function calcAxisExpansion(ann: any, ax: any) {
     var axId = ax._id;
     var letter = axId.charAt(0);
     var pos = ann[letter];

…components/annotations/calc_autorange.js …components/annotations/calc_autorange.tssrc/components/annotations/calc_autorange.js renamed to src/components/annotations/calc_autorange.ts src/components/annotations/calc_autorange.js renamed to src/components/annotations/calc_autorange.ts

@@ -17,7 +17,7 @@ export default {
  *
  * returns: boolean
  */
-function hasClickToShow(gd, hoverData) {
+function hasClickToShow(gd: any, hoverData: any) {
     var sets = getToggleSets(gd, hoverData);
     return sets.on.length > 0 || sets.explicitOff.length > 0;
 }
@@ -32,11 +32,11 @@ function hasClickToShow(gd, hoverData) {
  *
  * returns: Promise that the update is complete
  */
-function onClick(gd, hoverData) {
+function onClick(gd: any, hoverData: any) {
     var toggleSets = getToggleSets(gd, hoverData);
     var onSet = toggleSets.on;
     var offSet = toggleSets.off.concat(toggleSets.explicitOff);
-    var update = {};
+    var update: any = {};
     var annotationsOut = gd._fullLayout.annotations;
     var i, editHelpers;
 
@@ -71,7 +71,7 @@ function onClick(gd, hoverData) {
  *   explicitOff: Array (indices to turn off because you *are* hovering on them)
  * }
  */
-function getToggleSets(gd, hoverData) {
+function getToggleSets(gd: any, hoverData: any) {
     var annotations = gd._fullLayout.annotations;
     var onSet = [];
     var offSet = [];
@@ -121,6 +121,6 @@ function getToggleSets(gd, hoverData) {
 }
 
 // to handle log axes until v3
-function clickData2r(d, ax) {
+function clickData2r(d: any, ax: any) {
     return ax.type === 'log' ? ax.l2r(d) : ax.d2r(d);
 }

src/components/annotations/click.js src/components/annotations/click.tssrc/components/annotations/click.js renamed to src/components/annotations/click.ts

@@ -1,7 +1,7 @@
 import Lib from '../../lib/index.js';
 import Color from '../color/index.js';
 
-export default function handleAnnotationCommonDefaults(annIn, annOut, fullLayout, coerce) {
+export default function handleAnnotationCommonDefaults(annIn: any, annOut: any, fullLayout: any, coerce: any) {
     coerce('opacity');
     var bgColor = coerce('bgcolor');
 

…omponents/annotations/common_defaults.js …omponents/annotations/common_defaults.tssrc/components/annotations/common_defaults.js renamed to src/components/annotations/common_defaults.ts src/components/annotations/common_defaults.js renamed to src/components/annotations/common_defaults.ts

@@ -1,7 +1,7 @@
 import isNumeric from 'fast-isnumeric';
 import toLogRange from '../../lib/to_log_range.js';
 
-export default function convertCoords(gd, ax, newType, doExtra) {
+export default function convertCoords(gd: any, ax: any, newType: any, doExtra: any) {
     ax = ax || {};
 
     var toLog = (newType === 'log') && (ax.type === 'linear');
@@ -14,7 +14,7 @@ export default function convertCoords(gd, ax, newType, doExtra) {
     var ann;
     var attrPrefix;
 
-    function convert(attr) {
+    function convert(attr: any) {
         var currentVal = ann[attr];
         var newVal = null;
 

…components/annotations/convert_coords.js …components/annotations/convert_coords.tssrc/components/annotations/convert_coords.js renamed to src/components/annotations/convert_coords.ts src/components/annotations/convert_coords.js renamed to src/components/annotations/convert_coords.ts

@@ -4,15 +4,15 @@ import handleArrayContainerDefaults from '../../plots/array_container_defaults.j
 import handleAnnotationCommonDefaults from './common_defaults.js';
 import attributes from './attributes.js';
 
-export default function supplyLayoutDefaults(layoutIn, layoutOut) {
+export default function supplyLayoutDefaults(layoutIn: any, layoutOut: any) {
     handleArrayContainerDefaults(layoutIn, layoutOut, {
         name: 'annotations',
         handleItemDefaults: handleAnnotationDefaults
     });
 }
 
-function handleAnnotationDefaults(annIn, annOut, fullLayout) {
-    function coerce(attr, dflt) {
+function handleAnnotationDefaults(annIn: any, annOut: any, fullLayout: any) {
+    function coerce(attr: any, dflt?: any) {
         return Lib.coerce(annIn, annOut, attributes, attr, dflt);
     }
 

src/components/annotations/defaults.js src/components/annotations/defaults.tssrc/components/annotations/defaults.js renamed to src/components/annotations/defaults.ts

@@ -22,7 +22,7 @@ export default {
 /*
  * draw: draw all annotations without any new modifications
  */
-function draw(gd) {
+function draw(gd: any) {
     var fullLayout = gd._fullLayout;
 
     fullLayout._infolayer.selectAll('.annotation').remove();
@@ -41,7 +41,7 @@ function draw(gd) {
  *
  * index (int): the annotation to draw
  */
-function drawOne(gd, index) {
+function drawOne(gd: any, index: any) {
     var fullLayout = gd._fullLayout;
     var options = fullLayout.annotations[index] || {};
     var xa = Axes.getFromId(gd, options.xref);
@@ -58,7 +58,7 @@ function drawOne(gd, index) {
 // the plot.
 // axDomainRef: if true and axa defined, draws relative to axis domain,
 // otherwise draws relative to data (if axa defined) or paper (if not).
-function shiftPosition(axa, dAx, axLetter, gs, options) {
+function shiftPosition(axa: any, dAx: any, axLetter: any, gs: any, options: any) {
     var optAx = options[axLetter];
     var axRef = options[axLetter + 'ref'];
     var vertical = axLetter.indexOf('y') !== -1;
@@ -89,7 +89,7 @@ function shiftPosition(axa, dAx, axLetter, gs, options) {
  * @param {object | undefined} xa : full x-axis object to compute subplot pos-to-px
  * @param {object | undefined} ya : ... y-axis
  */
-function drawRaw(gd, options, index, subplotId, xa, ya) {
+function drawRaw(gd: any, options: any, index: any, subplotId: any, xa: any, ya: any) {
     var fullLayout = gd._fullLayout;
     var gs = gd._fullLayout._size;
     var edits = gd._context.edits;
@@ -125,7 +125,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
 
     // calculated pixel positions
     // x & y each will get text, head, and tail as appropriate
-    var annPosPx = {x: {}, y: {}};
+    var annPosPx: any = {x: {}, y: {}};
     var textangle = +options.textangle || 0;
 
     // create the components
@@ -144,8 +144,8 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
     var editTextPosition = edits[options.showarrow ? 'annotationTail' : 'annotationPosition'];
     var textEvents = options.captureevents || edits.annotationText || editTextPosition;
 
-    function makeEventData(initialEvent) {
-        var eventData = {
+    function makeEventData(initialEvent: any) {
+        var eventData: any = {
             index: index,
             annotation: options._input,
             fullAnnotation: options,
@@ -160,7 +160,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
     var annTextGroupInner = annTextGroup.append('g')
         .style('pointer-events', textEvents ? 'all' : null)
         .call(setCursor, 'pointer')
-        .on('click', function(event) {
+        .on('click', function(event: any) {
             gd._dragging = false;
             gd.emit('plotly_clickannotation', makeEventData(event));
         });
@@ -232,7 +232,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
         .classed('annotation-text', true)
         .text(text);
 
-    function textLayout(s) {
+    function textLayout(s: any) {
         s.call(font, font)
         .attr({
             'text-anchor': {
@@ -269,7 +269,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
         var outerWidth = Math.round(annWidth + 2 * borderfull);
         var outerHeight = Math.round(annHeight + 2 * borderfull);
 
-        function shiftFraction(v, anchor) {
+        function shiftFraction(v: any, anchor: any) {
             if(anchor === 'auto') {
                 if(v < 1 / 3) anchor = 'left';
                 else if(v > 2 / 3) anchor = 'right';
@@ -484,7 +484,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
          * dx and dy are normally zero, but when you are dragging the textbox
          * while the head stays put, dx and dy are the pixel offsets
          */
-        var drawArrow = function(dx, dy) {
+        var drawArrow = function(dx: any, dy: any) {
             annGroup
                 .selectAll('.annotation-arrow-g')
                 .remove();
@@ -520,16 +520,16 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
             // casting for rotated boxes: see which edges intersect a
             // line from the arrowhead to far away and reduce with xor
             // to get the parity of the number of intersections.
-            if(edges.reduce(function(a, x) {
-                return a ^
-                    !!Lib.segmentsIntersect(headX, headY, headX + 1e6, headY + 1e6,
-                            x[0], x[1], x[2], x[3]);
+            if(edges.reduce(function(a: any, x: any) {
+                return (a as any) ^
+                    (!!Lib.segmentsIntersect(headX, headY, headX + 1e6, headY + 1e6,
+                            x[0], x[1], x[2], x[3]) as any);
             }, false)) {
                 // no line or arrow - so quit drawArrow now
                 return;
             }
 
-            edges.forEach(function(x) {
+            edges.forEach(function(x: any) {
                 var p = Lib.segmentsIntersect(tailX, tailY, headX, headY,
                             x[0], x[1], x[2], x[3]);
                 if(p) {
@@ -594,7 +594,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
                             modifyBase(ya._name + '.autorange', true);
                         }
                     },
-                    moveFn: function(dx, dy) {
+                    moveFn: function(dx: any, dy: any) {
                         var annxy0 = applyTransform(annx0, anny0);
                         var xcenter = annxy0[0] + dx;
                         var ycenter = annxy0[1] + dy;
@@ -625,7 +625,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
                     doneFn: function() {
                         Registry.call('_guiRelayout', gd, getUpdateObj());
                         var notesBox = document.querySelector('.js-notes-box-panel');
-                        if(notesBox) notesBox.redraw(notesBox.selectedObj);
+                        if(notesBox) (notesBox as any).redraw((notesBox as any).selectedObj);
                     }
                 });
             }
@@ -645,7 +645,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
                 prepFn: function() {
                     baseTextTransform = annTextGroup.attr('transform');
                 },
-                moveFn: function(dx, dy) {
+                moveFn: function(dx: any, dy: any) {
                     var csr = 'pointer';
                     if(options.showarrow) {
                         // for these 2 calls to shiftPosition, it is assumed xa, ya are
@@ -706,7 +706,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
 
                     setCursor(annTextGroupInner, csr);
                 },
-                clickFn: function(_, initialEvent) {
+                clickFn: function(_: any, initialEvent: any) {
                     if(options.captureevents) {
                         gd.emit('plotly_clickannotation', makeEventData(initialEvent));
                     }
@@ -715,7 +715,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
                     setCursor(annTextGroupInner);
                     Registry.call('_guiRelayout', gd, getUpdateObj());
                     var notesBox = document.querySelector('.js-notes-box-panel');
-                    if(notesBox) notesBox.redraw(notesBox.selectedObj);
+                    if(notesBox) (notesBox as any).redraw((notesBox as any).selectedObj);
                 }
             });
         }
@@ -724,7 +724,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
     if(edits.annotationText) {
         annText.call(svgTextUtils.makeEditable, {delegate: annTextGroupInner, gd: gd})
             .call(textLayout)
-            .on('edit', function(_text) {
+            .on('edit', function(_text: any) {
                 options.text = _text;
 
                 this.call(textLayout);

src/components/annotations/draw.js src/components/annotations/draw.tssrc/components/annotations/draw.js renamed to src/components/annotations/draw.ts

@@ -6,7 +6,7 @@ var strScale = Lib.strScale;
 var strRotate = Lib.strRotate;
 var strTranslate = Lib.strTranslate;
 
-export default function drawArrowHead(el3, ends, options) {
+export default function drawArrowHead(el3: any, ends: any, options: any) {
     var el = el3.node();
     var headStyle = ARROWPATHS[options.arrowhead || 0];
     var startHeadStyle = ARROWPATHS[options.startarrowhead || 0];
@@ -95,7 +95,7 @@ export default function drawArrowHead(el3, ends, options) {
 
     function hideLine() { el3.style('stroke-dasharray', '0px,100px'); }
 
-    function drawhead(arrowHeadStyle, p, rot, arrowScale) {
+    function drawhead(arrowHeadStyle: any, p: any, rot: any, arrowScale: any) {
         if(!arrowHeadStyle.path) return;
         if(arrowHeadStyle.noRotate) rot = 0;