From 2d1bab5a99cf9b879557f36f74ae7583c167eb8c Mon Sep 17 00:00:00 2001
From: Juraj Majerik <juro.majerik@gmail.com>
Date: Wed, 18 Oct 2023 17:41:58 +0200
Subject: [PATCH] fix(surveys): bypass HogQL coercion + UI fixes (#18063)

---
 .../insights/views/LineGraph/LineGraph.tsx    | 30 ++++++++++++++++++-
 frontend/src/scenes/surveys/SurveyView.scss   |  8 ++++-
 frontend/src/scenes/surveys/surveyLogic.tsx   |  9 ++++--
 frontend/src/scenes/surveys/surveyViewViz.tsx |  5 ++--
 4 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx b/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx
index 666e7894fdf3b..d406e4951306a 100644
--- a/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx
+++ b/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx
@@ -50,6 +50,14 @@ export function ensureTooltipElement(): HTMLElement {
     return tooltipEl
 }
 
+function truncateString(str: string, num: number): string {
+    if (str.length > num) {
+        return str.slice(0, num) + ' ...'
+    } else {
+        return str
+    }
+}
+
 export function onChartClick(
     event: ChartEvent,
     chart: Chart,
@@ -408,6 +416,9 @@ export function LineGraph_({
                     },
                     display: (context) => {
                         const datum = context.dataset.data[context.dataIndex]
+                        if (showValueOnSeries && inSurveyView) {
+                            return true
+                        }
                         return showValueOnSeries === true && typeof datum === 'number' && datum !== 0 ? 'auto' : false
                     },
                     formatter: (value: number, context) => {
@@ -570,6 +581,9 @@ export function LineGraph_({
         }
 
         if (type === GraphType.Bar) {
+            if (hideXAxis || hideYAxis) {
+                options.layout = { padding: 20 }
+            }
             options.scales = {
                 x: {
                     display: !hideXAxis,
@@ -578,8 +592,9 @@ export function LineGraph_({
                     ticks: {
                         ...tickOptions,
                         precision,
+                        ...(inSurveyView ? { padding: 10 } : {}),
                     },
-                    grid: gridOptions,
+                    grid: inSurveyView ? { display: false } : gridOptions,
                 },
                 y: {
                     display: !hideYAxis,
@@ -597,6 +612,9 @@ export function LineGraph_({
                 },
             }
         } else if (type === GraphType.Line) {
+            if (hideXAxis || hideYAxis) {
+                options.layout = { padding: 20 }
+            }
             options.scales = {
                 x: {
                     display: !hideXAxis,
@@ -624,6 +642,9 @@ export function LineGraph_({
                 },
             }
         } else if (isHorizontal) {
+            if (hideXAxis || hideYAxis) {
+                options.layout = { padding: 20 }
+            }
             options.scales = {
                 x: {
                     display: !hideXAxis,
@@ -642,6 +663,13 @@ export function LineGraph_({
                     display: true,
                     beforeFit: (scale) => {
                         if (inSurveyView) {
+                            scale.ticks = scale.ticks.map((tick) => {
+                                if (typeof tick.label === 'string') {
+                                    return { ...tick, label: truncateString(tick.label, 50) }
+                                }
+                                return tick
+                            })
+
                             const ROW_HEIGHT = 60
                             const dynamicHeight = scale.ticks.length * ROW_HEIGHT
                             const height = dynamicHeight
diff --git a/frontend/src/scenes/surveys/SurveyView.scss b/frontend/src/scenes/surveys/SurveyView.scss
index 6184555d874fc..a0d2ee7572ed5 100644
--- a/frontend/src/scenes/surveys/SurveyView.scss
+++ b/frontend/src/scenes/surveys/SurveyView.scss
@@ -3,6 +3,12 @@
     column-gap: 10px;
 }
 
+@media screen and (max-width: 1024px) {
+    .masonry-container {
+        column-count: 2;
+    }
+}
+
 .masonry-item {
     margin: 0;
     display: grid;
@@ -16,7 +22,7 @@
 
 .masonry-item-text {
     max-height: 305px;
-    overflow: scroll;
+    overflow-y: scroll;
 }
 
 .masonry-item-link {
diff --git a/frontend/src/scenes/surveys/surveyLogic.tsx b/frontend/src/scenes/surveys/surveyLogic.tsx
index c4dcb237b3dd6..87014de563604 100644
--- a/frontend/src/scenes/surveys/surveyLogic.tsx
+++ b/frontend/src/scenes/surveys/surveyLogic.tsx
@@ -225,7 +225,7 @@ export const surveyLogic = kea<surveyLogicType>([
                 const query: HogQLQuery = {
                     kind: NodeKind.HogQLQuery,
                     query: `
-                        SELECT properties.${surveyResponseField} AS survey_response, COUNT(survey_response)
+                        SELECT JSONExtractString(properties, '${surveyResponseField}') AS survey_response, COUNT(survey_response)
                         FROM events
                         WHERE event = 'survey sent' 
                             AND properties.$survey_id = '${props.id}'
@@ -266,7 +266,7 @@ export const surveyLogic = kea<surveyLogicType>([
                 const query: HogQLQuery = {
                     kind: NodeKind.HogQLQuery,
                     query: `
-                        SELECT properties.${surveyResponseField} AS survey_response, COUNT(survey_response)
+                        SELECT JSONExtractString(properties, '${surveyResponseField}') AS survey_response, COUNT(survey_response)
                         FROM events
                         WHERE event = 'survey sent' 
                             AND properties.$survey_id = '${props.id}'
@@ -303,10 +303,13 @@ export const surveyLogic = kea<surveyLogicType>([
                     ? dayjs(survey.end_date).add(1, 'day').format('YYYY-MM-DD')
                     : dayjs().add(1, 'day').format('YYYY-MM-DD')
 
+                const surveyResponseField =
+                    questionIndex === 0 ? '$survey_response' : `$survey_response_${questionIndex}`
+
                 const query: HogQLQuery = {
                     kind: NodeKind.HogQLQuery,
                     query: `
-                        SELECT count(), arrayJoin(JSONExtractArrayRaw(properties, '$survey_response')) AS choice
+                        SELECT count(), arrayJoin(JSONExtractArrayRaw(properties, '${surveyResponseField}')) AS choice
                         FROM events
                         WHERE event == 'survey sent'
                             AND properties.$survey_id == '${survey.id}'
diff --git a/frontend/src/scenes/surveys/surveyViewViz.tsx b/frontend/src/scenes/surveys/surveyViewViz.tsx
index fc9511d2fca28..25111e3cf9f35 100644
--- a/frontend/src/scenes/surveys/surveyViewViz.tsx
+++ b/frontend/src/scenes/surveys/surveyViewViz.tsx
@@ -191,13 +191,12 @@ export function RatingQuestionBarChart({
                         question.scale === 10 ? '0 - 10' : '1 - 5'
                     } rating`}</div>
                     <div className="text-xl font-bold mb-2">{question.question}</div>
-                    <div className=" h-50 border rounded pt-6 pb-2 px-2">
+                    <div className=" h-50 border rounded pt-6 pb-2">
                         <div className="relative h-full w-full">
                             <BindLogic logic={insightLogic} props={insightProps}>
                                 <LineGraph
                                     inSurveyView={true}
                                     hideYAxis={true}
-                                    hideXAxis={true}
                                     showValueOnSeries={true}
                                     labelGroupType={1}
                                     data-attr="survey-rating"
@@ -465,7 +464,7 @@ export function OpenTextViz({
                     <div className="mt-4 mb-8 masonry-container">
                         {surveyOpenTextResults[questionIndex].events.map((event, i) => (
                             <div key={`open-text-${questionIndex}-${i}`} className="masonry-item border rounded">
-                                <div className="masonry-item-text italic font-semibold px-5 py-4">
+                                <div className="masonry-item-text text-center italic font-semibold px-5 py-4">
                                     {event.properties[surveyResponseField]}
                                 </div>
                                 <div className="masonry-item-link items-center px-5 py-4 border-t rounded-b truncate w-full">