Skip to main content
L1

UI Component Mapping

← Back to Index

Overview​

This document maps all UI components across the XOPS platform to their underlying data sources, analytics, and Cerebro enhancements. It serves as a reference for understanding how each component is built and what data powers it.

TODO: Components to Document​

Knowledge Graph Components​

Graph Visualization​

  • Software-to-User relationships
  • Vendor-to-Software relationships
  • Department-to-License relationships
  • Cost Center allocations
  • Contract dependencies

Entity Detail Pages​

  • Software Product Detail
  • Vendor Detail
  • User Detail
  • License Detail
  • Contract Detail

Experience Center Widgets​

Financial Widgets​

  • SoftwareSpendOverview - Total spend visualization
  • TopVendorsTable - Vendor ranking and concentration
  • SoftwareCostAllocationTable - Per-user cost breakdown
  • RenewalPipelineTimeline - Upcoming renewal tracking
  • BudgetVarianceChart - Actual vs. planned spend

Usage Analytics Widgets​

  • LicenseUsageAnalytics - Usage distribution and patterns
  • FeatureAdoptionMatrix - Premium feature usage
  • UserActivityHeatmap - Usage trends over time
  • InactiveLicensesList - Reclamation candidates

Compliance Widgets​

  • ComplianceScorecard - Overall compliance status
  • AuditReadinessReport - Audit preparation checklist
  • PolicyViolationTracker - Non-compliant installations
  • ShadowITDetection - Unauthorized software

Operational Widgets​

  • PurchaseHistoryTimeline - Procurement timeline
  • ProcurementStakeholderView - Ownership tracking
  • SoftwareOwnershipDashboard - Owner portfolios

Copilot Query Patterns​

Natural Language Queries​

  • Spend analysis queries
  • Vendor comparison queries
  • Usage analysis queries
  • Renewal timeline queries
  • Ownership lookup queries
  • Compliance check queries

Copilot Response Formats​

  • Tabular data responses
  • Summary with insights
  • Recommendations with actions
  • Drill-down suggestions
  • Export options

Sidekick Interactions​

User Self-Service​

  • Software request workflows
  • Access troubleshooting
  • License status lookup
  • Installation guidance

Proactive Notifications​

  • License expiration alerts
  • Access grant confirmations
  • Renewal reminders
  • Optimization suggestions

Operator App Screens​

Device Management​

  • Device scan and identification
  • Software inventory view
  • Provisioning checklist
  • Deployment status

Troubleshooting​

  • Issue diagnosis wizard
  • Knowledge base search
  • Step-by-step guides
  • Escalation workflows

Component Architecture Patterns​

Data Binding​

// Example component data flow
Component → GraphQL Query → Gold Layer Table → UI Render

Real-time Updates​

  • WebSocket connections for live data
  • Polling intervals for near-real-time
  • Cache invalidation strategies

Performance Optimization​

  • Lazy loading for large datasets
  • Pagination for lists and tables
  • Materialized views for complex queries
  • Client-side caching

Component Design System​

Visual Hierarchy​

  • Primary actions
  • Secondary actions
  • Informational elements
  • Navigation elements

Color Coding​

  • 🔴 Critical/Urgent (< 30 days to renewal, high risk)
  • 🟡 Warning (31-90 days, medium risk)
  • 🟢 Healthy (> 90 days, low risk)
  • ⚠️ Attention required
  • ✓ Verified/Compliant

Interaction Patterns​

  • Click to drill down
  • Hover for tooltip/preview
  • Right-click for context menu
  • Export buttons for reports