✨ remove InteractionNotice

owid · Jan 22, 2025 · 5aa7093 · 5aa7093
1 parent 903ebeb
commit 5aa7093
Show file tree

Hide file tree

Showing 8 changed files with 10 additions and 76 deletions.
diff --git a/baker/formatWordpressPost.tsx b/baker/formatWordpressPost.tsx
@@ -16,7 +16,6 @@ import { renderAdditionalInformation } from "../site/blocks/renderAdditionalInfo
 import { renderHelp } from "../site/blocks/renderHelp.js"
 import { renderCodeSnippets } from "@ourworldindata/components"
 import { formatUrls, getBodyHtml } from "../site/formatting.js"
-import { INTERACTIVE_ICON_SVG } from "../site/InteractionNotice.js"
 import { renderProminentLinks } from "./siteRenderers.js"
 import { RELATED_CHARTS_CLASS_NAME } from "../site/blocks/RelatedCharts.js"
 import { KnexReadonlyTransaction } from "../db/db.js"
@@ -160,12 +159,14 @@ export const formatWordpressPost = async (
         const output = `
                 <figure data-grapher-src="${src}" class="${GRAPHER_PREVIEW_CLASS}">
                     <a href="${src}" target="_blank">
-                        <div><img src="${GRAPHER_DYNAMIC_THUMBNAIL_URL}/${url.slug}.png${url.queryStr}" width="850" height="600" loading="lazy" data-no-lightbox /></div>
-                        <div class="interactionNotice">
-                            <span class="icon">${INTERACTIVE_ICON_SVG}</span>
-                            <span class="label">Click to open interactive version</span>
-                        </div>
-                    </a>
+                    <div>
+                        <img
+                          src="${GRAPHER_DYNAMIC_THUMBNAIL_URL}/${url.slug}.png${url.queryStr}"
+                          width="850"
+                          height="600"
+                          loading="lazy"
+                          data-no-lightbox />
+                    </div>
                 </figure>`
         if (el.parent.tagName === "p") {
             // We are about to replace <iframe> with <figure>. However, there cannot be <figure> within <p>,

diff --git a/site/InteractionNotice.tsx b/site/InteractionNotice.tsx
diff --git a/site/collections/DynamicCollection.tsx b/site/collections/DynamicCollection.tsx
@@ -14,7 +14,6 @@ import { observer } from "mobx-react"
 import { WindowGraphers } from "./DynamicCollectionPage.js"
 import { Grapher } from "@ourworldindata/grapher"
 import { GRAPHER_PREVIEW_CLASS } from "@ourworldindata/types"
-import InteractionNotice from "../InteractionNotice.js"
 import GrapherImage from "../GrapherImage.js"
 
 interface DynamicCollectionProps {
@@ -139,7 +138,6 @@ export class DynamicCollection extends React.Component<DynamicCollectionProps> {
                                     rel="noopener"
                                 >
                                     <GrapherImage slug={chartSlug} />
-                                    <InteractionNotice />
                                 </a>
                             </figure>
                         )

diff --git a/site/collections/StaticCollectionPage.tsx b/site/collections/StaticCollectionPage.tsx
@@ -3,7 +3,6 @@ import { Head } from "../Head.js"
 import { GRAPHER_PREVIEW_CLASS } from "@ourworldindata/types"
 import { SiteHeader } from "../SiteHeader.js"
 import { SiteFooter } from "../SiteFooter.js"
-import InteractionNotice from "../InteractionNotice.js"
 import GrapherImage from "../GrapherImage.js"
 import { Html } from "../Html.js"
 
@@ -56,7 +55,6 @@ export const StaticCollectionPage = (
                                             rel="noopener"
                                         >
                                             <GrapherImage slug={chartSlug} />
-                                            <InteractionNotice />
                                         </a>
                                     </figure>
                                 )

diff --git a/site/css/content.scss b/site/css/content.scss
@@ -63,36 +63,6 @@ figure[data-explorer-src] {
     position: relative;
 }
 
-.interactionNotice {
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 1.6;
-    display: none;
-    background-color: rgba(black, 0.03);
-    padding: 3px 0;
-    color: $controls-color;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 8px;
-
-    // Anything >680px will get the interactive graphics in-place.
-    // 680px is a breakpoint also used in the JavaScript code – keep it in sync.
-    @media screen and (max-device-width: 680px) {
-        display: flex;
-    }
-
-    .icon {
-        font-size: 21px;
-    }
-}
-
-// Doesn't make sense to show the notice if JavaScript is disabled
-// As the grapher/data page will also be disabled
-.js-disabled .interactionNotice {
-    display: none;
-}
-
 /*******************************************************************************
  * Tables
  */

diff --git a/site/gdocs/components/Chart.tsx b/site/gdocs/components/Chart.tsx
@@ -18,7 +18,6 @@ import { ChartConfigType, GRAPHER_PREVIEW_CLASS } from "@ourworldindata/types"
 import { useLinkedChart } from "../utils.js"
 import SpanElements from "./SpanElements.js"
 import cx from "classnames"
-import InteractionNotice from "../../InteractionNotice.js"
 import GrapherImage from "../../GrapherImage.js"
 
 export default function Chart({
@@ -132,7 +131,6 @@ export default function Chart({
                 ) : (
                     <a href={resolvedUrl} target="_blank" rel="noopener">
                         <GrapherImage url={resolvedUrl} alt={d.title} />
-                        <InteractionNotice />
                     </a>
                 )}
             </figure>

diff --git a/site/gdocs/components/NarrativeChart.tsx b/site/gdocs/components/NarrativeChart.tsx
@@ -19,7 +19,6 @@ import {
     GRAPHER_DYNAMIC_THUMBNAIL_URL,
 } from "../../../settings/clientSettings.js"
 import { queryParamsToStr } from "@ourworldindata/utils"
-import InteractionNotice from "../../InteractionNotice.js"
 
 export default function NarrativeChart({
     d,
@@ -87,7 +86,6 @@ export default function NarrativeChart({
                         loading="lazy"
                         data-no-lightbox
                     />
-                    <InteractionNotice />
                 </a>
             </figure>
             {d.caption ? (

diff --git a/site/multiembedder/MultiEmbedder.tsx b/site/multiembedder/MultiEmbedder.tsx
@@ -54,14 +54,6 @@ const figuresFromDOM = (
         container.querySelectorAll<HTMLElement>(`*[${selector}]`)
     ).filter(isPresent)
 
-// Determine whether this device is powerful enough to handle
-// loading a bunch of inline interactive charts
-// 680px is also used in CSS – keep it in sync if you change this
-const shouldProgressiveEmbed = () => true
-// disabling this behaviour for now until we have a better way to detect low power devices
-// https://github.com/owid/owid-grapher/issues/3661
-// !isMobile() || window.screen.width > 680 || pageContainsGlobalEntitySelector()
-
 // const pageContainsGlobalEntitySelector = () =>
 //     globalEntitySelectorElement() !== null
 
@@ -308,13 +300,9 @@ class MultiEmbedder {
                 : "grapher"
 
         const hasPreview = isExplorer ? false : !!figure.querySelector("img")
-        if (!shouldProgressiveEmbed() && hasPreview) return
+        if (hasPreview) return
 
-        // Stop observing visibility as soon as possible, that is not before
-        // shouldProgressiveEmbed gets a chance to reevaluate a possible change
-        // in screen size on mobile (i.e. after a rotation). Stopping before
-        // shouldProgressiveEmbed would prevent rendering interactive charts
-        // when going from portrait to landscape mode (without page reload).
+        // Stop observing visibility as soon as possible
         this.figuresObserver?.unobserve(figure)
 
         await match(embedType)