RI-7218 Add telemetry collection for Vector Search page #4811

valkirilov · 2025-08-06T12:55:17Z

Description

Added telemetry collection events to track users' interaction with the Vector Search page:

when users run a query
when users copy a query result
when users toggle the full-screen mode for a query result
when users expand/collapse a query result
when users delete a query result
when users delete all results
when users delete the query in the editor

PS: The diff may look huge, but actually, we have the same changes applied on multiple places + copy/paste of a big component.

How to test it

Go to Vector Search page - http://localhost:8080/{databaseId}/vector-search
Enter a query in the main editor and hit the "Run" button (dispatches SEARCH_COMMAND_SUBMITTED event)
Click on the "Copy" button when you hover over a result of a query (dispatches SEARCH_COMMAND_COPIED event)
Click on the "Run" button on a result of a query, to re-run it (dispatches SEARCH_COMMAND_RUN_AGAIN event)
Click on the "Toggle Full-Screen" button on a result of a query (dispatches SEARCH_RESULTS_IN_FULL_SCREEN event)
Click on the "Expand" button on a result of a query to see the command results (dispatches SEARCH_RESULTS_COLLAPSED event)
Click on the "Collapse" button on a result of a query to hide the command results (dispatches SEARCH_RESULTS_EXPANDED event)
Click on the "Delete" button on a result of a query to remove it (dispatches SEARCH_CLEAR_RESULT_CLICKED event)
Click on the "Clear Results" button to remove all commands (dispatches SEARCH_CLEAR_ALL_RESULTS_CLICKED event)
Click on the "Clear" button to remove the current query from the editor (dispatches SEARCH_CLEAR_EDITOR_CLICKED event)

Screen.Recording.2025-08-07.at.14.03.20.mov

Verify Telemetry events

We have the new events for the Vector Search page collected successfully.

Note: Telemetry is collected only if the user decides to opt-in to that.
You control it from Settings page -> Privacy section -> Usage Data toggle.

Notes: Since the introduced changes reflect the Workbench telemetry as well, I have checked that we still emit properly the following events:

WORKBENCH_RESULTS_COLLAPSED
WORKBENCH_RESULTS_EXPANDED
WORKBENCH_COMMAND_COPIED
WORKBENCH_CLEAR_RESULT_CLICKED

github-actions · 2025-08-06T13:09:02Z

Code Coverage - Frontend unit tests

St.^❔	Category	Percentage	Covered / Total
🟢	Statements	81.71%	19589/23973
🟡	Branches	67.06%	8502/12678
🟡	Functions	75.79%	5186/6843
🟢	Lines	82.14%	19172/23342

Test suite run success

4997 tests passing in 659 suites.

Report generated by 🧪jest coverage report action from 264e320

re #RI-7218

- refactor the CardHeader component to work with "onQueryCopy" callback - rework the telemetry collection on "copy command" for the Workbench - collect telemetry when clicking on the "copy command" button in Vector Search re #RI-7218

… query" This reverts commit 523a81d.

- we can't make the QueryCardHeader component reuable at this point, it need to be reimagined from the ground up, so we decide to copy the current implementation and rework inline what we need to make the telemetry for the vector search re #RI-7218

re #RI-7218

…reen for a query result re #RI-7218

…lapse a query result re #RI-7218

…ry result re #RI-7218

…uery results re #RI-7218

re #RI-7218

…actory

KrumTy · 2025-08-08T07:25:04Z

redisinsight/ui/src/pages/vector-search/components/commands-view/CommandsView/CommandsView.tsx

+  const collectTelemetryQueryReRun = (query: string) => {
+    sendEventTelemetry({
+      event: TelemetryEvent.SEARCH_COMMAND_RUN_AGAIN,
+      eventData: {
+        databaseId: instanceId,


this function already takes a parameter, add another one - instanceId and you can remove it's definition from the component body

Done. The telemetry collection is exported as util, outside of the component.

KrumTy · 2025-08-08T07:29:47Z

redisinsight/ui/src/pages/vector-search/components/query-card-header/QueryCardHeader.tsx

+ * We're really sorry to do that at this point, but this family fo components should be refactored to be reusable.
+ * At this point, it requires a lot of effort to make it reusable, so we decided to copy the component as is, and apply the necessary changes inline.


this adds to the tech debt. What are the changes the original component would require to make it reusable?

Diff checking both of them I currently see a telemetry param change and that's all, so what else is going to be changed?

Yes, I agree. It was discussed with @pawelangelow to proceed this way for now. Check the Notes section in the description of the pull request for more information.

Yeah, let's copy it for now. We either slow down to do it properly or introduce a tech debt - no "good" scenario :(

Ok, I went for a simplified approach, and I think it worked:

removed the copy/paste QueryCardHeader component d6587d2

introduced a simple context that for now will keep information where the component is rendered - Workbench page or Vector Search page 49f5bee

applied changes to emit telemetry conditionally, based on the state from the context 09b8e86

KrumTy · 2025-08-08T07:32:03Z

redisinsight/ui/src/pages/vector-search/query/VectorSearchQuery.tsx

+  const collectTelemetryQueryRun = () => {
+    sendEventTelemetry({
+      event: TelemetryEvent.SEARCH_COMMAND_SUBMITTED,
+      eventData: {
+        databaseId: instanceId,
+        commands: [query],


again, absolutely not a fan of declaring such functions inside the component, especially since they only require 1-2 params. This adds unnecessary unnecessary complexity - you open the component body and half the code is related to a telemetry callbacks

seeing how much space these telemetry functions take I'd even suggest extracting them in a separate telemetry.ts file or something like that

Well, they won't disappear completely as the handlers should live here:

const handleClearResults = () => { onAllQueriesDelete() sendEventTelemetrySomething() } ... and the remaining 3

Both of you are correct. We still have the base handlers as part of the component, because we need them.
But I managed to export the telemetry collection logic into a helper util, outside of the component.

And obviously, all the logic can be external to the component by incorporating a hook :)
But since this is mostly personal preference, I am saying this just for completenes and nothing else :)

Initially, I went for a hook, but then @KrumTy shared some concerns on the topic and advised going for a simpler helper function, and keeping it independent of the React lifecycle. I think it works for now.

re #RI-7218

… (workbench or vector search) re #RI-7218

…ommand for both workbecnh and vector search re #RI-7218

re #RI-7218

…pnd query for both workbecnh and vector search re #RI-7218

… for both workbecnh and vector search re #RI-7218

redisinsight/ui/src/components/query/context/view-mode.context.tsx

KrumTy · 2025-08-08T10:49:25Z

redisinsight/ui/src/components/query/context/view-mode.context.tsx

+  ViewModeContextProviderProps
+> = ({
+  children,
+  initialViewMode = ViewMode.Workbench, // Default to Workbench if not provided


explicit over default is better in this case imo

I prefer to keep this default value, for backward compatibility and safety.

this is a new provider, no backwards compatibility is needed as you are defining the interface atm
also, from what I've seen, you are setting it explicitly everywhere (as should be) already

pd-redis · 2025-08-08T10:43:38Z

redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx

+      const telemetryEvent =
+        viewMode === ViewMode.Workbench
+          ? isOpen
+            ? TelemetryEvent.WORKBENCH_RESULTS_COLLAPSED
+            : TelemetryEvent.WORKBENCH_RESULTS_EXPANDED
+          : isOpen
+            ? TelemetryEvent.SEARCH_RESULTS_COLLAPSED
+            : TelemetryEvent.SEARCH_RESULTS_EXPANDED
+
+      sendEvent(telemetryEvent, query)


this starts to look ugly

Yes, we all agree on that. In general, the component should be refactored so it can be reused properly on multiple places without having such tight business logic inside it. Unfortunately, it's not that simple, so that’s why we went for this quick and dirty fix with the conditional telemetry.

Regarding this piece of code, the best thing I can do is to split it over two conditional operators, and it will still be ugly. So after all, I rely on general refactoring to fix this.

pd-redis · 2025-08-08T10:50:42Z

redisinsight/ui/src/components/query/context/view-mode.context.tsx

So basically, this is a context that shares single value across components, right?
Is there any reason not to just add this to Redux store?

it's used in different views now. It would not make sense to dispatch redux actions to update the store as you switch between Search and Workbench tabs

This context solution is the least path of resistance to reusing the QueryCard component. The other being prop drilling, which @valkirilov said was too hard (4-5 levels deep).

The pre-context solution was to copy the whole component and it's test and adjust 3-4 telemetry lines.

…nto fe/feature/RI-7218_vector-search-telemetry-3

KrumTy

LGTM

valkirilov force-pushed the fe/feature/RI-7218_vector-search-telemetry-3 branch 2 times, most recently from 1c148ec to 523a81d Compare August 6, 2025 15:27

valkirilov self-assigned this Aug 7, 2025

valkirilov force-pushed the fe/feature/RI-7218_vector-search-telemetry-3 branch from 0b87e6d to f64da8b Compare August 7, 2025 10:59

valkirilov marked this pull request as ready for review August 7, 2025 11:33

valkirilov requested review from KrumTy, pawelangelow, dantovska, ArtemHoruzhenko, pd-redis and KIvanow as code owners August 7, 2025 11:33

valkirilov force-pushed the fe/feature/RI-7218_vector-search-telemetry-2 branch 2 times, most recently from 39baa30 to 4e8a96b Compare August 7, 2025 12:21

valkirilov force-pushed the fe/feature/RI-7218_vector-search-telemetry-3 branch from f64da8b to 4bcf5eb Compare August 7, 2025 12:33

Base automatically changed from fe/feature/RI-7218_vector-search-telemetry-2 to feature/RI-6855/vector-search August 7, 2025 13:08

valkirilov added 12 commits August 7, 2025 16:10

feat(ui): collect telemetry on vector search page when running a query

8c75ca1

re #RI-7218

Revert "feat(ui): collect telemetry on vector search page when copy a…

f79fe5f

… query" This reverts commit 523a81d.

feat(ui): collect telemetry on vector search page when copy a query

ac73644

re #RI-7218

feat(ui): collect telemetry on vector search page when re-run a query

02fbb30

re #RI-7218

feat(ui): collect telemetry on vector search page when toggle full-sc…

0ce5ac1

…reen for a query result re #RI-7218

feat(ui): collect telemetry on vector search page when collapse/uncol…

5b6f82a

…lapse a query result re #RI-7218

feat(ui): collect telemetry on vector search page when clearing a que…

9fe6641

…ry result re #RI-7218

feat(ui): collect telemetry on vector search page when clearing all q…

9efa866

…uery results re #RI-7218

feat(ui): collect telemetry on vector search page when clearing query

45a30e8

re #RI-7218

reafactor(ui): try to use real interfaces for the command execution f…

910e4a7

…actory

valkirilov force-pushed the fe/feature/RI-7218_vector-search-telemetry-3 branch from 4bcf5eb to 910e4a7 Compare August 7, 2025 13:13

KrumTy reviewed Aug 8, 2025

View reviewed changes

valkirilov added 10 commits August 8, 2025 11:50

reafactor(ui): export telemetry for "query re-run" into util

05ca0b2

re #RI-7218

reafactor(ui): export telemetry for "query run" into util

4159613

re #RI-7218

reafactor(ui): export telemetry for "query clear-all" into util

02fde1c

re #RI-7218

reafactor(ui): export telemetry for "query clear editor" into util

8671bc7

re #RI-7218

refactor(ui): remove copy/paste QueryCardHeader component

d6587d2

re #RI-7218

refactor(ui): introduce context to keep information for the view mode…

49f5bee

… (workbench or vector search) re #RI-7218

refactor(ui): use the view mode from the context to emit copy query c…

09b8e86

…ommand for both workbecnh and vector search re #RI-7218

reafactor(ui): export telemetry for "toggle query full-screen" into util

accd720

re #RI-7218

refactor(ui): use the view mode from the context to emit collapse/exa…

836641f

…pnd query for both workbecnh and vector search re #RI-7218

refactor(ui): use the view mode from the context to emit delete query…

456ffd5

… for both workbecnh and vector search re #RI-7218

KrumTy reviewed Aug 8, 2025

View reviewed changes

redisinsight/ui/src/components/query/context/view-mode.context.tsx Outdated Show resolved Hide resolved

valkirilov added 2 commits August 8, 2025 13:46

test(ui): fix tests by adding the new context provider

7a7477a

test(ui): fix tests by adding the new context provider

822f3b4

KrumTy reviewed Aug 8, 2025

View reviewed changes

redisinsight/ui/src/components/query/context/view-mode.context.tsx Outdated Show resolved Hide resolved

KrumTy reviewed Aug 8, 2025

View reviewed changes

pd-redis reviewed Aug 8, 2025

View reviewed changes

valkirilov added 4 commits August 8, 2025 13:54

test(ui): fix tests by adding the new context provider

4ab9820

refactor(ui): simplify the context to not allow state change

da82437

refactor(ui): simplify the context

044430e

Merge remote-tracking branch 'origin/feature/RI-6855/vector-search' i…

264e320

…nto fe/feature/RI-7218_vector-search-telemetry-3

KrumTy approved these changes Aug 8, 2025

View reviewed changes

github-actions bot added the e2e-approved label Aug 8, 2025

valkirilov merged commit 5aa7be6 into feature/RI-6855/vector-search Aug 8, 2025
14 checks passed

valkirilov deleted the fe/feature/RI-7218_vector-search-telemetry-3 branch August 8, 2025 12:00

		* We're really sorry to do that at this point, but this family fo components should be refactored to be reusable.
		* At this point, it requires a lot of effort to make it reusable, so we decided to copy the component as is, and apply the necessary changes inline.

RI-7218 Add telemetry collection for Vector Search page #4811

RI-7218 Add telemetry collection for Vector Search page #4811

Uh oh!

Conversation

valkirilov commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How to test it

Verify Telemetry events

Uh oh!

github-actions bot commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage - Frontend unit tests

Test suite run success

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!

KrumTy Aug 8, 2025 • edited 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!

Uh oh!

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!

KrumTy Aug 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

KrumTy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

valkirilov commented Aug 6, 2025 •

edited

Loading

github-actions bot commented Aug 6, 2025 •

edited

Loading

KrumTy Aug 8, 2025 •

edited

Loading

KrumTy Aug 8, 2025 •

edited

Loading