<commit_before>import React, { ReactElement, useState } from "react"
import ReactDOM from "react-dom"
import { GlossaryExcerpt } from "site/client/GlossaryExcerpt/GlossaryExcerpt"

interface Component {
    [key: string]: any
}
const availableComponents: Component = { GlossaryExcerpt }
export const ExpandableInlineBlock_name = "ExpandableInlineBlock"

export const ExpandableInlineBlock = ({
    label,
    children,
}: {
    label: string
    children: ReactElement
}) => {
    const [isVisible, setVisible] = useState(false)

    const toggleVisibility = () => setVisible(!isVisible)

    return (
        <span className="expandable-inline-block">
            <button onClick={toggleVisibility}>{label}</button>
            {isVisible && <span>{children}</span>}
        </span>
    )
}

export const runExpandableInlineBlock = () => {
    const expandableInlineBlocks = document.querySelectorAll(
        `[data-type=${ExpandableInlineBlock_name}]`
    )
    expandableInlineBlocks.forEach((expandableInlineBlock) => {
        const props = JSON.parse(expandableInlineBlock.innerHTML)
        const subComponent = expandableInlineBlock.getAttribute("data-block")
        const label = expandableInlineBlock.getAttribute("data-label")
        if (!subComponent || !label || !props) return

        const Component = availableComponents[subComponent]

        ReactDOM.render(
            <ExpandableInlineBlock label={label}>
                <Component {...props} label={label} />
            </ExpandableInlineBlock>,
            expandableInlineBlock.parentElement
        )
    })
}<commit_msg>feat(glossary): add analytics<commit_after>import React, { ReactElement, useState } from "react"
import ReactDOM from "react-dom"
import { GlossaryExcerpt } from "site/client/GlossaryExcerpt/GlossaryExcerpt"

interface Component {
    [key: string]: any
}
const availableComponents: Component = { GlossaryExcerpt }
export const ExpandableInlineBlock_name = "ExpandableInlineBlock"

export const ExpandableInlineBlock = ({
    label,
    children,
}: {
    label: string
    children: ReactElement
}) => {
    const [isVisible, setVisible] = useState(false)

    const toggleVisibility = () => setVisible(!isVisible)

    return (
        <span className="expandable-inline-block">
            <button
                data-track-note="glossary-toggle"
                onClick={toggleVisibility}
            >
                {label}
            </button>
            {isVisible && <span>{children}</span>}
        </span>
    )
}

export const runExpandableInlineBlock = () => {
    const expandableInlineBlocks = document.querySelectorAll(
        `[data-type=${ExpandableInlineBlock_name}]`
    )
    expandableInlineBlocks.forEach((expandableInlineBlock) => {
        const props = JSON.parse(expandableInlineBlock.innerHTML)
        const subComponent = expandableInlineBlock.getAttribute("data-block")
        const label = expandableInlineBlock.getAttribute("data-label")
        if (!subComponent || !label || !props) return

        const Component = availableComponents[subComponent]

        ReactDOM.render(
            <ExpandableInlineBlock label={label}>
                <Component {...props} label={label} />
            </ExpandableInlineBlock>,
            expandableInlineBlock.parentElement
        )
    })
}
{'fraction_non_alphanumeric': 0.11024331631120457, 'fraction_numerical': 0.0, 'mean_word_length': 3.090909090909091, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 29, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6343831', 'n_tokens_mistral': 895, 'n_tokens_neox': 903, 'n_words': 173}