web: rename events

README.md

@@ -22,7 +22,7 @@ As of today (2023-12-12) I have more then 1.2 million events in PSQL and perform
 ### GUI
 
 - [x] Fix tables on settings
-- [ ] Rename event label
+- [x] Rename event label
 - [ ] Real time data (mostly screen_views stats)
   - [ ] Active users (5min, 10min, 30min)
 - [x] Save report to a specific dashboard

apps/web/package.json

@@ -40,6 +40,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
+    "lodash.debounce": "^4.0.8",
     "lottie-react": "^2.4.0",
     "lucide-react": "^0.286.0",
     "mitt": "^3.0.1",

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 || 'unknown_event',
-    name: event.name || 'Untitled',
+    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({

pnpm-lock.yaml

@@ -172,6 +172,9 @@ importers:
       cmdk:
         specifier: ^0.2.0
         version: 0.2.0(@types/react@18.2.34)(react-dom@18.2.0)(react@18.2.0)
+      lodash.debounce:
+        specifier: ^4.0.8
+        version: 4.0.8
       lottie-react:
         specifier: ^2.4.0
         version: 2.4.0(react-dom@18.2.0)(react@18.2.0)
@@ -4319,6 +4322,10 @@ packages:
     dependencies:
       p-locate: 5.0.0
 
+  /lodash.debounce@4.0.8:
+    resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
+    dev: false
+
   /lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}