Merge branch 'master' into fix-interval-filter-logic

frontend/src/globals.d.ts

@@ -6,7 +6,6 @@ declare global {
         JS_POSTHOG_API_KEY?: string
         JS_POSTHOG_HOST?: string
         JS_POSTHOG_SELF_CAPTURE?: boolean
-        JS_MAPLIBRE_STYLE_URL?: string
         JS_CAPTURE_TIME_TO_SEE_DATA?: boolean
         JS_KEA_VERBOSE_LOGGING?: boolean
         posthog?: posthog

frontend/src/lib/components/Map/Map.stories.tsx

@@ -1,31 +1,22 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { Marker } from 'maplibre-gl'
 
-import { Map, MapComponent } from './Map'
+import { Map } from './Map'
+
+const coordinates: [number, number] = [0.119167, 52.205276]
 
 const meta: Meta<typeof Map> = {
     title: 'Components/Map',
     component: Map,
     tags: ['autodocs'],
-}
-type Story = StoryObj<typeof Map>
-
-const coordinates: [number, number] = [0.119167, 52.205276]
-
-export const Unavailable: Story = {}
-
-export const Basic: Story = {
-    render: (args) => (
-        <MapComponent
-            mapLibreStyleUrl="" // TODO: set this value for the publish storybook and visual regression tests
-            {...args}
-        />
-    ),
+    // :TRICKY: We can't use markers in Storybook stories, as the Marker class is
+    // not JSON-serializable (circular structure).
     args: {
         center: coordinates,
-        markers: [new Marker({ color: 'var(--primary)' }).setLngLat(coordinates)],
         className: 'h-60',
     },
 }
+type Story = StoryObj<typeof Map>
+
+export const Basic: Story = {}
 
 export default meta

frontend/src/lib/components/Map/Map.tsx

@@ -1,9 +1,23 @@
 import { useEffect, useRef } from 'react'
-import { Map as RawMap, Marker } from 'maplibre-gl'
+import { useValues } from 'kea'
+import maplibregl, { Map as RawMap, Marker } from 'maplibre-gl'
+import { Protocol } from 'pmtiles'
+import layers from 'protomaps-themes-base'
 import useResizeObserver from 'use-resize-observer'
 
 import 'maplibre-gl/dist/maplibre-gl.css'
 
+import { themeLogic } from '~/layout/navigation-3000/themeLogic'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+
+const protocol = new Protocol()
+maplibregl.addProtocol('pmtiles', protocol.tile)
+
+const BASE_URL = 'https://posthog-prod-maps.s3.us-east-1.amazonaws.com'
+// :TRICKY: The URL absolutely needs to be prefixed with `pmtiles://` to work!
+const PMTILES_URL = `pmtiles://${BASE_URL}/20230913.pmtiles`
+const GLYPH_URL = `${BASE_URL}/fonts/pbf/{fontstack}/{range}.pbf`
+
 /** Latitude and longtitude in degrees (+lat is east, -lat is west, +lon is south, -lon is north). */
 export interface MapProps {
     /** Coordinates to center the map on by default. */
@@ -12,34 +26,45 @@ export interface MapProps {
     markers?: Marker[]
     /** Map container class names. */
     className?: string
-    /** The map's MapLibre style. This must be a JSON object conforming to the schema described in the MapLibre Style Specification, or a URL to such JSON. */
-    mapLibreStyleUrl: string
 }
 
-export function Map({ className, ...rest }: Omit<MapProps, 'mapLibreStyleUrl'>): JSX.Element {
-    if (!window.JS_MAPLIBRE_STYLE_URL) {
+export function Map({ className, ...rest }: MapProps): JSX.Element {
+    const { isCloudOrDev } = useValues(preflightLogic)
+
+    if (!isCloudOrDev) {
         return (
             <div className={`w-full h-full flex flex-col items-center justify-center text-muted p-3 ${className}`}>
                 <h1>Map unavailable</h1>
-                <p>
-                    The <code>MAPLIBRE_STYLE_URL</code> setting is not defined. Please configure this setting with a
-                    valid MapLibre Style URL to display maps.
-                </p>
+                <p>The map is currently only available in cloud deployments.</p>
             </div>
         )
     }
 
-    return <MapComponent mapLibreStyleUrl={window.JS_MAPLIBRE_STYLE_URL} className={className} {...rest} />
+    return <MapComponent className={className} {...rest} />
 }
 
-export function MapComponent({ center, markers, className, mapLibreStyleUrl }: MapProps): JSX.Element {
+export function MapComponent({ center, markers, className }: MapProps): JSX.Element {
     const mapContainer = useRef<HTMLDivElement>(null)
     const map = useRef<RawMap | null>(null)
 
+    const { isDarkModeOn } = useValues(themeLogic)
+
     useEffect(() => {
         map.current = new RawMap({
             container: mapContainer.current as HTMLElement,
-            style: mapLibreStyleUrl,
+            style: {
+                version: 8,
+                glyphs: GLYPH_URL,
+                sources: {
+                    protomaps: {
+                        type: 'vector',
+                        url: PMTILES_URL,
+                        attribution:
+                            '<a href="https://protomaps.com">Protomaps</a> © <a href="https://openstreetmap.org">OpenStreetMap</a>',
+                    },
+                },
+                layers: layers('protomaps', isDarkModeOn ? 'dark' : 'light'),
+            },
             center,
             zoom: 4,
             maxZoom: 10,

frontend/src/lib/lemon-ui/LemonTable/TableRow.tsx

@@ -56,6 +56,7 @@ function TableRowRaw<T extends Record<string, any>>({
                 className={clsx(
                     rowClassNameDetermined,
                     rowStatusDetermined && `LemonTable__row--status-${rowStatusDetermined}`,
+                    extraProps?.onClick ? 'hover:underline cursor-pointer hover:bg-primary-highlight' : undefined,
                     className
                 )}
                 // eslint-disable-next-line react/forbid-dom-props

frontend/src/queries/nodes/DataTable/DataTable.tsx

@@ -559,6 +559,7 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
                                     (response as any).result.length > 0 ||
                                     !responseLoading) && <LoadNext query={query.source} />
                             }
+                            onRow={context?.rowProps}
                         />
                     )}
                     {/* TODO: this doesn't seem like the right solution... */}

frontend/src/queries/types.ts

@@ -1,5 +1,5 @@
 import { InsightLogicProps } from '~/types'
-import { ComponentType } from 'react'
+import { ComponentType, HTMLProps } from 'react'
 import { DataTableNode } from '~/queries/schema'
 
 /** Pass custom metadata to queries. Used for e.g. custom columns in the DataTable. */
@@ -14,6 +14,7 @@ export interface QueryContext {
     insightProps?: InsightLogicProps
     emptyStateHeading?: string
     emptyStateDetail?: string
+    rowProps?: (record: unknown) => Omit<HTMLProps<HTMLTableRowElement>, 'key'>
 }
 
 export type QueryContextColumnTitleComponent = ComponentType<{

frontend/src/scenes/PreflightCheck/preflightLogic.tsx

@@ -253,6 +253,12 @@ export const preflightLogic = kea<preflightLogicType>([
                 }))
             },
         ],
+        isCloudOrDev: [
+            (s) => [s.preflight],
+            (preflight): boolean | undefined => {
+                return preflight?.cloud || preflight?.is_debug
+            },
+        ],
     }),
     listeners(({ values, actions }) => ({
         handlePreflightFinished: () => {

frontend/src/scenes/notebooks/Notebook/Notebook.scss

@@ -138,7 +138,7 @@
         }
     }
 
-    &--compact {
+    &--compact:not(.Notebook--canvas) {
         .NotebookEditor {
             max-width: 800px;
         }

frontend/src/scenes/persons/PersonFeedCanvas.tsx

@@ -1,12 +1,17 @@
+import { useValues } from 'kea'
+
 import { PersonType } from '~/types'
 import { Notebook } from 'scenes/notebooks/Notebook/Notebook'
 import { uuid } from 'lib/utils'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 
 type PersonFeedCanvasProps = {
     person: PersonType
 }
 
 const PersonFeedCanvas = ({ person }: PersonFeedCanvasProps): JSX.Element => {
+    const { isCloudOrDev } = useValues(preflightLogic)
+
     const id = person.id
 
     const personId = person.distinct_ids[0]
@@ -32,10 +37,14 @@ const PersonFeedCanvas = ({ person }: PersonFeedCanvasProps): JSX.Element => {
                                     type: 'ph-person',
                                     attrs: { id: personId, nodeId: uuid(), title: 'Info' },
                                 },
-                                {
-                                    type: 'ph-map',
-                                    attrs: { id: personId, nodeId: uuid() },
-                                },
+                                ...(isCloudOrDev
+                                    ? [
+                                          {
+                                              type: 'ph-map',
+                                              attrs: { id: personId, nodeId: uuid() },
+                                          },
+                                      ]
+                                    : []),
                                 {
                                     type: 'ph-properties',
                                     attrs: { id: personId, nodeId: uuid() },

frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx

@@ -1,5 +1,4 @@
-import { LemonButton, LemonInput, LemonSelect, LemonCheckbox } from '@posthog/lemon-ui'
-import { Tooltip } from 'antd'
+import { LemonButton, LemonInput, LemonSelect, LemonCheckbox, Tooltip } from '@posthog/lemon-ui'
 import { useValues, useActions } from 'kea'
 import {
     IconInfo,
@@ -17,6 +16,7 @@ import { IconWindow } from 'scenes/session-recordings/player/icons'
 import { playerSettingsLogic } from '../playerSettingsLogic'
 import { SessionRecordingPlayerMode, sessionRecordingPlayerLogic } from '../sessionRecordingPlayerLogic'
 import { playerInspectorLogic } from './playerInspectorLogic'
+import { InspectorSearchInfo } from './components/InspectorSearchInfo'
 
 const TabToIcon = {
     [SessionRecordingPlayerTab.ALL]: undefined,
@@ -88,6 +88,11 @@ export function PlayerInspectorControls(): JSX.Element {
                         type="search"
                         value={searchQuery}
                         fullWidth
+                        suffix={
+                            <Tooltip title={<InspectorSearchInfo />}>
+                                <IconInfo />
+                            </Tooltip>
+                        }
                     />
                 </div>
                 {windowIds.length > 1 ? (

frontend/src/scenes/session-recordings/player/inspector/components/InspectorSearchInfo.tsx

@@ -0,0 +1,92 @@
+export function InspectorSearchInfo(): JSX.Element {
+    return (
+        <>
+            Searching is "fuzzy" by default meaning that it will try and match many properties that are <i>close</i> to
+            the search query.
+            <br />
+            <table>
+                <thead>
+                    <tr>
+                        <th>Token</th>
+                        <th>Match type</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <code>jscript</code>
+                        </td>
+                        <td>fuzzy-match</td>
+                        <td>
+                            Items that fuzzy match <code>jscript</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <code>=scheme</code>
+                        </td>
+                        <td>exact-match</td>
+                        <td>
+                            Items that are <code>scheme</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <code>'python</code>
+                        </td>
+                        <td>include-match</td>
+                        <td>
+                            Items that include <code>python</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <code>!ruby</code>
+                        </td>
+                        <td>inverse-exact-match</td>
+                        <td>
+                            Items that do not include <code>ruby</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <code>^java</code>
+                        </td>
+                        <td>prefix-exact-match</td>
+                        <td>
+                            Items that start with <code>java</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <code>!^earlang</code>
+                        </td>
+                        <td>inverse-prefix-exact-match</td>
+                        <td>
+                            Items that do not start with <code>earlang</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <code>.js$</code>
+                        </td>
+                        <td>suffix-exact-match</td>
+                        <td>
+                            Items that end with <code>.js</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <code>!.go$</code>
+                        </td>
+                        <td>inverse-suffix-exact-match</td>
+                        <td>
+                            Items that do not end with <code>.go</code>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </>
+    )
+}

frontend/src/scenes/session-recordings/player/inspector/playerInspectorLogic.ts

@@ -713,6 +713,7 @@ export const playerInspectorLogic = kea<playerInspectorLogicType>([
                     findAllMatches: true,
                     ignoreLocation: true,
                     shouldSort: false,
+                    useExtendedSearch: true,
                 }),
         ],