<commit_before>import * as React from "react"
import ReactDOM from "react-dom"
import * as ReactDOMServer from "react-dom/server"
import { observer } from "mobx-react"
import { computed } from "mobx"
import { union } from "../../clientUtils/Util"
import {
    getSelectedEntityNamesParam,
    migrateSelectedEntityNamesParam,
    setSelectedEntityNamesParam,
} from "../../grapher/core/EntityUrlBuilder"
import { SelectionArray } from "../../grapher/selection/SelectionArray"
import { Url } from "../../clientUtils/urls/Url"
import { EntityName } from "../../coreTable/OwidTableConstants"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faArrowRight } from "@fortawesome/free-solid-svg-icons/faArrowRight"
import { BAKED_BASE_URL } from "../../settings/clientSettings"

export const PROMINENT_LINK_CLASSNAME = "wp-block-owid-prominent-link"

export enum ProminentLinkStyles {
    thin = "is-style-thin",
    default = "is-style-default",
}

export const WITH_IMAGE = "with-image"

@observer
export class ProminentLink extends React.Component<{
    href: string
    style: string | null
    title: string | null
    content?: string | null
    image?: string | null
    globalEntitySelection?: SelectionArray
}> {
    @computed get originalUrl(): Url {
        return migrateSelectedEntityNamesParam(Url.fromURL(this.props.href))
    }

    @computed private get originalSelectedEntities(): EntityName[] {
        return getSelectedEntityNamesParam(this.originalUrl) ?? []
    }

    @computed private get entitiesInGlobalEntitySelection(): EntityName[] {
        return this.props.globalEntitySelection?.selectedEntityNames ?? []
    }

    @computed private get updatedUrl(): Url {
        const newEntityList = union(
            this.originalSelectedEntities,
            this.entitiesInGlobalEntitySelection
        )
        return setSelectedEntityNamesParam(this.originalUrl, newEntityList)
    }

    @computed private get style(): string {
        return this.props.style || ProminentLinkStyles.default
    }

    render() {
        const classes = [
            PROMINENT_LINK_CLASSNAME,
            this.props.image ? WITH_IMAGE : null,
        ]

        const renderImage = () => {
            return this.props.image ? (
                <figure
                    dangerouslySetInnerHTML={{
                        __html: this.props.image,
                    }}
                />
            ) : null
        }

        const renderContent = () => {
            return this.props.content ? (
                <div
                    className="content"
                    dangerouslySetInnerHTML={{
                        __html: this.props.content,
                    }}
                />
            ) : null
        }

        const renderThinStyle = () => {
            return (
                <>
                    {renderImage()}
                    <div className="content-wrapper">
                        {renderContent()}
                        {this.props.title ? (
                            <div
                                className="title"
                                dangerouslySetInnerHTML={{
                                    __html: this.props.title,
                                }}
                            />
                        ) : null}
                    </div><commit_msg>fix(prom link): add arrow back for thin variation<commit_after>import * as React from "react"
import ReactDOM from "react-dom"
import * as ReactDOMServer from "react-dom/server"
import { observer } from "mobx-react"
import { computed } from "mobx"
import { union } from "../../clientUtils/Util"
import {
    getSelectedEntityNamesParam,
    migrateSelectedEntityNamesParam,
    setSelectedEntityNamesParam,
} from "../../grapher/core/EntityUrlBuilder"
import { SelectionArray } from "../../grapher/selection/SelectionArray"
import { Url } from "../../clientUtils/urls/Url"
import { EntityName } from "../../coreTable/OwidTableConstants"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faArrowRight } from "@fortawesome/free-solid-svg-icons/faArrowRight"
import { BAKED_BASE_URL } from "../../settings/clientSettings"

export const PROMINENT_LINK_CLASSNAME = "wp-block-owid-prominent-link"

export enum ProminentLinkStyles {
    thin = "is-style-thin",
    default = "is-style-default",
}

export const WITH_IMAGE = "with-image"

@observer
export class ProminentLink extends React.Component<{
    href: string
    style: string | null
    title: string | null
    content?: string | null
    image?: string | null
    globalEntitySelection?: SelectionArray
}> {
    @computed get originalUrl(): Url {
        return migrateSelectedEntityNamesParam(Url.fromURL(this.props.href))
    }

    @computed private get originalSelectedEntities(): EntityName[] {
        return getSelectedEntityNamesParam(this.originalUrl) ?? []
    }

    @computed private get entitiesInGlobalEntitySelection(): EntityName[] {
        return this.props.globalEntitySelection?.selectedEntityNames ?? []
    }

    @computed private get updatedUrl(): Url {
        const newEntityList = union(
            this.originalSelectedEntities,
            this.entitiesInGlobalEntitySelection
        )
        return setSelectedEntityNamesParam(this.originalUrl, newEntityList)
    }

    @computed private get style(): string {
        return this.props.style || ProminentLinkStyles.default
    }

    render() {
        const classes = [
            PROMINENT_LINK_CLASSNAME,
            this.props.image ? WITH_IMAGE : null,
        ]

        const renderImage = () => {
            return this.props.image ? (
                <figure
                    dangerouslySetInnerHTML={{
                        __html: this.props.image,
                    }}
                />
            ) : null
        }

        const renderContent = () => {
            return this.props.content ? (
                <div
                    className="content"
                    dangerouslySetInnerHTML={{
                        __html: this.props.content,
                    }}
                />
            ) : null
        }

        const renderThinStyle = () => {
            return (
                <>
                    {renderImage()}
                    <div className="content-wrapper">
                        {renderContent()}
                        {this.props.title ? (
                            <div className="title">
                                <span
                                    dangerouslySetInnerHTML={{
                                        __html: this.props.title,
                                    }}
                                />
                                <FontAwesomeIcon icon={faArrowRight} />
                            </div>
                        ) : null}
                    </div>
{'fraction_non_alphanumeric': 0.10107153200115841, 'fraction_numerical': 0.0, 'mean_word_length': 1.7054445750097924, 'pattern_counts': {'":': 0, '<': 20, '<?xml version=': 0, '>': 26, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5423710', 'n_tokens_mistral': 1739, 'n_tokens_neox': 1705, 'n_words': 360}