Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[BUG]: `ModeBar` generated type should be more specific

Open
#7,800 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
48/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Quiet

Research direction

Start with src/types/generated/components/modebar.d.ts, src/components/modebar/attributes.ts, and src/types/lib/attributes.d.ts to trace how ModeBar properties become TypeScript types. Read src/components/modebar/constants.js to understand the runtime button registry before evaluating the possible approaches. Done means add and remove expose the intended button-name type, uirevision is number | string, and uid is present without losing the generated type structure.

Written by the indexing model from the issue text.

Description

bug P2 plotly-internal size: 1
Description

The generated ModeBar type in src/types/generated/components/modebar.d.ts is less specific than the hand-written ModeBar in @types/plotly.js. The type generator faithfully maps valType: 'string' to string and valType: 'any' to any, but this loses semantic type information for the add, remove, and uirevision properties.

Property Generated type Expected type (per DT)
add string | string[] ModeBarDefaultButtons | ModeBarDefaultButtons[]
remove string | string[] ModeBarDefaultButtons | ModeBarDefaultButtons[]
uirevision any number | string
uid missing string

Consumers lose autocomplete for valid modebar button names when using layout.modebar.add or layout.modebar.remove.

Steps to reproduce
  1. Use layout.modebar.add in a TypeScript project importing from plotly.js
  2. Observe that the type accepts any string instead of suggesting valid button names like 'lasso2d', 'select2d', 'zoom2d', etc.
Notes

Root cause: The add and remove attributes in src/components/modebar/attributes.ts use valType: 'string' with arrayOk: true. The type generation pipeline (ValTypeToTS in src/types/lib/attributes.d.ts) already supports narrowing StringAttr to a literal union when a values array is provided — but the modebar attributes don't provide one. The button names are dynamically computed at runtime in src/components/modebar/constants.js (foreButtons is built by iterating over the button registry), so they can't be passed as a static as const array.

Possible solutions:

  1. Override the generated type in layout.d.ts — Import the generated ModeBar and re-export a refined version using Omit + tighter property types. Keeps the generated base while tightening the public API. Low effort, no changes to the generator or attribute system.

  2. Inline static values in the attribute definition — Add values: ['lasso2d', 'select2d', ...] as const directly to the add and remove attributes in src/components/modebar/attributes.ts. The existing ValTypeToTS conditional would then produce the union automatically. Downside: duplicates the button list (source of truth is the button registry, not this array).

  3. Make foreButtons statically typed — Convert src/components/modebar/constants.js to TypeScript with static as const arrays instead of dynamically computing the list from the button registry. The attributes could then reference the const array as values. Downside: requires restructuring how buttons are registered and breaks the dynamic discovery pattern.

Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
1d 19h
Merged PRs (30d)
21

Getting set up

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.

More from plotly/plotly.js

All issues in plotly/plotly.js

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.