feat(in-app-analytics)/filters-rework by siiick · Pull Request #1166 · checkmarble/marble-frontend

siiick · 2025-10-20T10:19:07Z

This PR refactors and enhances the filter logic used in the in-app analytics module to make it more robust, flexible, and user friendly. Key changes include UI improvements, logic simplification, and bug fixes.

🛠️ What’s Changed
• Refactor core filter logic to simplify and clarify flow, improving maintainability and reducing complexity.
• Add “Apply” button to explicitly trigger filter execution rather than applying changes immediately on interaction.
• Introduce “loading” + “touched” states to better communicate form interactivity and pending updates.
• Make compareRange optional, allowing filters to operate when comparison ranges are not defined.
• Move filter buttons to the second line for cleaner layout and better visual grouping.
• Support filter “unavailability” (i.e., marking filters as unavailable/inactive) to improve the UX when certain filters don’t apply.
• Fix scenario filter naming, correcting inconsistencies in how scenario filters are labeled.
• Fix select display issue, resolving UI glitches in how dropdown selections were rendered.
• Fix edit modal behavior, improving stability and addressing edge cases when editing existing filters.
• Prevent render warnings, eliminating React warnings triggered during certain render paths.

✅ Benefits & Impact
• Better UX clarity — users now see an explicit “Apply” action, and UI states (loading, touched) show better feedback.
• More robust filtering — optional comparison ranges and unavailable states allow filters to adapt to more data conditions.
• Cleaner, maintainable code — the refactor cleans up branching and makes the filter logic easier to follow and extend.
• Fewer UI glitches — thanks to fixes around select/label rendering and modal handling.

Note

Revamps in-app analytics filtering with an Apply-based FiltersBar, dynamic/static date ranges, backend field filters, and updated API/UX across app and UI kit.

Analytics UI/UX (app + UI kit):
- FiltersBar redesign: controlled API with draft state, explicit "Apply" + "Clear" actions, instantUpdate for select filters, loading skeletons, and unavailable filter indicators/tooltip.
- Filter value model: switches to {op, value} for text/number; supports boolean/select and date-range popover (dynamic/static via Temporal).
- Analytics page (routes/_analytics/analytics.$scenarioId.tsx): parses q (base64 JSON) via analyticsFiltersQuery; volatile updates without navigation; builds trigger payloads from filter values; fetches available filters for selected ranges.
- Charts (Decisions.tsx): sanitize data, stabilize ResponsiveBar via key, minor tick/format tweaks.
Models & Queries:
- Date ranges: introduce dateRangeFilterSchema, getIsoBoundsFromDateRanges, dynamic/static transforms.
- Triggers → Fields: replace trigger schema with name/op/value and map to backend FieldFilterDto.
- Available filters: request now takes ranges (computed to start/end); adapter updated.
- Client queries: useGetAnalytics/useGetAvailableFilters consume q, send new payloads, and expect { success, data } envelopes with error handling.
Server & Repository:
- Move resource routes to createServerFn with auth/redirect middleware; validate via zod; return { success, data }.
- Repository computes merged date limits across base/compare ranges; simplifies fetch/merge/fill logic.
API/OpenAPI:
- Replace TriggerFilterDto with FieldFilterDto; AnalyticsQueryDto now carries fields.
- Regenerate marble-api types accordingly.
Localization & deps:
- Add new i18n strings for filters (Apply/Clear, descriptions, unavailable tooltip) in en/fr/ar.
- Add dependencies: remeda, temporal-polyfill, ts-pattern to app and UI kit.
Misc fixes:
- Data model exported-fields routes: safe array handling and correct error toast type.
- Remove obsolete useDateRangeSearchParams hook.

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

ChibiBlasphem

Overall there's a lot of comments/logs left in the code. Some parts are complex to understand due to naming and/or not being extracted in their own function.

ChibiBlasphem · 2025-10-27T09:11:58Z

    getDecisionOutcomesPerDay: async (
      args: AnalyticsQuery,
    ): Promise<DecisionOutcomesPerPeriod | null> => {
      const parsed = transformAnalyticsQuery.parse(args);
      if (!parsed.length) throw new Error('No date range provided');

      try {
        const [raw, rawCompare] = await Promise.all([
          client.getDecisionOutcomesPerDay(parsed[0]!),
          ...(parsed[1] ? [client.getDecisionOutcomesPerDay(parsed[1])] : []),
        ]);

        const merged = mergeDateRanges([raw, ...(rawCompare ? [rawCompare] : [])]);

-        const start = args.compareDateRange
-          ? [args.dateRange.start, args.compareDateRange.start].sort(compareAsc)[0]!
-          : args.dateRange.start;
-        const end = args.compareDateRange
-          ? [args.dateRange.end, args.compareDateRange.end].sort(compareDesc)[0]!
-          : args.dateRange.end;
+        const start =
+          parsed.length === 2
+            ? [parsed[0]!.start, parsed[1]!.start].sort(compareAsc)[0]!
+            : parsed[0]!.start;
+        const end =
+          parsed.length === 2
+            ? [parsed[0]!.end, parsed[1]!.end].sort(compareDesc)[0]!
+            : parsed[0]!.end;

        const startDate: LimitDate = {
          date: start,
-          rangeId: start === args.dateRange.start ? 'base' : 'compare',
+          rangeId: start === parsed[0]!.start ? 'base' : 'compare',
        };
        const endDate: LimitDate = {
          date: end,
-          rangeId: end === args.dateRange.end ? 'base' : 'compare',
+          rangeId: end === parsed[0]!.end ? 'base' : 'compare',
        };

        if (!merged.length) {
          merged.push({
            ...startDate,
            approve: 0,
            block_and_review: 0,
            decline: 0,
            review: 0,
          });
          merged.push({
            ...endDate,
            approve: 0,
            block_and_review: 0,
            decline: 0,
            review: 0,
          });
        }
        const rangeSize = differenceInDays(end, start);

        return adaptDecisionOutcomesPerDay(
          rangeSize === merged.length ? merged : fillMissingDays(merged, startDate, endDate),
        );
      } catch (error) {
-        console.error(error);
+        console.error('error in getDecisionOutcomesPerDay', error);
        return null;
      }


That's quite complex to understand what's happening with the naming. Do you think you can rename those vars and maybe create an util function (IMO input refining is not the main point of the repository function)? And why is there a need to try/catch all that code?

You are right. I moved the date ranges computation appart.
The try/catch block was useless

ChibiBlasphem · 2025-10-27T09:13:53Z

+  try {
+    const urlParams = urlParamsSchema.parse(params);
+    const queryParams = queryParamsSchema.parse(await request.json());
+    const query = await analytics.getAvailableFilters({
+      scenarioId: urlParams.scenarioId,
+      ranges: queryParams.ranges,
+    });
+    return Response.json(query);
+  } catch (error) {
+    console.error('error in available_filters', error);
+    return Response.json({ error: 'Invalid request' }, { status: 400 });
+  }


No success true or false?

fixed. Thanks

ChibiBlasphem · 2025-10-27T09:19:15Z

+    return Response.json({
+      decisionOutcomesPerDay,
+      ruleHitTable,
+    });
+  } catch (error) {
+    console.error('error in analytics query', error);
+    return Response.json({ error: 'Internal server error' }, { status: 500 });
+  }


Same here, no success field ?

fixed. Thanks

ChibiBlasphem · 2025-10-27T09:22:40Z

+  const toTextArray = (selected: unknown): string[] => {
+    const arr = selected as any[];
+    if (!Array.isArray(arr)) return [];
+    return arr.flatMap((item) => {
+      if (typeof item === 'string') return item;
+      const val = (item as any)?.value;
+      return Array.isArray(val) ? val : val != null ? [val] : [];
+    });
+  };


Seems like this function could be created outside the component

This was to keep the Text filter resilient to different formats.
Let's discuss this later

I understand but the function is not using any component variable, hence it should be outside. I kinda want to know what you me to "keep it resilient to different formats" .

ChibiBlasphem · 2025-10-27T09:25:25Z

-    const isActive = (name: string) => active.includes(name);
-    return { emitSet, emitRemove, emitToggleActive, getValue, isActive };
-  }, [value, active, onChange]);
+  console.log(value);


ChibiBlasphem · 2025-10-27T09:25:42Z

-      ...(additionalFilters.length > 0 ? [['additional', additionalFilters] as const] : []),
-    ]);
-  }, [mainFilters, additionalFilters]);
+  console.log(allDescriptors);


…comparison filter types

…andle empty arrays

…errors

…it statements

…ng a map for display values

…for better readability

…ith clear and apply buttons

…onents for improved UI consistency

ChibiBlasphem

I think those are the last ones, sorry for having miss those.

ChibiBlasphem · 2025-10-31T13:00:36Z

+  const [localText, setLocalText] = useState<string[]>(
+    filter.selectedValue?.map((item) => item.value) ?? [],
+  );


Do you really need a state for that? localText seems to be a computed value from filter.selectedValue.

Suggested change

const [localText, setLocalText] = useState<string[]>(

filter.selectedValue?.map((item) => item.value) ?? [],

);

const localText = filter.selectedValue?.map((item) => item.value) ?? [];

ChibiBlasphem · 2025-10-31T13:01:05Z

  useEffect(() => {
-    if (isOpen) setLocalText(toTextArray(filter.selectedValue));
+    if (isOpen) setLocalText(filter.selectedValue?.map((item) => item.value) ?? []);
  }, [isOpen, filter.selectedValue]);


You don't need the effect with my suggestion above

…mponent logic

…tate management and validation

…nents for consistency

…ed layout and accessibility

ChibiBlasphem

Overall it's good but I still have a big issue with naming (sv instead of selectedValue or op instead of operator). Think about new developers or developers who didn't code the feature as it can be a headache trying to understand the global flow of the feature while also trying to understand the meaning of some variables

ChibiBlasphem · 2025-11-03T09:02:07Z

+        const exportedFields =
+          await context.authInfo.dataModelRepository.updateDataModelTableExportedFields(tableId, {
+            triggerObjectFields: current.triggerObjectFields,
+            ingestedDataFields: [...(current.ingestedDataFields ?? undefined), field],


🆙 this. I think it's better to do ...(current.ingestedDataFields ?? [])

ChibiBlasphem · 2025-11-03T09:06:46Z

    (() => {
-      const sv = filter.selectedValue ?? { operator: 'eq', value: 0 };
-      const raw = (sv as any).value as unknown;
+      const sv = filter.selectedValue ?? { op: '=', value: 0 };


Some variable naming makes it hard to read, sv could easily be named selectedValue

… prevent potential errors

…lter for clarity and consistency

…date actions for exported fields

… improved data handling

…ter for enhanced UI presentation

cursor · 2025-11-03T11:09:41Z

    } catch {
      setToastMessage(toastSession, {
-        type: 'success',
+        type: 'error',


Bug: Guard Clause Absence Causes Undefined Iteration Error

The update.ts route attempts to spread undefined into an array literal when current.ingestedDataFields is null or undefined. This causes a runtime TypeError: undefined is not iterable. The corresponding delete.ts route correctly uses an empty array fallback.

Additional Locations (1)

packages/app-builder/src/routes/ressources+/settings+/data-model+/tables+/$tableId+/exported-fields+/delete.ts#L72-L73

ChibiBlasphem

lgtm

siiick marked this pull request as draft October 23, 2025 13:16

siiick force-pushed the feat/in-app-analytics-dates branch from 89e4184 to 69cba3b Compare October 23, 2025 21:56

siiick marked this pull request as ready for review October 24, 2025 11:00

siiick requested a review from ChibiBlasphem October 24, 2025 11:01

This comment was marked as outdated.

Sign in to view

ChibiBlasphem requested changes Oct 27, 2025

View reviewed changes

siiick requested a review from ChibiBlasphem October 29, 2025 21:38

This comment was marked as outdated.

Sign in to view

siiick added 17 commits October 29, 2025 23:00

fix: prevent render warning

c7351e8

refactor: use simpler filters logic

36e225f

fix: scenario filter name

f9d5d14

props destructuring

e3ab58a

feat: add an apply button

d47e2bd

fix: edit modal

33297fd

fix: select display

7a11e3b

feat: loading + touched state

1393c22

fix: make compareRange optional

5f82990

feat: move filters buttons ton second line

b23f88a

feat: add filter unavailability

22c9526

fix: filter type

f876144

fix: review feedbacks

2d31947

fix: improve number input handling in NumberValueFilter

bce4be1

fix: update analytics filter value extraction logic

5b960b9

refactor: enhance filter value normalization and introduce dedicated …

2c6dd3d

…comparison filter types

fix: update analytics query enabling condition for improved logic

872212d

siiick force-pushed the feat/in-app-analytics-dates branch from 889037a to 872212d Compare October 29, 2025 22:00

This comment was marked as outdated.

Sign in to view

siiick added 2 commits October 29, 2025 23:05

fix: enhance number value handling in FiltersBar to prevent NaN and h…

6d214f5

…andle empty arrays

fix: sanitize numerical values in Decisions component to prevent NaN …

68b5047

…errors

siiick added 4 commits October 31, 2025 10:21

refactor: optimize analytics query action by removing unnecessary awa…

3566b44

…it statements

refactor: simplify operator selection in NumberValueFilter by utilizi…

414c09e

…ng a map for display values

refactor: simplify localText state initialization in TextMatchFilter …

7a7724d

…for better readability

refactor: update filter localization and enhance TextMatchFilter UI w…

80743be

…ith clear and apply buttons

siiick requested a review from ChibiBlasphem October 31, 2025 10:50

refactor: enhance layout and spacing in Analytics and FiltersBar comp…

0aaf1eb

…onents for improved UI consistency

ChibiBlasphem requested changes Oct 31, 2025

View reviewed changes

siiick added 3 commits October 31, 2025 14:04

refactor: remove unused useEffect in TextMatchFilter to streamline co…

01ae45e

…mponent logic

feat: add new settings page for analytics scenario filters (#1180)

4c13ff9

refactor: update localText handling in TextMatchFilter for improved s…

b945f9b

…tate management and validation

This comment was marked as outdated.

Sign in to view

siiick added 2 commits November 2, 2025 22:28

refactor: standardize operator naming in FiltersBar and related compo…

f2e94ea

…nents for consistency

refactor: reposition clear and apply buttons in FiltersBar for improv…

86ca858

…ed layout and accessibility

This comment was marked as outdated.

Sign in to view

ChibiBlasphem requested changes Nov 3, 2025

View reviewed changes

siiick added 2 commits November 3, 2025 11:46

fix: correct default value for ingestedDataFields in delete action to…

70ed8b3

… prevent potential errors

refactor: improve variable naming and state handling in NumberValueFi…

c62dfb4

…lter for clarity and consistency

This comment was marked as outdated.

Sign in to view

siiick added 2 commits November 3, 2025 11:50

fix: change toast message type from success to error in delete and up…

ec14987

…date actions for exported fields

Merge branch 'main' into feat/in-app-analytics-dates

a3629b4

siiick requested a review from ChibiBlasphem November 3, 2025 10:53

This comment was marked as outdated.

Sign in to view

refactor: update search filter structure in PrefilledValues story for…

9ad96eb

… improved data handling

This comment was marked as outdated.

Sign in to view

refactor: replace CalloutV2 with styled aside element in TextMatchFil…

891489a

…ter for enhanced UI presentation

siiick force-pushed the feat/in-app-analytics-dates branch from 6cae943 to 891489a Compare November 3, 2025 11:06

cursor Bot reviewed Nov 3, 2025

View reviewed changes

ChibiBlasphem approved these changes Nov 3, 2025

View reviewed changes

siiick merged commit ea68f71 into main Nov 3, 2025
6 of 7 checks passed

siiick deleted the feat/in-app-analytics-dates branch November 3, 2025 12:36

Uh oh!

Conversation

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

Uh oh!

Uh oh!

This comment was marked as outdated.

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!

ChibiBlasphem Oct 31, 2025 • edited by siiick Loading Uh oh! There was an error while loading. Please reload this page.

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!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

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!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

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!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

cursor Bot Nov 3, 2025

Choose a reason for hiding this comment

Bug: Guard Clause Absence Causes Undefined Iteration Error

Uh oh!

ChibiBlasphem left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

siiick commented Oct 20, 2025 •

edited by cursor Bot

Loading

ChibiBlasphem Oct 31, 2025 •

edited by siiick

Loading