GitHub user prsandeep created a discussion: In 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.
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 (
<div className="App">
{/* Back Button */}
<div style={{
position: 'absolute',
top: 10,
left: 10,
zIndex: 1000
}}>
<button
onClick={handleGoBack}
style={{
padding: '8px 15px',
background: '#6c757d',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '14px',
display: 'flex',
alignItems: 'center',
gap: '5px'
}}
>
← Back
</button>
</div>
{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;
GitHub link: https://github.com/apache/superset/discussions/34631
----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
