Sardine oferece uma plataforma de soluções de risco, compliance e proteção de pagamentos, ajudando as empresas a aumentar a confiança e a fidelidade dos clientes. Um aspecto crucial da nossa plataforma envolve entender relações complexas dentro dos dados dos clientes.
Neste post do blog, vou demonstrar o processo de construção de uma poderosa ferramenta de visualização de rede usando o React Flow, uma biblioteca flexível e fácil de usar para renderizar gráficos interativos em aplicações React. Este gráfico de rede de clientes vai ajudar a visualizar conexões entre várias entidades, como clientes, dispositivos e informações de contato, oferecendo insights valiosos para processos de tomada de decisão baseados em dados. Os usuários podem agrupar contas, identificar o fluxo de fundos e sinalizar atividades para acompanhamento no sistema de gestão de casos da Sardine.
Criando nós personalizados e buscando dados do gráfico
Para o nosso gráfico de rede de clientes, precisamos de vários tipos de nós personalizados para representar diferentes entidades. Para criar um nó personalizado, vou primeiro definir componentes funcionais e depois estilizá-los com CSS. Aqui está um exemplo de nós personalizados simples representando um endereço de e-mail, um número de telefone e um dispositivo:
e definimos uma constante de tipos de nós e a passamos posteriormente ao ReactFlow, para que o ReactFlow reconheça os diferentes designs de nós personalizados.
Processando dados do gráfico e calculando as posições dos nós
Para processar os dados brutos do gráfico 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 gráfico em tipos ReactFlowNode e ReactFlowEdge.
- Gerar ElkNode e ElkEdge para calcular as posições dos nós usando o ELK.
- Filtrar e exibir os nós e arestas com base em critérios definidos pelo usuário.
Você pode explorar os algoritmos do ELK aqui.
Renderizando o gráfico e lidando com as interações do usuário
Agora que temos os dados do gráfico processados e as posições dos nós calculadas, podemos renderizar o gráfico 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 essa implementação, você terá uma ferramenta de visualização de rede poderosa e interativa, capaz de exibir um gráfico de rede. Você pode personalizar ainda mais a ferramenta para atender às suas necessidades e requisitos específicos. Ampliando a funcionalidade do gráfico: para melhorar a experiência do usuário e adicionar mais funcionalidades à sua ferramenta de visualização de rede, você pode expandi-la implementando recursos 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 alternar a visibilidade de diferentes tipos de nós e arestas. Você pode então atualizar os nós e arestas exibidos no gráfico com base nas seleções do usuário.
Menus de contexto
Para oferecer aos usuários ações específicas de contexto, você pode implementar menus de contexto que aparecem quando os usuários clicam com o botão direito em nós, arestas ou no fundo do gráfico. Esses menus de contexto podem oferecer ações como adicionar ou remover nós, editar propriedades de arestas ou navegar até recursos relacionados.
Tooltips
Para fornecer aos usuários informações adicionais sobre nós e arestas, você pode implementar tooltips que aparecem quando os usuários passam o cursor sobre os elementos do gráfico. 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 rede altamente interativa e visualmente atraente que atenda às suas necessidades específicas. Isso permitirá que os usuários explorem e analisem dados de forma eficaz, levando a melhores insights e decisões.
Lembre-se de experimentar diferentes algoritmos de layout e opções de personalização para encontrar o que melhor se adapta ao 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 rede verdadeiramente notável.