- 8 minutes to read

Visual Highlighting of Search Results

When you execute a search query in Mapify, matching entities are visually highlighted in the interactive graph to help you quickly identify and navigate to relevant nodes. This visual feedback is critical for large integration landscapes where search results may be scattered across different domains or hierarchies.

Highlighting Styles

Search results are highlighted using multiple visual indicators to ensure accessibility and clarity.

Node Highlighting

Visual Element	Style	Purpose	Accessibility
Border Color	4px solid #0066CC (blue)	Primary highlight indicator	6.9:1 contrast ratio on white (WCAG AA)
Glow Effect	8px box-shadow, 60% opacity	Draw attention to highlighted nodes	Visible to users with reduced vision
Size Increase	Node scaled to 115% of original size	Make highlighted nodes stand out in crowded graphs	Shape differentiation (not color-only)
Icon Badge	icon in top-right corner	Visual indicator for colorblind users	Non-color-based differentiation
Z-Index Elevation	Highlighted nodes brought to foreground	Prevent occlusion by other nodes	Ensures visibility in dense graphs

CSS Example

/* Highlighted search result node */
.mapify-node.search-highlight {
  border: 4px solid #0066CC;
  box-shadow: 0 0 8px rgba(0, 102, 204, 0.6);
  transform: scale(1.15);
  z-index: 1000;
  position: relative;
}

.mapify-node.search-highlight::after {
  content: "\f002"; /* Font Awesome magnifying-glass */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #0066CC;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

@media (prefers-contrast: high) {
  .mapify-node.search-highlight {
    border-color: #003D7A;
    box-shadow: 0 0 12px rgba(0, 61, 122, 0.8);
  }
}

/* Colorblind-friendly pattern overlay (optional) */
.mapify-node.search-highlight.pattern-overlay {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0, 102, 204, 0.1) 10px,
    rgba(0, 102, 204, 0.1) 20px
  );
}

Zoom-to-Fit Behavior

When search results are returned, Mapify automatically adjusts the graph view to ensure all matching nodes are visible.

Single Result

Behavior: Graph zooms and pans to center the highlighted node
Zoom level: 150%
Animation: Smooth 500ms transition with easing

User searches: "Salesforce CRM Integration"
Result: 1 match found
Action: Graph pans to Salesforce node, zooms to 150%, highlights with blue border + glow

Multiple Results (2–10 matches)

Behavior: Graph fits all highlighted nodes within viewport
Padding: 50px margin around outermost nodes
Zoom level: Adjusted automatically
Animation: Smooth 750ms transition

User searches: "type:integration SAP"
Result: 7 matches found (across Finance, HR, and Logistics domains)
Action: Graph zooms out to show all 7 nodes with padding, all highlighted with blue border

Many Results (10+ matches)

Behavior: Navigation controls appear with result counter
Initial view: Zooms to first 10 results
Navigation: Previous / Next buttons cycle through result clusters

<div class="search-results-navigation" role="navigation" aria-label="Search results navigation">
  <button type="button" class="btn-prev-results" aria-label="Previous 10 search results" disabled>
    <i class="fas fa-arrow-left" aria-hidden="true"></i>
    Previous
  </button>

  <span class="results-counter" aria-live="polite">
    Showing <strong>1-10</strong> of <strong>342</strong> results
  </span>

  <button type="button" class="btn-next-results" aria-label="Next 10 search results">
    Next
    <i class="fas fa-arrow-right" aria-hidden="true"></i>
  </button>
</div>

Multi-Result Differentiation

When multiple search results are highlighted simultaneously, Mapify uses sequential numbering and color gradients to differentiate them.

Numbered Badges

Each highlighted node displays a numbered badge indicating its rank:

Badge location: Top-left corner of node
Ranking: Based on autocomplete ranking (exact match → fuzzy → recent)
Style: White text on blue circle
Maximum displayed: 99 (100+ shows "99+")

<div class="mapify-node search-highlight" data-search-rank="1">
  <span class="search-rank-badge" aria-label="Search result rank 1">1</span>
  <div class="node-content">
    <i class="fas fa-diagram-project" aria-hidden="true"></i>
    <strong>Salesforce CRM Integration</strong>
  </div>
</div>

.search-rank-badge {
  position: absolute;
  top: -10px;
  left: -10px;
  background-color: #0066CC;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  border: 2px solid white;
  z-index: 1001;
}

Color Gradient (Optional)

For advanced visualizations, highlighted nodes use a color gradient from dark to light blue:

Rank 1–3: Dark blue (#0066CC) – Highest relevance
Rank 4–10: Medium blue (#3399FF)
Rank 11+: Light blue (#66CCFF)

Accessibility Note: Color gradient is supplementary to numbered badges. Users who cannot perceive color differences still see rank numbers.

Action	Windows/Linux	macOS	Behavior
Next Result	`Tab` or `Ctrl + ↓`	`Tab` or `⌘ + ↓`	Pan and zoom to next highlighted node in sequence
Previous Result	`Shift + Tab` or `Ctrl + ↑`	`Shift + Tab` or `⌘ + ↑`	Pan and zoom to previous highlighted node
Select Result	`Enter`	`Return`	Open detail panel for currently focused highlighted node
Clear Highlights	`Esc`	`Esc`	Remove all search highlights and return to default view
Jump to First Result	`Ctrl + Home`	`⌘ + Home`	Pan and zoom to first search result (rank 1)
Jump to Last Result	`Ctrl + End`	`⌘ + End`	Pan and zoom to last search result

Implementation Notes:

Focus indicator (dashed outline) shows currently selected result
Screen readers announce: "Search result 3 of 12: Salesforce CRM Integration"
Keyboard navigation wraps around (Next on last result returns to first)

Animation and Timing

Highlight Animation

@keyframes search-highlight-appear {
  0%   { opacity: 0; transform: scale(1); }
  50%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1.15); }
}

@keyframes search-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(0, 102, 204, 0.6); }
  50%       { box-shadow: 0 0 16px rgba(0, 102, 204, 0.8); }
}

.mapify-node.search-highlight {
  animation: search-highlight-appear 600ms ease-out,
             search-pulse 2s infinite ease-in-out 600ms;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mapify-node.search-highlight {
    animation: none;
    transition: none;
  }
}

Zoom Transition

Duration: 500ms for single result, 750ms for multiple results
Easing: cubic-bezier(0.4, 0.0, 0.2, 1) for natural deceleration
User control: Press Esc to cancel zoom animation mid-flight

Accessibility Considerations

Mapify's search highlighting follows WCAG 2.1 AA standards.

Color Contrast

Highlighted border: #0066CC on white = 6.9:1 contrast ratio (exceeds 4.5:1 requirement)
Badge text: White on #0066CC = 7.1:1 contrast ratio

Non-Color Indicators

To support colorblind users, highlighted nodes include:

Icon badge () – Visual shape indicator
Size increase (115% scale) – Shape differentiation
Numbered badges – Rank order regardless of color perception
Optional pattern overlay – Diagonal stripes for deuteranopia/protanopia users

/* Enable in Mapify > Settings > Accessibility > Colorblind Mode */
.colorblind-mode .mapify-node.search-highlight {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0, 102, 204, 0.2) 10px,
    rgba(0, 102, 204, 0.2) 20px
  );
}

<!-- Live region announces result count -->
<div aria-live="polite" aria-atomic="true" class="search-status">
  <i class="fas fa-magnifying-glass" aria-hidden="true"></i>
  <span>12 results found for "SAP"</span>
</div>

<!-- Focused result node with full context -->
<div
  class="mapify-node search-highlight"
  role="button"
  tabindex="0"
  aria-label="Search result 3 of 12: Salesforce CRM Integration, Integration entity, owned by Sales Team, status active"
>
  <!-- Node content -->
</div>

Mobile and Touch Considerations

Touch Targets

Minimum tap target: 44×44px for numbered badges
Swipe gestures: Swipe left/right to navigate between results
Pinch-to-zoom: Preserved during search highlighting

Mobile-Specific Behaviors (`max-width: 768px`)

Sticky result counter – Always visible: "3 of 12 results"
Larger badges – Numbered badges increase to 32×32px for easier tapping
Reduced animation – Pulse effect disabled to preserve battery
Tap to focus – Tapping highlighted node opens bottom sheet with entity details

Mobile View Mockup

┌─────────────────────────────────────┐
│ ┌─────────────────────────────────┐ │  ← Sticky Search Bar
│ │ 🔍 SAP          [×] 12 results  │ │
│ └─────────────────────────────────┘ │
│                                     │
│    ┏━━━━━━━━━━┓                    │
│  ①┃ SAP HR   ┃  ← Highlighted      │
│    ┗━━━━━━━━━━┛                    │
│           ┏━━━━━━━━━━━━┓           │
│         ②┃ SAP Finance ┃           │
│           ┗━━━━━━━━━━━━┛           │
├─────────────────────────────────────┤
│  [◀ Prev]  Showing 1-2  [Next ▶]   │
└─────────────────────────────────────┘

Desktop View Mockup

┌────────────────────────────────────────────────────────────────────┐
│  Mapify - Integration Landscape                   🔍 [Search Bar]  │
├────────────────────────────────────────────────────────────────────┤
│   Finance Domain                 HR Domain                         │
│   ╔════════════╗                 ╔═══════════╗                    │
│ ①─║  SAP ERP   ║─────────────────║ Workday   ║─②  ← Highlighted  │
│   ╚════════════╝                 ╚═══════════╝   (Blue border)   │
│         │                              │                           │
│   ╔════════════╗                 ╔═══════════╗                    │
│   │ Salesforce │               ③─║  ADP      ║   ← Result #3     │
│   ╚════════════╝                 ╚═══════════╝                    │
│         │                                                           │
│   ╔════════════╗                 ╔═══════════╗                    │
│ ④─║ NetSuite   ║                 │ Kronos    │                    │
│   ╚════════════╝                 ╚═══════════╝                    │
│                          ⑤ ╔═══════════╗                          │
│                            ║ QuickBooks║                          │
│                            ╚═══════════╝                          │
├────────────────────────────────────────────────────────────────────┤
│  ℹ️ 5 results found for "type:system"                              │
│  [◀ Prev]     Showing 1-5 of 5 results      [Next ▶]              │
└────────────────────────────────────────────────────────────────────┘
Legend: ╔═══╗ = Highlighted node  │   │ = Standard node  ① = Rank badge

Example Highlighting Scenarios

Single Entity Lookup

Query: "Salesforce CRM Integration" — 1 match

Graph pans to center Salesforce node
Zooms to 150%
Highlights node with blue border + glow + magnifying glass icon
Status message: "1 result found"
Press Enter to open detail panel

Compliance Audit

Query: tag:GDPR status:active — 23 matches across 4 domains

Graph zooms out to fit all 23 nodes
All matching nodes highlighted with numbered badges (1–23)
Navigation controls: "Showing 1-10 of 23 results"
Press Tab to cycle through results
Screen reader: "Search result 1 of 23: Customer Data Sync, Integration entity, GDPR compliance tag"

Owner-Based Search

Query: owner:"Sales Team" type:integration — 12 matches

Graph displays first 10 results with zoom-to-fit
All 10 highlighted with gradient coloring (dark blue → lighter blue)
Click "Next" → Graph pans to results 11–12
Press Esc → All highlights cleared, graph returns to default view

Next Steps

Return to Search and Discovery for the full feature overview and best practices
See Advanced Filters and Saved Searches for filter syntax and saved search configuration

Explore Nodinite for 30 days – completely free

See how Nodinite resolves your technical issues, in a

LIVE Demo!