Add Solution Overview tab with enhanced Venn diagram visualization and flyout component details

[Copilot]

This PR implements a new "Solution Overview" feature that provides a visual representation of solution component overlaps using Venn diagrams.

New Features

Solution Overview Tab

• Added a new navigation tab called "Solution Overview" with a Target icon
• Positioned between Home and Insight viewer in the main navigation
• Marked as "new" with a sparkle indicator

Venn Diagram Visualization

• Enhanced: Interactive SVG-based Venn diagrams with significantly larger circles for better readability
• Improved: Shows detailed component type breakdowns with vertical layout for maximum readability (each component type on separate lines)
• Enhanced: Larger, bolder text with improved contrast for better visibility
• Cleaner design: Removed "shared" text from overlap areas for streamlined appearance
• Better positioning: All text properly contained within circle boundaries
• Supports 1-3 solutions with proper circle positioning and overlap regions
• For 4+ solutions, falls back to a grid-based layout with overlap summaries and component type details
• Distinct color coding for different solutions and their intersections
• Component counts displayed for each region (individual solutions and overlaps)

Component Details Panel

• Updated: Flyout/sheet panel that appears from the side when diagram sections are clicked
• Groups components by type (Entity, Attribute, Security Role, Plugin Step)
• Displays component Object IDs, types, and display names
• Shows which solutions are involved in the selected overlap
• Color-coded component type indicators with icons
• Improved readability: Full-width Venn diagram when details aren't needed

Backend Changes

Generator Enhancements

• Added new DTO classes: Solution, SolutionComponent, SolutionOverview, ComponentOverlap
• Implemented GetSolutionOverview() method in DataverseService to retrieve solution metadata
• Enhanced component retrieval to get individual solution components rather than aggregated data
• Added overlap calculation logic to identify shared components between solutions
• Updated WebsiteBuilder to export solution overview data alongside existing metadata

Data Structure

// New solution data structure includes:
- Solution ID, unique name, and display name
- List of components with type information
- Pre-calculated overlaps between all solution combinations
- Component type names (Entity, Attribute, Security Role, Plugin Step)

Frontend Implementation

TypeScript Types

• Added SolutionType, SolutionComponentType, ComponentOverlapType, and SolutionOverviewType
• Extended existing type definitions in lib/Types.ts

Components

• SolutionOverviewView: Main page component with flyout layout
• SolutionVennDiagram: Enhanced SVG-based diagram rendering with larger circles, vertical component type layout, and clean overlap display without "shared" text
• ComponentDetailsPane: Interactive details panel with filtering and grouping (now in flyout)

Sample Data

Updated stub data to include 4 sample solutions with complex overlap patterns for comprehensive testing:

• Solutions 1-3 (Core Platform, Sales Module, Customer Service) have extensive overlaps between them
• Solution 4 (Reporting Module) only overlaps with Solution 2
• This demonstrates both the Venn diagram (1-3 solutions) and grid layout (4+ solutions) functionality

Visual Design

The interface follows the existing application design patterns:

• Significantly improved: Much larger circles (120px radius vs 80px previously) for better visibility
• Enhanced readability: Component types now displayed vertically instead of comma-separated for optimal readability
• Streamlined design: Removed "shared" text from overlap areas for cleaner appearance
• Precise positioning: All text properly contained within their respective circle boundaries
• Enhanced: Component details now appear in a slide-out panel instead of always-visible sidebar
• Full-width Venn diagram for better visibility and readability
• Responsive flyout layout using existing Sheet component
• Hover effects and interactive elements
• Icon-based component type indicators
• Color-coded sections for easy identification

Usage

When users navigate to the Solution Overview tab, they see:

1. A full-width visual Venn diagram representing their configured solutions with much larger, more readable circles
2. Component counts and vertical component type breakdowns in each region showing overlap statistics
3. Clickable regions that open a flyout panel with detailed component information
4. Comprehensive component information including IDs and types in the flyout

This feature helps administrators and developers understand solution architecture and identify shared components across different solutions in their Dataverse environment.

Enhanced two-solution Venn diagram with vertical component layout:

Four-solution grid layout demonstrating complex overlap patterns:

Fixes #57.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Copilot]

@magesoe 👋 This repository doesn't have Copilot instructions. With Copilot instructions, I can understand the repository better, work faster and produce higher quality PRs.

I can generate a .github/copilot-instructions.md file for you automatically. Click here to open a pre-filled issue and assign it to me. I'll write the instructions, and then tag you for review.

[magesoe]

@copilot The text is hard to read

Make the list a flyout from the side of the screen, instead of always showing

[Copilot]

@copilot The text is hard to read

Make the list a flyout from the side of the screen, instead of always showing

I've converted the Component Details from an always-visible right panel to a flyout/sheet that appears from the side when clicking on diagram sections. The Venn diagram now takes the full width for better readability, and the detailed component information is shown in a slide-out panel only when needed.

Changes in commit baf8e4a.

[magesoe]

@copilot it is still hard to read the text. Also it should show the distinct component types in each section.

Perhaps making the circles bigger will help

[Copilot]

@copilot it is still hard to read the text. Also it should show the distinct component types in each section.

Perhaps making the circles bigger will help

I've significantly improved the Venn diagram readability by making the circles much larger (120px radius vs 80px previously) and adding component type breakdown details directly in each section. Now each area shows specific component types like "1 Attribute, 1 Security Role" and "1 Entity, 1 Plugin Step" instead of just component counts. The text is also larger and bolder for better visibility.

Changes in commit 7c1ffa8.

[magesoe]

@copilot
It is still very much unreadable.

List the component types vertically.
Make sure the text is within the area it belongs to

No need to write shared on the overlap.

Make a test with 4 solutions, where 1-3 have a lot of overlap, but 4 only overlaps with 2

[Copilot]

@copilot
It is still very much unreadable.

...

I've implemented all the requested improvements to the Venn diagram readability:

✅ Component types now listed vertically - Each component type appears on its own line instead of comma-separated
✅ Removed "shared" text from overlap areas for cleaner appearance
✅ Improved text positioning - All text is properly contained within circle boundaries
✅ Added 4-solution test case - Solutions 1-3 (Core Platform, Sales Module, Customer Service) have extensive overlaps, while Solution 4 (Reporting Module) only overlaps with Solution 2

The changes work across all scenarios:

• Two-solution Venn diagram shows vertical component types with clean overlap display
• Four-solution grid layout demonstrates the requested overlap pattern with much better readability

Changes in commit 54add8b.