fix: migrate to el-select-v2 virtualized selects and fix filename display on refresh - #35
Open
CritasWang wants to merge 1 commit into
Open
Conversation
…play on refresh - Replace el-select with ElSelectV2 (virtualized) in TableFilterPanel and TreeFilterPanel to eliminate DOM node explosion and layout jank with large option lists - Replace v-loading overlay with a thin CSS-only progress bar to avoid DOM creation/destruction during metadata loading - Persist currentFileName to localStorage so the page header subtitle survives a browser refresh instead of falling back to decoding the fileId as base64 (which produces garbage for UUID-format IDs) - Support both Unix and Windows path separators in displayFileName basename extraction - Add UUID-format fileId detection to skip base64 decode attempt
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Three fixes in this PR:
1. Migrate filter selects to virtualized
el-select-v2(performance fix for #33 follow-up)Problem:
TableFilterPanelandTreeFilterPanelusedel-selectwithv-for-rendered<el-option>elements. When a TsFile has hundreds or thousands of devices/measurements, every option becomes a real DOM node, causing severe layout jank — especially when coupled withv-loading's overlay DOM flip between loading/content states.Fix:
el-select+<el-option>withElSelectV2(Element Plus's virtualized select component), which only renders ~10 visible DOM nodes regardless of option countv-loading(which creates/destroys a full-cover overlay div, triggering reflows) with a thin CSS-only animated progress bar at the top of each filter panel2. Fix filename display turning into garbage/junk after page refresh
Problem: Uploaded files get a UUID-format
fileId(e.g.a1b2c3d4e5f6). After a browser refresh,currentFileNameis lost from memory, anddisplayFileNamefalls back todecodeFileId(fileId)— which tries to base64-decode a UUID hex string, producing garbled characters.Fix:
currentFileNameto localStorage viarestoreCurrentFile(), called at setup time (before watchers fire)/^[0-9a-fA-F]{8,32}$/) to skip base64 decode for upload IDs/) and Windows (\) path separators in basename extraction3. Clean up leftover
onMountedin chart viewRemoved a dangling
onMounted(() => fileStore.restoreCurrentFile())from the chart view (the call now happens insetup()).