{this.commandPalette}
{this.uncaughtError ? this.renderError() : this.renderReady()}
@@ -3530,13 +3666,16 @@ export class Grapher
render(): React.ReactElement | undefined {
// TODO how to handle errors in exports?
// TODO remove this? should have a simple toStaticSVG for exporting
- if (this.isExportingToSvgOrPng) return
+ if (this.grapherState.isExportingToSvgOrPng)
+ return
if (this.isInFullScreenMode) {
return (
{this.renderGrapherComponent()}
@@ -3549,55 +3688,68 @@ export class Grapher
private renderReady(): React.ReactElement | null {
if (!this.hasBeenVisible) return null
- if (this.renderToStatic) {
- return
+ if (this.grapherState.renderToStatic) {
+ return
}
return (
<>
{/* captioned chart and entity selector */}
-
+
{this.sidePanelBounds && (
-
+
)}
{/* modals */}
- {this.isSourcesModalOpen &&
}
- {this.isDownloadModalOpen &&
}
- {this.isEmbedModalOpen &&
}
- {this.isEntitySelectorModalOpen && (
-
+ {this.grapherState.isSourcesModalOpen && (
+
+ )}
+ {this.grapherState.isDownloadModalOpen && (
+
+ )}
+ {this.grapherState.isEmbedModalOpen && (
+
+ )}
+ {this.grapherState.isEntitySelectorModalOpen && (
+
)}
{/* entity selector in a slide-in drawer */}
{
- this.isEntitySelectorModalOrDrawerOpen =
- !this.isEntitySelectorModalOrDrawerOpen
+ this.grapherState.isEntitySelectorModalOrDrawerOpen =
+ !this.grapherState.isEntitySelectorModalOrDrawerOpen
}}
>
-
+
{/* tooltip: either pin to the bottom or render into the chart area */}
- {this.shouldPinTooltipToBottom ? (
+ {this.grapherState.shouldPinTooltipToBottom ? (
) : (
)}
@@ -3613,14 +3765,19 @@ export class Grapher
if (entry.isIntersecting) {
this.hasBeenVisible = true
- if (this.slug && !this.hasLoggedGAViewEvent) {
- this.analytics.logGrapherView(this.slug)
+ if (
+ this.grapherState.slug &&
+ !this.hasLoggedGAViewEvent
+ ) {
+ this.analytics.logGrapherView(
+ this.grapherState.slug
+ )
this.hasLoggedGAViewEvent = true
}
}
// dismiss tooltip when less than 2/3 of the chart is visible
- const tooltip = this.tooltip?.get()
+ const tooltip = this.grapherState.tooltip?.get()
const isNotVisible = !entry.isIntersecting
const isPartiallyVisible =
entry.isIntersecting &&
@@ -3633,7 +3790,7 @@ export class Grapher
{ threshold: [0, 0.66] }
)
observer.observe(this.containerElement!)
- this.disposers.push(() => observer.disconnect())
+ this.grapherState.disposers.push(() => observer.disconnect())
} else {
// IntersectionObserver not available; we may be in a Node environment, just render
this.hasBeenVisible = true
@@ -3641,25 +3798,12 @@ export class Grapher
}
set baseFontSize(val: number) {
- this._baseFontSize = val
- }
-
- private computeBaseFontSizeFromHeight(bounds: Bounds): number {
- const squareBounds = this.getStaticBounds(GrapherStaticFormat.square)
- const factor = squareBounds.height / 21
- return Math.max(10, bounds.height / factor)
- }
-
- private computeBaseFontSizeFromWidth(bounds: Bounds): number {
- if (bounds.width <= 400) return 14
- else if (bounds.width < 1080) return 16
- else if (bounds.width >= 1080) return 18
- else return 16
+ this.grapherState._baseFontSize = val
}
@action.bound private setBaseFontSize(): void {
- this.baseFontSize = this.computeBaseFontSizeFromWidth(
- this.captionedChartBounds
+ this.baseFontSize = this.grapherState.computeBaseFontSizeFromWidth(
+ this.grapherState.captionedChartBounds
)
}
@@ -3669,21 +3813,21 @@ export class Grapher
// There is a surprisingly considerable performance overhead to updating the url
// while animating, so we debounce to allow e.g. smoother timelines
const pushParams = (): void =>
- setWindowQueryStr(queryParamsToStr(this.changedParams))
+ setWindowQueryStr(queryParamsToStr(this.grapherState.changedParams))
const debouncedPushParams = debounce(pushParams, 100)
reaction(
- () => this.changedParams,
+ () => this.grapherState.changedParams,
() => (this.debounceMode ? debouncedPushParams() : pushParams())
)
- autorun(() => (document.title = this.currentTitle))
+ autorun(() => (document.title = this.grapherState.currentTitle))
}
@action.bound private setUpWindowResizeEventHandler(): void {
const updateWindowDimensions = (): void => {
- this.windowInnerWidth = window.innerWidth
- this.windowInnerHeight = window.innerHeight
+ this.grapherState.windowInnerWidth = window.innerWidth
+ this.grapherState.windowInnerHeight = window.innerHeight
}
const onResize = debounce(updateWindowDimensions, 400, {
leading: true,
@@ -3692,7 +3836,7 @@ export class Grapher
if (typeof window !== "undefined") {
updateWindowDimensions()
window.addEventListener("resize", onResize)
- this.disposers.push(() => {
+ this.grapherState.disposers.push(() => {
window.removeEventListener("resize", onResize)
})
}
@@ -3705,11 +3849,11 @@ export class Grapher
exposeInstanceOnWindow(this, "grapher")
// Emit a custom event when the grapher is ready
// We can use this in global scripts that depend on the grapher e.g. the site-screenshots tool
- this.disposers.push(
+ this.grapherState.disposers.push(
reaction(
- () => this.isReady,
+ () => this.grapherState.isReady,
() => {
- if (this.isReady) {
+ if (this.grapherState.isReady) {
document.dispatchEvent(
new CustomEvent(GRAPHER_LOADED_EVENT_NAME, {
detail: { grapher: this },
@@ -3720,11 +3864,12 @@ export class Grapher
),
reaction(
() => this.facetStrategy,
- () => this.focusArray.clear()
+ () => this.grapherState.focusArray.clear()
)
)
- if (this.props.bindUrlToWindow) this.bindToWindow()
- if (this.props.enableKeyboardShortcuts) this.bindKeyboardShortcuts()
+ if (this.grapherState.bindUrlToWindow) this.bindToWindow()
+ if (this.grapherState.enableKeyboardShortcuts)
+ this.bindKeyboardShortcuts()
}
private _shortcutsBound = false
@@ -3765,99 +3910,26 @@ export class Grapher
this.analytics.logGrapherViewError(error)
}
- @action.bound clearSelection(): void {
- this.selection.clearSelection()
- this.applyOriginalSelectionAsAuthored()
- }
-
- @action.bound clearQueryParams(): void {
- const { authorsVersion } = this
- this.tab = authorsVersion.tab
- this.xAxis.scaleType = authorsVersion.xAxis.scaleType
- this.yAxis.scaleType = authorsVersion.yAxis.scaleType
- this.stackMode = authorsVersion.stackMode
- this.zoomToSelection = authorsVersion.zoomToSelection
- this.compareEndPointsOnly = authorsVersion.compareEndPointsOnly
- this.minTime = authorsVersion.minTime
- this.maxTime = authorsVersion.maxTime
- this.map.time = authorsVersion.map.time
- this.map.projection = authorsVersion.map.projection
- this.showSelectionOnlyInDataTable =
- authorsVersion.showSelectionOnlyInDataTable
- this.showNoDataArea = authorsVersion.showNoDataArea
- this.clearSelection()
- }
-
// Todo: come up with a more general pattern?
// The idea here is to reset the Grapher to a blank slate, so that if you updateFromObject and the object contains some blanks, those blanks
// won't overwrite defaults (like type == LineChart). RAII would probably be better, but this works for now.
@action.bound reset(): void {
- const grapher = new Grapher()
+ const grapherState = new GrapherState({})
for (const key of grapherKeysToSerialize) {
// @ts-expect-error grapherKeysToSerialize is not properly typed
- this[key] = grapher[key]
+ this.grapherState[key] = grapherState[key]
}
- this.ySlugs = grapher.ySlugs
- this.xSlug = grapher.xSlug
- this.colorSlug = grapher.colorSlug
- this.sizeSlug = grapher.sizeSlug
+ this.grapherState.ySlugs = grapherState.ySlugs
+ this.grapherState.xSlug = grapherState.xSlug
+ this.grapherState.colorSlug = grapherState.colorSlug
+ this.grapherState.sizeSlug = grapherState.sizeSlug
- this.selection.clearSelection()
+ this.grapherState.selection.clearSelection()
}
debounceMode = false
- private mapQueryParamToGrapherTab(tab: string): GrapherTabName | undefined {
- const {
- chartType: defaultChartType,
- validChartTypeSet,
- hasMapTab,
- } = this
-
- if (tab === GRAPHER_TAB_QUERY_PARAMS.table) {
- return GRAPHER_TAB_NAMES.Table
- }
- if (tab === GRAPHER_TAB_QUERY_PARAMS.map) {
- return GRAPHER_TAB_NAMES.WorldMap
- }
-
- if (tab === GRAPHER_TAB_QUERY_PARAMS.chart) {
- if (defaultChartType) {
- return defaultChartType
- } else if (hasMapTab) {
- return GRAPHER_TAB_NAMES.WorldMap
- } else {
- return GRAPHER_TAB_NAMES.Table
- }
- }
-
- const chartTypeName = mapQueryParamToChartTypeName(tab)
-
- if (!chartTypeName) return undefined
-
- if (validChartTypeSet.has(chartTypeName)) {
- return chartTypeName
- } else if (defaultChartType) {
- return defaultChartType
- } else if (hasMapTab) {
- return GRAPHER_TAB_NAMES.WorldMap
- } else {
- return GRAPHER_TAB_NAMES.Table
- }
- }
-
- mapGrapherTabToQueryParam(tab: GrapherTabName): string {
- if (tab === GRAPHER_TAB_NAMES.Table)
- return GRAPHER_TAB_QUERY_PARAMS.table
- if (tab === GRAPHER_TAB_NAMES.WorldMap)
- return GRAPHER_TAB_QUERY_PARAMS.map
-
- if (!this.hasMultipleChartTypes) return GRAPHER_TAB_QUERY_PARAMS.chart
-
- return mapChartTypeNameToQueryParam(tab)
- }
-
// todo: restore this behavior??
onStartPlayOrDrag(): void {
this.debounceMode = true
@@ -3868,7 +3940,7 @@ export class Grapher
}
formatTime(value: Time): string {
- const timeColumn = this.table.timeColumn
+ const timeColumn = this.grapherState.table.timeColumn
return isMobile()
? timeColumn.formatValueForMobile(value)
: timeColumn.formatValue(value)
@@ -3876,7 +3948,7 @@ export class Grapher
}
const defaultObject = objectWithPersistablesToObject(
- new Grapher(),
+ new GrapherState({}),
grapherKeysToSerialize
)
diff --git a/packages/@ourworldindata/grapher/src/core/GrapherUrl.ts b/packages/@ourworldindata/grapher/src/core/GrapherUrl.ts
index de8d7f2ce19..0771aa60470 100644
--- a/packages/@ourworldindata/grapher/src/core/GrapherUrl.ts
+++ b/packages/@ourworldindata/grapher/src/core/GrapherUrl.ts
@@ -9,7 +9,11 @@ import {
generateSelectedEntityNamesParam,
} from "./EntityUrlBuilder.js"
import { match } from "ts-pattern"
-import { Grapher } from "./Grapher.js"
+import {
+ Grapher,
+ GrapherProgrammaticInterface,
+ GrapherState,
+} from "./Grapher.js"
// This function converts a (potentially partial) GrapherInterface to the query params this translates to.
// This is helpful for when we have a patch config to a parent chart, and we want to know which query params we need to get the parent chart as close as possible to the patched child chart.
@@ -78,12 +82,12 @@ export const grapherConfigToQueryParams = (
}
export const grapherObjectToQueryParams = (
- grapher: Grapher
+ grapher: GrapherState
): GrapherQueryParams => {
const params: GrapherQueryParams = {
tab: grapher.mapGrapherTabToQueryParam(grapher.activeTab),
- xScale: grapher.xAxis.scaleType,
- yScale: grapher.yAxis.scaleType,
+ xScale: grapher.xAxis?.scaleType,
+ yScale: grapher.yAxis?.scaleType,
stackMode: grapher.stackMode,
zoomToSelection: grapher.zoomToSelection ? "true" : undefined,
endpointsOnly: grapher.compareEndPointsOnly ? "1" : "0",
diff --git a/packages/@ourworldindata/grapher/src/core/GrapherWithChartTypes.jsdom.test.tsx b/packages/@ourworldindata/grapher/src/core/GrapherWithChartTypes.jsdom.test.tsx
index 6a4c8bb65b1..6d53bc759cc 100755
--- a/packages/@ourworldindata/grapher/src/core/GrapherWithChartTypes.jsdom.test.tsx
+++ b/packages/@ourworldindata/grapher/src/core/GrapherWithChartTypes.jsdom.test.tsx
@@ -5,14 +5,18 @@ import {
SynthesizeGDPTable,
SampleColumnSlugs,
} from "@ourworldindata/core-table"
-import { Grapher, GrapherProgrammaticInterface } from "../core/Grapher"
+import {
+ Grapher,
+ GrapherProgrammaticInterface,
+ GrapherState,
+} from "../core/Grapher"
import { MapChart } from "../mapCharts/MapChart"
import { legacyMapGrapher } from "../mapCharts/MapChart.sample"
import { GRAPHER_CHART_TYPES } from "@ourworldindata/types"
describe("grapher and map charts", () => {
describe("map time tolerance plus query string works with a map chart", () => {
- const grapher = new Grapher(legacyMapGrapher)
+ const grapher = new GrapherState(legacyMapGrapher)
expect(grapher.mapColumnSlug).toBe("3512")
expect(grapher.inputTable.minTime).toBe(2000)
expect(grapher.inputTable.maxTime).toBe(2010)
@@ -26,7 +30,7 @@ describe("grapher and map charts", () => {
})
it("can change time and see more points", () => {
- const manager = new Grapher(legacyMapGrapher)
+ const manager = new GrapherState(legacyMapGrapher)
const chart = new MapChart({ manager })
expect(Object.keys(chart.series).length).toEqual(1)
@@ -49,7 +53,7 @@ const basicGrapherConfig: GrapherProgrammaticInterface = {
}
describe("grapher and discrete bar charts", () => {
- const grapher = new Grapher({
+ const grapher = new GrapherState({
chartTypes: [GRAPHER_CHART_TYPES.DiscreteBar],
...basicGrapherConfig,
})
diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.sample.ts b/packages/@ourworldindata/grapher/src/dataTable/DataTable.sample.ts
index 885b71afdf8..5b8d705e924 100644
--- a/packages/@ourworldindata/grapher/src/dataTable/DataTable.sample.ts
+++ b/packages/@ourworldindata/grapher/src/dataTable/DataTable.sample.ts
@@ -1,5 +1,5 @@
import { DimensionProperty } from "@ourworldindata/utils"
-import { Grapher } from "../core/Grapher"
+import { Grapher, GrapherState } from "../core/Grapher"
import { GRAPHER_TAB_OPTIONS, GrapherInterface } from "@ourworldindata/types"
import {
TestMetadata,
@@ -9,7 +9,7 @@ import {
export const childMortalityGrapher = (
props: Partial
= {}
-): Grapher => {
+): GrapherState => {
const childMortalityId = 104402
const childMortalityMetadata: TestMetadata = {
id: childMortalityId,
@@ -36,7 +36,7 @@ export const childMortalityGrapher = (
property: DimensionProperty.y,
},
]
- return new Grapher({
+ return new GrapherState({
hasMapTab: true,
tab: GRAPHER_TAB_OPTIONS.map,
dimensions,
@@ -52,7 +52,7 @@ export const childMortalityGrapher = (
export const GrapherWithIncompleteData = (
props: Partial = {}
-): Grapher => {
+): GrapherState => {
const indicatorId = 3512
const metadata = { id: indicatorId, shortUnit: "%" }
const data = [
@@ -84,7 +84,7 @@ export const GrapherWithIncompleteData = (
},
},
]
- return new Grapher({
+ return new GrapherState({
tab: GRAPHER_TAB_OPTIONS.table,
dimensions,
...props,
@@ -94,7 +94,7 @@ export const GrapherWithIncompleteData = (
export const GrapherWithAggregates = (
props: Partial = {}
-): Grapher => {
+): GrapherState => {
const childMortalityId = 104402
const childMortalityMetadata: TestMetadata = {
id: childMortalityId,
@@ -124,7 +124,7 @@ export const GrapherWithAggregates = (
property: DimensionProperty.y,
},
]
- return new Grapher({
+ return new GrapherState({
tab: GRAPHER_TAB_OPTIONS.table,
dimensions,
...props,
@@ -136,7 +136,7 @@ export const GrapherWithAggregates = (
export const GrapherWithMultipleVariablesAndMultipleYears = (
props: Partial = {}
-): Grapher => {
+): GrapherState => {
const abovePovertyLineId = 514050
const belowPovertyLineId = 472265
@@ -168,7 +168,7 @@ export const GrapherWithMultipleVariablesAndMultipleYears = (
],
}
- return new Grapher({
+ return new GrapherState({
tab: GRAPHER_TAB_OPTIONS.table,
dimensions,
...props,
diff --git a/packages/@ourworldindata/grapher/src/index.ts b/packages/@ourworldindata/grapher/src/index.ts
index c87cd005de6..482c585f982 100644
--- a/packages/@ourworldindata/grapher/src/index.ts
+++ b/packages/@ourworldindata/grapher/src/index.ts
@@ -7,7 +7,10 @@ export {
type ColorScaleBin,
} from "./color/ColorScaleBin"
export { ChartDimension } from "./chart/ChartDimension"
-export { FetchingGrapher } from "./core/FetchingGrapher"
+export {
+ FetchingGrapher,
+ fetchInputTableForConfig,
+} from "./core/FetchingGrapher"
export {
GRAPHER_EMBEDDED_FIGURE_ATTR,
GRAPHER_EMBEDDED_FIGURE_CONFIG_ATTR,
@@ -55,6 +58,7 @@ export {
export { GlobalEntitySelector } from "./controls/globalEntitySelector/GlobalEntitySelector"
export {
Grapher,
+ GrapherState,
type GrapherProgrammaticInterface,
type GrapherManager,
getErrorMessageRelatedQuestionUrl,
diff --git a/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx b/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx
index 6a3c29eb8c7..d4d9795077c 100644
--- a/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx
+++ b/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx
@@ -244,6 +244,7 @@ export class MapChart
id: feature.id,
series: series || { value: "No data" },
}
+ console.log("Changing focusEntity")
if (feature.id !== undefined) {
const featureId = feature.id as string,
diff --git a/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.jsdom.test.tsx b/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.jsdom.test.tsx
index ad85afe950a..498b7d66599 100755
--- a/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.jsdom.test.tsx
+++ b/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.jsdom.test.tsx
@@ -1,12 +1,14 @@
#! /usr/bin/env jest
-import { Grapher } from "../core/Grapher.js"
+import { Grapher, GrapherState } from "../core/Grapher.js"
import { legacyMapGrapher } from "./MapChart.sample.js"
import Enzyme from "enzyme"
import Adapter from "@wojtekmaj/enzyme-adapter-react-17"
Enzyme.configure({ adapter: new Adapter() })
-const grapherWrapper = Enzyme.mount()
+const grapherWrapper = Enzyme.mount(
+
+)
test("map tooltip renders iff mouseenter", () => {
expect(grapherWrapper.find(".Tooltip")).toHaveLength(0)
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.test.ts b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.test.ts
index 04c95cb6b9b..0963df6021f 100755
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.test.ts
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.test.ts
@@ -27,7 +27,7 @@ import {
import { ContinentColors } from "../color/CustomSchemes"
import { sortBy, uniq, uniqBy } from "@ourworldindata/utils"
import { ScatterPointsWithLabels } from "./ScatterPointsWithLabels"
-import { Grapher } from "../core/Grapher"
+import { Grapher, GrapherState } from "../core/Grapher"
it("can create a new chart", () => {
const manager: ScatterPlotManager = {
@@ -142,7 +142,7 @@ describe("interpolation defaults", () => {
]
)
- const grapher = new Grapher({
+ const grapher = new GrapherState({
table,
chartTypes: [GRAPHER_CHART_TYPES.ScatterPlot],
xSlug: "x",
@@ -199,7 +199,7 @@ describe("basic scatterplot", () => {
]
)
- const grapher = new Grapher({
+ const grapher = new GrapherState({
chartTypes: [GRAPHER_CHART_TYPES.ScatterPlot],
xSlug: "x",
ySlugs: "y",
@@ -429,7 +429,7 @@ describe("entity exclusion", () => {
]
)
- const grapher = new Grapher({
+ const grapher = new GrapherState({
chartTypes: [GRAPHER_CHART_TYPES.ScatterPlot],
xSlug: "x",
ySlugs: "y",
@@ -819,7 +819,7 @@ describe("x/y tolerance", () => {
]
)
- const grapher = new Grapher({
+ const grapher = new GrapherState({
chartTypes: [GRAPHER_CHART_TYPES.ScatterPlot],
xSlug: "x",
ySlugs: "y",
@@ -1064,7 +1064,7 @@ it("applies color tolerance before applying the author timeline filter", () => {
]
)
- const grapher = new Grapher({
+ const grapher = new GrapherState({
table,
chartTypes: [GRAPHER_CHART_TYPES.ScatterPlot],
xSlug: "x",
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.jsdom.test.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.jsdom.test.tsx
index c20ed644b8f..1b9d29afa00 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.jsdom.test.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.jsdom.test.tsx
@@ -3,7 +3,7 @@
import { Bounds, ColumnTypeNames } from "@ourworldindata/utils"
import { OwidTable } from "@ourworldindata/core-table"
import { DefaultColorScheme } from "../color/CustomSchemes"
-import { Grapher } from "../core/Grapher"
+import { Grapher, GrapherState } from "../core/Grapher"
import { GRAPHER_CHART_TYPES } from "@ourworldindata/types"
import { MarimekkoChart } from "./MarimekkoChart"
import { BarShape, PlacedItem } from "./MarimekkoChartConstants"
@@ -30,7 +30,7 @@ it("can filter years correctly", () => {
xSlug: "population",
endTime: 2001,
}
- const grapher = new Grapher(manager)
+ const grapher = new GrapherState(manager)
const chart = new MarimekkoChart({
manager: grapher,
bounds: new Bounds(0, 0, 1000, 1000),
@@ -140,7 +140,7 @@ it("shows no data points at the end", () => {
xSlug: "population",
endTime: 2001,
}
- const grapher = new Grapher(manager)
+ const grapher = new GrapherState(manager)
const chart = new MarimekkoChart({
manager: grapher,
bounds: new Bounds(0, 0, 1001, 1000),
@@ -240,7 +240,7 @@ test("interpolation works as expected", () => {
xSlug: "population",
endTime: 2001,
}
- const grapher = new Grapher(manager)
+ const grapher = new GrapherState(manager)
const chart = new MarimekkoChart({
manager: grapher,
bounds: new Bounds(0, 0, 1000, 1000),
@@ -351,7 +351,7 @@ it("can deal with y columns with missing values", () => {
xSlug: "population",
endTime: 2001,
}
- const grapher = new Grapher(manager)
+ const grapher = new GrapherState(manager)
const chart = new MarimekkoChart({
manager: grapher,
bounds: new Bounds(0, 0, 1000, 1000),
diff --git a/packages/@ourworldindata/grapher/src/testData/OwidTestData.sample.ts b/packages/@ourworldindata/grapher/src/testData/OwidTestData.sample.ts
index 542a1b2ea2b..0d38ced8086 100644
--- a/packages/@ourworldindata/grapher/src/testData/OwidTestData.sample.ts
+++ b/packages/@ourworldindata/grapher/src/testData/OwidTestData.sample.ts
@@ -1,5 +1,9 @@
import { DimensionProperty } from "@ourworldindata/utils"
-import { Grapher, GrapherProgrammaticInterface } from "../core/Grapher"
+import {
+ Grapher,
+ GrapherProgrammaticInterface,
+ GrapherState,
+} from "../core/Grapher"
import {
TestMetadata,
createOwidTestDataset,
@@ -13,7 +17,7 @@ Grapher properties:
*/
export const LifeExpectancyGrapher = (
props: Partial = {}
-): Grapher => {
+): GrapherState => {
const lifeExpectancyId = 815383
const lifeExpectancyMetadata: TestMetadata = {
id: lifeExpectancyId,
@@ -55,7 +59,7 @@ export const LifeExpectancyGrapher = (
property: DimensionProperty.y,
},
]
- return new Grapher({
+ return new GrapherState({
...props,
dimensions,
owidDataset: createOwidTestDataset([
diff --git a/site/DataPageV2Content.tsx b/site/DataPageV2Content.tsx
index d8dfa6c8976..b41f738e01e 100644
--- a/site/DataPageV2Content.tsx
+++ b/site/DataPageV2Content.tsx
@@ -1,14 +1,18 @@
-import { useState, useMemo } from "react";
+import React, { useState, useMemo } from "react"
import {
FetchingGrapher,
+ fetchInputTableForConfig,
+ Grapher,
GrapherProgrammaticInterface,
-} from "@ourworldindata/grapher";
+ GrapherState,
+ MapChart,
+} from "@ourworldindata/grapher"
import {
REUSE_THIS_WORK_SECTION_ID,
DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID,
-} from "@ourworldindata/components";
-import ReactDOM from "react-dom";
-import { RelatedCharts } from "./blocks/RelatedCharts.js";
+} from "@ourworldindata/components"
+import ReactDOM from "react-dom"
+import { RelatedCharts } from "./blocks/RelatedCharts.js"
import {
DataPageV2ContentFields,
formatAuthors,
@@ -17,38 +21,39 @@ import {
joinTitleFragments,
ImageMetadata,
DEFAULT_THUMBNAIL_FILENAME,
-} from "@ourworldindata/utils";
-import { AttachmentsContext, DocumentContext } from "./gdocs/OwidGdoc.js";
-import StickyNav from "./blocks/StickyNav.js";
-import { DebugProvider } from "./gdocs/DebugContext.js";
+} from "@ourworldindata/utils"
+import { AttachmentsContext, DocumentContext } from "./gdocs/OwidGdoc.js"
+import StickyNav from "./blocks/StickyNav.js"
+import { DebugProvider } from "./gdocs/DebugContext.js"
import {
ADMIN_BASE_URL,
BAKED_BASE_URL,
BAKED_GRAPHER_URL,
DATA_API_URL,
-} from "../settings/clientSettings.js";
-import Image from "./gdocs/components/Image.js";
-import AboutThisData from "./AboutThisData.js";
-import MetadataSection from "./MetadataSection.js";
-import TopicTags from "./TopicTags.js";
+} from "../settings/clientSettings.js"
+import Image from "./gdocs/components/Image.js"
+import AboutThisData from "./AboutThisData.js"
+import MetadataSection from "./MetadataSection.js"
+import TopicTags from "./TopicTags.js"
+import { reaction } from "mobx"
declare global {
interface Window {
- _OWID_DATAPAGEV2_PROPS: DataPageV2ContentFields;
- _OWID_GRAPHER_CONFIG: GrapherInterface;
+ _OWID_DATAPAGEV2_PROPS: DataPageV2ContentFields
+ _OWID_GRAPHER_CONFIG: GrapherInterface
}
}
-export const OWID_DATAPAGE_CONTENT_ROOT_ID = "owid-datapageJson-root";
+export const OWID_DATAPAGE_CONTENT_ROOT_ID = "owid-datapageJson-root"
// We still have topic pages on WordPress, whose featured images are specified as absolute URLs which this component handles
// Once we've migrated all WP topic pages to gdocs, we'll be able to remove this component and just use
const DatapageResearchThumbnail = ({
urlOrFilename,
}: {
- urlOrFilename: string | undefined | null;
+ urlOrFilename: string | undefined | null
}) => {
if (!urlOrFilename) {
- urlOrFilename = `${BAKED_BASE_URL}/${DEFAULT_THUMBNAIL_FILENAME}`;
+ urlOrFilename = `${BAKED_BASE_URL}/${DEFAULT_THUMBNAIL_FILENAME}`
}
if (urlOrFilename.startsWith("http")) {
return (
@@ -56,7 +61,7 @@ const DatapageResearchThumbnail = ({
src={urlOrFilename}
className="span-lg-cols-2 span-sm-cols-3"
/>
- );
+ )
}
return (
- );
-};
+ )
+}
export const DataPageV2Content = ({
datapageData,
@@ -77,13 +82,13 @@ export const DataPageV2Content = ({
tagToSlugMap,
imageMetadata,
}: DataPageV2ContentFields & {
- grapherConfig: GrapherInterface;
- imageMetadata: Record;
+ grapherConfig: GrapherInterface
+ imageMetadata: Record
}) => {
const titleFragments = joinTitleFragments(
datapageData.attributionShort,
datapageData.titleVariant
- );
+ )
// Initialize the grapher for client-side rendering
const mergedGrapherConfig: GrapherProgrammaticInterface = useMemo(
@@ -93,7 +98,67 @@ export const DataPageV2Content = ({
bindUrlToWindow: true,
}),
[grapherConfig]
- );
+ )
+
+ const grapher1State = useMemo(
+ () =>
+ new GrapherState({
+ ...mergedGrapherConfig,
+ queryStr: "",
+ dataApiUrl: DATA_API_URL,
+ adminBaseUrl: ADMIN_BASE_URL,
+ bakedGrapherURL: BAKED_GRAPHER_URL,
+ }),
+ [mergedGrapherConfig]
+ )
+ const grapher2State = useMemo(
+ () =>
+ new GrapherState({
+ ...mergedGrapherConfig,
+ tab: "map",
+ queryStr: "",
+ dataApiUrl: DATA_API_URL,
+ adminBaseUrl: ADMIN_BASE_URL,
+ bakedGrapherURL: BAKED_GRAPHER_URL,
+ }),
+ [mergedGrapherConfig]
+ )
+ React.useEffect(() => {
+ async function fetchTable(): Promise {
+ const inputTable = await fetchInputTableForConfig(
+ mergedGrapherConfig,
+ DATA_API_URL
+ )
+ if (inputTable) {
+ grapher1State.inputTable = inputTable
+ grapher2State.inputTable = inputTable
+ }
+ console.log(
+ "focused entity",
+ (grapher2State.chartInstance as MapChart).focusEntity
+ )
+ console.log(
+ "chart projection",
+ (grapher2State.chartInstance as MapChart).projection
+ )
+ reaction(
+ () => (grapher2State.chartInstance as MapChart).projection,
+ () => {
+ console.log(
+ "rerunning reaction",
+ (grapher2State.chartInstance as MapChart).projection
+ )
+
+ const projection = (grapher2State.chartInstance as MapChart)
+ .projection
+ grapher1State.selection.clearSelection()
+ if (projection)
+ grapher1State.selection.addToSelection([projection])
+ }
+ )
+ }
+ void fetchTable()
+ }, [grapher1State, grapher2State, mergedGrapherConfig])
const stickyNavLinks = [
{
@@ -111,9 +176,9 @@ export const DataPageV2Content = ({
target: "#" + DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID,
},
{ text: "Reuse This Work", target: "#" + REUSE_THIS_WORK_SECTION_ID },
- ];
+ ]
- const relatedResearchCandidates = datapageData.relatedResearch;
+ const relatedResearchCandidates = datapageData.relatedResearch
const relatedResearch =
relatedResearchCandidates.length > 3 &&
datapageData.topicTagsLinks?.length
@@ -121,20 +186,20 @@ export const DataPageV2Content = ({
const shared = intersection(
research.tags,
datapageData.topicTagsLinks ?? []
- );
- return shared.length > 0;
+ )
+ return shared.length > 0
})
- : relatedResearchCandidates;
+ : relatedResearchCandidates
for (const item of relatedResearch) {
// TODO: these are workarounds to not link to the (not really existing) template pages for energy or co2
// country profiles but instead to the topic page at the country selector.
if (item.url === "/co2-country-profile")
item.url =
- "/co2-and-greenhouse-gas-emissions#co2-and-greenhouse-gas-emissions-country-profiles";
+ "/co2-and-greenhouse-gas-emissions#co2-and-greenhouse-gas-emissions-country-profiles"
else if (item.url === "/energy-country-profile")
- item.url = "/energy#country-profiles";
+ item.url = "/energy#country-profiles"
else if (item.url === "/coronavirus-country-profile")
- item.url = "/coronavirus#coronavirus-country-profiles";
+ item.url = "/coronavirus#coronavirus-country-profiles"
}
return (
@@ -185,12 +250,8 @@ export const DataPageV2Content = ({
-
+
+
- );
-};
+ )
+}
export const hydrateDataPageV2Content = (isPreviewing?: boolean) => {
- const wrapper = document.querySelector(`#${OWID_DATAPAGE_CONTENT_ROOT_ID}`);
- const props: DataPageV2ContentFields = window._OWID_DATAPAGEV2_PROPS;
- const grapherConfig = window._OWID_GRAPHER_CONFIG;
+ const wrapper = document.querySelector(`#${OWID_DATAPAGE_CONTENT_ROOT_ID}`)
+ const props: DataPageV2ContentFields = window._OWID_DATAPAGEV2_PROPS
+ const grapherConfig = window._OWID_GRAPHER_CONFIG
ReactDOM.hydrate(
@@ -289,5 +350,5 @@ export const hydrateDataPageV2Content = (isPreviewing?: boolean) => {
/>
,
wrapper
- );
-};
+ )
+}
diff --git a/site/GrapherFigureView.tsx b/site/GrapherFigureView.tsx
index 8f1d472f566..e60bac03cff 100644
--- a/site/GrapherFigureView.tsx
+++ b/site/GrapherFigureView.tsx
@@ -1,6 +1,10 @@
import { useRef } from "react"
-import { Grapher, GrapherProgrammaticInterface } from "@ourworldindata/grapher"
+import {
+ Grapher,
+ GrapherProgrammaticInterface,
+ GrapherState,
+} from "@ourworldindata/grapher"
import {
ADMIN_BASE_URL,
BAKED_GRAPHER_URL,
@@ -19,28 +23,25 @@ export const GrapherFigureView = ({
const base = useRef(null)
const bounds = useElementBounds(base)
- const grapherProps: GrapherProgrammaticInterface = {
- ...grapher.toObject(),
- isEmbeddedInADataPage: grapher.isEmbeddedInADataPage,
- bindUrlToWindow: grapher.props.bindUrlToWindow,
- queryStr: grapher.props.bindUrlToWindow
+ const grapherState: GrapherState = new GrapherState({
+ ...grapher.grapherState.toObject(),
+ isEmbeddedInADataPage: grapher.grapherState.isEmbeddedInADataPage,
+ bindUrlToWindow: grapher.grapherState.initialOptions.bindUrlToWindow,
+ queryStr: grapher.grapherState.initialOptions.bindUrlToWindow
? window.location.search
- : undefined,
+ : "", // TODO: 2025-01-03 changed this from undefined to empty string - is this a problem?
bounds,
dataApiUrl: DATA_API_URL,
enableKeyboardShortcuts: true,
+ adminBaseUrl: ADMIN_BASE_URL,
+ bakedGrapherURL: BAKED_GRAPHER_URL,
...extraProps,
- }
+ })
return (
// They key= in here makes it so that the chart is re-loaded when the slug changes.
{bounds && (
-
+
)}
)