refactor: massive frontend changes #121
Merged
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
…s-pt2 feat(contributors): wrap latency charts in PopoutCard for modal view
- replace Card-based profile header with compact inline badge - move consensus client logos inline next to username - drop redundant "Consensus Clients" stat and separate card - remove outer Card wrapper from nodes table - switch last-seen timestamps to relative time with 10s refresh - update table cell styling classes to match new muted style - rename getClassificationBadgeColor to getClassificationBadgeClasses - adjust corporate badge color to purple for better visual distinction
refactor(DetailPage): drop card in card carry on
refactor(MultiLineChart): remove accent color from default palette to unify styling refactor(useLatencyChartData): drop accent and secondary colors from node palette
- Render MultiLineChart tooltips in body to prevent container clipping - Add country flags to node location column for better visual context - Replace static 50-row limit with "Show More/Less" toggle (5 vs all) - Auto-scroll to top when contributor ID changes - Increase latency chart page_size from 1k to 10k for denser data - Hide legend when >10 series to reduce visual noise - Simplify SlotPlayerControls to display-only current slot & LIVE badge - Centralize shared utilities (getCountryFlag, getRelativeTime, etc.) - Enable auto-play on contributor detail route load
feat: improve contributor detail page UX and data handling
feat(api): add fct_attestation_liveness_by_entity_head endpoints and types
Replace attestation progress bar with comprehensive timeline showing 5 phases: - Builders: MEV builders bidding (starts at t=0) - Relaying: Winning bid selected - Proposing: Block proposed to network (External/Local) - Attesting: Validators attesting (activates 50ms after proposing) - Accepted: Block achieved 66% attestation threshold Key features: - Live mode: real-time progress with sequential phase activation - Static mode: historical slot visualization - Responsive: horizontal timeline (desktop), vertical stack (mobile) - Theme-aware: uses CSS variables for proper color support - Fixed heights: prevents layout flickering during slot transitions - MEV data integration: fetches builder/relay data for phase details Replaces previous attestation progress bar in BlockDetailsCard with more detailed phase-by-phase visualization of slot lifecycle.
…-progress-component
Signed-off-by: Sam Calder-Mason <sam.calder-mason@ethereum.org>
Signed-off-by: Sam Calder-Mason <sam.calder-mason@ethereum.org>
feat: Add live slot events timeline component
Add a new generic AttestationsByEntity component that displays top entities with missed attestations for a given slot. The component is flexible and can be reused for any entity-based attestation metrics. Key features: - Generic core component in src/components/Ethereum/AttestationsByEntity - Horizontal bar chart showing top 10 entities with missed attestations - Integrated into slot detail page attestations section - Fetches data from fct_attestation_liveness_by_entity_head table - Includes comprehensive Storybook stories - Supports custom titles, subtitles, orientations, and empty messages The component uses PopoutCard for consistent styling and includes a modal view for detailed analysis.
feat: add missed attestations by entity chart to slot details
feat(charts): add enriched data point support and item tooltip trigger refactor(contributors): switch attestation latency chart to pre-aggregated data feat(contributors): introduce usePreAggregatedLatencyChartSeries hook
…10 series refactor(series naming): use full node_id to guarantee uniqueness fix(chart queries): increase page_size from 1k to 10k for pre-aggregated data style(charts): switch tooltip to item mode when >10 series for clarity
…mputation perf(useLatencyChartData): track min/max slot inline to avoid flatMap spread perf(usePreAggregatedLatencyChartSeries): track min/max slot inline to avoid flatMap spread
…ent reassignment style(MultiLineChart): break long dependency array into multiline for readability
…-graph refactor: contributoor attest graph
This commit introduces the Ethereum Epochs section, including an index page listing recent epochs and a detailed view for individual epochs. The detail page provides comprehensive analysis by fetching and visualizing: 1. **Basic Stats:** Block counts, participation rate, and average block first seen time. 2. **Block Production Metrics:** Charts for Blob Count, Gas Used/Limit, Transaction Count, Base Fee, and Block Size over slots. 3. **MEV Analysis:** Charts for MEV adoption, block value, and builder/relay distribution. 4. **Attestation Performance:** Charts showing missed attestations by entity over slots and epochs. 5. **Slot Details:** A detailed, clickable table listing all 32 slots with proposer, status, and attestation metrics. This required creating new hooks (`useEpochsData`, `useEpochDetailData`) to aggregate data across 32 slots per epoch using range queries, and integrating numerous new chart components for visualization.
Resolved conflict in MultiLine.tsx by preserving pointer events fix for scroll blocking while integrating new series filter features.
- Fix prettier formatting for Header component in DetailPage - Add missing firstSlot dependency to useMemo in useEpochDetailData
- Remove src/theme/ directory (colors.ts, data-visualization-colors.ts, index.ts) - Add src/utils/color.ts with resolveCssColorToHex utility and tests - Add src/utils/dataVizColors.ts with getDataVizColors utility and tests - Update useThemeColors hook to read semantic tokens from CSS variables - Update all chart components to use CSS-derived colors via useThemeColors - Update page components to align with new color architecture - Make CSS (src/index.css) the single source of truth for theme colors - Align with Tailwind v4 best practices for runtime theme access
feat: New Epochs section
…t start Replaces the single useSlotPlayer hook with two focused hooks: - useSlotPlayerState for currentSlot and isLive - useSlotPlayerProgress to obtain slotProgress Calculates elapsedSeconds from slotProgress and displays it alongside the existing LIVE badge, giving users real-time feedback on how far into the 12-second slot the current playback is.
feat(SlotPlayerControls): Adds slot time to contributoor metrics.
Previously, the chart only displayed epochs where missed attestations existed in the API response, creating gaps in the timeline when entities had no missed attestations. Changes: - Add epochRange prop to MissedAttestationsByEpochChart to accept full epoch range that should be displayed - Update chart to use provided epochRange, falling back to data range - Calculate epoch range from all fetched epochs in IndexPage - Chart now fills all epochs in range with 0 for missing data points This ensures the chart displays a continuous timeline across all 10 fetched epochs, with entities showing 0 missed attestations for epochs where they had no data.
fix(epochs): fill missing epochs in offline validators chart
Updates page descriptions and example text to remove "experimental" terminology, reflecting that The Lab is no longer in beta. Changes descriptions across route meta tags and story examples.
refactor: moar imgs
Previously logos were stretched horizontally due to using size-* classes that forced square dimensions. Changed to h-* w-auto to maintain proper aspect ratio while fitting height requirements.
fix: correct logo aspect ratio in sidebar and mobile header
Adds a static social links section at the bottom of both mobile and desktop sidebars with icons linking to ethpandaops GitHub repository and Twitter profile. The footer remains fixed at the bottom while the main navigation scrolls.
fix: update propagation latency description to reflect live updates
When a slot transitions to the next one, the points array becomes empty but the accumulated points were not cleared from the map visualization. This caused active node datapoints to persist visually even after the slot had ended. Added explicit clearing logic that detects when the points array is empty and clears the accumulated points to ensure the map is clean for the next slot.
Add missed_count_gt filter to attestation liveness API query to only fetch validators with missed attestations. Removes redundant client-side filtering since the API now handles it.
…ding refactor(ForksHeader): extract countdown update logic to avoid initial 1s delay
…own arrow function
fix(ForksHeader): show proper time-unit labels while countdown is loa…
Set notMerge to true on ReactEChartsCore to ensure chart properly updates when series are toggled via legend. Previously, with notMerge=false, ECharts would merge options instead of replacing them, causing hidden series to remain visible on the chart.
Add notMerge prop to MultiLineChart component with default value of true to ensure proper chart updates when toggling series. Set notMerge=false for live page charts that receive frequent data updates for better performance.
…oggle fix(MultiLine): enable chart updates when toggling series visibility
… encourage data sharing - Adds a new Alert component on the contributors page - Shows a panda mascot and links to run Contributoor - Aligns header and banner side-by-side on large screens
…er:image meta tags Updated all route files to use full canonical URLs instead of relative paths for OpenGraph and Twitter Card image meta tags. This ensures proper image display when pages are shared on social media platforms. Changes: - Updated 18 route files across /ethereum, /xatu, /experiments sections - All og:image and twitter:image tags now use VITE_BASE_URL environment variable - Maintains consistency with existing URL meta tags (og:url, twitter:url) - Build verified - head.json correctly generates full canonical URLs
feat(contributors): add Contributoor promo banner with panda image to encourage data sharing
…g-images fix: use canonical URLs with VITE_BASE_URL for all og:image and twitt…
Resized all client icons to fit within 256x256px while maintaining aspect ratios. Stripped metadata to reduce file sizes. Size reductions: - tysm.png: 690 KiB → 62 KiB (91% reduction, 1024x1024 → 256x256) - lodestar.png: 103 KiB → 63 KiB (39% reduction, 250x334 → 192x256) - teku.png: 70 KiB → 34 KiB (51% reduction, 400x400 → 256x256) - geth.png: 78 KiB → 37 KiB (52% reduction, 600x600 → 256x256) - prysm.png: 56 KiB → 24 KiB (57% reduction, 400x400 → 256x256) - caplin.png: 53 KiB → 29 KiB (45% reduction, 400x400 → 256x256) - besu.png: 44 KiB → 28 KiB (36% reduction, 294x296 → 254x256) - nimbusel.png: 9.4 KiB → 2.7 KiB (72% reduction, 329x329 → 256x256) - grandine.png: 9.2 KiB → 4.0 KiB (56% reduction, 400x400 → 256x256) - nimbus.png: 3.9 KiB → 1.5 KiB (63% reduction, 400x400 → 256x256) Total: 831 KiB → 315 KiB (516 KiB saved, 62% overall reduction)
optimize: resize client icons to ≤256px and strip metadata
Generate random hashes for all chunks on each build to completely bust browser cache and prevent "Failed to fetch dynamically imported module" errors caused by Vite's chunk cascade invalidation issue. When unchanged chunks import from changed chunks, their import statements change, causing their content hashes to change even though the actual code is identical. This creates a cascade where users with cached chunks try to import dependencies that no longer exist. By using random hashes instead of content hashes, every deployment gets completely fresh chunk names, eliminating the possibility of cached chunks referencing non-existent dependencies. Fixes vitejs/vite#6773
Fonts never change and are relatively large (6-22 kB), so they should use stable content-based hashes to enable long-term browser caching. Only JS/CSS chunks get random hashes on each build to prevent the cascade invalidation issue.
Phase0 is now always included in the fork timeline at epoch 0, even when not explicitly configured. Updated Phase0 description to clearly indicate it's the "Genesis fork". Added genesis timestamp display showing the exact launch date in ISO format (YYYY-MM-DD HH:MM UTC). Updated Altair description to clarify it's the "First upgrade".
…-bust fix: add random chunk hashing to prevent cascade invalidation errors
- Soften LoadingContainer appearance with 30% border and 50% surface opacity - Add EpochsSkeleton for epochs list page with table and metrics chart - Add EntitiesSkeleton for entities list page with search and table - Add EpochDetailSkeleton for epoch detail page with navigation, stats, and tabs - Add SlotDetailSkeleton for slot detail page with card-based layout - All skeletons match exact structure and styling of loaded views - Navigation buttons remain functional during loading states - Display actual slot/epoch numbers in skeletons for better context
feat: add skeleton loaders for epochs, entities, and slot detail pages
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 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.
No description provided.