- 6 minutes to read

Ownership: Visual Display and Avatars

New .7.x

This page covers avatar display, team color-coding, and filter-by-owner UI patterns for Mapify Ownership and Team Management.

Back to Ownership and Team Management

Avatar Display

For smaller graphs, owner avatars appear directly on nodes as visual identifiers.

Avatar Types

  1. Profile photo – Pulled from Azure AD/LDAP if available
  2. Initials – Fallback: first letter of first name + last name (e.g., "JS" for John Smith)
  3. Generic icon – icon for unassigned entities

Visual Specifications

  • Size: 24×24px (desktop), 32×32px (mobile for touch targets)
  • Position: Top-right corner of node
  • Border: 2px white border for contrast against node background
  • Fallback: Initials on team-colored or neutral gray background

HTML Example 

<!-- Initials avatar (team color background) -->
<div class="mapify-node">
  <span class="node-name">SAP Finance Integration</span>
  <div class="owner-avatar"
       style="background-color: #4A90E2;"
       aria-label="Owned by John Smith"
       role="img">
    <span class="initials">JS</span>
  </div>
</div>

<!-- Profile photo avatar -->
<div class="mapify-node">
  <span class="node-name">Salesforce CRM Integration</span>
  <img src="/api/users/avatar/jane.doe"
       alt="Owned by Jane Doe"
       class="owner-avatar"
       width="24" height="24">
</div>

<!-- Unassigned entity -->
<div class="mapify-node unassigned">
  <span class="node-name">Legacy FTP Service</span>
  <div class="owner-avatar unassigned"
       aria-label="No owner assigned"
       role="img">
    <i class="fas fa-user" aria-hidden="true"></i>
  </div>
</div>

CSS 

.owner-avatar {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: bold; color: #ffffff;
  background-color: #6c757d;
}

.owner-avatar.unassigned { background-color: #dc3545; border-color: #ffc107; }
.owner-avatar img { border-radius: 50%; object-fit: cover; }

@media (max-width: 768px) { .owner-avatar { width: 32px; height: 32px; font-size: 12px; } }

Color-Coding by Team

Assign unique colors to teams to create visual ownership boundaries in the graph.

WCAG AA Team Color Palette

Team Color (Hex) Contrast on White
Integration Services #0056b3 8.6:1 ✓
Data Platform #28a745 4.5:1 ✓
Infrastructure #6f42c1 6.1:1 ✓
Security #d32f2f 6.9:1 ✓
External Partners #e65100 6.4:1 ✓
Cloud Services #0288d1 5.1:1 ✓

Never rely on color alone. Combine with text labels, avatars, or pattern overlays.

Color Application Options

Approach Description Best For
Node border 3–4px left border in team color General use — minimal visual clutter
Background tint 20% opacity team color on node background Emphasizing team grouping
Node shadow Colored glow/drop shadow Subtle secondary indicator

HTML & CSS Example 

<div class="mapify-node"
     style="border-left: 4px solid #0056b3;"
     aria-label="SAP Finance Integration owned by Integration Services team">
  <span class="node-name">SAP Finance Integration</span>
  <span class="team-badge">Integration Services</span>
</div>

.mapify-node { border: 1px solid #dee2e6; border-left-width: 4px; border-radius: 4px; padding: 12px; background: #ffffff; }
.team-badge { display: inline-block; font-size: 11px; color: #6c757d; margin-top: 4px; }

/* Background tint variant */
.mapify-node[data-team="Integration Services"] { background: rgba(0, 86, 179, 0.08); }

/* High contrast mode: diagonal stripe pattern for colorblind support */
@media (prefers-contrast: high) {
  .mapify-node[data-team="Integration Services"]::before {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(
      45deg, transparent, transparent 10px,
      rgba(0, 86, 179, 0.1) 10px, rgba(0, 86, 179, 0.1) 20px
    );
    pointer-events: none;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { .mapify-node { transition: none; } }

Filter by Owner/Team

Show only entities owned by specific people or teams.

Filter Syntax 

owner:john.smith
team:"Integration Services"
owner:unassigned
team:"External Partners"

Filter UI

Location: Mapify toolbar → Filters → Ownership

The panel provides:

  • Owner dropdown – Multi-select from all owners in repository (shows entity count per owner)
  • Team dropdown – Multi-select from all teams (shows entity count per team)
  • Quick filters: "My Entities", "Unassigned", "Partners"
  • Apply/Reset buttons

HTML Example 

<div class="filter-panel" role="region" aria-label="Filter by ownership">
  <h3><i class="fas fa-users" aria-hidden="true"></i> Ownership Filters</h3>

  <div class="form-group">
    <label for="owner-filter">Filter by Owner</label>
    <select id="owner-filter" aria-label="Select owner to filter entities" multiple>
      <option value="">All Owners</option>
      <option value="john.smith">John Smith (42 entities)</option>
      <option value="jane.doe">Jane Doe (28 entities)</option>
      <option value="unassigned">⚠ Unassigned (15 entities)</option>
    </select>
  </div>

  <div class="form-group">
    <label for="team-filter">Filter by Team</label>
    <select id="team-filter" aria-label="Select team to filter entities" multiple>
      <option value="">All Teams</option>
      <option value="integration-services">Integration Services (78 entities)</option>
      <option value="data-platform">Data Platform (52 entities)</option>
      <option value="external-partners">External Partners (24 entities)</option>
    </select>
  </div>

  <div class="quick-filters">
    <button type="button" aria-label="Show only entities I own">
      <i class="fas fa-user" aria-hidden="true"></i> My Entities
    </button>
    <button type="button" aria-label="Show unassigned entities">
      <i class="fas fa-exclamation-triangle" aria-hidden="true"></i> Unassigned
    </button>
    <button type="button" aria-label="Show partner/vendor systems">
      <i class="fas fa-handshake" aria-hidden="true"></i> Partners
    </button>
  </div>

  <div class="filter-actions">
    <button type="button" class="btn btn-primary">Apply Filters</button>
    <button type="button" class="btn btn-secondary">Reset</button>
  </div>
</div>

Filter Behavior

When applied:

  1. Graph displays only matching entities; related dependencies grayed out for context
  2. Counter shows: "Filtered: 42 of 342 entities by owner: John Smith"
  3. Ownership filters are saved with Saved Views for reuse
  4. Filtered list can be exported to Excel/CSV