AngularJS frontend

Language: JavaScript

The web appplication that serves as the frontend for Willow, presenting the user with a graphical interface for performing data operations. It is important to note that the Angular application serves solely as a frontend, communicating requests and receiving data from the backend.

Dependencies

Classes

The AngularJS framework enforces a Model-View-Controller (MVC) architecture to achieve separation of concerns during development. HTML files serve as views and JavaScript classes are used to encapsulate models and define controllers.

AngularJS defines three categories of classes:

  • controllers which serve as the Controllers in the MVC paradigm
  • directives which are used to extend HTML and manipulate the DOM the Angular way by defining HTML elements, tags or attributes
  • providers which are singletons that provide supporting services to controllers and directives.

Router

Our Angular application uses Angular-UIRouter to maange the global state of the application and route the user to different views (managed by controllers) depending on the state.

The state of the application gets reflected in the URL, thus allowing users to, say, navigating to /<sessionID>, which causes Angular-UIRouter to initialize and present the correct view and controller.

The following states are defined:

Views

Angular views are partial HTML files, referred to as ‘partials’. Partials are regular HTML files which contain custom Angular tags and attributes that enable Angular’s powerful two-way data binding and scope features.

Controllers

  • UploadController

    Manages the Upload screen view for the upload state, before a session has been started.

    Responsible for ``POST``ing CSV, JSON and Excel files to the /upload endpoint for the Flask application. After a successful upload, it redirects to the MainController view through the router.

  • MainController

    Manages the tabbed main screen view for the main state, after a session has been successfully started.

    Responsible for initializing the socketConnection and session providers, which are critical to the Angular application.

    MainController also manages the application toolbar, and is thus responsible for requesting the ‘undo’ operation over WebSocket through analysis provider as well as the CSV download and JSON download operations through HTTP GET.

  • CleanController

    Manages the Transform tab view under the main state.

    Responsible for displaying the data in a spreadsheet format using Handsontable and the Transform sidebar, which is composed of directives that request all data transformation operations from the Willow backend.

  • AnalyzeController

    Manages the Analyze tab view under the main state.

    Responsible for displaying requested statistics computed by the Willow backend on the columns specified by the user.

  • Visualizecontroller

    Manages the Visualize tab view under the main state.

    Responsible for displaying requested data visualizations generated by the Willow backend.

Directives

  • analysisColumn

    Element directive used with AnalyzeController.

    Requests ‘analysis’ operation over WebSocket through analysis provider on a specified column. Displays the computed statistics in a tabular layout, and automatically requests new analysis and updates the view when the dataset changes.

  • clean.inspectorBar

    Element directive used with CleanController

    Displays important statisical metrics on the column the user has currently selected in the data table. Requests ‘analysis’ operation over WebSocket through analysis provider.

  • columnPicker

    Element directive used in multiple controllers and directives.

    Displays a form element for choosing a column in the data set by text entry with autocomplete features.

The following directives are used for the sidebar managed by CleanController. They are context-aware with respect to the user’s selection in the data table, meaning that they show themselves only when appropriate.

  • clean.sidebar.inspect

    Element directive for the entire Inspect tab, allowing the user to inspect the currently selected column in the data table.

    Requests ‘analysis’ operation over WebSocket through analysis provider.

  • clean.sidebar.columnOperations

    Element directive for “Column Operations” card in the Operate tab.

    Requests ‘splitColumn’ and ‘combineColumns’ operations over WebSocket through session provider.

  • clean.sidebar.dangerZone

    Element directive for the “Highway to the Danger Zone” card in the Operate tab, providing tools for command execution.

    Requests ‘executeCommand’ operation over WebSocket through session provider.

  • clean.sidebar.discretization

    Element directive for the “Discretization & Quantiling” card in the Operate tab

    Requests ‘discretize’ operation over WebSocket through session provider.

  • clean.sidebar.editCell

    Element directive for the “Edit Cell” card in the View tab

    Requests ‘newCellValue’ operation over WebSocket through session provider.

  • clean.sidebar.editColumn*

    Element directive for the “Edit Column” card in the View tab

    Requests ‘renameColumn’, ‘changeColumnDataType’ and ‘deleteColumns’ operations over WebSocket through session provider.

  • clean.sidebar.editRow*

    Element directive for the “Edit Row” card in the View tab

    Requests ‘deleteRows’ operation over WebSocket through session provider.

  • clean.sidebar.featureEncoding*

    Element directive for the “Feature Encoding” card in the Operate tab

    Requests ‘generateDummies’ operation over WebSocket through session provider.

  • clean.sidebar.featureScaling

    Element directive for the “Feature Scaling” card in the Operate tab

    Requests ‘standardize’ and ‘normalize’ operations over WebSocket through session provider.

  • clean.sidebar.filter

    Element directive for the “Filter” card in the View tab.

    Requests filtered ‘data’ and ‘metadata’ operations over WebSocket through CleanController.

  • clean.sidebar.findReplace

    Element directive for the “Find & Replace” card in the Operate tab.

    Requests ‘findReplace’ operation over WebSocket through session provider.

  • clean.sidebar.missingValues

    Element directive for the “Missing Data” card in the Operate tab.

    Requests ‘interpolate’, ‘fillWithAverage’ and ‘fillWithCustomValue’ operations over WebSocket through session provider.

  • clean.sidebar.search

    Element directive for the “Search” card in the View tab

    Requests searched ‘data’ and ‘metadata’ operations over WebSocket through CleanController.

  • clean.sidebar.sort

    Element directive for the “Sort” card in the View tab

    Requests sorted ‘data’ and ‘metadata’ operations over WebSocket through CleanController.

Providers

  • socketConnection

    Serves as a façade to the SocketIO library, providing functions for sending requests to the Willow backend using the WebSocket API. Note that the provider makes extensive use of callbacks in order to notify callers of the results of their requested operations.

  • session

    Encapsulates the current session of the client, maintaining data such as the session ID and a copy of the latest metadata of the dataset. The provider also serves as a proxy to the socketConnection provider, handling all data laoding, transformation and visualization requests to the Willow backend. Note that the provider makes extensive use of callbacks in order to notify callers of the results of their requested operations. Provides a publisher/subscriber scheme for listening to changes in the dataset.

  • analysis

    Proxies all data analysis requests to the session provider provides caching functionality for improved performance. Provides a publisher/subscriber scheme for listening to changes in analyses resulting from changes in the dataset.

  • dialogs

    Provides universal functions for displaying error dialogs