Skip to content

feat: LEAP-1896: Add scrollbar support to Visualizer #7165

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Mar 12, 2025

Conversation

Gondragos
Copy link
Collaborator

@Gondragos Gondragos commented Mar 4, 2025

Introduced a scroll filler element to improve handling of browser scroll size inconsistencies in the Visualizer. Updated relevant methods and styles to adjust the layout dynamically based on the calculated scroll size. Added safeguards to mouse events.
image

This pull request introduces several enhancements and fixes to the Visualizer and Waveform components, as well as some updates to the testing helpers. The most significant changes include the addition of a scrollbar, improvements to the Visualizer's scroll handling, and updates to ensure the AudioUltra's readiness state.

Enhancements to Visualizer and Waveform:

  • Added BROWSER_SCROLLBAR_WIDTH constant for dynamic scrollbar width calculation in Utils.ts.
  • Introduced scrollFiller element and initScrollBar method to manage scrollable area size in Visualizer.ts. [1] [2]
  • Splited setScrollLeft and _setScrollLeft methods to handle scroll position updates in Visualizer.ts.
  • Added redrawCursor method to improve synced cursor rendering in Visualizer.ts.
  • Updated centerToCurrentTime method to use setScrollLeft to keep the scrollbar up to date.

Improvements to readiness and event handling:

  • Added checkReady method to ensure Waveform readiness state in model.js. (There were some issues capturing the final drawing state after the audio finished loading, especially in "view all" mode and tests.)
  • Updated syncCursor method to use redrawCursor for cursor updates in Waveform.ts. (to avoid redrawing all layers)
  • Added isDrawing getter to Waveform for checking drawing state in Waveform.ts.

Testing helpers updates:

  • Added waitForObjectsReady call in isReady method to ensure readiness in AudioView.ts. [1] [2]

@github-actions github-actions bot added the feat label Mar 4, 2025
Copy link

netlify bot commented Mar 4, 2025

Deploy Preview for heartex-docs canceled.

Name Link
🔨 Latest commit bc1e477
🔍 Latest deploy log https://app.netlify.com/sites/heartex-docs/deploys/67d1ad3f45cdf00007cbf961

Copy link

netlify bot commented Mar 4, 2025

Deploy Preview for label-studio-docs-new-theme canceled.

Name Link
🔨 Latest commit bc1e477
🔍 Latest deploy log https://app.netlify.com/sites/label-studio-docs-new-theme/deploys/67d1ad3f2a3e1c0008520e7a

Introduced a scroll filler element to improve handling of browser scroll size inconsistencies in the Visualizer. Updated relevant methods and styles to adjust layout dynamically based on the calculated scroll size. Added safeguards to mouse events.
@Gondragos Gondragos force-pushed the fb-LEAP-1896/audio-scroll branch from 003d550 to 046fb9c Compare March 4, 2025 12:10
Renamed `BROWSER_SCROLL_SIZE` to `BROWSER_SCROLLBAR_WIDTH` to provide a clearer description of its purpose. Updated related references and comments to reflect this change, ensuring consistency and maintaining accurate documentation.
@Gondragos Gondragos force-pushed the fb-LEAP-1896/audio-scroll branch from 162fe3a to f315f8b Compare March 4, 2025 16:17
Refactored scrollbar logic into a new `initScrollBar` method for better clarity and functionality. Added `scrollbarGutter: stable` for potential consistent scrollbar behavior across browsers.
Updated pixel color comparison coordinates in audio region tests to ensure accuracy and consistency. Added a getter to check the readiness of objects in the model and updated `isReady` logic in test helpers for smoother synchronization.
Added a short wait after verifying the loading bar's absence to ensure the AudioView has completely rendered. This change addresses potential flakiness in tests caused by premature assertions.
@Gondragos Gondragos requested a review from hlomzik March 5, 2025 08:19
@MihajloHoma
Copy link
Contributor

MihajloHoma commented Mar 6, 2025

/git merge

Workflow run
Successfully merged: 6 files changed, 86 insertions(+), 21 deletions(-)

@Gondragos
Copy link
Collaborator Author

Gondragos commented Mar 6, 2025

/git merge develop

Workflow run
Successfully merged: create mode 100644 web/tsconfig.json

@MihajloHoma
Copy link
Contributor

MihajloHoma commented Mar 10, 2025

/git merge

Workflow run
Successfully merged: 11 files changed, 21 insertions(+), 17 deletions(-)

@Gondragos
Copy link
Collaborator Author

Gondragos commented Mar 11, 2025

/git merge

Workflow run
Successfully merged: create mode 100644 web/libs/ui/src/lib/enterprise-badge/enterprise-badge.tsx

Gondragos and others added 5 commits March 11, 2025 06:57
Replaced redundant full redraw with a targeted cursor update. Added `redrawCursor` method in Visualizer for efficient cursor rendering, enhancing performance and reducing unnecessary visual updates.
Previously, `onReady` was called without considering the `isDrawing` state, which could lead to premature execution. Introduced `checkReady` to delay readiness until drawing completes, ensuring proper timing and avoiding potential issues.
Reordered method calls in the Visualizer update loop to ensure proper rendering. Moved `updateScrollFiller` and `setScrollLeft` to prevent visual inconsistencies. This resolves timing issues when updating the cursor position and timeline.
@Gondragos Gondragos force-pushed the fb-LEAP-1896/audio-scroll branch from 169a15e to b6067dc Compare March 12, 2025 07:25
@Gondragos Gondragos requested a review from hlomzik March 12, 2025 07:32
@Gondragos
Copy link
Collaborator Author

Gondragos commented Mar 12, 2025

/git merge develop

Workflow run
Successfully merged: delete mode 100644 label_studio/templates/401.html

@Gondragos Gondragos merged commit 05a419b into develop Mar 12, 2025
34 checks passed
@Gondragos Gondragos deleted the fb-LEAP-1896/audio-scroll branch March 12, 2025 17:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants