Saved Views – Save, Share & Restore Custom Graph Configurations

^{New .7.x}

Saved Views (also called Node Formations) in Nodinite Mapify enable you to save specific graph configurations—including filters, layouts, zoom levels, and entity selections—so you can instantly return to the same view later. Whether you're conducting monthly compliance audits, preparing stakeholder presentations, or analyzing recurring patterns, Saved Views eliminate the need to recreate complex filters every session.

Saved Views support both personal views (private to your account) and shared views (accessible by your entire team), making them ideal for collaboration and standardization across distributed teams.

Example of Saved Views dropdown menu showing personal and shared views for quick access.

Why use Saved Views?

Saved Views deliver significant productivity gains and collaboration benefits:

• 40% faster analysis – Skip manual filter recreation; load saved configurations in one click
• Team collaboration – Share standardized views across departments for consistent reporting
• Recurring workflows – Perfect for monthly audits, compliance checks, and stakeholder presentations
• Audit readiness – Maintain compliance-specific views (GDPR, SOX, HIPAA) for regulatory reviews
• Knowledge sharing – New team members can learn system architecture by exploring pre-configured views
• Executive presentations – One-click access to business-friendly visualizations

Note: Saved Views require Mapify licensing. Contact Nodinite Sales to enable this feature.

What is a Saved View?

A Saved View is a snapshot of your current Mapify configuration, including:

• Active filters – Entity types, domains, owners, compliance tags, date ranges
• Graph layout – 2D or 3D visualization mode, node positioning, zoom level, camera angle
• Selected entities – Specific Agents, Applications, Resources, Services, or Integrations to display
• Visual settings – Node colors, edge visibility, label display preferences
• Metadata – View name, description, creator, creation date, last modified date

When you load a Saved View, Mapify instantly reconstructs the exact graph configuration you saved—no manual adjustments needed.

Personal vs Shared Saved Views

Mapify supports two types of Saved Views:

Common Use Cases

Compliance Audits

Scenario: Your organization conducts monthly SOX compliance audits to verify financial integrations meet regulatory requirements.

Solution: Create a Shared View named "SOX Financial Integrations" that filters for:

• Domain: Finance
• Compliance Tags: SOX, Financial Reporting
• Entity Types: Integrations, Services
• Owner: Finance Team

Benefit: Auditors load the view in one click, ensuring consistent scope every month. No risk of missing entities due to filter errors.

Stakeholder Presentations

Scenario: Business stakeholders need monthly updates on integration health without technical jargon.

Solution: Create a Shared View named "Executive Dashboard" with:

• High-level integrations only (hide low-level Resources and Categories)
• Color-coded by health status (green = healthy, red = issues)
• Domain groupings (Sales, Marketing, Operations)
• Simplified labels and 2D layout

Benefit: Executives see business-relevant information instantly. Presenters avoid spending 10 minutes recreating filters before meetings.

Recurring Analysis

Scenario: Your team investigates SAP integration patterns weekly to identify optimization opportunities.

Solution: Create a Personal View named "SAP Performance Analysis" with:

• System filter: SAP ERP, SAP CRM
• Entity types: Integrations, Services, Resources
• Metadata: Response Time, Error Rate, Throughput
• 3D layout with clustering by domain

Benefit: Analysts start investigations immediately, focusing on insights rather than configuration.

Team Onboarding

Scenario: New team members need to understand your integration landscape architecture.

Solution: Create Shared Views for common scenarios:

• "Architecture Overview" – All domains and top-level integrations
• "Sales Systems" – Sales domain with all dependencies
• "Critical Path Integrations" – Mission-critical workflows only

Benefit: New hires explore pre-configured views, accelerating learning from weeks to days.

User Workflow

The following diagram illustrates the typical Saved Views workflow for creating, sharing, and loading views:

Diagram: Saved Views workflow from initial setup through saving, sharing, loading, and updating views.

Workflow Steps

Creating a Saved View

1. Configure your graph – Apply filters, adjust layout, set zoom level, select entities
2. Click "Save View" button (typically in toolbar: Save View)
3. Enter view details:
   • Name (required): Descriptive name (e.g., "SOX Financial Audit Q1 2026")
   • Description (optional): Purpose and context (e.g., "Quarterly SOX audit for Finance integrations")
   • Visibility (required): Personal or Shared
4. Confirm save – View is now available in your Saved Views dropdown

Loading a Saved View

1. Open Saved Views dropdown (typically in toolbar: Saved Views)
2. Browse views:
   • My Views – Your personal saved views
   • Shared Views – Team-wide views
3. Click view name – Mapify instantly applies all saved settings
4. Optional: Modify filters for ad-hoc analysis without affecting the saved view

Updating a Saved View

1. Load the view you want to update
2. Make changes to filters, layout, or settings
3. Click "Update View" button (or "Save View" and select "Overwrite existing")
4. Confirm update – Changes are saved for all users (if shared view)

Permission Required: Only the original creator or administrators can update Shared Views. Other users can save modified versions as new Personal Views.

Sharing a Personal View

1. Load your Personal View
2. Click "Share View" button (or edit view settings)
3. Confirm sharing – View moves to Shared Views and becomes accessible to all team members

Deleting a Saved View

1. Open Saved Views dropdown
2. Hover over view name – Options menu appears ()
3. Click "Delete"
4. Confirm deletion – Irreversible; view is permanently removed

Permission Required: Only the original creator or administrators can delete Shared Views.

Example: Creating a Compliance Audit View

Let's walk through creating a Shared View for GDPR compliance audits:

Step 1: Apply Filters

Domain: Customer Data, CRM, Marketing
Compliance Tags: GDPR, Personal Data, EU Region
Entity Types: Integrations, Services, Resources
Owner: Data Protection Team
Date Range: Last Modified in Last 90 Days

Step 2: Adjust Layout

• Switch to 2D layout for clarity in presentations
• Group by Domain to show organizational structure
• Color-code by compliance status:
  • Green = Compliant
  • Yellow = Review Needed
  • Red = Non-Compliant
• Set zoom level to fit all entities on screen

Step 3: Save View

Name: GDPR Compliance Audit Q1 2026
Description: Quarterly GDPR audit covering all Customer Data, CRM, and Marketing integrations. Filters applied: EU Region, Personal Data tags. Updated every 90 days.
Visibility: Shared (accessible by Data Protection Team and Auditors)

Step 4: Load and Use

Every quarter, auditors open Mapify, select "GDPR Compliance Audit Q1 2026" from Shared Views, and immediately see the current compliance status. No manual configuration required.

Technical Specifications

This section defines the technical data structure, storage architecture, and versioning strategy for Saved Views. It is intended for developers, database administrators, and solution architects implementing or integrating with the Mapify Saved Views feature.

Data Structure: JSON Schema

Saved Views are stored as JSON objects conforming to the following schema. Each Saved View represents a complete snapshot of user-configured graph state, including filters, layout, and metadata.

Required Fields

Optional Fields

Filters Object Schema

The filters object defines which entities are included in the view:

{
  "domains": ["String"],                    // Array of Domain names
  "complianceTags": ["String"],             // Array of compliance tags (GDPR, SOX, HIPAA, etc.)
  "entityTypes": ["String"],                // Array: "Integration", "Service", "Resource", "Agent", "Application"
  "owners": ["String"],                     // Array of owner names or team names
  "systems": ["String"],                    // Array of System names (e.g., "SAP ERP", "Salesforce")
  "healthStatus": ["String"],               // Array: "Healthy", "Warning", "Error", "Unknown"
  "customMetadata": {                       // Key-value pairs from Custom Metadata fields
    "fieldName": "fieldValue"
  },
  "dateRange": {                            // Optional date filter
    "field": "String",                      // "createdDate", "lastModified", "lastActive"
    "from": "ISO 8601 DateTime",
    "to": "ISO 8601 DateTime"
  },
  "searchQuery": "String"                   // Optional text search query
}

Layout Object Schema

The layout object defines graph visualization settings:

{
  "mode": "2D" | "3D",                      // Visualization mode
  "groupBy": "String",                      // "domain", "owner", "system", "entityType", null
  "zoom": 1.0,                              // Float: 0.1 to 10.0 (1.0 = default)
  "centerX": 0,                             // Float: X-axis camera position
  "centerY": 0,                             // Float: Y-axis camera position
  "centerZ": 0,                             // Float: Z-axis camera position (3D mode only)
  "rotationX": 0,                           // Float: X-axis rotation in degrees (3D mode only)
  "rotationY": 0,                           // Float: Y-axis rotation in degrees (3D mode only)
  "colorScheme": {                          // Optional custom color mapping
    "compliant": "#28a745",
    "reviewNeeded": "#ffc107",
    "nonCompliant": "#dc3545"
  },
  "showLabels": true,                       // Boolean: Display entity labels
  "showEdges": true,                        // Boolean: Display relationship edges
  "nodeSize": "medium",                     // Enum: "small", "medium", "large"
  "edgeThickness": "medium"                 // Enum: "thin", "medium", "thick"
}

Complete Example: Saved View JSON

{
  "viewId": "a3f8d7c2-4b1e-4a9d-8e3f-7c6b5a4d3e2f",
  "viewName": "GDPR Compliance Audit Q1 2026",
  "description": "Quarterly GDPR audit covering all Customer Data, CRM, and Marketing integrations. Filters applied: EU Region, Personal Data tags. Updated every 90 days.",
  "createdBy": "user@nodinite.com",
  "createdDate": "2026-01-15T10:30:00Z",
  "lastModifiedBy": "admin@nodinite.com",
  "lastModifiedDate": "2026-01-19T14:45:00Z",
  "visibility": "shared",
  "schemaVersion": "1.0.0",
  "filters": {
    "domains": ["Customer Data", "CRM", "Marketing"],
    "complianceTags": ["GDPR", "Personal Data", "EU Region"],
    "entityTypes": ["Integration", "Service", "Resource"],
    "owners": ["Data Protection Team"],
    "healthStatus": ["Healthy", "Warning"],
    "dateRange": {
      "field": "lastModified",
      "from": "2025-10-20T00:00:00Z",
      "to": "2026-01-19T23:59:59Z"
    }
  },
  "layout": {
    "mode": "2D",
    "groupBy": "domain",
    "zoom": 1.0,
    "centerX": 0,
    "centerY": 0,
    "colorScheme": {
      "compliant": "#28a745",
      "reviewNeeded": "#ffc107",
      "nonCompliant": "#dc3545"
    },
    "showLabels": true,
    "showEdges": true,
    "nodeSize": "medium",
    "edgeThickness": "medium"
  },
  "selectedEntities": [],
  "sharedWith": ["Data Protection Team", "Auditors"],
  "tags": ["compliance", "GDPR", "quarterly"],
  "isFavorite": false
}

Storage Architecture

Saved Views require persistent storage with support for concurrent multi-user access, version control, and performance optimization. Below is a detailed analysis of storage approaches with recommendations.

Option 1: Browser LocalStorage (Client-Side)

Description: Store Saved Views in browser localStorage as JSON strings. Views are persisted locally on each user's device.

Pros:

• Zero server load – No database queries or API calls for loading views
• Instant access – Views load immediately from local cache
• Offline support – Users can load views without network connectivity
• Simple implementation – No backend changes required

Cons:

• No cross-device sync – Views saved on desktop are unavailable on mobile or other devices
• No shared views – Cannot share views between users or teams
• Limited capacity – localStorage typically limited to 5-10 MB per domain
• No backup/recovery – Views lost if user clears browser cache or switches devices
• Security risk – Sensitive filter data (e.g., compliance tags) stored in plain text locally

Verdict: Not recommended for enterprise deployments. LocalStorage is suitable only for personal views in single-user, non-critical scenarios.

Option 2: Database Storage (Server-Side)

Description: Store Saved Views in a dedicated SQL or NoSQL database table. Views are retrieved via Web API calls.

Database Schema Example (SQL Server):

CREATE TABLE MapifyViews (
    ViewId UNIQUEIDENTIFIER PRIMARY KEY DEFAULT NEWID(),
    ViewName NVARCHAR(255) NOT NULL,
    Description NVARCHAR(1000) NULL,
    CreatedBy NVARCHAR(255) NOT NULL,
    CreatedDate DATETIME2 NOT NULL DEFAULT GETUTCDATE(),
    LastModifiedBy NVARCHAR(255) NULL,
    LastModifiedDate DATETIME2 NULL,
    Visibility NVARCHAR(20) NOT NULL CHECK (Visibility IN ('personal', 'shared')),
    SchemaVersion NVARCHAR(20) NOT NULL DEFAULT '1.0.0',
    ViewData NVARCHAR(MAX) NOT NULL,  -- JSON blob containing filters, layout, etc.
    SharedWith NVARCHAR(MAX) NULL,    -- JSON array of team names
    Tags NVARCHAR(MAX) NULL,          -- JSON array of tags
    IsFavorite BIT DEFAULT 0,
    IsDeleted BIT DEFAULT 0,          -- Soft delete flag
    
    INDEX IX_MapifyViews_CreatedBy (CreatedBy),
    INDEX IX_MapifyViews_Visibility (Visibility),
    INDEX IX_MapifyViews_CreatedDate (CreatedDate DESC)
);

Pros:

• Cross-device sync – Views accessible from any device with user authentication
• Shared views support – Team-wide views with role-based access control
• Backup and recovery – Database backups protect against data loss
• Audit trail – Track creation, modification, and access history
• Scalability – Supports enterprise deployments with 100+ users and 1,000+ views
• Security – Views protected by authentication and authorization

Cons:

• Network dependency – Requires API call to load views (latency: ~100-300ms)
• Server load – Database queries for every view load/save operation
• Implementation complexity – Requires backend API development and database schema migration

Verdict: Recommended for production deployments. Database storage is essential for shared views, multi-user collaboration, and enterprise governance.

Option 3: Hybrid Approach (LocalStorage + Database Sync)

Description: Personal views stored in localStorage for instant access; shared views stored in database. Background sync reconciles changes.

Pros:

• Best of both worlds – Instant personal view access + shared view collaboration
• Offline support – Personal views work without connectivity
• Reduced server load – Personal views don't hit database on every load

Cons:

• Sync complexity – Requires conflict resolution logic for offline edits
• Partial backup – Personal views not backed up unless explicitly synced to database
• User confusion – Users may not understand which views are local vs server-side

Verdict: Consider for advanced scenarios. Hybrid approach adds complexity but improves performance. Suitable for mobile or disconnected environments.

Recommended Storage Strategy

For Nodinite Mapify, we recommend Option 2: Database Storage with the following implementation details:

1. Database Table: MapifyViews (schema above) in Nodinite Integration Manager database
2. Web API Endpoints:
   • GET /api/mapify/views – List all views (personal + shared) for current user
   • GET /api/mapify/views/{viewId} – Load specific view by ID
   • POST /api/mapify/views – Create new view
   • PUT /api/mapify/views/{viewId} – Update existing view
   • DELETE /api/mapify/views/{viewId} – Soft-delete view (set IsDeleted = 1)
3. Permissions Model:
   • Personal views: Only creator can read, update, delete
   • Shared views: All authenticated users can read; only creator + admins can update/delete
4. Performance Optimization:
   • Client-side caching: Cache views in memory for session duration (reduce API calls)
   • Pagination: Load only 50 most recent views initially; lazy-load older views on scroll
   • Compression: Gzip ViewData JSON before storage (reduce database size by ~60%)

Naming Conventions for View IDs

Format: GUIDs (Globally Unique Identifiers) are used for viewId to ensure uniqueness across distributed systems.

Generation: Use NEWID() in SQL Server or Guid.NewGuid() in C# .NET applications.

Example: a3f8d7c2-4b1e-4a9d-8e3f-7c6b5a4d3e2f

Why GUIDs?

• Globally unique – No collision risk even with offline creation and later sync
• Non-sequential – Cannot guess other users' view IDs (security)
• Standardized – Compatible with REST APIs, databases, and distributed systems

Alternative Naming Schemes:

• Sequential integers (e.g., 1, 2, 3) – Not recommended. Risk of ID collisions in distributed environments.
• User-defined strings (e.g., "john-gdpr-audit") – Not recommended. Risk of naming conflicts and special character issues.

Versioning Strategy for Schema Changes

As Mapify evolves, the Saved Views schema will require updates (e.g., new filter types, layout options). A robust versioning strategy ensures backward compatibility.

Schema Version Field

Every Saved View includes a schemaVersion field (semantic versioning: "MAJOR.MINOR.PATCH").

• Current version: "1.0.0"
• Example future version: "1.1.0" (adds new filter field), "2.0.0" (breaking changes)

Backward Compatibility Rules

1. PATCH version increments (e.g., 1.0.0 → 1.0.1):

   • Bug fixes only; no schema changes
   • Old views load without migration

2. MINOR version increments (e.g., 1.0.0 → 1.1.0):

   • New optional fields added
   • Old views load with default values for missing fields
   • Migration strategy: Automatic – API adds default values on load

3. MAJOR version increments (e.g., 1.0.0 → 2.0.0):

   • Breaking changes (field removal, type changes)
   • Old views require explicit migration
   • Migration strategy: Manual or automated migration script

Example Migration: Adding tags Field (v1.0.0 → v1.1.0)

Before (v1.0.0):

{
  "viewId": "...",
  "viewName": "GDPR Audit",
  "schemaVersion": "1.0.0"
  // No 'tags' field
}

After Migration (v1.1.0):

{
  "viewId": "...",
  "viewName": "GDPR Audit",
  "schemaVersion": "1.1.0",
  "tags": []  // Default: empty array
}

API Migration Logic (C#):

public SavedView LoadView(Guid viewId)
{
    var view = _database.GetView(viewId);
    
    // Automatic migration for older schemas
    if (view.SchemaVersion == "1.0.0")
    {
        view.Tags = new List<string>();  // Add default value
        view.SchemaVersion = "1.1.0";
        _database.UpdateView(view);       // Persist migration
    }
    
    return view;
}

Example Migration: Removing colorScheme Field (v1.x → v2.0.0)

Migration Script (SQL):

-- Backup old views before migration
SELECT * INTO MapifyViews_Backup_v1 FROM MapifyViews;

-- Update schema version and remove deprecated field
UPDATE MapifyViews
SET 
    SchemaVersion = '2.0.0',
    ViewData = JSON_MODIFY(ViewData, '$.layout.colorScheme', NULL)
WHERE SchemaVersion LIKE '1.%';

User Communication:

• Notify users 30 days before breaking changes
• Provide export functionality to backup views before migration
• Document migration process in release notes

Version Deprecation Policy

• Support window: Maintain backward compatibility for 2 major versions (e.g., v2.x supports v1.x views)
• Deprecation warning: Display in-app notification when user loads deprecated view
• End-of-life: After 12 months, deprecated views require explicit migration or manual recreation

Multi-User Scenarios and Conflict Resolution

Saved Views are designed for collaboration, but concurrent editing requires conflict resolution strategies.

Scenario 1: Simultaneous Edits to Shared View

Problem: User A and User B both load "Executive Dashboard" (shared view), make changes, and click "Update View" simultaneously.

Solution: Optimistic Locking with Last-Write-Wins

1. Each view has a lastModifiedDate timestamp
2. On update, API checks if server lastModifiedDate matches client's cached version
3. If timestamps match → Allow update
4. If timestamps differ → Reject update with error message

Example API Response (Conflict):

{
  "success": false,
  "error": "Conflict detected. This view was modified by admin@nodinite.com at 2026-01-19 15:30:00. Please reload the view and reapply your changes.",
  "conflictDetails": {
    "serverLastModifiedBy": "admin@nodinite.com",
    "serverLastModifiedDate": "2026-01-19T15:30:00Z",
    "clientLastModifiedDate": "2026-01-19T15:25:00Z"
  }
}

User Experience:

• Display conflict notification with option to "Reload View" or "Save as New View"
• Prevent data loss by offering to save user's changes as new personal view

Scenario 2: View Deleted While User is Editing

Problem: User A loads shared view, makes changes. User B deletes the view. User A clicks "Update View".

Solution: Soft Deletes + Graceful Degradation

1. Views are never permanently deleted (hard delete)
2. Set IsDeleted = 1 flag instead (soft delete)
3. Soft-deleted views hidden from UI but retained in database for 90 days
4. Update API checks IsDeleted flag before allowing update

User Experience:

• Display error: "This view has been deleted and cannot be updated. Would you like to save your changes as a new view?"
• Offer "Restore View" option for administrators

Scenario 3: Shared View Ownership Transfer

Problem: Creator leaves organization. Who owns their shared views?

Solution: Admin Ownership Transfer

1. Administrators can reassign view ownership via admin panel
2. Transfer options:
   • Assign to specific user (new creator)
   • Assign to team/group (multiple owners)
   • Convert to "system view" (no individual owner, admin-managed only)

Database Update:

UPDATE MapifyViews
SET 
    CreatedBy = 'new-owner@nodinite.com',
    LastModifiedBy = 'admin@nodinite.com',
    LastModifiedDate = GETUTCDATE()
WHERE ViewId = '...' AND Visibility = 'shared';

Performance Considerations for Enterprise Scale

Target Scale: 100 concurrent users, 1,000+ saved views

Optimization Strategies:

1. Database Indexing:

   CREATE INDEX IX_MapifyViews_UserViews 
   ON MapifyViews(CreatedBy, Visibility, IsDeleted)
   INCLUDE (ViewName, CreatedDate);
   

2. Pagination:

   • Load 50 most recent views initially
   • Implement infinite scroll or "Load More" button for older views

3. Client-Side Caching:

   • Cache loaded views in browser memory (session storage)
   • Reduce API calls for frequently accessed views

4. Compression:

   • Gzip ViewData JSON before storing (SQL Server supports transparent compression)
   • Average compression ratio: ~60% size reduction

5. Query Optimization:

   // Efficient query: Filter at database level
   var views = _database.MapifyViews
       .Where(v => v.Visibility == "shared" || v.CreatedBy == currentUserId)
       .Where(v => !v.IsDeleted)
       .OrderByDescending(v => v.CreatedDate)
       .Take(50)
       .Select(v => new { v.ViewId, v.ViewName, v.CreatedDate }) // Project only needed fields
       .ToList();
   

Expected Performance:

• List views: <100ms for 1,000 views
• Load specific view: <200ms (including network latency)
• Save new view: <300ms (including database write + indexing)

UI/UX Patterns: Quick-Access Interface

The Saved Views UI is designed for fast access, power-user efficiency, and accessibility. This section documents the user interface patterns, keyboard shortcuts, responsive behavior, and accessibility requirements for loading, managing, and navigating saved views.

Dropdown Menu Location and Behavior

The Saved Views dropdown menu is the primary interface for accessing and managing saved views. It is positioned for quick access and supports both mouse and keyboard navigation.

Dropdown Menu Location

• Desktop: Top toolbar (next to Zoom controls, Filters button)

  [  Filters ]  [  Saved Views ▾ ]  [  Zoom In ]  [  Zoom Out ]
  

• Mobile/Tablet: Hamburger menu → "Saved Views" submenu
• Icon: (bookmark icon) with text "Saved Views"
• Badge indicator: Display count of saved views: Saved Views (12) or visual badge on icon

Dropdown Menu Behavior

When the user clicks the Saved Views button:

1. Opens dropdown panel below the button (desktop) or full-screen modal (mobile)

2. Content sections (in order):

   • Search box – Filter views by name (real-time filtering)
   • Favorites section – User's pinned views (marked with isFavorite: true)
   • Personal Views – User's private views
   • Shared Views – Team/organization views
   • Actions footer – "Create New View" and "Manage All Views" buttons

3. Dropdown remains open until:

   • User selects a view (loads and closes automatically)
   • User clicks outside dropdown (closes without action)
   • User presses Esc key (closes without action)

Dropdown Menu Structure (HTML)

<nav aria-label="Saved Views Menu">
  <button 
    id="saved-views-trigger" 
    aria-haspopup="true" 
    aria-expanded="false"
    aria-label="Open saved views menu. Currently 12 saved views available.">
    <i class="fas fa-bookmark" aria-hidden="true"></i>
    Saved Views (12)
  </button>
  
  <div 
    id="saved-views-dropdown" 
    role="menu" 
    aria-labelledby="saved-views-trigger"
    hidden>
    
    <!-- Search Filter -->
    <div class="search-box">
      <label for="view-search" class="visually-hidden">Search saved views</label>
      <input 
        type="text" 
        id="view-search" 
        placeholder="Search views..." 
        aria-describedby="search-help"
        autocomplete="off">
      <span id="search-help" class="visually-hidden">Type to filter saved views by name or tag</span>
    </div>
    
    <!-- Favorites Section -->
    <section aria-labelledby="favorites-heading">
      <h3 id="favorites-heading">
        <i class="fas fa-star" aria-hidden="true"></i> Favorites
      </h3>
      <ul role="menu">
        <li role="menuitem">
          <button 
            class="view-item" 
            data-view-id="a3f8d7c2-4b1e-4a9d-8e3f-7c6b5a4d3e2f"
            aria-label="Load favorite view: GDPR Compliance Audit Q1 2026">
            <i class="fas fa-bookmark" aria-hidden="true"></i>
            <span class="view-name">GDPR Compliance Audit Q1 2026</span>
            <span class="view-meta">Created: 2026-01-15</span>
          </button>
        </li>
      </ul>
    </section>
    
    <!-- Personal Views Section -->
    <section aria-labelledby="personal-heading">
      <h3 id="personal-heading">
        <i class="fas fa-user" aria-hidden="true"></i> Personal Views
      </h3>
      <ul role="menu">
        <li role="menuitem">
          <button class="view-item" data-view-id="...">
            <i class="fas fa-bookmark" aria-hidden="true"></i>
            <span class="view-name">JD - SAP Analysis - 2026-01</span>
          </button>
        </li>
      </ul>
    </section>
    
    <!-- Shared Views Section -->
    <section aria-labelledby="shared-heading">
      <h3 id="shared-heading">
        <i class="fas fa-users" aria-hidden="true"></i> Shared Views
      </h3>
      <ul role="menu">
        <li role="menuitem">
          <button class="view-item" data-view-id="...">
            <i class="fas fa-bookmark" aria-hidden="true"></i>
            <span class="view-name">Executive - Monthly Dashboard - 2026-01</span>
            <span class="view-owner">by admin@nodinite.com</span>
          </button>
        </li>
      </ul>
    </section>
    
    <!-- Actions Footer -->
    <footer class="dropdown-footer">
      <button class="btn-primary" aria-label="Create new saved view from current graph state">
        <i class="fas fa-plus" aria-hidden="true"></i> Create New View
      </button>
      <button class="btn-secondary" aria-label="Open saved views management panel">
        <i class="fas fa-cog" aria-hidden="true"></i> Manage All Views
      </button>
    </footer>
    
  </div>
</nav>

Keyboard Shortcuts for Power Users

Saved Views support keyboard shortcuts to accelerate workflows for frequent users.

Implementation Notes:

• Keyboard shortcuts displayed in tooltips when hovering over buttons
• Conflict prevention: Disable browser defaults (e.g., Ctrl + S triggers save dialog, not browser "Save Page")
• Accessibility announcement: Screen readers announce shortcuts in ARIA labels (e.g., aria-label="Save current view. Keyboard shortcut: Control S")

Example JavaScript:

// Global keyboard shortcut handler
document.addEventListener('keydown', (e) => {
  // Save current view (Ctrl+S or Cmd+S)
  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault();
    openSaveViewDialog();
    announceToScreenReader('Save view dialog opened');
  }
  
  // Open saved views menu (Ctrl+O or Cmd+O)
  if ((e.ctrlKey || e.metaKey) && e.key === 'o') {
    e.preventDefault();
    toggleSavedViewsDropdown();
    announceToScreenReader('Saved views menu opened. Use arrow keys to navigate.');
  }
  
  // Close dropdown (Escape)
  if (e.key === 'Escape' && savedViewsDropdownIsOpen) {
    closeSavedViewsDropdown();
    announceToScreenReader('Saved views menu closed');
  }
});

// Dropdown navigation with arrow keys
savedViewsDropdown.addEventListener('keydown', (e) => {
  const items = savedViewsDropdown.querySelectorAll('[role="menuitem"]');
  const currentIndex = Array.from(items).indexOf(document.activeElement);
  
  if (e.key === 'ArrowDown') {
    e.preventDefault();
    const nextIndex = (currentIndex + 1) % items.length;
    items[nextIndex].focus();
  }
  
  if (e.key === 'ArrowUp') {
    e.preventDefault();
    const prevIndex = (currentIndex - 1 + items.length) % items.length;
    items[prevIndex].focus();
  }
  
  if (e.key === 'Enter') {
    e.preventDefault();
    loadView(document.activeElement.dataset.viewId);
  }
});

UI Layout Mockup (ASCII Art)

Desktop view of Saved Views dropdown:

┌─────────────────────────────────────────────────────────────────────┐
│  Nodinite Mapify - Integration Landscape Visualization             │
├─────────────────────────────────────────────────────────────────────┤
│  [≡ Menu] [🔍 Search] [⚙ Filters] [📑 Saved Views ▾] [➕] [➖]      │
│                                    └──────────────────────┐          │
│                                                           │          │
│  ┌─────────────────────────────────────────────────────┐ │          │
│  │ 📑 Saved Views (12)                                 │ │          │
│  ├─────────────────────────────────────────────────────┤ │          │
│  │ 🔍 [Search views by name or tag...]                │ │          │
│  ├─────────────────────────────────────────────────────┤ │          │
│  │ ⭐ FAVORITES                                        │ │          │
│  │   📌 GDPR Compliance Audit Q1 2026                 │ │          │
│  │      Created: 2026-01-15  👤 admin@nodinite.com    │ │          │
│  │   📌 Executive - Monthly Dashboard - 2026-01       │ │          │
│  ├─────────────────────────────────────────────────────┤ │          │
│  │ 👤 PERSONAL VIEWS (5)                               │ │          │
│  │   📄 JD - SAP Analysis - 2026-01                   │ │          │
│  │   📄 MK - Quick Debug - v2                         │ │          │
│  │   📄 AS - WIP Integrations - Draft                 │ │          │
│  │   ... [Show 2 more]                                │ │          │
│  ├─────────────────────────────────────────────────────┤ │          │
│  │ 👥 SHARED VIEWS (5)                                 │ │          │
│  │   📄 Compliance - SOX Audit - Q1 2026              │ │          │
│  │      👤 legal@nodinite.com                         │ │          │
│  │   📄 Onboarding - Architecture Overview - v3       │ │          │
│  │      👤 training@nodinite.com                      │ │          │
│  │   ... [Show 3 more]                                │ │          │
│  ├─────────────────────────────────────────────────────┤ │          │
│  │ [➕ Create New View] [⚙ Manage All Views]          │ │          │
│  └─────────────────────────────────────────────────────┘ │          │
│                                                           │          │
│  ┌───────────────────────────────────────────────────────┘          │
│  │  [Integration Landscape Graph Visualization]                     │
│  │  ● SAP ─── ● CRM ─── ● Marketing Automation                      │
│  │    │         │                                                    │
│  │  ● ERP ─── ● Database                                            │
│  └───────────────────────────────────────────────────────────────── │
└─────────────────────────────────────────────────────────────────────┘

Accessibility Requirements

Saved Views UI adheres to WCAG 2.1 AA standards for keyboard navigation, screen reader support, and color contrast.

Keyboard Navigation

• Tab key navigation: All interactive elements (buttons, links, search input) are reachable via Tab key
• Logical tab order: Focus flows from trigger button → search box → favorites → personal views → shared views → action buttons
• No keyboard traps: Users can tab into and out of dropdown without mouse
• Arrow key navigation: Up/Down arrows navigate between view items
• Enter/Space activation: Enter or Space key loads selected view
• Escape key: Closes dropdown and returns focus to trigger button

Implementation:

// Restore focus to trigger button when dropdown closes
function closeSavedViewsDropdown() {
  dropdown.setAttribute('hidden', '');
  triggerButton.setAttribute('aria-expanded', 'false');
  triggerButton.focus(); // Return focus to trigger
}

Screen Reader Support

All UI elements include proper ARIA labels and live region announcements:

ARIA Attributes:

<!-- Trigger button -->
<button 
  id="saved-views-trigger" 
  aria-haspopup="true" 
  aria-expanded="false"
  aria-label="Open saved views menu. Currently 12 saved views available.">
  <i class="fas fa-bookmark" aria-hidden="true"></i>
  Saved Views (12)
</button>

<!-- Dropdown panel -->
<div 
  id="saved-views-dropdown" 
  role="menu" 
  aria-labelledby="saved-views-trigger"
  hidden>
  
  <!-- Search input -->
  <label for="view-search" class="visually-hidden">Search saved views</label>
  <input 
    type="text" 
    id="view-search" 
    placeholder="Search views..." 
    aria-describedby="search-help">
  <span id="search-help" class="visually-hidden">Type to filter saved views by name or tag</span>
  
  <!-- View item -->
  <button 
    class="view-item" 
    role="menuitem"
    aria-label="Load saved view: GDPR Compliance Audit Q1 2026. Created by admin@nodinite.com on January 15, 2026.">
    <i class="fas fa-bookmark" aria-hidden="true"></i>
    <span class="view-name">GDPR Compliance Audit Q1 2026</span>
    <span class="view-meta" aria-hidden="true">Created: 2026-01-15</span>
  </button>
</div>

Live Region Announcements:

<!-- Status message container (polite announcements) -->
<div 
  id="status-message" 
  role="status" 
  aria-live="polite" 
  aria-atomic="true"
  class="visually-hidden">
  <!-- Dynamically updated by JavaScript -->
</div>

<!-- Example announcements -->
<script>
  function announceToScreenReader(message) {
    const statusRegion = document.getElementById('status-message');
    statusRegion.textContent = message;
  }
  
  // Usage examples:
  announceToScreenReader('View loaded successfully: GDPR Compliance Audit Q1 2026');
  announceToScreenReader('12 saved views available. Use arrow keys to navigate.');
  announceToScreenReader('Search filtered to 3 results matching "GDPR"');
</script>

Screen Reader Behavior:

• Dropdown opens: "Saved views menu opened. 12 views available. Use arrow keys to navigate."
• View selected: "GDPR Compliance Audit Q1 2026. Shared view created by admin@nodinite.com on January 15, 2026."
• View loads: "View loaded successfully. Displaying 47 entities matching GDPR compliance filters."
• Empty results: "No saved views found matching 'test'. Try different search terms."

Color Contrast and Visual Design

All text and interactive elements meet WCAG AA contrast ratio requirements:

Text Contrast:

• Normal text (14pt): 4.5:1 minimum
• Large text (18pt+ or 14pt+ bold): 3:1 minimum
• Icon-only buttons: 3:1 contrast against background

Example CSS:

/* Primary text (high contrast) */
.view-name {
  color: #212529; /* Dark gray on white: 16.1:1 ratio ✓ */
  font-size: 14px;
  font-weight: 500;
}

/* Secondary metadata text */
.view-meta {
  color: #6c757d; /* Medium gray on white: 4.6:1 ratio ✓ */
  font-size: 12px;
}

/* Favorite indicator (color + icon) */
.view-item.favorite {
  border-left: 3px solid #ffc107; /* Yellow accent */
}

.view-item.favorite::before {
  content: "⭐";  /* Star icon for colorblind users */
}

/* Focus indicator (keyboard navigation) */
.view-item:focus {
  outline: 2px solid #0056b3; /* Blue: 4.5:1 contrast ✓ */
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.2);
}

/* Hover state */
.view-item:hover {
  background-color: #f8f9fa; /* Light gray */
  border-left: 3px solid #0056b3; /* Blue accent */
}

Non-Color Indicators: Saved Views do not rely on color alone to convey information:

• Favorites: ⭐ star icon + yellow border + "Favorites" section heading
• Shared views: 👥 users icon + "by [owner]" text
• Personal views: 👤 user icon + "Personal Views" section heading
• Active view: Checkmark icon + bold text + "Currently loaded" text

Loading States and Error Handling

Clear visual feedback ensures users understand system status during asynchronous operations.

Loading States

1. Dropdown Loading (Initial Load):

<div id="saved-views-dropdown" role="menu" aria-live="polite">
  <div class="loading-state" role="status">
    <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
    <span>Loading saved views...</span>
  </div>
</div>

2. View Loading (After Selection):

<div class="graph-overlay" role="status" aria-live="assertive">
  <div class="loading-spinner">
    <i class="fas fa-circle-notch fa-spin" aria-hidden="true"></i>
    <h2>Loading View: GDPR Compliance Audit Q1 2026</h2>
    <p>Applying filters and rendering graph...</p>
    <progress value="60" max="100" aria-label="Loading progress: 60%">60%</progress>
  </div>
</div>

3. Save Operation (Creating New View):

<button class="btn-primary" disabled aria-busy="true">
  <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
  Saving view...
</button>

Error Handling

Error Scenarios and UI Responses:

Scenario 1: Network Failure (View Load Failed)

<div class="alert alert-error" role="alert">
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
  <strong>Error:</strong> Failed to load saved view "GDPR Audit Q1 2026".
  <p>Network connection lost. Please check your connection and try again.</p>
  <button class="btn-primary" onclick="retryLoadView()">
    <i class="fas fa-redo" aria-hidden="true"></i> Retry
  </button>
  <button class="btn-secondary" onclick="closeErrorDialog()">Cancel</button>
</div>

Scenario 2: View Not Found (Deleted by Another User)

<div class="alert alert-warning" role="alert">
  <i class="fas fa-info-circle" aria-hidden="true"></i>
  <strong>View Not Found:</strong> The saved view "Executive Dashboard" has been deleted.
  <p>This view may have been removed by its owner or an administrator.</p>
  <button class="btn-primary" onclick="refreshViewsList()">Refresh Views List</button>
</div>

Scenario 3: Permission Denied (Shared View Access Revoked)

<div class="alert alert-warning" role="alert">
  <i class="fas fa-lock" aria-hidden="true"></i>
  <strong>Access Denied:</strong> You no longer have permission to access this shared view.
  <p>Contact the view owner (admin@nodinite.com) to request access.</p>
  <button class="btn-primary" onclick="contactOwner()">
    <i class="fas fa-envelope" aria-hidden="true"></i> Contact Owner
  </button>
</div>

Scenario 4: Concurrent Edit Conflict

<div class="alert alert-error" role="alert">
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
  <strong>Update Conflict:</strong> This view was modified by another user while you were editing.
  <p>Last modified by: admin@nodinite.com at 2026-01-19 15:30:00</p>
  <button class="btn-primary" onclick="reloadViewAndMerge()">
    <i class="fas fa-sync" aria-hidden="true"></i> Reload and Retry
  </button>
  <button class="btn-secondary" onclick="saveAsNewView()">
    <i class="fas fa-save" aria-hidden="true"></i> Save as New View
  </button>
  <button class="btn-secondary" onclick="discardChanges()">Discard My Changes</button>
</div>

Error Message Best Practices:

• Specific error description – Explain what went wrong, not generic "Error occurred"
• User-actionable guidance – Provide clear next steps (Retry, Refresh, Contact support)
• Recovery options – Offer multiple paths forward (Reload, Save as New, Discard)
• Contextual information – Include relevant details (view name, user who modified, timestamp)
• Visual hierarchy – Icon + bold heading + description + action buttons
• Accessibility – Use role="alert" for immediate announcements to screen readers

User Feedback Mechanisms

Real-time feedback confirms user actions and system status.

Confirmation Toasts (Non-Blocking Notifications)

Success Notifications:

<div class="toast toast-success" role="status" aria-live="polite">
  <i class="fas fa-check-circle" aria-hidden="true"></i>
  <span><strong>Success:</strong> View "GDPR Audit Q1 2026" saved successfully.</span>
  <button class="toast-close" aria-label="Close notification">&times;</button>
</div>

Info Notifications:

<div class="toast toast-info" role="status" aria-live="polite">
  <i class="fas fa-info-circle" aria-hidden="true"></i>
  <span>View loaded: Displaying 47 entities matching GDPR filters.</span>
</div>

Warning Notifications:

<div class="toast toast-warning" role="status" aria-live="polite">
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
  <span>Large dataset detected: This view may take 5-10 seconds to render.</span>
</div>

Toast Behavior:

• Auto-dismiss: Disappear after 5 seconds (success/info) or 10 seconds (warning/error)
• Manual dismiss: Click × button or press Escape to close immediately
• Position: Bottom-right corner (desktop), top center (mobile)
• Stacking: Multiple toasts stack vertically, newest on top

Loading Spinners (Inline Indicators)

<!-- Inline spinner for dropdown content -->
<div class="loading-inline" role="status">
  <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
  <span>Loading views...</span>
</div>

<!-- Button spinner during save operation -->
<button class="btn-primary" disabled aria-busy="true">
  <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
  Saving view...
</button>

Progress Indicators (Long Operations)

For operations >3 seconds (large dataset rendering):

<div class="progress-dialog" role="dialog" aria-labelledby="progress-title">
  <h2 id="progress-title">Loading View: GDPR Audit Q1 2026</h2>
  <p>Rendering 10,247 entities. This may take a few moments...</p>
  
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-fill" style="width: 60%;"></div>
  </div>
  <span aria-live="polite">60% complete</span>
  
  <button class="btn-secondary" onclick="cancelViewLoad()">
    <i class="fas fa-times" aria-hidden="true"></i> Cancel
  </button>
</div>

Mobile and Responsive Considerations

Saved Views UI adapts to different screen sizes and touch interactions.

Mobile Adaptations (Screens <768px)

1. Full-Screen Modal Instead of Dropdown:

<!-- Mobile: Full-screen overlay -->
<div class="saved-views-mobile-modal" role="dialog" aria-labelledby="mobile-modal-title">
  <header class="modal-header">
    <h2 id="mobile-modal-title">
      <i class="fas fa-bookmark" aria-hidden="true"></i> Saved Views
    </h2>
    <button class="btn-close" aria-label="Close saved views">
      <i class="fas fa-times" aria-hidden="true"></i>
    </button>
  </header>
  
  <div class="modal-body">
    <!-- Search box (sticky at top) -->
    <input type="search" placeholder="Search views..." class="search-mobile">
    
    <!-- View list (scrollable) -->
    <section>...</section>
  </div>
  
  <footer class="modal-footer">
    <button class="btn-primary btn-block">
      <i class="fas fa-plus" aria-hidden="true"></i> Create New View
    </button>
  </footer>
</div>

2. Touch-Friendly Targets:

• Minimum tap target size: 44×44 pixels (Apple HIG) or 48×48 pixels (Android Material Design)
• Spacing between items: Minimum 8px vertical gap
• Swipe gestures: Swipe left on view item reveals "Delete" and "Edit" actions

3. Simplified UI:

• Hide metadata by default: Display only view name; tap to expand details
• Collapsible sections: Favorites, Personal, Shared sections expand/collapse to save screen space
• Sticky search box: Search input remains fixed at top while scrolling view list

Example Mobile View (Simplified):

┌─────────────────────────────┐
│ 📑 Saved Views          [✖]  │ ← Header
├─────────────────────────────┤
│ 🔍 [Search views...]        │ ← Sticky search
├─────────────────────────────┤
│ ⭐ FAVORITES            [▼] │ ← Collapsible section
│   📌 GDPR Audit Q1 2026     │
│      👤 admin@nodinite.com  │
│   📌 Executive Dashboard    │
├─────────────────────────────┤
│ 👤 PERSONAL VIEWS (5)   [▶] │ ← Collapsed section
├─────────────────────────────┤
│ 👥 SHARED VIEWS (5)     [▶] │ ← Collapsed section
├─────────────────────────────┤
│ [➕ Create New View]        │ ← Footer action
└─────────────────────────────┘

Tablet Adaptations (Screens 768px-1024px)

• Side panel instead of dropdown: Saved Views panel slides in from right side
• Persistent visibility: Panel remains open while browsing views (multi-column layout)
• Preview pane: Tapping view shows preview before loading (optional)

Responsive Breakpoints

/* Desktop: Dropdown menu */
@media (min-width: 1025px) {
  .saved-views-dropdown {
    position: absolute;
    width: 400px;
    max-height: 600px;
    overflow-y: auto;
  }
}

/* Tablet: Side panel */
@media (min-width: 768px) and (max-width: 1024px) {
  .saved-views-panel {
    position: fixed;
    right: 0;
    top: 0;
    width: 320px;
    height: 100vh;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  
  .saved-views-panel.open {
    transform: translateX(0);
  }
}

/* Mobile: Full-screen modal */
@media (max-width: 767px) {
  .saved-views-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: white;
  }
  
  .view-item {
    min-height: 48px; /* Touch target size */
    padding: 12px 16px;
  }
}

Performance Optimization for UI

Lazy Loading:

• Load only 20 views initially; load more on scroll (infinite scroll pattern)
• Defer loading shared views until "Shared Views" section expands

Virtual Scrolling:

• For 100+ views, render only visible items in viewport (reduce DOM nodes)
• Use libraries like react-window or vue-virtual-scroller

Debounced Search:

• Wait 300ms after user stops typing before filtering views (reduce re-renders)

Example JavaScript (Debounced Search):

let searchTimeout;

searchInput.addEventListener('input', (e) => {
  clearTimeout(searchTimeout);
  
  searchTimeout = setTimeout(() => {
    const query = e.target.value.toLowerCase();
    filterViews(query);
    announceToScreenReader(`${filteredCount} views found matching "${query}"`);
  }, 300); // Wait 300ms after user stops typing
});

Configuration Example: Naming Conventions

To maintain consistency across your organization, establish naming conventions for Saved Views:

Personal Views:

[Your Initials] - [Purpose] - [Date/Version]
Examples:
  JD - SAP Analysis - 2026-01
  MK - Quick Debug - v2
  AS - WIP Integrations - Draft

Shared Views:

[Category] - [Purpose] - [Period/Version]
Examples:
  Compliance - GDPR Audit - Q1 2026
  Executive - Monthly Dashboard - 2026-01
  Onboarding - Architecture Overview - v3
  Operations - Critical Path - Production

Benefits:

• Alphabetical sorting groups views by category
• Clear purpose reduces duplicate views
• Version/date tracking prevents outdated views

Best Practices

• Name views descriptively – Use specific names like "SOX Financial Audit Q1 2026" instead of "My View 1"
• Add descriptions – Explain purpose and context for team members who didn't create the view
• Review periodically – Delete outdated personal views to reduce clutter
• Standardize shared views – Establish naming conventions and governance for shared views
• Use personal views for experiments – Test new filter combinations before sharing with the team
• Document in comments – Add comments to entities explaining why they're included in critical shared views
• Version shared views – Use version numbers (v1, v2) or dates for evolving views
• Avoid over-sharing – Keep personal experimental views private to reduce noise

Performance Considerations

• Large datasets: Saved Views with 10,000+ entities may take 3-5 seconds to load initially. Optimize by filtering to essential entities.
• Complex filters: Views with 10+ active filters are slower to apply. Consider combining related filters or using custom metadata tags.
• 3D layouts: 3D visualizations with 1,000+ nodes may impact performance on older hardware. Use 2D layouts for presentations on shared computers.
• Concurrent users: Shared Views are read-only during loading to prevent conflicts. Updates are queued and applied sequentially.

Troubleshooting

Issue: Saved View not appearing in dropdown
Solution: Refresh Mapify or check permissions. Shared Views require appropriate team membership. Contact your administrator.

Issue: View loads but filters don't match expected results
Solution: Entities may have been deleted or modified since the view was saved. Update the view with current filters.

Issue: Cannot update Shared View
Solution: Only the original creator or administrators can update Shared Views. Save your changes as a new Personal View or contact the view owner.

Issue: View loads slowly
Solution: Reduce entity count by applying more specific filters. Use 2D layout instead of 3D for faster rendering.

Next Steps

Learn about Search and Discovery
Explore Ownership and Team Management
Multi-User Collaboration Features

Related Topics

Mapify Overview
Repository Model Overview
Custom Metadata
Domains
Resources