Logo
ScienceStack
Table of Contents
Fetching ...
Sign In

HTML Structure Exploration in 3D Software Cities

Malte Hansen, David Moreno-Lumbreras, Wilhelm Hasselbring

TL;DR

This work addresses integrating web-UI analysis into a software city visualization by extending ExplorViz with an embedded web view and a 3D DOM visualization of HTML in same-origin contexts. The approach enables joint exploration of runtime behavior and HTML structure within a unified visualization, using a live-trace backbone and a layered, texture-enabled DOM representation. A preliminary evaluation with six participants indicates the embedded view is convenient for short interactions and the HTML visualization supports understanding DOM structure, while highlighting usability and performance limitations. These contributions advance end-to-end visualization of modern web-based software systems and suggest future directions such as live HTML editing and VR integration for broader applicability and education. The work demonstrates how coupling runtime analysis with structural HTML visualization can enhance program comprehension in web-centric software landscapes.

Abstract

Software visualization, which uses data from dynamic program analysis, can help to explore and understand the behavior of software systems. It is common that large software systems offer a web interface for user interaction. Usually, available web interfaces are not regarded in software visualization tools. This paper introduces additions to the web-based live tracing software visualization tool ExplorViz: We add an embedded web view for instrumented applications in the 3D visualization to ease interaction with the given applications and enable the exploration of the thereby displayed HTML content. Namely, the Document Object Model (DOM) is visualized via a three-dimensional representation of the HTML structure in same-origin contexts. Our visualization approach is evaluated in a preliminary user study. The study results give insights into the potential use cases, benefits, and shortcomings of our implemented approach. Based on our study results, we propose directions for further research to support the visual exploration of web interfaces and explore use cases for the combined visualization of software cities and HTML structure. Video URL: https://youtu.be/wBWKlbvzOOE

HTML Structure Exploration in 3D Software Cities

TL;DR

This work addresses integrating web-UI analysis into a software city visualization by extending ExplorViz with an embedded web view and a 3D DOM visualization of HTML in same-origin contexts. The approach enables joint exploration of runtime behavior and HTML structure within a unified visualization, using a live-trace backbone and a layered, texture-enabled DOM representation. A preliminary evaluation with six participants indicates the embedded view is convenient for short interactions and the HTML visualization supports understanding DOM structure, while highlighting usability and performance limitations. These contributions advance end-to-end visualization of modern web-based software systems and suggest future directions such as live HTML editing and VR integration for broader applicability and education. The work demonstrates how coupling runtime analysis with structural HTML visualization can enhance program comprehension in web-centric software landscapes.

Abstract

Software visualization, which uses data from dynamic program analysis, can help to explore and understand the behavior of software systems. It is common that large software systems offer a web interface for user interaction. Usually, available web interfaces are not regarded in software visualization tools. This paper introduces additions to the web-based live tracing software visualization tool ExplorViz: We add an embedded web view for instrumented applications in the 3D visualization to ease interaction with the given applications and enable the exploration of the thereby displayed HTML content. Namely, the Document Object Model (DOM) is visualized via a three-dimensional representation of the HTML structure in same-origin contexts. Our visualization approach is evaluated in a preliminary user study. The study results give insights into the potential use cases, benefits, and shortcomings of our implemented approach. Based on our study results, we propose directions for further research to support the visual exploration of web interfaces and explore use cases for the combined visualization of software cities and HTML structure. Video URL: https://youtu.be/wBWKlbvzOOE

Paper Structure

This paper contains 6 sections, 4 figures.

Table of Contents

  1. Introduction
  2. Related Work
  3. Embedded Web View
  4. HTML Visualization
  5. Preliminary Evaluation
  6. Conclusions and Future Work

Figures (4)

  • Figure 1: Software city of the dynamically instrumented PetClinic with opened embedded browser. User input on the embedded iframe leads to the generation of trace data which is reflected in the software city.
  • Figure 2: A locally accessible HTML document (compare to Moreno-Lumbreras_2024) is displayed in the embedded web view (left) and augmented with the visualization of its structure (right). Leaf nodes of the DOM are given a rendered texture while other nodes are colored according to their similarity.
  • Figure 3: Study setup where the internal laptop monitor displays the digital survey and the external monitor displays the visualization of the ExplorViz user service and the HTML visualization of the landscape selection screen in ExplorViz.
  • Figure 4: Analysis of the ExplorViz front-end. By disabling viewport cropping, the actual width of the timeline and a large HTML element by plotly.js (in red) is visualized.