1. Implementation

1.1. Introduction:

This document provides a brief overview of the new heart vue.js app. The app will be built using Vue3. Basically, it will cover main components and data files of the application. There might be some other small components (to facilitate reusability) that I may not mention here, as this document is primarily aimed to show the way the data will be saved and the flow of information (called as props in vue.js) among main components.

Terminologies: Main tabs like (Attack, Electricity etc) are referred to as “topics”. The sub tabs like (Healthy, Minor, Severe etc) are referred as “Subtopics”.

Data Files: The data will be saved in the following files:

  • Topics.json, containing information related to topics and their subtopics

     1"failure":{
 2"title":"Failure",
 3"heading":"Heart Failure",
 4"icon":"mdi-heart-off",
 5"subTopics":{
 6    "healthy":{
 7    "title":"Healthy",
 8    "heading":"Chronic Problems",
 9    "icon":"mdi-account-heart",
10    "dataFile":"failure-healthy",
11    "category":"success",
12    "ecg":{
13        "name":"NoFailure",
14        "path":"ECG/NormalECG.json"
15        "description":"electrical pulses make the heart muscle contract"
16        },
17    "lvp":{
18        "name":"NoFailure",
19        "path":"LVP/NormalLVP.json"
20        "description":"muscle contraction generates pump pressure"
21        },
22    "model":{"name":"NoInfarct"}
23    },
24    "compensated":{
25    "title":"Compensated",
26    "heading":"Compensated",
27    "icon":"mdi-heart-cog",
28    "dataFile":"failure-compensated",
29    "category":"warning",
30    "ecg":{
31        "name":"CompensatedFailure",
32        "path" : "ECG/DiastolicECG_shifted.json",
33        "description":"electrical pulses make the heart muscle contract"
34        },
35    "lvp":{
36        "name":"CompensatedFailure",
37        "path" : "LVP DiastolicLVP_shifted.json",
38        "description":"muscle contraction generates pump pressure"
39        },
40    "model":{"name":"NoInfarct"}
41    },
42    "decompensated":{
43    "title":"Decompensated",
44    "heading":"Decompensated",
45    "icon":"mdi-heart-remove",
46    "dataFile":"failure-decompensated",
47    "category":"error",
48    "ecg":{
49        "name":"DecompensatedFailure",
50        "path" : "ECG SystolicECG_shifted.json",
51        "description":"electrical pulses make the heart muscle contract"
52        },
53    "lvp":{
54        "name":"DecompensatedFailure",
55        "path" : "LVP SystolicLVP_shifted.json",
56        "description":"thin-walled hearts struggle to maintain pump pressure"
57        },
58    "model":{"name":"NoInfarct"}
59    }
60}
61}
  • To store information for each subtopic, we can have multiple options. The two proposed ways include

    • Panels.xml: contents of each subtopic will be saved via xml tags. The application will read these tags and display contents accordingly. The format in which various elements are displayed will be controlled by code so, full potential of CSS styling can be used to design or to make things responsive. This means less control exercised by users, if they want to change things like design or want to add a new type of element that is not defined in existing xml etc. But still, it can be extended easily by a developer.

     1<?xml version="1.0" encoding="UTF-8"?>
 2<panels>
 3    <heart-main>
 4        <section type="text">
 5            The heart pumps blood to itself through blood vessels
 6            called the conronary arteries.
 7        </section>
 8        <inline>
 9            <section type="image" name="conronary.png">
10            <section type="video" code="blocked">
11        </inline>
12        <section type="text">
13            Good lifestyle choices help to keep the conronary arteries
14            healthy and prevent heart attacks.
15        </section>
16        <inline>
17            <section type="video" code="exercise">
18            <section type="video" code="diet">
19            <section type="video" code="smoking">
20        </inline>
21    </heart-main>
22</panels>

    • Markdown file: Saving contents of each subtopic in an individual markdown file. The application will read the contents from the file and display in the allocated slot. This way, the user can have complete control of content. But the application may not be able to utilize the full potential of CSS in displaying contents.

    This is an interactive model of the heart's two main pumping chambers:
the ventricles. Spin, zoom, drag, and open the heart using the gestures
shown at the bottom. Vary the heart rate using the slider on the right.

![schematic](img/schematic.png)
<a href="#video-div" data-play="video">
<img id="healthy" src="img/heart-video.png" class="video-icon"/>
</a>

---

The heart pumps blood around the body to provide all the organ systems
with oxygen and nutrients.

The ECG trace (top right) represents the electrical waves in the heart
that stimulate contraction and generate pressure (middle right) to pump
blood.
- - -
Click through the tabs below to learn about various heart diseases.

  • Videos.json, containing information relevant to each video

     1{
 2    "healthy":{
 3        "heading":"View of a Healthy Heart",
 4        "link":"videos/1_healthy_heart.mp4"
 5    },
 6
 7    "blocked":{
 8        "heading":"View of a Healthy Heart",
 9        "link":"videos/2_blocked_arteries.mp4"
10    },
11
12    "exercise":{
13        "heading":"Lifestyle Factors: Exercise",
14        "link":"videos/5_exercise_v2.mp4"
15    },
16
17    "diet":{
18        "heading":"Lifestyle Factors: Diet",
19        "link":"videos/6_diet_v2.mp4"
20    },
21
22    "smoking":{
23        "heading":"Lifestyle Factors: Smoking",
24        "link":"videos/7_smoking_v2.mp4"
25    },
26
27    "statin":{
28        "heading":"How your static medication will help?",
29        "link":"videos/3_Statins.mp4"
30    },
31
32    "aspirin":{
33        "heading":"How your aspirin medication will help?",
34        "link":"videos/4_aspirin.mp4"
35    }
36}

  • There might be other data files for team/people as in “about” information (needs further discussion)

1.2. The main app will be split into left and right pane (as it is currently)

The left pane includes:

  • Main Heading

  • Subheading

  • Panel (component), displaying contents of clicked subtopic from (either markdown or xml, as discussed above in data section)

  • Menu (the tabs and subtabs populated based on topics.json)

The Right pane will switch between two components i.e. Video Player and Model.

Check the diagram below to understand the change events of these components.

Note: Since the work on the Model component will be done at the end when the rest of the app is completed, the props for it may not be final. Right now, when I refer to the Model component, it includes everything i.e. the heart model, the ECG, pressure and heart rate modifier.

../_images/01_intro_5.jpg