feat: UX, responsive design, and data-density overhaul#39
Draft
pastarita wants to merge 41 commits intoTextureHQ:mainfrom
Draft
feat: UX, responsive design, and data-density overhaul#39pastarita wants to merge 41 commits intoTextureHQ:mainfrom
pastarita wants to merge 41 commits intoTextureHQ:mainfrom
Conversation
The native browser chevron in <select> elements was crowding the option text. Replaced px-2 with pl-2 pr-7 across all filter dropdowns to give the chevron breathing room.
Added hyphens-auto utility class so the browser can hyphenate long utility/plant names at narrow viewports instead of overflowing or truncating mid-word.
Ensured every UtilitySegment enum value has an intentional badge variant assignment instead of falling through to default. Coops get success, municipals get warning, CCAs get neutral, etc.
Tightened header from h-14 to h-12, adjusted padding rhythm, increased logo-to-nav gap, and updated content offset to match. Creates a denser, more intentional header layout.
Allow utility names to wrap to 2 lines at narrow viewports instead of truncating to one line, preserving single-line clamp on desktop.
Sort options now show ▲/▼ arrows indicating direction, making the current sort order immediately visible across all table pages.
Power plants now show County, Operating Year, and Generator Count columns. Transmission lines substation labels clarified to From/To. All new columns hidden on mobile.
When a jurisdiction filter is active, matching jurisdiction cells are highlighted with brand color and bold text for visual distinction.
Added tab UI separating "Data Changes" (live industry updates) from "Site Updates" (product changes). Added entity-type filter chips and pulse animation on sync indicator. Emphasized that the data changelog is the core product — streaming changes from the industry.
Replaced fragile 100ms setTimeout resize with ResizeObserver for reliable map sizing on layout changes. Added containerRef for observing resize events via requestAnimationFrame.
New mark shows G inscribed in C with tree-graph network connections radiating from center to the arc boundary. Evokes grid topology meets letterform. Ships as inline SVG + standalone public/logo.svg.
Filter controls now flex-col below sm breakpoint across all table pages, preventing horizontal overflow on phone-width viewports.
… table Grid operators table now surfaces EIA ID, Balancing Authority code, NERC region, and external website link columns. All hidden on mobile.
Added entity count badges next to section headers in search results. Improved Tier-2 async loading indicator with descriptive text.
Finer-grained zoom levels for better localized territory views. Added intermediate zoom steps and tighter thresholds so small service territories don't render too zoomed out.
Changelog now supports text search across entity names and details. Search input appears above the meta bar in the Data Changes tab.
Favicon SVG updated to match the new CommonGrid logo with G-in-C dendritic graph design.
Map component now receives layout as key prop, forcing clean remount when switching between hybrid/list/map modes to prevent stale render state.
Reduced mobile tab label text size to text-xs for better fit on narrow viewports without horizontal scrolling.
Mobile nav menu items now show hover backgrounds, active items highlighted with brand color and surface background. GitHub link separated with border divider.
Added truncate class to prevent the source data link from overflowing on very narrow screens.
Search input slightly shorter on mobile (h-10 vs h-11), text-sm for compact feel. Result count hidden on narrow viewports to save horizontal space.
Added title and description metadata for better SEO and tab labeling on the interactive explorer page.
Introduces the CommonGrid PR Description Standard v1.0 as a reusable GitHub PR template (.github/PULL_REQUEST_TEMPLATE.md) and produces the first instance (PR_DESCRIPTION.md) with full changeset analysis: commit classification, file impact matrix, dependency graphs, responsive audit, risk assessment, and test plan.
Incorporated best practices from Kubernetes (type classification, release-note block), React (test-plan primacy), Conventional Commits v1.0, Keep a Changelog v1.1, MADR, and CodeRabbit walkthrough format. Template now has 3 tiers: [R]equired, [+]Recommended, [~]Optional. Added: Change Type checklist, PR size classification, Changelog section (Added/Changed/Fixed/Removed), ADR Context placeholder, release-note block, multi-persona scanning guidance. All optional sections wrapped in HTML comments for clean default rendering.
Full architecture spec for automated before/after screenshot pipeline: - Capture manifest schema for declaring routes, selectors, viewports - Dual-server git worktree strategy for parallel base/PR capture - Color-rationalized annotation system (red/green/blue/orange/yellow) - Side-by-side composition engine with title/footer bars - GitHub issue upload for permanent image hosting - File-to-route mapping for auto-manifest generation - GitHub Actions workflow integration - CLI interface with selective capture support
Added: actual TypeScript implementations for capture, annotate, compose, diff, and upload modules. Added open-source tool landscape comparison (Lost Pixel, Argos CI, Chromatic, Percy, BackstopJS, reg-suit, Playwright built-in). Corrected image hosting strategy to GitHub branch storage per API research. Added recommendation matrix for tool selection.
Working pipeline: Playwright captures screenshots at specified routes and viewports, sharp+SVG draws color-coded bounding boxes (red/green/ blue/orange/yellow), compose engine creates side-by-side BEFORE|AFTER images with title bar and footer, pixelmatch computes pixel diffs. Modules: - playwright-capture.ts: browser automation + bbox recording - annotate.ts: SVG overlay compositing via sharp - compose.ts: side-by-side image composition - diff.ts: pixelmatch diff detection - capture-vr.ts: orchestrator (worktree, servers, pipeline) - capture-manifest.json: 10 capture targets for welcome-pr - file-route-map.json: file→route mapping for auto-manifest New scripts: npm run vr:capture, npm run vr:capture:pr-only New devDeps: playwright, sharp, pixelmatch, pngjs, wait-on
The base worktree was missing public/data/ (gitignored, generated by prebuild), causing all data pages to 404. Now syncs data/ and runs prebuild in the worktree. Also improves content readiness detection.
Port 3100 was occupied by another process, causing all BEFORE captures to show 404 pages or a different app's UI. Moved to 4100/4101 and added a pre-flight port check that fails fast with a clear error message.
This reverts commit ecdc89b.
…R descriptions - Grid Operators: merge EIA ID / BA Code / NERC into a single Codes column with linked badges - Changelog: sharpen subtitle to distinguish data-change vs product-change feeds - Diffwatch: add detect-alerts.ts (console-error and red-overlay scanning) and clean.ts - Favicon: add preload link to layout.tsx - PR descriptions: move to docs/pr-descriptions/ with hello-pr and diffwatch drafts
Change segment column mobile format from "badge" to "secondary" — the render function already wraps in <Badge>, so "badge" format caused the DataTable mobile card to double-wrap it.
PageLayout.Header doesn't render the description prop — move the subtitle into PageLayout.Content as a <p> so it actually appears.
Each targeted re-run now appends _00, _01, _02… to comparison, annotated, and diff filenames. An unversioned "latest" copy is also maintained at the base stem for easy reference. This gives local traceability when re-running the pipeline for specific captures without overwriting previous results.
…nd condensed layout - Replace tab bar with pill toggle (Grid Data / Site) in upper right - Merge description + sync status into single line with green pulse dot - Wrap entity type filter + search in a labeled fieldset - Use subtle blue tints for filter track and search background - Fix ISO capitalization in filter chips - Condense spacing throughout the page
…g active When entity type or search filter is applied, the fieldset expands to contain the entire feed with a blue-tinted border and background. The legend dynamically shows filter state: "FILTERED BY ISO · 2 RESULTS". Reverts to compact "FILTER" fieldset when all filters are cleared.
…inals Each vr:capture run now deletes old _NN files before writing the new version, keeping only the latest ordinal per stem across comparisons, annotated, and diffs directories. Also updates PR description template to use DRAG_DROP placeholder convention for manual image upload.
…roduction - ExplorerShell: fix undefined `layout` variable in HybridLayout by using static key string (component only renders when layout=hybrid) - ExplorerMap: show env var name only in development; production users see a generic "temporarily unavailable" message
|
@pastarita is attempting to deploy a commit to the Texture Team on Vercel. A member of the Team first needs to authorize it. |
Author
|
(test quote reply with img)
notes: - multiple changes present should be identified, the chevron bounding box didn't work, fix spacing |
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.
(this top table is just a full list of the pr-description segments, technically it begins at 'Summary')
PR Description Convention
Summary
Comprehensive UX, responsive design, and data-density overhaul across the CommonGrid registry. 25 commits across ~30 files addressing: table data density (consolidated Codes column with linked EIA/BA/NERC badges), dropdown styling, sort UX, badge consistency, header spacing, Mapbox stability, changelog tabs + search, narrow-viewport responsiveness, and CMD+K search polish.
Visual changes were verified using Diffwatch, a custom visual regression capture system developed as a companion to this work and submitted as a separate PR with its own commit history.
Change Type
feat— New feature or capabilityfix— Bug fixstyle— Visual/CSS changes (no logic change)docs— Documentation onlyrefactortestchoreperfUser-facing change? Yes — visual changes across all pages, new table columns, changelog tabs, consolidated Codes column
Breaking change? No
Changeset Overview
featcommitsfixcommitsstylecommitsdocscommitsMotivation
CommonGrid's table pages, header, and explorer map had accumulated fit-and-finish issues that individually were small but collectively degraded the experience — particularly at narrow viewports and on the grid-operators registry page. This PR treats them as a cohesive surface area, applying consistent patterns across all 5 data pages, the explorer, and the changelog.
To surface regulatory identifiers, we initially introduced three new table columns — EIA ID, BA Code, and NERC — giving each code its own column. In practice this was too sparse: most rows showed triple em-dashes, the table grew wider than necessary, and the codes lacked navigational value. We iterated to a single Codes column that stacks only the codes present for each entity as compact linked badges, each pointing to its respective source (EIA-861, EIA Grid Monitor, NERC). This makes the data denser, the table narrower, and the identifiers actionable.
To achieve better observability of visual changes directly within the PR description itself, we pioneered Diffwatch — a convention and toolchain drawing on established visual regression analysis methods, adapted to an agent-first paradigm where automated capture, annotation, diffing, and composition are the default workflow rather than a manual afterthought. Diffwatch is submitted as its own PR, but its screenshots are embedded here as visual attestation.
Relationship to Diffwatch PR
The commit histories interleave chronologically (Diffwatch was built mid-flight), but the PRs are scoped independently. Neither depends on the other to merge. Diffwatch screenshots are referenced here for review convenience.
Architecture & Dependency
graph TD subgraph "1 · Foundation" CSS[globals.css<br>hyphens-auto] FMT[lib/formatting.ts<br>badge variants] GEO[lib/geo.ts<br>zoom calc] end subgraph "2 · Shell" TB[TopBar<br>spacing + mobile] SLC[ShellLayoutClient<br>pt-12] GS[GlobalSearch<br>counts + loading] end subgraph "3 · Explorer" EM[ExplorerMap<br>ResizeObserver] ES[ExplorerShell<br>key prop] end subgraph "4 · Data Pages" GO[grid-operators<br>Codes column] PP[power-plants] TL[transmission-lines] EV[ev-charging] PN[pricing-nodes] end subgraph "5 · Feature Pages" CL[changelog<br>tabs + search] end CSS --> GO & PP & TL & EV & PN FMT --> GO & EV GEO --> EM TB --> SLC EM --> ES style GO fill:#dbeafe,stroke:#1d4ed8,color:#1e3a5f style CL fill:#bbf7d0,stroke:#15803d,color:#14532dRisk Assessment
mobile: false; links open in new tabChange Risk vs Impact
quadrantChart title Change Risk vs Impact x-axis Low Impact --> High Impact y-axis Low Risk --> High Risk TopBar height: [0.9, 0.8] Map lifecycle: [0.6, 0.7] Badge variants: [0.5, 0.5] Zoom calc: [0.4, 0.55] Filter stacking: [0.7, 0.35] Changelog tabs: [0.8, 0.2] Codes column: [0.75, 0.15] Sort chevrons: [0.3, 0.1]Responsive Breakpoint Audit
Commit Log
3f89367b7e25b2111ef3f106f6417c9de2f37b1abc791740dece78d0ea227b5aec3b14c9e343aecdc89b049d059ba4b06d00353ab73c7db57da3bdb8689455ed04191f37bc36c20685964d1943cf533a9a3129d55a0db81ff146f7bf7378bCommit Clustering by Shared File
grid-operators/page.tsxTopBar.tsxchangelog/page.tsxlib/formatting.tsExplorerMap.tsxFile Impact Matrix
app/(shell)/grid-operators/page.tsxapp/(shell)/changelog/page.tsxapp/(shell)/power-plants/page.tsxapp/(shell)/ev-charging/page.tsxapp/(shell)/pricing-nodes/page.tsxapp/(shell)/transmission-lines/page.tsxapp/(shell)/explore/page.tsxapp/layout.tsxcomponents/TopBar.tsxcomponents/explorer/ExplorerMap.tsxcomponents/GlobalSearch.tsxcomponents/SearchInput.tsxcomponents/DataSourceLink.tsxapp/globals.csshyphens-autoutility class.github/PULL_REQUEST_TEMPLATE.mdChangelog
Added
hyphens-autoutility class.github/PULL_REQUEST_TEMPLATE.md)Changed
Fixed
<select>chevron crowding text — asymmetric padding across 9 filesReverted
Screenshots / Recordings
Generated by Diffwatch (
npm run vr:capture). Comparison images uploaded from.visual-regression/captures/comparisons/.Grid Operators — Consolidated Codes Column (desktop)
img: grid-operators-new-columns-desktop.png
Codes column with stacked EIA/BA/NERC linked badges replacing three sparse columns.
Dropdown Chevron Padding (mobile + desktop)
img: dropdown-chevron-padding-desktop.png
Inner right-side padding on native
<select>elements across all data pages.Header Spacing (desktop)
img: header-spacing-desktop.png
h-14 → h-12, tighter nav link padding, adjusted logo-to-nav gap.
Badge Variants (desktop)
img: badge-variants-desktop.png
Corrected badge color mapping for all utility segment types.
Sort Chevrons (desktop)
img: sort-chevrons-desktop.png
Sort direction ▲/▼ indicators in dropdown labels on power-plants.
Changelog Redesign (tablet + desktop)
img: changelog-tabs-desktop.png
img: changelog-tabs-tablet.png
Pill toggle (Grid Data / Site), filter fieldset with entity-type pills + inline search, combined sync status with pulse indicator.
Filter Stacking (mobile)
img: filter-stacking-mobile.png
Filter dropdowns stack full-width vertically on narrow viewports.
Name Clamping (mobile)
img: name-clamping-mobile.png
2-line name clamp on grid-operators cards at 375px.
Mobile Menu (mobile)
img: mobile-menu-mobile.png
Mobile menu with active brand color state and hover backgrounds.
Reviewer Checklist
git diff --stat main...hello-pr.envvalues committedTest Plan
Automated
next buildcompletes without errorsnpx biome checkpassesVisual Regression — Diffwatch
npm run vr:capturecompletes — all 12 captures across mobile/tablet/desktop🔴 alert indicatorwarnings in pipeline outputManual — Functional
<select>chevrons have inner right paddingDeferred Work
@floating-uipopover workLayoutModetype extension