chore: refactor TimelineChart for performance

packages/app/src/components/DBTraceWaterfallChart.tsx

@@ -786,7 +786,7 @@ export function DBTraceWaterfallChartContainer({
 
   const timelineRows = useMemo(
     () =>
-      visibleNodes.map((result, i) => {
+      visibleNodes.map(result => {
         const tookMs = (result.Duration || 0) * 1000;
         const startOffset = parseTimestampToMs(result.Timestamp);
         const start = startOffset - minOffset;
@@ -932,10 +932,6 @@ export function DBTraceWaterfallChartContainer({
               </div>
             </div>
           ),
-          style: {
-            // paddingTop: 1,
-            marginTop: i === 0 ? 32 : 0,
-          },
           isActive: isHighlighted,
           events: [
             {
@@ -1146,18 +1142,13 @@ export function DBTraceWaterfallChartContainer({
             maxHeight={heightPx}
             rowHeight={22}
             labelWidth={300}
-            onEventClick={(event: {
-              id: string;
-              type?: string;
-              aliasWith?: WithClause[];
-            }) => {
+            onEventClick={event => {
               onClick?.({
                 id: event.id,
                 type: event.type ?? '',
-                aliasWith: event.aliasWith ?? [],
+                aliasWith: [],
               });
             }}
-            cursors={[]}
             rows={timelineRows}
             initialScrollRowIndex={initialScrollRowIndex}
           />

packages/app/src/components/TimelineChart/TimelineChart.module.scss

@@ -1,20 +1,152 @@
+.timelineViewport {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  isolation: isolate;
+}
+
+.timelineContainer {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  overflow: auto;
+  overscroll-behavior-x: contain;
+  isolation: isolate;
+}
+
+.timelineScroller {
+  position: relative;
+}
+
+.timelineCorner {
+  position: sticky;
+  left: 0;
+  top: 0;
+  background: var(--color-bg-body);
+  z-index: 3;
+}
+
 .timelineRow {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
   cursor: pointer;
 
   &:hover {
     background-color: var(--color-bg-highlighted);
+
+    .labelContent {
+      background-color: var(--color-bg-highlighted);
+    }
   }
 }
 
 .timelineRowActive {
   background-color: var(--color-bg-highlighted);
   border-radius: var(--mantine-radius-xs);
+
+  .labelContent {
+    background-color: var(--color-bg-highlighted);
+  }
 }
 
 .labelContainer {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  background-color: var(--color-bg-body);
+}
+
+.labelContent {
+  width: 100%;
+  height: 100%;
+  padding-right: 8px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  padding-right: 8px;
+}
+
+.eventsContainer {
+  flex: 1;
+  position: relative;
+}
+
+.resizeHandleContainer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+}
+
+.mouseCursorWrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.xAxis {
+  position: sticky;
+  top: 0;
+  height: 24px;
+  padding-top: 4px;
+  z-index: 1;
+  pointer-events: none;
+  background: var(--color-bg-body);
+}
+
+.xAxisInner {
+  display: flex;
+  align-items: center;
+}
+
+// Tick children are created/measured imperatively by TimelineXAxis.tsx
+// (it reaches in via firstElementChild). Don't add other element children.
+.xAxisTicks {
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+}
+
+.xAxisTickLabel {
+  margin-inline-start: calc(var(--mantine-spacing-md) * 0.5);
+}
+
+.mouseCursorRow {
+  display: flex;
+}
+
+.mouseCursorEventsColumn {
+  flex: 1;
+  overflow: hidden;
+}
+
+.mouseCursor {
+  will-change: transform;
+}
+
+.mouseCursorOverlay {
+  height: 0;
+  top: 12px;
   position: relative;
+  will-change: transform;
+}
+
+.mouseCursorLabel {
+  padding: 0.5rem;
+  border-radius: var(--mantine-radius-sm);
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-surface);
+}
+
+.mouseCursorLine {
+  width: 1px;
+  background: var(--color-bg-neutral);
 }

packages/app/src/components/TimelineChart/TimelineChart.stories.tsx

@@ -0,0 +1,133 @@
+import { Group, Text } from '@mantine/core';
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { IconChevronDown } from '@tabler/icons-react';
+
+import { TimelineChart } from './TimelineChart';
+import type { TTimelineEvent } from './TimelineChartRowEvents';
+
+import styles from '@/../styles/LogSidePanel.module.scss';
+
+function makeRow(
+  id: string,
+  serviceName: string,
+  body: string,
+  start: number,
+  duration: number,
+  level = 0,
+  childCount = 0,
+) {
+  const event: TTimelineEvent = {
+    id,
+    start,
+    end: start + duration,
+    tooltip: body,
+    color: 'var(--color-text-inverted)',
+    backgroundColor: '#6A7077',
+    body: <span>{body}</span>,
+    minWidthPerc: 1,
+    showDuration: true,
+  };
+
+  return {
+    id,
+    label: (
+      <div
+        className={`text-truncate cursor-pointer ps-2 ${styles.traceTimelineLabel}`}
+      >
+        <div className="d-flex align-items-center" style={{ height: 24 }}>
+          {Array.from({ length: level }).map((_, idx) => (
+            <div
+              key={idx}
+              style={{
+                borderLeft: '1px solid var(--color-border)',
+                marginLeft: 7,
+                width: 8,
+                minWidth: 8,
+                maxWidth: 8,
+                flexShrink: 0,
+                height: '100%',
+              }}
+            />
+          ))}
+          <span style={{ opacity: childCount > 0 ? 1 : 0 }}>
+            <IconChevronDown size={16} className="me-1 text-muted-hover" />
+          </span>
+          {childCount > 0 && (
+            <Text span size="xxs" me="xs" pt="2px">
+              ({childCount})
+            </Text>
+          )}
+          <Group gap={0} wrap="nowrap">
+            <Text size="xxs" truncate="end" span>
+              {serviceName} | {body}
+            </Text>
+          </Group>
+        </div>
+      </div>
+    ),
+    events: [event],
+  };
+}
+
+const services = [
+  'api-gateway',
+  'auth-service',
+  'user-service',
+  'postgres',
+  'dashboard-svc',
+  'redis',
+  'metrics-svc',
+  'clickhouse',
+];
+const ops = [
+  'GET',
+  'POST',
+  'SELECT',
+  'INSERT',
+  'SET',
+  'validateToken',
+  'aggregate',
+  'query',
+];
+
+const sampleRows = Array.from({ length: 1000 }, (_, i) => {
+  const level = i === 0 ? 0 : (i * 7) % 4;
+  const childCount = level < 2 && i % 3 === 0 ? ((i * 3) % 5) + 1 : 0;
+  const start = i * 3;
+  const duration = 10 + ((i * 13) % 90);
+  return makeRow(
+    `s${i}`,
+    services[i % services.length],
+    `${ops[i % ops.length]} /op-${i}`,
+    start,
+    duration,
+    level,
+    childCount,
+  );
+});
+
+const meta: Meta<typeof TimelineChart> = {
+  title: 'Components/TimelineChart',
+  component: TimelineChart,
+  parameters: { layout: 'padded' },
+  decorators: [
+    Story => (
+      <div style={{ border: '1px solid lightgray' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof TimelineChart>;
+
+export const Default: Story = {
+  args: {
+    rows: sampleRows,
+    rowHeight: 24,
+    labelWidth: 300,
+    maxHeight: 800,
+    initialScrollRowIndex: 0,
+  },
+};