Skip to content
New issue

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

#

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

Already on GitHub? # to your account

Jump to bottom

Research on better solution to manually enter numeric ranges #234

Closed
Tracked by #6
donyunardi opened this issue Mar 21, 2023 · 4 comments · Fixed by #289
Closed
Tracked by #6

Research on better solution to manually enter numeric ranges #234

donyunardi opened this issue Mar 21, 2023 · 4 comments · Fixed by #289
Assignees
@chlebowa
Labels
core priority

Comments

@donyunardi
Copy link
Contributor

donyunardi commented Mar 21, 2023 •
edited
Loading

Continuation from #226

Summary:

The user desires the option to manually input ranges when filtering data with a numeric variable, as well as the ability to use a slider to select ranges. The proposed solution, #226, involves implementing a toggle button that activates a numericRangeInput, which allows the user to enter a value manually while retaining the slider input. The toggle button would allow the user to switch between the slider and text box to select or enter the range.

However, there is a problem when a value is manually entered, as it must match the slider's steps or ticks. This restricts the user from freely inputting any value.

Acceptance Criteria:

This is a research task to see if there's a better or robust solution to achieve users requirements:

  • Able to use slider to select ranges
  • Able to manually enter ranges
@donyunardi donyunardi mentioned this issue Mar 21, 2023
Closed
14 tasks
@donyunardi donyunardi changed the title Research on better solution to allow user to manually enter numeric ranges while still pertaining the slider functionality Research on better solution manually enter numeric ranges Mar 31, 2023
@donyunardi donyunardi changed the title Research on better solution manually enter numeric ranges Research on better solution to manually enter numeric ranges Mar 31, 2023
@donyunardi donyunardi mentioned this issue Mar 31, 2023
Closed
@gogonzo
Copy link
Contributor

gogonzo commented May 11, 2023 •
edited
Loading

There is a option to have both slider + numeric range
noUiInputSlider is in teal.widgets
I don't know how customizable it is in shinyWidgets but the html/js library looks promising
https://refreshless.com/nouislider/examples/#section-html5

@donyunardi
Copy link
Contributor Author

We have received feedback advising us to concentrate on the manual numeric range input, omitting the slider or tick functionality, and incorporating a distribution visualization in some form. Please bear this in mind as you conduct your research.

We do have a suggestion to use plotly:

Please find other possible solutions.

@chlebowa
Copy link
Contributor

I am working on the plotly thing, when it's ready I will look into @gogonzo proposed noUiInputSlider.

@chlebowa chlebowa self-assigned this May 16, 2023
@chlebowa chlebowa mentioned this issue May 17, 2023
Merged
This was referenced May 23, 2023
Closed
Closed
@chlebowa chlebowa linked a pull request May 30, 2023 that will close this issue
234 range selection with plotly #289
Merged
@chlebowa chlebowa mentioned this issue Jun 1, 2023
Closed
@insightsengineering insightsengineering deleted a comment from chlebowa Jun 2, 2023
@kartikeyakirar kartikeyakirar linked a pull request Jun 12, 2023 that will close this issue
234 range selector modified by adding debounce and popover #334
Merged
@kartikeyakirar kartikeyakirar removed a link to a pull request Jun 12, 2023
234 range selector modified by adding debounce and popover #334
Merged
chlebowa added a commit that referenced this issue Jun 14, 2023
@chlebowa @gogonzo
@github-actions @kartikeyakirar
234 range selection with plotly (#289)
4ec0499 
Closes #234 
Closes #233 

Replaces the range slider in `RangeFilterState` with an interactive
`plotly` graph. Two shapes (lines) are drawn on the plot that can be
dragged and their position is tracked. An observer listens to events
emitted by the plot when shapes are altered (this event is called a
"plotly_relayout") and updates selection. Another observer listens to
the manual input and updates selection. Finally, a third observer
listens to the selection and updates the manual input as well as the
shapes on the plot.

Since the graph is slower to render, a spinner is added to it to
alleviate the negative effect on UX.

Numeric (manual) input is now displayed simultaneously with the graphic
input, not alternatively.

Numeric input receives a debounce.

---------

Signed-off-by: kartikeya kirar <kirar.kartikeya1@gmail.com>
Signed-off-by: Aleksander Chlebowski <114988527+chlebowa@users.noreply.github.com>
Co-authored-by: Dawid Kałędkowski <dawid.kaledkowski@gmail.com>
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: kartikeya kirar <kirar.kartikeya1@gmail.com>
Co-authored-by: kartikeya <kartikeya.kirar@unicle.life>
@chlebowa
Copy link
Contributor

closed by #289

# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees

@chlebowa chlebowa

Labels
core priority
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

234 range selection with plotly insightsengineering/teal.slice
3 participants
@gogonzo @donyunardi @chlebowa