fix: mobile responsiveness and polish for miner details page redesign by bitloi · Pull Request #98 · entrius/gittensor-ui

bitloi · 2026-03-02T15:41:53Z

Summary

Complete tear-down and rebuild of the miner details page into a miner-centric performance dashboard. The page now feels personal and intuitive — miners see their identity, all key KPIs, per-PR score breakdowns with real multiplier data, and tier progress at a glance. Tables support search, column sorting, score tooltips, and pagination. Insights link to docs for deeper context. No static documentation content is embedded; everything is data-driven and interactive.

Related Issues

Closes #95

Type of Change

Design Rationale

Information Architecture

The page is structured around miner workflows at different stages:

Hero (MinerScoreCard) — Identity + all 6 core KPIs at a glance. New miners and established miners both see everything they care about immediately: score (with rank), credibility (color-coded), token score, PR count, open risk vs dynamic threshold, and estimated earnings (daily/monthly/lifetime). Each stat tile has a tooltip explaining the metric — self-explanatory, no docs embedding.
Overview tab — Contextual, actionable cards:
- MinerFocusCard: New miners see "Next: Unlock [Tier]" with progress % and concrete steps. Established miners see earnings summary.
- MinerInsightsCard: Prioritized warnings/tips computed from real data (open PR limit, collateral impact, credibility trend, tier progress). Keeps recommendations vague enough to be timeless, with a docs link for deeper context.
- MinerScoreBreakdown: Top PRs by score with expandable multiplier details (base score × credibility scalar, token breakdown with structural vs leaf, collateral). Miners can trace exactly how their score was calculated. Tier distribution bar shows score split across Gold/Silver/Bronze.
- MinerTierPerformance: 3 tier cards with per-tier stats and unlock progress bars.
Pull Requests tab — Full table with text search, 4 sortable columns (PR#, +/-, Score, Date), score tooltips on hover showing base/tokens/credibility, status+tier filtering, and pagination (20/page). Handles 3 PRs or 300.
Repositories tab — Aggregated view with text search, sortable columns, tier filtering, and a new Avg/PR score column.
Activity tab — Contribution heatmap, credibility donut, performance radar. Minimal changes — already solid.

Why This Beats a Simpler Approach

No KPI loss: All 6 stat tiles are visible at a glance in the header — score, credibility, token score, PR count, open risk, earnings. Nothing was removed that miners previously saw.
Score traceability: MinerScoreBreakdown shows real per-PR multipliers so miners can see exactly why they earned what they earned.
Contextual guidance: MinerFocusCard adapts to miner stage (new vs established). MinerInsightsCard gives data-driven tips without embedding documentation. Docs link provided for deeper context.
Scalability: Pagination + search + sorting for large PR/repo counts.

Screenshots

Desktop: https://screenrec.com/share/flnFJjseSx

Mobile: https://screenrec.com/share/8zJ6groLE0

Data Completeness

All previously available metrics remain accessible on the page:

Metric	Where
Score + rank	MinerScoreCard stat tile
Credibility %	MinerScoreCard stat tile (color-coded)
Token score	MinerScoreCard stat tile
Total PRs + rank	MinerScoreCard stat tile
Open PRs vs threshold	MinerScoreCard "Open Risk" tile
Collateral impact	MinerScoreCard + MinerInsightsCard + MinerScoreBreakdown
Earnings (daily/monthly/lifetime)	MinerScoreCard "Earnings" tile
Hotkey	MinerScoreCard identity row (truncated with ellipsis)
GitHub profile (name, avatar, company, location, blog, followers)	MinerScoreCard identity row + inline chips
"Updated" timestamp	MinerScoreCard chip (desktop: absolute, mobile: inline)
Tier badge	MinerScoreCard identity row
Per-PR score breakdown (base, credibility, tokens, collateral)	MinerScoreBreakdown expandable rows
Per-PR additions/deletions, commits, nodes scored	MinerScoreBreakdown expanded detail
Tier distribution (Gold/Silver/Bronze score split)	MinerScoreBreakdown distribution bar
Tier unlock progress (token score, qualified repos, credibility)	MinerTierPerformance + MinerFocusCard
Per-tier stats (score, credibility, merged/closed/total, collateral)	MinerTierPerformance tier cards
Contribution heatmap	MinerActivity
Credibility donut (merged/open/closed)	MinerActivity
Performance radar	MinerActivity
PR table with status/tier filtering	MinerPRsTable
Repository table with tier filtering	MinerRepositoriesTable

Intentionally removed: MinerGuidanceCard (static rules/FAQ duplicating docs), MinerScoreCalculationCard (static formula text duplicating docs), MinerEarningsDashboard (per reviewer feedback). All scoring information these provided is now shown through real data in MinerScoreBreakdown and tooltips.

Testing

Manual testing performed against test API
Tested on desktop viewport
Tested on mobile viewport (Chrome DevTools)
npm run test passes (46 tests)
npx tsc --noEmit passes
npx vite build passes
npx eslint passes (0 errors)
npx prettier --check passes
All existing tests pass; 13 new test cases added

Checklist

New components are modularized/separated where sensible
Uses predefined theme (TIER_COLORS, STATUS_COLORS, alpha() — no hardcoded colors)
Responsive/mobile checked (2×3 stat grid on mobile, scrollable tabs, truncated hotkey)
Tested against the test API
npm run format and npm run lint:fix have been run
npm run build passes
No config file changes (tsconfig, vite.config, package-lock)
Screenshots included for any UI/visual changes

Changes

New Components

MinerScoreBreakdown: Per-PR score composition with expandable rows showing base score, credibility scalar, token breakdown (structural vs leaf), collateral, and a tier distribution bar. Paginated (10 per page) for miners with many PRs.

Refactored Components

MinerScoreCard: Slimmed from ~950 to ~470 lines (body ~200 lines + StatTile subcomponent). Compact identity row (avatar, name, tier badge, GitHub link, hotkey, inline profile chips) + 6 stat tiles (Score, Credibility, Token Score, PRs, Open Risk, Earnings) with rankings, tooltips, and color-coded health indicators. Responsive grid: 2×3 mobile, 3×2 tablet, 6×1 desktop.
MinerPRsTable: Added text search, 4 sortable columns (PR#, +/-, Score, Date), score tooltips showing base/tokens/credibility on hover, pagination (20 per page). Page resets on filter change. Repository column text wraps on mobile instead of overflowing.
MinerRepositoriesTable: Added text search and Avg/PR score column.
MinerInsightsCard: Added docs link footer per reviewer feedback ("point to the docs").
MinerTierPerformance: Removed redundant margin-bottom (parent gap handles spacing).
MinerActivity: Removed redundant margin-bottom for consistency.

Removed Components

MinerGuidanceCard — duplicated documentation content
MinerScoreCalculationCard — duplicated documentation content
MinerEarningsDashboard — per reviewer feedback

Bug Fixes

Wrapped API string fields with Number() in MinerScoreBreakdown to prevent .toFixed() runtime crashes
Fixed repository text overflow on mobile in MinerPRsTable

Tests

Extended explorerUtils tests from 33 → 46 covering calculateDynamicOpenPrThreshold, normalizeMinerEvaluations, normalizeCommitLogs

- Add tabbed navigation (Overview, Activity, Pull Requests, Repositories) - Add tier filtering to MinerPRsTable (Gold/Silver/Bronze) - Add tier filtering to MinerRepositoriesTable - Create shared ExplorerFilterButton component - Add explorerUtils with filter/sort utilities: - filterPrsByTier, filterMinerRepoStats - sortMinerRepoStats, countPrTiers - tierColorFor, formatTierLabel, getTierFilterValue - Integrate MinerEarningsDashboard, MinerInsightsCard, MinerFocusCard - Update MinerDetailsPage layout with miner-centric dashboard Closes entrius#95

…and mobile responsiveness - Add ExplorerFilterButton reusable component - Add tier filtering to MinerPRsTable and MinerRepositoriesTable - Fix mobile responsiveness (horizontal scroll, hotkey truncation, Updated chip) - Add MinerTierFilter and MinerStatusFilter types to explorerUtils - Configure Vite proxy for local API development Closes entrius#95

- Install vitest and add test/test:watch scripts - Add 33 tests covering all explorerUtils functions: - parseNumber, getTierLevel, formatTierLabel - tierColorFor, getTierFilterValue - filterMinerRepoStats, sortMinerRepoStats - countPrTiers, filterPrsByTier

bitloi · 2026-03-02T16:17:43Z

@LandynDev @anderdc Would you mind reviewing the PR implementation?

…culation details - Create MinerGuidanceCard with Key Rules section and 8-item FAQ addressing common miner misunderstandings (payment rules, tier requirements, collateral, scoring) - Enhance MinerScoreCalculationCard with full per-PR formula, organized sections (Base Score, Multipliers, Collateral), and link to docs - Add MinerGuidanceCard to Overview tab as first component - Content sourced from https://docs.gittensor.io/oss-contributions.html

anderdc

I don't particularly like the earning card, and although the overview tab was a nice thought, the issue is now we have documentation to update now in multiple locations, here in gittensor.io and also in docs.gittensor.io, I suggest rethinking your submission. Finally none of the CI is passing

package.json

tsconfig.json

vite.config.ts

…ck.json

…eCalculationCard per reviewer feedback - Remove docs-duplicating components to avoid maintaining content in multiple locations - Regenerate package-lock.json to fix CI (npm ci) - Keep tier filtering, mobile responsiveness, and explorerUtils

bitloi · 2026-03-07T12:55:55Z

@anderdc @LandynDev I updated the miner details page with a full redesign.
Here are the key changes:

No KPI loss — all 6 stats (score, credibility, token score, PRs, open risk, earnings) visible at a glance in the header
Score traceability — new MinerScoreBreakdown with per-PR multiplier details (base × credibility, token breakdown, collateral)
Insights link to docs per your feedback — kept vague and data-driven
Removed MinerGuidanceCard, MinerScoreCalculationCard, MinerEarningsDashboard
Tables support search, sort, pagination, and score tooltips
46 tests passing, all CI green

Desktop: https://screenrec.com/share/flnFJjseSx
Mobile: https://screenrec.com/share/8zJ6groLE0

…le fixes - Refactor MinerScoreCard into compact identity row + 6 stat tiles - Add MinerScoreBreakdown with per-PR multiplier details and pagination - Enhance MinerPRsTable with search, sort, score tooltips, pagination - Enhance MinerRepositoriesTable with search and Avg/PR column - Polish MinerTierPerformance and MinerActivity spacing - Add docs link to MinerInsightsCard per reviewer feedback - Fix Number() wrapping for API string fields - Fix repo text overflow on mobile - Extend explorerUtils tests (33 → 46) Closes entrius#95

anderdc · 2026-03-09T20:50:01Z

merged another PR into test, can you resolve the conflicts before I continue review?

…d-redesign-95

- Fix duplicate tierFilter by supporting both external prop and internal state - Replace prsInTier references with prs (our version handles tier filtering internally) - Add alpha and useTheme imports from upstream theming approach - Remove shadowed theme imports - Format with prettier

bitloi · 2026-03-09T21:16:34Z

merged another PR into test, can you resolve the conflicts before I continue review?

I fixed the conflicts, would you mind reviewing again?

bitloi · 2026-03-10T15:11:40Z

@anderdc Just following up on this PR. I’d appreciate your review when convenient.

anderdc

new file names should be capitalized e.g. ExplorerUtils
explorer utils isn't really even a component, I'd separate it out into an src/utils folder or something similar
same with testing, we don't have any tests yet, you added the first one so I recommend starting a new src/tests folder
create new index.ts files in those folders when you create them for easy imports/exports
BIGGEST pet peeve is all the hardcoded colors. it's everywhere. we ask to use the theme or add new colors (sparingly) in theme.ts to keep continuity across all pages. I will not accept until you can clear this.

UI/UX-wise

I like what you did to the pull requests table. one ask is to remove the 'filter by clicking repo name'. It's existed before this PR, but I've never been a fan, it's a tad confusing, remove it for me please.
why are the tabs disjointed from all the content? design choice? I'd prefer if you could connect them instead of having a card looking thing for tabs and a separate card/section for the tab content. or at least have it look like the onboard page where the tabs just have a single line underneath instead of being boxed.
I like miner scorecard simplification visually
in overview tab remove 'earnings & score at a glance card', redundant information
in overview tab I'd like the order of: tier performance, tier insights, then score breakdown
finally add the tab to the URL, so if someone sends a link for the pull requests tab, then they are already there, similar to the onboard page. Look there for implementation inspiration.

Please fix these things and we'll get this merged. Good job, this is the type of rehaul we were looking for.

src/components/miners/ExplorerFilterButton.tsx

src/components/miners/MinerFocusCard.tsx

src/components/miners/MinerInsightsCard.tsx

… with theme refs, restructure utils/tests, update MinerDetailsPage tabs

bitloi · 2026-03-10T17:39:58Z

@anderdc I fixed all the comments, would you mind reviewing again?

bitloi added 4 commits March 2, 2026 12:22

chore: remove design rationale doc from PR

ad1892d

bitloi and others added 4 commits March 2, 2026 17:20

chore: revert package-lock.json changes

634660c

Merge branch 'test' into feat/miner-dashboard-redesign-95

6d8670a

fix(ci): regenerate package-lock.json to include vitest dependency

d025267

anderdc requested changes Mar 6, 2026

View reviewed changes

package.json Show resolved Hide resolved

tsconfig.json Show resolved Hide resolved

vite.config.ts Outdated Show resolved Hide resolved

revert: undo changes to tsconfig.json, vite.config.ts, and package-lo…

1b24a3f

…ck.json

bitloi requested a review from anderdc March 6, 2026 23:11

bitloi added 2 commits March 7, 2026 00:17

style: auto-format code with prettier

1b26b99

bitloi force-pushed the feat/miner-dashboard-redesign-95 branch from 68f188a to 9ee4563 Compare March 7, 2026 13:00

bitloi added 2 commits March 9, 2026 21:59

Merge remote-tracking branch 'upstream/test' into feat/miner-dashboar…

f68c1fc

…d-redesign-95

anderdc requested changes Mar 10, 2026

View reviewed changes

anderdc and others added 2 commits March 10, 2026 10:26

Merge branch 'test' into feat/miner-dashboard-redesign-95

d2a6995

fix: address PR entrius#98 review comments - replace hardcoded colors…

54cb621

… with theme refs, restructure utils/tests, update MinerDetailsPage tabs

bitloi requested a review from anderdc March 10, 2026 17:42

fix: remove unused CREDIBILITY_COLORS imports

970ac59

Conversation

bitloi commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Related Issues

Type of Change

Design Rationale

Information Architecture

Why This Beats a Simpler Approach

Screenshots

Data Completeness

Testing

Checklist

Changes

New Components

Refactored Components

Removed Components

Bug Fixes

Tests

Uh oh!

bitloi commented Mar 2, 2026

Uh oh!

anderdc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bitloi commented Mar 7, 2026

Uh oh!

anderdc commented Mar 9, 2026

Uh oh!

bitloi commented Mar 9, 2026

Uh oh!

bitloi commented Mar 10, 2026

Uh oh!

anderdc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bitloi commented Mar 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

bitloi commented Mar 2, 2026 •

edited

Loading