Skip to content

Example · Components

Minimap + Search + Tooltip

A graph dashboard usually needs three things together: a minimap to navigate, a search bar to jump to a specific node, and a tooltip to show details on hover. TopoKit ships all three as composable config blocks — no extra packages.

All three at once

dashboard.ts 
import { create } from '@topokit/renderer-canvas';

const app = create(container, {
  nodes, edges,
  layout: 'force',
  interactive: true,
  autoResize: true,

  // Minimap — bottom-right by default; click-and-drag the viewport rectangle to pan.
  minimap: {
    enabled: true,
    position: 'bottom-right',
    width: 200,
    height: 140,
    opacity: 0.92,
  },

  // Search bar — top-left; full-text fuzzy match across labels and node data.
  search: {
    enabled: true,
    placeholder: 'Search nodes…',
    fields: ['label', 'data.role', 'data.email'],
    onSelect: (node) => app.focusNode(node.id, { zoom: 1.5 }),
  },

  // Tooltip — opens on hover; render any HTML you like.
  tooltip: {
    enabled: true,
    delay: 200,
    render: (node) => `
      <div class="tk-tip">
        <strong>${node.label}</strong>
        <div class="tk-tip-meta">${node.data.role ?? '—'}</div>
      </div>
    `,
  },
});

Update at runtime

dashboard.ts 
// Toggle the minimap on/off without recreating the app.
app.setMinimap({ enabled: false });

// Change the searched fields after the user picks a different filter mode.
app.setSearch({ fields: ['label', 'data.tags'] });

// Replace the tooltip renderer with a richer card.
app.setTooltip({ render: richTooltipRenderer });

Related

Components reference Custom Node Rendering