Metric View - softvis-research/VISAP GitHub Wiki

Showcase

Functional Description

The Metric View feature allows a user to highlight entities, represented by buildings and districts, based on metrics that were extracted on them. The table below shows which metrics are currently available for each entity type.

Metrics that should be applied to the visualization can be defined in metric layers, as seen at the bottom of the screenshot in the Showcase section. Each layer contains a metric, an upper and lower bound for that metric, and a mapping to a visual effect. Based on the type of visual effect, additional parameters for scale and/or period may need to be specified.

The layer above applies a visual effect on all entities that have an amount of Dynamic Statements from 1 to 5. The visual effect mapped to this selection is called Pulsation. One pulsation period lasts for 1000 ms and is given a scale factor of 3, so that the entities this layer applies to will up to triple in size.

By pressing the Execute button, all currently active layers will be applied to the visualization, meaning that all entities that match any of the layers will be visually highlighted in the specified way.

Layers can be removed one at a time by pressing the X to their very right. All layers can also be removed by pressing the Reset button.

The Metric View feature comes with three pre-configured views which can be selected from the Select View dropdown menu. In addition, a current selection of metric layers can be downloaded as a text file using the Download View Config button. This text file can be added as a pre-configured view by pasting it into the controllerConfig of the file ui/scripts/Metric/MetricController.js.

Technical Description

The implementation of this feature required changes in both the generator and the UI. In the generator, the new metrics were added in the files generator/src/main/java/org/visap/generator/abap/AMetaDataMap.java and generator/src/main/java/org/visap/generator/abap/enums/SAPNodeProperties.java to write extracted metrics of the input CSV files to the generated metaData.json file.

Required jQWidgets libraries and styles were imported in ui/index.html. The most notable changes were made in the ui/scripts/Metric folder, where many new files have been created, including a new controller MetricController.js containing the feature logic, a DOM helper DomHelper.js for building the UI, and MetricLayer.js for modelling individual layers.

Since most metrics do not apply to all entity types, a mapping of applicability has been added to the ui/scripts/Model.js file.

Lastly, a new setup has been created under ui/setups/metrics.js to show off the Metric View feature.

New events

No new events have been added in ui/scripts/Events.js. However, the MetricController binds click events to the new buttons the metrics feature brings with it, as well as a change event that is fired whenever the view is changed in the dropdown menu.

Configuration

No new configuration was added in the generator. In the UI, the controller config can be used to specify the available metrics, mappings, and views. By default, all metrics and mappings are enabled. They can be limited by specifying them in the controllers array of the setup like so:

{
    name: "metricController",
    metrics: [
        metrics.numberOfStatements,
        metrics.dateOfCreation,
    ],
    mappings: [
        mappings.color,
        mappings.colorGradient,
    ],
},

In this example, the only available metrics will be numberOfStatements and dateOfCreation, and the only available mappings will be color and colorGradient.

Adding New Metrics Procedure

1. In the Generator

• Add the attribute name as it appears in the graph database to the SAPNodeProperties class.
• Map the desired names in the JSON file to the attributes from SAPNodeProperties along with their output formats in the AMetaDataMap class. This ensures that the frontend works only with the names from the JSON files.

2. In the UI

• scripts/Model.js In the setMetrics method, specify the names of the new attributes in the list.
• Metric/Constants.js Register the new properties introduced in the previous step with their desired names in a drop-down menu.
• Metric/DomHelper.js In the metricSelectionDropDownSelected method, specify the type of input expected in the From and To text fields for each property.
• Metric/MetricController.js In the controllerConfig object, under the metrics property, repeat the new attributes to ensure that they are not filtered out.

Test Case

Access the Metric View through the metrics setup, and ensure that the model contains metrics data by executing the LoaderStep and AFrameExporterStep on appropriate CSV input files. You can find an example file set under generator/input/metricViewExample.