Spaces:

thoughtspot-dp
/

demoprep-doc

Running

File size: 21,513 Bytes

b757b45

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>DemoPrep — Quick Start Guide</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #0f1117;
      color: #e2e8f0;
      line-height: 1.7;
      padding: 48px 24px;
    }

    .container {
      max-width: 860px;
      margin: 0 auto;
    }

    /* ── Header ── */
    .header {
      border-bottom: 1px solid #2d3748;
      padding-bottom: 28px;
      margin-bottom: 40px;
    }

    .header h1 {
      font-size: 30px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 6px;
    }

    .header .subtitle {
      font-size: 15px;
      color: #a0aec0;
      margin-bottom: 20px;
    }

    .links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 16px;
    }

    .links a {
      display: inline-block;
      background: #1a202c;
      border: 1px solid #2d3748;
      border-radius: 6px;
      padding: 7px 14px;
      font-size: 13px;
      color: #63b3ed;
      text-decoration: none;
      transition: border-color 0.15s;
    }

    .links a:hover { border-color: #63b3ed; }

    .links a .label {
      color: #718096;
      margin-right: 6px;
    }

    /* ── Section headings ── */
    .section-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #4a5568;
      margin: 44px 0 16px;
    }

    /* ── Step blocks ── */
    .step {
      display: flex;
      gap: 20px;
      margin-bottom: 28px;
      align-items: flex-start;
    }

    .step-num {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      background: #1a202c;
      border: 1px solid #2d3748;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      color: #63b3ed;
      margin-top: 2px;
    }

    .step-body { flex: 1; }

    .step-body h3 {
      font-size: 16px;
      font-weight: 600;
      color: #ffffff;
      margin-bottom: 8px;
    }

    .step-body p {
      font-size: 14px;
      color: #a0aec0;
      margin-bottom: 10px;
    }

    /* ── Info cards (right panel, settings) ── */
    .card {
      background: #1a202c;
      border: 1px solid #2d3748;
      border-radius: 8px;
      padding: 20px 24px;
      margin-top: 12px;
      margin-bottom: 8px;
    }

    .card h4 {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #718096;
      margin-bottom: 14px;
    }

    /* ── Tables ── */
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13.5px;
    }

    th {
      text-align: left;
      color: #718096;
      font-weight: 600;
      font-size: 12px;
      padding: 0 12px 10px 0;
      border-bottom: 1px solid #2d3748;
    }

    td {
      padding: 9px 12px 9px 0;
      border-bottom: 1px solid #1f2937;
      vertical-align: top;
      color: #a0aec0;
    }

    td:first-child {
      color: #e2e8f0;
      font-weight: 500;
      white-space: nowrap;
      padding-right: 20px;
    }

    tr:last-child td { border-bottom: none; }

    /* ── Pipeline stages ── */
    .stages { list-style: none; padding: 0; margin-top: 12px; }

    .stage {
      display: flex;
      gap: 14px;
      padding: 10px 0;
      border-bottom: 1px solid #1f2937;
      align-items: flex-start;
    }

    .stage:last-child { border-bottom: none; }

    .stage-name {
      flex-shrink: 0;
      width: 110px;
      font-size: 13px;
      font-weight: 600;
      color: #68d391;
    }

    .stage-desc {
      font-size: 13px;
      color: #a0aec0;
    }

    /* ── Callout (note/tip) ── */
    .callout {
      background: #1a2744;
      border: 1px solid #2a4a7f;
      border-radius: 6px;
      padding: 12px 16px;
      font-size: 13px;
      color: #90cdf4;
      margin-top: 10px;
    }

    .callout strong { color: #bee3f8; }

    /* ── Tips list ── */
    .tips { list-style: none; padding: 0; }

    .tips li {
      padding: 10px 0 10px 20px;
      border-bottom: 1px solid #1f2937;
      font-size: 13.5px;
      color: #a0aec0;
      position: relative;
    }

    .tips li:last-child { border-bottom: none; }

    .tips li::before {
      content: "→";
      position: absolute;
      left: 0;
      color: #4a5568;
    }

    .tips li strong { color: #e2e8f0; }

    /* ── Accordion ── */
    details {
      background: #1a202c;
      border: 1px solid #2d3748;
      border-radius: 8px;
      margin-top: 12px;
    }

    summary {
      padding: 14px 20px;
      font-size: 14px;
      font-weight: 600;
      color: #e2e8f0;
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    summary::-webkit-details-marker { display: none; }

    summary::before {
      content: "▶";
      font-size: 9px;
      color: #4a5568;
      transition: transform 0.2s;
    }

    details[open] summary::before { transform: rotate(90deg); }

    .details-body {
      padding: 0 20px 18px;
      border-top: 1px solid #2d3748;
      margin-top: 0;
    }

    /* ── Code ── */
    code {
      background: #2d3748;
      border-radius: 3px;
      padding: 1px 6px;
      font-size: 12px;
      color: #fc8181;
    }

    /* ── Footer ── */
    .footer {
      margin-top: 56px;
      padding-top: 24px;
      border-top: 1px solid #2d3748;
      font-size: 13px;
      color: #4a5568;
      text-align: center;
    }

    .footer a { color: #63b3ed; text-decoration: none; }
  </style>
</head>
<body>
  <div class="container">

    <!-- ── Header ────────────────────────────────── -->
    <div class="header">
      <h1>DemoPrep</h1>
      <div class="subtitle">Quick Start Guide — how to build a ThoughtSpot demo from scratch in minutes</div>
      <div class="links">
        <a href="https://thoughtspot-dp-demoprep.hf.space" target="_blank">
          <span class="label">App</span>thoughtspot-dp-demoprep.hf.space
        </a>
        <a href="https://huggingface.co/spaces/boone-ts/demoprep_doc" target="_blank">
          <span class="label">Guide</span>This page
        </a>
      </div>
    </div>

    <!-- ── What is it ─────────────────────────────── -->
    <div class="section-label">Overview</div>

    <div class="card">
      <p style="font-size:14px; color:#a0aec0;">
        DemoPrep builds a complete ThoughtSpot demo from a company URL and a use case selection.
        It researches the company, generates a Snowflake database with realistic data, creates a
        ThoughtSpot semantic model, and deploys a finished liveboard — end to end in roughly
        <strong style="color:#e2e8f0;">10–30 minutes</strong> depending on data size.
      </p>
    </div>

    <!-- ── Steps ─────────────────────────────────── -->
    <div class="section-label">How to Run a Demo</div>

    <!-- Step 1 -->
    <div class="step">
      <div class="step-num">1</div>
      <div class="step-body">
        <h3>Log In</h3>
        <p>Go to <a href="https://thoughtspot-dp-demoprep.hf.space" target="_blank" style="color:#63b3ed;">thoughtspot-dp-demoprep.hf.space</a> and log in with your credentials.
           Your settings are saved per user and restored automatically.</p>
        <div class="callout">
          <strong>Important:</strong> Always use the direct URL above.
          The HuggingFace wrapper URL blocks auth cookies and will prevent login.
        </div>
      </div>
    </div>

    <!-- Step 2 -->
    <div class="step">
      <div class="step-num">2</div>
      <div class="step-body">
        <h3>Configure the Right Panel</h3>
        <p>The right panel has two always-visible dropdowns at the top, plus a collapsible
           <strong>⚙️ Settings</strong> section for run options.</p>

        <div class="card">
          <h4>Always Visible</h4>
          <table>
            <tr>
              <th>Control</th><th>What it does</th>
            </tr>
            <tr>
              <td>TS Environment</td>
              <td>The ThoughtSpot cluster to deploy to. <strong style="color:#fc8181;">Required</strong> — GO will not run without a selection.</td>
            </tr>
            <tr>
              <td>AI Model</td>
              <td>The LLM used for research, DDL generation, and liveboard questions. Defaults to the system default (GPT or Claude).</td>
            </tr>
          </table>
        </div>

        <details>
          <summary>⚙️ Settings — click to expand run options</summary>
          <div class="details-body" style="padding-top:14px;">
            <table>
              <tr>
                <th style="width:170px;">Field</th><th>What it does</th>
              </tr>
              <tr>
                <td>Liveboard Name</td>
                <td>Name for the created liveboard. Leave blank to auto-derive from the company URL (e.g. <code>Nike - Sales Analytics</code>).</td>
              </tr>
              <tr>
                <td>Data Size</td>
                <td>
                  Controls how many rows are generated.<br>
                  <strong style="color:#e2e8f0;">Small</strong> — ~1,000 fact rows. Fast, good for testing or quick demos.<br>
                  <strong style="color:#e2e8f0;">Medium</strong> — ~10,000 fact rows. Richer data, better chart distributions. Takes longer.
                </td>
              </tr>
              <tr>
                <td>Geo Scope</td>
                <td>
                  <strong style="color:#e2e8f0;">USA Only</strong> — US cities, states, regions in dimensional data.<br>
                  <strong style="color:#e2e8f0;">International</strong> — global locations. Use for global-brand prospects.
                </td>
              </tr>
              <tr>
                <td>Tag Name</td>
                <td>Optional ThoughtSpot tag applied to all created objects (model + liveboard). Leave blank to skip tagging.</td>
              </tr>
              <tr>
                <td>Column Naming Style</td>
                <td>How Snowflake column names are formatted: <code>Regular Case</code>, <code>snake_case</code>, <code>camelCase</code>, <code>PascalCase</code>, <code>UPPER_CASE</code>, or <code>original</code>.</td>
              </tr>
              <tr>
                <td>Object Naming Prefix</td>
                <td>Short prefix added to all TS object names (e.g. <code>acme</code> → <code>acme_CompanyModel</code>). Useful for multi-tenant or shared environments.</td>
              </tr>
              <tr>
                <td>Share With</td>
                <td>ThoughtSpot username or email to share the created liveboard with after deployment. Leave blank to skip.</td>
              </tr>
            </table>
            <p style="font-size:12px; color:#4a5568; margin-top:14px;">
              All Settings values take effect immediately for the current run — no save or page reload needed.
            </p>
          </div>
        </details>
      </div>
    </div>

    <!-- Step 3 -->
    <div class="step">
      <div class="step-num">3</div>
      <div class="step-body">
        <h3>Choose Your Demo Type</h3>

        <div class="card">
          <h4>Defined — recommended for most demos</h4>
          <p style="font-size:14px; color:#a0aec0; margin-bottom:12px;">
            Use the 3-level cascade to pick a curated use case from the matrix.
          </p>
          <table>
            <tr><td style="width:150px;">Industry</td><td>e.g. Retail &amp; Consumer Goods, Financial Services, Technology</td></tr>
            <tr><td>Line of Business</td><td>e.g. Specialty Retail, Wealth Management, Software as a Service</td></tr>
            <tr><td>Function</td><td>e.g. Sales, Supply Chain, Marketing, Finance</td></tr>
          </table>
          <p style="font-size:13px; color:#718096; margin-top:12px;">
            When the combination is in the matrix, you get curated KPIs, story-driven visualizations, and a target persona.
            If the combination is not fully defined, the AI adapts from the closest match.
          </p>
        </div>

        <div class="card" style="margin-top:10px;">
          <h4>Custom — for demos outside the matrix</h4>
          <p style="font-size:14px; color:#a0aec0;">
            Enter the company URL and describe the use case in plain language.
            The more context you provide, the better the liveboard story.
          </p>
        </div>
      </div>
    </div>

    <!-- Step 4 -->
    <div class="step">
      <div class="step-num">4</div>
      <div class="step-body">
        <h3>Hit GO</h3>
        <p>Press GO. The pipeline runs automatically through six stages:</p>

        <div class="card">
          <ul class="stages">
            <li class="stage">
              <span class="stage-name">Research</span>
              <span class="stage-desc">AI reads the company website and builds a profile — industry, products, business context, and the metrics that matter for the use case.</span>
            </li>
            <li class="stage">
              <span class="stage-name">DDL</span>
              <span class="stage-desc">Schema generated for Snowflake: fact and dimension tables with realistic column names and types for the use case.</span>
            </li>
            <li class="stage">
              <span class="stage-name">Data</span>
              <span class="stage-desc">Snowflake database created and populated with AI-generated data. Small runs ~1k rows; Medium runs ~10k rows.</span>
            </li>
            <li class="stage">
              <span class="stage-name">ThoughtSpot</span>
              <span class="stage-desc">Semantic model built from the schema. Column descriptions, synonyms, and Sage search index added automatically.</span>
            </li>
            <li class="stage">
              <span class="stage-name">Liveboard</span>
              <span class="stage-desc">MCP creates the initial liveboard. Post-processing adds AI-humanized chart titles, KPI groups, donut charts, brand colors, and layout.</span>
            </li>
            <li class="stage">
              <span class="stage-name">Complete</span>
              <span class="stage-desc">Links to the model and liveboard appear in the Chat tab. Total time: Small ~10–15 min, Medium ~20–30 min.</span>
            </li>
          </ul>
        </div>

        <p style="margin-top:12px;">
          Watch the <strong style="color:#e2e8f0;">Pipeline Status</strong> panel on the right for live progress.
          Detailed logs are in the <strong style="color:#e2e8f0;">AI Feedback</strong> tab.
        </p>
      </div>
    </div>

    <!-- Step 5 -->
    <div class="step">
      <div class="step-num">5</div>
      <div class="step-body">
        <h3>Review Your Results</h3>
        <p>When the pipeline finishes, the Chat tab shows direct links to the model and liveboard in ThoughtSpot.
           The <strong style="color:#e2e8f0;">Demo Assets</strong> tab has:</p>

        <div class="card">
          <table>
            <tr>
              <td>SpotterViz TS</td>
              <td>Matrix-grounded Spotter prompts you can paste into Spotter to walk through the demo story step by step.</td>
            </tr>
            <tr>
              <td>SpotterViz AI</td>
              <td>AI-generated alternative story flow based on the actual data and liveboard created.</td>
            </tr>
            <tr>
              <td>Demo Pack</td>
              <td>Talking points, insight bullets, and KPI context for the presentation.</td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <!-- ── Settings Tab ────────────────────────────── -->
    <div class="section-label">Settings Tab</div>

    <div class="card">
      <p style="font-size:14px; color:#a0aec0; margin-bottom:14px;">
        The Settings tab is for persistent configuration — credentials and defaults that carry across all runs.
        Per-run options (data size, geo scope, liveboard name, etc.) live in the <strong style="color:#e2e8f0;">⚙️ Settings accordion</strong> on the main screen.
      </p>
      <table>
        <tr><th style="width:200px;">Section</th><th>What's here</th></tr>
        <tr>
          <td>TS Environment credentials</td>
          <td>Trusted auth URL and secret key for each ThoughtSpot environment you have access to.</td>
        </tr>
        <tr>
          <td>Default Run Inputs</td>
          <td>Optional. Enable to have the app pre-fill Industry, Line of Business, Function, and Company URL at page load. Useful if you always demo the same use case.</td>
        </tr>
        <tr>
          <td>Admin defaults</td>
          <td>Admin-only. Set default values for AI model, TS environment, data size, etc. — these become the starting values everyone sees when they log in.</td>
        </tr>
      </table>
    </div>

    <!-- ── Run History ─────────────────────────────── -->
    <div class="section-label">Run History Tab</div>

    <div class="card">
      <p style="font-size:14px; color:#a0aec0;">
        Shows all your previous pipeline runs — company, use case, model, data size, stage reached, and outcome.
        Clicking a row shows the full stage-by-stage log for that run.
        Admin users see runs across all users with filtering by email.
      </p>
    </div>

    <!-- ── Tips ───────────────────────────────────── -->
    <div class="section-label">Tips</div>

    <div class="card">
      <ul class="tips">
        <li><strong>Liveboard Name blank</strong> — auto-derives from the company URL (strips TLD, capitalizes). You can always rename in ThoughtSpot after the run.</li>
        <li><strong>Small vs Medium</strong> — start with Small for testing or when speed matters. Use Medium when you want richer data: 10k rows produce better trend lines, more meaningful KPIs, and more varied chart distributions.</li>
        <li><strong>Geo Scope</strong> — use International when the prospect is a global company; USA Only for US-focused demos or when you want cleaner geographic data.</li>
        <li><strong>Tag Name</strong> — great for keeping demo objects organized. All created objects (model + liveboard) get the tag automatically. Useful when running multiple demos on the same cluster.</li>
        <li><strong>Data Adjuster</strong> — paste any existing liveboard URL into the Chat tab prompt to skip the build pipeline and go straight to adjusting data values for an existing demo.</li>
        <li><strong>Default Run Inputs</strong> — in Settings, enable this to have the app pre-fill your favorite vertical/use case combination at every page load. Saves clicks when you run the same demo type repeatedly.</li>
      </ul>
    </div>

    <!-- ── Troubleshooting ─────────────────────────── -->
    <div class="section-label">Troubleshooting</div>

    <div class="card">
      <table>
        <tr><th style="width:260px;">Problem</th><th>What to try</th></tr>
        <tr>
          <td>Pipeline hangs at ThoughtSpot</td>
          <td>Check the Deploy Log in the AI Feedback tab. MCP has a 5-minute timeout and will fail gracefully — the pipeline will report the error and stop.</td>
        </tr>
        <tr>
          <td>Liveboard has no data or wrong data</td>
          <td>Verify the TS Environment dropdown matches where you expected the data to land. Each environment is its own Snowflake + ThoughtSpot pair.</td>
        </tr>
        <tr>
          <td>"Auth key not set" error</td>
          <td>Select a TS environment from the dropdown before hitting GO. The pipeline requires an environment selection — it will not run without one.</td>
        </tr>
        <tr>
          <td>Login issues</td>
          <td>Use the direct URL <code>https://thoughtspot-dp-demoprep.hf.space</code> — the HuggingFace wrapper URL blocks auth cookies.</td>
        </tr>
        <tr>
          <td>Data generation timed out</td>
          <td>Try switching to Small data size. Medium runs (~10k rows) can take 20–30 minutes for data generation.</td>
        </tr>
        <tr>
          <td>Insert errors in Data stage</td>
          <td>Usually a schema type mismatch. Try running again — the AI regenerates the DDL on retry and typically resolves the conflict.</td>
        </tr>
      </table>
    </div>

    <div class="footer">
      DemoPrep &nbsp;·&nbsp;
      <a href="https://thoughtspot-dp-demoprep.hf.space" target="_blank">App</a> &nbsp;·&nbsp;
      <a href="https://huggingface.co/spaces/boone-ts/demoprep_doc" target="_blank">This Guide</a>
      &nbsp;·&nbsp; Last updated April 30, 2026
    </div>

  </div>
</body>
</html>