Functional Design
Department of Innovation & Technology
Submitted By
Electronic Knowledge Interchange
May, 2015
# Table of Contents
- Revision History
- Background and Overview
- System Access
- Application Home/Landing Page
- Queries
- Administration
- System Help
| Revision | Date | Author | Notes |
|---|---|---|---|
| 1.0 | 07/28/2015 | EKI | Initial Version |
The signatures below indicate that the City of Chicago concurs with the functional design described in this document prepared by Electronic Knowledge Interchange.
_____________________________________________________
Department of Innovation & Technology Date
OpenGrid is an enterprise geographical information system. Developed to support situational awareness, incident monitoring and responses, historical data retrieval, and real-time advanced analytics. OpenGrid utilizes MongoDB, a NoSQL database optimized to handle big spatially-enabled data. From the application layer, users may query data by type, time and distance from a point or within a boundary, while retrieving real-time or historical data. Queries and data flow through a web service to ensure data security.
OpenGrid (1.0) has a HTML/JavaScript interface modernized to support usage on mobile devices and terminals in public safety vehicles. The user interface is clean, intuitive, and again, translates well to mobile devices.
This document provides the detailed Functional Design for the OpenGrid 1.0 application. This design document is one of the deliverables in the Design Phase of the project and is the basis for application low-level design.
OpenGrid has to be customized to an end user security systems in order to gain access.
The 5 roles below will be used to restrict user access to certain functions as shown in the table below. This is the same way WindyGrid’s user roles are structured today.
| Role Name | Privileges | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Add/Remove Users to AD Group | View Real-time Data | View Non/Near-Real-time Data | Subscribe to Group | Add Group | Modify Group | Add/Remove Group Owner | Modify User Email | Manage Email Alerts | Manage Pending Group Members | Add/Remove Group Member | |
| Administrator | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
| Group Owner | √ | √ | √ | √ | |||||||
| Full-access - Real-time (a.k.a. Level 1 Real-time) | √ | √ | |||||||||
| Full-access – Reporting (a.k.a. Level 1 - Reporting) | √ | √ |
When the application is initially opened on the browser and no active OpenGrid 1.0 session exists, a login window will be displayed. See Figure 1 below.
The Login button will be disabled until both User Name and Password have
been entered.
When the Login button is clicked, the user credentials
will be validated by the system.
If the login failed, an error message will be displayed saying “The login failed due to invalid username/password or you do not have permissions to access the system.” The system will allow the user to enter the user name or password again. (Figure 2)
If the login is successful, the main application page is displayed. See Section 4.1 for more details.
When there has been no server activity on OpenGrid application after 15 minutes, the user will be logged out automatically and a message similar to the one on Figure 3 below will be displayed.
The main application page is shown below.
Figure 4. OpenGrid 1.0 Landing Page
Figure 4A. Mobile OpenGrid 1.0 Main Page
| Page Element # | Element Name/Description |
|---|---|
|
|
Quick Search box; clicking on the quick hint icon will display a “cheat sheet” with all the available commands and syntax. |
|
|
Command bar; “Clear Data” will clear the map (enabled only if there is data on the map/table) and table view; “Advanced Search” will bring up the search panel and “Manage”, the administration screens. The Manage button is only visible to administrators and group managers. |
|
|
User panel, displaying the name of the currently logged in user with a dropdown arrow to the right of the username for logging out. |
|
|
Zoom-in/out controls 
|
|
|
Reset Map View and Area Zoom 
|
|
|
Zoom specification Control  Full-Screen control  Geo-location control  .
|
|
|
Layer control  will allow users to switch between:Street View Aerial View And display list of available layers. |
|
|
Measurement Tools |
|
|
Expandable table view panel |
|
|
Map attribution; this will display a link for any copyright information, terms of use, etc. |
|
|
Main map display |
The default map view will display the street basemap layer. Using the map layer controls, an aerial view can be selected as well. See figure below.
Figure 5. Selecting Aerial View from the Layer Control
#### LayersIn addition to the aerial view, the list of layers will be made available via the Layer Control. The list will be built dynamically based on what is available from the Map Service. Figure 5 above shows the list of available layers as part of the Layer Control.
A dynamic legend will be displayed to indicate what the objects and icons on the map represent, whenever one or more layers are selected. A sample dynamic legend can also be seen in Figure 5 above.
The initial map zoom level is configurable (OpenGrid has been configured to display the entire City Of Chicago by default.). Using the Map Navigation Controls, the user should be able to zoom in/out, pan in any direction and reset the zoom level to default. Once the map zoom has been customized by the user, it will not reset to the default zoom until the user logs out and logs back in or the Reset Zoom icon is clicked.
The user should also be able to zoom in on a specific rectangular area by using the Zoom-In navigation tool. The Current Location tool can be used to zoom where the user is currently located by using the Location Services on the mobile device or laptop/workstation, if available and with the user’s permission.
By Clicking on the Measurement Icon, measurement tools can be turned on to enable measurement of the following:
-
Distance between points
-
Distance around a point
Figure 6. Measuring an Area Using Polygon Tool
A Quick Search box can be used to perform common searches that will support the following commands/inputs:
<tr>
<td>Latitude and Longitude</td> <TD>Displays a marker to show location of latitude and longitude entered</TD> <TD><latitude>, <longitude></TD> <TD>41.8270, -87.6423</TD> <TD>N/A; simply displayed as marker on the map</TD>
</tr>
<tr>
<td>Place Name</td> <TD>Shows location of the place specified</TD> <TD><name of place></TD> <TD>Daley Center</TD> <TD>N/A; simply displayed as marker on the map</TD>
</tr>
<tr>
<td>Tweets</td> <TD>Displays recent tweets matching keyword, if provided. Keyword can be a bareword or a double-quoted set of words.</TD> <TD>tweet <keyword></TD> <TD>tweet</TD> <TD><ul><li>Date</li> <li>Screen Name</li> <li>Text</li> <li>City</li></ul></TD>
</tr>
<tr>
<td>Weather</td> <TD>Displays a point in the middle of the map showing weather information for the zip code</TD> <TD>weather <zip code></TD> <TD>weather 60601</TD> <TD><ul><li>Temperature in (Fahrenheit)</li> <li>Wind</li> <li>Conditions</li> <li>Humidity</li> <li>Forecast</li></ul></TD>
</tr>
| Query Type | Description | Command Syntax | Sample | Display Columns on Search Result |
|---|---|---|---|---|
| Address | Finds the specified address using the Map/GIS Service | <number><direction><streetname> | 50 W. Washington | N/A; simply displayed as marker on the map |
The search results for the above type of search will appear as either
points on the map or as custom icons, when applicable (a bus icon for a
bus search, for example). Quick search results will also be displayed in
the grid section as rows of data. In general, any type of query whether
performed via Quick search or Advanced Search will display on both the
map and the grid.
In some cases, there will only be one row of data on
the grid (weather or bus ID search, for example). Quick search results
can be cleared/reset by clicking on the Clear Data button from the
command bar. This action will also stop all data auto-refresh
activities, if any, happening in the background. See Figure 7 below.
Quick searches for the following datasets will be automatically refreshed every set interval depending on the type of data:
- Tweets (30 seconds)
Clearing Quick Search Results
Quick Search results can be cleared/reset by clicking on the Clear Data button from the command bar. This action will also stop all data auto-refresh activities, if any, happening in the background.
Figure 7. Quick Search on Tweets
Popups of tweets will have a link that, when clicked, will open in new browser window so users can see tweeted content, such as articles or photos of a location.
Advanced Search is used to narrow searches by applying a series of different filters. A user has the ability to enter a combination of search criteria such as selecting and/or creating one or more datasets, adding rule/s or group/s to a dataset.
The user has the ability to customize the color, size and opacity of the resulting points.
To further filter the search results, a geo-spatial filter can be specified by drawing a polygon or selecting one of the pre-defined boundaries by utilizing the “Additional/Geo-spatial Filters feature (see images below).
 Datasets and Geo Spatial Features in Advanced Search Screen
On the advanced search screen, the user must be able to specify if the query will be auto-refreshed and by what interval in seconds (minimum of 20 seconds, maximum of 600 seconds or 10 minutes.).
When a query is submitted, the application will display a message when the query execution times out. It will also display a message when the search service returns no data.
Figure 8. Advanced Search Screen
Sometimes we find that users want to differentiate the data point colors within a dataset. Using food establishments as an example, a user can search for restaurants and food trucks in Chicago, each datatype is listed under the single dataset, Business Licenses. A user may want to represent each type on a map as two different colors.
What should a user do since there is a one color limitation per Add a Dataset setup?
Simple, just add the Business Licenses dataset twice and set one with the filter License_description = “Retail Food Establishment” and the other License_description =“Mobile Food License”, and assign each of them a different color.
In the example below, it shows how the search was applied and how each data type are represented on the grid... Retail Food Establishments are red and Mobile Food Licenses are blue.
After search criteria has been entered, the user will have the option to save the query by clicking on the Save button. The user can type in a preferred name for the query (a default name of “My Query <mm/dd/yyyy>” will be used but can be replaced). The user will also be given the option to save the query using an existing name (effectively updating the definition of the old query) on the same window. The Cancel button will cancel the save action.
Figure 9. Saved Queries Screen
All previously saved queries are accessible from the Manage
Queries tab on the main. When this option is selected, a list of the
user’s Saved Queries is displayed where users can submit/run, share or
delete the query. The name of the query is an active link that will open
on the “Build Query” tab when clicked. Queries shared with the user (or
groups that the user belongs to) are indicated by the Group icon and
cannot be edited, re-shared or deleted.
Running a saved query will invoke the query and used the user options
saved along with the search criteria. See also Section 4.3.2 on what
user options are saved.
Recently saved queries can also be opened from the Manage Queries link located within the Advanced Search Panel.
Selecting a specific query from the Load Saved Query dropdown will load
the saved query. At this point the user can choose to submit the query
as-is or update the query definition to add more datasets or change the
query filter and save it as a query under a different name.
Query results will be limited to X rows (application-wide configuration, to be determined based on performance testing) per data type. If there are results more than X rows, a message is displayed asking the user to refine the search criteria.
For any spatially relevant dataset, the resulting data points will be
displayed as dot/circles on the map, with the user-specified size, color
and opacity. Details on the data point will be displayed as the point is
clicked. Refer to figure below.
The user will be able to export the map (as displayed, including points,
currently selected layers and dynamic legend) as a PDF file by clicking
on Export button on the table view panel, and selecting PDF format
(Figure 11).
A tabular view will be displayed for each result set. The columns displayed will vary by the type of dataset selected. The table columns will be resizable, sortable and can be re-arranged to user’s liking. If there are multiple datasets selected, the tab corresponding to the selected dataset will use the same color as the data point color as selected by the user. (This will help distinguish one dataset from another of the same type, in cases where more than 1 dataset of the same type is included in the query.)
The user will be able to export the tabular data into a CSV, Ms Excel or PDF file by clicking on the Export button and selecting the respective format.
Figure 11. Sample Tabular View of Data
A heat map can be generated on-the-fly based on the data points currently displayed on the map by clicking on the View Heat Map button. The heat map will be based on the density of the data points.
  Figure 12. Heat map View of Data
A user must be able to generate a graph showing the data grouped using a column that the user has selected. The graph can be exported.
 Figure 13. 311 Graph Grouped by Status
A Tile Map can be generated on-the-fly based on the data currently displayed in the table by clicking on the Tile Map button. The data will be grouped by the selected predefined boundary from the dropdown (as listed on Section 3.3.2) and will be based on the density of the data points. See Figure 11 above.
Advanced Search results can be cleared/reset by clicking on the Clear Data tab from the command bar. This action will also stop all data auto-refresh activities happening in the background.
Administration screens can be accessed by clicking on the “Manage” button on the application command bar. The “Manage” button will be made visible only to Group Owners and Administrators.
A Group Owner will be able to perform the following tasks:
- Add/remove group members
- Add/Remove users to Active Directory group
- Add a OpenGrid group
- Modify an existing OpenGrid group
- Add/remove group owner
In the Manage tab, the user administrator should be able to do one of the following operations:
- Add a new user - Update an existing user - Remove a user to/from an OpenGrid group (Security Group).From the Manage panel, the Manage Users option is selected; displaying a list of all users and user information (User ID, First Name, Last Name and Groups).
Figure 15. Manager Users Screen
The administrator must be able to create a OpenGrid group and manage a group’s membership.
On the group administration screen, the administrator should also be able to:
- Add a new group
- Update an existing group
- Add one or more owners to a group
Figure 16. Manage Groups Screen
The System Help will cover a list of topics as the current
OpenGrid application. Relevant screens will be refreshed from the
OpenGrid 1.0.