Skip to content

Account Page: Feature Ticket: Interactive "Influence & Delegation" Map

1. Overview

This feature introduces a new, best-in-class Interactive "Influence & Delegation" Map. It will transform the static lists of delegations into a dynamic, explorable network graph, providing users with a visually stunning and instantly understandable map of their social and financial influence on Hive. This is a high-impact, "wow-factor" feature that will establish our explorer as the premier tool for on-chain network analysis.

2. Strategic Placement: The New "Analytics" Tab

To house this and all future analytical dashboards, we will introduce a new, top-level tab on the account page named Analytics (with a chart icon 📊).

Current Tab Structure: Operations | Comments| Interactions
New Tab Structure: Operations | Comments| Interactions | 📊 Analytics

Why this is the right place:

  1. Creates a Central Hub: It establishes a single, dedicated home for all data visualizations and analytical tools (The Security Dashboard, The RC Footprint, The Influence Map, etc.).
  2. Scalable for the Future: As we build more dashboards, they can be added as sub-sections or sub-tabs within the "Analytics" tab without cluttering the main navigation.

3. User Stories

  • Primary User Story:
    As a Hive user,
    I want to navigate to the new "Analytics" tab on an account page and see a visual map of all incoming and outgoing Hive Power delegations,
    so that I can instantly understand the flow of influence around that account.
  • Exploration User Story:
    As an analyst or curious user,
    I want to be able to expand any account node on the influence map,
    so that I can explore the interconnected delegation networks and discover the flow of influence across the entire Hive ecosystem.

4. Non-Technical Requirements & User Experience (UX) Workflow

  1. Initial View: When a user clicks the "Analytics" tab, they will see the "Influence & Delegation Map".
    • The backend logic that already powers the existing "Incoming/Outgoing Delegations" cards will be enhanced. It will now also format this data into the required JSON structure (nodes and links) and pass it directly as a prop to the chart component. No new, separate API call is needed for the initial load.
  2. Visual Design: Colors & Arrows
    • Nodes:
      • Central Hub: Red (#ef4444)
      • Outgoing Delegations (accounts the hub delegates to): Blue (#3b82f6)
      • Incoming Delegations (accounts that support the hub): Green (#10b981)
    • Links (Lines):
      • Links will be colored by their source node, providing a clear visual flow. A green line comes from a supporter; a blue line goes to a project.
      • An arrow will be rendered at the end of each link to unambiguously show the direction of the delegation.
  3. "Top N + Others" Aggregation: For accounts with many incoming delegations, the data passed to the chart will be pre-aggregated to show the Top 8 delegators individually. All other delegators will be represented by a single, large "Others" node (also green).
  4. Interactive Exploration:
    • Users can pan, zoom, and drag nodes.
    • Hovering over a link displays a tooltip with the exact HP amount.
    • On-Demand Node Expansion: When a user double-clicks any account node, a loading indicator will appear. The component will then make a new, on-demand API call to fetch that specific account's delegation network and smoothly animate the new nodes and links into the view.

5. Technical Specifications

  • No New Endpoint for Initial Load
  • Reusable API Endpoint for Expansion
  • New Tab: Create the "Analytics" tab in the account page layout.
  • Charting Library: ECharts for React.
  • Data Flow: The main account page component will fetch the initial data (including the graphData) and pass it as a prop to the InfluenceMapDashboard.
  • State Management: The dashboard component will manage graphData, expandedNodes, and isLoading states to handle the dynamic expansion.
  • Interaction Logic:
    • A dblclick event handler will trigger the new API call for the clicked node.
    • The response data will be merged into the existing graphData state to update the chart.
  • Styling (ECharts Option):
    • lineStyle: { color: 'source' } to color links by their source node.
    • edgeSymbol: ['none', 'arrow'] to add directional arrows.
    • color array in the series must match the specified Red, Blue, and Green hex codes.

6. Phased Rollout Plan

  • Phase 2 (Post-MVP): Enhance the "Others" node. When clicked, it will open a modal window containing a searchable, paginated table of all the smaller delegators.