Skip to content

refactor: hex --> rgb#2324

Merged
jo-elimu merged 4 commits intomainfrom
2159-store-image-colors-as-rgb-instead-of-hex
Jul 31, 2025
Merged

refactor: hex --> rgb#2324
jo-elimu merged 4 commits intomainfrom
2159-store-image-colors-as-rgb-instead-of-hex

Conversation

@jo-elimu
Copy link
Copy Markdown
Member

Issue Number

Purpose

Technical Details

Testing Instructions

Screenshots


Format Checks

Note

Files in PRs are automatically checked for format violations with mvn spotless:check.

If this PR contains files with format violations, run mvn spotless:apply to fix them.

@jo-elimu jo-elimu self-assigned this Jul 31, 2025
@jo-elimu jo-elimu requested a review from a team as a code owner July 31, 2025 10:27
@jo-elimu jo-elimu linked an issue Jul 31, 2025 that may be closed by this pull request
@jo-elimu jo-elimu requested review from AshishBagdane, alexander-kuruvilla and eymaal and removed request for a team July 31, 2025 10:27
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Jul 31, 2025

Warning

Rate limit exceeded

@jo-elimu has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 17 minutes and 26 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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.

📥 Commits

Reviewing files that changed from the base of the PR and between a0c9790 and ac0af03.

⛔ Files ignored due to path filters (1)
  • pom.xml is excluded by !**/*.xml
📒 Files selected for processing (2)
  • pom-dependency-tree.txt (1 hunks)
  • src/main/java/ai/elimu/rest/v2/JpaToGsonConverter.java (1 hunks)

Walkthrough

The changes standardize the storage format of image dominant colors from a CSS-style string ("rgb(R,G,B)") to a plain comma-separated RGB string ("R,G,B") throughout the codebase, database, and UI. The dominant color field is now enforced as non-null both in code and database schema, and UI styling logic is updated to utilize the new format.

Changes

Cohort / File(s) Change Summary
Dependency Version Update
pom-dependency-tree.txt
Updated main artifact version from 2.6.116-SNAPSHOT to 2.6.117-SNAPSHOT.
Image Entity Annotation & Docs
src/main/java/ai/elimu/entity/content/multimedia/Image.java
Added Javadoc and enforced @NotNull annotation on dominantColor field.
Image Dominant Color Storage Logic
src/main/java/ai/elimu/web/content/multimedia/image/ImageCreateController.java,
src/main/java/ai/elimu/web/content/storybook/StoryBookCreateFromEPubController.java,
src/main/java/ai/elimu/web/servlet/CustomDispatcherServlet.java
Changed dominant color storage from "rgb(R,G,B)" to "R,G,B" format in all relevant controllers.
Database Migration
src/main/resources/db/migration/2006117.sql
Migrated existing dominant color values to "R,G,B" format and enforced non-null constraint on the column.
UI Styling Update
src/main/webapp/WEB-INF/jsp/content/multimedia/image/edit.jsp
Updated JavaScript and CSS logic to use the new "R,G,B" format for dynamic styling, removed conditional checks, and enhanced effects.
CSV Export Enhancement
src/main/java/ai/elimu/web/content/multimedia/image/ImageCsvExportController.java
Added "dominant_color" column to CSV export output.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant WebController
    participant ImageEntity
    participant Database

    User->>WebController: Uploads/creates image
    WebController->>ImageEntity: Extracts dominant color as [R,G,B]
    ImageEntity->>Database: Stores dominantColor as "R,G,B"
    Database-->>ImageEntity: Returns stored dominantColor
    ImageEntity-->>WebController: dominantColor in "R,G,B" format
    WebController-->>User: Renders UI with updated styles using "R,G,B"
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~15 minutes

Assessment against linked issues

Objective Addressed Explanation
Store image colors as RGB instead of HEX (#2159)
Store the 3 integers for red, green and blue instead of the HEX value (#2159)
Remove CSS-like "rgb(...)" string wrapping for dominantColor (#2159)
Enforce dominantColor as non-null in code and database (#2159)

Assessment against linked issues: Out-of-scope changes

No out-of-scope changes detected.

✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch 2159-store-image-colors-as-rgb-instead-of-hex

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 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.
    • Explain this complex logic.
    • 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 explain this code block.
    • @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 explain its main purpose.
    • @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.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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 generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests 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.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
src/main/java/ai/elimu/entity/content/multimedia/Image.java (1)

48-49: Consider the format choice vs PR objectives.

The PR objectives mention storing colors "as separate RGB integer components" but the implementation uses a comma-separated string format. While the string approach works well for this use case, consider whether separate integer fields (e.g., redComponent, greenComponent, blueComponent) would better align with the stated goal of easier transparency manipulation in Android applications.

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 2cc87f2 and 61bafe8.

📒 Files selected for processing (7)
  • pom-dependency-tree.txt (1 hunks)
  • src/main/java/ai/elimu/entity/content/multimedia/Image.java (1 hunks)
  • src/main/java/ai/elimu/web/content/multimedia/image/ImageCreateController.java (1 hunks)
  • src/main/java/ai/elimu/web/content/storybook/StoryBookCreateFromEPubController.java (2 hunks)
  • src/main/java/ai/elimu/web/servlet/CustomDispatcherServlet.java (1 hunks)
  • src/main/resources/db/migration/2006117.sql (1 hunks)
  • src/main/webapp/WEB-INF/jsp/content/multimedia/image/edit.jsp (1 hunks)
🧰 Additional context used
🧠 Learnings (1)
pom-dependency-tree.txt (2)

Learnt from: jo-elimu
PR: elimu-ai/webapp#0
File: :0-0
Timestamp: 2025-05-03T08:01:30.217Z
Learning: The elimu-ai/webapp repository has a dependency on ai.elimu:model (version 2.0.97) that provides shared model classes and enums. The Language enum should be imported from ai.elimu.model.v2.enums.Language instead of creating local duplicates.

Learnt from: jo-elimu
PR: #2312
File: src/main/java/ai/elimu/entity/analytics/LetterSoundLearningEvent.java:19-31
Timestamp: 2025-07-27T03:40:02.040Z
Learning: In the elimu.ai webapp project, the database schema file at src/main/resources/META-INF/jpa-schema-export.sql is auto-generated from JPA entity annotations, so manual updates to this file are not needed when adding new entity fields.

🔇 Additional comments (10)
pom-dependency-tree.txt (1)

1-1: LGTM! Version bump reflects the coordinated dominant color format changes.

The version increment from 2.6.116-SNAPSHOT to 2.6.117-SNAPSHOT appropriately reflects the coordinated changes across the codebase to standardize the dominant color storage format.

src/main/resources/db/migration/2006117.sql (1)

3-3: LGTM! Correctly transforms dominant color format.

The SUBSTRING logic properly removes the "rgb(" prefix and ")" suffix, transforming values like "rgb(135,134,115)" to "135,134,115".

src/main/java/ai/elimu/web/content/storybook/StoryBookCreateFromEPubController.java (2)

193-193: LGTM! Correctly implements new dominant color format for cover images.

The change removes the "rgb()" wrapper and stores the dominant color as a simple comma-separated string, consistent with the overall refactoring effort.


296-296: LGTM! Correctly implements new dominant color format for chapter images.

The change removes the "rgb()" wrapper and stores the dominant color as a simple comma-separated string, maintaining consistency with the cover image handling and overall refactoring.

src/main/java/ai/elimu/web/servlet/CustomDispatcherServlet.java (1)

269-269: LGTM! Correctly implements new dominant color format in database population.

The change removes the "rgb()" wrapper and stores the dominant color as a simple comma-separated string, maintaining consistency with the refactoring changes across the codebase.

src/main/java/ai/elimu/web/content/multimedia/image/ImageCreateController.java (1)

128-128: LGTM! Correctly implements new dominant color format in image creation.

The change removes the "rgb()" wrapper and stores the dominant color as a simple comma-separated string, consistent with the refactoring changes across the application.

src/main/java/ai/elimu/entity/content/multimedia/Image.java (1)

45-49: Good addition of documentation and null constraint.

The @NotNull annotation and Javadoc documentation improve data integrity and code clarity. The RGB string format "R,G,B" is well-documented.

src/main/webapp/WEB-INF/jsp/content/multimedia/image/edit.jsp (3)

24-29: LGTM! CSS styling correctly uses the new RGB format.

The CSS styling updates properly utilize the new comma-separated RGB format:

  • rgb(${image.dominantColor}) for solid colors
  • rgba(${image.dominantColor}, opacity) for transparent effects

The opacity levels (0.08, 0.16, 0.64) create a nice visual hierarchy with subtle background, shadow, and border effects.


27-29: Enhanced visual styling with border effects.

The addition of box-shadow and variable border widths (2px standard, 4px for right/bottom) creates an attractive depth effect that enhances the visual presentation of the image.


23-29: Verify removal of conditional dominantColor check

Although you’ve added @NotNull to Image.dominantColor, there are still code paths and existing data that can leave that property unset:

  • In StoryBookCreateFromEPubController and ImageCreateController, a caught NullPointerException swallows failures from ImageColorHelper.getDominantColor(), leaving image.dominantColor null.
  • CustomDispatcherServlet will NPE if getDominantColor() returns null (no catch for NPE).
  • No SQL migrations were found enforcing a NOT NULL constraint on the dominant_color column, and existing records may contain null or empty values.
  • The JSP now unconditionally injects ${image.dominantColor} into CSS functions; invalid or missing values will break styling.

Please manually verify and/or address the following before removing the JSP guard:

  • Ensure every controller either guarantees a valid RGB string (e.g. fallback to a default) or reintroduces a null‐check in the JSP.
  • Confirm the database schema has a NOT NULL constraint on dominant_color and that existing records have been backfilled.
  • Optionally, add validation at persistence or service layer to prevent null or malformed values.

Comment on lines +3 to +4
UPDATE IMAGE SET dominantColor = SUBSTRING(dominantColor, 5, LENGTH(dominantColor) - 5);
ALTER TABLE `Image` MODIFY `dominantColor` VARCHAR(255) NOT NULL;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix table name casing inconsistency.

The UPDATE statement uses IMAGE while the ALTER statement uses `Image`. Ensure consistent casing across both statements to avoid potential issues.

Apply this diff to fix the casing:

-UPDATE IMAGE SET dominantColor = SUBSTRING(dominantColor, 5, LENGTH(dominantColor) - 5);
-ALTER TABLE `Image` MODIFY `dominantColor` VARCHAR(255) NOT NULL;
+UPDATE `Image` SET dominantColor = SUBSTRING(dominantColor, 5, LENGTH(dominantColor) - 5);
+ALTER TABLE `Image` MODIFY `dominantColor` VARCHAR(255) NOT NULL;
🤖 Prompt for AI Agents
In src/main/resources/db/migration/2006117.sql at lines 3 to 4, the table name
casing is inconsistent between the UPDATE and ALTER statements. Change the table
name in the UPDATE statement from IMAGE to `Image` to match the ALTER statement,
ensuring consistent casing across both statements.

@codecov
Copy link
Copy Markdown

codecov bot commented Jul 31, 2025

Codecov Report

❌ Patch coverage is 0% with 7 lines in your changes missing coverage. Please review.
✅ Project coverage is 17.09%. Comparing base (c49e22b) to head (ac0af03).
⚠️ Report is 9 commits behind head on main.

Files with missing lines Patch % Lines
...ent/multimedia/image/ImageCsvExportController.java 0.00% 2 Missing ⚠️
...t/storybook/StoryBookCreateFromEPubController.java 0.00% 2 Missing ⚠️
...main/java/ai/elimu/rest/v2/JpaToGsonConverter.java 0.00% 1 Missing ⚠️
...ontent/multimedia/image/ImageCreateController.java 0.00% 1 Missing ⚠️
.../ai/elimu/web/servlet/CustomDispatcherServlet.java 0.00% 1 Missing ⚠️
Additional details and impacted files
@@             Coverage Diff              @@
##               main    #2324      +/-   ##
============================================
- Coverage     17.10%   17.09%   -0.01%     
  Complexity      460      460              
============================================
  Files           260      260              
  Lines          7701     7703       +2     
  Branches        892      892              
============================================
  Hits           1317     1317              
- Misses         6308     6310       +2     
  Partials         76       76              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@jo-elimu jo-elimu merged commit 7a6336e into main Jul 31, 2025
13 checks passed
@jo-elimu jo-elimu deleted the 2159-store-image-colors-as-rgb-instead-of-hex branch July 31, 2025 10:41
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.

Store image colors as RGB instead of HEX

1 participant