feat(web): show-coherency-percencentage-instead-of-ratio

Harman-singh-waraich commented 2 weeks ago

PR-Codex overview

This PR updates the Coherency component in the JurorCard and modifies the associated styles and tooltip messages to enhance clarity and functionality.

Detailed summary

Updated the Coherency component to display a Tooltip with the percentage of coherent votes.
Added the getPercent function to calculate the percentage of coherent votes.
Changed the tooltip message to clarify the information presented.
Updated the CSS to change the ::before content from "Votes" to "Coherency".

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

Summary by CodeRabbit

New Features
- Updated the display text from "Votes" to "Coherency" for improved clarity.
- Enhanced tooltip messages to indicate the percentage of coherent votes and provide additional context.
- Introduced a new tooltip component to show the coherence ratio as a percentage.
Bug Fixes
- Clarified tooltip messaging for better user understanding of voting behavior.

coderabbitai[bot] commented 2 weeks ago

Walkthrough

The changes involve modifications to two components, Coherency.tsx in the Header and JurorCard sections. In the Header component, the displayed content is updated from "Votes" to "Coherency," and the tooltip message is revised for clarity, indicating the percentage of coherent votes. In the JurorCard component, a new Tooltip component is introduced to display the coherence ratio, which is calculated using a newly defined getPercent function. These updates focus on improving the clarity of information regarding juror votes.

Changes

File Path	Change Summary
web/src/pages/Home/TopJurors/Header/Coherency.tsx	Updated content from "Votes" to "Coherency" and revised tooltip message for clarity.
web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx	Added `Tooltip` component to display coherence ratio; introduced `getPercent` function for calculation.

Possibly related PRs

#1671: The changes in this PR involve modifications to the Coherency component, which is directly related to the updates made in the Coherency.tsx file of the main PR, specifically regarding the display of voting statistics and tooltip messages.

Suggested labels

Type: Feature🗿, Package: Web, Type: Enhancement :sparkles:

Suggested reviewers

Harman-singh-waraich
alcercu

Poem

In the land of votes so bright,
Coherency takes the spotlight.
With tooltips clear, the message flows,
A rabbit's joy in knowledge grows! 🐇✨
Clarity reigns, as we hop along,
Celebrating changes, a cheerful song!

📜 Recent review details

**Configuration used: CodeRabbit UI** **Review profile: CHILL**

📥 Commits

Reviewing files that changed from the base of the PR and between 04e799d287acc78c1f948d9466de4aa2bf7b2ee1 and a709812582d6dd2cc3ab97c4fd365a7e8d11209f.

📒 Files selected for processing (1)

* `web/src/pages/Home/TopJurors/Header/Coherency.tsx` (2 hunks)

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

* web/src/pages/Home/TopJurors/Header/Coherency.tsx

🪧 Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , 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 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` or `@coderabbitai title` 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](https://docs.coderabbit.ai/guides/configure-coderabbit) 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](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

netlify[bot] commented 2 weeks ago

Deploy Preview for kleros-v2-testnet ready!

Name	Link
Latest commit	a709812582d6dd2cc3ab97c4fd365a7e8d11209f
Latest deploy log	https://app.netlify.com/sites/kleros-v2-testnet/deploys/672cbcffa148cf0008c59d77
Deploy Preview	https://deploy-preview-1739--kleros-v2-testnet.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 2 weeks ago

Deploy Preview for kleros-v2-neo ready!

Name	Link
Latest commit	a709812582d6dd2cc3ab97c4fd365a7e8d11209f
Latest deploy log	https://app.netlify.com/sites/kleros-v2-neo/deploys/672cbcff53928f0008b4f8d8
Deploy Preview	https://deploy-preview-1739--kleros-v2-neo.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 2 weeks ago

Deploy Preview for kleros-v2-university ready!

Name	Link
Latest commit	a709812582d6dd2cc3ab97c4fd365a7e8d11209f
Latest deploy log	https://app.netlify.com/sites/kleros-v2-university/deploys/672cbcff26dd0d0008ad653b
Deploy Preview	https://deploy-preview-1739--kleros-v2-university.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 2 weeks ago

Deploy Preview for kleros-v2-testnet-devtools ready!

Name	Link
Latest commit	a709812582d6dd2cc3ab97c4fd365a7e8d11209f
Latest deploy log	https://app.netlify.com/sites/kleros-v2-testnet-devtools/deploys/672cbcff4ff07b0008c318b1
Deploy Preview	https://deploy-preview-1739--kleros-v2-testnet-devtools.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.