How to edit the href link of the title of charts in Superset?

To edit the href link of the title of each chart within an embedded Superset dashboard in your React application, you can use JavaScript DOM manipulation to target and modify elements inside the iframe created by the @superset-ui/embedded-sdk. Here is an example of how you can achieve this:

First, ensure that you have access to the iframe element.
Use JavaScript to access the content of the iframe and modify the href attribute of the chart titles.

Here is a sample code snippet to demonstrate this:

// Function to update the href links of chart titles inside the iframe
function updateChartTitleLinks(iframeId, newHref) {
  const iframe = document.getElementById(iframeId);
  if (iframe && iframe.contentWindow) {
    const iframeDocument = iframe.contentWindow.document;

    // Wait for the iframe content to load
    iframe.onload = () => {
      // Select all chart title elements (assuming they have a specific class or tag)
      const chartTitleLinks = iframeDocument.querySelectorAll('.header-title a');

      // Update the href attribute for each chart title link
      chartTitleLinks.forEach(link => {
        link.href = newHref;
      });
    };
  }
}

// Call the function with the iframe ID and the new href link
updateChartTitleLinks('superset-iframe', 'https://new-link.com');

In this example:

Replace 'superset-iframe' with the actual ID of your iframe element.
Replace '.header-title a' with the appropriate selector for the chart title links in your Superset dashboard.
Replace 'https://new-link.com' with the new URL you want to set for the chart title links.

This code will update the href attribute of all chart title links inside the specified iframe once the iframe content has loaded ^[1].

Additionally, the @superset-ui/embedded-sdk provides a structured way to embed and interact with Superset dashboards. The embedDashboard function from the SDK can be used to embed the dashboard and manage the iframe. Here is a brief overview of how you can use it:

import { embedDashboard } from '@superset-ui/embedded-sdk';

// Function to embed the dashboard
async function embedSupersetDashboard() {
  const mountPoint = document.getElementById('dashboard-mount-point');
  const dashboard = await embedDashboard({
    id: 'your-dashboard-id',
    supersetDomain: 'https://superset.example.com',
    mountPoint,
    fetchGuestToken: async () => {
      // Fetch and return the guest token from your backend
      return 'your-guest-token';
    },
    dashboardUiConfig: {
      hideTitle: false,
      hideTab: false,
      hideChartControls: false,
      filters: {
        visible: true,
        expanded: true,
      },
    },
    debug: true,
    iframeTitle: 'Embedded Dashboard',
  });

  // Now you can interact with the embedded dashboard
  // For example, you can get the permalink of the dashboard
  const permalink = await dashboard.getDashboardPermalink('some-anchor');
  console.log(permalink);
}

// Call the function to embed the dashboard
embedSupersetDashboard();

This approach ensures that you have a robust and maintainable way to embed and interact with Superset dashboards in your React application ^[2].

To continue talking to Dosu, mention @dosu.

apache / superset

How to edit the href link of the title of charts in Superset? #29141