Skip to content

Conversation

@dganesh05
Copy link

fix(tags): display tags in alphabetical order

SUMMARY

Fixes inconsistent tag ordering by implementing alphabetical (case-insensitive) sorting in the TagsList component. Previously, tags appeared in unpredictable order as received from backend/state. The sorting is memoized for performance and automatically applied to all views.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:
https://github.com/user-attachments/assets/0f3caa89-df53-4037-ad3a-3426b08d7f7a

After:
https://github.com/user-attachments/assets/521c13e9-3789-4144-b49c-a1e30e502766

TESTING INSTRUCTIONS

  1. Navigate to Dashboard list, Chart list, or Saved Query list in Superset
  2. Identify items with multiple tags (or add tags: "Zebra", "Apple", "Marketing", "Beta")
  3. Verify tags display in alphabetical order (case-insensitive): "Apple", "Beta", "Marketing", "Zebra"
  4. Reload the page and confirm ordering remains consistent
  5. Check tags across different items/views to ensure consistent ordering
  6. Test with special characters (e.g., "!tag", "@tag", "#tag") to verify sorting behavior

ADDITIONAL INFORMATION

Technical Details:

  • Modified superset-frontend/src/components/Tags/TagsList.tsx
  • Added memoized sortedTags computed value using useMemo hook
  • Sorting uses toLowerCase() and localeCompare() for proper locale-aware ordering
  • All existing functionality preserved (maxTags, expand/collapse, tooltips)
  • Performance optimized: only re-sorts when tags array changes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Issue #11 - [BUG] Tags display in inconsistent order instead of alphabetically

1 participant