💄 improve code readability

adminSiteClient/ChartEditor.ts

@@ -93,7 +93,7 @@ export type FieldWithDetailReferences =
 
 export type DetailReferences = Record<FieldWithDetailReferences, string[]>
 
-export interface DimensionErrorMessages {
+export interface DimensionErrorMessage {
     displayName?: string
 }
 
@@ -111,7 +111,7 @@ export interface ChartEditorManager {
     errorMessages: Partial<Record<FieldWithDetailReferences, string>>
     errorMessagesForDimensions: Record<
         DimensionProperty,
-        DimensionErrorMessages[]
+        DimensionErrorMessage[]
     >
 }
 

adminSiteClient/ChartEditorPage.tsx

@@ -291,19 +291,14 @@ export class ChartEditorPage
 
     @computed
     get invalidDetailReferences(): ChartEditorManager["invalidDetailReferences"] {
-        const { currentDetailReferences } = this
-        const keys = getIndexableKeys(currentDetailReferences)
-
-        const invalidDetailReferences = Object.fromEntries(
-            keys.map((key: FieldWithDetailReferences) => [
-                key,
-                currentDetailReferences[key].filter(
-                    (term: string) => !this.details[term]
-                ),
-            ])
-        ) as DetailReferences
-
-        return invalidDetailReferences
+        const { subtitle, note, axisLabelX, axisLabelY } =
+            this.currentDetailReferences
+        return {
+            subtitle: subtitle.filter((term) => !this.details[term]),
+            note: note.filter((term) => !this.details[term]),
+            axisLabelX: axisLabelX.filter((term) => !this.details[term]),
+            axisLabelY: axisLabelY.filter((term) => !this.details[term]),
+        }
     }
 
     @computed get errorMessages(): ChartEditorManager["errorMessages"] {

adminSiteClient/DimensionCard.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import { observable, computed, action } from "mobx"
 import { observer } from "mobx-react"
 import { ChartDimension } from "@ourworldindata/grapher"
-import { ChartEditor, DimensionErrorMessages } from "./ChartEditor.js"
+import { ChartEditor, DimensionErrorMessage } from "./ChartEditor.js"
 import { Toggle, BindAutoString, BindAutoFloat, ColorBox } from "./Forms.js"
 import { Link } from "./Link.js"
 import {
@@ -23,7 +23,7 @@ export class DimensionCard extends React.Component<{
     onChange: (dimension: ChartDimension) => void
     onEdit?: () => void
     onRemove?: () => void
-    errorMessages?: DimensionErrorMessages
+    errorMessage?: DimensionErrorMessage
 }> {
     @observable.ref isExpanded: boolean = false
 
@@ -150,7 +150,7 @@ export class DimensionCard extends React.Component<{
                             store={dimension.display}
                             auto={column.displayName}
                             onBlur={this.onChange}
-                            errorMessage={this.props.errorMessages?.displayName}
+                            errorMessage={this.props.errorMessage?.displayName}
                         />
                         <BindAutoString
                             label="Unit of measurement"

adminSiteClient/EditorBasicTab.tsx

@@ -234,7 +234,7 @@ class DimensionSlotView extends React.Component<{
                                                     isDndEnabled={
                                                         this.isDndEnabled
                                                     }
-                                                    errorMessages={
+                                                    errorMessage={
                                                         this.errorMessages[
                                                             slot.property
                                                         ][index]

adminSiteClient/SaveButtons.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import { ChartEditor } from "./ChartEditor.js"
 import { action, computed } from "mobx"
 import { observer } from "mobx-react"
+import { isEmpty } from "@ourworldindata/utils"
 
 @observer
 export class SaveButtons extends React.Component<{ editor: ChartEditor }> {
@@ -23,21 +24,12 @@ export class SaveButtons extends React.Component<{ editor: ChartEditor }> {
         const { editor } = this.props
         const { errorMessages, errorMessagesForDimensions } = editor.manager
 
-        for (const message of Object.values(errorMessages)) {
-            if (message) return true
-        }
+        if (!isEmpty(errorMessages)) return true
 
-        for (const slot of Object.values(errorMessagesForDimensions)) {
-            for (const dimension of slot) {
-                if (!dimension) continue
-                const messages = Object.values(dimension).filter(
-                    (message) => message
-                )
-                if (messages.length > 0) return true
-            }
-        }
-
-        return false
+        const allErrorMessagesForDimensions = Object.values(
+            errorMessagesForDimensions
+        ).flat()
+        return allErrorMessagesForDimensions.some((error) => error)
     }
 
     render() {

packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx

@@ -4,6 +4,7 @@ import { observer } from "mobx-react"
 import {
     Bounds,
     DEFAULT_BOUNDS,
+    isEmpty,
     triggerDownloadFromBlob,
     triggerDownloadFromUrl,
 } from "@ourworldindata/utils"
@@ -204,7 +205,7 @@ export class DownloadModal extends React.Component<DownloadModalProps> {
     }
 
     @computed private get hasDetails(): boolean {
-        return (this.manager.detailsOrderedByReference ?? []).length > 0
+        return !isEmpty(this.manager.detailsOrderedByReference)
     }
 
     @computed private get showExportControls(): boolean {