feat: Add correlation extraction label

src/components/TextWithTooltip.tsx

@@ -0,0 +1,16 @@
+import { useOverflowCheck } from '@/hooks/useOverflowCheck'
+import { Tooltip, Text, TextProps } from '@radix-ui/themes'
+import { useRef } from 'react'
+
+export function TextWithTooltip({ children, ...props }: TextProps) {
+  const ref = useRef<HTMLElement>(null)
+  const isEllipsisActive = useOverflowCheck(ref)
+
+  return (
+    <Tooltip content={children} hidden={!isEllipsisActive} avoidCollisions>
+      <Text {...props} truncate ref={ref}>
+        {children}
+      </Text>
+    </Tooltip>
+  )
+}

src/components/WebLogView/Row.tsx

@@ -14,30 +14,22 @@ export interface RowProps {
   isSelected?: boolean
   onSelectRequest: (data: ProxyDataWithMatches) => void
   filter?: string
-  className?: string
 }
 
-export function Row({
-  data,
-  onSelectRequest,
-  isSelected,
-  filter,
-  className,
-}: RowProps) {
+export function Row({ data, onSelectRequest, isSelected, filter }: RowProps) {
   return (
     <>
-      <Table.Row
-        onClick={() => onSelectRequest(data)}
-        className={className}
-        css={{
-          backgroundColor: isSelected ? 'var(--accent-3)' : 'transparent',
-          '&:hover': {
-            backgroundColor: isSelected ? 'var(--accent-3)' : 'var(--accent-2)',
-          },
-        }}
+      <TableRow
+        data={data}
+        onSelectRequest={onSelectRequest}
+        isSelected={isSelected}
       >
-        <Cells data={data} isSelected={isSelected} />
-      </Table.Row>
+        <MethodCell data={data} isSelected={isSelected} />
+        <StatusCell data={data} />
+        <RequestTypeCell data={data} />
+        <HostCell data={data} />
+        <PathCell data={data} />
+      </TableRow>
 
       <SearchResults
         data={data}
@@ -49,51 +41,87 @@ export function Row({
   )
 }
 
-export function Cells({
+export function TableRow({
+  data,
+  onSelectRequest,
+  isSelected,
+  children,
+}: RowProps & { children: React.ReactNode }) {
+  return (
+    <Table.Row
+      onClick={() => onSelectRequest(data)}
+      css={{
+        backgroundColor: isSelected ? 'var(--accent-3)' : 'transparent',
+        '&:hover': {
+          backgroundColor: isSelected ? 'var(--accent-3)' : 'var(--accent-2)',
+        },
+      }}
+    >
+      {children}
+    </Table.Row>
+  )
+}
+
+export function MethodCell({
   data,
   isSelected,
 }: {
   data: ProxyDataWithMatches
   isSelected?: boolean
 }) {
   return (
-    <>
-      <Table.Cell
+    <Table.Cell
+      css={{
+        cursor: 'var(--cursor-button)',
+        padding: '0',
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      <Box
         css={{
-          cursor: 'var(--cursor-button)',
-          padding: '0',
-          display: 'flex',
-          alignItems: 'center',
+          width: '3px',
+          backgroundColor: isSelected ? 'var(--accent-9)' : 'transparent',
+          height: 'var(--table-cell-min-height)',
+          marginRight: 'var(--space-2)',
         }}
-      >
-        <Box
-          css={{
-            width: '3px',
-            backgroundColor: isSelected ? 'var(--accent-9)' : 'transparent',
-            height: 'var(--table-cell-min-height)',
-            marginRight: 'var(--space-2)',
-          }}
+      />
+      <MethodBadge method={data.request.method}>
+        <HighlightedText text={data.request.method} matches={data.matches} />
+      </MethodBadge>
+    </Table.Cell>
+  )
+}
+
+export function StatusCell({ data }: { data: ProxyDataWithMatches }) {
+  return (
+    <Table.Cell>
+      <ResponseStatusBadge status={data.response?.statusCode}>
+        <HighlightedText
+          text={data.response?.statusCode.toString() ?? '-'}
+          matches={data.matches}
         />
-        <MethodBadge method={data.request.method}>
-          <HighlightedText text={data.request.method} matches={data.matches} />
-        </MethodBadge>
-      </Table.Cell>
+      </ResponseStatusBadge>
+    </Table.Cell>
+  )
+}
 
-      <Table.Cell>
-        <ResponseStatusBadge status={data.response?.statusCode}>
-          <HighlightedText
-            text={data.response?.statusCode.toString() ?? '-'}
-            matches={data.matches}
-          />
-        </ResponseStatusBadge>
-      </Table.Cell>
-      <TableCellWithTooltip>{getRequestType(data)}</TableCellWithTooltip>
-      <TableCellWithTooltip>
-        <HighlightedText text={data.request.host} matches={data.matches} />
-      </TableCellWithTooltip>
-      <TableCellWithTooltip>
-        <HighlightedText text={data.request.path} matches={data.matches} />
-      </TableCellWithTooltip>
-    </>
+export function RequestTypeCell({ data }: { data: ProxyDataWithMatches }) {
+  return <TableCellWithTooltip>{getRequestType(data)}</TableCellWithTooltip>
+}
+
+export function HostCell({ data }: { data: ProxyDataWithMatches }) {
+  return (
+    <TableCellWithTooltip>
+      <HighlightedText text={data.request.host} matches={data.matches} />
+    </TableCellWithTooltip>
+  )
+}
+
+export function PathCell({ data }: { data: ProxyDataWithMatches }) {
+  return (
+    <TableCellWithTooltip>
+      <HighlightedText text={data.request.path} matches={data.matches} />
+    </TableCellWithTooltip>
   )
 }

src/components/WebLogView/SearchResults.tsx

@@ -39,12 +39,10 @@ export function SearchResults({
   data,
   onSelectRequest,
   filter,
-  colSpan = 5,
 }: {
   data: ProxyDataWithMatches
   onSelectRequest: (data: ProxyDataWithMatches) => void
   filter?: string
-  colSpan?: number
 }) {
   const { setTab: setRequestTab } = useRequestDetailsTab()
   const { setTab: setResponseTab } = useResponseDetailsTab()
@@ -105,7 +103,7 @@ export function SearchResults({
 
   return (
     <Table.Row>
-      <Table.Cell colSpan={colSpan}>
+      <Table.Cell colSpan={5}>
         {visibleResults.map((result, excerptIndex) => (
           <Flex
             key={excerptIndex}

src/rules/correlation.ts

@@ -143,10 +143,6 @@ function applyRule({
       ],
 
       count: state.count + 1,
-      matchedRequestIds: [
-        ...state.matchedRequestIds,
-        requestSnippetSchema.data.id,
-      ],
     })
 
     return {

src/views/Generator/GeneratorTabs/RequestListHeader.tsx → src/views/Generator/GeneratorTabs/RequestList/Header.tsx

@@ -4,7 +4,7 @@ import { useGeneratorStore } from '@/store/generator'
 import { getFileNameWithoutExtension } from '@/utils/file'
 import { RecorderIcon } from '@/components/icons'
 
-export function RequestListHeader({
+export function Header({
   filter,
   setFilter,
   filterAllData,

src/views/Generator/GeneratorTabs/RequestList.tsx → src/views/Generator/GeneratorTabs/RequestList/RequestList.tsx

@@ -9,8 +9,8 @@ import { useStudioUIStore } from '@/store/ui'
 import { useGeneratorStore } from '@/store/generator'
 import { EmptyMessage } from '@/components/EmptyMessage'
 import { validateRecording } from './RequestList.utils'
-import { RequestListHeader } from './RequestListHeader'
 import { useApplyRules } from '@/store/hooks/useApplyRules'
+import { Header } from './Header'
 import { RequestTable } from './RequestTable'
 
 interface RequestListProps {
@@ -71,7 +71,7 @@ export function RequestList({
   return (
     <Flex direction="column" height="100%">
       {!recordingError && (
-        <RequestListHeader
+        <Header
           filter={filter}
           setFilter={setFilter}
           filterAllData={filterAllData}
@@ -98,9 +98,7 @@ export function RequestList({
             ListComponent={(props) => (
               <RequestTable
                 {...props}
-                highlightedRequestIds={
-                  selectedRuleInstance?.state?.matchedRequestIds
-                }
+                selectedRuleInstance={selectedRuleInstance}
               />
             )}
           />

src/views/Generator/GeneratorTabs/RequestList.utils.tsx → src/views/Generator/GeneratorTabs/RequestList/RequestList.utils.tsx

@@ -3,7 +3,7 @@ import { ProxyData } from '@/types'
 import { GlobeIcon } from '@radix-ui/react-icons'
 import { Button } from '@radix-ui/themes'
 import { ComponentProps } from 'react'
-import { RecordingSelector } from '../RecordingSelector'
+import { RecordingSelector } from '../../RecordingSelector'
 
 export function validateRecording({
   allowlist,

src/views/Generator/GeneratorTabs/RequestList/RequestRow.tsx

@@ -0,0 +1,60 @@
+import { HighlightedText } from '@/components/HighlightedText'
+import { Table } from '@/components/Table'
+import { TextWithTooltip } from '@/components/TextWithTooltip'
+import {
+  HostCell,
+  MethodCell,
+  RequestTypeCell,
+  RowProps,
+  StatusCell,
+  TableRow,
+} from '@/components/WebLogView'
+import { SearchResults } from '@/components/WebLogView/SearchResults'
+import { RuleInstance } from '@/types/rules'
+import { Flex } from '@radix-ui/themes'
+import { RuleBadges } from './RuleBadges'
+
+export function RequestRow({
+  data,
+  onSelectRequest,
+  isSelected,
+  filter,
+  selectedRuleInstance,
+}: RowProps & { selectedRuleInstance?: RuleInstance }) {
+  return (
+    <>
+      <TableRow
+        data={data}
+        onSelectRequest={onSelectRequest}
+        isSelected={isSelected}
+      >
+        <MethodCell data={data} isSelected={isSelected} />
+        <StatusCell data={data} />
+        <RequestTypeCell data={data} />
+        <HostCell data={data} />
+
+        <Table.Cell css={{ padding: 0 }}>
+          <Flex justify="between" align="center" height="100%" gap="1">
+            <TextWithTooltip size="1">
+              <HighlightedText
+                text={data.request.path}
+                matches={data.matches}
+              />
+            </TextWithTooltip>
+            <RuleBadges
+              selectedRuleInstance={selectedRuleInstance}
+              data={data}
+            />
+          </Flex>
+        </Table.Cell>
+      </TableRow>
+
+      <SearchResults
+        data={data}
+        key={data.id}
+        onSelectRequest={onSelectRequest}
+        filter={filter}
+      />
+    </>
+  )
+}

src/views/Generator/GeneratorTabs/RequestTable.tsx → src/views/Generator/GeneratorTabs/RequestList/RequestTable.tsx

@@ -2,14 +2,15 @@ import { Table } from '@/components/Table'
 
 import { RequestListProps } from '@/components/WebLogView'
 import { RequestRow } from './RequestRow'
+import { RuleInstance } from '@/types/rules'
 
 export function RequestTable({
   requests,
   selectedRequestId,
   onSelectRequest,
   filter,
-  highlightedRequestIds,
-}: RequestListProps & { highlightedRequestIds?: string[] }) {
+  selectedRuleInstance,
+}: RequestListProps & { selectedRuleInstance?: RuleInstance }) {
   return (
     <Table.Root size="1" layout="fixed">
       <Table.Header css={{ textWrap: 'nowrap' }}>
@@ -19,7 +20,6 @@ export function RequestTable({
           <Table.ColumnHeaderCell width="50px">Type</Table.ColumnHeaderCell>
           <Table.ColumnHeaderCell width="20%">Host</Table.ColumnHeaderCell>
           <Table.ColumnHeaderCell width="80%">Path</Table.ColumnHeaderCell>
-          <Table.ColumnHeaderCell width="55px" />
         </Table.Row>
       </Table.Header>
       <Table.Body>
@@ -30,7 +30,7 @@ export function RequestTable({
             isSelected={selectedRequestId === data.id}
             onSelectRequest={onSelectRequest}
             filter={filter}
-            highlightedRequestIds={highlightedRequestIds}
+            selectedRuleInstance={selectedRuleInstance}
           />
         ))}
       </Table.Body>