feat: interactive charts on home page (BAL-3246) #2925
Conversation
|
|
Warning Rate limit exceeded@r4zendev has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 14 minutes and 4 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
WalkthroughThis pull request introduces version updates across multiple Ballerine packages, focusing on enhancing interactivity in homepage charts and updating dependencies. The changes span several applications and packages, including Changes
Sequence DiagramsequenceDiagram
participant User
participant PortfolioRiskStatistics
participant MerchantMonitoring
User->>PortfolioRiskStatistics: Clicks on Risk Level/Indicator
PortfolioRiskStatistics->>MerchantMonitoring: Navigate with Query Params
MerchantMonitoring-->>User: Display Filtered Merchants
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
r4zendev
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (11)
packages/react-pdf-toolkit/CHANGELOG.md (1)
3-8: Consider adding more descriptive changelog entries.The PR implements interactive charts on the home page and fixes spacing issues, but these changes are not reflected in the changelog. Consider adding these details to provide better context for the changes in this version.
Example:
## 1.2.58 ### Patch Changes +- Added interactive charts on home page +- Fixed spacing issues on Social & Ads page +- Updated empty state text on Website Credibility tab - Updated dependencies - @ballerine/[email protected]packages/ui/CHANGELOG.md (1)
3-7: Consider adding more details to the changelog entry.While the change description aligns with the PR objectives, it would be helpful to specify what interactivity improvements were made to the stats cards (e.g., click behavior, hover effects, etc.).
## 0.5.58 ### Patch Changes -Improve interactivity on Home page in the stats cards +Improve interactivity on Home page in the stats cards by enabling click navigation to corresponding monitoring reportspackages/ui/src/components/templates/report/components/AdsAndSocialMedia/AdsAndSocialMedia.tsx (3)
123-124: Check responsive behavior for container widths.You’ve used
grow-0 w-2/3 min-w-0. Ensure that on smaller screens, the layout remains visually appealing and no overflow occurs.
143-174: Eliminate repetition by abstracting field rendering.The code for mapping over the
fieldsis repeated in both columns. Consider extracting a small helper component or function to render each field’s label and value, ultimately improving maintainability and reducing duplication.-/* repeated code in both columns */ +// Potential approach: create a small functional component or map-based renderer
182-182: Use centralized color tokens or theme variables instead of hardcoding.
!text-[#14203D]is an inline hex color. For maintainability and consistency across the app, consider referencing a shared color token or theme variable (e.g. class names or tailwind config).apps/backoffice-v2/src/common/hooks/useZodSearchParams/interfaces.ts (1)
6-6: Consider documenting thereplaceproperty's usage.
Addingreplace?: boolean;looks good. However, it would be beneficial to include a brief inline comment or JSDoc to clarify the intended effect and usage scenarios of this flag—especially for new contributors or maintainers who might not be aware of how it impacts history manipulation.apps/backoffice-v2/src/common/hooks/useSerializedSearchParams/useSerializedSearchParams.tsx (1)
9-13: Validate behavior whenreplaceis set totrue.
Destructuring options to default the newreplaceflag asfalseis great. However, you might consider verifying that discussion or usage around “back button” behavior is documented so that future maintainers understand the intended user flow whenreplaceis toggled.apps/backoffice-v2/src/pages/Statistics/components/PortfolioRiskStatistics/hooks/usePortfolioRiskStatisticsLogic/usePortfolioRiskStatisticsLogic.tsx (2)
24-31: Efficiently handle large datasets.
This snippet uses a sorting approach that might be expensive ifviolationCountscan be large. Consider memoizing or batching the sorting outside of tight loops, or using a more optimized data structure if performance becomes an issue.
32-43: Handle potential division by zero gracefully.
Currently, theMath.max(...filteredRiskIndicators.map(item => item.count), 0)call prevents errors if the array is empty, but you might also consider early-returning an empty array forwidthsto avoid further calculations whenfilteredRiskIndicatorsis empty. This could simplify reasoning and reduce the chance of unintended side effects.apps/backoffice-v2/src/pages/Statistics/components/PortfolioRiskStatistics/PortfolioRiskStatistics.tsx (2)
89-93: Consider extracting navigation logic for improved maintainability.Here, inline arrow functions in the
onClickevents are succinct but can become repetitive if extended. You could extract a helper function (e.g.,handleRiskCellClick(riskLevel)) or define the memoized callback outside thereturnto reduce duplication and clarify intent.- onClick={() => navigate(`/${locale}/merchant-monitoring?riskLevels[0]=${riskLevel}`)} + const handleRiskCellClick = (riskLevel: string) => { + navigate(`/${locale}/merchant-monitoring?riskLevels[0]=${riskLevel}`); + }; ... <Cell ... onClick={() => handleRiskCellClick(riskLevel)} />
177-185: Enhance reuse by factoring out repeated code blocks.You're using a similar pattern: a clickable block that navigates to the merchant-monitoring page with different query parameters. Consider reusability by factoring out a small component or helper. Additionally, ensure that the
localevalue is consistently sanitized if coming from user inputs or external sources.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (15)
apps/backoffice-v2/CHANGELOG.md(1 hunks)apps/backoffice-v2/package.json(2 hunks)apps/backoffice-v2/src/common/hooks/useSerializedSearchParams/useSerializedSearchParams.tsx(2 hunks)apps/backoffice-v2/src/common/hooks/useZodSearchParams/interfaces.ts(1 hunks)apps/backoffice-v2/src/pages/MerchantMonitoring/hooks/useMerchantMonitoringLogic/useMerchantMonitoringLogic.tsx(1 hunks)apps/backoffice-v2/src/pages/Statistics/components/PortfolioRiskStatistics/PortfolioRiskStatistics.tsx(4 hunks)apps/backoffice-v2/src/pages/Statistics/components/PortfolioRiskStatistics/hooks/usePortfolioRiskStatisticsLogic/usePortfolioRiskStatisticsLogic.tsx(1 hunks)apps/kyb-app/CHANGELOG.md(1 hunks)apps/kyb-app/package.json(2 hunks)packages/react-pdf-toolkit/CHANGELOG.md(1 hunks)packages/react-pdf-toolkit/package.json(2 hunks)packages/ui/CHANGELOG.md(1 hunks)packages/ui/package.json(1 hunks)packages/ui/src/components/templates/report/components/AdsAndSocialMedia/AdsAndSocialMedia.tsx(3 hunks)packages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx(2 hunks)
✅ Files skipped from review due to trivial changes (4)
- apps/kyb-app/CHANGELOG.md
- packages/ui/package.json
- apps/kyb-app/package.json
- apps/backoffice-v2/package.json
🔇 Additional comments (12)
packages/react-pdf-toolkit/CHANGELOG.md (1)
3-8: LGTM: Changelog format and structure.
The changelog entry follows the conventional format with proper version numbering and dependency updates.
apps/backoffice-v2/CHANGELOG.md (1)
3-10: LGTM! Changelog entries are consistent.
The changelog entry correctly documents both the feature change and its dependency updates. The version numbers are properly incremented across packages.
packages/react-pdf-toolkit/package.json (2)
30-30: Dependency update is consistent.
The @ballerine/ui update to 0.5.58 is part of coordinated version updates across multiple packages.
Let's verify the compatibility of this update:
✅ Verification successful
Dependency version is consistently used across packages
The version 0.5.58 of @ballerine/ui is consistently used in both packages/react-pdf-toolkit/package.json and apps/kyb-app/package.json. While we couldn't find the changelog to check for breaking changes, the coordinated update across multiple packages suggests this was an intentional synchronization of versions.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for breaking changes in @ballerine/ui
fd -g "CHANGELOG.md" --full-path "*ballerine/ui*" -x grep -A 5 "0.5.58" {} \;
# Verify this version is used consistently across workspace
rg '"@ballerine/ui": "0.5.58"'
Length of output: 341
4-4: Version bump looks appropriate.
The increment from 1.2.57 to 1.2.58 follows semantic versioning and aligns with the scope of changes described in the PR.
Let's verify the changelog entry for this version:
✅ Verification successful
Version bump is appropriate and changelog entry is present
The changelog entry confirms:
- Version 1.2.58 is properly documented
- Changes are correctly categorized as patch updates
- Dependencies are accurately listed with their corresponding versions
- @ballerine/[email protected]
- @ballerine/[email protected]
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if there's a corresponding changelog entry
fd -g "CHANGELOG.md" -x grep -A 5 "1.2.58" {} \;
Length of output: 198
packages/ui/src/components/templates/report/components/AdsAndSocialMedia/AdsAndSocialMedia.tsx (1)
81-83: Consider preserving or clearing query parameters.
When creating a "clean link," you're only concatenating hostname and pathname. If preserving query parameters or fragments is necessary, you might include them in the return value. Otherwise, if you prefer discarding them, you're all set.
packages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx (3)
155-186: Good job on the fallback UI for missing data.
Your changes for the “Estimated Monthly Visitors” section handle the scenario in which no data is present (trafficAnalysis.montlyVisitsIndicators.length > 0). Displaying “No Monthly Visitors Data Available” ensures a clear and user-friendly approach.
197-249: Great approach for empty traffic source data.
The condition trafficSources.length > 0 ? ... : ... is a well-thought-out solution to display an informative message when the list is empty. This improves clarity for users who might otherwise be confused by an empty chart.
258-299: Excellent use of descriptive empty state messages for engagement data.
By showing “No Engagement Data Available”, you ensure users receive a clear indication when there’s insufficient data. This enhances user experience and consistency across all data sections.
apps/backoffice-v2/src/common/hooks/useSerializedSearchParams/useSerializedSearchParams.tsx (1)
24-24: Ensure consistent merging vs. overwriting of search parameters.
Here, navigate merges the new search parameters. Because we're also passing replace to navigate, please confirm that whichever approach is used in the rest of the application is consistent—particularly if some features rely on stacking search states in the browser history.
Run the following script to confirm that the new replace logic is used consistently throughout the codebase:
✅ Verification successful
Based on the search results, I can see that the codebase consistently uses the replace option in navigation-related operations, particularly when dealing with search parameters. Here are the key observations:
- In
useZodSearchParams.tsx, it's used withreplace: trueas a default option:
const [searchParams, setSearchParams] = useSerializedSearchParams(options);- In
useMerchantMonitoringLogic.tsx:
] = useZodSearchParams(MerchantMonitoringSearchSchema, { replace: true });- In authentication flows (
useSignInMutation.tsx,useSignOutMutation.tsx):
void navigate(callbackUrl, {
replace: true,
state: {
from: state?.from,
},
});- In entity selection (
useSelectEntity.tsx):
void navigate(`/${locale}/case-management/entities/${entityId}${search}`, {
replace: true,
state: {
from: state?.from,
},
});The replace option is consistently used throughout the codebase when updating search parameters
The review comment's concern about consistency in merging vs. overwriting search parameters is addressed, as the codebase shows a clear pattern of using replace: true when dealing with search parameters. This ensures that the navigation behavior is consistent across the application, particularly in features that rely on search state management.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Searching for usage of navigate with replace or setSearchParams references outside this file
rg "navigate\(|setSearchParams" -A 3
Length of output: 29736
apps/backoffice-v2/src/pages/MerchantMonitoring/hooks/useMerchantMonitoringLogic/useMerchantMonitoringLogic.tsx (1)
31-31: Check alignment with existing conventions.
Adding { replace: true } for useZodSearchParams is perfectly valid. Ensure that this approach aligns with how other hooks or pages handle search parameter changes (some might rely on older states to be kept in the history). If so, confirm the intended user experience (e.g. does the back button revert to prior search states?).
apps/backoffice-v2/src/pages/Statistics/components/PortfolioRiskStatistics/PortfolioRiskStatistics.tsx (2)
21-22: Well-structured imports and usage.
Importing useNavigate from react-router-dom and useLocale from your custom hook is a clean approach. This sets the stage for localized routing and user navigation.
42-44: Separation of concerns is clear.
Defining locale and navigate here maintains clarity of where these come from, removing guesswork or hidden dependencies later in the component.
...ages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx
Show resolved
Hide resolved
|
Not sure if I can re-run the CI steps manually by myself, they are stuck again. I don't seem to have access or something. |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (6)
sdks/workflow-browser-sdk/CHANGELOG.md (1)
3-10: Enhance the changelog message with more details.The version entry follows the correct format, but the "bump" message could be more descriptive about what changed.
Consider adding more context about why the version was bumped and what changes were made. For example:
## 0.6.83 ### Patch Changes -bump +Updated dependencies to latest versions to maintain compatibility - Updated dependencies - @ballerine/[email protected] - @ballerine/[email protected]packages/rules-engine/CHANGELOG.md (1)
1-8: Consider improving changelog maintenance practices.The changelog history shows a pattern of minimal entries that don't effectively communicate changes to users. Consider adopting a more descriptive changelog format that includes:
- Types of changes (features, fixes, breaking changes)
- Impact on consumers
- Migration steps if needed
Example format:
## [0.5.29] - 2025-01-XX ### Added - New feature: Description of new functionality ### Changed - Description of changes in existing functionality ### Fixed - Description of any bug fixes ### Breaking - Description of breaking changes and migration stepsexamples/report-generation-example/CHANGELOG.md (1)
7-7: Enhance changelog description for better clarity.The description "bump" is not informative enough. Consider adding meaningful descriptions that explain what changed and why, helping other developers understand the purpose of each release.
Example format:
- bump + Updated @ballerine/react-pdf-toolkit dependency to incorporate latest UI improvements and bug fixesservices/websocket-service/CHANGELOG.md (1)
3-7: Enhance changelog entry with meaningful descriptionThe changelog entry "bump" doesn't provide any context about what changed in version 0.1.29. Consider adding specific details about:
- What was changed
- Why it was changed
- Any breaking changes or migration steps if applicable
Example format:
## 0.1.29 ### Patch Changes -bump +- Updated dependencies to support interactive charts feature +- Fixed potential race condition in WebSocket connection handlingpackages/blocks/package.json (1)
5-5: Consider adding peer dependencies for chart componentsIf this package will contain reusable chart components for the interactive charts feature, consider adding relevant peer dependencies such as
rechartsor similar charting libraries to ensure consistent versioning across the ecosystem.Example additions to package.json:
"peerDependencies": { + "recharts": "^2.7.2", + "react": "^18.2.0", + "react-dom": "^18.2.0" }Also applies to: 45-46, 94-94
packages/blocks/CHANGELOG.md (1)
3-10: Consider adding more descriptive changelog entriesWhile the version updates are consistent, the changelog entry "bump" is not descriptive of the actual changes. Consider adding more detailed information about what changed in this version, especially since this PR introduces interactive charts on the home page.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (40)
apps/backoffice-v2/CHANGELOG.md(1 hunks)apps/backoffice-v2/package.json(3 hunks)apps/kyb-app/CHANGELOG.md(1 hunks)apps/kyb-app/package.json(3 hunks)apps/workflows-dashboard/CHANGELOG.md(1 hunks)apps/workflows-dashboard/package.json(3 hunks)examples/headless-example/CHANGELOG.md(1 hunks)examples/headless-example/package.json(2 hunks)examples/report-generation-example/CHANGELOG.md(1 hunks)examples/report-generation-example/package.json(2 hunks)packages/blocks/CHANGELOG.md(1 hunks)packages/blocks/package.json(3 hunks)packages/common/CHANGELOG.md(1 hunks)packages/common/package.json(2 hunks)packages/config/CHANGELOG.md(1 hunks)packages/config/package.json(1 hunks)packages/eslint-config-react/CHANGELOG.md(1 hunks)packages/eslint-config-react/package.json(2 hunks)packages/eslint-config/CHANGELOG.md(1 hunks)packages/eslint-config/package.json(1 hunks)packages/react-pdf-toolkit/CHANGELOG.md(1 hunks)packages/react-pdf-toolkit/package.json(2 hunks)packages/rules-engine/CHANGELOG.md(1 hunks)packages/rules-engine/package.json(2 hunks)packages/ui/CHANGELOG.md(1 hunks)packages/ui/package.json(3 hunks)packages/workflow-core/CHANGELOG.md(1 hunks)packages/workflow-core/package.json(3 hunks)sdks/web-ui-sdk/CHANGELOG.md(1 hunks)sdks/web-ui-sdk/package.json(2 hunks)sdks/workflow-browser-sdk/CHANGELOG.md(1 hunks)sdks/workflow-browser-sdk/package.json(2 hunks)sdks/workflow-node-sdk/CHANGELOG.md(1 hunks)sdks/workflow-node-sdk/package.json(2 hunks)services/websocket-service/CHANGELOG.md(1 hunks)services/websocket-service/package.json(1 hunks)services/workflows-service/CHANGELOG.md(1 hunks)services/workflows-service/package.json(3 hunks)services/workflows-service/prisma/data-migrations(1 hunks)websites/docs/package.json(1 hunks)
✅ Files skipped from review due to trivial changes (18)
- packages/config/package.json
- services/websocket-service/package.json
- packages/config/CHANGELOG.md
- packages/eslint-config-react/CHANGELOG.md
- packages/eslint-config/CHANGELOG.md
- examples/report-generation-example/package.json
- services/workflows-service/prisma/data-migrations
- packages/eslint-config/package.json
- packages/common/CHANGELOG.md
- packages/workflow-core/CHANGELOG.md
- sdks/web-ui-sdk/CHANGELOG.md
- apps/workflows-dashboard/CHANGELOG.md
- services/workflows-service/CHANGELOG.md
- sdks/workflow-node-sdk/CHANGELOG.md
- packages/rules-engine/package.json
- packages/eslint-config-react/package.json
- examples/headless-example/package.json
- packages/workflow-core/package.json
🚧 Files skipped from review as they are similar to previous changes (7)
- packages/ui/CHANGELOG.md
- packages/react-pdf-toolkit/CHANGELOG.md
- packages/react-pdf-toolkit/package.json
- apps/kyb-app/package.json
- packages/ui/package.json
- apps/backoffice-v2/package.json
- apps/backoffice-v2/CHANGELOG.md
🔇 Additional comments (14)
examples/report-generation-example/CHANGELOG.md (1)
8-9: Verify the impact of the react-pdf-toolkit update.
The dependency update from 1.2.51 to 1.2.59 spans multiple versions. Please ensure that there are no breaking changes in between these versions that could affect the report generation functionality.
✅ Verification successful
Let me gather more information about the changes between these versions.
Based on the analysis of the changelog entries and package usage, I can now provide a final response:
The react-pdf-toolkit update appears to be safe to proceed with
Looking through the changelog entries between versions 1.2.51 and 1.2.59, all changes are marked as "Patch Changes" with simple version bumps. There are:
- No breaking changes mentioned
- No major version changes (still within 1.2.x)
- Only patch-level updates indicating backward-compatible bug fixes
The extensive usage of react-pdf-toolkit across the codebase, particularly in report generation components, has remained stable through these updates.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for breaking changes in react-pdf-toolkit between versions
# Look for BREAKING CHANGE or BREAKING CHANGES markers in commit messages
echo "Searching for breaking changes in commit messages..."
fd -t f "CHANGELOG.md" -x rg -i "break(ing)?\s+changes?" {} || true
# Look for major version bumps in package.json
echo "Checking for major version changes in package.json..."
fd "package.json" -x rg "@ballerine/react-pdf-toolkit.*[0-9]+\.[0-9]+\.[0-9]+" {} || true
Length of output: 485
Script:
#!/bin/bash
# Let's check the changelog entries for react-pdf-toolkit specifically
echo "Searching for react-pdf-toolkit changelog entries..."
fd -t f "CHANGELOG.md" -x rg -B 2 -A 5 "@ballerine/react-pdf-toolkit" {} || true
# Let's also check if there are any major refactoring or significant changes in the report generation code
echo "Checking for report generation related changes..."
rg -l "react-pdf-toolkit" || true
Length of output: 15135
sdks/workflow-node-sdk/package.json (3)
39-39: LGTM! Development dependencies updated.
The development tooling dependencies @ballerine/config and @ballerine/eslint-config have been updated to their latest versions.
Also applies to: 41-41
4-4: LGTM! Package version aligns with core dependency.
The version bump of the package (0.6.83) correctly matches its core dependency @ballerine/workflow-core version, maintaining consistency across the workflow packages.
Let's verify version alignment across related workflow packages:
Also applies to: 31-31
✅ Verification successful
Version alignment verified across workflow packages
The version bump to 0.6.83 is consistent across the core workflow packages:
packages/workflow-core: v0.6.83sdks/workflow-browser-sdk: v0.6.83 (with [email protected])sdks/workflow-node-sdk: v0.6.83 (with [email protected])
Note: While some apps and services have different versions (e.g., [email protected], [email protected]), this is expected as they are consumers rather than core workflow packages. The important alignment is between the SDK packages and their core dependency.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check version consistency across workflow-related packages
# Expected: All workflow packages should have matching versions
echo "Checking workflow package versions..."
for pkg in $(fd -t f "package.json" -E "node_modules"); do
if grep -q "\"@ballerine/workflow" "$pkg"; then
echo "=== $pkg ==="
cat "$pkg" | jq -r '.version, .dependencies["@ballerine/workflow-core"] // empty'
fi
done
Length of output: 4927
4-4: Verify the necessity of SDK version bump.
This version bump appears in a Node.js SDK package, while the PR primarily focuses on UI changes (interactive charts). Could you clarify if this version update is necessary for the UI changes or if it's part of a separate versioning effort?
Let's check for any workflow-related changes in the UI components:
✅ Verification successful
Version bump is part of a coordinated dependency update
The version bump in the workflow-node-sdk is part of a larger coordinated version update across multiple packages in the monorepo. The git diff shows that:
- The workflow-node-sdk version is bumped from 0.6.82 to 0.6.83
- Its dependency on @ballerine/workflow-core is also updated to match (0.6.83)
- Other internal dependencies (@ballerine/config, @ballerine/eslint-config) are also being updated
- Multiple other packages and apps in the repository are receiving version updates (as seen in the modified CHANGELOG.md and package.json files)
This appears to be a routine version alignment across the monorepo packages rather than a change specifically related to the UI modifications.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Look for workflow SDK usage in the UI changes
# Expected: Find connections between UI changes and workflow SDK
echo "Checking for workflow SDK usage in UI components..."
rg -l "@ballerine/workflow" | grep -i "chart\|home"
Length of output: 164
Script:
#!/bin/bash
# Let's try a broader search to understand the changes in this PR
# First, let's check what files are modified in this PR
git diff --name-only HEAD~1
# Then, let's specifically look for any references to the workflow SDK
rg -l "ballerine/workflow"
# Finally, let's check the package.json changes
git diff HEAD~1 sdks/workflow-node-sdk/package.json
Length of output: 5218
websites/docs/package.json (1)
20-20: Verify version consistency across the monorepo
The version updates for @ballerine/* packages appear to be part of a coordinated version bump:
@ballerine/common:^0.9.64@ballerine/config:^1.1.29@ballerine/eslint-config:^1.1.29
Let's verify version consistency across the monorepo:
Also applies to: 26-27
✅ Verification successful
Version consistency check reveals minor inconsistencies in dependency declarations
The version check across the monorepo shows that while the versions are aligned, there are inconsistencies in how they're declared:
@ballerine/commonappears with both fixed0.9.64and caret^0.9.64versions@ballerine/uiappears with both fixed0.5.59and caret^0.5.59versions- Other packages like
workflow-browser-sdk,workflow-node-sdk, andworkflow-coreconsistently use fixed versions
Let's verify if this is intentional by checking the package locations:
Version declarations follow a consistent pattern based on package location
After analyzing the package locations, the version declaration patterns are actually consistent and intentional:
-
SDK packages and core services use fixed versions:
sdks/*:0.9.64(no caret)services/workflows-service:0.9.64(no caret)packages/workflow-core:0.9.64(no caret)
-
Application packages and UI components use caret versions for flexibility:
websites/docs:^0.9.64packages/ui:^0.9.64packages/blocks:^0.9.64apps/workflows-dashboard:^0.9.64
This pattern makes sense as core packages need strict version control while application-level packages can be more flexible with minor version updates.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for version consistency of @ballerine/* packages across the monorepo
# Find all package.json files and check @ballerine/* dependency versions
fd package.json | xargs cat | jq -r '
select(.dependencies != null) |
.dependencies |
with_entries(select(.key | startswith("@ballerine/"))) |
to_entries[] |
"\(.key): \(.value)"
'
Length of output: 1053
Script:
#!/bin/bash
# Check package.json locations and their @ballerine/* dependencies
fd package.json | while read -r file; do
echo "=== $file ==="
cat "$file" | jq -r '
select(.dependencies != null) |
.dependencies |
with_entries(select(.key | startswith("@ballerine/"))) |
to_entries[] |
"\(.key): \(.value)"
'
done
Length of output: 8867
sdks/workflow-browser-sdk/package.json (2)
4-4: Package and dependency versions updated
The package version has been bumped to 0.6.83 along with its core dependencies:
@ballerine/common:0.9.64@ballerine/workflow-core:0.6.83
Good practice using exact versions for core dependencies.
Also applies to: 36-37
44-44: Dev dependencies aligned with monorepo
Dev dependencies updated to maintain consistency:
@ballerine/config:^1.1.29@ballerine/eslint-config:^1.1.29
Also applies to: 46-46
packages/common/package.json (2)
41-42: Dev dependencies aligned with monorepo standards
Dev dependencies updated to maintain consistency:
@ballerine/config:^1.1.29@ballerine/eslint-config:^1.1.29
5-5: Verify changes in @ballerine/common v0.9.64
This version bump in the common package triggers updates across multiple dependent packages.
Let's check the changes that led to this version bump:
✅ Verification successful
Version bump is a patch update with minimal impact
The version bump from 0.9.63 to 0.9.64 is a patch update with only dev dependency updates (@ballerine/config and @ballerine/eslint-config) and no functional changes. While @ballerine/common is used by multiple packages across the repository (backoffice, workflows, SDKs, etc.), this particular update only affects development tooling and doesn't introduce any breaking changes or new features that would impact dependent packages.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check changes in @ballerine/common package
# Get commit history for packages/common
git log --oneline -- packages/common/
# List changed files in packages/common
git diff HEAD~1 --name-only -- packages/common/
Length of output: 107
Script:
#!/bin/bash
# Let's check the changelog and package.json changes
git diff HEAD~1 -- packages/common/CHANGELOG.md packages/common/package.json
# Also, let's find which packages depend on @ballerine/common
fd package.json --exec grep -l "@ballerine/common" {} \;
Length of output: 1700
apps/workflows-dashboard/package.json (1)
4-4: Verify dependency versions for interactive charts feature
While the @ballerine/* dependencies have been updated, please ensure that the current version of recharts (^2.7.2) supports all the interactive features being implemented in this PR.
Run this script to check for any recent recharts releases with relevant features or bug fixes:
Also applies to: 18-19, 66-67
✅ Verification successful
Let me verify the usage of recharts in the codebase to ensure we have the necessary context about the interactive features being implemented.
Let me try another search pattern to find recharts usage, this time including JavaScript files and using a different search approach.
Let me check the specific chart components being used to understand if they require any features from newer versions.
Current recharts version is compatible with implemented features
The current version of recharts (^2.7.2) fully supports all the chart features being used in the codebase:
- Basic Bar chart with
ResponsiveContainer,XAxis,YAxis, andBarcomponents - Simple Pie chart with
PieChart,Pie, andLabelcomponents - No advanced interactive features that would require newer versions are being used
While there is a newer version available (2.15.0), the changes are primarily focused on React 19 support and specific bug fixes that don't affect the current implementation. The existing version is stable and sufficient for the current usage.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check latest recharts version and recent changes
# Get latest version and changelog
curl -s https://registry.npmjs.org/recharts | jq -r '.["dist-tags"].latest'
curl -s https://api.github.com/repos/recharts/recharts/releases/latest | jq -r '.body'
Length of output: 852
Script:
#!/bin/bash
# Search for recharts imports and usage
rg -l "from 'recharts'" --type ts --type tsx
# Get the package.json content to check current recharts version
cat apps/workflows-dashboard/package.json | jq '.dependencies.recharts'
Length of output: 161
Script:
#!/bin/bash
# Search for recharts imports and usage with broader patterns
rg -l "recharts" --type js --type ts
# Look for specific chart components in the codebase
rg "import.*\{.*\}.*from.*recharts" --type js --type ts -A 2
Length of output: 3756
Script:
#!/bin/bash
# Check the implementation of WeeklyBarChart and PieChart in workflows-dashboard
cat apps/workflows-dashboard/src/components/molecules/WeeklyBarChart/WeeklyBarChart.tsx
cat apps/workflows-dashboard/src/components/atoms/PieChart/PieChart.tsx
Length of output: 2883
sdks/web-ui-sdk/package.json (1)
24-24: LGTM: Version updates are consistent
The version bump and dependency update follow semantic versioning and maintain consistency across the project.
Also applies to: 99-99
services/workflows-service/package.json (1)
4-4: LGTM: Version updates are consistent
All version bumps and dependency updates follow semantic versioning and maintain consistency across the project.
Also applies to: 52-54, 115-116
examples/headless-example/CHANGELOG.md (1)
3-12: LGTM! Version and dependency updates are consistent.
The changes follow semantic versioning with appropriate patch version increment. The dependency updates are consistent with other packages in the ecosystem:
- @ballerine/common: 0.9.63 → 0.9.64
- @ballerine/workflow-browser-sdk: 0.6.82 → 0.6.83
apps/kyb-app/CHANGELOG.md (1)
3-12: LGTM! Version and dependency updates are consistent.
The changes follow semantic versioning with appropriate patch version increment. The dependency updates are consistent with other packages in the ecosystem:
- @ballerine/ui: 0.5.58 → 0.5.59
- @ballerine/blocks: → 0.2.31
- @ballerine/common: → 0.9.64
- @ballerine/workflow-browser-sdk: → 0.6.83
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
packages/ui/src/components/templates/report/components/AdsAndSocialMedia/AdsAndSocialMedia.tsx (3)
143-174: Consider extracting the field rendering logic into a separate component.While the current implementation works well and provides good visual organization, the nested mapping logic could be simplified to improve maintainability.
Consider extracting the field rendering logic into a reusable component:
+const SocialMediaField = ({ + field, + icon, + label, + value +}: { + field: string; + icon: ReactNode; + label: string; + value: any +}) => ( + <div className="flex items-center gap-4"> + <div className="flex items-center gap-4 whitespace-nowrap"> + {icon} + <span className="font-semibold">{label}</span> + </div> + <TextWithNAFallback + className={ctw( + 'overflow-hidden text-ellipsis max-w-full', + !value && 'text-gray-400', + label !== 'Biography' && 'whitespace-nowrap', + )} + > + {value} + </TextWithNAFallback> + </div> +); <div className="flex gap-6 mt-8"> - <div className="flex flex-col gap-4"> - {Object.entries(socialMediaMapper[provider].fields).map( - ([, { icon, label }]) => ( - <div key={label} className="flex items-center gap-4 whitespace-nowrap"> - {icon} - <span className="font-semibold">{label}</span> - </div> - ), - )} - </div> - - <div className="flex flex-col gap-4 min-w-0"> - {Object.entries(socialMediaMapper[provider].fields).map( - ([field, { label }]) => { - const value = rest[field as keyof typeof rest]; - return ( - <TextWithNAFallback - key={label} - className={ctw( - 'overflow-hidden text-ellipsis max-w-full', - !value && 'text-gray-400', - label !== 'Biography' && 'whitespace-nowrap', - )} - > - {value} - </TextWithNAFallback> - ); - }, - )} - </div> + {Object.entries(socialMediaMapper[provider].fields).map( + ([field, { icon, label }]) => ( + <SocialMediaField + key={label} + field={field} + icon={icon} + label={label} + value={rest[field as keyof typeof rest]} + /> + ), + )} </div>
182-182: Consider using design tokens for colors and avoiding !important.The current styling approach has a few concerns:
- Hardcoded color value
#14203Dshould be moved to a design token- Multiple
!importantoverrides suggest potential styling conflicts that should be resolved through proper CSS specificityConsider updating the styles:
-'h-[unset] cursor-pointer !p-0 !text-[#14203D] underline decoration-[1.5px] w-1/3' +'h-[unset] cursor-pointer p-0 text-primary-900 underline decoration-[1.5px] w-1/3'Also, review the component's style hierarchy to eliminate the need for
!importantoverrides.
Line range hint
91-92: Track TODOs for future improvements.The TODO comments indicate potential improvements:
- Decoupling the component for reuse with social media and ads data
- Extracting the empty state logic
Would you like me to create GitHub issues to track these improvements?
apps/backoffice-v2/src/pages/Statistics/components/PortfolioRiskStatistics/PortfolioRiskStatistics.tsx (2)
89-93: Consider extracting click handler for better maintainability.The interactive functionality works well and provides good UX with the cursor indicator. However, consider these improvements:
- Extract the click handler to a named function for better maintainability
- Consider using URL builder utilities for more robust path construction
Example refactor:
+ const handleRiskLevelClick = (riskLevel: string) => { + const path = `/${locale}/merchant-monitoring`; + const params = new URLSearchParams({ 'riskLevels[0]': riskLevel }); + navigate(`${path}?${params}`); + }; <Cell key={riskLevel} className={ctw( riskLevelToFillColor[riskLevel as keyof typeof riskLevelToFillColor], 'cursor-pointer outline-none', )} - onClick={() => - navigate(`/${locale}/merchant-monitoring?riskLevels[0]=${riskLevel}`) - } + onClick={() => handleRiskLevelClick(riskLevel)} />
177-185: Enhance maintainability of table cell interaction code.The interactive table cells are well implemented with good UX transitions. Consider these improvements:
- Extract the click handler to a named function
- Move inline styles to Tailwind classes for consistency
- Use URL builder utilities for path construction
Example refactor:
+ const handleFindingClick = (name: string) => { + const path = `/${locale}/merchant-monitoring`; + const params = new URLSearchParams({ 'findings[0]': name }); + navigate(`${path}?${params}`); + }; <div - className={`h-full cursor-pointer rounded bg-blue-200 p-1 transition-all`} + className={ctw( + 'h-full cursor-pointer rounded bg-blue-200 p-1 transition-all', + 'w-[var(--cell-width)]' + )} - onClick={() => - navigate(`/${locale}/merchant-monitoring?findings[0]=${name}`) - } + onClick={() => handleFindingClick(name)} - style={{ width: `${widths[index]}%` }} + style={{ '--cell-width': `${widths[index]}%` } as React.CSSProperties} >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (15)
apps/backoffice-v2/CHANGELOG.md(1 hunks)apps/backoffice-v2/package.json(2 hunks)apps/backoffice-v2/src/common/hooks/useSerializedSearchParams/useSerializedSearchParams.tsx(2 hunks)apps/backoffice-v2/src/common/hooks/useZodSearchParams/interfaces.ts(1 hunks)apps/backoffice-v2/src/pages/MerchantMonitoring/hooks/useMerchantMonitoringLogic/useMerchantMonitoringLogic.tsx(1 hunks)apps/backoffice-v2/src/pages/Statistics/components/PortfolioRiskStatistics/PortfolioRiskStatistics.tsx(4 hunks)apps/backoffice-v2/src/pages/Statistics/components/PortfolioRiskStatistics/hooks/usePortfolioRiskStatisticsLogic/usePortfolioRiskStatisticsLogic.tsx(1 hunks)apps/kyb-app/CHANGELOG.md(1 hunks)apps/kyb-app/package.json(2 hunks)packages/react-pdf-toolkit/CHANGELOG.md(1 hunks)packages/react-pdf-toolkit/package.json(2 hunks)packages/ui/CHANGELOG.md(1 hunks)packages/ui/package.json(1 hunks)packages/ui/src/components/templates/report/components/AdsAndSocialMedia/AdsAndSocialMedia.tsx(3 hunks)packages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (13)
- apps/backoffice-v2/src/common/hooks/useZodSearchParams/interfaces.ts
- apps/kyb-app/CHANGELOG.md
- apps/kyb-app/package.json
- packages/react-pdf-toolkit/CHANGELOG.md
- packages/ui/CHANGELOG.md
- packages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx
- apps/backoffice-v2/src/common/hooks/useSerializedSearchParams/useSerializedSearchParams.tsx
- apps/backoffice-v2/src/pages/Statistics/components/PortfolioRiskStatistics/hooks/usePortfolioRiskStatisticsLogic/usePortfolioRiskStatisticsLogic.tsx
- apps/backoffice-v2/src/pages/MerchantMonitoring/hooks/useMerchantMonitoringLogic/useMerchantMonitoringLogic.tsx
- packages/react-pdf-toolkit/package.json
- apps/backoffice-v2/package.json
- packages/ui/package.json
- apps/backoffice-v2/CHANGELOG.md
🔇 Additional comments (4)
packages/ui/src/components/templates/report/components/AdsAndSocialMedia/AdsAndSocialMedia.tsx (2)
81-83: LGTM! Improved URL cleaning implementation.
The refactored code is more concise and uses const declarations appropriately while maintaining the same functionality.
123-124: LGTM! Improved layout structure.
The new flex container with proper width distribution (2/3 and 1/3) and min-width constraints ensures better content organization and prevents overflow issues.
apps/backoffice-v2/src/pages/Statistics/components/PortfolioRiskStatistics/PortfolioRiskStatistics.tsx (2)
21-22: LGTM: Hook imports and initialization follow React best practices.
The addition of navigation and locale hooks is well-structured and follows React conventions.
Also applies to: 42-43
Line range hint 1-200: Verify the navigation paths match the monitoring reports structure.
The implementation successfully adds interactivity to charts and tables, meeting the PR objectives. To ensure a smooth user experience:
- Verify that the merchant monitoring page correctly handles these URL parameters
- Ensure the filtering logic on the monitoring page aligns with these navigation patterns
✅ Verification successful
Navigation paths and URL parameters are properly handled
Based on the search results, the implementation correctly handles the URL parameters and filtering logic:
-
The merchant monitoring page (
apps/backoffice-v2/src/pages/MerchantMonitoring/MerchantMonitoring.page.tsx) properly handles bothriskLevelsandfindingsURL parameters through:- MultiSelect components for filtering
- URL parameter handling via
useMerchantMonitoringLogichook - Filter state management and clear functionality
-
The navigation paths from statistics are correctly implemented:
- Risk level clicks navigate to
/${locale}/merchant-monitoring?riskLevels[0]=${riskLevel} - Finding clicks navigate to
/${locale}/merchant-monitoring?findings[0]=${name}
- Risk level clicks navigate to
-
The filtering logic aligns with these navigation patterns through:
- Proper URL parameter parsing in
useMerchantMonitoringLogic - Filter state management in the merchant monitoring page
- Consistent parameter structure between navigation and filtering
- Proper URL parameter parsing in
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the merchant monitoring page handles these URL parameters correctly
# Check for route definitions and parameter handling
rg -A 5 "merchant-monitoring" --type tsx
# Check for filter implementations
rg -A 5 "riskLevels|findings" --type tsx
Length of output: 139
Script:
#!/bin/bash
# Let's try without file type restriction since tsx is not recognized
# Check for route definitions and parameter handling
rg -A 5 "merchant-monitoring"
# Check for URL parameter handling and filtering logic
rg -A 5 "(riskLevels|findings)(\[|\s|=)"
Length of output: 50719
...ffice-v2/src/pages/Statistics/components/PortfolioRiskStatistics/PortfolioRiskStatistics.tsx
Outdated
Show resolved
Hide resolved
Changes
Improve interactivity on the Home page by allowing the user to click the parts of charts/tables to be forwarded to the appropriate list of monitoring reports.
Fix spacing on Social & Ads page
Summary by CodeRabbit
New Features
Bug Fixes
Dependencies
@ballerine/uito version 0.5.59@ballerine/react-pdf-toolkitto version 1.2.59