utils/ui.py

import gradio as gr
from utils.data import elements


def build_table(click_fn, outputs):

    table = {}

    for e in elements:

        if 58 <= e["number"] <= 71:
            continue

        if 90 <= e["number"] <= 103:
            continue

        table[(e["ypos"], e["xpos"])] = e

    # Main Table
    for period in range(1, 8):

        with gr.Row(equal_height=True):

            for group in range(1, 19):

                e = table.get((period, group))

                if e is None:
                    gr.HTML("<div class='empty-cell'></div>")
                    continue

                btn = gr.Button(
                    e["symbol"],
                    elem_classes=["element-btn"],
                )

                btn.click(
                    fn=click_fn,
                    inputs=gr.State(e["symbol"]),
                    outputs=outputs,
                )

    gr.Markdown("<div style='height:12px'></div>")

    # Lanthanides
    with gr.Row(equal_height=False):

        gr.HTML("<div style='width:105px'></div>")

        for e in elements:

            if 58 <= e["number"] <= 71:

                btn = gr.Button(
                    e["symbol"],
                    elem_classes=["element-btn"],
                )

                btn.click(
                    fn=click_fn,
                    inputs=gr.State(e["symbol"]),
                    outputs=outputs,
                )

    # Actinides
    with gr.Row(equal_height=False):

        gr.HTML("<div style='width:105px'></div>")

        for e in elements:

            if 90 <= e["number"] <= 103:

                btn = gr.Button(
                    e["symbol"],
                    elem_classes=["element-btn"],
                )

                btn.click(
                    fn=click_fn,
                    inputs=gr.State(e["symbol"]),
                    outputs=outputs,
                )