add matching events icon

frontend/src/lib/components/ExpandIcon.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import clsx from 'clsx'
+
+// Imitates how Antd renders the expand icon
+// https://github.com/ant-design/ant-design/blob/master/components/table/ExpandIcon.tsx
+
+interface ExpandIconProps {
+    prefixCls: string
+    onExpand: (record: any, e: React.MouseEvent<HTMLElement>) => void
+    record: any
+    expanded: boolean
+    expandable: boolean
+    children?: JSX.Element
+}
+
+function ExpandIcon({ prefixCls, onExpand, record, expanded, expandable, children }: ExpandIconProps): JSX.Element {
+    console.log('Record', record)
+    const iconPrefix = `${prefixCls}-row-expand-icon`
+    return (
+        <div
+            onClick={(e) => {
+                onExpand(record, e!)
+                e.stopPropagation()
+            }}
+        >
+            <button
+                type="button"
+                className={clsx(iconPrefix, {
+                    [`${iconPrefix}-spaced`]: !expandable,
+                    [`${iconPrefix}-expanded`]: expandable && expanded,
+                    [`${iconPrefix}-collapsed`]: expandable && !expanded,
+                })}
+                aria-label={expanded ? 'Collapse row' : 'Expand row'}
+            />
+            {children}
+        </div>
+    )
+}
+
+export default ExpandIcon

frontend/src/lib/components/ResizableTable/index.scss

@@ -38,7 +38,6 @@
 
     .left-spacer {
         background: rgb(250, 250, 250);
-        border-right: 1px solid #f0f0f0;
         border-bottom: 1px solid #f0f0f0;
         flex-grow: 0;
         flex-shrink: 0;

frontend/src/lib/components/ResizableTable/index.tsx

@@ -31,7 +31,7 @@ export interface InternalColumnType<RecordType> extends ResizableColumnType<Reco
 
 export type ResizeHandler = Exclude<ResizableProps['onResize'], undefined>
 
-export const ANTD_EXPAND_BUTTON_WIDTH = 48
+export const ANTD_EXPAND_BUTTON_WIDTH = 80
 
 interface ResizableTableProps<RecordType> extends TableProps<RecordType> {
     columns: ResizableColumnType<RecordType>[]

frontend/src/lib/components/icons.tsx

@@ -114,6 +114,19 @@ export function IconEvents(): JSX.Element {
     )
 }
 
+export function IconEventsShort({ size = 32 }: { size: number }): JSX.Element {
+    return (
+        <svg width={size} height={size} viewBox={`0 0 32 32`} fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M15.882 4L5.366 9.455l10.607 4.787 10.412-4.858L15.883 4zM5.333 17.038l4.79-2.475 5.785 2.496 5.496-2.514 4.948 2.433-10.412 4.857-10.607-4.797zm.314 7.23l4.226-2.192 6.024 2.578 6.14-2.829 4.63 2.369-10.429 4.86-10.59-4.786z"
+                fill="currentColor"
+            />
+        </svg>
+    )
+}
+
 export function IconActions(): JSX.Element {
     return (
         <svg width="1em" height="1em" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">

frontend/src/lib/utils.tsx

@@ -33,13 +33,6 @@ export function isObjectEmpty(obj: Record<string, any>): boolean {
     return obj && Object.keys(obj).length === 0 && obj.constructor === Object
 }
 
-// Builds url with base + search params + hash params
-export function buildUrl(base: string, searchParams: Record<string, any>, hashParams: Record<string, any>): string {
-    const search = !isObjectEmpty(searchParams) ? `?${toParams(searchParams)}` : ''
-    const hash = !isObjectEmpty(hashParams) ? `#${toParams(hashParams)}` : ''
-    return `${base.replace(/\/$/, '')}${search}${hash}`
-}
-
 export function toParams(obj: Record<string, any>): string {
     function handleVal(val: any): string {
         if (dayjs.isDayjs(val)) {

frontend/src/scenes/events/eventsTableLogic.js

@@ -155,16 +155,6 @@ export const eventsTableLogic = kea({
     }),
 
     selectors: ({ selectors, props }) => ({
-        propertiesForUrl: [
-            () => [selectors.properties],
-            (properties) => {
-                if (Object.keys(properties).length > 0) {
-                    return { properties }
-                } else {
-                    return ''
-                }
-            },
-        ],
         eventsFormatted: [
             () => [selectors.events, selectors.newEvents],
             (events, newEvents) => formatEvents(events, newEvents, props.apiUrl),

frontend/src/scenes/persons/PersonsTable.tsx

@@ -1,5 +1,6 @@
 import React, { useRef } from 'react'
 import { Button } from 'antd'
+import { combineUrl } from 'kea-router'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { TZLabel } from 'lib/components/TimezoneAware'
@@ -9,7 +10,7 @@ import { PersonsTabType, PersonType, SessionsPropertyFilter } from '~/types'
 import { ArrowRightOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons'
 import './Persons.scss'
 import { CopyToClipboardInline } from 'lib/components/CopyToClipboard'
-import { buildUrl, midEllipsis } from 'lib/utils'
+import { midEllipsis } from 'lib/utils'
 import { PersonHeader } from './PersonHeader'
 import { ResizableColumnType, ResizableTable } from 'lib/components/ResizableTable'
 
@@ -41,15 +42,15 @@ export function PersonsTable({
     date = undefined,
 }: PersonsTableType): JSX.Element {
     const deepLinkToPersonSessions = (person: PersonType): string =>
-        buildUrl(
+        combineUrl(
             `/person/${encodeURIComponent(person.distinct_ids[0])}`,
             { filters: sessionsFilters, date },
             {
                 backTo,
                 backToURL: window.location.pathname + window.location.search + window.location.hash,
                 activeTab: backTo === 'Insights' ? PersonsTabType.SESSIONS : PersonsTabType.EVENTS,
             }
-        )
+        ).url
 
     const topRef = useRef<HTMLSpanElement>(null)
 

frontend/src/scenes/sessions/Sessions.scss

@@ -192,11 +192,28 @@
     }
 }
 
-.sessions-event-highlighted,
-.sessions-highlighted {
+.sessions-event-highlighted {
     background-color: #fdedc9;
 }
 
+.sessions-matching-events-icon {
+    color: $bg_navy;
+
+    .badge-text {
+        background-color: $yellow_50;
+        height: 1.15rem;
+        min-width: 1.15rem;
+        line-height: 1.15rem;
+        font-weight: 600;
+        white-space: nowrap;
+        text-align: center;
+        border-radius: 10px;
+        box-shadow: 0 0 0 2px $bg_light;
+        padding: 0 4px;
+        font-size: 10px;
+    }
+}
+
 @media (max-width: $md) {
     .sessions-wrapper {
         display: block;

frontend/src/scenes/sessions/SessionsView.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useValues, useActions, BindLogic } from 'kea'
-import { Button, Spin, Space, Tooltip } from 'antd'
+import { Button, Spin, Space, Tooltip, Badge } from 'antd'
 import { Link } from 'lib/components/Link'
 import { sessionsTableLogic } from 'scenes/sessions/sessionsTableLogic'
 import { humanFriendlyDuration, humanFriendlyDetailedTime, stripHTTP } from '~/lib/utils'
@@ -28,6 +28,8 @@ import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs'
 import generatePicker from 'antd/es/date-picker/generatePicker'
 import { ResizableTable, ResizableColumnType } from 'lib/components/ResizableTable'
 import { teamLogic } from 'scenes/teamLogic'
+import { IconEventsShort } from 'lib/components/icons'
+import ExpandIcon from 'lib/components/ExpandIcon'
 
 const DatePicker = generatePicker<dayjs.Dayjs>(dayjsGenerateConfig)
 
@@ -61,7 +63,6 @@ export function SessionsView({ personIds, isPersonPage = false }: SessionsTableP
         properties,
         sessionRecordingId,
         firstRecordingId,
-        defaultExpandedSessions,
     } = useValues(logic)
     const { fetchNextSessions, previousDay, nextDay, setFilters, applyFilters } = useActions(logic)
     const { currentTeam } = useValues(teamLogic)
@@ -229,7 +230,27 @@ export function SessionsView({ personIds, isPersonPage = false }: SessionsTableP
                     expandedRowRender: function renderExpand(session) {
                         return <SessionDetails key={session.global_session_id} session={session} />
                     },
-                    expandedRowKeys: defaultExpandedSessions,
+                    expandIcon: function _renderExpandIcon(expandProps) {
+                        const { record: session } = expandProps
+                        return (
+                            <ExpandIcon {...expandProps}>
+                                {session?.matching_events?.length > 0 ? (
+                                    <Tooltip title={`${session.matching_events.length} matching events`}>
+                                        <Badge
+                                            className="sessions-matching-events-icon cursor-pointer"
+                                            count={<span className="badge-text">{session.matching_events.length}</span>}
+                                            offset={[0, 26]}
+                                            size="small"
+                                        >
+                                            <IconEventsShort size={26} />
+                                        </Badge>
+                                    </Tooltip>
+                                ) : (
+                                    <></>
+                                )}
+                            </ExpandIcon>
+                        )
+                    },
                     rowExpandable: () => true,
                     expandRowByClick: true,
                 }}

frontend/src/scenes/sessions/sessionsTableLogic.ts

@@ -120,12 +120,10 @@ export const sessionsTableLogic = kea<sessionsTableLogicType<Params, SessionReco
         ],
         filtersDirty: [
             (selectors) => [selectors.filters, selectors.lastAppliedFilters],
-            (filters, lastFilters): boolean => !equal(filters, lastFilters),
-        ],
-        defaultExpandedSessions: [
-            (selectors) => [selectors.sessions],
-            (sessions: SessionType[]): string[] =>
-                sessions.filter((s) => s?.matching_events?.length > 0).map((s) => s.global_session_id),
+            (filters, lastFilters): boolean => {
+                console.log('FILTERS', filters, lastFilters)
+                return !equal(filters, lastFilters)
+            },
         ],
     },
     listeners: ({ values, actions, props }) => ({

frontend/src/styles/global.scss

@@ -71,6 +71,11 @@ style files without adding already imported styles. */
     font-size: 10px;
 }
 
+.text-xxs {
+    @extend .text-default;
+    font-size: 8px;
+}
+
 .page-title-row {
     margin-top: 16px;
 }

package.json

@@ -53,6 +53,7 @@
         "babel-preset-nano-react-app": "^0.1.0",
         "chartjs-adapter-dayjs": "^1.0.0",
         "chartjs-plugin-crosshair": "^1.1.6",
+        "clsx": "^1.1.1",
         "core-js": "3.6.5",
         "d3": "^5.15.0",
         "d3-sankey": "^0.12.3",

yarn.lock

@@ -3616,7 +3616,7 @@ clone-deep@^4.0.1:
     kind-of "^6.0.2"
     shallow-clone "^3.0.0"
 
-clsx@^1.0.4:
+clsx@^1.0.4, clsx@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==