Merge pull request #2555 from owid/grapher-redesign

Grapher redesign

.bundlewatch.config.json

@@ -2,7 +2,7 @@
     "files": [
         {
             "path": "./dist/assets/common.mjs",
-            "maxSize": "1.72MB"
+            "maxSize": "1.75MB"
         },
         {
             "path": "./dist/assets/owid.mjs",

.gitignore

@@ -4,6 +4,7 @@ logs/
 .idea/
 db.sqlite3
 .sublime*
+.nova/
 .yarn/*
 !.yarn/patches
 !.yarn/releases

README.md

@@ -96,4 +96,4 @@ The following is an excerpt explaining the origin of this repo and what the alte
 
 Cross-browser testing provided by <a href="https://www.browserstack.com"><img src="https://3fxtqy18kygf3on3bu39kh93-wpengine.netdna-ssl.com/wp-content/themes/browserstack/img/bs-logo.svg" /> BrowserStack</a>
 
-Client-side bug tracking provided by <a href="http://www.bugsnag.com/"><img width="110" src="https://images.typeform.com/images/QKuaAssrFCq7/image/default" /></a>
+Client-side bug tracking provided by <a href="http://www.bugsnag.com/"><img width="110" src="https://images.typeform.com/images/QKuaAssrFCq7/image/default" /></a>.

baker/formatWordpressPost.tsx

@@ -266,9 +266,11 @@ export const formatWordpressPost = async (
         /(\+ )?[a|A]dd [c|C]ountry/g,
         `<span class="add-country">
             <span class="icon">
-                <svg width="16" height="16"><path d="M3,8 h10 m-5,-5 v10"></path></svg>
+                <svg viewBox="0 0 512 512">
+                    <path fill="currentColor" d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"></path>
+                </svg>
             </span>
-            Add country
+            Edit countries and regions
         </span>`
     )
 

explorer/Explorer.scss

@@ -133,7 +133,7 @@ html.IsInIframe .ExplorerFigure,
         grid-template-rows: 0fr 0fr 0fr 1fr;
 
         .ExplorerFigure {
-            min-height: 480px;
+            min-height: 540px;
         }
     }
 }

explorer/Explorer.tsx

@@ -11,17 +11,20 @@ import {
     TableSlug,
 } from "@ourworldindata/core-table"
 import {
+    Checkbox,
     EntityPicker,
     EntityPickerManager,
     Grapher,
     GrapherInterface,
     GrapherManager,
     GrapherProgrammaticInterface,
     GrapherQueryParams,
+    GrapherTabOption,
     SelectionArray,
     setSelectedEntityNamesParam,
     SlideShowController,
     SlideShowManager,
+    DEFAULT_GRAPHER_ENTITY_TYPE,
 } from "@ourworldindata/grapher"
 import {
     Bounds,
@@ -84,6 +87,7 @@ export interface ExplorerProps extends SerializedGridProgram {
     isPreview?: boolean
     canonicalUrl?: string
     selection?: SelectionArray
+    shouldOptimizeForHorizontalSpace?: boolean // only relevant for explorers with hidden controls
 }
 
 const renderLivePreviewVersion = (props: ExplorerProps) => {
@@ -184,7 +188,7 @@ export class Explorer
         this.props.selection ??
         new SelectionArray(this.explorerProgram.selection)
 
-    entityType = this.explorerProgram.entityType ?? "country or region"
+    entityType = this.explorerProgram.entityType ?? DEFAULT_GRAPHER_ENTITY_TYPE
 
     @observable.ref grapher?: Grapher
 
@@ -207,6 +211,17 @@ export class Explorer
         this.setGrapher(this.grapherRef!.current!)
         this.updateGrapherFromExplorer()
 
+        // Optimizing for horizontal space makes only sense if the controls are hidden
+        // and the explorer in fact looks like an ordinary grapher chart.
+        // Since switching between charts is not possible when the controls are hidden,
+        // we only need to run this code once.
+        if (
+            this.queryParams.hideControls &&
+            this.props.shouldOptimizeForHorizontalSpace
+        ) {
+            this.grapher!.shouldOptimizeForHorizontalSpace = true
+        }
+
         let url = Url.fromQueryParams(this.initialQueryParams)
 
         if (this.props.selection?.hasSelection) {
@@ -336,10 +351,13 @@ export class Explorer
         this.updateGrapherFromExplorer()
 
         // preserve the previous tab if that's still available in the new view;
-        // and use the first tab otherwise
+        // and use the first tab otherwise, ignoring the table
+        const tabsWithoutTable = this.grapher.availableTabs.filter(
+            (tab) => tab !== GrapherTabOption.table
+        )
         newGrapherParams.tab = this.grapher.availableTabs.includes(previousTab)
             ? previousTab
-            : this.grapher.availableTabs[0]
+            : tabsWithoutTable[0] ?? GrapherTabOption.table
 
         this.grapher.populateFromQueryParams(newGrapherParams)
     }
@@ -923,15 +941,12 @@ export class Explorer
 
     @computed get embedDialogAdditionalElements() {
         return (
-            <div style={{ marginTop: ".5rem" }}>
-                <label>
-                    <input
-                        type="checkbox"
-                        checked={this.embedDialogHideControls}
-                        onChange={this.embedDialogToggleHideControls}
-                    />{" "}
-                    Hide controls
-                </label>
+            <div style={{ marginTop: "1em" }}>
+                <Checkbox
+                    label="Hide controls"
+                    checked={this.embedDialogHideControls}
+                    onChange={this.embedDialogToggleHideControls}
+                />
             </div>
         )
     }

explorer/ExplorerConstants.ts

@@ -67,6 +67,7 @@ export const EMBEDDED_EXPLORER_PARTIAL_GRAPHER_CONFIGS =
     "\n//EMBEDDED_PARTIAL_EXPLORER_GRAPHER_CONFIGS\n"
 
 export const EXPLORER_EMBEDDED_FIGURE_SELECTOR = "data-explorer-src"
+export const EXPLORER_EMBEDDED_FIGURE_PROPS_ATTR = "data-explorer-props"
 
 export const ExplorerContainerId = "ExplorerContainer"
 

functions/_common/grapherRenderer.ts

@@ -7,9 +7,10 @@ import { png } from "itty-router"
 import svg2png_wasm from "../../node_modules/svg2png-wasm/svg2png_wasm_bg.wasm"
 
 // these are regular .ttf files, but cloudflare needs the .bin extension to serve them correctly
-import LatoRegular from "../_common/fonts/LatoLatin-Regular.ttf.bin" // https://raw.githubusercontent.com/googlefonts/LatoGFVersion/main/fonts/Lato-Regular.ttf
-import LatoBold from "../_common/fonts/LatoLatin-Bold.ttf.bin" // https://raw.githubusercontent.com/googlefonts/LatoGFVersion/main/fonts/Lato-Bold.ttf
-import PlayfairRegular from "../_common/fonts/PlayfairDisplayLatin-Regular.ttf.bin" // https://raw.githubusercontent.com/clauseggers/Playfair/1.202/fonts/TTF/PlayfairDisplay-Regular.ttf
+import LatoRegular from "../_common/fonts/LatoLatin-Regular.ttf.bin"
+import LatoMedium from "../_common/fonts/LatoLatin-Medium.ttf.bin"
+import LatoBold from "../_common/fonts/LatoLatin-Bold.ttf.bin"
+import PlayfairSemiBold from "../_common/fonts/PlayfairDisplayLatin-SemiBold.ttf.bin"
 import { Env } from "../grapher/thumbnail/[slug].js"
 
 declare global {
@@ -45,7 +46,7 @@ const TWITTER_OPTIONS: ImageOptions = {
     svgWidth: 800,
     svgHeight: 418,
     details: false,
-    fontSize: 24,
+    fontSize: 21,
 }
 
 const OPEN_GRAPH_OPTIONS: ImageOptions = {
@@ -55,7 +56,7 @@ const OPEN_GRAPH_OPTIONS: ImageOptions = {
     svgWidth: 800,
     svgHeight: 418,
     details: false,
-    fontSize: 24,
+    fontSize: 21,
 }
 
 let initialized = false
@@ -159,6 +160,7 @@ async function fetchAndRenderGrapherToSvg({
         queryStr: "?" + searchParams.toString(),
         bounds,
     })
+    grapher.isGeneratingThumbnail = true
     grapher.shouldIncludeDetailsInStaticExport = options.details
     grapher.baseFontSize = options.fontSize
 
@@ -225,7 +227,7 @@ async function renderSvgToPng(svg: string, options: ImageOptions) {
         // if we include details, pngHeight is only the height of the chart, but we also have an "appendix" at the bottom that we want to include
         height: options.details ? undefined : options.pngHeight,
         backgroundColor: "#fff",
-        fonts: [LatoRegular, LatoBold, PlayfairRegular].map(
+        fonts: [LatoRegular, LatoMedium, LatoBold, PlayfairSemiBold].map(
             (f) => new Uint8Array(f)
         ),
     })

package.json

@@ -5,6 +5,10 @@
         "node": ">=18.16"
     },
     "packageManager": "[email protected]",
+    "volta": {
+        "node": "18.16.1",
+        "yarn": "3.3.0"
+    },
     "scripts": {
         "batchTagWithGpt": "node --enable-source-maps ./itsJustJavascript/baker/batchTagWithGpt.js",
         "buildAndDeploySite": "node --enable-source-maps ./itsJustJavascript/baker/buildAndDeploySite.js",
@@ -139,6 +143,7 @@
         "googleapis": "^108.0.0",
         "handsontable": "^12.3.3",
         "html-to-text": "^8.2.0",
+        "indefinite": "^2.4.3",
         "instantsearch.js": "^4.56.9",
         "js-base64": "^3.7.2",
         "js-cookie": "^3.0.1",
@@ -219,6 +224,7 @@
         "@testing-library/jest-dom": "^6.1.3",
         "@testing-library/react": "^12.1.5",
         "@types/geojson": "^7946.0.10",
+        "@types/indefinite": "^2.3.2",
         "@types/jest": "^29.5.5",
         "@types/js-yaml": "^4.0.5",
         "@types/opener": "^1.4.0",

packages/@ourworldindata/grapher/src/axis/AxisConfig.ts

@@ -15,7 +15,6 @@ import {
 import { observable, computed } from "mobx"
 import { HorizontalAxis, VerticalAxis } from "./Axis"
 import { AxisConfigInterface, Tickmark } from "./AxisConfigInterface"
-import { ScaleSelectorManager } from "../controls/ScaleSelector"
 
 export interface FontSizeManager {
     fontSize: number
@@ -43,7 +42,7 @@ class AxisConfigDefaults implements AxisConfigInterface {
 
 export class AxisConfig
     extends AxisConfigDefaults
-    implements AxisConfigInterface, Persistable, ScaleSelectorManager
+    implements AxisConfigInterface, Persistable
 {
     constructor(
         props?: AxisConfigInterface,

packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.scss

@@ -1,3 +1,6 @@
+// keep in sync with constant values in CaptionedChart.tsx
+$controlRowHeight: 32px; // keep in sync with CONTROLS_ROW_HEIGHT
+
 .HeaderHTML,
 .SourcesFooterHTML {
     font-family: $sans-serif-font-stack;
@@ -6,60 +9,67 @@
     -webkit-font-smoothing: antialiased;
 }
 
-.HeaderHTML {
-    padding: 15px;
-    padding-bottom: 2px;
-    text-align: left;
+.controlsRow {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.relatedQuestion {
+    font-size: 12px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    border-top: 1px solid $frame-color;
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    color: $dark-text;
+    font-weight: 700;
 
     a {
-        text-decoration: none;
-        color: inherit;
+        font-weight: normal;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-decoration-line: underline;
+        text-underline-offset: auto;
 
         &:hover {
-            text-decoration: underline;
-            text-decoration-color: rgba(0, 0, 0, 0.2);
+            text-decoration-line: none;
         }
     }
 
-    h1 {
-        font-family: $serif-font-stack;
-        font-weight: normal;
-        color: #555;
-        margin: 0;
-    }
-
-    p {
-        color: #666;
-        margin: 0;
+    a,
+    svg {
+        color: inherit;
     }
 
-    .logo {
-        float: right;
-
-        svg {
-            height: 100% !important;
-            width: auto !important;
-        }
+    svg {
+        margin-left: 4px;
+        font-size: 0.9em;
+        vertical-align: unset;
     }
 }
 
-.SourcesFooterHTML {
-    padding: 15px;
-    padding-top: 0;
-    text-align: left;
+// when embedded in an owid page and viewed on a narrow screen,
+// grapher bleeds onto the edges horizontally and the top and bottom borders
+// stretch across the entire page. the top border of the related question element
+// should do the same.
+&.GrapherComponent.optimizeForHorizontalSpace .relatedQuestion {
+    border-top: 0;
 
-    a {
-        color: #777;
-        &:visited {
-            color: #777;
-        }
+    // adds a top border that stretches across the entire page.
+    // since we don't know the width of the page, we use a large number (200vw)
+    // and offset it by another large number (-50vw) to make sure the border
+    // stretches across the entire page.
+    &::before {
+        content: "";
+        position: absolute;
+        left: -50vw;
+        height: 1px;
+        width: 200vw;
+        background: $frame-color;
+        top: 0;
     }
-
-    p {
-        margin: 0;
-    }
-}
-
-.SourcesFooterHTML.compact .license {
-    float: right;
 }