Skip to content

UI/UX refinements for Crawlith web dashboard#84

Merged
saurabhsharma2u merged 6 commits into
mainfrom
jules-refactor-web-ui-8133486044632432944
Mar 4, 2026
Merged

UI/UX refinements for Crawlith web dashboard#84
saurabhsharma2u merged 6 commits into
mainfrom
jules-refactor-web-ui-8133486044632432944

Conversation

@saurabhsharma2u

Copy link
Copy Markdown
Contributor

This PR introduces a series of meaningful UI/UX upgrades to the @crawlith/web dashboard in order to improve clarity, usability, and perceived performance, without modifying any backend behavior or data contracts.

Changes:

  1. Dashboard Improvements: Grouped secondary metrics cleanly under a "Discovery & Content" section using specific KPI cards. Adjusted spacing and tooltips on metric cards.
  2. IssuesTable Fixes: Adjusted padding values on headers and rows to increase visual density and align properly, while maintaining the established color palette for severities.
  3. SinglePage Refactor: Replaced the hidden tab-navigation implementation with vertically stacked view sections (id="content", id="linking", etc.) and a sticky header for quick jump-anchor navigation.
  4. Tab Component Polish: Addressed visual groupings in ClusterTab, tightened paddings in TechnicalTab/LinkingTab, and improved visual interaction in GraphTab by applying an opacity dim effect to unselected nodes when hovering the graph.
  5. Performance Optimizations: Added React.memo wrappers to data-heavy charts and added lazy-loading to the GraphIntelligenceSection.
  6. Code Health: Resolved all TypeScript errors (tsc --noEmit), including removing unused React imports and bad relative mock imports within unlinked components.

PR created automatically by Jules for task 8133486044632432944 started by @saurabhsharma2u

…nce.

- Restructured Dashboard metrics into distinct logical rows (Primary vs Discovery/Content).
- Improved density in IssuesTable and removed unused TS ignores.
- Overhauled SinglePage layout: moved from a tabbed interface to vertically stacked sections with sticky header and anchor scrolling.
- Added SVG hover interactivity for the node visualization in GraphTab.
- Styled ClusterTab panels with borders for stronger hierarchy.
- Wrapped heavy components and charts in React.memo() and React.lazy() to reduce unnecessary re-renders.
- Cleaned up dangling TypeScript errors relating to unresolved data mock imports.
@google-labs-jules

Copy link
Copy Markdown

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

- In `WarningPanel.tsx` and `HealthSnapshot.tsx`, connected to the real data from the API and `DashboardContext` instead of leaving dangling mock types.
- Fixed `API.Issue` to gracefully match properties optionally required by components.
- Generated a new `pnpm-lock.yaml` to ensure lockfile matches internal package.json specs and resolves the CI `--frozen-lockfile` abort.
- Updated API.Issue interface to allow `id?: string` to act as a proper React key instead of using map index values.
- Updated API.Issue interface to allow `type?: string` to act as a graceful fallback for `issueType` so `tsc --noEmit` checks resolve cleanly without errors.
- Regenerated `pnpm-lock.yaml` to ensure lock matches the current plugin package configurations and resolves the `--frozen-lockfile` CI error.
…m-lock.yaml

- Updated API.Issue interface to allow `id?: string` to act as a proper React key instead of using map index values.
- Updated API.Issue interface to allow `type?: string` to act as a graceful fallback for `issueType` so `tsc --noEmit` checks resolve cleanly without errors.
- Regenerated `pnpm-lock.yaml` to ensure lock matches the current internal plugin package workspaces dependencies (specifically `@crawlith/plugin-signals`) and resolves the `--frozen-lockfile` CI error.
@saurabhsharma2u
saurabhsharma2u marked this pull request as ready for review March 4, 2026 19:52
@saurabhsharma2u
saurabhsharma2u merged commit 39df4b9 into main Mar 4, 2026
1 of 7 checks passed
@saurabhsharma2u
saurabhsharma2u deleted the jules-refactor-web-ui-8133486044632432944 branch March 4, 2026 19:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant