Skip to content

Commit

Permalink
feat(actors_modal): Added breakdowns and series selectors to the acto…
Browse files Browse the repository at this point in the history 
…rs modal (#19983)

* Added breakdowns and series selectors to the actors modal
* Added compare to the actor modal
* Fixed breakdowns making a bazillon queries

* Repair modal state logic cause loadActors only uses actorsQuery selector
I suppose this was changed at some point. We cannot use the query
argument anymore.

* Adjust the breakdown limit when not hiding other data
* Turn off "Other" breakdown option for modal for now

---------

Co-authored-by: Julian Bez <[email protected]>
  • Loading branch information
@Gilbert09 @webjunkie
Gilbert09 and webjunkie authored Feb 1, 2024
1 parent 09ea762 commit 46ec36c
Show file tree
Hide file tree
Showing 19 changed files with 816 additions and 200 deletions.
130 changes: 130 additions & 0 deletions frontend/src/queries/schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -393,6 +393,9 @@
"enum": ["cohort", "person", "event", "group", "session", "hogql"],
"type": "string"
},
"BreakdownValueInt": {
"type": "integer"
},
"ChartAxis": {
"additionalProperties": false,
"properties": {
Expand Down Expand Up @@ -1912,6 +1915,20 @@
"InsightActorsQuery": {
"additionalProperties": false,
"properties": {
"breakdown": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/BreakdownValueInt"
}
]
},
"compare": {
"enum": ["current", "previous"],
"type": "string"
},
"day": {
"anyOf": [
{
Expand All @@ -1933,6 +1950,9 @@
"response": {
"$ref": "#/definitions/ActorsQueryResponse"
},
"series": {
"type": "integer"
},
"source": {
"$ref": "#/definitions/InsightQuerySource"
},
Expand Down Expand Up @@ -1963,6 +1983,45 @@
"InsightActorsQueryOptionsResponse": {
"additionalProperties": false,
"properties": {
"breakdown": {
"items": {
"additionalProperties": false,
"properties": {
"label": {
"type": "string"
},
"value": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/BreakdownValueInt"
}
]
}
},
"required": ["label", "value"],
"type": "object"
},
"type": "array"
},
"compare": {
"items": {
"additionalProperties": false,
"properties": {
"label": {
"type": "string"
},
"value": {
"type": "string"
}
},
"required": ["label", "value"],
"type": "object"
},
"type": "array"
},
"day": {
"items": {
"additionalProperties": false,
Expand Down Expand Up @@ -2003,6 +2062,22 @@
},
"type": "array"
},
"series": {
"items": {
"additionalProperties": false,
"properties": {
"label": {
"type": "string"
},
"value": {
"type": "integer"
}
},
"required": ["label", "value"],
"type": "object"
},
"type": "array"
},
"status": {
"items": {
"additionalProperties": false,
Expand Down Expand Up @@ -2960,6 +3035,45 @@
{
"additionalProperties": false,
"properties": {
"breakdown": {
"items": {
"additionalProperties": false,
"properties": {
"label": {
"type": "string"
},
"value": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/BreakdownValueInt"
}
]
}
},
"required": ["label", "value"],
"type": "object"
},
"type": "array"
},
"compare": {
"items": {
"additionalProperties": false,
"properties": {
"label": {
"type": "string"
},
"value": {
"type": "string"
}
},
"required": ["label", "value"],
"type": "object"
},
"type": "array"
},
"day": {
"items": {
"additionalProperties": false,
Expand Down Expand Up @@ -3000,6 +3114,22 @@
},
"type": "array"
},
"series": {
"items": {
"additionalProperties": false,
"properties": {
"label": {
"type": "string"
},
"value": {
"type": "integer"
}
},
"required": ["label", "value"],
"type": "object"
},
"type": "array"
},
"status": {
"items": {
"additionalProperties": false,
Expand Down
20 changes: 19 additions & 1 deletion frontend/src/queries/schema.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -969,11 +969,16 @@ export interface InsightActorsQuery<T extends InsightsQueryBase = InsightQuerySo
* @asType integer
*/
interval?: number
// TODO: add breakdowns
/** @asType integer */
series?: number
breakdown?: string | BreakdownValueInt
compare?: 'current' | 'previous'
// TODO: add fields for other insights (funnels dropdown, compare_previous choice, etc)
response?: ActorsQueryResponse
}

/** @asType integer */
export type BreakdownValueInt = number
export interface InsightActorsQueryOptionsResponse {
day?: { label: string; value: string | Day }[]
status?: { label: string; value: string }[]
Expand All @@ -985,6 +990,19 @@ export interface InsightActorsQueryOptionsResponse {
*/
value: number
}[]
breakdown?: {
label: string
value: string | BreakdownValueInt
}[]
series?: {
label: string
/** @asType integer */
value: number
}[]
compare?: {
label: string
value: string
}[]
}

export interface InsightActorsQueryOptions {
Expand Down
26 changes: 17 additions & 9 deletions frontend/src/scenes/trends/persons-modal/PersonsModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,13 @@ export function PersonsModal({

{query &&
Object.entries(insightActorsQueryOptions ?? {})
.filter(([, value]) => !!value)
.filter(([, value]) => {
if (Array.isArray(value)) {
return !!value.length
}

return !!value
})
.map(([key, options]) => (
<div key={key}>
<LemonSelect
Expand Down Expand Up @@ -331,14 +337,16 @@ export function ActorRow({ actor, onOpenRecording, propertiesTimelineFilter }: A
<div className="font-bold flex items-start">
<PersonDisplay person={actor} withIcon={false} />
</div>
<CopyToClipboardInline
explicitValue={actor.distinct_ids[0]}
iconStyle={{ color: 'var(--primary)' }}
iconPosition="end"
className="text-xs text-muted-alt"
>
{midEllipsis(actor.distinct_ids[0], 32)}
</CopyToClipboardInline>
{actor.distinct_ids?.[0] && (
<CopyToClipboardInline
explicitValue={actor.distinct_ids[0]}
iconStyle={{ color: 'var(--primary)' }}
iconPosition="end"
className="text-xs text-muted-alt"
>
{midEllipsis(actor.distinct_ids[0], 32)}
</CopyToClipboardInline>
)}
</>
)}
</div>
Expand Down
37 changes: 18 additions & 19 deletions frontend/src/scenes/trends/persons-modal/personsModalLogic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,24 +61,22 @@ export const personsModalLogic = kea<personsModalLogicType>([
setIsCohortModalOpen: (isOpen: boolean) => ({ isOpen }),
loadActors: ({
url,
query,
clear,
offset,
additionalSelect,
}: {
url?: string | null
query?: InsightActorsQuery | null
clear?: boolean
offset?: number
additionalSelect?: PersonModalLogicProps['additionalSelect']
}) => ({
url,
query,
clear,
offset,
additionalSelect,
}),
loadNextActors: true,
updateQuery: (query: InsightActorsQuery) => ({ query }),
updateActorsQuery: (query: Partial<InsightActorsQuery>) => ({ query }),
loadActorsQueryOptions: (query: InsightActorsQuery) => ({ query }),
}),
Expand All @@ -91,15 +89,15 @@ export const personsModalLogic = kea<personsModalLogicType>([
actorsResponse: [
null as ListActorsResponse | null,
{
loadActors: async ({ url, query, clear, offset, additionalSelect }, breakpoint) => {
loadActors: async ({ url, clear, offset, additionalSelect }, breakpoint) => {
if (url) {
url += '&include_recordings=true'

if (values.searchTerm) {
url += `&search=${values.searchTerm}`
}
}
if (url && !query) {
if (url && !values.actorsQuery) {
const res = await api.get(url)
breakpoint()

Expand All @@ -108,7 +106,7 @@ export const personsModalLogic = kea<personsModalLogicType>([
}
return res
}
if (query) {
if (values.actorsQuery) {
const response = await performQuery(
{
...values.actorsQuery,
Expand Down Expand Up @@ -189,7 +187,7 @@ export const personsModalLogic = kea<personsModalLogicType>([
query: [
props.query as InsightActorsQuery | null,
{
loadActors: (state, { query }) => query ?? state ?? null,
updateQuery: (_, { query }) => query,
},
],
actors: [
Expand Down Expand Up @@ -233,7 +231,7 @@ export const personsModalLogic = kea<personsModalLogicType>([
listeners(({ actions, values, props }) => ({
setSearchTerm: async (_, breakpoint) => {
await breakpoint(500)
actions.loadActors({ query: values.query, url: props.url, clear: true })
actions.loadActors({ url: props.url, clear: true })
},
saveAsCohort: async ({ cohortName }) => {
const cohortParams = {
Expand Down Expand Up @@ -273,17 +271,18 @@ export const personsModalLogic = kea<personsModalLogicType>([
actions.loadActors({ url: values.actorsResponse.next })
}
if (values.actorsResponse?.next_offset) {
actions.loadActors({ query: values.query, offset: values.actorsResponse.next_offset })
actions.loadActors({ offset: values.actorsResponse.next_offset })
}
},
loadActors: ({ query }) => {
if (query && !values.insightActorsQueryOptions) {
actions.loadActorsQueryOptions(query)
loadActors: () => {
if (values.query && !values.insightActorsQueryOptions) {
actions.loadActorsQueryOptions(values.query)
}
},
updateActorsQuery: ({ query }) => {
if (query && values.query) {
actions.loadActors({ query: { ...values.query, ...query }, offset: 0, clear: true })
updateActorsQuery: ({ query: q }) => {
if (q && values.query) {
actions.updateQuery({ ...values.query, ...q })
actions.loadActors({ offset: 0, clear: true })
}
},
})),
Expand Down Expand Up @@ -334,8 +333,8 @@ export const personsModalLogic = kea<personsModalLogicType>([
},
],
actorsQuery: [
(s) => [(_, p) => p.query, (_, p) => p.orderBy, s.searchTerm, s.selectFields],
(query, orderBy, searchTerm, selectFields): ActorsQuery | null => {
(s) => [(_, p) => p.orderBy, s.query, s.searchTerm, s.selectFields],
(orderBy, query, searchTerm, selectFields): ActorsQuery | null => {
if (!query) {
return null
}
Expand Down Expand Up @@ -366,7 +365,7 @@ export const personsModalLogic = kea<personsModalLogicType>([
}),

afterMount(({ actions, props }) => {
actions.loadActors({ query: props.query, url: props.url, additionalSelect: props.additionalSelect })
actions.loadActors({ url: props.url, additionalSelect: props.additionalSelect })

actions.reportPersonsModalViewed({
url: props.url,
Expand All @@ -390,7 +389,7 @@ export const personsModalLogic = kea<personsModalLogicType>([

propsChanged(({ props, actions }, oldProps) => {
if (props.url !== oldProps.url) {
actions.loadActors({ query: props.query, url: props.url, clear: true })
actions.loadActors({ url: props.url, clear: true })
}
}),
])
Loading

0 comments on commit 46ec36c

Please sign in to comment.