Vista microscópica detallada

La vista microscópica detallada es la que ofrece el mayor nivel de detalle de las desarrolladas. El propósito de esta representación es dar una visión centrada en las características de una sola neurona. En la herramienta inicial esta vista, únicamente presentaba una neurona y las conexiones agrupadas por tipo de ésta.

Para mejorar este aspecto se ha dotado a la vista de una serie de gráficos históricos sobre las características de la neurona bajo estudio (Figura 5-8). Estos gráficos presentan un historial de los n últimos momentos de la simulación con los valores de calcio y número de conexiones de estos momentos. También se puede encontrar un historial completo de estos valores mediante otros dos gráficos de progresión.

Además, se ha modificado la vista base de la que se ha partido para introducir los tipos de neurona mediante los glifos asociados al tipo de neurona, triangulo y círculos, de las neuronas a las que están conectada la neurona bajo estudio. Además, se han introducido los colores de estas neuronas, para poder observar su nivel de calcio e información sobre sus características, mediante la interacción con el puntero.

Finalmente, también se ha introducido la posibilidad de navegar por las neuronas a las que está conectada la neurona bajo estudio. Esta funcionalidad permite recorrer el grafo formado por las neuronas.

Figura 5-8: La figura muestra las modificaciones realizadas a la vista microscópica detallada, siendo estas, los gráficos históricos de los valores de calcio y tipos de conexiones y la representación de las neuronas con las que conecta la neurona bajo estudio.

6. FILTRADO Y ORDENACIÓN

30

6

FILTRADO Y ORDENACIÓN

En este capítulo se expondrán los sistemas implementados para potenciar el análisis de datos en las vistas con gran densidad, el filtrado y la ordenación.

6.1.1 Filtrado

Con el aumento del número de los datos también lo hace la densidad de estos en la visualización, por ello, es necesario aliviar la concentración de información. Para ello, inicialmente se ha mantenido la opción de ocultar un tipo específico de conexión y modificar su opacidad. Pero esta característica es demasiado limitadora, no es útil eliminar completamente un tipo de conexión, por ello se ha desarrollado un sistema de filtros (Figura 6-1).

Este sistema permite centrar la representación en los datos que cumplan con las características del filtro, transformando a color gris y reduciendo la opacidad de los elementos que, por el contrario, no cumplan con el filtro. Este filtrado se puede realizar por tipo de neurona, rango de calcio y número de conexiones, ya que estos parámetros, son los que se representan en las representaciones. Este filtrado puede aplicarse a todas las vistas, al no ser este intrusivo, ya que no se elimina en ningún momento los elementos que no cumplen con el filtro, solo se reduce su relevancia visual.

Este mismo comportamiento, el ocultar elementos, se ha introducido a la hora de seleccionar neuronas, para así, facilitar al usuario el seleccionar una serie de neuronas y centrar su análisis en la evolución de su selección.

Finalmente, también se ha introducido la opción de resaltar tan solo las conexiones salientes o entrantes de las neuronas filtradas o seleccionadas y sus correspondientes neuronas conectadas.

Figura 6-1: En la imagen se representa un filtrado en base a la concentración de calcio realizado en la vista macroscópica.

31

6.1.2 Ordenación

Otro sistema que puede mejorar la percepción de los datos que dirigen el análisis en caso de que el filtrado no sea suficiente como para reducir la cantidad de datos es la ordenación.

Este sistema ordena los datos en base a los atributos que manejan las vistas de la herramienta. Por tanto, se han implementado ordenaciones por número de conexiones de cada tipo y valores de calcio.

Debido a la naturaleza de la ordenación, el hecho de tener que mover las neuronas para recolocarlas supone que no se puede aplicar en la distribución force-directed graph de la vista macroscópica. Sin embargo, es posible aplicar la ordenación en todas las demás vistas que presentan neuronas.

7. OPTIMIZACIÓN

32

7

OPTIMIZACIÓN

En este capítulo se comentarán las optimizaciones y cambios destinados a este ámbito desarrollados durante la implementación y mejora de funcionalidades.

A la hora de desarrollar las representaciones y mejorar las ya presentes en la herramienta MSPViz se ha tenido en cuenta la optimización de estas.

7.1 Optimizaciones generales

Las optimizaciones generales han consistido en una revisión del código para aplicar las mejores prácticas a la hora de programar en Javascript. Esto ha consistido; entre otras optimizaciones en la eliminación de cualquier fragmento innecesario de código, optimización de los accesos a variables; optimización de las interacciones con el DOM en las vistas que requieran el uso de SVGs; reducción los listeneres innecesarios; optimización de bucles; optimización de llamadas de dibujado en Canvas; etc.

Estas optimizaciones, aunque son secundarias, ofrecen un pequeño margen que amplía la capacidad de procesamiento de la herramienta.

7.2 Canvas contra SVG

A la hora de realizar representaciones se utiliza la librería D3.js, la cual facilita la creación de estas. Esta librería está destinada a la generación de elementos SVG y es por ello, que todas las representaciones estaban desarrolladas en esta tecnología. Pero, la tecnología SVG presenta una limitación, el rendimiento disminuye a medida que el número de elementos SVG aumenta.

Mediante una simple prueba en la que se crean rectángulos de diferentes colores, de tamaño 5x5, se puede observar este aumento en el tiempo de creación de los elementos. Para recoger los resultados se utiliza el perfilador que el navegador Chrome 58.0.3029.110 provee. En la Figura 7-1 queda patente el problema de rendimiento y se aprecia un crecimiento casi exponencial en el tiempo de creación del SVG siendo este de alrededor de 1 segundo para 10000 nodos. Cabe destacar que los tiempos de esta figura no son los reales, ya que, al estar utilizando el perfilador se introduce cierto overhead.

Esta diminución del rendimiento se debe a que los elementos SVG se almacenan en el DOM de la página, por tanto, a mayor número de elementos menos rendimiento. Este hecho es especialmente visible a la hora de interactuar con la representación cuando esta presenta numerosas conexiones.

33

Para solventar este problema se presentan dos alternativas, disminuir el número de elementos o buscar una alternativa a la tecnología SVG. La primera opción es inviable, ya que supondría perder información útil para las representaciones, por tanto, se optará por la segunda opción.

Como alternativa a la tecnología SVG se ha puede utilizar el elemento Canvas de HTML5. A diferencia de SVG el elemento Canvas no es más que una superficie sobre la cual pinatar pixeles, por tanto, no hay elementos guardados en el DOM, aparto del propio elemento Canvas.

Si se repite la misma prueba de rendimiento para el elemento Canvas de HTML5 se obtienen unos resultados muy diferentes. Al contrario que SVG, Canvas sufre perdidas de rendimiento despreciables a medida que aumenta el número de nodos, como se puede observar en la Figura 7-1.

Esto se debe a que el elemento Canvas tan solo es una superficie sobre la cual dibujar gráficos. Pero, no todo son ventajas, al estar utilizando algo tan simple como Canvas se pierde la capacidad de añadir listeners a los objetos que forman la representación, porque realmente ya no existen. Por tanto, esto supone un trabajo extra a la hora de introducir interactividad con la representación. Por ejemplo, para implementar la interactividad de las diferentes neuronas de la vista se ha utilizado un segundo Canvas oculto. Como las neuronas son los únicos elementos que presentan interactividad y puesto que su posición es fija en la representación, estas son dibujadas en el Canvas oculto al crear la vista. Este dibujado se realiza con cada neurona de un color diferente y secuencial, por tanto, a la hora de implementar la interactividad, basta con extraer el color de la posición del cursor, aplicando la transformación y escala necesaria, y convertirlo en un índice. Esta transformación se realiza transformando los valores de los canales RGB del color en un único número, de esta manera la interactividad presenta una complejidad O(1).

Figura 7-1: La figura muestra la duración de la creación de un documento formado por un número incremental de cuadrado en las tecnologías Canvas y SVG.

0 500 1000 1500 2000 2500 3000 ms Número de elementos SVG Canvas

7. OPTIMIZACIÓN

34

En lo referente a las representaciones de datos la tecnología Canvas ha sido utilizada únicamente en las visualizaciones que presentaban un gran número de elementos. Estas representaciones son las englobadas dentro de la vista macroscópica, puesto que es en esta vista donde se muestran todas las neuronas y sus conexiones. Para los datos con los que se ha desarrollado el presente trabajo, esto supondría alrededor de 5000 elementos en pantalla.

7.3 Carga gradual

Otras de las optimizaciones realizadas se encuentran a la hora de cargar los ficheros del servidor. Actualmente la herramienta cuenta con tres modos de carga, pero todo ellos cargan todos los datos en el navegador. Esto se traduce en un exceso de uso de los servidores remotos, para la carga desde servidor, y un mayor uso de la memoria por parte del navegador. Estas características podrían limitar el uso de la herramienta si los datos bajo estudio aumentan su tamaño tanto de cara al rendimiento de la herramienta como al uso de los servidores que proporcionan acceso a ellos.

Los ficheros de datos se han reestructurado para poder implementar esta carga por pasos. Para ello, se han procesado mediante un script Python que genera la estructura de configuración y los diferentes ficheros de datos. Por tanto, al cargar un fichero de datos, inicialmente solo se cargará el primer fragmento de los datos. Este fragmento contendrá la información relativa a todas las neuronas, ya que estas siempre deben ser

mostradas, pero solo contendrá la información de n pasos de simulación en el

intervalo al que corresponde el fragmento. Esta información basada en pasos de simulación se refiere a las conexiones, elementos conectivos de las neuronas y concentración de calcio, ya que son las variables que cambian en base al tiempo. Para habilitar esta carga gradual se cargan los ficheros de configuración y los de las variables no dependientes del tiempo al inicio de la simulación junto con los primeros ficheros dependientes del paso de simulación. Seguidamente en función del paso de simulación al que acceda el usuario se cargara un nuevo fichero de datos. Si se realiza una simulación continua, donde los pasos aumentan automáticamente, se comenzará a cargar el siguiente fichero de datos 50 pasos previsto al final del fichero ya cargad. Por otra parte, si el usuario realiza un salto en la simulación fuera del rango del fichero de datos cargado, se cargará inmediatamente el fichero necesario para mostrar los datos al usuario.

Para el correcto funcionamiento de la aplicación, se han introducido pistas visuales, que indiquen al usuario que no dispone de los datos necesarios para mostrar ciertos gráficos utilizados en las diferentes vistas que dependen de datos históricos de la simulación.

Mediante este cambio se ha conseguido reducir la memoria utilizada por la aplicación en tantas veces como divisiones se realizan a los datos.

35

Por tanto, se ha introducido un sistema de carga gradual de los ficheros de datos adaptado las visualizaciones que necesiten de la presencia de datos históricos para así hacerlo constar al usuario.

8. RESULTADOS

36

8

RESULTADOS

En el presente capitulo se presentará los resultados obtenidos en el presente trabajo de fin de grado en base a un juego de datos real, proporcionado por el Institute of Neuroscience and Medicine of Jülich. Para ello se realizará un breve análisis de las inferencias que un investigador es capaz de realizar mediante la herramienta, en especial mediante las modificaciones introducidas por este trabajo.

A B

C

D

37

8.1 Validación

Los datos de prueba para la validación del trabajo consisten en un conjunto de 1000 neuronas simuladas durante 1000 instantes de tiempo. De estas neuronas 800 son excitadoras y 200 inhibidoras, presentando un punto de equilibrio del calcio en un valor de 0,05 y 0,2 respectivamente.

Comenzando por la vista de mayor abstracción, la vista global de las conexiones, se puede observar como las conexiones y los elementos sinápticos no están presentes al inicio de la simulación (Figura 8-1A) y aparecen en los primeros instantes de esta con un gran crecimiento (Figura 8-1B). Siguiendo el progreso de las barras se observa un crecimiento gradual y una fluctuación en los valores hasta terminar la simulación (Figura 8-1C). Con la nueva representación de gráfico, se puede tener una mejor idea de estas tendencias observando el grafico de líneas de este ámbito de la conectividad (Figura 8-1D).

La siguiente vista será la macroscópica, se podrán apreciar las diferentes conexiones y su tipo, realizadas entre las neuronas. Estas neuronas presentaran su tipo mediante la figura usada para su representación y el nivel de calcio mediante el color de relleno de su figura. Según la ordenación de esta vista, neuronas excitadoras en la parte superior e inhibidoras en la parte inferior, se puede observar como las conexiones excitadoras presentan mayor densidad en la parte inferior de la representación, mientras que las inhibidoras lo hacen en la parte superior (Figura 8-2). Debido al número de conexiones y neuronas en un estadio ligeramente avanzado de la simulación la densidad de información es grande. Por tanto, se puede aplicar un filtro para observar solo las neuronas excitadoras con una concentración de calcio menor que 0.02. Mediante este filtro se puede observar que solo 6 de las 1000 neuronas cumplen estas condiciones (Figura 8-3).

Figura 8-2: La figura muestra la distribución en grid de la vista macroscópica en un momento avanzado en la simulación.

8. RESULTADOS

38

Si se seleccionan las neuronas de la vista anterior se puede observar con más detalle sus parámetros (Figura 8-4). Si se retrocede a los momentos iniciales de la simulación se puede observar que entre los valores de calcio de las neuronas bajo análisis hay un gran pico sobre el paso de simulación 19. Interactuando con la vista se puede observar que este pico es de la neurona con ID 300 (Figura 8-5).

Figura 8-3: La figura muestra la distribución en grid de la vista macroscópica en un momento avanzado en la simulación, en el que se ha aplicado un filtrado por la concentración de calcio.

39

Pasando a la vista más detallada, se puede estudiar el comportamiento de las variables de esta neurona de manera individual. Desde esta vista (Figura 8-6) se puede observar que el nivel de calcio en los instantes previos al 16, era menor que el nivel homeostático de la neurona. Por tanto, tal y como se puede observar en los gráficos de barras de las conexiones de la neurona, se crean conexiones a zonas de actividad en los momentos 12 a 19, y de esta manera el calcio de la neurona aumenta. Ahora bien, en el momento 19 el calcio ha superado el nivel homeostático, por tanto, elimina las conexiones creadas para volver al equilibrio. Este comportamiento es el esperado, ya que es el descrito por el modelo MSP.

Figura 8-5: La figura muestra la interactividad entre las neuronas y el grafico de la vista macroscópica, al situar el cursor sobre las neuronas la vita destaca los valores de la neurona respectiva.

Figura 8-6: La figura muestra la vista microscópica detallada en un paso donde la neurona no presenta conexiones y su valor de calcio está por encima del equilibrio homeostático.

8. RESULTADOS

40

Avanzado algunos pasos la simulación se puede observar (Figura 8-7) como la neurona se conecta a otras neuronas con concentraciones altas de calcio, hecho que puede ser contrastado comprando los colores de las neuronas con la banda de color auxiliar o interactuando con la vista.

8.2 Discusión

Mediante el ejemplo anterior de un simple caso de uso de la herramienta se ha mostrado de manera general su funcionamiento. El resultado del presente trabajo de fin de grado ha sido la ampliación de la herramienta MSPViz por medio de la mejora e introducción de funcionalidades y representaciones de datos.

Frente a la versión inicial de MSPViz se han potenciado varios aspectos de la herramienta. En primer lugar, se ha ampliado la capacidad en cuanto a cantidad de datos soportados por la herramienta. Este hecho ha sido posible gracias a la sustitución de la tecnología de representación utilizada en las vistas que más demanda computacional presentaban y a la maximización del área de renderizado de las vistas. Por otro lado, se ha definido un nuevo enfoque al análisis de los datos que esta herramienta ofrece. Este nuevo enfoque permite la observación de las tendencias en las variables representadas por las diferentes vistas. Otro nuevo punto de análisis introducido es la observación de la formación de los hubs de neuronas. Estos hubs son grupos de neuronas que se van uniendo formando a medida que avanza la simulación. Este aspecto del análisis es aportado por la distribución force-directed. También, se han acortado los tiempos de preparación de la herramienta, antes de su uso, al haber implementado un sistema de persistencia y perfiles para las numerosas preferencias que existen en la aplicación.

Figura 8-7: La figura muestra la vista microscópica detallada en un paso donde la neurona presenta cuatro conexiones a través de su axón, tres conexiones inhibidoras y una conexión excitadora. Su concentración de calcio es inferior al equilibrio homeostático.

41

Por otro lado, se han introducido una serie de filtros y ordenaciones que han conseguido reducir considerablemente la carga visual de las representaciones y se ha mejorado la capacidad de análisis en bruto ofrecida por la aplicación.

Por último, a modo de comparativa de la optimización, se ha realizado una pequeña prueba entre la implementación en Canvas y SVG de la representación Grid de la vista Macroscópica. Esta prueba ha consistido en realizar los pasos de la simulación uno tras otro hasta agotar los 1000 pasos.

La implementación en Canvas ha arrojado un resultad de 42,88 segundos para 1000 pasos, es decir, 0,043 ms por paso. Por su parte, la implementación en SVG ha tardado 179,90 segundos, 0,18 ms por paso. Esta mejora en el rendimiento disminuye considerablemente las limitaciones en cuanto a cantidad de datos y velocidad de repuesta, quedando únicamente limitado por la capacidad de la propia visualización.

9

CONCLUSIONES Y TRABAJOS FUTUROS

En el presente capitulo se realizará una reflexión sobre la viabilidad de las soluciones de visualización web y las aportaciones a la herramienta MSPViz. Finalmente se indagará sobre posibles líneas futuras de desarrollo para esta herramienta.