web: rename events

apps/web/src/components/report/sidebar/ReportEvents.tsx

@@ -2,6 +2,8 @@ import { useState } from 'react';
 import { ColorSquare } from '@/components/ColorSquare';
 import { Dropdown } from '@/components/Dropdown';
 import { Combobox } from '@/components/ui/combobox';
+import { Input } from '@/components/ui/input';
+import { useDebounceFn } from '@/hooks/useDebounceFn';
 import { useOrganizationParams } from '@/hooks/useOrganizationParams';
 import { useDispatch, useSelector } from '@/redux';
 import type { IChartEvent } from '@/types';
@@ -25,6 +27,9 @@ export function ReportEvents() {
     value: item.name,
     label: item.name,
   }));
+  const dispatchChangeEvent = useDebounceFn((event: IChartEvent) => {
+    dispatch(changeEvent(event));
+  });
 
   const handleMore = (event: IChartEvent) => {
     const callback: ReportEventMoreProps['onClick'] = (action) => {
@@ -64,6 +69,18 @@ export function ReportEvents() {
                   items={eventsCombobox}
                   placeholder="Select event"
                 />
+                <Input
+                  placeholder={
+                    event.name ? `${event.name} (${event.id})` : 'Display name'
+                  }
+                  defaultValue={event.displayName}
+                  onChange={(e) => {
+                    dispatchChangeEvent({
+                      ...event,
+                      displayName: e.target.value,
+                    });
+                  }}
+                />
                 <ReportEventMore onClick={handleMore(event)} />
               </div>
 

apps/web/src/hooks/useDebounceFn.ts

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import debounce from 'lodash.debounce';
+
+export function useDebounceFn<T>(fn: T, ms = 500): T {
+  const debouncedFn = debounce(fn, ms);
+
+  useEffect(() => {
+    return () => {
+      debouncedFn.cancel();
+    };
+  });
+
+  return debouncedFn;
+}

apps/web/src/server/api/routers/chart.ts

@@ -213,7 +213,7 @@ function propertyNameToSql(name: string) {
 }
 
 function getEventLegend(event: IChartEvent) {
-  return `${event.name} (${event.id})`;
+  return event.displayName ?? `${event.name} (${event.id})`;
 }
 
 function getDatesFromRange(range: IChartRange) {

apps/web/src/server/api/routers/report.ts

@@ -35,8 +35,8 @@ function transformEvent(
     segment: event.segment ?? 'event',
     filters: (event.filters ?? []).map(transformFilter),
     id: event.id ?? alphabetIds[index]!,
-    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-    name: event.name || 'Untitled',
+    name: event.name || 'unknown_event',
+    displayName: event.displayName,
   };
 }
 

apps/web/src/utils/validation.ts

@@ -10,6 +10,7 @@ function objectToZodEnums<K extends string>(obj: Record<K, any>): [K, ...K[]] {
 export const zChartEvent = z.object({
   id: z.string(),
   name: z.string(),
+  displayName: z.string().optional(),
   segment: z.enum(['event', 'user', 'user_average']),
   filters: z.array(
     z.object({