Skip to content

Conversation

@hassaansaleem28
Copy link

@hassaansaleem28 hassaansaleem28 commented Dec 27, 2025

User description

SUMMARY

  • Restore sequential (continuous) coloring for Treemap when a numeric metric with varying values is present, while preserving categorical coloring for categorical/constant metrics.

  • Remove boxed label appearance and eliminate the 1px gap by default.

  • Ensure de-emphasized (filtered-out) nodes are muted via opacity rather than overriding their color so gradients remain visible.

  • Add unit tests to prevent regressions.

BEFORE/AFTER SCREENSHOTS

-- BEFORE :
image

-- AFTER :
image

Screenshot 2025-12-27 204635

TESTING INSTRUCTIONS / FILES MODIFIED

What I Changed

  • Behavior: Treemap now:

    • Automatically uses a sequential palette via the sequential scheme registry when metric values vary (min !== max).
    • Falls back to categorical palette behavior otherwise.
    • Uses opacity for de-emphasis instead of forcing a text color.
  • UI: Labels no longer display a visible border/background by default, and that 1px gap.

  • Typing: Replaced @ts-ignore with a typed assignment for visualMap.

  • Tests: Added Jest tests validating visualMap existence for numeric-varying metric and absence for constant metrics.

Fixes


CodeAnt-AI Description

Restore continuous coloring for numeric treemaps and remove boxed labels

What Changed

  • Treemap now shows a continuous/sequential color gradient when the metric column has varying numeric values; static/categorical metrics keep categorical colors.
  • The visible label box and the thin 1px gap around labels are removed by default so labels render without a border or background.
  • Filtered/de-emphasized nodes are muted using opacity so their color gradients remain visible instead of being overridden.
  • Adds unit tests that verify sequential coloring is applied only for varying numeric metrics.

Impact

✅ Clearer sequential color gradients for numeric treemaps
✅ No boxed labels or thin gaps around treemap labels
✅ Filtered nodes retain underlying color gradients (better visual fidelity)

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

@codeant-ai-for-open-source
Copy link
Contributor

CodeAnt AI is reviewing your PR.


Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

@bito-code-review
Copy link
Contributor

bito-code-review bot commented Dec 27, 2025

Code Review Agent Run #d0ad56

Actionable Suggestions - 0
Additional Suggestions - 2
  • superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts - 1
    • Type safety violation · Line 325-325
      The code uses `as any` for accessing `linearColorScheme` from `formData` and assigning `visualMap` to `echartOptions`, violating the project's rule against using `any` types for proper TypeScript safety. This affects type checking and maintainability. Consider updating the types to include `linearColorScheme` in `EchartsTreemapFormData` and ensuring the ECharts option type supports `visualMap` without casting.
  • superset-frontend/plugins/plugin-chart-echarts/test/Treemap/transformProps.test.ts - 1
    • TypeScript Standards Violation · Line 78-106
      The added test cases use `as any` and `@ts-ignore` which violate the project's TypeScript standards requiring proper typing without `any` or ignore directives. Since `EChartsCoreOption` doesn't include `visualMap` in its type definition, casting `echartOptions` to `any` for access is acceptable here, but remove the unnecessary `as any` on `formData` and replace `@ts-ignore` with the cast to maintain consistency with the implementation code.
Review Details
  • Files reviewed - 3 · Commit Range: 5c34a05..47a16af
    • superset-frontend/plugins/plugin-chart-echarts/src/Treemap/constants.ts
    • superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts
    • superset-frontend/plugins/plugin-chart-echarts/test/Treemap/transformProps.test.ts
  • Files skipped - 0
  • Tools
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful
    • Eslint (Linter) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

  • /review - Manually triggers a full AI review.

  • /pause - Pauses automatic reviews on this pull request.

  • /resume - Resumes automatic reviews.

  • /resolve - Marks all Bito-posted review comments as resolved.

  • /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at [email protected].

Documentation & Help

AI Code Review powered by Bito Logo

@codeant-ai-for-open-source codeant-ai-for-open-source bot added the size:M This PR changes 30-99 lines, ignoring generated files label Dec 27, 2025
@codeant-ai-for-open-source
Copy link
Contributor

Nitpicks 🔍

🔒 No security issues identified
⚡ Recommended areas for review

  • Numeric parsing edge case
    The metric value parsing uses Number(v) for non-number inputs; this converts empty strings to 0 which can incorrectly inflate metricMin/Max and cause useSequential to be true/false incorrectly. Ensure null/empty strings and non-numeric values are excluded rather than coerced to 0.

  • Label de-emphasis
    De-emphasis applies an opacity to the node's itemStyle but the label is left unchanged (labelProps has no opacity). Labels may remain fully opaque and visually prominent even when the node rectangle is muted. Verify labels inherit or are explicitly muted so de-emphasis visually reduces both fill and text.

  • Accessibility / contrast
    Removing the label box/background can reduce text contrast on varied node colors. Ensure contrast/accessibility is preserved (e.g., test on dark/light node colors) or ensure consumers apply appropriate text shadows/contrast-aware styles.

  • visualMap configuration
    visualMap is assigned dynamically but lacks an explicit 'type' (continuous) and may rely on defaults. Also the fallback colors are built from categorical colorFn('min'/'max') which could mismatch true sequential palettes. Verify visualMap.type and color selection logic to ensure correct continuous mapping and consistent color intent.

  • Visual regression risk
    Changing the default BORDER_WIDTH and GAP_WIDTH from 2 to 0 will remove the thin gap and label box, but may cause label overlap or reduced readability on certain datasets/backgrounds. Validate across multiple datasets, sizes, DPI/zoom levels and with long labels to ensure no overlap or truncation/regression is introduced.

const metricValues = (data || [])
.map(row => {
const v = row[metricLabel as string];
return typeof v === 'number' ? v : Number(v);
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggestion: Null/undefined metric values are converted to 0 by using Number(null) which yields 0, so missing values are treated as valid numeric zeros and will skew min/max and enable sequential coloring incorrectly; exclude null/undefined before converting to Number so only real numeric-like values are considered. [logic error]

Severity Level: Minor ⚠️

Suggested change
return typeof v === 'number' ? v : Number(v);
// treat null/undefined as missing values (NaN), so they are filtered out
if (v === null || v === undefined) {
return NaN;
}
Why it matters? ⭐

This is a valid logic bug in the PR: Number(null) === 0, so null/undefined metric cells get treated as numeric zeros and will skew min/max and enableSequential detection.
The improved code correctly treats null/undefined as missing (NaN) which the subsequent Number.isFinite filter removes. This fixes the statistics used to decide sequential coloring.

Prompt for AI Agent 🤖
This is a comment left during a code review.

**Path:** superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts
**Line:** 172:172
**Comment:**
	*Logic Error: Null/undefined metric values are converted to 0 by using Number(null) which yields 0, so missing values are treated as valid numeric zeros and will skew min/max and enable sequential coloring incorrectly; exclude null/undefined before converting to Number so only real numeric-like values are considered.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.

Comment on lines +175 to +176
const minMetricValue = metricValues.length ? Math.min(...metricValues) : 0;
const maxMetricValue = metricValues.length ? Math.max(...metricValues) : 0;
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggestion: Using Math.min(...metricValues) / Math.max(...metricValues) with the spread operator can blow the call stack or consume excessive memory for large datasets; compute min/max with an iterative reduce to avoid spreading a large array into a function call. [performance]

Severity Level: Minor ⚠️

Suggested change
const minMetricValue = metricValues.length ? Math.min(...metricValues) : 0;
const maxMetricValue = metricValues.length ? Math.max(...metricValues) : 0;
const minMetricValue =
metricValues.length > 0
? metricValues.reduce((acc, val) => (val < acc ? val : acc), metricValues[0])
: 0;
const maxMetricValue =
metricValues.length > 0
? metricValues.reduce((acc, val) => (val > acc ? val : acc), metricValues[0])
: 0;
Why it matters? ⭐

Using reduce to compute min/max avoids creating huge argument lists for Math.min/Math.max, which can blow the call stack for very large datasets. The suggested reduce-based calculation is safer and more memory-friendly.

Prompt for AI Agent 🤖
This is a comment left during a code review.

**Path:** superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts
**Line:** 175:176
**Comment:**
	*Performance: Using Math.min(...metricValues) / Math.max(...metricValues) with the spread operator can blow the call stack or consume excessive memory for large datasets; compute min/max with an iterative reduce to avoid spreading a large array into a function call.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.

@codeant-ai-for-open-source
Copy link
Contributor

CodeAnt AI finished reviewing your PR.

hassaansaleem28 and others added 2 commits December 27, 2025 22:13
…ansformProps.test.ts

Co-authored-by: codeant-ai-for-open-source[bot] <244253245+codeant-ai-for-open-source[bot]@users.noreply.github.com>
…nsformProps.ts

Co-authored-by: codeant-ai-for-open-source[bot] <244253245+codeant-ai-for-open-source[bot]@users.noreply.github.com>
@bito-code-review
Copy link
Contributor

bito-code-review bot commented Dec 27, 2025

Code Review Agent Run #1e540b

Actionable Suggestions - 0
Review Details
  • Files reviewed - 3 · Commit Range: 47a16af..91696e4
    • superset-frontend/plugins/plugin-chart-echarts/src/Treemap/constants.ts
    • superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts
    • superset-frontend/plugins/plugin-chart-echarts/test/Treemap/transformProps.test.ts
  • Files skipped - 0
  • Tools
    • Eslint (Linter) - ✔︎ Successful
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

  • /review - Manually triggers a full AI review.

  • /pause - Pauses automatic reviews on this pull request.

  • /resume - Resumes automatic reviews.

  • /resolve - Marks all Bito-posted review comments as resolved.

  • /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at [email protected].

Documentation & Help

AI Code Review powered by Bito Logo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

plugins size/M size:M This PR changes 30-99 lines, ignoring generated files

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Treemap chart color issue

1 participant