Sardine oferece uma plataforma com soluções de gestão de risco, conformidade e proteção de pagamentos, ajudando empresas a aumentar a confiança e a fidelidade dos clientes. Um aspecto crucial da nossa plataforma é a compreensão de relações complexas dentro dos dados dos clientes.
Neste post do blog, vou demonstrar o processo de criação de uma poderosa ferramenta de visualização de redes usando o React Flow, uma biblioteca flexível e fácil de usar para renderizar gráficos interativos em aplicações React. Esse grafo de rede de clientes ajudará a visualizar conexões entre várias entidades, como clientes, consumidores, dispositivos e informações de contato, fornecendo insights valiosos para processos de tomada de decisão orientados por dados. Os usuários podem agrupar contas, identificar o fluxo de fundos e sinalizar atividades para acompanhamento no sistema de gerenciamento de casos da Sardine.
Criando nós personalizados e buscando dados de grafo
Para o nosso Customer Network Graph, precisamos de vários tipos de nós personalizados para representar diferentes entidades. Para criar um nó personalizado, primeiro vou definir componentes funcionais e depois estilizar tudo usando CSS. Aqui está um exemplo de nós personalizados simples que representam um endereço de e-mail, número de telefone e dispositivo:
e definimos uma constante com os tipos de nós e a passamos para o ReactFlow depois, para que o ReactFlow reconheça diferentes designs de nós personalizados.
Processamento de dados do grafo e cálculo das posições dos nós
Para processar os dados brutos do grafo e transformá-los em um formato que o React Flow consiga entender, realizaremos várias operações, como:
- Converter os nós e arestas brutos do grafo em tipos ReactFlowNode e ReactFlowEdge.
- Gerar ElkNode e ElkEdge para calcular as posições dos nós usando ELK.
- Filtrar e exibir os nós e arestas com base em critérios definidos pelo usuário.
Você pode explorar os algoritmos ELK aqui.
Renderizando o grafo e lidando com interações do usuário
Agora que temos os dados do grafo processados e as posições dos nós calculadas, podemos renderizar o grafo usando o React Flow. Também vamos lidar com interações do usuário, como seleção de nós e arestas, zoom, panorâmica e menus de contexto.
Com esta implementação, você terá uma ferramenta poderosa e interativa de visualização de redes que pode exibir um grafo de rede. Você pode personalizar ainda mais a ferramenta para atender às suas necessidades e requisitos específicos. Ampliando a funcionalidade do grafo: para melhorar a experiência do usuário e adicionar mais recursos à sua ferramenta de visualização de redes, você pode expandi-la implementando funcionalidades como filtragem, menus de contexto e tooltips.
Filtragem
Para oferecer aos usuários a capacidade de filtrar nós e arestas com base em seus tipos ou outras propriedades, você pode criar um painel de filtragem que permita aos usuários alternar a visibilidade de diferentes tipos de nós e arestas. Em seguida, você pode atualizar os nós e arestas exibidos no grafo com base nas seleções do usuário.
Menus de contexto
Para oferecer aos usuários ações específicas ao contexto, você pode implementar menus de contexto que aparecem quando eles clicam com o botão direito em nós, arestas ou no plano de fundo do grafo. Esses menus de contexto podem oferecer ações como adicionar ou remover nós, editar propriedades das arestas ou navegar para recursos relacionados.
Dicas de ferramenta
Para fornecer aos usuários informações adicionais sobre nós e arestas, você pode implementar tooltips que aparecem quando o cursor passa sobre os elementos do grafo. Os tooltips podem exibir propriedades como rótulos de nós e arestas, metadados e outras informações relevantes.
Conclusão
Em conclusão, ao aproveitar o poder do React Flow e suas diversas opções de personalização, você pode criar uma ferramenta de visualização de redes altamente interativa e visualmente atraente, que atenda aos seus requisitos específicos. Isso permitirá que os usuários explorem e analisem dados de forma eficaz, levando a melhores insights e tomadas de decisão.
Lembre-se de experimentar diferentes algoritmos de layout e opções de personalização para encontrar a melhor opção para o seu caso de uso. As possibilidades são infinitas e, com a combinação certa de recursos e design, você pode criar uma experiência de visualização de redes realmente notável.