Skip to content

Commit

Permalink
🔨 Make explorers work again
Browse files Browse the repository at this point in the history
  • Loading branch information
@danyx23
danyx23 committed Jan 10, 2025
1 parent 68b9eaf commit a728d47
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 49 deletions.
107 changes: 60 additions & 47 deletions packages/@ourworldindata/explorer/src/Explorer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,7 @@ export class Explorer
{
analytics = new GrapherAnalytics()
grapherState: GrapherState
inputTableTransformer = (table: OwidTable) => table

constructor(props: ExplorerProps) {
super(props)
Expand Down Expand Up @@ -490,7 +491,8 @@ export class Explorer

@action.bound private setGrapherTable(table: OwidTable) {
if (this.grapher) {
this.grapher.grapherState.inputTable = table
this.grapher.grapherState.inputTable =
this.inputTableTransformer(table)
this.grapher.appendNewEntitySelectionOptions()
}
}
Expand Down Expand Up @@ -564,7 +566,7 @@ export class Explorer
)
}

@action.bound updateGrapherFromExplorerUsingGrapherId() {
@action.bound async updateGrapherFromExplorerUsingGrapherId() {
const grapher = this.grapher
if (!grapher) return

Expand All @@ -591,7 +593,13 @@ export class Explorer
grapher?.grapherState.setAuthoredVersion(config)
grapher.grapherState.reset()
grapher?.grapherState.updateFromObject(config)
// grapher.downloadData()
const inputTable = await fetchInputTableForConfig(
config,
this.props.dataApiUrl
)
if (inputTable)
grapher.grapherState.inputTable =
this.inputTableTransformer(inputTable)
}

@action.bound async updateGrapherFromExplorerUsingVariableIds() {
Expand Down Expand Up @@ -711,47 +719,47 @@ export class Explorer
if (ySlugs && yVariableIds) config.ySlugs = ySlugs + " " + yVariableIds

// TODO: 2025-01-07 Daniel - do we still need this?
// const inputTableTransformer = (table: OwidTable) => {
// // add transformed (and intermediate) columns to the grapher table
// if (uniqueSlugsInGrapherRow.length) {
// const allColumnSlugs = uniq(
// uniqueSlugsInGrapherRow.flatMap((slug) => [
// ...this.getBaseColumnsForColumnWithTransform(slug),
// slug,
// ])
// )
// const existingColumnSlugs = table.columnSlugs
// const outstandingColumnSlugs = allColumnSlugs.filter(
// (slug) => !existingColumnSlugs.includes(slug)
// )
// const requiredColumnDefs = outstandingColumnSlugs
// .map(
// (slug) =>
// this.columnDefsWithoutTableSlugByIdOrSlug[slug]
// )
// .filter(identity)
// table = table.appendColumns(requiredColumnDefs)
// }

// // update column definitions with manually provided properties
// table = table.updateDefs((def: OwidColumnDef) => {
// const manuallyProvidedDef =
// this.columnDefsWithoutTableSlugByIdOrSlug[def.slug] ?? {}
// const mergedDef = { ...def, ...manuallyProvidedDef }

// // update display properties
// mergedDef.display ??= {}
// if (manuallyProvidedDef.name)
// mergedDef.display.name = manuallyProvidedDef.name
// if (manuallyProvidedDef.unit)
// mergedDef.display.unit = manuallyProvidedDef.unit
// if (manuallyProvidedDef.shortUnit)
// mergedDef.display.shortUnit = manuallyProvidedDef.shortUnit

// return mergedDef
// })
// return table
// }
this.inputTableTransformer = (table: OwidTable) => {
// add transformed (and intermediate) columns to the grapher table
if (uniqueSlugsInGrapherRow.length) {
const allColumnSlugs = uniq(
uniqueSlugsInGrapherRow.flatMap((slug) => [
...this.getBaseColumnsForColumnWithTransform(slug),
slug,
])
)
const existingColumnSlugs = table.columnSlugs
const outstandingColumnSlugs = allColumnSlugs.filter(
(slug) => !existingColumnSlugs.includes(slug)
)
const requiredColumnDefs = outstandingColumnSlugs
.map(
(slug) =>
this.columnDefsWithoutTableSlugByIdOrSlug[slug]
)
.filter(identity)
table = table.appendColumns(requiredColumnDefs)
}

// update column definitions with manually provided properties
table = table.updateDefs((def: OwidColumnDef) => {
const manuallyProvidedDef =
this.columnDefsWithoutTableSlugByIdOrSlug[def.slug] ?? {}
const mergedDef = { ...def, ...manuallyProvidedDef }

// update display properties
mergedDef.display ??= {}
if (manuallyProvidedDef.name)
mergedDef.display.name = manuallyProvidedDef.name
if (manuallyProvidedDef.unit)
mergedDef.display.unit = manuallyProvidedDef.unit
if (manuallyProvidedDef.shortUnit)
mergedDef.display.shortUnit = manuallyProvidedDef.shortUnit

return mergedDef
})
return table
}

grapher?.grapherState.setAuthoredVersion(config)
grapher.grapherState.reset()
Expand All @@ -769,7 +777,9 @@ export class Explorer
config,
this.props.dataApiUrl
)
if (inputTable) grapher.grapherState.inputTable = inputTable
if (inputTable)
grapher.grapherState.inputTable =
this.inputTableTransformer(inputTable)
}
}

Expand Down Expand Up @@ -996,7 +1006,7 @@ export class Explorer
private updateGrapherBounds() {
const grapherContainer = this.grapherContainerRef.current
if (grapherContainer)
this.grapherBounds = new Bounds(
this.grapherState.externalBounds = new Bounds(
0,
0,
grapherContainer.clientWidth,
Expand Down Expand Up @@ -1049,7 +1059,10 @@ export class Explorer
this.isNarrow &&
this.mobileCustomizeButton}
<div className="ExplorerFigure" ref={this.grapherContainerRef}>
<Grapher grapherState={this.grapherState} />
<Grapher
ref={this.grapherRef}
grapherState={this.grapherState}
/>
</div>
</div>
)
Expand Down
16 changes: 14 additions & 2 deletions packages/@ourworldindata/grapher/src/core/Grapher.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1617,8 +1617,20 @@ export class GrapherState {

isEditor =
typeof window !== "undefined" && (window as any).isEditor === true
@computed private get externalBounds(): Bounds {
return this.initialOptions.bounds ?? DEFAULT_BOUNDS

@observable _externalBounds: Bounds | undefined = undefined
/** externalBounds should be set to the available plotting area for a
Grapher that resizes itself to fit. When this area changes,
externalBounds should be updated. Updating externalBounds can
trigger a bunch of somewhat expensive recalculations so it might
be worth debouncing updates (e.g. when drag-resizing) */
@computed get externalBounds(): Bounds {
const { _externalBounds, initialOptions } = this
return _externalBounds ?? initialOptions.bounds ?? DEFAULT_BOUNDS
}

set externalBounds(bounds: Bounds) {
this._externalBounds = bounds
}

@computed get isInIFrame(): boolean {
Expand Down

0 comments on commit a728d47

Please sign in to comment.