-
Notifications
You must be signed in to change notification settings - Fork 557
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
slider onchange event improvement #4921
Conversation
Caution Review failedThe pull request is closed. WalkthroughThe changes in this pull request focus on the Changes
Possibly related PRs
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (1)
- app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx (2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx (1)
Pattern
**/*.{ts,tsx}
: Review the Typescript and React code for conformity with best practices in React, Recoil, Graphql, and Typescript. Highlight any deviations.
🔇 Additional comments (1)
app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx (1)
11-12
: Appropriate use of lodash functionsImporting
debounce
,throttle
, andisNumber
fromlodash
is appropriate and they are used correctly in the code.
const updateValue = () => { | ||
onChange( | ||
path, | ||
isMin | ||
? [parseFloat(finalValue), parseFloat(data?.[1] || max)] | ||
: [parseFloat(data?.[0] || min), parseFloat(finalValue)], | ||
schema | ||
); | ||
}; | ||
|
||
// Throttle the onChange action to once every 300ms | ||
const throttledUpdate = throttle(updateValue, 300); | ||
|
||
// Debounce for 200ms to ensure final typing before triggering update | ||
const debouncedUpdate = debounce(throttledUpdate, 200); | ||
|
||
debouncedUpdate(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Refactor debouncing and throttling implementation for effectiveness
Defining throttledUpdate
and debouncedUpdate
inside the handleKeyDown
function creates new instances on every key press, which means the debouncing and throttling won't work as intended. Additionally, applying debouncing and throttling to the Enter
key event is unnecessary since it's a discrete action.
To effectively limit the number of times onChange
is called due to user input, consider applying debouncing to the handleInputChange
function or the onChange
handler of the input fields. This way, the debounced functions are maintained across renders and are only created once.
Suggested refactor: Apply debouncing to input change handlers
Move the debouncing logic outside of the handleKeyDown
function and apply it to the input change handlers using useCallback
and useRef
. Here's how you can modify the code:
+import React, { useEffect, useMemo, useRef, useState, useCallback } from "react";
+// Define the debounced update function using useCallback
+const debouncedUpdate = useCallback(
+ debounce((finalValue, isMin) => {
+ onChange(
+ path,
+ isMin
+ ? [parseFloat(finalValue), parseFloat(data?.[1] || max)]
+ : [parseFloat(data?.[0] || min), parseFloat(finalValue)],
+ schema
+ );
+ }, 200),
+ [onChange, path, data, min, max, schema]
+);
const handleInputChange = (e, isMin: boolean) => {
const value = e.target.value;
if (!value) {
isMin ? setMinText("") : setMaxText("");
} else if (unit === "%") {
const percentageValue = parseInt(value);
if (percentageValue >= 0 && percentageValue <= 100) {
isMin
? setMinText(percentageValue.toFixed())
: setMaxText(percentageValue.toFixed());
}
} else {
const floatValue = parseFloat(value);
if (!isNaN(floatValue)) {
isMin ? setMinText(value) : setMaxText(value);
}
}
+ // Call the debounced update function
+ let finalValue = value;
+ if (unit === "%") {
+ finalValue = ((max - min) / 100) * finalValue;
+ }
+ debouncedUpdate(finalValue, isMin);
};
-const handleKeyDown = (e, isMin: boolean) => {
- if (e.key === "Enter") {
- let finalValue = e.target.value;
- if (!finalValue) return;
-
- if (unit === "%") {
- finalValue = ((max - min) / 100) * finalValue;
- }
-
- const updateValue = () => {
- onChange(
- path,
- isMin
- ? [parseFloat(finalValue), parseFloat(data?.[1] || max)]
- : [parseFloat(data?.[0] || min), parseFloat(finalValue)],
- schema
- );
- };
-
- // Throttle the onChange action to once every 300ms
- const throttledUpdate = throttle(updateValue, 300);
-
- // Debounce for 200ms to ensure final typing before triggering update
- const debouncedUpdate = debounce(throttledUpdate, 200);
-
- debouncedUpdate();
- }
-};
+// Remove the handleKeyDown function if it's no longer needed
This refactor moves the debouncing logic to the handleInputChange
function, which is called on every input change. The debounced function debouncedUpdate
is memoized using useCallback
, ensuring it retains state across renders and effective debouncing is applied.
Committable suggestion was skipped due to low confidence.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🍨
nit: could simplify the two into one function:
debounce(updateValue, 300, { leading: true, trailing: false })();
What changes are proposed in this pull request?
How is this patch tested? If it is not, please explain why.
(Details)
Release Notes
Is this a user-facing change that should be mentioned in the release notes?
notes for FiftyOne users.
(Details in 1-2 sentences. You can just refer to another PR with a description
if this PR is part of a larger change.)
What areas of FiftyOne does this PR affect?
fiftyone
Python library changesSummary by CodeRabbit
Summary by CodeRabbit
New Features
Bug Fixes