feat(analytics): add DecisionsScoreDistribution by siiick · Pull Request #1207 · checkmarble/marble-frontend

siiick · 2025-11-12T10:36:36Z

✨ Improvements

Adjusted and centralized decision colors.
Added tooltip icons (descriptions still to be defined — see locale files, @Pascal-Delange ).
Refactored the filters bar by separating Clear and Apply actions to improve feature discoverability.
Added a link to Metabase analytics at the top of the page.
eintroduced the secondary date-range filter.

🧹 UX & Behavior

Cleared custom filter values when switching scenarios.
~~Introduced a minimum 3px height for decisions in the Decisions graph to ensure visibility when outcomes are extremely small (e.g., < 1px).~~

⚠️ Notes

The 3px minimum-height feature is complex to implement, and it’s still unclear whether the benefit justifies the effort.
Logic is available in commit 67b0276.
The custom bar component is currently commented out. cc @ChibiBlasphem

Note

Adds Decisions Score Distribution, centralized outcome colors, contextual tooltips, restored comparison date range, and refactors queries/filters UI with multiple UX improvements.

Analytics UI:
- Centralize decision colors via constants/analytics.ts and use in Decisions, OutcomeFilter, RuleVsDecisionOutcomes.
- New AnalyticsTooltip component; add tooltip icons/descriptions to charts and table headers.
- Decisions chart: improved tooltip with per-outcome values and total, adjustable bar padding by period length, optional symlog scale scaffolding, grouping/stacking tweaks, CSV export, and hover-driven highlighting of OutcomeFilter.
- Add DecisionsScoreDistribution panel to layout; resize main/side columns.
- Restore secondary compareRange filter in FiltersBar; keep instant updates for scenarioId/date ranges.
- FiltersBar UX: separate Apply/Reapply and Clear dynamic actions inline per priority row.
- Date range popover: localized quick-range presets with labeled summary.
- Add legacy analytics link to header.
Data/Queries:
- Consolidate analytics queries into queries/analytics/get-data.ts; add endpoints for decisions-score-distribution and wire server route handler.
- Minor logic tweak to only include trigger when scenario unchanged; remove stray logging.
Tables:
- RulesHit and ScreeningHits: header tooltips; percentage formatting adjustments.
- Table header markup refinement for header content container.
Styles/i18n:
- New Tailwind utility animate-ping-once for highlight effect.
- Add/expand i18n strings (en/fr/ar) for tooltips, presets, and labels.

^{Written by Cursor Bugbot for commit 8e49872. This will update automatically on new commits. Configure here.}

ChibiBlasphem

I didn't highlight them but can you also move out all the functions from Decisions which do not use local variables from it?

ChibiBlasphem · 2025-11-20T12:37:55Z

+  Outcome,
+  RangeId,
 } from '@app-builder/models/analytics';
+import { OUTCOME_COLORS } from '@app-builder/routes/_builder+/_analytics+/analytics.$scenarioId';


This constant should IMO be part of the constants folder, taking it from the route file while being in a component will surely have a bad effect later.

ChibiBlasphem · 2025-11-20T12:42:57Z

+          <TooltipV2.Provider>
+            <TooltipV2.Tooltip>
+              <TooltipV2.TooltipTrigger asChild>
+                <Icon icon="tip" className="size-5 text-grey-60 hover:text-purple-65 cursor-pointer" />
+              </TooltipV2.TooltipTrigger>
+              <TooltipV2.TooltipContent>
+                <span className="font-normal">{t('analytics:rule_vs_decision_outcomes.tooltip')}</span>
+              </TooltipV2.TooltipContent>
+            </TooltipV2.Tooltip>
+          </TooltipV2.Provider>
+        </span>


This tooltip is repeated a lot of time while the only thing that changes is the content. Can it be extracted in a GraphTooltip component with only the content as a prop so it can be more maintainable?

ChibiBlasphem · 2025-11-20T12:43:14Z

+            <TooltipV2.Provider>
+              <TooltipV2.Tooltip>
+                <TooltipV2.TooltipTrigger asChild>
+                  <Icon icon="tip" className="size-4 text-grey-60 hover:text-purple-65 cursor-pointer ml-v2-sm" />
+                </TooltipV2.TooltipTrigger>
+                <TooltipV2.TooltipContent>
+                  <span className="font-normal">{t('analytics:screening_hits.columns.execs.tooltip')}</span>
+                </TooltipV2.TooltipContent>
+              </TooltipV2.Tooltip>
+            </TooltipV2.Provider>


Tooltip here

ChibiBlasphem · 2025-11-20T12:43:27Z

+            <TooltipV2.Provider>
+              <TooltipV2.Tooltip>
+                <TooltipV2.TooltipTrigger asChild>
+                  <Icon icon="tip" className="size-4 text-grey-60 hover:text-purple-65 cursor-pointer ml-v2-sm" />
+                </TooltipV2.TooltipTrigger>
+                <TooltipV2.TooltipContent>
+                  <span className="font-normal">{t('analytics:screening_hits.columns.hits.tooltip')}</span>
+                </TooltipV2.TooltipContent>
+              </TooltipV2.Tooltip>
+            </TooltipV2.Provider>


Tooltip here

ChibiBlasphem · 2025-11-20T12:43:33Z

+            <TooltipV2.Provider>
+              <TooltipV2.Tooltip>
+                <TooltipV2.TooltipTrigger asChild>
+                  <Icon icon="tip" className="size-4 text-grey-60 hover:text-purple-65 cursor-pointer ml-v2-sm" />
+                </TooltipV2.TooltipTrigger>
+                <TooltipV2.TooltipContent>
+                  <span className="font-normal">{t('analytics:screening_hits.columns.hit_ratio.tooltip')}</span>
+                </TooltipV2.TooltipContent>
+              </TooltipV2.Tooltip>
+            </TooltipV2.Provider>


Tooltip here

ChibiBlasphem · 2025-11-20T12:43:45Z

+            <TooltipV2.Provider>
+              <TooltipV2.Tooltip>
+                <TooltipV2.TooltipTrigger asChild>
+                  <Icon icon="tip" className="size-4 text-grey-60 hover:text-purple-65 cursor-pointer ml-v2-sm" />
+                </TooltipV2.TooltipTrigger>
+                <TooltipV2.TooltipContent>
+                  <span className="font-normal">
+                    {t('analytics:screening_hits.columns.avg_hits_per_screening.tooltip')}
+                  </span>
+                </TooltipV2.TooltipContent>
+              </TooltipV2.Tooltip>
+            </TooltipV2.Provider>


Tooltip here

ChibiBlasphem · 2025-11-20T12:46:34Z

+export const OUTCOME_COLORS: Record<Outcome, string> = {
+  approve: '#46BB7F',
+  review: '#FDBD35',
+  blockAndReview: '#FF8533',
+  decline: '#DB5F4A',
+};


As previously said, it would be better to either move this to the constants folder or create a constant file located with the Analytics components and import it here. It's generally a bad idea to have file A importing from file B and file B importing from file A.

ChibiBlasphem · 2025-11-20T12:47:42Z

+      // wait for a random time between 1 and 5 seconds
+      // const randomTime = Math.floor(Math.random() * 5000) + 1000;
+      // console.log('--------> randomTime', randomTime);
+      // await new Promise((resolve) => setTimeout(resolve, randomTime));


Is it still needed?

…isions

…t title

…ructure

…en scenario IDs match

…filters

…ters based on priority index

…cisions

…components

…component across multiple analytics components

…scale options

…n filters

…ant function and directly using formatNumber

ChibiBlasphem · 2025-11-21T14:29:42Z

+            <AnalyticsTooltip content={t('analytics:rule_hits.columns.hit_count.tooltip')}>
+              <Icon icon="tip" className="size-4 text-grey-60 hover:text-purple-65 cursor-pointer ml-v2-sm" />
+            </AnalyticsTooltip>


All the tooltips on the page use <Icon icon="tip" className="size-4 text-grey-60 hover:text-purple-65 cursor-pointer ml-v2-sm" /> can it not be directly set inside the component?
There's only one place where the class is size-5 instead of size-4, make the className of the icon customizable instead. Right now there's still too much code duplication in my opinion

done thanks :)

…to streamline tooltip rendering and remove redundant Icon components

cursor

This PR is being reviewed by Cursor Bugbot

Details

Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

cursor · 2025-11-24T07:29:25Z

+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+    >


Bug: Missing onMouseLeave handler causes stuck hover state

The isHovered state is set to true on onMouseEnter but never reset to false on onMouseLeave. This causes the hover state to persist indefinitely after the user moves their mouse over the component once, preventing the highlight animation from working correctly on subsequent hovers and potentially affecting UI behavior that depends on the hover state.

Additional Locations (1)

packages/app-builder/src/components/Analytics/RuleVsDecisionOutcomes.tsx#L84-L90

This is intentional. We want the ping effect only once, the first time the user hover the component.

ChibiBlasphem

lgtm

…r improved state management

cursor · 2025-11-24T08:26:05Z

+        <TooltipV2.TooltipTrigger asChild>
+          <Icon
+            icon="tip"
+            className={cn('text-grey-60 text-purple-65 hover:text-grey-50 cursor-pointer ml-v2-sm', className)}


Bug: Conflicting Tailwind CSS text color classes

The className contains two conflicting text color classes text-grey-60 and text-purple-65. In Tailwind CSS, when multiple classes of the same property type are present, only the last one applies, so text-purple-65 overrides text-grey-60, making the first class ineffective.

siiick force-pushed the feat/in-app-analytics-rule-vs-decision-outcome branch from a86c90b to e1a2835 Compare November 19, 2025 16:13

siiick marked this pull request as ready for review November 20, 2025 10:52

siiick force-pushed the feat/in-app-analytics-rule-vs-decision-outcome branch from 050132c to 69ffa33 Compare November 20, 2025 10:52

siiick requested review from ChibiBlasphem and Pascal-Delange and removed request for ChibiBlasphem November 20, 2025 10:56

ChibiBlasphem requested changes Nov 20, 2025

View reviewed changes

siiick requested a review from ChibiBlasphem November 21, 2025 11:12

siiick added 19 commits November 21, 2025 12:12

feat(analytics): add DecisionsScoreDistribution

302529a

refactor(analytics): change outcome colors

11021b2

feat: highlight outcome filters on first Decisions hover

9dfb480

refactor(analytics): improve Decsions tooltip display

b47d5a0

refactor(analytics): Add a minimum display height for outcomes in Dec…

f0cae8c

…isions

feat(analytics): add tooltips to analytics table headers and componen…

9536234

…t title

cleanup

5ec4f49

fix(Table): change header element from paragraph to div for better st…

caab222

…ructure

fix(analytics): update trigger condition to ensure it only applies wh…

7e5e10e

…en scenario IDs match

feat(analytics): add legacy analytics link to analytics layout

33b085c

feat(analytics): enable comparison date range selection in analytics …

eb392f2

…filters

feat(FiltersBar): add buttons for reapplying and clearing dynamic fil…

23fd073

…ters based on priority index

cleanup

4b6cd84

feat(Decisions): implement scale type toggle

f43f1b8

refactor(Decisions): remove minimum display height for outcomes in De…

b5dec51

…cisions

feat(analytics): centralize outcome colors and update imports across …

2210178

…components

feat(analytics): replace TooltipV2 with centralized AnalyticsTooltip …

a3a3cac

…component across multiple analytics components

feat(Decisions): add scale type labels and conditional rendering for …

680ff3a

…scale options

refactor(Decisions): extract utility functions from the component

13a68f7

siiick force-pushed the feat/in-app-analytics-rule-vs-decision-outcome branch from 4c3ea17 to 13a68f7 Compare November 21, 2025 11:12

feat(FiltersBar): add preset date range options for quick selection i…

646ac8c

…n filters

refactor(RulesHit): simplify percentage formatting by removing redund…

675ed06

…ant function and directly using formatNumber

siiick force-pushed the feat/in-app-analytics-rule-vs-decision-outcome branch from 4d52763 to 675ed06 Compare November 21, 2025 12:39

ChibiBlasphem requested changes Nov 21, 2025

View reviewed changes

refactor(Analytics): update AnalyticsTooltip usage across components …

33f0ae1

…to streamline tooltip rendering and remove redundant Icon components

siiick requested a review from ChibiBlasphem November 24, 2025 07:27

cursor Bot reviewed Nov 24, 2025

View reviewed changes

ChibiBlasphem approved these changes Nov 24, 2025

View reviewed changes

refactor(OutcomeFilter): enhance highlight handling with useEffect fo…

8e49872

…r improved state management

cursor Bot reviewed Nov 24, 2025

View reviewed changes

siiick merged commit e64a7b0 into main Nov 24, 2025
6 checks passed

siiick deleted the feat/in-app-analytics-rule-vs-decision-outcome branch November 24, 2025 08:26

Uh oh!

Conversation

siiick commented Nov 12, 2025 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✨ Improvements

🧹 UX & Behavior

⚠️ Notes

Uh oh!

ChibiBlasphem left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

This PR is being reviewed by Cursor Bugbot

Uh oh!

Uh oh!

cursor Bot Nov 24, 2025

Choose a reason for hiding this comment

Bug: Missing onMouseLeave handler causes stuck hover state

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ChibiBlasphem left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Nov 24, 2025

Choose a reason for hiding this comment

Bug: Conflicting Tailwind CSS text color classes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

siiick commented Nov 12, 2025 •

edited by cursor Bot

Loading