Apache Superset n Superset’s native UI, the Drill By option appears for charts, but when the same dashboard is embedded into a React application using the Superset Embedded SDK, the Drill By option is missing, even though hasDrillBy is set to true in dashboardUiConfig.

  {loading && (
    <div style={{ 
      position: 'absolute', 
      top: 10, 
      left: 120, 
      zIndex: 1000,
      background: 'rgba(255, 255, 255, 0.9)',
      padding: '10px',
      borderRadius: '4px'
    }}>
      <p style={{ color: '#555', margin: 0 }}>Loading dashboard...</p>
    </div>
  )}

  {error && (
    <div style={{ 
      position: 'absolute', 
      top: 10, 
      left: 120, 
      zIndex: 1000,
      background: 'rgba(255, 0, 0, 0.1)',
      padding: '10px',
      borderRadius: '4px',
      border: '1px solid #ff0000'
    }}>
      <p style={{ color: 'red', margin: 0 }}>Error: {error}</p>
    </div>
  )}


  <div id="dashboard-container" ref={containerRef} />
</div>

); }

export default BugzillaDashboard;

Screenshots/recordings

import React, { useEffect, useRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { embedDashboard } from '@superset-ui/embedded-sdk'; import { bugzillaApi } from '../services/bugzillaApi'; // Import the separate API service import '../bugzilla.css';

function BugzillaDashboard() { const navigate = useNavigate(); const dashboardId = 'e191eb89-281d-4d10-8bcd-2dc415b9514e'; const containerRef = useRef(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [dashboardConfig, setDashboardConfig] = useState(null);

const handleGoBack = () => { navigate(-1); // Go back to previous page };

useEffect(() => { const embedSupersetDashboard = async () => { try { setLoading(true); setError(null);

    // Get guest token using the separate API service
    const tokenResponse = await bugzillaApi.getGuestToken(dashboardId);
    const guestToken = tokenResponse.data.token;

    if (!guestToken) {
      throw new Error('Guest token missing in response');
    }

    // // Optionally, get dashboard configuration
    // try {
    //   const configResponse = await bugzillaApi.getDashboardConfig(dashboardId);
    //   setDashboardConfig(configResponse.data);
    // } catch (configError) {
    //   console.warn('Could not fetch dashboard config:', configError);
    //   // Continue without config - not critical
    // }

    // Embed the dashboard
    await embedDashboard({
      id: dashboardId,
      supersetDomain: 'https://bidarshan-dev.dcservices.in/',
      mountPoint: containerRef.current,
      fetchGuestToken: () => guestToken,
      dashboardUiConfig: {
        hideTitle: true,
        hideChartControls: false,
        hideTab: false,
        hasDrillBy: true,
        // You can use dashboardConfig here if needed
        ...(dashboardConfig?.uiConfig || {})
      },
    });

    setLoading(false);
  } catch (err) {
    console.error('Error embedding Superset dashboard:', err);

    // Handle different types of errors
    const errorMessage = err.userMessage || err.message || 'Failed to load dashboard';
    setError(errorMessage);
    setLoading(false);
  }
};

embedSupersetDashboard();

}, [dashboardId]);

return (

  {loading && (
    <div style={{ 
      position: 'absolute', 
      top: 10, 
      left: 120, 
      zIndex: 1000,
      background: 'rgba(255, 255, 255, 0.9)',
      padding: '10px',
      borderRadius: '4px'
    }}>
      <p style={{ color: '#555', margin: 0 }}>Loading dashboard...</p>
    </div>
  )}

  {error && (
    <div style={{ 
      position: 'absolute', 
      top: 10, 
      left: 120, 
      zIndex: 1000,
      background: 'rgba(255, 0, 0, 0.1)',
      padding: '10px',
      borderRadius: '4px',
      border: '1px solid #ff0000'
    }}>
      <p style={{ color: 'red', margin: 0 }}>Error: {error}</p>
    </div>
  )}


  <div id="dashboard-container" ref={containerRef} />
</div>