UI

Overview:

The UI is a modern Angular application. It's tracks the latest version of Angular which is constantly evolving.

Locally you can run a dev server that will automatically detect changes and refresh your browser. There is a production build to run to package the deployable app.

Notable Files:

• GraphComponent:

  This class encapsulated all the view related logic to display the filters, results, and their mapping connections. This is the primary view of the app.

  This class also contains the logic for generating the SVG graph.

• GraphTab:

  This class encapsulates a tree for a regulation. It contains the nodes, mappings, and any other metadata for a regulation.

  The GraphTabs are stored as a parent child relationship so there are 2 for each regulation added. The parent is the tab and tree in the filter, and the child is the tab and tree in the graph.

• GraphService:

  This class accesses the raw regulation data and maintains persistent state for the application.

• GraphFilter:

  This class encapsulates all the logic related to filtering trees.

  Trees can be filtered directly, by checking nodes in the parent filter tree. Or indirectly, by being linked to another tree and filtering based on visible connections to that tree.

• Searchable:

  This class encapsulates the search box functionality including fuzzy search and highlighting. It's possible to create more than one searchable so you could search the same data from different views simultaneously.

• *DialogComponent:

  These present dismissable messages to the user.

• SideNav:

  Sidenav is contained in the AppComponent.

Filter

• Todo, how does the filter work?

Search

• Todo, how does the search work?

Copyright (c) Data Protection Mapping Project. All rights reserved. Licensed under the MIT License.