Merge pull request #2738 from owid/grapher-redesign-final-touchups

Grapher redesign: Final touchups
owid · Oct 11, 2023 · a754187 · a754187
2 parents fa6ab25 + ecea72d
commit a754187
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 14 deletions.
diff --git a/packages/@ourworldindata/grapher/src/controls/ActionButtons.tsx b/packages/@ourworldindata/grapher/src/controls/ActionButtons.tsx
@@ -245,7 +245,6 @@ export class ActionButtons extends React.Component<{
                         <li style={{ width: this.downloadButtonWidth }}>
                             <ActionButton
                                 label="Download"
-                                title="Download as .png or .svg"
                                 dataTrackNote="chart_click_download"
                                 showLabel={this.showButtonLabels}
                                 icon={faDownload}
@@ -295,7 +294,6 @@ export class ActionButtons extends React.Component<{
                                 style={{ width: "100%" }}
                             >
                                 <a
-                                    title="Explore the data"
                                     data-track-note="chart_click_exploredata"
                                     href={manager.canonicalUrl}
                                     target="_blank"
@@ -323,7 +321,6 @@ export function ActionButton(props: {
     onClick?: React.MouseEventHandler<HTMLButtonElement>
     onMouseDown?: React.MouseEventHandler<HTMLButtonElement>
     showLabel?: boolean
-    title?: string
     isActive?: boolean
     style?: React.CSSProperties
 }): JSX.Element {
@@ -336,7 +333,6 @@ export function ActionButton(props: {
                     (props.isActive ? "active" : "") +
                     (props.showLabel ? "" : " icon-only")
                 }
-                title={props.title ?? props.label}
                 data-track-note={props.dataTrackNote}
                 onClick={(e: React.MouseEvent<HTMLButtonElement>): void => {
                     if (props.onClick) props.onClick(e)

diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -2689,7 +2689,7 @@ export class Grapher
     }
 
     @computed get isOnCanonicalUrl(): boolean {
-        if (!this.canonicalUrl || this.isInIFrame) return false
+        if (!this.canonicalUrl) return false
         return (
             getWindowUrl().pathname === Url.fromURL(this.canonicalUrl).pathname
         )

diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.jsdom.test.tsx b/packages/@ourworldindata/grapher/src/dataTable/DataTable.jsdom.test.tsx
@@ -133,7 +133,7 @@ describe("when the table has aggregates", () => {
         view = Enzyme.mount(<DataTable manager={grapher} />)
     })
 
-    it("renders a title row for countries and regions", () => {
+    it("renders a separating title row for aggregates", () => {
         const titleRows = view.find("tbody .title")
         expect(titleRows).toHaveLength(1)
         expect(titleRows.at(0).text()).toBe("Other")

diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx b/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx
@@ -141,12 +141,7 @@ export class DataTable extends React.Component<{
     }
 
     @computed get manager(): DataTableManager {
-        return (
-            this.props.manager ?? {
-                table: BlankOwidTable(),
-                entityType: DEFAULT_GRAPHER_ENTITY_TYPE,
-            }
-        )
+        return this.props.manager ?? { table: BlankOwidTable() }
     }
 
     @computed private get entityType(): string {

diff --git a/packages/@ourworldindata/grapher/src/header/Header.tsx b/packages/@ourworldindata/grapher/src/header/Header.tsx
@@ -131,7 +131,7 @@ export class Header<
         const { manager } = this
 
         // avoid linking to a grapher/data page when we're already on it
-        if (manager.isOnCanonicalUrl) {
+        if (manager.isOnCanonicalUrl && !this.manager.isInIFrame) {
             return (
                 <h1 style={this.title.htmlStyle}>{this.title.renderHTML()}</h1>
             )
@@ -144,6 +144,7 @@ export class Header<
                     href={manager.canonicalUrl}
                     target="_blank"
                     rel="noopener noreferrer"
+                    data-track-note="chart_click_title"
                 >
                     <h1 style={this.title.htmlStyle}>
                         {this.title.renderHTML()}
@@ -159,6 +160,7 @@ export class Header<
                     href={manager.canonicalUrl}
                     target="_blank"
                     rel="noopener noreferrer"
+                    data-track-note="chart_click_title"
                 >
                     {this.title.renderHTML()}
                 </a>

diff --git a/packages/@ourworldindata/grapher/src/header/HeaderManager.ts b/packages/@ourworldindata/grapher/src/header/HeaderManager.ts
@@ -17,4 +17,5 @@ export interface HeaderManager {
     framePaddingHorizontal?: number
     framePaddingVertical?: number
     isOnCanonicalUrl?: boolean
+    isInIFrame?: boolean
 }
diff --git a/packages/@ourworldindata/grapher/src/modal/DownloadModal.scss b/packages/@ourworldindata/grapher/src/modal/DownloadModal.scss
@@ -69,6 +69,7 @@
             color: $light-text;
             font-size: 0.875em;
             font-weight: 500;
+            line-height: 1.15;
         }
     }
 
@@ -110,7 +111,7 @@
             opacity: 0.9;
             color: $light-text;
             font-weight: 500;
-            line-height: 1.5;
+            line-height: 1.15;
             letter-spacing: 0.14px;
         }