Sardine ofrece una plataforma de soluciones de riesgo, cumplimiento normativo y protección de pagos que ayuda a las empresas a aumentar la confianza y la lealtad de sus clientes. Un aspecto crucial de nuestra plataforma consiste en comprender las relaciones complejas dentro de los datos de los clientes.
En esta publicación del blog, mostraré el proceso de construcció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 gráfico de red de clientes ayudará a visualizar las conexiones entre varias entidades, como clientes, dispositivos e información de contacto, brindando información valiosísima para los 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 del gráfico
Para nuestro gráfico de red de clientes, necesitamos varios tipos de nodos personalizados para representar diferentes entidades. Para crear un nodo personalizado, primero definiré componentes funcionales y luego los estilizaré con 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 de tipos de nodos y la pasamos más tarde a ReactFlow, para que ReactFlow reconozca los diferentes diseños de nodos personalizados.
Procesamiento de datos del gráfico y cálculo de posiciones de los nodos
Para procesar los datos brutos del gráfico y transformarlos en un formato que React Flow pueda entender, realizaremos varias operaciones, como:
- Convertir los nodos y aristas brutos del gráfico en tipos ReactFlowNode y ReactFlowEdge.
- Generar ElkNode y ElkEdge para calcular las posiciones de los nodos utilizando ELK.
- Filtrar y mostrar los nodos y aristas según criterios definidos por el usuario.
Puedes explorar los algoritmos de ELK aquí.
Renderización del gráfico y gestión de las interacciones del usuario
Ahora que tenemos los datos del gráfico procesados y las posiciones de los nodos calculadas, podemos renderizar el gráfico usando React Flow. También gestionaremos 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 herramienta de visualización de redes potente e interactiva capaz de mostrar un gráfico de red. Puedes personalizar aún más la herramienta para adaptarla a tus necesidades y requisitos específicos. Ampliación de la funcionalidad del gráfico: para mejorar la experiencia del usuario y añadir más funcionalidad a tu herramienta de visualización de redes, puedes ampliarla implementando funciones como filtrado, menús contextuales y tooltips.
Filtrado
Para brindar a los usuarios la capacidad de filtrar nodos y aristas según su tipo u otras propiedades, puedes crear un panel de filtrado que les permita alternar la visibilidad de los diferentes tipos de nodos y aristas. Luego puedes actualizar los nodos y aristas mostrados en el gráfico según 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 aparecen cuando los usuarios hacen clic derecho en nodos, aristas o el fondo del gráfico. Estos menús contextuales pueden ofrecer acciones como agregar o eliminar nodos, editar propiedades de las aristas o navegar a recursos relacionados.
Tooltips
Para brindar a los usuarios información adicional sobre nodos y aristas, puedes implementar tooltips que aparecen cuando los usuarios pasan el cursor sobre los elementos del gráfico. Los tooltips pueden mostrar propiedades como etiquetas de nodos y aristas, metadatos y otra información relevante.
Conclusión
En conclusión, aprovechando 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 cumpla con tus requisitos específicos. Esto permitirá a los usuarios explorar y analizar datos de manera efectiva, lo que conducirá a mejores conocimientos y decisiones.
Recuerda experimentar con diferentes algoritmos de diseño y opciones de personalización para encontrar el que mejor se adapte a 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 verdaderamente excepcional.