SOFIA: Dynamic and reconfigurable visualisation environment

/in /by

SOFIA implements dynamic presentations and dashboards, customized to each specific need, enabled by dynamically designing Database schemas in parallel with visualization and editing of data, but most importantly by enabling a myriad of possibilities of data presentation by combining in a variety of ways, Menus, Forms, Lists, Charts, Graphs, Access controls, Reports and Dashboards. Access control configures the access to different resources per User Role, ensuring high level of security and allowing requirement-oriented data presentation customized to any specific need.

​A rich UI specially designed for the mobile generation of users, provides a true mobile user experience and eases navigation and data exploration.

SOFIA comprises :

  1. A) Author Application which dynamically configures the presentation of the data, the menus, graphs, and user access and
  2. B) WebApplication which visualizes the data in various configurations and graphics. Both applications are enabled by JAVA Springboot, Angular, Redis, Mysql Databases and Docker technologies but also offers data editing on the fly.
Author’s Application

The ‘Author’s Application dynamically configures the entire application by logically separating the configuration functionalities in five layers starting from the bottom layer, database schema design to the top layer, users and roles.

Let’s have a look at a ‘hello world’ example application: Invoicing for a retail shop.

Layer 1: Table Designer. The first step is to create the data structure and their relations for example Product, Invoice & Customer database tables, that are needed for the Invoicing component.

Layer 2: Component Designer: is part of the Author application and helps design the Invoicing Component as a new logical structure, composed of group of Tables and Views together in a logical way, to represent the business logic of the application. For example, the Invoicing Component includes the three tables Product, Invoice & Customer linking them together by the their foreign keys Invoice ID, and  Customer ID.

Layer 3: Form Designer, is part of the Author’s application and enables to create an Invoicing form by using the invoicing service structure. The forms define how the data will be presented, for example in lists, graphs, charts, etc, and the options to modify it or not, user rights, etc.  Custom CSS and Javascript scripts are applicable.

Dashboard, Chart, Graphs, List Designers, enable to define the design the required data representations as required to compose the presentation of the form. For example, a list of history invoices is created using the List Designer. Dynamic filters, user rights, custom CSS and Javascript scripts are applicable.

Layer 4: Menu Designer. In similar way, the menus are created from the Menu Designer of the Author’s application. A menu defines the sidebar and header menu buttons as well as the navigation on the Web Application.

The service supports definition of multiple languages by a multilingual menu options tree with custom descriptions and Icons with a robust navigation system that allows to navigate to any part of the application. Finally, access polymorphism is possible by assigning different sidebar & header menus to each user, thus, role based visualisations.

SOFIA allows to configure a variety of analysis and visualization forms for statistics, charts & dashboards, configurable data imports from excel files, dynamic reports for exporting pdf, word & html documents and many more.