@rozenite/performance-monitor-plugin 1.0.0-alpha.11

package/src/shared/types.ts

@@ -0,0 +1,50 @@
+import type { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+
+export type SharedPerformanceEntryProperties = {
+  name: string;
+  startTime: number;
+  duration: number;
+};
+
+export type SerializedPerformanceMeasure = SharedPerformanceEntryProperties & {
+  entryType: 'measure';
+  detail?: unknown;
+};
+
+export type SerializedPerformanceMark = SharedPerformanceEntryProperties & {
+  entryType: 'mark';
+  detail?: unknown;
+};
+
+export type SerializedPerformanceMetric = SharedPerformanceEntryProperties & {
+  entryType: 'metric';
+  value: string | number;
+  detail?: unknown;
+};
+
+export type SerializedPerformanceEntry =
+  | SerializedPerformanceMeasure
+  | SerializedPerformanceMark
+  | SerializedPerformanceMetric;
+
+export type PerformanceMonitorEventMap = {
+  setEnabled: {
+    enabled: boolean;
+  };
+  setSession: {
+    sessionStartedAt: number;
+    timeOrigin: number;
+  };
+  appendMeasures: {
+    measures: SerializedPerformanceMeasure[];
+  };
+  appendMarks: {
+    marks: SerializedPerformanceMark[];
+  };
+  setMetrics: {
+    metrics: SerializedPerformanceMetric[];
+  };
+};
+
+export type PerformanceMonitorDevToolsClient =
+  RozeniteDevToolsClient<PerformanceMonitorEventMap>;

package/src/ui/App.css

@@ -0,0 +1,97 @@
+/* Custom scrollbar for dark theme */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #1a1a1a;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #333333;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a0a0a0;
+}
+
+.radix-themes {
+  --cursor-button: pointer;
+  --cursor-checkbox: pointer;
+  --cursor-link: pointer;
+  --cursor-menu-item: pointer;
+  --cursor-radio: pointer;
+  --cursor-slider-thumb: grab;
+  --cursor-slider-thumb-active: grabbing;
+  --cursor-switch: pointer;
+}
+
+.table-row-hover:hover {
+  background-color: hsl(0 0% 16%) !important;
+}
+
+/* Data Table Styles */
+.data-table-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+  background: hsl(0 0% 3.9%);
+  color: hsl(0 0% 98%);
+}
+
+.data-table-header-row {
+  background: hsl(0 0% 3.9%);
+  border-bottom: 1px solid hsl(0 0% 14.9%);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.data-table-header-cell {
+  padding: 8px 12px;
+  text-align: left;
+  font-weight: 600;
+  color: hsl(0 0% 98%);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-bottom: 1px solid hsl(0 0% 14.9%);
+  transition: background-color 0.15s ease;
+}
+
+.data-table-header-cell:hover {
+  background-color: hsl(0 0% 16%);
+}
+
+.data-table-row {
+  border-bottom: 1px solid hsl(0 0% 14.9%);
+  transition: background-color 0.15s ease;
+}
+
+.data-table-row:hover {
+  background-color: hsl(0 0% 16%);
+}
+
+.data-table-cell {
+  padding: 8px 12px;
+  vertical-align: top;
+  border-bottom: 1px solid hsl(0 0% 14.9%);
+  color: hsl(0 0% 98%);
+}
+
+.index-cell,
+.index-header {
+  width: 40px;
+  text-align: center;
+  font-weight: 600;
+  color: hsl(0 0% 63.9%);
+  font-size: 11px;
+}

package/src/ui/App.tsx

@@ -0,0 +1,286 @@
+import {
+  useRozeniteDevToolsClient,
+  Subscription,
+} from '@rozenite/plugin-bridge';
+import {
+  PerformanceMonitorEventMap,
+  SerializedPerformanceMeasure,
+  SerializedPerformanceMark,
+  SerializedPerformanceMetric,
+  SerializedPerformanceEntry,
+} from '../shared/types';
+import { useEffect, useState } from 'react';
+import {
+  Theme,
+  Tabs,
+  Button,
+  Heading,
+  Text,
+  Flex,
+  Box,
+} from '@radix-ui/themes';
+import '@radix-ui/themes/styles.css';
+import './App.css';
+import { MeasuresTable } from './components/MeasuresTable';
+import { MetricsTable } from './components/MetricsTable';
+import { MarksTable } from './components/MarksTable';
+import { DetailsSidebar } from './components/DetailsSidebar';
+import { SessionDuration } from './components/SessionDuration';
+import { ExportModal } from './components/ExportModal';
+
+type PerformanceMonitorSession = {
+  sessionStartedAt: number;
+  clockShift: number;
+  measures: SerializedPerformanceMeasure[];
+  marks: SerializedPerformanceMark[];
+  metrics: SerializedPerformanceMetric[];
+};
+
+export default function PerformanceMonitorPanel() {
+  const client = useRozeniteDevToolsClient<PerformanceMonitorEventMap>({
+    pluginId: '@rozenite/performance-monitor-plugin',
+  });
+  const [session, setSession] = useState<PerformanceMonitorSession>({
+    sessionStartedAt: 0,
+    clockShift: 0,
+    measures: [],
+    marks: [],
+    metrics: [],
+  });
+  const [isSessionActive, setIsSessionActive] = useState(false);
+  const [selectedItem, setSelectedItem] =
+    useState<SerializedPerformanceEntry | null>(null);
+
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+
+    const subscriptions: Subscription[] = [];
+
+    subscriptions.push(
+      client.onMessage('setSession', ({ sessionStartedAt }) => {
+        const receivedAt = Date.now();
+        setSession({
+          sessionStartedAt: receivedAt,
+          // It's likely that there is a small clock shift between the device and the DevTools.
+          clockShift: receivedAt - sessionStartedAt,
+          measures: [],
+          marks: [],
+          metrics: [],
+        });
+        setIsSessionActive(true);
+      })
+    );
+
+    subscriptions.push(
+      client.onMessage('appendMeasures', ({ measures }) => {
+        setSession((oldSession) => ({
+          ...oldSession,
+          measures: [
+            ...oldSession.measures,
+            ...measures.map((measure) => ({
+              ...measure,
+              startTime: measure.startTime + oldSession.clockShift,
+            })),
+          ],
+        }));
+      })
+    );
+
+    subscriptions.push(
+      client.onMessage('appendMarks', ({ marks }) => {
+        setSession((oldSession) => ({
+          ...oldSession,
+          marks: [
+            ...oldSession.marks,
+            ...marks.map((mark) => ({
+              ...mark,
+              startTime: mark.startTime + oldSession.clockShift,
+            })),
+          ],
+        }));
+      })
+    );
+
+    subscriptions.push(
+      client.onMessage('setMetrics', ({ metrics }) => {
+        setSession((oldSession) => ({
+          ...oldSession,
+          metrics: [
+            ...oldSession.metrics,
+            ...metrics.map((metric) => ({
+              ...metric,
+              startTime: metric.startTime + oldSession.clockShift,
+            })),
+          ],
+        }));
+      })
+    );
+
+    return () => {
+      subscriptions.forEach((subscription) => subscription.remove());
+      client.send('setEnabled', { enabled: false });
+    };
+  }, [client]);
+
+  const handleStartSession = () => {
+    if (client && !isSessionActive) {
+      client.send('setEnabled', { enabled: true });
+      setIsSessionActive(true);
+    }
+  };
+
+  const handleStopSession = () => {
+    if (client && isSessionActive) {
+      client.send('setEnabled', { enabled: false });
+      setIsSessionActive(false);
+    }
+  };
+
+  const handleEntryClick = (entry: SerializedPerformanceEntry) => {
+    setSelectedItem(entry);
+  };
+
+  const handleCloseSidebar = () => {
+    setSelectedItem(null);
+  };
+
+  return (
+    <Theme appearance="dark" accentColor="blue" radius="medium">
+      <Box
+        p="4"
+        height="100vh"
+        style={{ display: 'flex', flexDirection: 'column' }}
+      >
+        {/* Header */}
+        <Box mb="4" style={{ flexShrink: 0 }}>
+          <Heading size="6" mb="2">
+            Performance Monitor
+          </Heading>
+          <Flex gap="4" align="center">
+            <SessionDuration
+              isActive={isSessionActive}
+              sessionStartedAt={session.sessionStartedAt}
+            />
+          </Flex>
+        </Box>
+
+        {/* Toolbar */}
+        <Flex gap="3" align="center" mb="4" style={{ flexShrink: 0 }}>
+          <Button
+            onClick={handleStartSession}
+            disabled={isSessionActive}
+            color="green"
+          >
+            Start Session
+          </Button>
+          <Button
+            onClick={handleStopSession}
+            disabled={!isSessionActive}
+            color="red"
+          >
+            Stop Session
+          </Button>
+          <ExportModal
+            measures={session.measures}
+            metrics={session.metrics}
+            marks={session.marks}
+            sessionStartedAt={session.sessionStartedAt}
+            clockShift={session.clockShift}
+          />
+          <Flex gap="2" align="center" ml="auto">
+            <Box
+              style={{
+                width: '8px',
+                height: '8px',
+                borderRadius: '50%',
+                backgroundColor: isSessionActive ? '#10b981' : '#ef4444',
+              }}
+            />
+            <Text size="2" color="gray">
+              {isSessionActive ? 'Session Active' : 'Session Inactive'}
+            </Text>
+          </Flex>
+        </Flex>
+
+        {/* Tabs */}
+        <Box
+          style={{
+            flex: '1',
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: 0,
+          }}
+        >
+          <Tabs.Root
+            defaultValue="measures"
+            style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+          >
+            <Tabs.List style={{ flexShrink: 0 }}>
+              <Tabs.Trigger value="measures">
+                Measures ({session.measures.length})
+              </Tabs.Trigger>
+              <Tabs.Trigger value="metrics">
+                Metrics ({session.metrics.length})
+              </Tabs.Trigger>
+              <Tabs.Trigger value="marks">
+                Marks ({session.marks.length})
+              </Tabs.Trigger>
+            </Tabs.List>
+
+            <Box
+              style={{
+                flexGrow: '1',
+                display: 'flex',
+                flexDirection: 'column',
+                minHeight: 0,
+              }}
+            >
+              <Tabs.Content
+                value="measures"
+                style={{
+                  display: 'contents',
+                }}
+              >
+                <MeasuresTable
+                  measures={session.measures}
+                  onRowClick={handleEntryClick}
+                />
+              </Tabs.Content>
+
+              <Tabs.Content
+                value="metrics"
+                style={{
+                  display: 'contents',
+                }}
+              >
+                <MetricsTable
+                  metrics={session.metrics}
+                  onRowClick={handleEntryClick}
+                />
+              </Tabs.Content>
+
+              <Tabs.Content
+                value="marks"
+                style={{
+                  display: 'contents',
+                }}
+              >
+                <MarksTable
+                  marks={session.marks}
+                  onRowClick={handleEntryClick}
+                />
+              </Tabs.Content>
+            </Box>
+          </Tabs.Root>
+        </Box>
+      </Box>
+
+      <DetailsSidebar
+        selectedItem={selectedItem}
+        onClose={handleCloseSidebar}
+      />
+    </Theme>
+  );
+}

package/src/ui/components/DataTable.tsx

@@ -0,0 +1,117 @@
+import {
+  useReactTable,
+  getCoreRowModel,
+  flexRender,
+  getSortedRowModel,
+  SortingState,
+  ColumnDef,
+} from '@tanstack/react-table';
+import { TableVirtuoso } from 'react-virtuoso';
+import { Text, Flex, Box } from '@radix-ui/themes';
+import { useState } from 'react';
+
+export type DataTableProps<TData> = {
+  data: TData[];
+  columns: ColumnDef<TData>[];
+  onRowClick?: (item: TData) => void;
+  emptyMessage?: string;
+};
+
+export const DataTable = <TData,>({
+  data,
+  columns,
+  onRowClick,
+  emptyMessage = 'No data available',
+}: DataTableProps<TData>) => {
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+    },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  const { rows } = table.getRowModel();
+
+  if (data.length === 0) {
+    return (
+      <Box pt="3" pl="3">
+        <Text size="2" color="gray">
+          {emptyMessage}
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <div className="data-table-container">
+      <TableVirtuoso
+        style={{ height: '100%' }}
+        totalCount={rows.length}
+        components={{
+          Table: (props) => <table {...props} className="data-table" />,
+          TableRow: (props) => {
+            const index = props['data-index'];
+            const row = rows[index];
+
+            return (
+              <tr
+                {...props}
+                onClick={() => onRowClick?.(row.original)}
+                style={{
+                  cursor: onRowClick ? 'pointer' : 'default',
+                  transition: 'background-color 0.15s ease',
+                }}
+                className="data-table-row"
+              >
+                <td className="data-table-cell index-cell">{index + 1}</td>
+                {row.getVisibleCells().map((cell) => (
+                  <td key={cell.id} className="data-table-cell">
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            );
+          },
+        }}
+        fixedHeaderContent={() => {
+          return table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id} className="data-table-header-row">
+              <th className="data-table-header-cell index-header">#</th>
+              {headerGroup.headers.map((header) => (
+                <th
+                  key={header.id}
+                  className="data-table-header-cell"
+                  onClick={header.column.getToggleSortingHandler()}
+                  style={{
+                    cursor: header.column.getCanSort() ? 'pointer' : 'default',
+                  }}
+                >
+                  <Flex align="center" gap="2">
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                    {header.column.getCanSort() && (
+                      <Text size="1" color="gray">
+                        {{
+                          asc: '⬆️',
+                          desc: '⬇️',
+                        }[header.column.getIsSorted() as string] ?? '↕️'}
+                      </Text>
+                    )}
+                  </Flex>
+                </th>
+              ))}
+            </tr>
+          ));
+        }}
+      />
+    </div>
+  );
+};

package/src/ui/components/DetailsDisplay.tsx

@@ -0,0 +1,26 @@
+import { Box, Text, Heading } from '@radix-ui/themes';
+import { ReactNode } from 'react';
+import { JsonTree } from './JsonTree';
+
+export type DetailsDisplayProps = {
+  details?: unknown;
+};
+
+export const DetailsDisplay = ({ details }: DetailsDisplayProps) => {
+  const renderValue = (value: unknown): ReactNode => {
+    if (value == null) {
+      return <Text color="gray">No details provided</Text>;
+    }
+
+    return <JsonTree data={details} />;
+  };
+
+  return (
+    <Box>
+      <Heading size="3" mb="3">
+        Details
+      </Heading>
+      <Box>{renderValue(details)}</Box>
+    </Box>
+  );
+};

package/src/ui/components/DetailsSidebar.tsx

@@ -0,0 +1,87 @@
+import { ScrollArea, Box, Button, Flex } from '@radix-ui/themes';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import { MeasureDetails } from './MeasureDetails';
+import { MetricDetails } from './MetricDetails';
+import { MarkDetails } from './MarkDetails';
+import { SerializedPerformanceEntry } from '../../shared/types';
+
+export type DetailsSidebarProps = {
+  selectedItem: SerializedPerformanceEntry | null;
+  onClose: () => void;
+};
+
+export const DetailsSidebar = ({
+  selectedItem,
+  onClose,
+}: DetailsSidebarProps) => {
+  const renderDetails = () => {
+    if (!selectedItem) return null;
+
+    switch (selectedItem.entryType) {
+      case 'measure':
+        return <MeasureDetails measure={selectedItem} />;
+      case 'metric':
+        return <MetricDetails metric={selectedItem} />;
+      case 'mark':
+        return <MarkDetails mark={selectedItem} />;
+      default:
+        return null;
+    }
+  };
+
+  if (!selectedItem) {
+    return null;
+  }
+
+  return (
+    <>
+      {/* Backdrop */}
+      <Box
+        position="fixed"
+        top="0"
+        left="0"
+        right="0"
+        bottom="0"
+        style={{
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          zIndex: 999,
+        }}
+        onClick={onClose}
+      />
+
+      {/* Sidebar */}
+      <Box
+        position="fixed"
+        top="0"
+        right="0"
+        minWidth="400px"
+        maxWidth="50vw"
+        height="100vh"
+        style={{
+          backgroundColor: '#1a1a1a',
+          borderLeft: '1px solid #333333',
+          zIndex: 1000,
+          boxShadow: '-4px 0 8px rgba(0, 0, 0, 0.3)',
+        }}
+      >
+        <Flex p="4" direction="column" height="100vh">
+          <Flex justify="between" align="center" mb="4">
+            <Box />
+            <Button
+              variant="ghost"
+              size="2"
+              onClick={onClose}
+              style={{ padding: '4px' }}
+            >
+              <Cross2Icon width="16" height="16" />
+            </Button>
+          </Flex>
+
+          <ScrollArea style={{ flex: 1 }}>
+            <Box pr="4">{renderDetails()}</Box>
+          </ScrollArea>
+        </Flex>
+      </Box>
+    </>
+  );
+};