-
Notifications
You must be signed in to change notification settings - Fork 45
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
feat: Character tab improvements #425
feat: Character tab improvements #425
Conversation
The element/path filters are a nice touch, works great. |
src/components/CharacterTab.jsx
Outdated
gridRef.current.api.onFilterChanged() | ||
}, []) | ||
|
||
const charinfo = JSON.parse(JSON.stringify(DB.getMetadata().characters)) |
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.
This probably shouldn't be outside the callback, we don't need this on every render. Should be a Utils.clone
src/components/CharacterTab.jsx
Outdated
|
||
const doesExternalFilterPass = useCallback( | ||
(node) => { | ||
if (currentFilters.element.length && !currentFilters.element.includes(charinfo[node.data.id].element)) { |
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.
A small readability improvement here, instead of charinfo[node.data.id] everywhere we can name the variable as filteredCharacter
const characterMetadata = Utils.clone(DB.getMetadata().characters)
const filteredCharacter = characterMetadata[node.data.id]
... currentFilters.element.includes(filteredCharacter.element) ...
src/components/CharacterTab.jsx
Outdated
return false | ||
} | ||
return true | ||
}, [charinfo, currentFilters], |
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.
Don't need charinfo as a dependency because the full cast of characters never changes
src/components/CharacterTab.jsx
Outdated
if (!((charinfo[node.data.id].name).toLowerCase().includes(currentFilters.name) || (charinfo[node.data.id].displayName).toLowerCase().includes(currentFilters.name))) { | ||
return false | ||
} | ||
return true |
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.
Can probably Demorgans law this into something simpler, remove the negation by returning the inverse
return (filteredCharacter.name).toLowerCase().includes(currentFilters.name)
|| (filteredCharacter.displayName).toLowerCase().includes(currentFilters.name)
src/components/CharacterTab.jsx
Outdated
const isExternalFilterPresent = useCallback(() => { | ||
if (!currentFilters.element.length && !currentFilters.path.length && !currentFilters.name.length) return false | ||
return true | ||
}, [currentFilters]) |
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.
There's a very high performance impact of using [currentFilters] as a dependency here because this rerenders the entire character tab on every search bar keystroke and I'm getting some noticeable lag when typing in the bar. Probably needs an overall refactor to get this modularized enough so it doesn't do that. I can give it a shot unless you'd prefer to.
src/components/CharacterTab.jsx
Outdated
@@ -222,6 +232,33 @@ export default function CharacterTab() { | |||
cellStyle: { display: 'flex' }, | |||
}), []) | |||
|
|||
const externalFilterChanged = useCallback((newValue) => { | |||
setCurrentFilters(newValue) | |||
gridRef.current.api.onFilterChanged() |
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.
I think gridRef doesnt actually exist here, needs to be characterGrid
src/components/CharacterTab.jsx
Outdated
|
||
const doesExternalFilterPass = useCallback( | ||
(node) => { | ||
const charinfo = Utils.clone(DB.getMetadata().characters) |
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.
After some profiling, I found most of the lag was coming from this.
This clone isn't necessary here since no modifications are made, and DB.getMetadata().characters is a massive json, so its triggering a lag spike by cloning it on every keystroke
src/components/CharacterTab.jsx
Outdated
const [cardfilters, setCardfilters] = useState(Utils.clone(defaultFilters)) | ||
|
||
const namefilter = useRef('') |
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.
Camel case naming reminder
src/components/CharacterTab.jsx
Outdated
let newFilters = Utils.clone(namefilter.current) | ||
newFilters = e.target.value.toLowerCase() | ||
namefilter.current = newFilters |
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.
I think all this can just be simplified to:
nameFilter.current = e.target.value.toLowerCase()
…justments for grids/filters
73386b6
to
7c53c2e
Compare
* feat: add relic api replacement (#446) * hotfix: new relic scorer api fix * hotfix: revert api changes * Added All and None buttons to character select screen. (#445) * Added All and None buttons to character select screen. * feat: adjusting button text, styling, setting CUSTOM as the default on relics tab graph --------- Co-authored-by: WolfBungalow <aastir@gmail.com> Co-authored-by: Fribbels <fribbelsgithub@gmail.com> * chore: update Node.js and official GitHub Actions version (#438) * chore: update Node.js and official GitHub Actions version * chore: update package-lock --------- Co-authored-by: Fribbels <fribbelsgithub@gmail.com> * feat: Character tab improvements (#425) * feat: header with filtering + search bar * fix: searchbar performance chore: readability * condensed filter logic * feat: fixing lag spikes, refactor/rename the filters, some styling adjustments for grids/filters * fix: cleanup dead code --------- Co-authored-by: Fribbels <fribbelsgithub@gmail.com> * hotfix: accidentally deleted a placeholder div * feat: recenter light cones, remove optimizer weight column, fix some styling (#449) * feat: character tab styling * feat: re-adjust light cone offsets * fix: min width for character select modal * refactor: remove the rest of optimizer weight column remnants * feature: new logic for ability type buffs (#458) * feat: adding ability type buff conditional handling * feat: adding dmg boost types initial commit, renaming * fix: herta skill hp50% buff is now correctly 20% * fix: sushang's Sword Stance trace is now correctly 2% dmg * draft * feat: finished migrating all the ability buffs * refactor: partial refactor to bit flags * feat: finish the bitwise refactor * docs: update comments * fix: updating optimizer grid col * fix: sushang's trace is actually 0.025% * feat: scoring buff for faster diminishing returns on 100% benchmark (#460) * feat: beta v3 changes (#465) * feat: beta v3 changes * feat: update Block -> Parry * feature: final changes for 07-08 update + changelog (#468) * feat: updating optimizer column header styling, add weight back * feat: update changelog, add ashblazing calcs for yunli march, disable seele e1, update yunli teams * feat: jiaoqiu v4 changes --------- Co-authored-by: WolfBungalow <irtwit@gmail.com> Co-authored-by: WolfBungalow <aastir@gmail.com> Co-authored-by: Garfield Lee <Garfield550@users.noreply.github.com> Co-authored-by: FI00ds <122728302+FI00ds@users.noreply.github.com>
Pull Request
Description
Related Issue
Checklist
Screenshots
Before
After