feat(insights): sourced person queries

frontend/src/lib/components/CommandPalette/commandPaletteLogic.tsx

@@ -246,7 +246,7 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>({
                                 display: `View person ${input}`,
                                 executor: () => {
                                     const { push } = router.actions
-                                    push(urls.person(person.distinct_ids[0]))
+                                    push(urls.personDistinctId(person.distinct_ids[0]))
                                 },
                             },
                         ],

frontend/src/lib/components/HogQLEditor/HogQLEditor.tsx

@@ -9,6 +9,7 @@ import { hogQLEditorLogic } from './hogQLEditorLogic'
 export interface HogQLEditorProps {
     onChange: (value: string) => void
     value: string | undefined
+    hogQLTable?: string
     disablePersonProperties?: boolean
     disableAutoFocus?: boolean
     disableCmdEnter?: boolean
@@ -20,6 +21,7 @@ let uniqueNode = 0
 export function HogQLEditor({
     onChange,
     value,
+    hogQLTable,
     disablePersonProperties,
     disableAutoFocus,
     disableCmdEnter,
@@ -28,7 +30,7 @@ export function HogQLEditor({
 }: HogQLEditorProps): JSX.Element {
     const [key] = useState(() => `HogQLEditor.${uniqueNode++}`)
     const textareaRef = useRef<HTMLTextAreaElement | null>(null)
-    const logic = hogQLEditorLogic({ key, value, onChange, textareaRef })
+    const logic = hogQLEditorLogic({ key, value, onChange, hogQLTable, textareaRef })
     const { localValue, error, responseLoading } = useValues(logic)
     const { setLocalValue, submit } = useActions(logic)
 
@@ -53,7 +55,9 @@ export function HogQLEditor({
                 maxRows={6}
                 placeholder={
                     placeholder ??
-                    (disablePersonProperties
+                    (hogQLTable === 'persons'
+                        ? "Enter HogQL expression, such as:\n- properties.$geoip_country_name\n- toInt(properties.$browser_version) * 10\n- concat(properties.name, ' <', properties.email, '>')\n- is_identified ? 'user' : 'anon'"
+                        : disablePersonProperties
                         ? "Enter HogQL expression, such as:\n- properties.$current_url\n- toInt(properties.`Long Field Name`) * 10\n- concat(event, ' ', distinct_id)\n- if(1 < 2, 'small', 'large')"
                         : "Enter HogQL Expression, such as:\n- properties.$current_url\n- person.properties.$geoip_country_name\n- toInt(properties.`Long Field Name`) * 10\n- concat(event, ' ', distinct_id)\n- if(1 < 2, 'small', 'large')")
                 }

frontend/src/lib/components/HogQLEditor/hogQLEditorLogic.ts

@@ -9,6 +9,7 @@ import React from 'react'
 export interface HogQLEditorLogicProps {
     key: string
     value: string | undefined
+    hogQLTable?: string
     onChange: (value: string) => void
     textareaRef?: React.MutableRefObject<HTMLTextAreaElement | null>
 }
@@ -32,6 +33,7 @@ export const hogQLEditorLogic = kea<hogQLEditorLogicType>([
                     const response = await query<HogQLMetadata>({
                         kind: NodeKind.HogQLMetadata,
                         expr: values.localValue,
+                        table: props.hogQLTable || 'events',
                     })
                     breakpoint()
                     if (response && Array.isArray(response.errors) && response.errors.length > 0) {

frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx

@@ -17,6 +17,7 @@ interface PropertyFiltersProps {
     disablePopover?: boolean
     style?: CSSProperties
     taxonomicGroupTypes?: TaxonomicFilterGroupType[]
+    hogQLTable?: string
     showNestedArrow?: boolean
     eventNames?: string[]
     logicalRowDivider?: boolean
@@ -36,6 +37,7 @@ export function PropertyFilters({
     showConditionBadge = false,
     disablePopover = false, // use bare PropertyFilter without popover
     taxonomicGroupTypes,
+    hogQLTable,
     style = {},
     showNestedArrow = false,
     eventNames = [],
@@ -88,6 +90,7 @@ export function PropertyFilters({
                                             onComplete={onComplete}
                                             orFiltering={orFiltering}
                                             taxonomicGroupTypes={taxonomicGroupTypes}
+                                            hogQLTable={hogQLTable}
                                             eventNames={eventNames}
                                             propertyGroupType={propertyGroupType}
                                             disablePopover={disablePopover || orFiltering}

frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx

@@ -38,6 +38,7 @@ export function TaxonomicPropertyFilter({
     orFiltering,
     addText = 'Add filter',
     hasRowOperator,
+    hogQLTable,
 }: PropertyFilterInternalProps): JSX.Element {
     const pageKey = useMemo(() => pageKeyInput || `filter-${uniqueMemoizedIndex++}`, [pageKeyInput])
     const groupTypes = taxonomicGroupTypes || [
@@ -98,6 +99,7 @@ export function TaxonomicPropertyFilter({
             value={cohortOrOtherValue}
             onChange={taxonomicOnChange}
             taxonomicGroupTypes={groupTypes}
+            hogQLTable={hogQLTable}
             eventNames={eventNames}
         />
     )

frontend/src/lib/components/PropertyFilters/types.ts

@@ -41,4 +41,5 @@ export interface PropertyFilterInternalProps {
     orFiltering?: boolean
     addText?: string | null
     hasRowOperator?: boolean
+    hogQLTable?: string
 }

frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx

@@ -60,7 +60,11 @@ export function InfiniteSelectResults({
     const RenderComponent = activeTaxonomicGroup?.render
 
     const listComponent = RenderComponent ? (
-        <RenderComponent value={value} onChange={(newValue) => selectItem(activeTaxonomicGroup, newValue, newValue)} />
+        <RenderComponent
+            {...(activeTaxonomicGroup?.componentProps ?? {})}
+            value={value}
+            onChange={(newValue) => selectItem(activeTaxonomicGroup, newValue, newValue)}
+        />
     ) : (
         <InfiniteList />
     )

frontend/src/lib/components/TaxonomicFilter/InlineHogQLEditor.tsx

@@ -4,14 +4,16 @@ import { HogQLEditor } from 'lib/components/HogQLEditor/HogQLEditor'
 export interface InlineHogQLEditorProps {
     value?: TaxonomicFilterValue
     onChange: (value: TaxonomicFilterValue) => void
+    hogQLTable?: string
 }
 
-export function InlineHogQLEditor({ value, onChange }: InlineHogQLEditorProps): JSX.Element {
+export function InlineHogQLEditor({ value, onChange, hogQLTable }: InlineHogQLEditorProps): JSX.Element {
     return (
         <div className="px-2">
             <HogQLEditor
                 onChange={onChange}
                 value={String(value ?? '')}
+                hogQLTable={hogQLTable}
                 submitText={value ? 'Update HogQL expression' : 'Add HogQL expression'}
                 disableAutoFocus // :TRICKY: No autofocus here. It's controlled in the TaxonomicFilter.
             />

frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx

@@ -29,6 +29,7 @@ export function TaxonomicFilter({
     excludedProperties,
     popoverEnabled = true,
     selectFirstItem = true,
+    hogQLTable = 'events',
 }: TaxonomicFilterProps): JSX.Element {
     // Generate a unique key for each unique TaxonomicFilter that's rendered
     const taxonomicFilterLogicKey = useMemo(
@@ -50,8 +51,8 @@ export function TaxonomicFilter({
         popoverEnabled,
         selectFirstItem,
         excludedProperties,
+        hogQLTable,
     }
-
     const logic = taxonomicFilterLogic(taxonomicFilterLogicProps)
     const { searchQuery, searchPlaceholder, activeTab } = useValues(logic)
     const { setSearchQuery, moveUp, moveDown, tabLeft, tabRight, selectSelected } = useActions(logic)

frontend/src/lib/components/TaxonomicFilter/taxonomicFilterLogic.tsx

@@ -136,6 +136,7 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>({
             (taxonomicFilterLogicKey) => taxonomicFilterLogicKey,
         ],
         eventNames: [() => [(_, props) => props.eventNames], (eventNames) => eventNames ?? []],
+        hogQLTable: [() => [(_, props) => props.hogQLTable], (hogQLTable) => hogQLTable ?? 'events'],
         excludedProperties: [
             () => [(_, props) => props.excludedProperties],
             (excludedProperties) => excludedProperties ?? {},
@@ -146,16 +147,18 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>({
                 s.groupAnalyticsTaxonomicGroups,
                 s.groupAnalyticsTaxonomicGroupNames,
                 s.eventNames,
+                s.hogQLTable,
                 s.excludedProperties,
             ],
             (
                 teamId,
                 groupAnalyticsTaxonomicGroups,
                 groupAnalyticsTaxonomicGroupNames,
                 eventNames,
+                hogQLTable,
                 excludedProperties
             ): TaxonomicFilterGroup[] => {
-                const groups = [
+                const groups: TaxonomicFilterGroup[] = [
                     {
                         name: 'Events',
                         searchPlaceholder: 'events',
@@ -429,6 +432,7 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>({
                         type: TaxonomicFilterGroupType.HogQLExpression,
                         render: InlineHogQLEditor,
                         getPopoverHeader: () => 'HogQL',
+                        componentProps: { hogQLTable },
                     },
                     ...groupAnalyticsTaxonomicGroups,
                     ...groupAnalyticsTaxonomicGroupNames,

frontend/src/lib/components/TaxonomicFilter/types.ts

@@ -21,6 +21,7 @@ export interface TaxonomicFilterProps {
     selectFirstItem?: boolean
     /** use to filter results in a group by name, currently only working for EventProperties */
     excludedProperties?: { [key in TaxonomicFilterGroupType]?: TaxonomicFilterValue[] }
+    hogQLTable?: string
 }
 
 export interface TaxonomicFilterLogicProps extends TaxonomicFilterProps {
@@ -56,6 +57,7 @@ export interface TaxonomicFilterGroup {
     groupTypeIndex?: number
     getFullDetailUrl?: (instance: any) => string
     excludedProperties?: string[]
+    componentProps?: Record<string, any>
 }
 
 export enum TaxonomicFilterGroupType {

frontend/src/lib/components/TaxonomicPopover/TaxonomicPopover.tsx

@@ -20,6 +20,7 @@ export interface TaxonomicPopoverProps<ValueType extends TaxonomicFilterValue =
     allowClear?: boolean
     style?: React.CSSProperties
     excludedProperties?: { [key in TaxonomicFilterGroupType]?: TaxonomicFilterValue[] }
+    hogQLTable?: string
 }
 
 /** Like TaxonomicPopover, but convenient when you know you will only use string values */
@@ -45,6 +46,7 @@ export function TaxonomicPopover<ValueType extends TaxonomicFilterValue = Taxono
     placeholderClass = 'text-muted',
     allowClear = false,
     excludedProperties,
+    hogQLTable,
     ...buttonPropsRest
 }: TaxonomicPopoverProps<ValueType>): JSX.Element {
     const [localValue, setLocalValue] = useState<ValueType>(value || ('' as ValueType))
@@ -85,6 +87,7 @@ export function TaxonomicPopover<ValueType extends TaxonomicFilterValue = Taxono
                         }}
                         taxonomicGroupTypes={groupTypes ?? [groupType]}
                         eventNames={eventNames}
+                        hogQLTable={hogQLTable}
                         excludedProperties={excludedProperties}
                     />
                 }

frontend/src/lib/components/UniversalSearch/UniversalSearchPopover.tsx

@@ -91,7 +91,7 @@ function redirectOnSelectItems(
     } else if (groupType === TaxonomicFilterGroupType.Cohorts) {
         router.actions.push(urls.cohort(value))
     } else if (groupType === TaxonomicFilterGroupType.Persons) {
-        router.actions.push(urls.person(String(value)))
+        router.actions.push(urls.personDistinctId(String(value)))
     } else if (groupType.startsWith(TaxonomicFilterGroupType.GroupNamesPrefix)) {
         router.actions.push(urls.group((item as Group).group_type_index, String(value)))
     } else if (groupType === TaxonomicFilterGroupType.Insights) {

frontend/src/lib/lemon-ui/icons/icons.tsx

@@ -1310,6 +1310,17 @@ export function IconQueryEditor(props: LemonIconProps): JSX.Element {
     )
 }
 
+// https://pictogrammers.com/library/mdi/icon/database-eye/
+export function IconQueryEye(props: LemonIconProps): JSX.Element {
+    return (
+        <LemonIconBase {...props}>
+            <path
+                fill="currentColor"
+                d="M4 12V9C4 11.2 7.6 13 12 13S20 11.2 20 9V12C20 12.5 19.8 12.9 19.5 13.4C18.7 13.1 17.9 13 17 13C14.5 13 12.1 14.1 10.6 15.9C6.8 15.6 4 14 4 12M12 11C16.4 11 20 9.2 20 7S16.4 3 12 3 4 4.8 4 7 7.6 11 12 11M9.1 19.7L8.8 19L9.1 18.3C9.2 18.1 9.3 18 9.3 17.8C6.2 17.2 4 15.8 4 14V17C4 18.8 6.4 20.3 9.7 20.8C9.5 20.5 9.3 20.1 9.1 19.7M17 18C16.4 18 16 18.4 16 19S16.4 20 17 20 18 19.6 18 19 17.6 18 17 18M23 19C22.1 21.3 19.7 23 17 23S11.9 21.3 11 19C11.9 16.7 14.3 15 17 15S22.1 16.7 23 19M19.5 19C19.5 17.6 18.4 16.5 17 16.5S14.5 17.6 14.5 19 15.6 21.5 17 21.5 19.5 20.4 19.5 19Z"
+            />
+        </LemonIconBase>
+    )
+}
 /** Material Design Auto Awesome icon. */
 export function IconAutoAwesome(props: LemonIconProps): JSX.Element {
     return (

frontend/src/queries/nodes/DataNode/dataNodeLogic.ts

@@ -442,6 +442,12 @@ export const dataNodeLogic = kea<dataNodeLogicType>([
                 return response && 'timings' in response ? response.timings : null
             },
         ],
+        responseHogQL: [
+            (s) => [s.response],
+            (response): string | null => {
+                return response && 'hogql' in response && typeof response.hogql === 'string' ? response.hogql : null
+            },
+        ],
     }),
     listeners(({ actions, values, cache }) => ({
         abortAnyRunningQuery: () => {

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

@@ -11,7 +11,7 @@ import { columnConfiguratorLogic, ColumnConfiguratorLogicProps } from './columnC
 import { defaultDataTableColumns, extractExpressionComment, removeExpressionComment } from '../utils'
 import { DataTableNode, NodeKind } from '~/queries/schema'
 import { LemonModal } from 'lib/lemon-ui/LemonModal'
-import { isEventsQuery, taxonomicFilterToHogQl, trimQuotes } from '~/queries/utils'
+import { isEventsQuery, taxonomicEventFilterToHogQl, trimQuotes } from '~/queries/utils'
 import { TaxonomicFilter } from 'lib/components/TaxonomicFilter/TaxonomicFilter'
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
 import { PropertyFilterIcon } from 'lib/components/PropertyFilters/components/PropertyFilterIcon'
@@ -166,7 +166,7 @@ function ColumnConfiguratorModal({ query }: ColumnConfiguratorProps): JSX.Elemen
                                         ]}
                                         value={undefined}
                                         onChange={(group, value) => {
-                                            const column = taxonomicFilterToHogQl(group.type, value)
+                                            const column = taxonomicEventFilterToHogQl(group.type, value)
                                             if (column !== null) {
                                                 selectColumn(column)
                                             }