Website UI/UX updates - better searching, workflow selection, nav ux, consistency #1056
Conversation
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
Wrapper components around radix-vue ToggleGroupRoot and ToggleGroupItem primitives, following shadcn-vue patterns.
- Add WorkflowListItem component for compact list display - Add ViewToggle component with List/Grid buttons - Add viewMode state to workflow store with localStorage persistence - Update WorkflowGrid to render list or grid based on selection - Wire up toggle in index.astro List view uses table-like styling with zebra striping.
- Sliding pill indicator on toggle with brand colors - Gold accent bar on hover for both list rows and grid cards - Staggered entrance animations when switching views - Zebra striping uses brand blue tint instead of gray - Consistent gold hover color on titles (matches masthead) - Grid cards now stretch to equal row heights - Remove redundant "View" label from toggle
- Add searchQuery atom to store with URL sync (?q= parameter) - Create HeroSection.vue that collapses when searching - Hide popular workflows and shrink title when search active - Auto-scroll to results when user starts searching - Show results count with category context (e.g. "8 Single Cell workflows") - Add search index generation to workflow_manifest.py - Move ViewToggle into WorkflowGrid for cleaner layout
- Remove unused ToggleGroup components (ViewToggle uses custom impl) - Use brand colors instead of gray (ebony-clay, chicago, etc.) - Extract navigateToCollection to utils (remove duplication) - Use lucide icons in WorkflowCard (consistent with WorkflowListItem) - Consistent badge hover styles across list and card views - Consistent search input styling on homepage and collection pages
Scroll to top of page instead of #workflows so the collapsed hero header stays visible with results below.
- Generate search-index.json (~84KB) instead of downloading 9MB manifest - Homepage now fetches /data/search-index.json at runtime - Components use flat SearchIndexEntry type (name, annotation, etc.) - Filters and PopularWorkflows also use the search index store - Improved Fuse.js config: ignoreLocation for better mid-string matches - Added collections to searchable fields
Import search-index.json directly in index.astro and pass as props to components. This eliminates the client-side fetch delay and ensures workflows display immediately on page load.
Simple footer with IWC description (gold accent bar), Galaxy Project link, and license note. Displayed on all pages via BaseLayout.
Move logo to src/assets for Astro optimization. Remove redundant preload link since Astro Image handles this automatically.
- Add workflow counts next to each category name - Use gold bottom border for selected state (matches tabs) - Fix URL sync bug where toggle logic was inverted - Softer colors and dot separators
- Use local ref for selected state to avoid SSR/client mismatch - Subscribe to store changes to keep local ref in sync - Remove auto-scroll on filter URL load (caused jumpy behavior) - Both Filters and WorkflowGrid now call setFilterFromUrl on mount
- Replace inline Filters with vertical FilterSidebar component - Categories sorted by workflow count, with tooltips for truncated names - Search input moved from hero to above results grid - Simplified hero section (no more collapse on search) - Two-column layout: sidebar + results
- Use isHydrated flag to guard store subscriptions - Subscriptions only update local refs after onMounted completes - Wrap HeroSection in div to keep slot attribute off Vue component - Pass workflows prop to FilterSidebar for immediate render
- Update search placeholder to 'Search workflows...' - Fix category name case: 'Genome assembly' (lowercase a) - Remove hero collapse tests (feature removed) - Update URL encoding regex to accept + or %20
Open
dannon
changed the title
dannon
changed the title
Allows running tests on a different port when 4321 is in use, e.g. PLAYWRIGHT_PORT=4322 npm run test
Includes eslint-plugin-vue and typescript-eslint. Disables formatting rules that conflict with Prettier (we use tabWidth: 4, Vue plugin expects 2), keeps code quality rules enabled.
Reorders attributes to follow recommended order: class/id before bindings before event handlers.
- Remove unused imports (Workflow type, computed, nextTick) - Remove unused function parameters (rename to _prefixed or remove) - Replace `any` with `unknown` for type safety - Fix optional chain + non-null assertion pattern - Add default value for class prop in SelectContent - Remove empty interface in Select.vue
The sidebar layout refactor removed the need for auto-scrolling when filters are applied - the workflow grid is always visible now.
Member
|
Looks and feel great, my only minor concern is that the landing page takes up a lot of space, with a lot of space between the sentences. It's like that already on the main branch, but the additional banner also covers the first workflows / categories on my latopt screen (100 % zoom, 14 inch macbook pro). I wonder how it would look like if we dropped one or two of the taglines (they feel a little redundant) ? |
mvdbeek
approved these changes
Dec 25, 2025
…yout Changed from fixed viewport height with internal scroll containers to min-height with natural page scrolling. Footer now appears at end of content rather than sticky to viewport bottom.
…r-reviewed/reproducible
Member
|
Very nice, thank you so much @dannon! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
UI Refresh
This branch overhauls the homepage UX and establishes a consistent design system using Galaxy brand colors.
What Changed
Homepage Layout
Design System
hokey-pokey-500) used consistently for active states, tab underlines, sidebar selectionDESIGN.mddocumenting color usage and patternsSearch & Performance
?q=term) so searches are shareable?filter=Transcriptomics)New Components
FilterSidebar.vue- vertical category list with counts and Radix tooltipsViewToggle.vue- list/grid switcherWorkflowListItem.vue- compact row for list viewIWCFooter.astro- simple footer with Galaxy project brandingTechnical Fixes
isHydratedguards on store subscriptions to prevent SSR/client mismatchTests
TODO: