Merge pull request #71 from sigmacomputing/api-embed-carousel

Api embed carousel

Author: pballai

embedding_qs_series_2_api_use_cases/.env

@@ -50,33 +50,4 @@ VIEW_TEAMS=Embed_Users
 # Test Users - Build User (full editing access)  
 BUILD_EMAIL=build.embed.qs@example.com
 BUILD_ACCOUNT_TYPE=Build
-BUILD_TEAMS=Embed_Users
-
-# =============================================================================
-# SIGMA EMBED PARAMETERS (OPTIONAL)
-# =============================================================================
-# These parameters control the appearance and behavior of embedded content
-# All values shown are defaults - modify as needed for your use case
-
-# Content Visibility Controls
-HIDE_FOLDER_NAVIGATION=true
-HIDE_MENU=true
-HIDE_PAGE_CONTROLS=false
-HIDE_RELOAD_BUTTON=false
-HIDE_TITLE=false
-HIDE_TOOLTIP=2
-HIDE_VIEW_SELECT=false
-
-# Interface Configuration
-MENU_POSITION=none
-THEME=Lite
-LNG=English
-
-# Responsive and Mobile Settings  
-DISABLE_AUTO_REFRESH=false
-DISABLE_MOBILE_VIEW=false
-RESPONSIVE_HEIGHT=false
-
-# Page and View Targeting (leave empty for workbook-level embedding)
-PAGE_ID=
-VIEW_ID=
+BUILD_TEAMS=Embed_Users

embedding_qs_series_2_api_use_cases/data/default-workbooks.json

@@ -1,3 +1,12 @@
 {
-  "defaults": []
+  "defaults": [
+    {
+      "userEmail": "view.embed.qs@example.com",
+      "memberID": "Upf4cYouz5fAvk1SDH80L4pGihtUg",
+      "workbookName": "Plugs Transactions",
+      "workbookUrlId": "6QEnNYADhD50tbSnlwMltH",
+      "createdAt": "2025-08-08T19:33:58.595Z",
+      "updatedAt": "2025-08-08T19:33:58.595Z"
+    }
+  ]
 }

embedding_qs_series_2_api_use_cases/helpers/create-jwt.js

@@ -17,7 +17,9 @@ function generateJwt({ embedUrl, mode, sub, permissions }) {
   }
 
   const finalPermissions =
-    permissions || (mode === "build" ? ["build", "view"] : ["view"]);
+    permissions || 
+    (mode === "admin" ? ["build", "view", "admin"] : 
+     mode === "build" ? ["build"] : ["view"]);
 
   const payload = {
     iss: process.env.CLIENT_ID,

embedding_qs_series_2_api_use_cases/helpers/get-workbooks.js

@@ -29,9 +29,18 @@ async function getWorkbooksByTeam(teamName = process.env.WORKSPACE_NAME) {
 
   const data = await response.json();
 
+  if (process.env.DEBUG === "true") {
+    console.log(`All workbooks returned by API:`, data?.entries?.map(w => ({ name: w.name, path: w.path })));
+    console.log(`Filtering for team: "${teamName}"`);
+  }
+
   // Filter workbooks by exact match to provided team/workspace path
   const filtered = data?.entries?.filter((w) => w.path === teamName);
 
+  if (process.env.DEBUG === "true") {
+    console.log(`Filtered workbooks:`, filtered?.map(w => ({ name: w.name, path: w.path })));
+  }
+
   // Return only relevant metadata for downstream use
   return filtered.map((w) => ({
     id: w.workbookId, // full UUID for API calls

embedding_qs_series_2_api_use_cases/public/api-embed-bookmarks/index.html

@@ -351,7 +351,7 @@ <h3>JWT:</h3>
 
       try {
         const res = await fetch(
-          `/api/jwt/api-embed-bookmarks?workbookUrlId=${encodeURIComponent(
+          `/api/jwt/${currentMode}?workbookUrlId=${encodeURIComponent(
             workbookUrlId
           )}&embedType=${encodeURIComponent(embedType)}`,
           {

embedding_qs_series_2_api_use_cases/public/api-embed-bookmarks_db/index.html

@@ -915,7 +915,7 @@ <h2>Save Bookmark</h2>
 
       try {
         const res = await fetch(
-          `/api/jwt/api-embed-bookmarks_db?workbookUrlId=${encodeURIComponent(
+          `/api/jwt/${currentMode}?workbookUrlId=${encodeURIComponent(
             workbookUrlId
           )}&embedType=${embedType}`,
           {

embedding_qs_series_2_api_use_cases/public/api-embed-carousel/README.md

@@ -0,0 +1,63 @@
+# API Workbook Carousel QuickStart
+
+## Overview
+This QuickStart demonstrates an interactive workbook selection experience using a simple, stable carousel interface. Users can visually browse through available workbooks using thumbnail images and smooth navigation, providing an engaging way to discover and select embedded content.
+
+## Features
+- Simple Carousel Navigation: Clean horizontal slider with previous/next buttons
+- User-Specific Content: Dynamic filtering showing only workbooks accessible to the selected user
+- Thumbnail Support: Visual workbook previews with stable image display
+- Instant Visual Feedback: Loading indicators and selected state animations
+- Stable Performance: Custom implementation designed for reliability during all interactions
+
+## Key Technical Design: User-Specific Workbook Filtering
+
+### API Architecture
+This carousel implements user-specific content filtering using Sigma's member-based API approach:
+
+// Uses member-specific API endpoint
+const res = await fetch("/api/workbook-copy-create/all-workbooks");
+
+### How Filtering Works
+1. Member ID Resolution: Resolves the selected embed user's member ID
+2. Permission-Based Filtering: Calls `/members/{memberId}/files` to get user-accessible content
+3. Shows only workbooks the selected user can actually access
+4. Cross-Workspace Access: Not limited to specific workspace folders
+
+- Best Practice: Production embed apps should use workspace organization for better content governance
+
+### API Endpoints Used
+- `GET /api/workbook-copy-create/all-workbooks` - User-specific workbook filtering
+- `POST /api/jwt/{currentMode}` - Dynamic JWT generation based on user type
+- `GET /env.json` - Environment configuration and user account types
+
+## File Structure
+api-embed-carousel/
+├── index.html          # Main carousel interface
+└── README.md           # This documentation
+
+## Thumbnail Configuration
+1. Location: Place images in `/public/assets/workbook-thumbnails/`
+2. Naming: Use exact workbook names as filenames (e.g., `Sales Dashboard.png`)
+3. Format: PNG format recommended, 240x140px optimal size
+4. Fallback: Missing thumbnails show "Missing Thumbnail" placeholder
+
+
+## Technical Implementation
+
+### Custom Carousel Implementation
+- Simple HTML structure with CSS transforms for smooth sliding
+- Previous/next button navigation with keyboard support
+- Fixed positioning to avoid layout conflicts
+- Stable image display without DOM manipulation during interactions
+
+### User State Management
+- Mode Switching: Automatic carousel reset when changing users
+- Loading States: Immediate visual feedback with spinner and workbook name
+- Selection Memory: Maintains selected workbook display after carousel closes
+- Stable Navigation: Simple slide tracking without complex state management
+
+### JWT Generation
+- Dynamic Modes: View users get `["view"]`, Build users get `["build"]` permissions
+- Real-time Generation: JWT created on workbook selection with user-specific claims
+- Debug Display: Decoded JWT payload visible in sidebar for learning