ThoughtSpot Everywhere（埋め込み）のチュートリアルをCodeSandboxでやってみた

/*
 * This is the script to update for the ThoughtSpot Everywhere tutorial.
 */
import { ActionData, tabularDataToHTML } from "./dataclasses.js";

const {
  init,
  Action,
  AppEmbed,
  AuthType,
  EmbedEvent,
  Page,
  PinboardEmbed,
  SearchEmbed
} = tsembed;

const tsURL = "https://try-everywhere.thoughtspot.cloud"; // ★

// functions to show and hide div sections.
const showDiv = (divId) => {
  const div = document.getElementById(divId);
  div.style.display = "flex";
};

const hideDiv = (divId) => {
  const div = document.getElementById(divId);
  div.style.display = "none";
};

const clearEmbed = () => {
  const div = document.getElementById("embed");
  div.innerHTML = "";
};

const closeModal = () => {
  const showDataElement = document.getElementById("show-data");
  showDataElement.style.display = "none"; // hide the box.
};

const showData = (payload) => {
  // TODO - add code to handle the custom action callback.
};

// Create and manage the login screen.

const onLogin = () => {
  // The following can be used if you want to use AuthType.Basic
  //const username = document.getElementById('username').value;
  //const password = document.getElementById('password').value;

  // ★～
  init({
    thoughtSpotHost: tsURL,
    authType: AuthType.None
  });
  // ～★

  hideDiv("login");
  showDiv("landing-page");
};

const showMainApp = () => {
  // Clears out the page and shows the main app.
  // This can be called from any page to make sure the state is correct.
  clearEmbed(); // just to be sure.
  hideDiv("landing-page");
  showDiv("main-app");
};

// Functions to embed the content based on user selection.

const onSearch = () => {
  showMainApp();

  // ★～
  const embed = new SearchEmbed("#embed", {
    frameParams: {},
    dataSources: ["cd252e5c-b552-49a8-821d-3eadaa049cca"],
    disabledActions: [Action.SpotIQAnalyze],
    disabledActionReason: "Enterprise feature.",
    hiddenActions: [Action.Download, Action.Share, Action.DownloadAsCsv]
  });

  embed.render();
  // ～★
};

const onVisualization = () => {
  showMainApp();

  // ★～
  const embed = new PinboardEmbed("#embed", {
    frameParams: {},
    pinboardId: "66f5bf76-b0a9-40b4-94b3-a93a7180c1da",
    vizId: "92e2a902-ec53-422a-83e1-9b125cc0cc5e",
    disabledActions: [Action.Download],
    disabledActionReason: "Enterprise feature.",
    hiddenActions: [Action.SpotIQAnalyze]
  });

  embed.render();
  // ～★
};

const onPinboard = () => {
  showMainApp();

  // ★～
  const embed = new PinboardEmbed("#embed", {
    frameParams: {},
    pinboardId: "543619d6-0015-4667-b257-eff547d13a12",
    disabledActions: [Action.DownloadAsPdf],
    disabledActionReason: "Enterprise feature.",
    hiddenActions: [Action.PinboardInfo]
  });

  embed.render();
  // ～★
};

// Embed the full application.
const onFull = () => {
  showMainApp();

  // ★～
  const embed = new AppEmbed("#embed", {
    frameParams: {},
    // pageId: Page.Home // loads the Home tab.  Others can be loaded.  See Page enum.
    path: "pinboard/543619d6-0015-4667-b257-eff547d13a12" // loads the Home tab.  Others can be loaded.  See Page enum.
  });

  embed.render();
  // ～★
};

export { onLogin, onFull, onSearch, onPinboard, onVisualization };

// Show the URL to connect to.
document.getElementById("ts-url").innerText = "ThoughtSpot Server: " + tsURL;

// Hook up the events to the buttons and links.
document.getElementById("login-button").addEventListener("click", onLogin);
document.getElementById("close-modal").addEventListener("click", closeModal);

// Events for buttons
document.getElementById("search-button").addEventListener("click", onSearch);
document
  .getElementById("pinboard-button")
  .addEventListener("click", onPinboard);
document
  .getElementById("viz-button")
  .addEventListener("click", onVisualization);
document.getElementById("full-app-button").addEventListener("click", onFull);

// Events for nav bar
document.getElementById("search-link").addEventListener("click", onSearch);
document.getElementById("pinboard-link").addEventListener("click", onPinboard);
document
  .getElementById("visualization-link")
  .addEventListener("click", onVisualization);
document
  .getElementById("full-application-link")
  .addEventListener("click", onFull);