.php

<?php
function analytics_render_callback($map_id)
{
    $thematic      = get_thematic_areas($map_id);
    $data          = get_map_data($map_id);
    $map_details   = get_map_details($map_id);
    $all_entities  = get_map_entities($map_id);
    $subcategories = get_subcategories($map_id);
    $encoded_data  = json_encode($data);
    $map_thema_id  = json_encode($map_id);
    $details       = json_encode($map_details);
    $encoded_theme = json_encode($thematic);
    $encoded_sub   = json_encode($subcategories);
    $entities      = json_encode($all_entities);
    ob_start();
?>
    <style>
        #app {
            width: 100vw;
            max-width: 100%;
            margin-bottom: 10rem;
        }

        #app,
        .analytics-map-container {
            height: 80vh;
            min-height: 800px;
        }

        #app,
        .analytics-map-container,
        .analytics-map {
            margin: 0;
            padding: 0;
        }

        .analytics-map {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 2rem;
        }

        .table-container {
            max-height: 400px;
            overflow-x: auto;
            overflow-y: auto;
        }

        .table {
            width: 100%;
            table-layout: fixed;
            white-space: nowrap;
        }

        .table td,
        .table th {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            padding: 8px;
        }

        .table td .badge {
            white-space: normal;
            word-break: break-word;
        }

        .table td .d-flex.flex-column {
            gap: 4px;
        }

        .table td .d-flex.flex-column .bd-highlight {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
        }

        .custom-selection {
            position: relative;
            display: inline-block;
            width: 100%;
            max-width: 300px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 5px;
            min-height: 40px;
            cursor: pointer;
        }

        .selected-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            max-width: 100%;
            padding-right: 20px;
        }

        .small-pill {
            background-color: #007bff;
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
            height: 20px;
        }

        .close-btn {
            background: transparent;
            border: none;
            color: white;
            font-weight: bold;
            margin-left: 5px;
            cursor: pointer;
        }

        .dropdown-options {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 5px;
            max-height: 200px;
            overflow-y: auto;
            z-index: 10;
        }

        .dropdown-options ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .dropdown-options li {
            padding: 8px;
            cursor: pointer;
        }

        .dropdown-options li.selected {
            background-color: #007bff;
            color: white;
        }

        .dropdown-options li:hover {
            background-color: #f0f0f0;
        }
    </style>
    <div id="app"> <?php echo $encoded_data; ?>; </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        var phpData = <?php echo $encoded_data; ?>;
        var thematic_areas = <?php echo $encoded_theme; ?>;
        var entities = <?php echo $entities; ?>;
        var subcategories = <?php echo $encoded_sub; ?>;
        var details = <?php echo  $details; ?>;
        var map_id = <?php echo  $map_thema_id; ?>;
        var entity_url = "<?php echo esc_url(admin_url("admin-ajax.php?action=submit_disabled_entities")); ?>";
    </script>
<?php
    echo '<script src="' . plugin_dir_url(__FILE__) . 'app.js"></script>';
    return ob_get_clean();
}