Skip to content

PB-534: transparency slider works in real time#865

Merged
ltkum merged 2 commits intodevelopfrom
bugfix-PB-534-real-time-opacity-change
Jun 7, 2024
Merged

PB-534: transparency slider works in real time#865
ltkum merged 2 commits intodevelopfrom
bugfix-PB-534-real-time-opacity-change

Conversation

@ltkum
Copy link
Contributor

@ltkum ltkum commented May 27, 2024

Issue: The transparency slider did not change the opacity in real time when users were moving the slider, only applying the changes when it was released

Fix: When clicking on the slider, it sets an interval which updates the opacity as long as we're handling the slider. This interval is set to 100ms, which allows to see the changes happen often enough to work, without burdening the backend with too much commits. We also reduce the number of commits by never committing the same value as the one stored.

If this puts too much strain on the backend, we can wait until post prod to find a more elegant solution.

Test link

@ltkum ltkum requested a review from pakb May 27, 2024 11:04
@github-actions github-actions bot added the bug label May 27, 2024
@cypress
Copy link

cypress bot commented May 27, 2024

Passing run #2401 ↗︎

0 207 20 0 Flakiness 0

Details:

PB 534: using debounce method for transparency slider
Project: web-mapviewer Commit: 6a678d6d33
Status: Passed Duration: 06:12 💡
Started: Jun 7, 2024 11:22 AM Ended: Jun 7, 2024 11:28 AM

Review all test suite changes for PR #865 ↗︎

Copy link
Contributor

@pakb pakb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it would make sense to debounce it just a little bit, so that it doesn't fire a store action each little changes

@ltkum
Copy link
Contributor Author

ltkum commented May 28, 2024

@pakb : I've already put a 100ms interval to avoid firing it too fast, I could make it slower.
I experimented with also setting a difference threshold when moving the slider (not when releasing it) and it led to sometimes the opacity changing after releasing it.
I could increase the time for the interval. Do you have a value that is sufficient for "real time" in your opinion ? I was Thinking maybe 200ms.

@ltkum ltkum force-pushed the bugfix-PB-534-real-time-opacity-change branch from eb54f47 to 494da51 Compare May 28, 2024 09:19
@pakb
Copy link
Contributor

pakb commented May 29, 2024

I was more referring on using what is in src/utils/debounce.js (see FeatureStyleEdit.vue for an example of use) instead of using setInterval

@ltkum ltkum requested a review from pakb May 31, 2024 08:28
@ltkum ltkum force-pushed the bugfix-PB-534-real-time-opacity-change branch from 494da51 to 9c2a9c3 Compare June 4, 2024 11:18
Issue: The transparency slider did not change the opacity in real time when users were moving the slider, only applying the changes when it was released

Fix: When clicking on the slider, it sets an interval which updates the opacity as long as we're handling the slider. This interval is set to 100ms, which allows to see the changes happen often enough to work, without burdening the backend with too much commits. We also reduce the number of commits by never committing the same value as the one stored.
@ltkum ltkum force-pushed the bugfix-PB-534-real-time-opacity-change branch 2 times, most recently from bbef108 to 00dc3fb Compare June 7, 2024 09:25
Copy link
Contributor

@pakb pakb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

small log/comment issue and good to go

Comment on lines +115 to +117
log.info(
'[Menu Active Layers List Item component]: Committing last transparency reached and clearing the interval'
)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this log isn't up to date anymore, as you aren't using setInterval anymore

linting and removing dev logs

update in log
@ltkum ltkum force-pushed the bugfix-PB-534-real-time-opacity-change branch from 00dc3fb to 6a678d6 Compare June 7, 2024 11:17
@ltkum ltkum merged commit 808ed7e into develop Jun 7, 2024
@ltkum ltkum deleted the bugfix-PB-534-real-time-opacity-change branch June 7, 2024 11:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants