feat: Character tab improvements #425

FI00ds · 2024-06-11T15:18:25Z

Pull Request

Description

Added a searchbar and element/path filters to the top of the character tab

Related Issue

Closes [Feature] Character tab improvements #406

Checklist

I have added commit messages that are descriptive and meaningful.
I have tested the changes locally.
I have reviewed the code changes.

Screenshots

Before

After

fribbels · 2024-06-13T07:12:28Z

The element/path filters are a nice touch, works great.

fribbels · 2024-06-13T07:13:40Z

src/components/CharacterTab.jsx

+    gridRef.current.api.onFilterChanged()
+  }, [])
+
+  const charinfo = JSON.parse(JSON.stringify(DB.getMetadata().characters))


This probably shouldn't be outside the callback, we don't need this on every render. Should be a Utils.clone

fribbels · 2024-06-13T07:17:24Z

src/components/CharacterTab.jsx

+
+  const doesExternalFilterPass = useCallback(
+    (node) => {
+      if (currentFilters.element.length && !currentFilters.element.includes(charinfo[node.data.id].element)) {


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) ...

fribbels · 2024-06-13T07:25:56Z

src/components/CharacterTab.jsx

+        return false
+      }
+      return true
+    }, [charinfo, currentFilters],


Don't need charinfo as a dependency because the full cast of characters never changes

fribbels · 2024-06-13T07:25:57Z

src/components/CharacterTab.jsx

+      if (!((charinfo[node.data.id].name).toLowerCase().includes(currentFilters.name) || (charinfo[node.data.id].displayName).toLowerCase().includes(currentFilters.name))) {
+        return false
+      }
+      return true


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)

fribbels · 2024-06-13T07:29:06Z

src/components/CharacterTab.jsx

+  const isExternalFilterPresent = useCallback(() => {
+    if (!currentFilters.element.length && !currentFilters.path.length && !currentFilters.name.length) return false
+    return true
+  }, [currentFilters])


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.

fribbels · 2024-06-13T07:45:42Z

src/components/CharacterTab.jsx

@@ -222,6 +232,33 @@ export default function CharacterTab() {
    cellStyle: { display: 'flex' },
  }), [])

+  const externalFilterChanged = useCallback((newValue) => {
+    setCurrentFilters(newValue)
+    gridRef.current.api.onFilterChanged()


I think gridRef doesnt actually exist here, needs to be characterGrid

chore: readability

fribbels · 2024-06-20T02:22:33Z

src/components/CharacterTab.jsx

+
+  const doesExternalFilterPass = useCallback(
+    (node) => {
+      const charinfo = Utils.clone(DB.getMetadata().characters)


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

fribbels · 2024-06-20T02:23:28Z

src/components/CharacterTab.jsx

+  const [cardfilters, setCardfilters] = useState(Utils.clone(defaultFilters))
+
+  const namefilter = useRef('')


Camel case naming reminder

fribbels · 2024-06-20T02:32:46Z

src/components/CharacterTab.jsx

+                let newFilters = Utils.clone(namefilter.current)
+                newFilters = e.target.value.toLowerCase()
+                namefilter.current = newFilters


I think all this can just be simplified to:

nameFilter.current = e.target.value.toLowerCase()

…justments for grids/filters

* 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>

fribbels reviewed Jun 13, 2024

View reviewed changes

FI00ds added 3 commits June 19, 2024 22:19

feat: header with filtering + search bar

039cd71

fix: searchbar performance

062327d

chore: readability

condensed filter logic

d9f810c

fribbels reviewed Jun 20, 2024

View reviewed changes

feat: fixing lag spikes, refactor/rename the filters, some styling ad…

7c53c2e

…justments for grids/filters

fribbels force-pushed the feat/character-tab-improvements branch from 73386b6 to 7c53c2e Compare June 20, 2024 02:49

fix: cleanup dead code

bb0ecbe

fribbels merged commit 93baac9 into fribbels:beta Jun 20, 2024
1 check passed

This was referenced Jun 29, 2024

feat: scoring buff for diminishing returns #460

Merged

featue: combo * spd calculation & columns #463

Closed

FI00ds deleted the feat/character-tab-improvements branch July 9, 2024 08:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Character tab improvements #425

feat: Character tab improvements #425

FI00ds commented Jun 11, 2024 •

edited

Loading

fribbels commented Jun 13, 2024

fribbels Jun 13, 2024

fribbels Jun 13, 2024

fribbels Jun 13, 2024

fribbels Jun 13, 2024

fribbels Jun 13, 2024

fribbels Jun 13, 2024

fribbels Jun 20, 2024

fribbels Jun 20, 2024

fribbels Jun 20, 2024

		const [cardfilters, setCardfilters] = useState(Utils.clone(defaultFilters))

		const namefilter = useRef('')

feat: Character tab improvements #425

feat: Character tab improvements #425

Conversation

FI00ds commented Jun 11, 2024 • edited Loading

Pull Request

Description

Related Issue

Checklist

Screenshots

Before

After

fribbels commented Jun 13, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

FI00ds commented Jun 11, 2024 •

edited

Loading