LearnNewsExamplesServices
Frontmatter
id8932
titleFeat: DevRank UI - Grid & Controls Implementation
stateClosed
labels
enhancementdesign
assigneestobiu
createdAtFeb 1, 2026, 4:26 PM
updatedAtFeb 1, 2026, 4:34 PM
githubUrlhttps://github.com/neomjs/neo/issues/8932
authortobiu
commentsCount1
parentIssue8930
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtFeb 1, 2026, 4:34 PM

Feat: DevRank UI - Grid & Controls Implementation

Closed v12.0.0 enhancementdesign
tobiu
tobiu commented on Feb 1, 2026, 4:26 PM

This task focuses on implementing the initial UI for DevRank, inspired by the structure of the existing examples/grid/bigData demo.

Goals

  1. Layout: Implement a Neo.container.Viewport with a buffered Neo.grid.Panel as the main view.
  2. Controls: Include a slide-out controls panel (hamburger menu trigger) for filtering.
  3. Grid Configuration:
    • Columns: Rank, User (Avatar + Name), Total Contributions, Avg/Year, First Year, Last Active.
    • Component Renderers: Use avatars and maybe sparklines (later) in grid cells.
  4. Data Integration: Connect the grid to the DevRank.store.Contributors store populated in the previous step.
  5. Styling: Adapt the SCSS from the Big Data example to ensure a polished look.

Filters (Controls Panel)

  • Yearly Activity: Range slider or inputs to filter users based on contributions in specific years (requires ensuring yearly data is in the JSON).
  • Search: Username/Name filter.

Reference

  • examples/grid/bigData
  • resources/scss/src/examples/grid/bigData
tobiu added the enhancement label on Feb 1, 2026, 4:26 PM
tobiu added the design label on Feb 1, 2026, 4:26 PM
tobiu added parent issue #8930 on Feb 1, 2026, 4:26 PM
tobiu assigned to @tobiu on Feb 1, 2026, 4:27 PM
tobiu referenced in commit b3d6e59 - "feat: DevRank UI - Grid & Controls Implementation (#8932)" on Feb 1, 2026, 4:33 PM
tobiu
tobiu Feb 1, 2026, 4:33 PM

Input from Gemini 3 Pro:

✦ I have implemented the UI components for DevRank, following the structure of the Big Data example.

UI Components Implemented

  1. DevRank.view.Viewport: The main app container, handling the layout and integrating the Grid and Controls.
  2. DevRank.view.GridContainer: The buffered grid configuration.
    • Columns: Rank (#), User (Avatar + Name), Total, Since (First Year), Last Active.
    • Renderer: Added a custom HTML renderer for the User column to display the avatar and name.
  3. DevRank.view.ControlsContainer: The slide-out settings panel.
    • Toggle: Hamburger menu button logic adapted for the DevRank layout.
    • Filters: Added a 'Search User' text field. (Yearly activity slider placeholder is pending data availability).
  4. Entry Point: Updated apps/devrank/app.mjs to launch the new Viewport.

Styling

  • SCSS: Ported the sliding menu styles to resources/scss/src/apps/devrank/ControlsContainer.scss and Viewport.scss.

Next Steps

  • The data in resources/data.json currently powers the grid.
  • The next phase involves refining the discovery engine to populate this file with a larger dataset and implementing the logic for the filters in the ControlsContainer.
tobiu closed this issue on Feb 1, 2026, 4:34 PM