[INS-216] Fix sending activity type and platform in requests to the backend API

[borfast]

This is meant to redo the work @emlimlf did in #107, and that I somehow mistakenly overwrote. I probably misused git town and it messed up Efren's PR. Sorry Efren!

As per the original PR:

• Handled the platform in the dropdown select
• Added the platform parameter to the api call for contributor leaderboard, contributor dependency, org leaderboard, org dependency and geo distribution widgets
• rename the metric parameter to activityType

ℹ️ This PR is part of a stack

Please review them in order, as some of the first ones set the foundation for the later ones.

• main branch
  • PR [INS-216] Fix sending activity type and platform in requests to the backend API #109 👈 You are here
    • PR [INS-216] Add contract between frontend and backend for the activity types #110
      • PR [INS-216] Fix activity type filter for the contributors dependency data #111
        • PR [INS-216] Fix activity type filter for the organizations dependency data #112
          • PR [INS-216] Fix activity type filter for the contributor leaderboard data #113
            • PR [INS-216] Fix activity type filter for the organization leaderboard data #114
              • PR [INS-216] Fix activity type filter for the geographical distribution data #115
                • PR [INS-216] Fix activity type filter for the retention data #116
                  • PR [INS-216] Fix linting errors #117

Summary by CodeRabbit

Summary by CodeRabbit

• New Features

  • Enhanced contribution metrics now offer a more granular breakdown, allowing for refined filtering with the introduction of platform and activity type distinctions.
  • Data views across leaderboards, tables, and distribution dashboards display more precise insights by categorizing contributions into distinct segments.
  • Users benefit from improved clarity in performance metrics, with contributions now clearly delineated by specific activity and platform types.

• Bug Fixes

  • Resolved issues with metric handling across various components to ensure consistent display and data retrieval.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

This pull request updates several Vue components related to contributor metrics handling. The default metric value is changed from 'all' to 'all:all', and computed properties (platform and activityType) are added to split this string. The changes modify API fetch calls to use these two new parameters and adjust the UI logic in components that render table headers and dropdown options. These updates are applied consistently across multiple components to enable a more granular categorization of metrics.

Changes

File(s)	Change Summary
frontend/app/components/modules/project/components/contributors/(contributor-dependency.vue, contributors-leaderboard.vue, geographical-distribution.vue, organization-dependency.vue, organizations-leaderboard.vue)	Updated the initial metric from 'all' to 'all:all', added computed properties to split the metric into platform and activityType, and modified API fetch calls to pass these as separate parameters.
frontend/app/components/modules/project/components/contributors/fragments/(contributors-table.vue, organizations-table.vue)	Updated condition checks and label generation logic to require the new 'all:all' format, using the split metric value to determine the contribution header.
frontend/app/components/modules/project/components/contributors/fragments/metric-dropdown.vue	Refactored the metricOptions mapping to produce objects with label and items properties, including conditional formatting based on available labels and adding type annotations for improved clarity.

Sequence Diagram(s)

sequenceDiagram
    participant U as User
    participant C as Vue Component
    participant API as API Server
    U->>C: Update or select metric
    C->>C: Compute platform & activityType from "all:all"
    C->>API: Call useFetch with platform & activityType
    API-->>C: Return data
    C->>U: Render updated view

Loading

Possibly related PRs

• fix all api params reactive issue #88: The changes in the main PR and the retrieved PR are related as both modify the metric variable and introduce computed properties for platform and activityType, impacting how the useFetch function is called in their respective components.
• Collections adjustments #61: The changes in the main PR and the retrieved PR are related as both involve modifications to the metric variable, introducing a new structure that splits it into platform and activityType, and updating API calls accordingly.
• Add Contributor Dependency widget endpoint #84: The changes in the main PR and the retrieved PR are related as both modify the metric variable from 'all' to 'all:all' and introduce computed properties for platform and activityType, affecting how metrics are processed and utilized in API calls.

Suggested reviewers

• emlimlf
• gaspergrom

Tip

⚡🧪 Multi-step agentic review comment chat (experimental)

• We're introducing multi-step agentic chat in review comments. This experimental feature enhances review discussions with the CodeRabbit agentic chat by enabling advanced interactions, including the ability to create pull requests directly from comments.
  - To enable this feature, set early_access to true under in the settings.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1f0aea60cf69d1129231c996e65eb080b6d5805e and 1e8a693.

📒 Files selected for processing (8)

• frontend/app/components/modules/project/components/contributors/contributor-dependency.vue (1 hunks)
• frontend/app/components/modules/project/components/contributors/contributors-leaderboard.vue (1 hunks)
• frontend/app/components/modules/project/components/contributors/fragments/contributors-table.vue (1 hunks)
• frontend/app/components/modules/project/components/contributors/fragments/metric-dropdown.vue (1 hunks)
• frontend/app/components/modules/project/components/contributors/fragments/organizations-table.vue (1 hunks)
• frontend/app/components/modules/project/components/contributors/geographical-distribution.vue (1 hunks)
• frontend/app/components/modules/project/components/contributors/organization-dependency.vue (1 hunks)
• frontend/app/components/modules/project/components/contributors/organizations-leaderboard.vue (1 hunks)

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

frontend/app/components/modules/project/components/contributors/geographical-distribution.vue (1)

126-127: Good computed properties implementation with potential edge case

The computed properties cleanly extract platform and activityType from the metric value. Consider adding a fallback for the split operation in case the format is unexpected.

- const platform = computed(() => metric.value.split(':')[0]);
- const activityType = computed(() => metric.value.split(':')[1]);
+ const platform = computed(() => metric.value.split(':')[0] || 'all');
+ const activityType = computed(() => metric.value.split(':')[1] || 'all');

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 90907212582e8ea5470ddd9aadc40431dfacff06 and fc20b31d52c2b84886dcbf58886ee8751b5a9dca.

📒 Files selected for processing (1)

• frontend/app/components/modules/project/components/contributors/geographical-distribution.vue (1 hunks)

🔇 Additional comments (4)

frontend/app/components/modules/project/components/contributors/geographical-distribution.vue (4)

113-113: Appropriate type imports added

The addition of the dropdown type imports enhances type safety and ensures proper TypeScript compatibility for the dropdown options implementation.

---

115-121: Good implementation of dropdown options with platform:activityType structure

The implementation correctly maps the metrics options to include both platform and activity type in the value field, following the format platform:activityType. This aligns with the PR objective of handling platform in dropdown selections.

---

124-124: Appropriate default value update

Changed metric default from 'all' to 'all:all' to match the new format where the first part represents platform and the second part represents activity type.

---

135-137: Fix correctly implemented for API parameters

The API call now correctly sends platform and activityType as separate parameters instead of a single metric parameter, addressing the main issue described in the PR objectives.