From 5e1111db5d6f486dad585297c70d37f90b4cb108 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Sat, 5 Aug 2023 09:09:54 -0700
Subject: [PATCH] Update to insights query.

---
 components/pages/reports/FilterSelectForm.js  | 13 +++++++
 .../reports/insights/InsightsParameters.js    | 24 +++++--------
 lib/constants.ts                              | 11 +++++-
 pages/api/reports/insights.ts                 | 14 ++++----
 queries/analytics/reports/getInsights.ts      | 35 ++++++++-----------
 5 files changed, 54 insertions(+), 43 deletions(-)
 create mode 100644 components/pages/reports/FilterSelectForm.js

diff --git a/components/pages/reports/FilterSelectForm.js b/components/pages/reports/FilterSelectForm.js
new file mode 100644
index 00000000..0dc107b0
--- /dev/null
+++ b/components/pages/reports/FilterSelectForm.js
@@ -0,0 +1,13 @@
+import { useState } from 'react';
+import FieldSelectForm from './FieldSelectForm';
+import FieldFilterForm from './FieldFilterForm';
+
+export default function FilterSelectForm({ fields, onSelect }) {
+  const [field, setField] = useState();
+
+  if (!field) {
+    return <FieldSelectForm fields={fields} onSelect={setField} />;
+  }
+
+  return <FieldFilterForm name={field.name} type={field.type} onSelect={onSelect} />;
+}
diff --git a/components/pages/reports/insights/InsightsParameters.js b/components/pages/reports/insights/InsightsParameters.js
index 692c5ead..5b9b8f18 100644
--- a/components/pages/reports/insights/InsightsParameters.js
+++ b/components/pages/reports/insights/InsightsParameters.js
@@ -7,9 +7,9 @@ import Icons from 'components/icons';
 import BaseParameters from '../BaseParameters';
 import ParameterList from '../ParameterList';
 import styles from './InsightsParameters.module.css';
-import FieldSelectForm from '../FieldSelectForm';
 import PopupForm from '../PopupForm';
-import FieldFilterForm from '../FieldFilterForm';
+import FilterSelectForm from '../FilterSelectForm';
+import FieldSelectForm from '../FieldSelectForm';
 
 const fieldOptions = [
   { name: 'url', type: 'string' },
@@ -30,17 +30,15 @@ export function InsightsParameters() {
   const { formatMessage, labels } = useMessages();
   const ref = useRef(null);
   const { parameters } = report || {};
-  const { websiteId, dateRange, fields, filters, groups } = parameters || {};
-  const queryEnabled = websiteId && dateRange && fields?.length;
+  const { websiteId, dateRange, filters, groups } = parameters || {};
+  const queryEnabled = websiteId && dateRange && (filters?.length || groups?.length);
 
   const parameterGroups = [
-    { label: formatMessage(labels.fields), group: REPORT_PARAMETERS.fields },
     { label: formatMessage(labels.filters), group: REPORT_PARAMETERS.filters },
     { label: formatMessage(labels.breakdown), group: REPORT_PARAMETERS.groups },
   ];
 
   const parameterData = {
-    fields,
     filters,
     groups,
   };
@@ -73,11 +71,11 @@ export function InsightsParameters() {
           {(close, element) => {
             return (
               <PopupForm element={element} onClose={close}>
-                {group === REPORT_PARAMETERS.fields && (
-                  <FieldSelectForm fields={fieldOptions} onSelect={handleAdd.bind(null, group)} />
-                )}
                 {group === REPORT_PARAMETERS.filters && (
-                  <FieldFilterForm fields={fieldOptions} onSelect={handleAdd.bind(null, group)} />
+                  <FilterSelectForm fields={fieldOptions} onSelect={handleAdd.bind(null, group)} />
+                )}
+                {group === REPORT_PARAMETERS.groups && (
+                  <FieldSelectForm fields={fieldOptions} onSelect={handleAdd.bind(null, group)} />
                 )}
               </PopupForm>
             );
@@ -100,12 +98,6 @@ export function InsightsParameters() {
               {({ name, value }) => {
                 return (
                   <div className={styles.parameter}>
-                    {group === REPORT_PARAMETERS.fields && (
-                      <>
-                        <div>{name}</div>
-                        <div className={styles.op}>{value}</div>
-                      </>
-                    )}
                     {group === REPORT_PARAMETERS.filters && (
                       <>
                         <div>{name}</div>
diff --git a/lib/constants.ts b/lib/constants.ts
index dcb64143..cb520c27 100644
--- a/lib/constants.ts
+++ b/lib/constants.ts
@@ -53,7 +53,16 @@ export const FILTER_COLUMNS = {
   eventName: 'event_name',
 };
 
-export const IGNORED_FILTERS = ['startDate', 'endDate', 'timezone', 'unit'];
+export const IGNORED_FILTERS = [
+  'startDate',
+  'endDate',
+  'timezone',
+  'unit',
+  'eventType',
+  'fields',
+  'filters',
+  'groups',
+];
 
 export const COLLECTION_TYPE = {
   event: 'event',
diff --git a/pages/api/reports/insights.ts b/pages/api/reports/insights.ts
index a40c2124..f245153f 100644
--- a/pages/api/reports/insights.ts
+++ b/pages/api/reports/insights.ts
@@ -36,13 +36,15 @@ export default async (
       return unauthorized(res);
     }
 
-    const data = await getInsights(websiteId, {
-      startDate: new Date(startDate),
-      endDate: new Date(endDate),
-      fields,
-      filters,
+    const data = await getInsights(
+      websiteId,
+      {
+        ...filters,
+        startDate: new Date(startDate),
+        endDate: new Date(endDate),
+      },
       groups,
-    });
+    );
 
     return ok(res, data);
   }
diff --git a/queries/analytics/reports/getInsights.ts b/queries/analytics/reports/getInsights.ts
index dfe7c397..93569fe7 100644
--- a/queries/analytics/reports/getInsights.ts
+++ b/queries/analytics/reports/getInsights.ts
@@ -4,7 +4,9 @@ import clickhouse from 'lib/clickhouse';
 import { EVENT_TYPE } from 'lib/constants';
 import { QueryFilters } from 'lib/types';
 
-export async function getInsights(...args: [websiteId: string, filters: QueryFilters]) {
+export async function getInsights(
+  ...args: [websiteId: string, filters: QueryFilters, groups: { name: string; type: string }[]]
+) {
   return runQuery({
     [PRISMA]: () => relationalQuery(...args),
     [CLICKHOUSE]: () => clickhouseQuery(...args),
@@ -14,6 +16,7 @@ export async function getInsights(...args: [websiteId: string, filters: QueryFil
 async function relationalQuery(
   websiteId: string,
   filters: QueryFilters,
+  groups: { name: string; type: string }[],
 ): Promise<
   {
     x: string;
@@ -46,6 +49,7 @@ async function relationalQuery(
 async function clickhouseQuery(
   websiteId: string,
   filters: QueryFilters,
+  groups: { name: string; type: string }[],
 ): Promise<
   {
     x: string;
@@ -53,7 +57,6 @@ async function clickhouseQuery(
   }[]
 > {
   const { parseFilters, rawQuery } = clickhouse;
-  const { fields } = filters;
   const { filterQuery, params } = await parseFilters(websiteId, {
     ...filters,
     eventType: EVENT_TYPE.pageView,
@@ -62,14 +65,14 @@ async function clickhouseQuery(
   return rawQuery(
     `
     select 
-      ${parseFields(fields)}
+      ${parseFields(groups)}
     from website_event
     where website_id = {websiteId:UUID}
       and created_at between {startDate:DateTime} and {endDate:DateTime}
       and event_type = {eventType:UInt32}
       ${filterQuery}
-    group by ${fields.map(({ name }) => name).join(',')}
-    order by total desc
+    group by ${groups.map(({ name }) => name).join(',')}
+    order by 1 desc
     limit 500
     `,
     params,
@@ -77,22 +80,14 @@ async function clickhouseQuery(
 }
 
 function parseFields(fields) {
-  let count = false;
-  let distinct = false;
+  const query = fields.reduce(
+    (arr, field) => {
+      const { name } = field;
 
-  const query = fields.reduce((arr, field) => {
-    const { name, value } = field;
-
-    if (!count && value === 'total') {
-      count = true;
-      arr = arr.concat(`count(*) as views`);
-    } else if (!distinct && value === 'unique') {
-      distinct = true;
-      //arr = arr.concat(`count(distinct ${name})`);
-    }
-
-    return arr.concat(name);
-  }, []);
+      return arr.concat(name);
+    },
+    ['count(*) as views', 'count(distinct session_id) as visitors'],
+  );
 
   return query.join(',\n');
 }