swagger-api / swagger-api/swagger-ui

Regex-patterned example values are regenerated on every keystroke in the UI

Open
#8,297 0 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
29k
Forks
9.3k
Avg merge
2d 23h
Merged PRs (30d)
25

Description

Q&A (please complete the following information)
  • OS: macOS 12.6
  • Browser: Firefox
  • Version: 104
  • Method of installation:
  • Swagger-UI version: 4.14.0
  • Swagger/OpenAPI version: OpenAPI 3.0
Content & configuration

Example behavior can be seen on https://demo.nautobot.com/api/docs/ but I do not believe this issue to be specific to our schema or configuration of Swagger-UI (which is using drf-spectactular-sidecar Python package for distribution/installation).

Describe the bug you're encountering

Upon expanding any API endpoint that provides an "Example Value", then selecting "Try it out", it appears that any input into any of the input fields in the UI causes the entire "Example Value" to be regenerated, substantially slowing the UI when the example value (schema) is relatively large and/or complex. This is most noticeable on fields with a regex pattern as a new random string appears in the example value on each such regeneration/refresh.

Worse, this refreshing behavior isn't even specific to the particular API endpoint for which input is being entered -- if multiple API endpoints are expanded, it appears that all "Example Value" data is regenerated on any input to any endpoint, making the slowdown that much more significant.

To reproduce...

Steps to reproduce the behavior:

  1. Go to https://demo.nautobot.com/api/docs/
  2. Can be seen for any API endpoint, but GET /circuits/provider-networks/{id}/ is a decent example.
  3. Expand the endpoint, and click "Try it out".
  4. Enter text into any input field (for example, "id" for the above endpoint)
  5. Observe that each slug field in the "Example Value" is refreshed to a new random value after every keystroke.
Expected behavior

Example values should be generated once and once only and should not change in response to user input. The UI should be more responsive and performant than it currently is.

Screenshots

Note how the slug values (which are defined with a pattern in the schema) change in each successive screenshot:

image

image

image

image

Additional context or thoughts

Appears related to #7829, may also be a contributing factor to #6787?

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 behavior in the Swagger UI demo using GET /circuits/provider-networks/{id}/, then trace how Example Value data is regenerated when an input changes. Review related issue #7829 for context. Done means regex-patterned examples remain stable during input and the UI no longer regenerates unrelated endpoint examples on every keystroke.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, openapi
Domain
frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.