System and Software Architecture Description (SSAD) Version 1.2 i SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020 System and Software Architecture Description (SSAD) MoveIntel Web App Team 6 Guangyu Li Project Manager Yu Deng Quality Focal Point Austin Klein Operational Concept Engineer Sheng Luo Requirements Engineer Yitong Song Feasibility Analyst Sebastian Val IIV & V Xining Wang Prototyper Heng Yan Life Cycle Plan Weijie Ye Software Architect
44
Embed
System and Software Architecture Description (SSAD ...
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
System and Software Architecture Description (SSAD) Version 1.2
i SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
System and Software Architecture Description (SSAD)
MoveIntel Web App
Team 6
Guangyu Li Project Manager
Yu Deng Quality Focal Point
Austin Klein Operational Concept Engineer
Sheng Luo Requirements Engineer
Yitong Song Feasibility Analyst
Sebastian Val IIV & V
Xining Wang Prototyper
Heng Yan Life Cycle Plan
Weijie Ye Software Architect
System and Software Architecture Description (SSAD) Version 1.2
ii SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
Version History Date Author Version Changes made Rationale
09/28/20 WY 0.1 • Original template of SSAD for DCP • Initial draft of SSAD before
System and Software Architecture Description (SSAD) Version 1.2
iii SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
Table of Contents
System and Software Architecture Description (SSAD) ............................................................ i Version History ............................................................................................................................. ii Table of Contents ......................................................................................................................... iii Table of Tables ............................................................................................................................. iv Table of Figures............................................................................................................................ vi
System and Software Architecture Description (SSAD) Version 1.2
14 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
Development
Risks
None
Pre-conditions Report is successfully generated
Post-conditions Modified report is stored in database
Table 33: Typical Course of Action - Add Comments: Successful
Seq# Actor’s Action System’s Response
1 [practitioner] Clicks the view
report button
2 Redirect the actor to report page
3 Load the page with visualized data
4 [practitioner] Click the edit icon
near textbox
5 Textbox becomes editable
6 [practitioner] Write comments
and click finish
7 Modified comment is stored in database
8 Display the modified comment
Table 34: Alternate Course of Action - Add Comments: Failure
Seq# Actor’s Action System’s Response
1-6 Refer to typical course of action
7 An error message displays, indicating
saving fails
2 .1 .3 .5 .4 Generate L ine Graph
Table 35: Process Description – Generate Line Graph
Identifier UC-13 Generate Line Graph
Purpose Practitioner has an option to include the line graph in report
Requirements OC-5 Report editing
Development
Risks
None
Pre-conditions Report is successfully generated
Post-conditions Modified report is stored in database
System and Software Architecture Description (SSAD) Version 1.2
15 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
Table 36: Typical Course of Action – Generate Line Graph: Successful
Seq# Actor’s Action System’s Response
1 [practitioner] Clicks the view
report button
2 Redirect the actor to report page
3 Load the page with visualized data
4 [practitioner] Click the graph tab
5 Switch to the graph tab
6 Load the page with visualized data
2.1.3.6 Notification
2.1.3 .6 .1 Send Not i f icat ion
Table 37: Process Description – Send Notification
Identifier UC-14 Send Notifications
Purpose To send the notification to practitioner once report is completed
Requirements OC-16 Notification system
Development
Risks
Do not have enough time
Pre-conditions Report is successfully generated
Post-conditions Practitioner receives the notification
Table 38: Typical Course of Action - Send Notification: Successful
Seq# Actor’s Action System’s Response
1 Sends a notification message once
analysis algorithm finishes to backend
2 Display a message at homepage
indicating a task is complete
3 [practitioner] View the new task
Table 39: Alternate Course of Action - Send Notification: Failure
Seq# Actor’s Action System’s Response
1 Refer to typical course of action
System and Software Architecture Description (SSAD) Version 1.2
16 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
2 Notification sending fails
2.1.3.7 Setting
2.1.3 .7 .1 Change Display Set t ing
Table 40: Process Description – Change Display Setting
Identifier UC-15 Change settings
Purpose To allow practitioner modify how the data is displayed by default
Requirements OC-13 Settings panel
Development
Risks
Difficult to implement because frontend needs to change the
display structure
Pre-conditions None
Post-conditions New settings info is stored under current user
Table 41: Typical Course of Action - Change settings: Successful
Seq# Actor’s Action System’s Response
1 [Practitioner] Click the settings
menu
2 Direct the actor to settings page
3 [practitioner] Select some of the
settings button and save
4 Save the new settings for the users in
database
Table 42: Alternate Course of Action - Send Notification: Failure
Seq# Actor’s Action System’s Response
1-3 Refer to typical course of action
4 Display saving settings fails
2.1.4 Modes of Operation
The MoveIntel Movement Analysis System will operate in only one mode, as required by
MoveIntel and designed by our team, so nothing further need to be stated in modes of operation
part.
System and Software Architecture Description (SSAD) Version 1.2
17 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
2.2 System Analysis Rationale
As introduced in previous sections, we have identified 2 classes of operational stakeholders:
1. Patients: these users include people who suffers from pain or injuries or need a better
movement pose during doing sports. Our system can help patients get results faster, have a more
thorough understanding of what they need to do, and have a long-term resource to help maintain
the benefits of analysis. Overall, this can help improve their mechanics, stop injuries, and prevent
unnecessary surgeries during doing sports.
2. Practitioners: these users include people who own mall sports medicine clinics and need to
make clinical decision on their patients. From our system, they can get results in near real time,
and allows them to quickly draw insights on the data with the data visualizations, to help with
clinical decisions.
There are two components of our system which requires further explanations:
1. Algorithm: It is a movement analysis algorithm provided by MoveIntel. The video is the input
of the algorithm, and a textual data is the output. In the data, there are overall information of the
videos and the analysis of each frame. The analysis includes the key angel of each body parts and
the pose of that frame.
2. Display Settings: It is stored in the type of template. In each template, the practitioner can set
and description of each key angel of each body part, so that the report will display the description
based on the data provided by the output of the algorithm. This will make the report much easier
to read for the users.
Current System:
There is also a current service run by MoveIntel for movement analysis. However, it requires the
user to send videos to us via Dropbox and we manually input them into our server so our
algorithm can process the image and video data. Then we manually put in the JSON files into our
data visualizations (Power BI). Then we manually send the data back to our users. This is a time-
consuming process on our end. And a poor user experience for the practitioner and patient/client
who must wait up to 24 hours to see the results. This impedes the practitioner’s ability to help
their clients and limits the ability to make clinical decisions.
System and Software Architecture Description (SSAD) Version 1.2
18 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
3. Technology-Independent Model
3.1 Design Overview
3.1.1 System Structure
Figure 4: Conceptual Domain Model
System and Software Architecture Description (SSAD) Version 1.2
19 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
Figure 5: Hardware Component Class Diagram
Figure 6: Software Component Class Diagram
System and Software Architecture Description (SSAD) Version 1.2
20 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
Figure 7: Deployment Diagram
Figure 8: Web Framework Component Class Diagram
Table 37: Hardware Component Description
Hardware Component Description Networked Computer The PC or tablets owned by users of our system. They are
connected on the Internet and can access to the server held by
MoveIntel. Web Server A server that accepts the connections from the Internet and run the
frontend user interface as well as the backend business logic.
System and Software Architecture Description (SSAD) Version 1.2
21 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
AI Server A server communicates the backend web server. It runs the
algorithms, which has high performance on graphic processing as
well as AI algorithms computation. Persistence Storage A storage communicates with backend web server and works as
the database of the system. It stores textual data in database. Large File Storage A storage communicates with the frontend web server, and stores
the videos uploaded by users, which has a huge storage.
Table 38: Software Component Description
Software Component Description User interface Component This component contains all web pages in Movement Analysis
System. It is shown to all users of this system. It includes all user
interface of this system. Video Management
Component This component performs functions related to the operations of
the videos. It includes:
• upload the videos
• view the uploaded videos
• delete the videos User Management
Component This component contains two main functions. The first is the
authentication function including log in, log out and register. The
second contains user management. The user can view and edit its
profile, and the practitioner can view the profiles of his patients. Video Analysis
Component This component performs the core functions of our system. It
contains all main functionalities of the movement analysis
process. These functionalities include:
• request movement analysis
• adjust report display setting
• view the reports
• adjust frames on report
• add comments on report
• choose graph for data visualization Notification Application
Component This component includes the notification function among the
system, practitioners and patients. DMBS This is the database management system that stores all textual
data used by the system. File Storage This is the file storage system that stores all videos uploaded to
the system.
Table 39: Web Framework Component Description
Support Software Component Description
System and Software Architecture Description (SSAD) Version 1.2
22 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
Browser A browser that connects to the Movement Analysis
System web application and is responsible for displaying
web pages. Web Pages The web pages, act as user interfaces, created by the
Movement Analysis System. Web Server Component The server component receives the requests from the
Internet to the website. All business logical computations
are done. AI Server Component The server component is where the algorithms resides on.
All graphic computations and analysis are done on this
component.
3.1.2 Design Classes
3.1.2.1 Interface Classes
Figure 9: Design Class Diagram
Table 40: Design Class Description
Class Type Description
System and Software Architecture Description (SSAD) Version 1.2
23 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
LoginPage Boundary Login page.
RegisterPage Boundary Register page.
PractitionerHomePage Boundary The practitioner home that shows all the
clients of the practitioner.
PatientDetailPage Boundary Display all tasks for one patient. This is also
the home page for patient.
UploadVideoPage Boundary Upload videos and display videos uploaded
AnalyzePage Boundary Let users choose parameters and videos to do
analysis
ReportPage Boundary Shows the analysis report
EditKeyFramePage Boundary Let users correct wrong key frames.
EditContentPage Boundary Let practitioner choose what to show on
report.
GenerateGraphPage Boundary Let practitioner choose graph for data
visualization.
OverallDisplaySettingPage Boundary Let user change overall display.
ImageDisplaySettingPage Boundary Let user change image display.
NormativeValueSettingPage Boundary Let user change normative values.
NotificationViewPage Boundary Let user view the notifications
3.1.2.2 Video Upload Classes
Figure 10:Video Upload Class Diagram
Table 41: Video Upload Class Description
Class Type Description
VideoUploadController Component Contains all the management operation
including upload, delete, view videos and
related functions.
Video Entity Videos uploaded by users.
System and Software Architecture Description (SSAD) Version 1.2
24 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
3.1.2.3 User Management Classes
Figure 11: User Management Class Diagram
Table 42: User Management Class Description
Class Type Description
AuthenticationController Component Contains all authentication service including
logging in, creating account for patients and
practitioners.
PatientManagementController Component Contains all the functions for management
operated by practitioner on their patients,
including adding and deleting patients.
PatientProfile Entity Contains all information about a patient.
PractitionerProfile Entity Contains all information about a practitioner.
PatientList Entity Set of patients managed by a practitioner.
System and Software Architecture Description (SSAD) Version 1.2
25 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
3.1.2.4 Video Analysis Classes
Figure 12: Video Analysis Class Diagram
Table 43: Video Analysis Class Description
Class Type Description
DisplaySettingController Component Contains all the logical computation for
adjusting display settings related functions.
VideoAnalysisController Component Contains all functions of the management
operated by practitioner on their patients,
including adding and deleting patients.
DisplaySettingForm Entity Contains all display settings including overall
setting, image setting and normative
parameter setting.
RequestAnalysisForm Entity Contains all information submitted by
practitioner to request movement analysis.
This includes the information about patient.
video and settings.
Video Entity The videos to be analyzed.
Algorithm Entity The algorithm running the movement
analysis.
RawReport Entity Output report generated by the algorithm.
3.1.2.5 Report Management Classes
System and Software Architecture Description (SSAD) Version 1.2
26 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
Figure 13: Report Management Class Diagram
Table 44: Report Management Class Description
Class Type Description
ReportMgtController Component Contains all logical computations for report
management related functions.
Comment Entity Comments the practitioners add on the
reports.
RawReport Entity Output report generated by the algorithm.
Graph Entity Data visualization graphs
Frame Entity Frame of the video displayed on the report.
Report Entity The movement analysis report used for
clinical decision and viewed by users.
3.1.2.6 Noti fication Controller
System and Software Architecture Description (SSAD) Version 1.2
27 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
Figure 14: Notification Class Diagram
Table 45: Notification Class Description
Class Type Description
NotificationController Component Contains all logical computations for
notification related functions.
Notification Entity Notifications among system, practitioners,
and patients.
3.1.3 Process Realization
In this part, we will show the high-risk processes in our system. Each diagram shows the
implementation of the process using the design classes which has been introduced previously.
The following sequence diagram is for the Video Analysis process.
Figure 15: Video Analysis Process Sequence Diagram
The following sequence diagram is for the Report Management process.
System and Software Architecture Description (SSAD) Version 1.2
28 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
Figure 16: Report Management Process Sequence Diagram
3.2 Design Rationale
We applied a 3-layer web app architecture, which is the most advanced and popular design
nowadays. It has high capability of extension and flexibility.
The three layers of architecture is shown as follows:
1. User Interface Layer:
User Interface Component
2. Business Logic Layer:
User Management Component
Video Upload Component
Video Analysis Component
Notification Component
3. Data Access & Engine Layer:
DBMS
File Storage
AI Algorithm
The client provides the components in the data access & engine layer on AWS. What we need to
develop is the user interface layer and the business logic layer the interaction between these three
layers.
The User Interface Layer has only one component, the User Interface Component, which refers
to the frontend web pages. The frontend will show the contents to the users, make request to
System and Software Architecture Description (SSAD) Version 1.2
29 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
backend based on the operation of the users and handle the logic of web page redirection.
However, it will never do the business logic computation or interact with the database.
Additionally, it will directly with file storage for video storage.
The Business Logic Layer is the backend of our system. It is separated into 5 components, and
each of them has individual functions. They will never overlap with others’ functions because
they are broken down in a delicate way. For example, one can never upload a video through
Video Analysis Component, even though that video is very important in Video Analysis
Component. The business logic will response to requests from the frontend and interact with
DBMS for storage and AI algorithm for analysis.
The reason why we do not develop the frontend and backend together is mainly because that we
may develop mobile app version of our system in the future. If we develop them together, we
need to develop the backend again when working on the mobile version. If we develop them
separately, we can just develop the mobile app frontend and then connect with the backend we
are developing now for the mobile version. Separating the frontend and backend offers much
more capability of extension.
System and Software Architecture Description (SSAD) Version 1.2
30 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
4. Technology-Specific System Design
4.1 Design Overview
4.1.1 System Structure
4.1.1.1 Hardware Component Class
The hardware we select are mainly from AWS. We select the most suitable server/storage from
AWS for each hardware component for better performance and lower cost.
Figure 17: Hardware Component Class Diagram
Table 46: Hardware Component Description
Hardware Component Description User Terminal The PC/tablet which can access to the Internet through browser.
Mobile terminal may be included later. AWS t2.micro Acts as web server.
T2 instances are a low-cost, general purpose instance type that
provides a baseline level of CPU performance with the ability to
burst above the baseline when needed.
System and Software Architecture Description (SSAD) Version 1.2
31 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
It runs both the frontend and backend server of our project. It can
satisfy all we need from a web server.
“micro” refers to a relatively lightweight server in t2. AWS g3.4xlarge Acts as AI server.
g3 instances are the latest generation of Amazon EC2 GPU
graphics instances that deliver a powerful combination of CPU,
host memory, and GPU capacity.
It runs the algorithm provided by MoveIntel which requires high-
performance GPU computation. AWS DynamoDB Acts as persistence storage (database).
DynamoDB is a key-value and document database that delivers
low latency performance at any scale.
It is a kind of NoSQL, easy to implement and manage textual data
in our system, and better for further extension. AWS S3 Acts as large file (video) storage.
S3 is an object storage service with high data availability, security
and performance.
It can store videos easily, securely and last for a long term.
4.1.1.2 Frontend React Structure
The framework we select for frontend is React, and we also select Ant Design as React UI
library.
The following figure is the structure of our React project. In the figure, all the main web pages of
our system are in /src/page directory. Each web page is a folder which contains three files:
index.tsx, model.js and style.less. We can just inspect on these folders representing web pages
for further description.
System and Software Architecture Description (SSAD) Version 1.2
32 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
Figure 18: Frontend React Structure Diagram
Table 47: Frontend React Structure Description
Frontend Component Description uploadVideo Refers to UploadVideoPage in software component architecture. analyze Refers to AnalyzePage in software component architecture notification Refers to NotificationPage in software component architecture Report Refers to ReportPage in software component architecture generateGraph Refers to GenerateGraphPage in software component architecture editFrame Refers to EditFramePage in software component architecture editComment Refers to EditCommentPage in software component architecture overallSettings Refers to OverallSettingPage in software component architecture normativeParaSetting Refers to NormativeParaPage in software component architecture imageSettings Refers to ImageSettingPage in software component architecture register Refers to RegisterPage in software component architecture patientDetail Refers to PatientDetailPage in software component architecture practitionerHome Refers to PractitionerHomePage in software component
architecture login Refers to LoginPage in software component architecture
System and Software Architecture Description (SSAD) Version 1.2
33 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
4.1.1.3 Backend Flask & Database Structure
In this part, we will discuss the structure the backend and database structure, which is the regular
web app backend structure. Flask is adopted as the backend framework and AWS DynamoDB is
adopted as the database. The .py files are from Flask and table elements are from database.
Figure 19: Backend Structure & Database Diagram
Table 48: Backend Structure Description
Backend Component Description user_management.py Refers to UserMgtController in software component
architecture. authentication.py Refers to AuthenticationController in software component
architecture. video_analysis.py Refers to VideoAnalysisController in software component
architecture. display_setting.py Refers to DisplaySettingController in software component
architecture. report_management.py Refers to ReportMgtController in software component
architecture. video_upload.py Refers to VideoUploadController in software component
architecture.
System and Software Architecture Description (SSAD) Version 1.2
34 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
notification.py Refers to NotificationController in software component
architecture.
Table 49: Database Description
Table Description user Textual data of user information including patients and
practitioners process Textual data of the analysis process requested in the
system video Textual data and meta data of the videos uploaded setting Textual data of the display setting stored by the
practitioners notification Textual data of notifications sent in the system report Textual data of all reports in the system
4.1.1.4 NDI Component Structure
In this part, we focus on the NDIs we adopt in our system. In the hardware component part, we
have introduced several NDIs from AWS. In this part, we will continuously introduce other
NDIs we adopted which is important to our system.
Figure 20: NDI Component Diagram (Besides Hardware)
System and Software Architecture Description (SSAD) Version 1.2
35 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
Table 50: NDI Component Description
Support Software Component Description React A frontend JavaScript library (framework) for building
interfaces or UI components. The user interfaces including
the webpage and the logic relationship between them are
done by React. The request to backend function should
also be initialized by React. Ant Design A React UI library with a set of high-quality React
components. We can have feasible and pretty components
for our user interface from Ant Design. Furthermore, it
also provides a structure for a complete website, and we
can develop on it directly. Flask A backend web framework written in Python. It will
response to the request from the frontend, interact with the
database for textual data, run the business logic of our
system and so on. AWS Lambda An AWS service which let user run code without
provisioning or managing servers. For the algorithms, we
can just use AWS Lambda to run the code to process the
algorithms set in AWS g3. Algorithm The movement analysis algorithms on videos built by
MoveIntel and set in AWS g3.
4.1.2 Process Realization
In this part, we will show the high-risk processes in our system in the view of technique. We
have adopted several techniques and we will show the interaction among them in sequence.
The following sequence diagram is for the Video Analysis process.
System and Software Architecture Description (SSAD) Version 1.2
36 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
Figure 21: Video Analysis Process Sequence Diagram
4.2 Design Rationale
As mentioned in Section 3.2, we run a 3-layer architecture for our web app, we separate the
server as designed.
User Interface Layer
Frontend ----- AWS t2.micro Server one
Business Logic Layer
Backend ----- AWS t2.micro Server two
Data Access & Engine Layer
Database ----- AWS DynamoDB
Algorithm ----- AWS g3
Video Storage ----- AWS S3
Table 51: Connections Between Servers
Server 1 Server 2 Transferring info
Frontend Backend All request and response of the system
Frontend Video Storage Videos uploaded
Backend Algorithms Movement Analysis request and result
Backend Database Textual data transfer
Video Storage Algorithms Retrieve the video for analysis
System and Software Architecture Description (SSAD) Version 1.2
37 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
Figure 22: 3-layer Server Structure
System and Software Architecture Description (SSAD) Version 1.2
38 SSAD_DCP_F20a_V1.2 Version Date: 10/22/2020
5. Architectural Styles, Patterns and
Frameworks
Table 52: Architectural Styles, Patterns, and Frameworks