Sardine ofrece una plataforma con soluciones de gestión de riesgos, cumplimiento normativo y protección de pagos, que ayuda a las empresas a aumentar la confianza y la fidelidad de sus clientes. Un aspecto fundamental de nuestra plataforma consiste en comprender las complejas relaciones dentro de los datos de los clientes.
En esta publicación del blog, mostraré el proceso de creación de una potente herramienta de visualización de redes utilizando React Flow, una biblioteca flexible y fácil de usar para renderizar gráficos interactivos en aplicaciones React. Este grafo de la red de clientes ayudará a visualizar las conexiones entre diversas entidades, como clientes, usuarios, dispositivos e información de contacto, proporcionando información muy valiosa para procesos de toma de decisiones basados en datos. Los usuarios pueden agrupar cuentas, identificar el flujo de fondos y marcar actividades para su seguimiento en el sistema de gestión de casos de Sardine.
Creación de nodos personalizados y obtención de datos de grafos
Para nuestro Customer Network Graph, necesitamos varios tipos de nodos personalizados para representar diferentes entidades. Para crear un nodo personalizado, primero definiré componentes funcionales y luego los estilizaré usando CSS. Aquí tienes un ejemplo de nodos personalizados simples que representan una dirección de correo electrónico, un número de teléfono y un dispositivo:
y definimos una constante con los tipos de nodos y se la pasamos a ReactFlow más adelante para que ReactFlow reconozca los diferentes diseños de nodos personalizados.
Procesamiento de datos del grafo y cálculo de posiciones de los nodos
Para procesar los datos en bruto del grafo y transformarlos en un formato que React Flow pueda entender, realizaremos varias operaciones, como:
- Convertir los nodos y aristas del grafo en bruto en tipos ReactFlowNode y ReactFlowEdge.
- Generar ElkNode y ElkEdge para calcular las posiciones de los nodos usando ELK.
- Filtrar y mostrar los nodos y aristas según criterios definidos por el usuario.
Puedes explorar los algoritmos de ELK aquí.
Representación del gráfico y gestión de las interacciones del usuario
Ahora que tenemos los datos del grafo procesados y las posiciones de los nodos calculadas, podemos renderizar el grafo usando React Flow. También gestionaremos las interacciones del usuario, como la selección de nodos y aristas, el zoom, el desplazamiento y los menús contextuales.
Con esta implementación, tendrás una potente e interactiva herramienta de visualización de redes que puede mostrar un grafo de red. Puedes personalizar aún más la herramienta para adaptarla a tus necesidades y requisitos específicos. Ampliando la funcionalidad del grafo: para mejorar la experiencia del usuario y añadir más funciones a tu herramienta de visualización de redes, puedes ampliarla implementando características como filtrado, menús contextuales y tooltips.
Filtrado
Para ofrecer a los usuarios la posibilidad de filtrar nodos y aristas según sus tipos u otras propiedades, puedes crear un panel de filtrado que les permita alternar la visibilidad de los distintos tipos de nodos y aristas. Luego podrás actualizar los nodos y aristas mostrados en el gráfico en función de las selecciones del usuario.
Menús contextuales
Para ofrecer a los usuarios acciones específicas según el contexto, puedes implementar menús contextuales que aparezcan cuando hagan clic derecho en los nodos, aristas o en el fondo del grafo. Estos menús contextuales pueden ofrecer acciones como agregar o eliminar nodos, editar las propiedades de las aristas o navegar a recursos relacionados.
Información sobre herramientas
Para proporcionar a los usuarios información adicional sobre nodos y aristas, puedes implementar tooltips que aparezcan cuando los usuarios pasen el cursor sobre los elementos del grafo. Los tooltips pueden mostrar propiedades como las etiquetas de nodos y aristas, metadatos y otra información relevante.
Conclusión
En conclusión, al aprovechar el poder de React Flow y sus diversas opciones de personalización, puedes crear una herramienta de visualización de redes altamente interactiva y visualmente atractiva que se adapte a tus requisitos específicos. Esto permitirá a los usuarios explorar y analizar los datos de manera eficaz, lo que conducirá a mejores conocimientos y una toma de decisiones más acertada.
Recuerda experimentar con diferentes algoritmos de diseño y opciones de personalización para encontrar la mejor opción para tu caso de uso. Las posibilidades son infinitas y, con la combinación adecuada de funciones y diseño, puedes crear una experiencia de visualización de redes realmente extraordinaria.