Site + Architecture Redesign: new design system, component architecture, and page rework#640
Draft
bencap wants to merge 37 commits intodocs/bencap/249/bring-docs-up-to-datefrom
Draft
Site + Architecture Redesign: new design system, component architecture, and page rework#640bencap wants to merge 37 commits intodocs/bencap/249/bring-docs-up-to-datefrom
bencap wants to merge 37 commits intodocs/bencap/249/bring-docs-up-to-datefrom
Conversation
bencap
added
type: documentation
bencap
changed the base branch from
release-2026.2.0
to
docs/bencap/249/bring-docs-up-to-date
bencap
changed the base branch from
docs/bencap/249/bring-docs-up-to-date
to
release-2026.2.0
Add MkDocs Material documentation site under docs/ with full content covering Getting Started, Finding Data, Submitting Data, MaveMD, Programmatic Access, Reference, Troubleshooting, FAQ, and Citations. Enhance docs with screenshots, Mermaid diagrams, admonitions, abbreviation tooltips, code copy buttons, and instant navigation. Add scripts/build-docs.sh to build MkDocs and copy output to public/docs/mavedb/ for inclusion in the Vite production bundle. Docs are served at /docs/mavedb/ to match the legacy Sphinx URL path. The build script runs automatically in npm run build and npm run preview. Add npm run docs for local docs development. Update all Vue component doc links in ScoreSetCreator and DocumentationView to point to the new /docs/mavedb/ paths. Remove old Sphinx HTML files from public/docs/mavedb/, RST sources from src/docs/, Sphinx dependencies from requirements.txt, and .doctrees entry from .gitignore.
…h gradient - Add variant-detail.html with measurement cards, assay facts, classification/population/splicing annotations - Apply watermark bar hero to homepage, remove stats strip for cleaner landing - Add subtle palette gradient behind MaveMD search with dynamic tab-colored search box - Format about.html (whitespace only)
- Add inline search results with allele card, MANE table, and measurement groups - Search button toggles between landing content and results view - Subtle palette gradient on search band (sage → cream) - Tab colors remapped to palette (sage, mint, gold, orange) - Dynamic search box border/button updates on tab selection
- Add settings.html with avatar hero (watermark bars, ORCID badge), profile card, API key management, roles, and role-based keys - Replace nav avatar with dropdown menu (Settings, Dashboard, Sign out) with down-caret indicator across all 15 prototype pages
Point footer Documentation links to /docs/mavedb/index.html across all prototype pages. Reduce the active tab mini-bar indicator from 9 color segments to 6 for a cleaner look.
Set up the redesign infrastructure: extend Tailwind theme with prototype design tokens (sage/mint/orange palette, Exo 2 display font), retheme PrimeVue from dark blue to sage via definePreset, remove PrimeFlex and migrate grid classes to Tailwind across 8 components, clean up dead styles in App.vue, and add Storybook for component documentation.
- Replace DefaultLayout/Toolbar/Footer with MvLayout/MvNavBar/MvFooter - Migrate all 23 screen components to MvLayout (reduced from 7 props to 3) - Remove CLINICAL_FEATURES_ENABLED flag; MaveMD routes always registered - Centralize external URLs in src/lib/links.ts - Add shared component types in src/types/components.ts - Clean up dead CSS from layout.css and app.css - Widen content max-width from 1200px to 1280px (Tailwind max-w-screen-xl)
Storybook was configured (main.ts, preview.ts, deps, scripts) but had zero story files. Remove all config, dependencies, and related ESLint and gitignore entries.
- Rewrite HomeScreen, HelpScreen, AboutView, DocumentationView with card-based layouts using MvLayout and new MvPageHeader component - Add NotFoundView with catch-all 404 route - Extract homepage constants to src/data/ (home.ts, news.ts, search.ts) - Add new link constants and zulip logo asset - Fix search type casing mismatch between HomeScreen and MaveMD
- Add skip-to-content link targeting header slot in MvLayout - Add ARIA attributes to nav popovers, hamburger, and mobile menu - Add aria-labels on external links in footer - Use semantic heading hierarchy (div → h2) in page sections - Wrap mobile menu in Transition for slide animation
- Extract search API calls into src/api/ layer (mavedb, clingen) - Restyle SearchView with sidebar filters, card results, and sort dropdown - Restyle SearchVariantsScreen with hero section, pill tabs, and allele cards - Add reusable components (MvCollapsible, MvLoader, MvScoreSetRow, MvSearchFilters, MvSelectList) - Replace plain HTML inputs with PrimeVue equivalents across search pages - Simplify MaveMD collection retry logic to single attempt with error state - Fix entity-cache Promise hang when concurrent requests fail - Fix swapped watcher param names, strict equality, and error logging
Decompose monolithic screen components (ExperimentCreator, ExperimentEditor, ScoreSetCreator, ScoreSetEditor) into layered form architecture: Form section components (src/components/forms/): - ExperimentFields, ScoreSetFields, TargetFields, KeywordFields, CalibrationFields, ScoreSetContextFields, VariantScoreFields - Shared field primitives: MvFloatField, MvTagField, MvMarkdownField, MvUploadField, MvFileStatus, MvFieldError, MvEmptyState Composables (src/composables/): - useAutocomplete: low-level fetch with abort controller support - useValidationErrors: server/client error merging with scroll-to-error - useReferenceFields: DOI, publication, and contributor management - usePublicationIdentifiers: publication search with internal/external fallback - useTargetGeneEditor: target gene form state, taxonomy/assembly lookups - useCalibrationEditor: calibration draft lifecycle and dirty tracking - useExperimentKeywords: keyword state with conditional visibility - useKeywordOptions: per-keyword autocomplete instances - useJsonFileField: JSON file upload with client-side validation API modules (src/api/mavedb/): - calibrations, experiments, orcid, permissions, score-sets: typed async functions replacing inline Axios calls in components Also: field description data (src/data/field-descriptions.ts, keywords.ts), form validation utilities (form-validation.ts, form-helpers.ts), calibration type definitions (calibration-types.ts), and updated instruction files.
…load The searchType watcher cleared searchText whenever searchType changed, including during initial hydration from query params (null → 'hgvs'). This caused search text passed from the homepage to be wiped before mounted() could execute the search. Guard the clear with oldVal != null so it only fires on active user tab switches.
…ents Rebuild the dashboard view with a responsive tabbed interface (score sets, experiments, collections, calibrations) replacing the old published/unpublished split. Extract per-tab content into dedicated dashboard components and add shared UI primitives (MvBadge, MvFilterChips, MvRowActionMenu, MvErrorState, MvDecorativeBars). Introduce use-dashboard composable for dashboard state management, badges utility module, and new CSS design tokens for status colors, evidence classifications, and role badges.
…mponents Rewrite SettingsScreen from Options API JS to typed Options API TS. Extract access key display/actions into MvAccessKeyRow and raw axios calls into a dedicated access-keys API module. Add profile hero with avatar, ORCID link, and contribution stats.
Redesign CollectionView with an inline edit mode, tabbed content layout, and redesigned permissions/dataset editors. Simplify CollectionsView by removing inline expansion in favor of direct navigation. New components: - MvOrcidLink: renders ORCID iD links with icon and optional name - MvVisibilityToggle: public/private toggle button with accessible labels - roles.ts: centralizes role types and collection role options - users.ts: API module for user lookup by ORCID iD Other changes: - collections.ts: add update, create, add/remove entity, and role APIs - permissions.ts: parallelize permission checks with Promise.all - MvRowActionMenu: support disabled actions with visual styling - Dashboard confirm dialogs: add explicit accept/reject button labels - badges.ts: re-export Role type from the new roles module
…e components Replace monolithic VariantScreen/VariantMeasurementScreen with a composable-driven architecture. Extract variant lookup, ClinGen allele resolution, and calibration classification into dedicated composables. Add new reusable components (MvMeasurementCard, MvDetailRow, MvClassificationTag, MvEvidenceTag, MvBadgeToggle, MvAssayFactsCard, VariantInfoSection). Extend variant API with detail/scores/annotation endpoints. Remove obsolete VariantMeasurementView, VariantMeasurementScreen, and ErrorView. Migrate several common components from scoped CSS to Tailwind utility classes.
…ed API modules and reusable components - Refactor ExperimentView, ExperimentSetView, ScoreSetView, and PublicationIdentifierView to use MvPageHeader, MvRowActionMenu, MvMetadataLine, and other shared Mv* components - Replace inline axios calls with typed API functions; replace manual permission checks with useDatasetPermissions composable - Delete old component copies from components/ root and common/ that were already moved to score-set/, calibration/, collection/, and Mv*-prefixed names in prior commits - Add alerts and metadata slots to MvPageHeader - Update copilot instructions to reflect new directory structure, Mv* prefix convention, and new composables - Removes prototype dir as the site is now migrated
bencap
changed the base branch from
release-2026.2.0
to
docs/bencap/249/bring-docs-up-to-date
bencap
force-pushed
the
proto/bencap/site-redesign
branch
from
1631f43 to
5dab7e3
Compare
bencap
changed the title
This was
linked to
issues
Mar 19, 2026
Add a more obvious notice on deprecated score sets directing users to the superseding score set
#629
Open
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.
Full visual and structural overhaul of the MaveDB UI, introducing a cohesive design system and modern component architecture while preserving all existing functionality.
Design system foundation
Component reorganization
Typed API layer
Composables
Page redesigns
Documentation (supersedes #601)
Removed dead code
Three items need to be wired before this is production-ready:
In addition, various TODOs were sprinkled throughout this change set that we should formalize as issues and link prior to merging.