feat(org-lens): org lens project detail page UI (LFXV2-1885)

[danoqualls]

Business case: company can view their involvement in a project in a detailed way that adds up to influence in the project and compares influence to other companies. UI only with demo data. Includes both influence detail tab and leaderboards tab.

This pull request introduces the Org Lens Project Detail sub-page (LFXV2-1885) to the application, enabling users to view detailed analytics and leaderboard data for individual projects within an organization. It includes the new route and navigation entry, a complete UI with tabbed navigation, metric and time range toggles, demo data integration, and comprehensive E2E tests. Additionally, it restores interactivity for project rows in the Org Overview, allowing users to drill down into project details.

Org Lens Project Detail Feature Implementation:

• Added the /org/projects/:projectSlug route, navigation entry, and associated metadata, enabling direct navigation to project detail pages. [1] [2]
• Implemented the OrgProjectDetailService to provide demo data for the project detail page, designed for easy replacement with a real backend API in the future.
• Created the OrgProjectDetailTabBarComponent for tabbed navigation, including keyboard accessibility, metric toggles, and time range selection. [1] [2]
• Added comprehensive Playwright E2E tests covering rendering, tab navigation, leaderboard interactions, URL parameter persistence, and 404 handling for unknown slugs.

Org Overview Interactivity Restoration:

• Restored click and keyboard handlers to project rows in the Org Overview, allowing users to navigate to the new project detail page and emitting telemetry events. [1] [2] [3]

Supporting and Miscellaneous Updates:

• Exported new interfaces for the Org Lens Project Detail feature in the shared package.
• Minor improvement to the Valkey cache service for more robust JSON retrieval.

Summary

• Adds the Org Lens Project Detail sub-page at /org/projects/:projectSlug, opened from the Overview's Foundations & Projects table
• Backed by a TypeScript demo-data service (org-lens-project-detail.demo-data.ts) via a new service + controller + route — demo company data only; real Snowflake integration is a separate story. Note: there is no static JSON fixture; all demo payloads are generated server-side in TypeScript.
• Two tabs — Our Influence (default) and Leaderboards — with tab/metric/range state persisted as query params (?tab=, ?metric=, ?range=)

Our Influence tab:

• Hero block (logo, name, description, LFX Insights link, First commit, Software value, Health badge, Foundation pill)
• Technical Influence section (Maintainers, Contributors, Commit Activities, Pull Requests, Avg Merge Time) — horizontal carousel with scrolling chevrons; each card opens a detail drawer
• Ecosystem Influence section (Collaboration Activity, Meeting Attendance, Board Members, Committee Members, Event Attendance, Event Speakers, Training Completions, Certified Individuals, Mailing List Posts)
• Per-card influence chart (area / bar / line variants with custom external tooltip)
• Card detail drawer: definition table + card-specific data table

Leaderboards tab:

• Side-by-side Technical / Ecosystem leaderboard tables with search, PrimeNG paginator, viewing-org row highlighted, band tags (Leading / Contributing / Participating / Non-LF)
• Metric toggle (Calculated Influence / Activity Count) + time range pill group (1y / 2y / All time) in the shared tab bar
• Stacked 100% area trend chart showing top-10 companies' share over time with deterministic demo trajectories

Shell:

• Page-state machine (loading / error / notFound / ready) with <p-skeleton> loading states and lfx-empty-state error/not-found panels
• Breadcrumb: Projects → <project name>
• All sections use data-testid attributes; E2E coverage added

PR size rationale

This PR is ~2,500 lines. The branch builds the complete Project Detail page end-to-end (scaffold → hero → influence cards → trend chart → leaderboards → e2e → polish). The intermediate commits are not independently shippable — routing and the data layer land without visible UI until the component is complete. Splitting at a natural seam (e.g., scaffold-only or data-layer-only) would merge dead routes that don't render. The full page is the atomic unit of work here, consistent with how the sibling Membership Detail page (PR #921) was delivered.

Test plan

• Start dev server with org lens flag enabled; open /org/overview, expand a foundation, click an LF project row → lands on /org/projects/<slug>
• Hero renders all tiles (name, description, LFX Insights link, First commit, Software value, Health badge, Foundation)
• Tab switch updates ?tab= and survives page reload
• Technical + Ecosystem cards render counts, trendlines; clicking a card opens the detail drawer with definition + data table
• Influence Trend stacked area chart renders with correct ordering (most influential at bottom); time range pills update the dataset window
• Leaderboard tables rank orgs, pin the viewing-org row (highlighted), paginator works
• Metric toggle switches between Calculated Influence (band tag) and Activity Count (numeric)
• Time range pills update ?range= query param and persist on reload
• Unknown slug shows the not-found panel; Back to Projects navigates to /org/projects
• Playwright E2E suite passes: yarn e2e

🤖 Generated with Claude Code

[danoqualls]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[Copilot]

Pull request overview

Copilot reviewed 16 out of 16 changed files in this pull request and generated 2 comments.

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

apps/lfx-one/src/server/controllers/org-lens-project-detail.controller.ts (1)

34-51: 🚀 Performance & Scalability | 🔵 Trivial | 💤 Low value

Optional: also set Cache-Control: no-store on the 404 path.

The success path sets no-store, but the 404 response omits it. For consistent cache behavior on unknown slugs, consider setting the header before responding in both branches.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/lfx-one/src/server/controllers/org-lens-project-detail.controller.ts`
around lines 34 - 51, The 404 branch in org-lens-project-detail.controller.ts is
missing the same Cache-Control behavior as the success path. Update the
get_org_lens_project_detail handler so the no-store header is set before both
the 404 response and the normal response, using the existing res.setHeader call
in the same controller to keep cache behavior consistent for unknown project
slugs.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@apps/lfx-one/src/app/modules/dashboards/org/org-project-detail/org-project-detail.component.ts`:
- Line 1: The file has formatting-only issues flagged by yarn format:check, so
update the org-project-detail.component.ts content to match Prettier’s style.
Run yarn format (prettier --write) on the affected file and ensure the
formatting is consistent with the rest of the codebase.

In `@apps/lfx-one/src/app/shared/services/org-lens-project-detail.service.ts`:
- Around line 22-27: The getProjectDetail method in OrgLensProjectDetailService
needs formatting cleanup to satisfy the yarn format:check pipeline. Run Prettier
on this file and keep the existing logic intact, making sure the Observable
pipe/catchError block is formatted according to project style.

---

Nitpick comments:
In `@apps/lfx-one/src/server/controllers/org-lens-project-detail.controller.ts`:
- Around line 34-51: The 404 branch in org-lens-project-detail.controller.ts is
missing the same Cache-Control behavior as the success path. Update the
get_org_lens_project_detail handler so the no-store header is set before both
the 404 response and the normal response, using the existing res.setHeader call
in the same controller to keep cache behavior consistent for unknown project
slugs.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 97699976-3f87-4001-a83a-0855ebdbcc45

📥 Commits

Reviewing files that changed from the base of the PR and between f64638c and f5952d2.

📒 Files selected for processing (16)

• apps/lfx-one/e2e/org-project-detail.spec.ts
• apps/lfx-one/src/app/app.routes.ts
• apps/lfx-one/src/app/modules/dashboards/org/components/org-overview-foundations-and-projects/org-overview-foundations-and-projects.component.html
• apps/lfx-one/src/app/modules/dashboards/org/components/org-overview-foundations-and-projects/org-overview-foundations-and-projects.component.ts
• apps/lfx-one/src/app/modules/dashboards/org/org-project-detail/org-project-detail-tab-bar.component.html
• apps/lfx-one/src/app/modules/dashboards/org/org-project-detail/org-project-detail-tab-bar.component.ts
• apps/lfx-one/src/app/modules/dashboards/org/org-project-detail/org-project-detail.component.html
• apps/lfx-one/src/app/modules/dashboards/org/org-project-detail/org-project-detail.component.ts
• apps/lfx-one/src/app/shared/services/org-lens-project-detail.service.ts
• apps/lfx-one/src/server/controllers/org-lens-project-detail.controller.ts
• apps/lfx-one/src/server/routes/orgs.route.ts
• apps/lfx-one/src/server/services/org-lens-project-detail.demo-data.ts
• apps/lfx-one/src/server/services/org-lens-project-detail.service.ts
• apps/lfx-one/src/server/services/valkey.service.ts
• packages/shared/src/interfaces/index.ts
• packages/shared/src/interfaces/org-lens-project-detail.interface.ts

[danoqualls]

Review Feedback Addressed

Commit: 8029a58

Changes Made

• org-lens-project-detail.interface.ts: updated OrgLensScoreType JSDoc — removed the stale ?score= URL-param reference; clarified it is reserved for a future score-type toggle not yet wired. Also corrected OrgLensLeaderboardMetric comment from "Trend + Band columns" to "Band column" since the leaderboard table has no separate Trend column (per copilot-pull-request-reviewer)
• org-project-detail.component.ts: removed 'demo-org' hardcoded fallback in initDetailStream() — orgUid$ now filters to emit only when a real uid is available, preventing a 4xx on assertOrgUid during initial hydration; Prettier applied (per copilot-pull-request-reviewer)
• org-lens-project-detail.service.ts: Prettier formatting applied — pipe/catchError reformatted to multi-line style (per coderabbitai[bot])

No Change Needed

• org-project-detail.component.ts:1: format:check passes for this file locally — the coderabbitai[bot] flag appears to reference a stale CI run; Prettier was applied and the file is clean

Threads Resolved

5 of 5 unresolved threads addressed in this iteration.

[Copilot]

Pull request overview

Copilot reviewed 16 out of 16 changed files in this pull request and generated 3 comments.

[MRashad26]

Review — PR #1028 feat/LFXV2-1885

Verdict: FAIL — Critical violations in template and interface/constant placement

Overview

Adds the Org Lens Project Detail page at /org/projects/:projectSlug with demo fixture data, Our Influence tab (hero, influence cards, trend chart), Leaderboards tab (leaderboard tables, band tags, stacked area chart), and Playwright E2E tests. Well-structured overall, but has violations across three categories.

Secrets check

✅ org-lens-project-detail.demo-data.ts contains only demo company names, seed metrics, and placeholder values. No real API tokens, credentials, or endpoints.

Code standards

🟡 ## Test plan in PR body — lfx-self-serve PRs must not include a ## Test plan section. Move the 10 checklist items to the JIRA ticket (LFXV2-1885).

---

🔴 CRITICAL — Method calls in templates (org-project-detail.component.html)

Three component methods are called directly in the template — all forbidden in this codebase:

1. [class]="bandChipClass(band)" (lines ~496, ~542) — method call in property binding
2. @for (bar of bandSignalBars(band); track bar.x) (lines ~498, ~544) — method call in @for expression
3. {{ bandLabel(band) }} (lines ~501, ~547) — method call in interpolation
4. {{ personInitials(person.name) }} (line ~883) — method call in interpolation

Suggested fix — band methods: Pre-compute bandChipClass, bandSignalBars, and bandLabel into computed() signals using the existing technicalBand() / ecosystemBand() signals:

protected readonly technicalBandMeta = computed(() => {
  const band = this.technicalBand();
  if (!band) return null;
  return { label: BAND_TAG[band].label, chipClass: BAND_CHIP_CLASS[band], bars: buildSignalBars(band) };
});
// same for ecosystemBandMeta

Then in template: {{ technicalBandMeta()?.label }} / [class]="technicalBandMeta()?.chipClass".

Suggested fix — personInitials: Add initials: string to OrgLensCardDetailCell (the person shape) in the shared interface, and compute it in the service mapper instead of the template. Or promote personInitials() to a pure pipe.

---

🔴 CRITICAL — Interfaces/types defined in component file (org-project-detail.component.ts)

Two types are declared locally in the component file instead of in @lfx-one/shared/interfaces:

• InfluenceCardVm (view model for influence cards)
• LeaderboardDimension = 'technical' | 'ecosystem' (union type)

Move both to packages/shared/src/interfaces/org-lens-project-detail.interface.ts (the new shared interfaces file added in this PR).

---

🔴 CRITICAL — Module-level constants in component file (org-project-detail.component.ts)

14 module-level const declarations live in the component file instead of @lfx-one/shared/constants:

DEFAULT_TAB, VALID_TABS, DEFAULT_METRIC, VALID_METRICS, DEFAULT_TIME_RANGE, VALID_TIME_RANGES, HEALTH_TAG, BAND_TAG, BAND_SIGNAL_RANK, BAND_SIGNAL_FILL, BAND_SIGNAL_FILL_LIGHT, BAND_CHIP_CLASS, METRIC_OPTIONS, TIME_RANGE_OPTIONS, TIME_RANGE_MONTHS, STACKED_PALETTE

Move to packages/shared/src/constants/org-lens.constants.ts.

---

Code correctness — no issues

• Signal patterns correct: all mutable state via signal(), derived state via computed(), URL param reads via toSignal(route.queryParamMap) ✅
• No effect() usage ✅
• Valkey cache service change (JSON parse guard) is safe ✅
• Route structure and query-param persistence correct ✅
• E2E tests present and structured correctly ✅

[Copilot]

Pull request overview

Copilot reviewed 16 out of 16 changed files in this pull request and generated 3 comments.

[Copilot]

Pull request overview

Copilot reviewed 16 out of 16 changed files in this pull request and generated 3 comments.

[danoqualls]

Review Feedback Addressed

Commit: 4bae381

Changes Made

• org-project-detail.component.html: Replaced bandChipClass(band), bandSignalBars(band), and bandLabel(band) method calls with technicalBandMeta() / ecosystemBandMeta() precomputed computed signals; replaced personInitials(person.name) with person.initials (per @MRashad26)
• org-project-detail.component.ts: Removed local InfluenceCardVm and LeaderboardDimension types; removed all 16 local constants; added technicalBandMeta / ecosystemBandMeta computed signals and buildBandBars() private helper; imports all types and constants from @lfx-one/shared (per @MRashad26)
• packages/shared/src/constants/org-lens-project-detail.constants.ts (new): Extracted all 16 constants; DEFAULT_TAB → PD_DEFAULT_TAB and VALID_TABS → PD_VALID_TABS to avoid collision with existing membership DEFAULT_TAB (per @MRashad26)
• packages/shared/src/interfaces/org-lens-project-detail.interface.ts: Added InfluenceCardVm and LeaderboardDimension; added initials: string to OrgLensCardDetailCell.person; adopted discriminated union type shape (per @MRashad26, copilot-pull-request-reviewer)
• org-lens-project-detail.demo-data.ts: Fixed ramp() zero case to return [] instead of 12 zeros; added personInitials() helper and initials field on person cells; fixed stale comment (per copilot-pull-request-reviewer)
• PR description: Corrected "SSR JSON fixture" → "TypeScript demo-data service" to accurately describe how demo data is generated (per copilot-pull-request-reviewer)

Threads Resolved

7 of 7 unresolved threads addressed in this iteration.

[coderabbitai]

🧹 Nitpick comments (2)

packages/shared/src/interfaces/org-lens-project-detail.interface.ts (2)

15-31: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Use shared contracts as the single source of truth

Lines 15-31 define types that are still duplicated in apps/lfx-one/src/app/modules/dashboards/org/org-project-detail/org-project-detail.component.ts (see its Lines 16-31). Please remove the local duplicates and import these shared exports to prevent contract drift.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/shared/src/interfaces/org-lens-project-detail.interface.ts` around
lines 15 - 31, The org project detail component still defines local copies of
LeaderboardDimension and InfluenceCardVm instead of using the shared contracts,
which risks drift between app and shared types. Remove the duplicate type
declarations from org-project-detail.component.ts and import the shared exports
from org-lens-project-detail.interface.ts, then update any usages in the
component to reference those shared symbols directly.

---

24-27: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Tighten InfluenceCardVm chart typing with a generic chart type

At Line 24-27, chartType is not type-coupled to chartData/chartOptions because all three use the broad ChartType union. Consider InfluenceCardVm<TType extends ChartType> so chartData/chartOptions are constrained to the selected chartType.

Proposed type-safe shape

-export interface InfluenceCardVm {
+export interface InfluenceCardVm<TType extends ChartType = ChartType> {
   key: string;
   title: string;
   scopeLabel: string | null;
   hasData: boolean;
-  chartType: ChartType;
-  chartData: ChartData<ChartType>;
-  chartOptions: ChartOptions<ChartType>;
+  chartType: TType;
+  chartData: ChartData<TType>;
+  chartOptions: ChartOptions<TType>;
   valueSuffix: string;
   caption: { prefix: string; emphasis: string; suffix: string };
   statLabel: string;
   testId: string;
 }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/shared/src/interfaces/org-lens-project-detail.interface.ts` around
lines 24 - 27, Tighten the `InfluenceCardVm` typing so `chartType`, `chartData`,
and `chartOptions` are linked by a generic chart type instead of the broad
`ChartType` union. Update the `InfluenceCardVm` interface to be generic (for
example, `InfluenceCardVm<TType extends ChartType>`) and use that type parameter
in the `chartData` and `chartOptions` fields so they match the selected
`chartType`. Then update any uses of `InfluenceCardVm` that construct or consume
these values to supply the concrete chart type and preserve type safety.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/shared/src/interfaces/org-lens-project-detail.interface.ts`:
- Around line 15-31: The org project detail component still defines local copies
of LeaderboardDimension and InfluenceCardVm instead of using the shared
contracts, which risks drift between app and shared types. Remove the duplicate
type declarations from org-project-detail.component.ts and import the shared
exports from org-lens-project-detail.interface.ts, then update any usages in the
component to reference those shared symbols directly.
- Around line 24-27: Tighten the `InfluenceCardVm` typing so `chartType`,
`chartData`, and `chartOptions` are linked by a generic chart type instead of
the broad `ChartType` union. Update the `InfluenceCardVm` interface to be
generic (for example, `InfluenceCardVm<TType extends ChartType>`) and use that
type parameter in the `chartData` and `chartOptions` fields so they match the
selected `chartType`. Then update any uses of `InfluenceCardVm` that construct
or consume these values to supply the concrete chart type and preserve type
safety.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ecce05be-781a-42df-b52f-f75db599e6bd

📥 Commits

Reviewing files that changed from the base of the PR and between 276e989 and 4bae381.

📒 Files selected for processing (6)

• apps/lfx-one/src/app/modules/dashboards/org/org-project-detail/org-project-detail.component.html
• apps/lfx-one/src/app/modules/dashboards/org/org-project-detail/org-project-detail.component.ts
• apps/lfx-one/src/server/services/org-lens-project-detail.demo-data.ts
• packages/shared/src/constants/index.ts
• packages/shared/src/constants/org-lens-project-detail.constants.ts
• packages/shared/src/interfaces/org-lens-project-detail.interface.ts

✅ Files skipped from review due to trivial changes (2)

• packages/shared/src/constants/index.ts
• packages/shared/src/constants/org-lens-project-detail.constants.ts

🚧 Files skipped from review as they are similar to previous changes (3)

• apps/lfx-one/src/app/modules/dashboards/org/org-project-detail/org-project-detail.component.html
• apps/lfx-one/src/app/modules/dashboards/org/org-project-detail/org-project-detail.component.ts
• apps/lfx-one/src/server/services/org-lens-project-detail.demo-data.ts