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¶
- AngularJS as the web application framework
- Angular Material for UI components and styling
- SocketIO for establishing a WebSocket connection with the Willow backend
- Angular-UI Router for routing and structuring views
- ng-file-upload for the file upload component
- Handsontable for spreadsheet component
- Jasmine for unit testing
- Karma as a unit test runner
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:
- URL:
/<sessionID>
, where sessionID is a 30 character long hexadecimal stringState Name:main
Controller: MainControllerNested States/Views
- State Name:
clean
Controller: CleanController - State Name:
analyze
Controller: AnalyzeController - State Name:
visualize
Controller: VisualizeController
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