FabricAgent Frontend

🌐 Live Demo: https://fabricprompts.com/ - Prompt Explorer with GIAC Filtering

A React-based frontend for exploring and managing Power BI and Fabric prompts with advanced filtering capabilities for Guy in a Cube content.

🎥 Executive Briefing

Watch the video:
- Hosted: https://fabricprompts.com/Executive_Briefing.mp4
- Local dev: http://localhost:5173/Executive_Briefing.mp4
Briefing notes: Executive_Briefing.md

If you’re running locally via npm run dev, the video is served from Vite’s public directory and available at the Local dev URL above.

🎯 Features

Advanced Prompt Filtering

🧊 Guy in a Cube Filter: 38 expert prompts generated from GIAC videos
👤 Custom Filter: 72 workforce prompts for specialized use cases
🔍 Combined Filtering: Source + search + pillar filtering
📊 Real-time Statistics: Live counts and breakdowns

Visual Indicators

Blue GIAC Badges: Identify Guy in a Cube prompts with cube icons
Gray Custom Badges: Mark custom workforce prompts with user icons
YouTube Integration: Direct links to source videos for GIAC prompts
Interactive Counts: Filter buttons show real-time prompt counts

Complete Sections

📚 Catalogue: 110 total prompts with advanced filtering
💼 Workforce: 72 workforce prompts in dedicated section
🔄 Workflow: 113 DAG nodes with interactive visualization
❓ Help: Comprehensive documentation and guides

🚀 Quick Start

Prerequisites

Node.js 18+
npm or yarn

Installation & Setup

# 1. Install dependencies
npm install

# 2. Start development server
npm run dev

# 3. Open browser
# http://localhost:5173/

Build for Production

# Build optimized bundle
npm run build

# Preview production build
npm run preview

Deployment Notes (Azure OIDC)

CI workflow: .github/workflows/azure-deploy.yml
Uses GitHub OIDC via azure/login@v2 (no publish profile).
Required repo secrets: AZURE_CLIENT_ID, AZURE_TENANT_ID, AZURE_SUBSCRIPTION_ID.
Required repo variables: AZURE_WEBAPP_NAME, AZURE_RESOURCE_GROUP.
Builds frontend from src/ and deploys a self-contained release.zip to Linux App Service.
Run-from-package enabled; a tiny Node server serves SPA with /health and /version endpoints.
Docs URL (Help): controlled by repo variable VITE_HELP_CENTER_URL (fallback to VITE_HELP_URL).

📚 Documentation

Overview & Getting Started: see sections below and src/README-REACT.md
Executive Briefing: see links in the "Executive Briefing" section above
Azure Deployment: docs/DEPLOYMENT_AZURE.md
Validation & Checks: docs/VALIDATION.md
Upstream Content Pipeline (GIAC/Workforce): docs/UPSTREAM_PIPELINE.md

📊 Data Structure

Main Data Files

src/
├── prompt-catalog.json      # 110 prompts (38 GIAC + 72 Custom)
├── workforce_prompts.json   # 72 workforce prompts (dedicated section)
└── dag.json                 # 113 workflow nodes + 45 edges

Prompt Structure (GIAC)

{
  "id": "giac-5i8yzn8odao",
  "name": "Power BI Assistant: STOP Using Measures in Power BI Until You See This!",
  "provenance": "giac",
  "category": "dax-modeling",
  "tags": ["dax", "measures", "guy-in-a-cube"],
  "links": {
    "youtube": "https://www.youtube.com/watch?v=5I8yzn8oDAo"
  },
  "system": "You are a Power BI expert assistant specializing in DAX..."
}

Workflow Structure (DAG)

{
  "nodes": [
    {
      "id": "workflow-giac-dax-optimization",
      "label": "DAX Optimization Workflow",
      "group": "giac",
      "pillars": ["dax", "performance"]
    }
  ],
  "edges": [
    {
      "from": "workflow-1",
      "to": "workflow-2"
    }
  ]
}

🎨 User Interface

Navigation Structure

[Catalogue] [Workforce] [Workflow] [Help]
     ↓           ↓           ↓        ↓
110 prompts  72 prompts  113 nodes  Docs
GIAC filter  Full table  DAG graph  Guides

Filter Interface

Search: [_______________] 

Source: [All (110)] [🧊 Guy in a Cube (38)] [👤 Custom (72)]

Pillars: [All Pillars] [DAX] [Fabric] [Power Query] [Governance] [Performance]

Results: Showing 38 of 110 prompts • Filtered by Guy in a Cube

Prompt Display

🧊 GIAC    Power BI Assistant: DAX Optimization Techniques
           dax-modeling                                    🎥 YouTube
           Expert guidance on DAX optimization based on Guy in a Cube content

👤 Custom  Accessibility and UX Reviewer  
           deployment-governance
           Audit Power BI reports for accessibility compliance

🔧 Development

Project Structure

src/
├── components/
│   ├── layout/              # Header, Footer, navigation
│   ├── sections/            # Main page sections
│   │   ├── CatalogueSection.tsx
│   │   ├── WorkforceSection.tsx
│   │   └── DagSection.tsx
│   ├── tables/              # Data tables and modals
│   │   ├── PromptTable.tsx
│   │   └── PromptDetailsModal.tsx
│   ├── ui/                  # Reusable UI components
│   │   ├── Hero.tsx
│   │   ├── SectionCard.tsx
│   │   └── PillarBadge.tsx
│   └── graph/               # DAG visualization
│       └── WorkflowGraph.tsx
├── hooks/
│   ├── useData.ts           # Data loading and management
│   └── useChatbase.ts       # Chatbot integration
├── services/                # API and data services
├── utils/                   # Utility functions
├── types.ts                 # TypeScript interfaces
├── constants.ts             # App constants
└── App.tsx                  # Main application component

Key Components

PromptTable.tsx

Main filtering logic for GIAC vs Custom prompts
Visual indicators and badges
Search and pillar filtering integration
Real-time count updates

Hero.tsx

Statistics display with GIAC/Custom breakdown
Dynamic counts based on current data
Visual hierarchy for key metrics

DagSection.tsx

Interactive workflow visualization
Node clicking for prompt details
GIAC workflow integration

Filtering Logic

// Source filtering implementation
const sourceMatch = !activeSource || 
    (activeSource === 'giac' && p.provenance === 'giac') ||
    (activeSource === 'custom' && p.provenance !== 'giac');

// Combined with search and pillar filters
const filteredPrompts = prompts.filter(p => {
    return searchMatch && pillarMatch && sourceMatch;
});

📈 Statistics & Analytics

Current Data Breakdown

Total Prompts: 110 (38 GIAC + 72 Custom)
Categories: DAX Modeling (26), Fabric Architecture (8), Power Query (10), etc.
GIAC Coverage: DAX (15), Fabric (8), General (7), Power Query (5), Visualization (2), Performance (1)
Workflow Nodes: 113 (72 catalog + 41 GIAC workflows)

Quality Metrics

Schema Compliance: 100% of prompts follow defined schema
YouTube Integration: All GIAC prompts have source video links
Traceability: Full audit trail from prompts to source content
Test Coverage: Comprehensive test suite with quality gates

🔗 Integration

Data Sources

GIAC Prompts: Generated from scripts/generate_giac_prompts.py
Workforce Prompts: Curated custom prompts for specialized workflows
DAG Workflows: Interactive process visualization with GIAC integration

External Services

YouTube: Direct video links for GIAC prompts
Chatbase: Embedded chatbot for user assistance
CI/CD: Automated testing and deployment

🎯 Usage Examples

Filtering Prompts

Find GIAC DAX Prompts: Click "Guy in a Cube" → Select "DAX" pillar
Search Custom Prompts: Click "Custom" → Search "governance"
Browse All Content: Click "All" → Use search or pillar filters

Accessing Source Content

View YouTube Video: Click YouTube icon on GIAC prompts
Read Documentation: Click prompt name for detailed modal
Explore Workflows: Navigate to Workflow section for DAG visualization

Development Workflow

Update Data: Regenerate prompts with GIAC generation scripts
Test Changes: Run comprehensive test suite
Verify UI: Check filtering and visual indicators
Deploy: Build and deploy with CI/CD pipeline

📚 Documentation

Main README: ../README.md - Complete project overview
GIAC Generation: ../docs/GIAC_PROMPT_GENERATION.md - Prompt generation guide
Frontend Features: ../FRONTEND_GIAC_FILTERING.md - Filtering capabilities
Test Suite: ../tests/README.md - Testing framework

🚀 Deployment

The frontend is designed to work with static hosting or integrated with the Python backend:

# Static deployment
npm run build
# Deploy dist/ folder to your hosting service

# Integrated deployment
# Copy built assets to backend static folder
# Configure backend to serve frontend routes

🎉 Success Metrics

User Experience

✅ One-click filtering between GIAC and custom prompts
✅ Visual indicators clearly distinguish prompt sources
✅ YouTube integration provides direct access to expert content
✅ Real-time statistics show current filter status
✅ Comprehensive coverage of all prompt types and workflows

Technical Quality

✅ 110 total prompts with full metadata
✅ 38 GIAC prompts with YouTube traceability
✅ 113 workflow nodes with interactive visualization
✅ 100% schema compliance across all content
✅ Responsive design works on all devices

The frontend provides a comprehensive, user-friendly interface for exploring both expert Guy in a Cube content and custom workforce prompts with advanced filtering and visualization capabilities.

Azure Web App via GitHub Actions (.github/workflows/azure-deploy.yml)
Builds under src/ using Node 20 and deploys src/dist

Configure the following GitHub secrets for OIDC-based Azure login:

AZURE_CLIENT_ID
AZURE_TENANT_ID
AZURE_SUBSCRIPTION_ID
AZURE_WEBAPP_NAME (target app service)

🔎 Hybrid Search (Azure Cognitive Search)

Configure .env using .env.example (set AZURE_AI_SEARCH_* and Azure OpenAI keys; set AZURE_OPENAI_EMBED_MODEL).
Create/update your Azure Search index to match todo/specs/user-guide-automation/003-implement-hybrid-search/hybridsearch_fabricagent_aisearch_index.json.
Dry run (no upserts): make ingest.dryrun (prints counts by folder/ext)
Ingest repo files to Azure Search: make ingest
Run a hybrid query from CLI: make query q="your query" k=10 opts="--semantic --filter kind=md,tag=spec"
Local API server exposes /api/search/hybrid (POST search, GET suggestions): make serve

Environment (set in .env)

Search: AZURE_AI_SEARCH_ENDPOINT, AZURE_AI_SEARCH_API_KEY, AZURE_AI_SEARCH_INDEX_NAME, optional AZURE_SEARCH_SEMANTIC_CONFIG
Embeddings: AZURE_OPENAI_ENDPOINT, AZURE_OPENAI_API_KEY (or AZURE_OPENAI_KEY), AZURE_OPENAI_EMBED_MODEL (e.g., text-embedding-3-small)

Ingest controls

Limit scope: INGEST_ONLY=knowledge make ingest (only index knowledge/)
Limit batch size for first run: INGEST_ONLY=knowledge INGEST_MAX_DOCS=64 make ingest
Caching: per-chunk SHA cache in .reports/hybrid_ingest_cache.json avoids re‑embedding unchanged chunks

Sample CLI queries:

make query q="Rewrite this DirectQuery prompt for performance" k=8 opts="--semantic"
make query q="DAX: monthly distinct customers with filter context notes" k=8
make query q="Incremental refresh parameters guidance for Fabric" k=8 opts="--semantic"
make query q="Prompt style guide for Fabric Agent" k=8

Index provisioning:

Create or update the index from a local schema JSON:
- make index.create schema="todo/specs/user-guide-automation/003-implement-hybrid-search/hybridsearch_fabricagent_aisearch_index.json"
- Optionally override embedded azureOpenAIParameters from env: prefix with OVERRIDE_AZURE_OPENAI=1
  - Example: OVERRIDE_AZURE_OPENAI=1 AZURE_OPENAI_ENDPOINT=... AZURE_OPENAI_EMBED_MODEL=text-embedding-3-small AZURE_OPENAI_API_KEY=... make index.create

Convert Search response → upsert payload

Build an upsert payload from a prior Search response:
- make convert.payload in=embeddings/embeddings_fabricagent.json out=embeddings/upsert_payload.json action=mergeOrUpload
Directly POST to your index (uses AZURE_AI_SEARCH_* env):
- make convert.post in=embeddings/embeddings_fabricagent.json action=mergeOrUpload index=fabricagent

Implementation notes

IDs: use sha1(file_path)-chunk_index to satisfy Azure key constraints; original file_path is stored separately
Chunking: prompts ~500 tokens (100 overlap), transcripts ~300 (50 overlap), never split code fences; MD front‑matter is excluded from embeddings
Tags: lowercase, de‑duplicated; include top‑level folder and role (prompt|guide|transcript|spec)

Name		Name	Last commit message	Last commit date
Latest commit History 57 Commits
.github/workflows		.github/workflows
codex		codex
docs		docs
src		src
.gitignore		.gitignore
AGENTS.md		AGENTS.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
Dockerfile		Dockerfile
Executive_Briefing.md		Executive_Briefing.md
LICENSE		LICENSE
Makefile		Makefile
README.md		README.md
SECURITY.md		SECURITY.md
azure-pipelines.yml		azure-pipelines.yml
start_proxy.sh		start_proxy.sh
sync_public.sh		sync_public.sh
validate_publication_readiness.sh		validate_publication_readiness.sh
verify_fabricagent.sh		verify_fabricagent.sh
vite.config.ts		vite.config.ts
web.config		web.config

Folders and files

Latest commit

History

Repository files navigation

FabricAgent Frontend

🎥 Executive Briefing

🎯 Features

Advanced Prompt Filtering

Visual Indicators

Complete Sections

🚀 Quick Start

Prerequisites

Installation & Setup

Build for Production

Deployment Notes (Azure OIDC)

📚 Documentation

📊 Data Structure

Main Data Files

Prompt Structure (GIAC)

Workflow Structure (DAG)

🎨 User Interface

Navigation Structure

Filter Interface

Prompt Display

🔧 Development

Project Structure

Key Components

Filtering Logic

📈 Statistics & Analytics

Current Data Breakdown

Quality Metrics

🔗 Integration

Data Sources

External Services

🎯 Usage Examples

Filtering Prompts

Accessing Source Content

Development Workflow

📚 Documentation

🚀 Deployment

🎉 Success Metrics

User Experience

Technical Quality

🔎 Hybrid Search (Azure Cognitive Search)

About

Topics

Resources

License

Code of conduct

Contributing

Security policy

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages