Using the Association Viewer

Overview

The Association Viewer interface is designed for intuitive exploration of your HubSpot relationships. This guide covers all the features and interactions available in the graph visualization.

Interface Components

The Graph Canvas

The main canvas displays your association graph with:

Nodes - Represent CRM records

• Color-coded by object type
• Show record name/title
• Display object type icon

Edges - Represent associations

• Labeled with relationship type
• Animated when connected to focused node
• Faded when not directly connected

Focused Node - Your current record

• Highlighted with bright pink (FF0072) border
• 4px border width for visibility
• Center of the current view

Control Panels

Top-Left Panel

Layout Button

• Reorganizes the entire graph
• Uses force-directed algorithm for clean positioning
• Runs automatically with smooth animation
• Prevents node overlap
• Creates balanced, readable layouts

Object Type Filters

• Checkbox for each object type
• Show/hide specific objects
• Changes apply instantly
• Hidden nodes don’t affect focused node visibility
• Useful for reducing clutter

Bottom-Center Panel

Fetch All Button

• Loads associations for all visible nodes that haven’t been loaded yet
• Processes up to 50 nodes per click
• Batches requests for performance
• Shows loading state while processing

Node Interactions

Click to Refocus

What it does: Clicking any node makes it the new focused node

How it works:

1. Click on any non-focused node
2. That node becomes the focused node (pink border)
3. Graph refocuses around that record
4. Edges update to show active connections
5. View centers on the new focused node

Use case: Navigate through relationship networks by clicking from record to record

Grab Associations Button

What it does: Fetches and displays all associations for this specific node

When to use: When you want to see what’s connected to a particular record

How it works:

1. Click “Grab associations” on a node
2. System fetches all associated records from HubSpot
3. New nodes appear for each association
4. Edges connect the source node to new nodes
5. Association labels display on edges

Note: Once loaded, the button disappears - associations are already displayed

GoTo Button

What it does: Opens the record in HubSpot in a new tab

When to use: When you need to view or edit record details

How it works:

1. Click “GoTo” on any node
2. New browser tab opens
3. HubSpot record page loads
4. Graph remains open in original tab

Use case: Quick access to record details while keeping the graph view active

Canvas Navigation

Zoom Controls

Mouse Wheel / Trackpad Pinch

• Scroll up/pinch out: Zoom in
• Scroll down/pinch in: Zoom out
• Minimum zoom: 0.3 (30%)
• Default zoom: 0.6 (60%)
• Maximum zoom: Unlimited (for detail viewing)

Use cases:

• Zoom in to read small text on nodes
• Zoom out to see the big picture
• Find optimal zoom level for your screen size

Pan/Drag

Click and Drag Background

• Move the entire graph
• Navigate to different areas
• Reposition your view

Click and Drag Nodes

• Move individual nodes
• Manually arrange layout
• Create custom positioning
• Overrides auto-layout (until you click Layout again)

Working with Object Filters

Show/Hide Object Types

The checkboxes in the top-left panel control visibility for each object type:

Contacts - Orange nodes Companies - Red nodes Deals - Yellow nodes Tickets - Green nodes Products - Cyan nodes Line Items - Blue nodes Quotes - Purple nodes

Filter Strategy

Scenario: Too Many Nodes

• Uncheck object types you don’t need
• Start with Line Items and Products if they’re cluttering the view
• Add back types as needed

Scenario: Focus on People

• Check only Contacts and Companies
• Hide Deals, Tickets, Products, Line Items, Quotes
• See just the relationship network between people and organizations

Scenario: Deal Pipeline View

• Check Contacts, Companies, and Deals
• Hide everything else
• Focus on sales relationships

Using the Layout Function

When to Use Layout

Messy Graph

• Nodes overlap
• Edges cross excessively
• Hard to read

After Loading New Nodes

• Just fetched associations
• New nodes appear in random positions
• Need clean arrangement

Custom Positioning Gone Wrong

• Manually dragged nodes into bad positions
• Want to reset to automatic layout

How the Layout Algorithm Works

The force-directed layout uses physics simulation:

1. Repulsion Force - Nodes push away from each other (prevents overlap)
2. Link Force - Connected nodes pull together (maintains relationships)
3. Collision Detection - Prevents nodes from overlapping
4. Center Force - Keeps graph centered on canvas
5. Simulation - Runs for 1000 ticks to find optimal positions

Result: Clean, balanced graph where:

• Connected nodes are close together
• Unconnected nodes are spaced apart
• No overlaps or collisions
• Easy to trace relationships

Loading Associations

Lazy Loading Strategy

The viewer uses lazy loading to optimize performance:

Initial View

• Shows the focused record
• Loads immediate associations only
• Keeps initial load fast

On-Demand Loading

• Click “Grab associations” to load more
• Click “Fetch All” to batch-load multiple nodes
• Only fetch what you need

Fetch All Behavior

What it does:

• Finds all visible nodes that haven’t loaded associations yet
• Batches up to 50 nodes
• Fetches associations for all of them in parallel
• Adds new nodes and edges to the graph

When to use:

• You want to see the full relationship network
• Exploring a large account with many interconnected records
• Building a complete map of associations

Performance notes:

• Processes maximum 50 nodes per click
• May take a few seconds for large batches
• Loading indicator shows progress

Edge Types and Labels

Association Labels

Edges display the type of relationship:

• “Primary Company”
• “Decision Maker”
• “Associated Contact”
• Custom association labels from HubSpot

Edge States

Active Edge (connected to focused node)

• Full opacity
• Animated
• Pink color (#FF0072)
• Easy to trace

Inactive Edge (not connected to focused node)

• 40% opacity
• Faded
• Gray color
• Background context

Reversed Edge

• Hidden automatically
• Prevents duplicate lines
• Keeps graph clean

Best Practices

Start with the Focused Record

1. Open the viewer
2. Look at immediate associations
3. Identify interesting connections
4. Click on specific nodes to explore deeper

Use Filters Progressively

1. Start with all object types visible
2. Identify which types add value
3. Hide types that clutter the view
4. Focus on relevant relationships

Combine Manual and Auto Layout

1. Use “Layout” for initial organization
2. Manually drag nodes for fine-tuning
3. Group related nodes together
4. Click “Layout” again if it gets messy

Navigate Efficiently

1. Click on nodes to jump between records
2. Use “GoTo” to open details in new tabs
3. Keep the graph open for context
4. Use browser tabs to manage multiple views

Common Workflows

Exploring a New Account

1. Open a company record
2. Click “View Associations”
3. See immediate contacts and deals
4. Click “Fetch All” to load the full network
5. Use filters to focus on active deals
6. Click on key contacts to see their other companies

Understanding a Deal

1. Open a deal record
2. Click “View Associations”
3. See associated contacts, company, products
4. Click on the company to see other deals
5. Identify similar opportunities
6. Use “GoTo” to review related deals

Finding Missing Associations

1. Open a record
2. Click “View Associations”
3. Look for isolated nodes (no connections)
4. Identify records that should be linked
5. Use “GoTo” to fix associations in HubSpot
6. Refresh the viewer to verify changes

Building an Account Map

1. Start with a company record
2. Fetch all associations
3. Hide Products and Line Items
4. Focus on Contacts and Deals
5. Click “Layout” for clean organization
6. Screenshot for documentation

Keyboard and Mouse Tips

Zoom:

• Mouse wheel up/down
• Trackpad pinch
• Ctrl/Cmd + scroll (some browsers)

Pan:

• Click and drag background
• Arrow keys (if canvas is focused)

Select Node:

• Click on node
• Becomes focused node

Multi-Select:

• Not currently supported
• Focus on one node at a time

Performance Considerations

Large Graphs

For accounts with 100+ associated records:

• Use object filters aggressively
• Don’t click “Fetch All” immediately
• Load associations incrementally
• Hide object types you don’t need

Slow Loading

If associations take a long time to load:

• Check your internet connection
• Verify HubSpot API is responding
• Try loading smaller batches
• Contact support if issues persist

Browser Performance

For best performance:

• Use Chrome or Edge (best React Flow support)
• Close unnecessary browser tabs
• Zoom to comfortable level (avoid extreme zoom)
• Refresh if graph becomes sluggish

Troubleshooting

Nodes Overlapping

Solution: Click the “Layout” button to reorganize

Can’t Find a Record

Check:

• Use object type filters - might be hidden
• Scroll or zoom out to see full graph
• Verify the association exists in HubSpot

Graph Looks Empty

Possible causes:

• Record has no associations
• All object types are hidden (check filters)
• Associations haven’t been fetched yet

Solution:

• Click “Grab associations” on the focused node
• Check object type filters
• Verify associations exist in HubSpot

Edges Crossing Too Much

Solution:

• Click “Layout” for better organization
• Hide object types that add clutter
• Manually drag nodes to better positions
• Zoom in to focus on specific areas

Getting Help

If you have questions or feedback:

• Email: contact@daeda.tech