From d229aa622e3ca3c4270718f975d94dec1f92c750 Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul@posthog.com>
Date: Thu, 7 Dec 2023 21:34:44 +0000
Subject: [PATCH] fix: year in hog fangling (#19189)

* fix: year in hog fangling

* fangling

* fix

* remove skip

* style improvements

* tooltip the explanation

* achievements unlocked needs to have 2 badges to not be a bit rubbish
---
 cypress/e2e/notebooks.cy.ts                |   2 +-
 posthog/year_in_posthog/2023.html          | 188 +++++++++++++++------
 posthog/year_in_posthog/calculate_2023.py  |   8 +-
 posthog/year_in_posthog/hibernating.html   |   4 +-
 posthog/year_in_posthog/year_in_posthog.py |  39 ++---
 5 files changed, 162 insertions(+), 79 deletions(-)

diff --git a/cypress/e2e/notebooks.cy.ts b/cypress/e2e/notebooks.cy.ts
index 483723f6a4d35..853f0aba6819c 100644
--- a/cypress/e2e/notebooks.cy.ts
+++ b/cypress/e2e/notebooks.cy.ts
@@ -41,7 +41,7 @@ describe('Notebooks', () => {
         cy.get('.ph-recording.NotebookNode').should('exist')
     })
 
-    it.skip('Insertion suggestions can be dismissed', () => {
+    it('Insertion suggestions can be dismissed', () => {
         cy.visit(urls.notebook('h11RoiwV'))
         cy.get('.SessionRecordingPlayer').click()
         cy.get('.ProseMirror').type('{enter}')
diff --git a/posthog/year_in_posthog/2023.html b/posthog/year_in_posthog/2023.html
index 336152e20ccd3..e44db048dfd64 100644
--- a/posthog/year_in_posthog/2023.html
+++ b/posthog/year_in_posthog/2023.html
@@ -95,7 +95,7 @@
             display: flex;
             flex-direction: column;
             font-weight: 400;
-            font-size: 5vw;
+            font-size: 32px;
             line-height: 1.25;
             align-items: center;
         }
@@ -113,6 +113,7 @@
             background-repeat: no-repeat;
             background-position: 50% 0;
             background-size: cover;
+            pointer-events: none;
         }
 
         h1 {
@@ -142,7 +143,7 @@
 
         @media only screen and (min-width: 650px) {
             body {
-                font-size: 2.5vw;
+                font-size: 1.5rem;
             }
         }
 
@@ -204,8 +205,8 @@
             color: {{ highlight_color }};
         }
 
-        {% for b in badges %}
-            .highlight.{{ b }} {
+        {% for _, b in badges.items %}
+            .highlight.{{ b.badge }} {
                 color: {{ b.highlight_color }};
             }
         {% endfor %}
@@ -214,6 +215,12 @@
             color: #969696;
         }
 
+        .text-sm {
+            font-weight: 300;
+            font-size: 1rem;
+            line-height: 1rem;
+        }
+
         .text-xl {
             font-weight: 600;
             font-size: 1.5rem;
@@ -228,10 +235,15 @@
 
         .text-3xl {
             font-weight: 600;
-            font-size: 3rem;
+            font-size: 2rem;
             line-height: 1;
         }
 
+        .my-4 {
+            margin-top: 0.5rem;
+            margin-bottom: 0.5rem;
+        }
+
         .my-8 {
             margin-top: 1rem;
             margin-bottom: 1rem;
@@ -258,24 +270,14 @@
             padding-bottom: 1rem;
         }
 
-        .pt-4 {
-            padding-top: 1rem;
+        .pt-2 {
+            padding-top: 0.5rem;
         }
 
         .pl-8 {
             padding-left: 2rem;
         }
 
-        .badge {
-            width: 326px;
-            height: 326px;
-        }
-
-        .badge.mini {
-            width: 163px;
-            height: 163px;
-        }
-
         .stats {
             display: flex;
             flex-direction: row;
@@ -287,7 +289,6 @@
             display: flex;
             flex-direction: column;
             flex-basis: 100%;
-            font-size: 1.5rem;
         }
 
 
@@ -300,30 +301,30 @@
 
         .achievements {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
+            grid-template-columns: repeat(auto-fill, minmax(18%, 1fr));
             gap: 10px; /* Adjust the gap between grid items as needed */
             width: 100%;
         }
 
-        @media screen and (max-width: 930px) {
-            .achievements {
-                grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); /* Change to 3 column with smaller images */
-            }
+        .badge {
+            width: 326px;
+            height: 326px;
+        }
 
-            .badge.mini {
-                width: 100px;
-                height: 100px;
-            }
+        .badge.mini {
+            width: 100px;
+            height: 100px;
         }
 
-        @media screen and (max-width: 600px) {
+        @media screen and (max-width: 980px) {
             .achievements {
-                grid-template-columns: repeat(auto-fill, minmax(48%, 1fr)); /* Change to 2 columns */
+                grid-template-columns: repeat(auto-fill, minmax(23%, 1fr));
             }
+        }
 
-            .badge.mini {
-                width: 160px;
-                height: 160px;
+        @media screen and (max-width: 790px) {
+            .achievements {
+                grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
             }
         }
 
@@ -346,7 +347,6 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            font-size: 1.5rem;
         }
 
         .sharing {
@@ -404,6 +404,44 @@
             }
         }
 
+        [data-tooltip] {
+            cursor: help;
+        }
+
+        [role="tooltip"] {
+            opacity: 0;
+            position: absolute;
+            width: auto;
+            max-width: 20%;
+            height: auto;
+            min-height: 25px;
+            line-height: 25px;
+            font-size: 1rem;
+            background-color: rgba(0, 0, 0, 0.7);
+            color: #ffffff;
+            border-radius: 5px;
+            margin-top: 10px;
+            padding: 10px 15px;
+            transform: translateX(-50%);
+        }
+
+        [role="tooltip"].active {
+            opacity: 1;
+            transition: opacity 0.1s;
+        }
+
+        [role="tooltip"]::before {
+            content: "";
+            width: 0;
+            height: 0;
+            border-left: 10px solid transparent;
+            border-right: 10px solid transparent;
+            border-bottom: 10px solid rgba(0, 0, 0, 0.7);
+            position: absolute;
+            margin-top: -20px;
+            transform: translateX(-50%);
+            left: 50%;
+        }
     </style>
     <meta name="description" content="{{ explanation }}">
     <meta name="image" content="{{ request.scheme }}://{{ request.META.HTTP_HOST }}{% static opengraph_image %}">
@@ -442,8 +480,8 @@ <h1 class="highlight text-3xl">{{ human_badge }}</h1>
     </div>
     <div class="right column">
         <div class="muted">You earned this badge because...</div>
-        <div class="highlight text-2xl my-8">{{ explanation }}</div>
-        <div class="stats pt-4">
+        <div class="highlight text-2xl my-4">{{ explanation }}</div>
+        <div class="stats pt-2">
             {% for stat in stats %}
                 <div class="stat px-1">
                     <div class="highlight text-3xl">{{ stat.count }}</div>
@@ -451,27 +489,31 @@ <h1 class="highlight text-3xl">{{ human_badge }}</h1>
                 </div>
             {% endfor %}
         </div>
-        <div class="achievements-wrapper pt-4">
-            <h2 class="highlight text-2xl">Achievements unlocked</h2>
-            <div class="achievements">
-                {% for _, b in badges.items %}
-                    <div class="achievement" title="{{ b.explanation }}">
-                        <picture class="badge mini">
-                            <source type="image/webp" srcset="{% static b.image_webp %}" width="163" height="163">
-                            <source type="image/png" srcset="{% static b.image_png %}" width="163" height="163">
-                            <img class="badge mini" src="{% static b.image_png %}" width="163" height="163"
-                                 alt="An illustration of a hedgehog who is a {{ b.human_badge }}">
-                        </picture>
-                        <div class="my-4 text-center highlight {{ b.badge }}">{{ b.human_badge }}</div>
-                    </div>
-                {% endfor %}
+        {% if badges %}
+            <div class="achievements-wrapper pt-2">
+                <h2 class="highlight text-xl">Achievements unlocked</h2>
+                <div class="achievements">
+                    {% for _, b in badges.items %}
+                        <div class="achievement text-sm" data-tooltip="{{ b.explanation }}">
+                            <picture class="badge mini">
+                                <source type="image/webp" srcset="{% static b.image_webp %}" width="100" height="100">
+                                <source type="image/png" srcset="{% static b.image_png %}" width="100" height="100">
+                                <img class="badge mini" src="{% static b.image_png %}" width="100" height="100"
+                                     alt="An illustration of a hedgehog who is a {{ b.human_badge }}">
+                            </picture>
+                            <div class="my-4 text-center highlight {{ b.badge }}">{{ b.human_badge }}</div>
+                        </div>
+                    {% endfor %}
+                </div>
             </div>
-        </div>
+        {% endif %}
         <div class="sharing">{% include "sharing-buttons.html" %}</div>
     </div>
+
 </main>
 <footer class="footer" role="contentinfo">
     <div class="pl-8 text-xl grow items-center flex">
+        <span>Year in </span>
         {#        copied from <FriendlyLogo/>#}
         <svg
                 fill="none"
@@ -523,11 +565,55 @@ <h2 class="highlight text-2xl">Achievements unlocked</h2>
                 <path d="m120.815 23.0299c1.113 0 2.105-.3846 2.631-1.0525v.9715c0 1.1334-.911 1.9228-2.307 1.9228-.992 0-1.862-.4858-2.004-1.3156l-2.712.425c.364 1.9228 2.328 3.2181 4.716 3.2181 3.137 0 5.222-1.8418 5.222-4.5741v-9.4721h-2.935v.8703c-.546-.6274-1.477-1.0322-2.672-1.0322-2.833 0-4.614 1.943-4.614 5.0194s1.781 5.0194 4.675 5.0194zm-1.781-5.0194c0-1.518.891-2.4895 2.267-2.4895 1.396 0 2.287.9715 2.287 2.4895 0 1.5179-.891 2.4894-2.287 2.4894-1.376 0-2.267-.9715-2.267-2.4894z"/>
             </g>
         </svg>
-        <span>&nbsp;unwrapped</span>
     </div>
     <div>
         <div class="sharing">{% include "sharing-buttons.html" %}</div>
     </div>
 </footer>
+<script>
+    const tooltips = document.querySelectorAll("[data-tooltip]");
+
+    const displayTooltip = (e) => {
+        const trigger = e.target;
+        const tooltip = trigger.querySelector("[role=tooltip]");
+
+        const {x, y, width, height} = trigger.getBoundingClientRect();
+        tooltip.style.left = `${Math.floor(x + width / 2)}px`;
+        tooltip.style.top = `${Math.floor(y + height)}px`;
+
+        tooltip.classList.add("active");
+    };
+
+    const hideTooltip = (e) => {
+        const tooltip = e.target.querySelector("[role=tooltip]");
+        tooltip.classList.remove("active");
+    };
+
+    const DELAY = 100;
+    let tooltipTimer = null;
+
+    tooltips.forEach((trigger) => {
+        let tooltip = document.createElement("div");
+
+        tooltip.setAttribute("role", "tooltip");
+        tooltip.setAttribute("inert", true);
+        tooltip.textContent = trigger.dataset.tooltip;
+
+        trigger.appendChild(tooltip);
+
+        trigger.addEventListener("mouseenter", (e) => {
+            clearTimeout(tooltipTimer);
+
+            tooltipTimer = setTimeout(() => {
+                displayTooltip(e);
+            }, DELAY);
+        });
+
+        trigger.addEventListener("mouseleave", (e) => {
+            clearTimeout(tooltipTimer);
+            hideTooltip(e);
+        });
+    });
+</script>
 </body>
 </html>
diff --git a/posthog/year_in_posthog/calculate_2023.py b/posthog/year_in_posthog/calculate_2023.py
index d4201ed6c6e80..28db3a65f59d1 100644
--- a/posthog/year_in_posthog/calculate_2023.py
+++ b/posthog/year_in_posthog/calculate_2023.py
@@ -5,7 +5,6 @@
 from django.db import connection
 
 from posthog.cache_utils import cache_for
-from posthog.logging.timing import timed
 
 query = """
 with insight_stats AS (
@@ -38,7 +37,11 @@
     FROM
         posthog_featureflag
     WHERE
-        date_part('year', created_at) = 2023
+        -- only having a single percentage symbol here gives very misleading Python errors :/
+        key not ilike 'survey-targeting%%'
+        AND key not ilike 'prompt-%%'
+        AND key not ilike 'interview-%%'
+        AND date_part('year', created_at) = 2023
         AND created_by_id = (select id from posthog_user where uuid = %(user_uuid)s)
     GROUP BY
         created_by_id
@@ -148,7 +151,6 @@ def dictfetchall(cursor):
     return [dict(zip(columns, row)) for row in cursor.fetchall()]
 
 
-@timed("year_in_posthog_2023_calculation")
 @cache_for(timedelta(seconds=0 if settings.DEBUG else 30))
 def calculate_year_in_posthog_2023(user_uuid: str) -> Optional[Dict]:
     with connection.cursor() as cursor:
diff --git a/posthog/year_in_posthog/hibernating.html b/posthog/year_in_posthog/hibernating.html
index b186512ba4327..3e5e984e58768 100644
--- a/posthog/year_in_posthog/hibernating.html
+++ b/posthog/year_in_posthog/hibernating.html
@@ -138,8 +138,8 @@
 </head>
 <body>
 
-<h1>Year in PostHog is hibernating.</h1>
-<img alt="Year in PostHog is hibernating."
+<h1>{{ message }}</h1>
+<img alt="A sleeping max the hedgehog"
      width="578" height="400"
      src="{% static 'year_in_hog/sleeping-hog.png' %}"
 />
diff --git a/posthog/year_in_posthog/year_in_posthog.py b/posthog/year_in_posthog/year_in_posthog.py
index 193bc84609d7d..f561727d2833f 100644
--- a/posthog/year_in_posthog/year_in_posthog.py
+++ b/posthog/year_in_posthog/year_in_posthog.py
@@ -107,33 +107,26 @@ def render_2023(request, user_uuid: str) -> HttpResponse:
         data = calculate_year_in_posthog_2023(user_uuid)
 
         badge = sort_list_based_on_preference(data.get("badges") or ["astronaut"])
-    except Exception as e:
-        # because Harry is trying to hack my URLs
-        logger.error("year_in_posthog_2023_error_loading_data", exc_info=True, exc=e, data=data or "no data")
-        capture_exception(e)
-        badge = "astronaut"
-        data = data or {"stats": {}, "badges": []}
-
-    badge_images = {}
-    for b in data.get("badges") or ["astronaut"]:
-        if b != badge:
-            badge_images[b] = {
-                "badge": b,
-                "human_badge": human_badge.get(b),
-                "image_png": f"year_in_hog/badges/2023_{b}.png",
-                "image_webp": f"year_in_hog/badges/2023_{b}.webp",
-                "highlight_color": highlight_color.get(b),
-                "explanation": explanation.get(b),
-            }
 
-    try:
+        badge_images = {}
+        for b in data.get("badges", {}):
+            if b != badge:
+                badge_images[b] = {
+                    "badge": b,
+                    "human_badge": human_badge.get(b),
+                    "image_png": f"year_in_hog/badges/2023_{b}.png",
+                    "image_webp": f"year_in_hog/badges/2023_{b}.webp",
+                    "highlight_color": highlight_color.get(b),
+                    "explanation": explanation.get(b),
+                }
+
         stats = stats_for_badge(data, badge)
 
         context = {
             "debug": settings.DEBUG,
             "api_token": os.environ.get("DEBUG_API_TOKEN", "unknown") if settings.DEBUG else "sTMFPsFhdP1Ssg",
             "badge": badge,
-            "badges": badge_images,
+            "badges": badge_images if len(badge_images.items()) > 1 else {},
             "human_badge": human_badge.get(badge),
             "highlight_color": highlight_color.get(badge),
             "image_png": f"year_in_hog/badges/2023_{badge}.png",
@@ -150,11 +143,13 @@ def render_2023(request, user_uuid: str) -> HttpResponse:
     except Exception as e:
         capture_exception(e)
         logger.error("year_in_posthog_2023_error_rendering_2023_page", exc_info=True, exc=e, data=data or "no data")
-        return HttpResponse("Error rendering 2023 page", status=500)
+        template = get_template("hibernating.html")
+        html = template.render({"message": "Something went wrong 🫠"}, request=request)
+        return HttpResponse(html, status=500)
 
 
 @cache_control(public=True, max_age=300)  # cache for 5 minutes
 def render_2022(request, user_uuid: str) -> HttpResponse:
     template = get_template("hibernating.html")
-    html = template.render({}, request=request)
+    html = template.render({"message": "This is the 2022 Year in PostHog. That's too long ago 🙃"}, request=request)
     return HttpResponse(html)