🚧 fix more type errors

adminSiteClient/ChartList.tsx

@@ -3,7 +3,11 @@ import { observer } from "mobx-react"
 import { runInAction, observable } from "mobx"
 import { bind } from "decko"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
-import { ChartTypeName, GrapherInterface } from "@ourworldindata/types"
+import {
+    ChartTypeName,
+    GrapherInterface,
+    GrapherTabOption,
+} from "@ourworldindata/types"
 import { startCase, DbChartTagJoin } from "@ourworldindata/utils"
 import { References, getFullReferencesCount } from "./ChartEditor.js"
 import { ChartRow } from "./ChartRow.js"
@@ -14,13 +18,14 @@ export interface ChartListItem {
     id: GrapherInterface["id"]
     title: GrapherInterface["title"]
     slug: GrapherInterface["slug"]
-    type: GrapherInterface["type"]
     internalNotes: GrapherInterface["internalNotes"]
     variantName: GrapherInterface["variantName"]
     isPublished: GrapherInterface["isPublished"]
     tab: GrapherInterface["tab"]
-    hasChartTab: GrapherInterface["hasChartTab"]
-    hasMapTab: GrapherInterface["hasMapTab"]
+
+    type: ChartTypeName
+    hasChartTab: boolean
+    hasMapTab: boolean
 
     lastEditedAt: string
     lastEditedBy: string
@@ -148,7 +153,7 @@ export function showChartType(chart: ChartListItem): string {
         ? startCase(ChartTypeName[chartType])
         : "Unknown"
 
-    if (chart.tab === "map") {
+    if (chart.tab === GrapherTabOption.WorldMap) {
         if (chart.hasChartTab) return `Map + ${displayType}`
         else return "Map"
     } else {

adminSiteClient/EditorBasicTab.tsx

@@ -11,13 +11,16 @@ import { observer } from "mobx-react"
 import {
     ChartTypeName,
     EntitySelectionMode,
+    GrapherTabOption,
     StackMode,
 } from "@ourworldindata/types"
 import {
     DimensionSlot,
     WorldEntityName,
     CONTINENTS_INDICATOR_ID,
     POPULATION_INDICATOR_ID_USED_IN_ADMIN,
+    allChartTypes,
+    allChartTypesDisabled,
 } from "@ourworldindata/grapher"
 import {
     DimensionProperty,
@@ -147,7 +150,10 @@ class DimensionSlotView<
             () => this.grapher.isReady,
             () => {
                 this.disposers.push(
-                    reaction(() => this.grapher.type, this.updateDefaults),
+                    reaction(
+                        () => this.grapher.availableTabs,
+                        this.updateDefaults
+                    ),
                     reaction(
                         () => this.grapher.yColumnsFromDimensions.length,
                         this.updateDefaults
@@ -355,16 +361,20 @@ export class EditorBasicTab<
 
     @action.bound onChartTypeChange(value: string) {
         const { grapher } = this.props.editor
-        // if availableTabs is a list, remove all but map
-        // if a record, set all but map to false
-        if (value === ChartTypeName.LineChart) {
-            // remove all charts from list
-            // add line – if slope toggle, add slope
-        } else {
-            // remove all charts from list
-            // add the one given
+
+        const newChartType = value as ChartTypeName
+        grapher.availableTabs = {
+            ...grapher.availableTabs,
+            ...allChartTypesDisabled,
+            [newChartType]: true,
+        }
+
+        if (
+            grapher.tab !== GrapherTabOption.Table &&
+            grapher.tab !== GrapherTabOption.WorldMap
+        ) {
+            grapher.tab = newChartType as unknown as GrapherTabOption
         }
-        grapher.type = value as ChartTypeName
 
         if (grapher.isMarimekko) {
             grapher.hideRelativeToggle = false
@@ -404,9 +414,6 @@ export class EditorBasicTab<
     render() {
         const { editor } = this.props
         const { grapher } = editor
-        const chartTypes = Object.keys(ChartTypeName).filter(
-            (chartType) => chartType !== ChartTypeName.WorldMap
-        )
 
         const isIndicatorChart = isIndicatorChartEditorInstance(editor)
 
@@ -416,9 +423,9 @@ export class EditorBasicTab<
 
                 <Section name="Type of chart">
                     <SelectField
-                        value={grapher.type}
+                        value={grapher.firstChartType}
                         onValue={this.onChartTypeChange}
-                        options={chartTypes.map((key) => ({
+                        options={allChartTypes.map((key) => ({
                             value: key,
                             label: startCase(key),
                         }))}
@@ -427,12 +434,30 @@ export class EditorBasicTab<
                         <Toggle
                             label="Chart tab"
                             value={grapher.hasChartTab}
-                            onValue={(value) => (grapher.hasChartTab = value)}
+                            onValue={(value) => {
+                                // TODO: remove false?
+                                if (value) {
+                                    grapher.availableTabs =
+                                        grapher.availableTabs ?? {}
+                                    grapher.availableTabs[
+                                        ChartTypeName.LineChart
+                                    ] = true
+                                } else {
+                                    grapher.availableTabs = {
+                                        ...grapher.availableTabs,
+                                        ...allChartTypesDisabled,
+                                    }
+                                }
+                            }}
                         />
                         <Toggle
                             label="Map tab"
                             value={grapher.hasMapTab}
-                            onValue={(value) => (grapher.hasMapTab = value)}
+                            onValue={(value) => {
+                                grapher.availableTabs =
+                                    grapher.availableTabs ?? {}
+                                grapher.availableTabs.WorldMap = value
+                            }}
                         />
                     </FieldsRow>
                 </Section>

adminSiteClient/EditorCustomizeTab.tsx

@@ -158,7 +158,7 @@ export class ColorSchemeSelector extends React.Component<{
                             value={grapher.baseColorScheme}
                             onChange={this.onChange}
                             onBlur={this.onBlur}
-                            chartType={this.props.grapher.type}
+                            chartType={this.props.grapher.chartType}
                             invertedColorScheme={!!grapher.invertColorScheme}
                             additionalOptions={[
                                 {
@@ -751,7 +751,7 @@ export class EditorCustomizeTab<
                 {grapher.chartInstanceExceptMap.colorScale && (
                     <EditorColorScaleSection
                         scale={grapher.chartInstanceExceptMap.colorScale}
-                        chartType={grapher.type}
+                        chartType={grapher.chartType}
                         showLineChartColors={grapher.isLineChart}
                         features={{
                             visualScaling: true,

adminSiteClient/GrapherConfigGridEditor.tsx

@@ -512,7 +512,7 @@ export class GrapherConfigGridEditor extends React.Component<GrapherConfigGridEd
                         return (
                             <EditorColorScaleSection
                                 scale={colorScale}
-                                chartType={grapher.type}
+                                chartType={grapher.chartType}
                                 features={{
                                     visualScaling: true,
                                     legendDescription: false,

adminSiteClient/VariableEditPage.tsx

@@ -688,23 +688,23 @@ class VariableEditor extends React.Component<{
     @computed private get grapherConfig(): GrapherInterface {
         const { variable } = this.props
         const grapherConfig = variable.grapherConfig
-        if (grapherConfig) {
-            const availableTabs = grapherConfig.availableTabs ?? []
-            if (!availableTabs.includes(ChartTypeName.WorldMap)) {
-                // ok to append since Grapher ignores the order of tabs
-                availableTabs.push(ChartTypeName.WorldMap)
-            }
+        if (grapherConfig)
             return {
                 ...grapherConfig,
-                availableTabs,
+                availableTabs: {
+                    ...grapherConfig.availableTabs,
+                    [ChartTypeName.WorldMap]: true,
+                },
                 tab: GrapherTabOption.WorldMap,
             }
-        } else {
+        else
             return {
                 yAxis: { min: 0 },
                 map: { columnSlug: this.props.variable.id.toString() },
                 tab: GrapherTabOption.WorldMap,
-                availableTabs: [ChartTypeName.WorldMap],
+                availableTabs: {
+                    [ChartTypeName.WorldMap]: true,
+                },
                 dimensions: [
                     {
                         property: DimensionProperty.y,
@@ -713,7 +713,6 @@ class VariableEditor extends React.Component<{
                     },
                 ],
             }
-        }
     }
 
     dispose!: IReactionDisposer

baker/updateChartEntities.ts

@@ -97,7 +97,7 @@ const obtainAvailableEntitiesForGrapherConfig = async (
 
     // If the grapher has a chart tab, then the available entities there are the "most interesting" ones to us
     if (grapher.hasChartTab) {
-        grapher.tab = grapher.mainChartType
+        grapher.tab = grapher.firstChartType as unknown as GrapherTabOption
 
         // If the grapher allows for changing or multi-selecting entities, then let's index all entities the
         // user can choose from. Otherwise, we'll just use the default-selected entities.

db/migration/1661264304751-MigrateSelectedData.ts

@@ -3,7 +3,9 @@ import { MigrationInterface, QueryRunner } from "typeorm"
 
 import { entityNameById } from "./data/entityNameById.js"
 
-import { ChartTypeName, GrapherInterface } from "@ourworldindata/types"
+import { ChartTypeName } from "@ourworldindata/types"
+
+type GrapherInterface = Record<string, any>
 
 /**
  * Migrate the legacy `selectedData` and get rid of it.

db/model/Chart.ts

@@ -526,12 +526,12 @@ export const oldChartFieldList = `
         charts.id,
         chart_configs.full->>"$.title" AS title,
         chart_configs.full->>"$.slug" AS slug,
-        chart_configs.full->>"$.type" AS type,
+        chart_configs.chartType AS type,
         chart_configs.full->>"$.internalNotes" AS internalNotes,
         chart_configs.full->>"$.variantName" AS variantName,
         chart_configs.full->>"$.tab" AS tab,
-        JSON_EXTRACT(chart_configs.full, "$.hasChartTab") = true AS hasChartTab,
-        JSON_EXTRACT(chart_configs.full, "$.hasMapTab") = true AS hasMapTab,
+        chart_configs.chartType IS NOT NULL AS hasChartTab,
+        JSON_EXTRACT(chart_configs.full, "$.availableTabs.WorldMap") = true AS hasMapTab,
         JSON_EXTRACT(chart_configs.full, "$.isPublished") = true AS isPublished,
         charts.lastEditedAt,
         charts.lastEditedByUserId,

db/model/Gdoc/GdocBase.ts

@@ -934,7 +934,7 @@ export async function makeGrapherLinkedChart(
     const resolvedSlug = config.slug ?? ""
     const resolvedTitle = config.title ?? ""
     const resolvedUrl = `${BAKED_GRAPHER_URL}/${resolvedSlug}`
-    const tab = config.tab ?? GrapherTabOption.chart
+    const tab = config.tab
     const datapageIndicator = await getVariableOfDatapageIfApplicable(config)
     return {
         configType: ChartConfigType.Grapher,

devTools/svgTester/utils.ts

@@ -426,7 +426,7 @@ export async function renderSvg(
     const svgRecord = {
         chartId: configAndData.config.id!,
         slug: configAndData.config.slug!,
-        chartType: grapher.tab === "chart" ? grapher.type : grapher.tab,
+        chartType: grapher.currentTab,
         queryStr,
         md5: processSvgAndCalculateHash(svg),
         svgFilename: outFilename,

packages/@ourworldindata/explorer/src/Explorer.jsdom.test.tsx

@@ -49,7 +49,7 @@ describe(Explorer, () => {
 
         explorer.onChangeChoice("Gas")("All GHGs (CO₂eq)")
 
-        expect(explorer.grapher.tab).toEqual("chart")
+        expect(explorer.grapher.tab).toEqual(GrapherTabOption.LineChart)
         expect(explorer.queryParams.tab).toEqual(undefined)
     })
 

packages/@ourworldindata/explorer/src/Explorer.tsx

@@ -593,6 +593,7 @@ export class Explorer
         const partialGrapherConfig =
             this.partialGrapherConfigsByVariableId.get(yVariableIdsList[0]) ??
             {}
+        console.log(partialGrapherConfig)
 
         const config: GrapherProgrammaticInterface = {
             ...mergeGrapherConfigs(

packages/@ourworldindata/explorer/src/ExplorerProgram.ts

@@ -8,6 +8,7 @@ import {
     FacetAxisDomain,
     GrapherInterface,
     AxisMinMaxValueStr,
+    ChartTypeName,
 } from "@ourworldindata/types"
 import {
     CoreTable,
@@ -64,6 +65,10 @@ interface ExplorerGrapherInterface extends GrapherInterface {
     relatedQuestionText?: string
     relatedQuestionUrl?: string
     mapTargetTime?: number
+
+    type?: ChartTypeName
+    hasChartTab?: boolean
+    hasMapTab?: boolean
 }
 
 const ExplorerRootDef: CellDef = {
@@ -379,6 +384,9 @@ export class ExplorerProgram extends GridProgram {
             if (!GrapherGrammar[key]) delete config[key]
         })
 
+        // assume a line chart if no type is specified
+        if (!config.type) config.type = ChartTypeName.LineChart
+
         return config
     }
 

packages/@ourworldindata/explorer/src/GrapherGrammar.ts

@@ -24,6 +24,7 @@ import {
     IndicatorIdOrEtlPathCellDef,
     GrapherCellDef,
 } from "./gridLang/GridLangConstants.js"
+import { allChartTypesDisabled } from "@ourworldindata/grapher"
 
 const toTerminalOptions = (keywords: string[]): CellDef[] => {
     return keywords.map((keyword) => ({
@@ -65,7 +66,7 @@ export const GrapherGrammar: Grammar<GrapherCellDef> = {
         keyword: "type",
         description: `The type of chart to show such as LineChart or ScatterPlot.`,
         terminalOptions: toTerminalOptions(Object.values(ChartTypeName)),
-        toGrapherObject: (value) => ({ type: value }),
+        toGrapherObject: (value) => ({ availableTabs: { [value]: true } }),
     },
     grapherId: {
         ...IntegerCellDef,
@@ -84,7 +85,9 @@ export const GrapherGrammar: Grammar<GrapherCellDef> = {
         ...BooleanCellDef,
         keyword: "hasMapTab",
         description: "Show the map tab?",
-        toGrapherObject: (value) => ({ hasMapTab: value }),
+        toGrapherObject: (value) => ({
+            availableTabs: { [ChartTypeName.WorldMap]: value },
+        }),
     },
     tab: {
         ...EnumCellDef,
@@ -97,7 +100,8 @@ export const GrapherGrammar: Grammar<GrapherCellDef> = {
         ...BooleanCellDef,
         keyword: "hasChartTab",
         description: "Show the chart tab?",
-        toGrapherObject: (value) => ({ hasChartTab: value }),
+        // overwrites the given chart type if provided
+        toGrapherObject: (value) => ({ availableTabs: allChartTypesDisabled }),
     },
     xSlug: {
         ...SlugDeclarationCellDef,