From cd1a7ca7da0218617b5ad67f739bdf6c229b91d8 Mon Sep 17 00:00:00 2001 From: Claudia Onorato Date: Fri, 20 Nov 2020 20:46:29 -0500 Subject: [PATCH 01/40] added metrics in preview & changed class to classname --- .../assets/data/predicted_william_cyton.json | 31 +++++++++++++++++++ .../analyze_sleep/waiting_for_server/index.js | 2 +- .../sections/journal_section/index.js | 4 +-- .../sections/wake_up_section/index.js | 2 +- 4 files changed, 35 insertions(+), 4 deletions(-) diff --git a/web/src/assets/data/predicted_william_cyton.json b/web/src/assets/data/predicted_william_cyton.json index 475a176c..b4790942 100644 --- a/web/src/assets/data/predicted_william_cyton.json +++ b/web/src/assets/data/predicted_william_cyton.json @@ -1,4 +1,35 @@ { + "subject": { + "age": 30, + "sex": "M" + }, + "metadata": { + "bedTime": 1582441980, + "sessionEndTime": 1582473261.596, + "sessionStartTime": 1582436280, + "totalBedTime": 28260, + "totalSessionTime": 36981.596, + "wakeUpTime": 1582470240 + }, + "report": { + "N1Time": 630, + "N2Time": 11640, + "N3Time": 7530, + "REMTime": 6150, + "WASO": 960, + "WTime": 2310, + "awakenings": 4, + "efficientSleepTime": 25950, + "remLatency": 5940, + "remOnset": 1582447920, + "sleepEfficiency": 0.9182590233545648, + "sleepLatency": 1260, + "sleepOffset": 1582470150, + "sleepOnset": 1582443240, + "sleepTime": 26910, + "stageShifts": 43, + "wakeAfterSleepOffset": 90 + }, "epochs": { "timestamps": [ 1582441980, diff --git a/web/src/views/analyze_sleep/waiting_for_server/index.js b/web/src/views/analyze_sleep/waiting_for_server/index.js index 109df4cc..bc193fa0 100644 --- a/web/src/views/analyze_sleep/waiting_for_server/index.js +++ b/web/src/views/analyze_sleep/waiting_for_server/index.js @@ -32,7 +32,7 @@ const WaitingForServer = () => { {assets.map((asset) => ( - + {asset.name} ))} diff --git a/web/src/views/record_my_sleep/sections/journal_section/index.js b/web/src/views/record_my_sleep/sections/journal_section/index.js index d81afdbe..09b212f5 100644 --- a/web/src/views/record_my_sleep/sections/journal_section/index.js +++ b/web/src/views/record_my_sleep/sections/journal_section/index.js @@ -7,7 +7,7 @@ const JournalSection = () => (

- Write a journal + Write a journal

During the night, you must keep a journal, accurate to the minute, and write down a few information to help us @@ -32,7 +32,7 @@ const JournalSection = () => (

This information must be given when filling out the upload form for your EEG data file.

- + Good night!

diff --git a/web/src/views/record_my_sleep/sections/wake_up_section/index.js b/web/src/views/record_my_sleep/sections/wake_up_section/index.js index 54933be3..967a6d46 100644 --- a/web/src/views/record_my_sleep/sections/wake_up_section/index.js +++ b/web/src/views/record_my_sleep/sections/wake_up_section/index.js @@ -5,7 +5,7 @@ const WakeUpSection = () => (

- Wake up! + Wake up!

Remove & clean your electrodes

From 424ab9c06cb26a38ff481016a84a524ea08c7452 Mon Sep 17 00:00:00 2001 From: Claudia Onorato Date: Fri, 20 Nov 2020 22:13:42 -0500 Subject: [PATCH 02/40] added first card --- web/src/views/sleep_analysis_results/index.js | 6 ++-- .../stacked_bar_chart_scrollytelling.js | 30 +++++++++++++++---- 2 files changed, 28 insertions(+), 8 deletions(-) diff --git a/web/src/views/sleep_analysis_results/index.js b/web/src/views/sleep_analysis_results/index.js index 04599805..1e38996c 100644 --- a/web/src/views/sleep_analysis_results/index.js +++ b/web/src/views/sleep_analysis_results/index.js @@ -19,7 +19,8 @@ import './style.css'; const SleepAnalysisResults = ({ location }) => { const [response] = useGlobalState('response'); - const isPreviewMode = location.state?.isPreviewMode; + // const isPreviewMode = location.state?.isPreviewMode; + const isPreviewMode = true; if (!isPreviewMode && !response) { return ( { ); } const data = isPreviewMode ? previewSequence : response.data; + const { epochs, report, metadata } = data; const encodedJsonEpochs = encodeURIComponent(JSON.stringify(data.epochs)); return ( @@ -52,7 +54,7 @@ const SleepAnalysisResults = ({ location }) => { about your sleep. It is however fascinating to see how your night was.

Without further ado, this is what was your night of sleep:

- +

We have seen that sleep can be decomposed in mainly two stages, whereas REM and NREM, and that we can observe different stage proportions across age, gender and different sleep disorders. We’ve also defined other diff --git a/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js b/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js index 567d9d9d..d5f73e26 100644 --- a/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js +++ b/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { Container, Card, CardBody } from 'reactstrap'; +import _ from 'lodash'; import D3ComponentScrollyTelling from 'components/d3component_scrollytelling'; import WaypointDirection from 'components/waypoint_direction'; @@ -12,8 +13,23 @@ import createEvolvingChart, { stackedBarChartCallbacks, } from 'd3/evolving_chart/evolving_chart'; -const StackedBarChartScrollyTelling = ({ epochs }) => { +const StackedBarChartScrollyTelling = ({ epochs, report, metadata }) => { const [isInitialized, setIsInitialized] = useState(false); + console.log(report, metadata); + + const getTimeString = (numberSecondsUTC) => new Date(numberSecondsUTC * 1000).toLocaleTimeString(); + const getDurationString = (numberSeconds) => { + const nbHours = Math.floor(numberSeconds / 3600); + const nbMinutes = Math.floor((numberSeconds % 3600) / 60); + return nbHours > 0 ? `${nbHours} hours and ${nbMinutes} minutes` : `${nbMinutes} minutes`; + }; + + const { bedTime, wakeUpTime, totalBedTime } = metadata; + const { efficientSleepTime, sleepOnset, sleepOffset } = report; + const numberStagesTraversed = _.filter( + [report.N1Time, report.N2Time, report.N3Time, report.REMTime, report.WTime], + (time) => time > 0, + ).length; return ( @@ -31,11 +47,13 @@ const StackedBarChartScrollyTelling = ({ epochs }) => {

We can see that each colored block represents a part of your night. They are ordered from bed time to out of bed timestamps you’ve written in your journal. Each color is associated with a specific sleep stage. You - went to bed at 12:22 am and you got out of bed at 9:47 am, which adds up to 9 hours and 25 minutes of time - spent in bed. Of this total time, you spent 7 hours and 27 minutes actually sleeping. You first fell asleep - at XX:XX, to which we will refer to as sleep onset. The last non wake block ended at XX:XX, which can also - be referred to as sleep offset. During that night's sleep, you went through each of the 5 five stages. Let's - try to see a little better what happened about each of them. + went to bed at {getTimeString(bedTime)} and you got out of bed at {getTimeString(wakeUpTime)}, which adds up + to {getDurationString(totalBedTime)} of time spent in bed. Of this total time, you spent{' '} + {getDurationString(efficientSleepTime)} actually sleeping. You first fell asleep at{' '} + {getTimeString(sleepOnset)}, to which we will refer to as sleep onset. The last non wake block ended at{' '} + {getTimeString(sleepOffset)}, which can also be referred to as sleep offset. During that night's sleep, you + went through {numberStagesTraversed} sleep stages. Let's try to see a little better what happened about each + of them.

From 57023a95f833cc0a73135143f401b62fd2403dfa Mon Sep 17 00:00:00 2001 From: Claudia Onorato Date: Fri, 20 Nov 2020 22:30:40 -0500 Subject: [PATCH 03/40] added stats --- .../stacked_bar_chart_scrollytelling.js | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js b/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js index d5f73e26..8e3ff166 100644 --- a/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js +++ b/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js @@ -25,7 +25,7 @@ const StackedBarChartScrollyTelling = ({ epochs, report, metadata }) => { }; const { bedTime, wakeUpTime, totalBedTime } = metadata; - const { efficientSleepTime, sleepOnset, sleepOffset } = report; + const { efficientSleepTime, sleepOnset, sleepOffset, sleepLatency, WASO, sleepEfficiency } = report; const numberStagesTraversed = _.filter( [report.N1Time, report.N2Time, report.N3Time, report.REMTime, report.WTime], (time) => time > 0, @@ -66,14 +66,19 @@ const StackedBarChartScrollyTelling = ({ epochs, report, metadata }) => {

Wake stage is of course the stage we want to minimize when in bed. It can be decomposed into two parts:

    -
  • Sleep latency : Time spent before falling asleep, which corresponds to X minutes in your case.
    • -
  • Wake after sleep onset (WASO): Time spent awake after first falling asleep and before waking up.
  • - {' '} - For healthy adults, it is normal to experience small awakenings during the night. Unprovoked awakenings - are mostly during or after REM stages.{' '} + Sleep latency : Time spent before falling asleep, which corresponds to {getDurationString(sleepLatency)} +  minutes in your case. +
    • +
  • + Wake after sleep onset (WASO): Time spent awake after first falling asleep and before waking up, which + corresponds to {getDurationString(WASO)}.
+

+ For healthy adults, it is normal to experience small awakenings during the night. Unprovoked awakenings are + mostly during or after REM stages. +

@@ -109,7 +114,8 @@ const StackedBarChartScrollyTelling = ({ epochs, report, metadata }) => {

From here, we can look at your sleep efficiency, which is the proportion of time spent asleep over the - overall time spent in bed. In your case, it corresponds to 79%, or 7h27. + overall time spent in bed. In your case, it corresponds to {(sleepEfficiency * 100).toFixed()}%, or  + {getDurationString(sleepEfficiency * totalBedTime)}.

From 77f1db206511cb553b39a2cc9114f95916a5834e Mon Sep 17 00:00:00 2001 From: Claudia Onorato Date: Fri, 20 Nov 2020 23:12:58 -0500 Subject: [PATCH 04/40] fixed cards --- .../assets/data/predicted_william_cyton.json | 2 +- .../stacked_bar_chart_scrollytelling.js | 36 +++++++++++-------- 2 files changed, 22 insertions(+), 16 deletions(-) diff --git a/web/src/assets/data/predicted_william_cyton.json b/web/src/assets/data/predicted_william_cyton.json index b4790942..34b61d42 100644 --- a/web/src/assets/data/predicted_william_cyton.json +++ b/web/src/assets/data/predicted_william_cyton.json @@ -13,7 +13,7 @@ }, "report": { "N1Time": 630, - "N2Time": 11640, + "N2Time": 11280, "N3Time": 7530, "REMTime": 6150, "WASO": 960, diff --git a/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js b/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js index 8e3ff166..de4f8b58 100644 --- a/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js +++ b/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js @@ -12,6 +12,7 @@ import createEvolvingChart, { barChartCallbacks, stackedBarChartCallbacks, } from 'd3/evolving_chart/evolving_chart'; +import { STAGES_ORDERED } from 'd3/constants'; const StackedBarChartScrollyTelling = ({ epochs, report, metadata }) => { const [isInitialized, setIsInitialized] = useState(false); @@ -25,11 +26,21 @@ const StackedBarChartScrollyTelling = ({ epochs, report, metadata }) => { }; const { bedTime, wakeUpTime, totalBedTime } = metadata; - const { efficientSleepTime, sleepOnset, sleepOffset, sleepLatency, WASO, sleepEfficiency } = report; - const numberStagesTraversed = _.filter( - [report.N1Time, report.N2Time, report.N3Time, report.REMTime, report.WTime], - (time) => time > 0, - ).length; + const { + efficientSleepTime, + sleepOnset, + sleepOffset, + sleepLatency, + WASO, + sleepEfficiency, + wakeAfterSleepOffset, + } = report; + const sleepStageTimes = STAGES_ORDERED.reduce( + (obj, stage) => Object({ ...obj, [stage]: report[`${stage}Time`] }), + {}, + ); + const numberStagesTraversed = _.filter(sleepStageTimes, (time) => time > 0).length; + const mostProminentStage = _.maxBy(_.keys(sleepStageTimes), (stage) => sleepStageTimes[stage]); return ( @@ -124,21 +135,16 @@ const StackedBarChartScrollyTelling = ({ epochs, report, metadata }) => {

We are currently looking at your in bed sleep stage proportions. Wake time may be overrepresented, because - it includes your sleep latency and the time you spent in bed after waking up. In order to look at your - actual stage proportions, we must cut them out from wake time to only keep WASO. + it includes your sleep latency ({getDurationString(sleepLatency)}) and the time you spent in bed after + waking up ({getDurationString(wakeAfterSleepOffset)}).

- - -
- -

- We can see that the most prominent sleep stage is N2, which in your case corresponds to XXXX. How does your - night compare to other people’s night? + We can see that your most prominent sleep stage is {mostProminentStage}, which in your case corresponds + to {getDurationString(sleepStageTimes[mostProminentStage])}. Usually, the most prominent sleep stage + is {mostProminentStage === 'N2' && ', as it is in your case, '}N2.

-
{isInitialized && ( Date: Sat, 21 Nov 2020 00:31:13 -0500 Subject: [PATCH 05/40] renamed and fixed cards appearences --- ...lytelling.js => evolving_chart_scrollytelling.js} | 12 ++++++------ web/src/views/sleep_analysis_results/index.js | 4 ++-- web/src/views/sleep_analysis_results/style.css | 6 ++++++ 3 files changed, 14 insertions(+), 8 deletions(-) rename web/src/views/sleep_analysis_results/{stacked_bar_chart_scrollytelling.js => evolving_chart_scrollytelling.js} (96%) diff --git a/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js b/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js similarity index 96% rename from web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js rename to web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js index de4f8b58..31ef3a10 100644 --- a/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js +++ b/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js @@ -14,7 +14,9 @@ import createEvolvingChart, { } from 'd3/evolving_chart/evolving_chart'; import { STAGES_ORDERED } from 'd3/constants'; -const StackedBarChartScrollyTelling = ({ epochs, report, metadata }) => { +import './style.css'; + +const EvolvingChartScrollyTelling = ({ epochs, report, metadata }) => { const [isInitialized, setIsInitialized] = useState(false); console.log(report, metadata); @@ -43,7 +45,7 @@ const StackedBarChartScrollyTelling = ({ epochs, report, metadata }) => { const mostProminentStage = _.maxBy(_.keys(sleepStageTimes), (stage) => sleepStageTimes[stage]); return ( - +
{

-
{isInitialized && ( )} @@ -116,7 +117,6 @@ const StackedBarChartScrollyTelling = ({ epochs, report, metadata }) => {

-
{isInitialized && ( )} @@ -166,8 +166,8 @@ const StackedBarChartScrollyTelling = ({ epochs, report, metadata }) => { ); }; -StackedBarChartScrollyTelling.propTypes = { +EvolvingChartScrollyTelling.propTypes = { epochs: PropTypes.object.isRequired, }; -export default StackedBarChartScrollyTelling; +export default EvolvingChartScrollyTelling; diff --git a/web/src/views/sleep_analysis_results/index.js b/web/src/views/sleep_analysis_results/index.js index 1e38996c..2623da9a 100644 --- a/web/src/views/sleep_analysis_results/index.js +++ b/web/src/views/sleep_analysis_results/index.js @@ -10,7 +10,7 @@ import { createSingleHypnogram } from 'd3/hypnogram/hypnogram'; import useGlobalState from 'hooks/useGlobalState'; import text from './text.json'; -import StackedBarChartScrollyTelling from './stacked_bar_chart_scrollytelling'; +import EvolvingChartScrollyTelling from './evolving_chart_scrollytelling'; import SpectrogramScrollyTelling from './spectrogram_scrollytelling'; import previewSequence from 'assets/data/predicted_william_cyton'; @@ -54,7 +54,7 @@ const SleepAnalysisResults = ({ location }) => { about your sleep. It is however fascinating to see how your night was.

Without further ado, this is what was your night of sleep:

- +

We have seen that sleep can be decomposed in mainly two stages, whereas REM and NREM, and that we can observe different stage proportions across age, gender and different sleep disorders. We’ve also defined other diff --git a/web/src/views/sleep_analysis_results/style.css b/web/src/views/sleep_analysis_results/style.css index 43784a03..c74ae55b 100644 --- a/web/src/views/sleep_analysis_results/style.css +++ b/web/src/views/sleep_analysis_results/style.css @@ -3,3 +3,9 @@ justify-content: space-between; margin: 1rem 0.1rem; } + +.evolving_chart__container > .card { + margin: 0 auto; /* Added */ + max-width: 50%; + padding: 1rem 1rem; +} From 2cc92fd3ff8f0834fcb4e2f84c9da9bed8b8e313 Mon Sep 17 00:00:00 2001 From: Claudia Onorato Date: Sat, 21 Nov 2020 00:49:00 -0500 Subject: [PATCH 06/40] added color to calculated metrics --- .../evolving_chart_scrollytelling.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js b/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js index 31ef3a10..8a6f0bf3 100644 --- a/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js +++ b/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js @@ -20,11 +20,18 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata }) => { const [isInitialized, setIsInitialized] = useState(false); console.log(report, metadata); - const getTimeString = (numberSecondsUTC) => new Date(numberSecondsUTC * 1000).toLocaleTimeString(); + const getTimeString = (numberSecondsUTC) => ( + {new Date(numberSecondsUTC * 1000).toLocaleTimeString()} + ); const getDurationString = (numberSeconds) => { const nbHours = Math.floor(numberSeconds / 3600); const nbMinutes = Math.floor((numberSeconds % 3600) / 60); - return nbHours > 0 ? `${nbHours} hours and ${nbMinutes} minutes` : `${nbMinutes} minutes`; + + return ( + + {nbHours > 0 ? `${nbHours} hours and ${nbMinutes} minutes` : `${nbMinutes} minutes`} + + ); }; const { bedTime, wakeUpTime, totalBedTime } = metadata; @@ -125,7 +132,8 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata }) => {

From here, we can look at your sleep efficiency, which is the proportion of time spent asleep over the - overall time spent in bed. In your case, it corresponds to {(sleepEfficiency * 100).toFixed()}%, or  + overall time spent in bed. In your case, it corresponds to  + {(sleepEfficiency * 100).toFixed()}%, or  {getDurationString(sleepEfficiency * totalBedTime)}.

From ff7484970367bee5114cd8553dff27b4a13dc266 Mon Sep 17 00:00:00 2001 From: Claudia Onorato Date: Sat, 21 Nov 2020 13:06:43 -0500 Subject: [PATCH 07/40] moved barchart cards to right && added bootstrap rows --- .../evolving_chart_scrollytelling.js | 243 ++++++++++-------- 1 file changed, 136 insertions(+), 107 deletions(-) diff --git a/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js b/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js index 8a6f0bf3..5867cdc9 100644 --- a/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js +++ b/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import { Container, Card, CardBody } from 'reactstrap'; +import { Container, Card, CardBody, Row } from 'reactstrap'; import _ from 'lodash'; import D3ComponentScrollyTelling from 'components/d3component_scrollytelling'; @@ -18,21 +18,6 @@ import './style.css'; const EvolvingChartScrollyTelling = ({ epochs, report, metadata }) => { const [isInitialized, setIsInitialized] = useState(false); - console.log(report, metadata); - - const getTimeString = (numberSecondsUTC) => ( - {new Date(numberSecondsUTC * 1000).toLocaleTimeString()} - ); - const getDurationString = (numberSeconds) => { - const nbHours = Math.floor(numberSeconds / 3600); - const nbMinutes = Math.floor((numberSeconds % 3600) / 60); - - return ( - - {nbHours > 0 ? `${nbHours} hours and ${nbMinutes} minutes` : `${nbMinutes} minutes`} - - ); - }; const { bedTime, wakeUpTime, totalBedTime } = metadata; const { @@ -51,6 +36,20 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata }) => { const numberStagesTraversed = _.filter(sleepStageTimes, (time) => time > 0).length; const mostProminentStage = _.maxBy(_.keys(sleepStageTimes), (stage) => sleepStageTimes[stage]); + const Metric = ({ children }) => ( + + {children} + + ); + + const getTimeString = (numberSecondsUTC) => {new Date(numberSecondsUTC * 1000).toLocaleTimeString()}; + const getDurationString = (numberSeconds) => { + const nbHours = Math.floor(numberSeconds / 3600); + const nbMinutes = Math.floor((numberSeconds % 3600) / 60); + + return {nbHours > 0 ? `${nbHours} hours and ${nbMinutes} minutes` : `${nbMinutes} minutes`}; + }; + return (
@@ -62,97 +61,124 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata }) => { />
- - -

- We can see that each colored block represents a part of your night. They are ordered from bed time to out of - bed timestamps you’ve written in your journal. Each color is associated with a specific sleep stage. You - went to bed at {getTimeString(bedTime)} and you got out of bed at {getTimeString(wakeUpTime)}, which adds up - to {getDurationString(totalBedTime)} of time spent in bed. Of this total time, you spent{' '} - {getDurationString(efficientSleepTime)} actually sleeping. You first fell asleep at{' '} - {getTimeString(sleepOnset)}, to which we will refer to as sleep onset. The last non wake block ended at{' '} - {getTimeString(sleepOffset)}, which can also be referred to as sleep offset. During that night's sleep, you - went through {numberStagesTraversed} sleep stages. Let's try to see a little better what happened about each - of them. -

- - + + + +

+ We can see that each colored block represents a part of your night. This timeline starts at your bed time, + so {getTimeString(bedTime)}, and ends at the time you got out of bed, whereas {getTimeString(wakeUpTime)}. + Of this total time, you spent {getDurationString(efficientSleepTime)} actually sleeping. You first fell + asleep at {getTimeString(sleepOnset)}, to which we will refer to as sleep onset. You woke up at{' '} + {getTimeString(sleepOffset)}, which can also be referred to as sleep offset. During that night's sleep, + you went through {numberStagesTraversed} different stages. Let's take a look at them. +

+ + + {isInitialized && ( )}
- - -

Wake stage is of course the stage we want to minimize when in bed. It can be decomposed into two parts:

-
    -
  • - Sleep latency : Time spent before falling asleep, which corresponds to {getDurationString(sleepLatency)} -  minutes in your case. -
    • -
  • - Wake after sleep onset (WASO): Time spent awake after first falling asleep and before waking up, which - corresponds to {getDurationString(WASO)}. -
    • -
-

- For healthy adults, it is normal to experience small awakenings during the night. Unprovoked awakenings are - mostly during or after REM stages. -

- - + + + +

+ You spent {getDurationString(report.WTime)} awake through your night. This duration is, in a sleep report, + usually decomposed as three different components. +

+

+ First, sleep latency corresponds to the time you spend in bed before first falling + asleep, which here is {getDurationString(sleepLatency)}. +

+

+ Secondly, wake after sleep onset, often abbreviated as WASO, is the time spent awake + after first falling asleep and before waking up. In your case, it corresponds to {getDurationString(WASO)} + . +

+

+ Thirdly, the time you spend in bed after waking up and getting out of bed, here being{' '} + {getDurationString(wakeAfterSleepOffset)}, is called wake after sleep offset. +

+ + +
- - -

- REM stage stands for “Rapid Eyes Movements” and is also known as “paradoxical sleep”. It is - associated with dreaming and, as the National Sleep Foundation says,{' '} - “the brain is awake and body paralyzed.” -

-

- N1 stage is associated with that drowsy feeling before falling asleep. Most people wouldn’t - say they fell asleep if they’ve been woken up from N1 sleep. -

-

- N2 stage still corresponds to a light sleep, but where the muscle activity decreases more, - and the eyes have stopped moving. It is called, along with N1, light sleep. -

-

- N3 stage is when you are deeply asleep, hence it’s also called deep sleep, - or sometimes slow wave sleep, and is the most difficult to wake up from. It is during those - stages that your cells get repaired, and that tissue grows. But how much time did you spend in each stage - during the whole night? -

- - + + + +

+ REM stage, which is short for rapid eyes movement, is the moment of the night + where you experience dreams. During this stage, your muscles should be completely immobilized, and on the + opposite, the activity of your brain should be very active, which illustrates why this stage is also + called paradoxical sleep. +

+ + + +
+ + + +

+ N1 stage is associated with that drowsy feeling before falling asleep. Most people + wouldn’t say they fell asleep if they’ve been woken up from N1 sleep. +

+

+ N2 stage still corresponds to a light sleep, but where the muscle activity decreases + more, and the eyes have stopped moving. It is called, along with N1, light sleep. +

+ + + +
+ + + +

+ N3 stage is when you are deeply asleep, hence it’s also called{' '} + deep sleep, or sometimes slow wave sleep, and is the most difficult to + wake up from. It is during those stages that your cells get repaired, and that tissue grows. +

+

+ We've looked at the different functions of each sleep stages. But how much time did you actually spend in + each during the night? +

+ + + {isInitialized && ( )}
- - -

- From here, we can look at your sleep efficiency, which is the proportion of time spent asleep over the - overall time spent in bed. In your case, it corresponds to  - {(sleepEfficiency * 100).toFixed()}%, or  - {getDurationString(sleepEfficiency * totalBedTime)}. -

- - + + + +

+ We are currently looking at your in bed sleep stage proportions. Wake time may be overrepresented, because + it includes your sleep latency ({getDurationString(sleepLatency)}) and the time you spent in bed after + waking up ({getDurationString(wakeAfterSleepOffset)}). +

+

+ We can see that your most prominent sleep stage is {mostProminentStage}, which in your + case corresponds to {getDurationString(sleepStageTimes[mostProminentStage])}. Usually, the most + prominent sleep stage is {mostProminentStage === 'N2' && ', as it is in your case, '}N2. +

+ + +
- - -

- We are currently looking at your in bed sleep stage proportions. Wake time may be overrepresented, because - it includes your sleep latency ({getDurationString(sleepLatency)}) and the time you spent in bed after - waking up ({getDurationString(wakeAfterSleepOffset)}). -

-

- We can see that your most prominent sleep stage is {mostProminentStage}, which in your case corresponds - to {getDurationString(sleepStageTimes[mostProminentStage])}. Usually, the most prominent sleep stage - is {mostProminentStage === 'N2' && ', as it is in your case, '}N2. -

- - + + + +

+ From here, we can also look at your sleep efficiency, which is the proportion of time spent asleep over + the overall time spent in bed. In your case, it corresponds to  + {(sleepEfficiency * 100).toFixed()}%, or  + {getDurationString(sleepEfficiency * totalBedTime)}. +

+ + + {isInitialized && ( { /> )}
- - -

- As a rule of thumb, adults approximately stay 5% of their total sleep time in N1; 50% in N2; and 20% is in - N3. The remaining 25% is REM stage sleep. -

- - -
-   + + + +

+ As a rule of thumb, adults approximately stay 5% of their total sleep time in N1; 50% in N2; and 20% is in + N3. The remaining 25% is REM stage sleep. +

+ + + + +
+ ); }; From a61435bb61407ec0a408d659dcadbd72b155e0c1 Mon Sep 17 00:00:00 2001 From: Claudia Onorato Date: Sat, 21 Nov 2020 22:01:46 -0500 Subject: [PATCH 08/40] added sleep mechanisms & tips --- web/src/components/floating_card.js | 18 +- .../evolving_chart_scrollytelling.js | 13 +- .../improve_sleep_tips.js | 42 +++ web/src/views/sleep_analysis_results/index.js | 277 ++++++++++-------- .../preview_mode_warning.js | 22 +- .../sleep_mechanisms.js | 33 +++ .../views/sleep_analysis_results/style.css | 6 - 7 files changed, 256 insertions(+), 155 deletions(-) create mode 100644 web/src/views/sleep_analysis_results/improve_sleep_tips.js create mode 100644 web/src/views/sleep_analysis_results/sleep_mechanisms.js diff --git a/web/src/components/floating_card.js b/web/src/components/floating_card.js index 0c57d0d5..8aec7a4e 100644 --- a/web/src/components/floating_card.js +++ b/web/src/components/floating_card.js @@ -3,16 +3,14 @@ import PropTypes from 'prop-types'; import { Card, Col, Row } from 'reactstrap'; const FloatingCard = ({ cardClassName, headerText, bodyText, button }) => ( - -
- - -

{headerText}

-

{bodyText}

- {button} - - -
+ + + + {headerText !== null &&

{headerText}

} +

{bodyText}

+ {button} + + ); diff --git a/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js b/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js index 5867cdc9..4b59e7f9 100644 --- a/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js +++ b/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js @@ -14,8 +14,6 @@ import createEvolvingChart, { } from 'd3/evolving_chart/evolving_chart'; import { STAGES_ORDERED } from 'd3/constants'; -import './style.css'; - const EvolvingChartScrollyTelling = ({ epochs, report, metadata }) => { const [isInitialized, setIsInitialized] = useState(false); @@ -51,7 +49,7 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata }) => { }; return ( - +
{ deep sleep, or sometimes slow wave sleep, and is the most difficult to wake up from. It is during those stages that your cells get repaired, and that tissue grows.

+

+ N1, N2 and N3 are called, in opposition to REM, the NREM sleep stages. +

We've looked at the different functions of each sleep stages. But how much time did you actually spend in each during the night? @@ -173,7 +174,7 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata }) => {

From here, we can also look at your sleep efficiency, which is the proportion of time spent asleep over the overall time spent in bed. In your case, it corresponds to  - {(sleepEfficiency * 100).toFixed()}%, or  + {(sleepEfficiency * 100).toFixed()}%, or  {getDurationString(sleepEfficiency * totalBedTime)}.

@@ -190,8 +191,8 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata }) => {

- As a rule of thumb, adults approximately stay 5% of their total sleep time in N1; 50% in N2; and 20% is in - N3. The remaining 25% is REM stage sleep. + As a rule of thumb, adults approximately stay 5% of their total sleep time in N1, 50% in N2 and 20% in N3. + The remaining 25% is spent in the REM stage sleep.

diff --git a/web/src/views/sleep_analysis_results/improve_sleep_tips.js b/web/src/views/sleep_analysis_results/improve_sleep_tips.js new file mode 100644 index 00000000..5785600a --- /dev/null +++ b/web/src/views/sleep_analysis_results/improve_sleep_tips.js @@ -0,0 +1,42 @@ +import BadgeBulletPoint from 'components/badge_bullet_point'; +import React from 'react'; + +const TipsToImproveSleep = () => ( + <> +

In order to improve your sleep hygiene, many elements can be considered:

+
    +
  • +
    + + Alimentation: having a balanced diet and avoiding sources of caffeine can have a positive impact on one’s + sleep. Chocolate, soft drink, tea and decaffeinated coffee are unexpected sources of caffeine. + +
    +
    • +
  • + +
    + Routine: going to sleep at about the same time, in a darkened and quiet environment can help stabilize your + sleep internal mechanisms, namely your circadian rhythms and your homeostasis. +
    +     +
    • +
  • + +
    + Light: avoid looking at screens before or while getting to bed. Light, especially blue wavelenghts, suppress + melatonin secretion, thus interfering with your circadian rhythms. +
    +     +
    • + +
  • + +
    Exercise: work out for 20 to 30 minutes each day.
    +     +
    • +
+ +); + +export default TipsToImproveSleep; diff --git a/web/src/views/sleep_analysis_results/index.js b/web/src/views/sleep_analysis_results/index.js index 2623da9a..069888f8 100644 --- a/web/src/views/sleep_analysis_results/index.js +++ b/web/src/views/sleep_analysis_results/index.js @@ -16,6 +16,8 @@ import SpectrogramScrollyTelling from './spectrogram_scrollytelling'; import previewSequence from 'assets/data/predicted_william_cyton'; import './style.css'; +import SleepMechanisms from './sleep_mechanisms'; +import TipsToImproveSleep from './improve_sleep_tips'; const SleepAnalysisResults = ({ location }) => { const [response] = useGlobalState('response'); @@ -34,8 +36,150 @@ const SleepAnalysisResults = ({ location }) => { const { epochs, report, metadata } = data; const encodedJsonEpochs = encodeURIComponent(JSON.stringify(data.epochs)); + const sleepAnalysisIntro = ( + + {isPreviewMode && ( + + + + )} +

+ Through the following visualizations, you will be able to discover the time you spent in which sleep stages, how + they are defined and their functions. There are also, here and there, commonly seen sleep analysis metrics, + which have been calculated on your night. Then, an interactive hypnogram allows you to see the transitions + between the sleep stages. Finally, a visualization illustrates how we've been able to classify the recorded EEG + data into sleep stages. +

+ + ); + const evolvingChartOutro = ( + <> + +

+ We have seen that sleep can be decomposed into two stages, whereas REM and NREM. We’ve also defined other + measures of your sleep architecture, such as your sleep latency, efficiency and total sleep time. +

+ + +
+ + +

+ Although we’ve looked at many aspects of your night’s sleep, we haven’t properly looked at your sleep + dynamics, whereas how your sleep evolves overnight. +

+ +
+ + ); + + const hypnogramIntro = ( + +

Hypnogram

+

+ A hypnogram allows you to visually inspect the evolution of your night, through time. The vertical axis + represents how hard it is to wake up, namely the sleep deepness. We see that REM is one of the lightest sleep + stages (along with N1), because we unknowingly wake up from that stage. Those short periods of arousal often + last no longer than 15 seconds, are followed by a lighter sleep stage, and cannot be remembered the next + morning. If they are too frequent, they can affect your sleep quality. [5] We can see that, throughout the + night, stages follow about the same pattern, whereas we go from NREM (either N1, N2 and N3) and then to REM, and + so on. We call those sleep cycles, and those typically range from four to six, each one lasting from 90 to 110 + minutes. Another commonly looked at measurement is the time between sleep onset and the first REM epoch, namely + REM latency, which corresponds to 20 minutes. +

+ + ); + const hypnogramOutro = ( + +

+ You’ve been able to visualize and inspect your night of sleep, which we’ve classified only based on your EEG + recordings. In a sleep lab, electrophysiology technicians generally look at your EEG, EOG and submental EMG, and + then manually classify each epoch of 30 seconds that compose your night. By looking at your EEG recordings, we + can see some patterns that can help electrophysiology technicians, and our classifier, discriminate sleep stages + throughout the night. +

+ + ); + + const spectrogramIntro = ( + +

Spectrogram

+

+ Above, we can see the same chart from the first visualization, which represents your sleep stages through the + night. Below it, there are spectrograms of both your EEG channels. Spectrograms can be viewed as if we took all + of your nights signal, we’ve separated it in contiguous 30 seconds chunks, stacked then horizontally and to + which we’ve applied the fast fourier transform. We then have, for each 30 seconds epoch, the corresponding + amplitudes for each frequency that makes up the signal, hence the spectra. We then converted the scale to + logarithmic, to better see the differences in the spectrums. We then speak of signal power instead of signal + amplitude, because we look at the spectrums in a logarithmic scale. +

+

+ How to read it? +

+

+ Red therefore means that in that 30 seconds time frame, that particular frequency had a big amplitude. Green + means that you had that frequency with a lower amplitude. Dark blue means that you didn’t have that frequency in + the signal. +

+

+ To get a better understanding at how spectrograms work, you can check out + + {' '} + this visualization{' '} + + that decomposes sound frequency from your microphone. +

+ + ); + const spectrogramOutro = ( + +

+ Generally, when talking about brain waves, we group certain frequencies together into bands. There are overall + five frequency bands, where each has a general associated behaviour, or state of mind. We will cover those when + looking at time frames corresponding to each sleep stage. +

+

+ We can associate wake stages with low-amplitude activity in the 15 to 60 Hz frequency range, called the beta + band. By slowly falling asleep, the signal frequencies tend to decrease into the 4 to 8 Hz range, or the theta + band, and to have larger amplitudes. These characteristics are associated with N1. N2 stage has the same + characteristics, and also includes sleep spindles. They last only a few seconds and are a large oscillation in + the 10 to 15 hz band. Because they do not occur during all of the 30 seconds period, they cannot be seen here. + Stage N3, also called slow wave sleep, is characterized by slower waves between 0.5 and 4 Hz, known as the delta + range, with large amplitudes. REM stage has the same characteristics as Wake stage, whereas there are low + voltage high frequency activity. +

+ + ); + const callToAction = ( + +

Wanna know how accurate this data is?

+ + + + +
+ +
+ {isPreviewMode && ( + + You need to upload your own sleep sequence in order to download your data + + )} + + + ); + return ( -
+ <>
{ subtitle={text['header_subtitle']} description={text['header_description']} /> - - {isPreviewMode && ( - - - - )} -

- Of course, we are analyzing only one night of sleep so it is therefore tricky to draw general conclusions - about your sleep. It is however fascinating to see how your night was. -

-

Without further ado, this is what was your night of sleep:

- -

- We have seen that sleep can be decomposed in mainly two stages, whereas REM and NREM, and that we can observe - different stage proportions across age, gender and different sleep disorders. We’ve also defined other - measures of your sleep architecture, such as your sleep latency, efficiency and total sleep time. In order to - improve your sleep hygiene, many elements can be considered: -

-
    -
  • - Alimentation: having a balanced diet and avoiding sources of caffeine can have a positive impact on one’s - sleep. Chocolate, soft drink, tea and decaffeinated coffee are unexpected sources of caffeine. -
    • -
  • Routine: going to sleep about at the same time, in a darkened and quiet environment.
    • -
  • Routine: going to sleep about at the same time, in a darkened and quiet environment.
    • -
  • Routine: going to sleep about at the same time, in a darkened and quiet environment.
    • -
-

- Although we’ve looked at many aspects of your night’s sleep, we haven’t properly looked at your sleep - dynamics, whereas how your sleep evolves overnight. -

-

Hypnogram

-

- A hypnogram allows you to visually inspect the evolution of your night, through time. The vertical axis - represents how hard it is to wake up, namely the sleep deepness. We see that REM is one of the lightest sleep - stages (along with N1), because we unknowingly wake up from that stage. Those short periods of arousal often - last no longer than 15 seconds, are followed by a lighter sleep stage, and cannot be remembered the next - morning. If they are too frequent, they can affect your sleep quality. [5] We can see that, throughout the - night, stages follow about the same pattern, whereas we go from NREM (either N1, N2 and N3) and then to REM, - and so on. We call those sleep cycles, and those typically range from four to six, each one lasting from 90 to - 110 minutes. Another commonly looked at measurement is the time between sleep onset and the first REM epoch, - namely REM latency, which corresponds to 20 minutes. -

+ {sleepAnalysisIntro} + + {evolvingChartOutro} + {hypnogramIntro} + -

- Sleep cycles take place in a broader process, named the circadian rhythm. It is the one that regulates our - wake and sleep cycles over a 24 hours period. -

-

- You’ve been able to visualize and inspect your night of sleep, which we’ve classified only based on your EEG - recordings. In a sleep lab, electrophysiology technicians generally look at your EEG, EOG and submental EMG, - and then manually classify each epoch of 30 seconds that compose your night. By looking at your EEG - recordings, we can see some patterns that can help electrophysiology technicians, and our classifier, - discriminate sleep stages throughout the night. -

-

Spectrogram

-

- Above, we can see the same chart from the first visualization, which represents your sleep stages through the - night. Below it, there are spectrograms of both your EEG channels. Spectrograms can be viewed as if we took - all of your nights signal, we’ve separated it in contiguous 30 seconds chunks, stacked then horizontally and - to which we’ve applied the fast fourier transform. We then have, for each 30 seconds epoch, the corresponding - amplitudes for each frequency that makes up the signal, hence the spectra. We then converted the scale to - logarithmic, to better see the differences in the spectrums. We then speak of signal power instead of signal - amplitude, because we look at the spectrums in a logarithmic scale. -

-

- How to read it? -

-

- Red therefore means that in that 30 seconds time frame, that particular frequency had a big amplitude. Green - means that you had that frequency with a lower amplitude. Dark blue means that you didn’t have that frequency - in the signal. -

-

- To get a better understanding at how spectrograms work, you can check out - - {' '} - this visualization{' '} - - that decomposes sound frequency from your microphone. -

- -

- Generally, when talking about brain waves, we group certain frequencies together into bands. There are overall - five frequency bands, where each has a general associated behaviour, or state of mind. We will cover those - when looking at time frames corresponding to each sleep stage. -

-

- We can associate wake stages with low-amplitude activity in the 15 to 60 Hz frequency range, called the beta - band. By slowly falling asleep, the signal frequencies tend to decrease into the 4 to 8 Hz range, or the theta - band, and to have larger amplitudes. These characteristics are associated with N1. N2 stage has the same - characteristics, and also includes sleep spindles. They last only a few seconds and are a large oscillation in - the 10 to 15 hz band. Because they do not occur during all of the 30 seconds period, they cannot be seen here. - Stage N3, also called slow wave sleep, is characterized by slower waves between 0.5 and 4 Hz, known as the - delta range, with large amplitudes. REM stage has the same characteristics as Wake stage, whereas there are - low voltage high frequency activity. -

-

Wanna know how accurate this data is?

- - - - -
- -
- {isPreviewMode && ( - - You need to upload your own sleep sequence in order to download your data - - )} - -
+ {hypnogramOutro} + {spectrogramIntro} + + {spectrogramOutro} + {callToAction} + ); }; diff --git a/web/src/views/sleep_analysis_results/preview_mode_warning.js b/web/src/views/sleep_analysis_results/preview_mode_warning.js index 3a11f41a..e65c2eb1 100644 --- a/web/src/views/sleep_analysis_results/preview_mode_warning.js +++ b/web/src/views/sleep_analysis_results/preview_mode_warning.js @@ -5,17 +5,15 @@ import Emoji from 'components/emoji'; const BEDTIME_PREVIEW_MODE_TIMESTAMP = 1582441980 * 1000; -const PreviewModeWarning = () => { - return ( - - - - You are in preview mode. - The data that is shown here comes from a recording we took on{' '} - {new Date(BEDTIME_PREVIEW_MODE_TIMESTAMP).toDateString()} - - - ); -}; +const PreviewModeWarning = () => ( + + + + You are in preview mode. + The data that is shown here comes from a recording we took on{' '} + {new Date(BEDTIME_PREVIEW_MODE_TIMESTAMP).toDateString()} + + +); export default PreviewModeWarning; diff --git a/web/src/views/sleep_analysis_results/sleep_mechanisms.js b/web/src/views/sleep_analysis_results/sleep_mechanisms.js new file mode 100644 index 00000000..c77df4b4 --- /dev/null +++ b/web/src/views/sleep_analysis_results/sleep_mechanisms.js @@ -0,0 +1,33 @@ +import React from 'react'; +import { CardDeck, Col, Container } from 'reactstrap'; + +import FloatingCard from 'components/floating_card'; + +import './style.css'; + +const SleepMechanisms = () => ( + + + + + + + + + + +); + +export default SleepMechanisms; diff --git a/web/src/views/sleep_analysis_results/style.css b/web/src/views/sleep_analysis_results/style.css index c74ae55b..43784a03 100644 --- a/web/src/views/sleep_analysis_results/style.css +++ b/web/src/views/sleep_analysis_results/style.css @@ -3,9 +3,3 @@ justify-content: space-between; margin: 1rem 0.1rem; } - -.evolving_chart__container > .card { - margin: 0 auto; /* Added */ - max-width: 50%; - padding: 1rem 1rem; -} From 2987300757be59822608292071c71c84ae4a8297 Mon Sep 17 00:00:00 2001 From: Claudia Onorato Date: Sat, 21 Nov 2020 22:05:26 -0500 Subject: [PATCH 09/40] fixed btn hero --- web/src/views/home/hero/hero.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/views/home/hero/hero.js b/web/src/views/home/hero/hero.js index 804ce025..87773225 100644 --- a/web/src/views/home/hero/hero.js +++ b/web/src/views/home/hero/hero.js @@ -38,7 +38,7 @@ class Hero extends React.Component { - +
* a project made by From 21ed0b78efbb531549970448337d2d93d64e006f Mon Sep 17 00:00:00 2001 From: Claudia Onorato Date: Sat, 21 Nov 2020 22:36:15 -0500 Subject: [PATCH 10/40] changed spectro cards size --- .../evolving_chart_scrollytelling.js | 2 +- web/src/views/sleep_analysis_results/index.js | 54 +++---- .../spectrogram_scrollytelling.js | 146 ++++++++---------- 3 files changed, 85 insertions(+), 117 deletions(-) diff --git a/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js b/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js index 4b59e7f9..1067ab82 100644 --- a/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js +++ b/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js @@ -49,7 +49,7 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata }) => { }; return ( - +
{

You’ve been able to visualize and inspect your night of sleep, which we’ve classified only based on your EEG - recordings. In a sleep lab, electrophysiology technicians generally look at your EEG, EOG and submental EMG, and - then manually classify each epoch of 30 seconds that compose your night. By looking at your EEG recordings, we - can see some patterns that can help electrophysiology technicians, and our classifier, discriminate sleep stages - throughout the night. + recordings. In a sleep lab, electrophysiology technologists generally look at your EEG, EOG and submental EMG, + and then manually classify each epoch of 30 seconds that compose your night. By looking at your EEG recordings, + we can see some patterns that can help electrophysiology technologists, and our classifier, discriminate sleep + stages throughout the night.

); @@ -105,53 +105,37 @@ const SleepAnalysisResults = ({ location }) => {

Spectrogram

- Above, we can see the same chart from the first visualization, which represents your sleep stages through the - night. Below it, there are spectrograms of both your EEG channels. Spectrograms can be viewed as if we took all - of your nights signal, we’ve separated it in contiguous 30 seconds chunks, stacked then horizontally and to - which we’ve applied the fast fourier transform. We then have, for each 30 seconds epoch, the corresponding - amplitudes for each frequency that makes up the signal, hence the spectra. We then converted the scale to - logarithmic, to better see the differences in the spectrums. We then speak of signal power instead of signal - amplitude, because we look at the spectrums in a logarithmic scale. + Below are represented spectrograms of both your EEG channels. Spectrograms can be viewed as if we took all of + your signals, we’ve separated it in contiguous 30 seconds chunks, stacked then horizontally and to which we’ve + applied the fast fourier transform. We then have, for each 30 seconds epoch, the corresponding amplitudes for + each frequency that makes up the signal, hence the spectra.

- How to read it? + We then converted the scale to logarithmic, to better see the differences in the spectrums. We then speak of + signal power instead of signal amplitude, because we look at the spectrums in a logarithmic scale.

+
How to read it?

- Red therefore means that in that 30 seconds time frame, that particular frequency had a big amplitude. Green - means that you had that frequency with a lower amplitude. Dark blue means that you didn’t have that frequency in + Yellow therefore means that in that 30 seconds time frame, that particular frequency had a big amplitude. Pink + means that you had that frequency with a lower amplitude. Purple means that you didn’t have that frequency in the signal.

- To get a better understanding at how spectrograms work, you can check out - - {' '} - this visualization{' '} + To get a better understanding at how spectrograms work, you can{' '} + + check out this example - that decomposes sound frequency from your microphone. +  that decomposes sound frequency from your microphone.

); const spectrogramOutro = ( -

- Generally, when talking about brain waves, we group certain frequencies together into bands. There are overall - five frequency bands, where each has a general associated behaviour, or state of mind. We will cover those when - looking at time frames corresponding to each sleep stage. -

-

- We can associate wake stages with low-amplitude activity in the 15 to 60 Hz frequency range, called the beta - band. By slowly falling asleep, the signal frequencies tend to decrease into the 4 to 8 Hz range, or the theta - band, and to have larger amplitudes. These characteristics are associated with N1. N2 stage has the same - characteristics, and also includes sleep spindles. They last only a few seconds and are a large oscillation in - the 10 to 15 hz band. Because they do not occur during all of the 30 seconds period, they cannot be seen here. - Stage N3, also called slow wave sleep, is characterized by slower waves between 0.5 and 4 Hz, known as the delta - range, with large amplitudes. REM stage has the same characteristics as Wake stage, whereas there are low - voltage high frequency activity. -

+

BLABLABLA

 ); const callToAction = ( - +

Wanna know how accurate this data is?

diff --git a/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js b/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js index c62be124..f3060109 100644 --- a/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js +++ b/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import { Container, Card, CardBody } from 'reactstrap'; +import { Container, Card, CardBody, Row } from 'reactstrap'; import createSpectrogram, { spectrogramCallbacks } from '../../d3/spectrogram/spectrogram'; import D3ComponentScrollyTelling from '../../components/d3component_scrollytelling'; @@ -10,7 +10,7 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => { const [isInitialized, setIsInitialized] = useState(false); return ( - +
{ />
- - -

- Here is represented spectrograms of both your EEG channels. Spectrograms can be viewed as if we took all of - your nights signal, we’ve separated it in contiguous 30 seconds chunks, stacked then horizontally and to - which we’ve applied the fast fourier transform. We then have, for each 30 seconds epoch, the corresponding - amplitudes for each frequency that makes up the signal, hence the spectra. -

-

- We then converted the scale to logarithmic, to better see the differences in the spectrums. We then speak of - signal power instead of signal amplitude, because we look at the spectrums in a logarithmic scale. -

-
How to read it?
-

- Red therefore means that in that 30 seconds time frame, that particular frequency had a big amplitude. Green - means that you had that frequency with a lower amplitude. Dark blue means that you didn’t have that - frequency in the signal. -

-

- To get a better understanding at how spectrograms work, you can{' '} - - check out this example - {' '} - that decomposes sound frequency from your microphone. -

- - -
- - -

- Generally, when talking about brain waves, we group certain frequencies together into bands. There are - overall five frequency bands, where each has a general associated behaviour, or state of mind. We will cover - those when looking at time frames corresponding to each sleep stage. -

- - + + + +

+ Generally, when talking about brain waves, we group certain frequencies together into bands. There are + overall five frequency bands, where each has a general associated behaviour, or state of mind. We will + cover those when looking at time frames corresponding to each sleep stage. +

+ + + {isInitialized && }
- - -

- We can associate wake stages with low-amplitude activity in the 15 to 60 Hz frequency range, called the beta - band. [6] -

- - + + + +

+ We can associate wake stages with low-amplitude activity in the 15 to 60 Hz frequency range, called the + beta band. [6] +

+ + + {isInitialized && }
- - -

- By slowly falling asleep, the signal frequencies tend to decrease into the 4 to 8 Hz range, or the theta - band, and to have larger amplitudes. These characteristics are associated with N1. -

- - + + + +

+ By slowly falling asleep, the signal frequencies tend to decrease into the 4 to 8 Hz range, or the theta + band, and to have larger amplitudes. These characteristics are associated with N1. +

+ + + {isInitialized && }
- - -

- N2 stage has the same characteristics as N1, and also includes sleep spindles. They last only a few seconds - and are a large oscillation in the 10 to 15 hz band. Because they do not occur during all of the 30 seconds - period, they cannot be seen here. [6] -

- - + + + +

+ N2 stage has the same characteristics as N1, and also includes sleep spindles. They last only a few + seconds and are a large oscillation in the 10 to 15 hz band. Because they do not occur during all of the + 30 seconds period, they cannot be seen here. [6] +

+ + + {isInitialized && }
- - -

- Stage N3, also called slow wave sleep, is characterized by slower waves between 0.5 and 4 Hz, known as the - delta range, with large amplitudes. [6] -

- - + + + +

+ Stage N3, also called slow wave sleep, is characterized by slower waves between 0.5 and 4 Hz, known as the + delta range, with large amplitudes. [6] +

+ + + {isInitialized && }
- - -

- REM stage has the same characteristics as Wake stage, whereas there are low voltage high frequency activity. - [6] -

- - -
+ + + +

+ REM stage has the same characteristics as Wake stage, whereas there are low voltage high frequency + activity. [6] +

+ + + +
  ); From 293f76e2e0402a379c83be60c9154b0bf7dc3a59 Mon Sep 17 00:00:00 2001 From: Claudia Onorato Date: Sat, 21 Nov 2020 22:51:30 -0500 Subject: [PATCH 11/40] fixed rem latency in server (time between sleep onset & first rem) --- backend/backend/metric.py | 16 +++++++++++----- backend/tests/test_response.py | 4 ++-- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/backend/backend/metric.py b/backend/backend/metric.py index c9c5615a..e0ab48f0 100644 --- a/backend/backend/metric.py +++ b/backend/backend/metric.py @@ -106,11 +106,11 @@ def _rem_onset(self): return rem_latency + self.bedtime def _initialize_sleep_offset(self): - if not self.has_slept: - sleep_offset = None - else: + if self.has_slept: sleep_nb_epochs = (self.sleep_indexes[-1] + 1) if len(self.sleep_indexes) else len(self.sleep_stages) sleep_offset = sleep_nb_epochs * EPOCH_DURATION + self.bedtime + else: + sleep_offset = None self._sleep_offset = sleep_offset @@ -118,8 +118,14 @@ def _initialize_sleep_latency(self): self._sleep_latency = self._get_latency_of_stage(self.is_sleeping_stages) def _initialize_rem_latency(self): - """Time it took to enter REM stage""" - self._rem_latency = self._get_latency_of_stage(self.sleep_stages == SleepStage.REM.name) + """Time from the sleep onset to the first epoch of REM sleep""" + if self.has_slept: + bedtime_to_rem_duration = self._get_latency_of_stage(self.sleep_stages == SleepStage.REM.name) + rem_latency = bedtime_to_rem_duration - self._sleep_latency if bedtime_to_rem_duration is not None else None + else: + rem_latency = None + + self._rem_latency = rem_latency def _initialize_transition_based_metrics(self): consecutive_stages_occurences = Counter(zip(self.sleep_stages[:-1], self.sleep_stages[1:])) diff --git a/backend/tests/test_response.py b/backend/tests/test_response.py index 44cfee2e..dcd4e905 100644 --- a/backend/tests/test_response.py +++ b/backend/tests/test_response.py @@ -157,7 +157,7 @@ class TestReportLatenciesOnset(): dict( sequence=['W', 'N1', 'N2', 'N1', 'REM', 'W'], test_rem=True, - latency=4 * EPOCH_DURATION, + latency=3 * EPOCH_DURATION, ), dict( sequence=['W', 'W', 'N1', 'W', 'N1', 'W'], test_rem=False, @@ -189,7 +189,7 @@ def test_sequence_has_no_stage(self, sequence, test_rem): self.assert_latency_equals_expected(expected_latency, expected_onset, sequence, test_rem) def test_sequence_ends_with_stage(self, sequence, test_rem): - expected_latency = EPOCH_DURATION * (len(sequence) - 1) + expected_latency = EPOCH_DURATION * (len(sequence) - 1) if not test_rem else 0 expected_onset = expected_latency + self.MOCK_REQUEST.bedtime self.assert_latency_equals_expected(expected_latency, expected_onset, sequence, test_rem) From 3d1ee758c6dad773ed6e3499e67f5ff492d40360 Mon Sep 17 00:00:00 2001 From: Claudia Onorato Date: Sat, 21 Nov 2020 23:37:32 -0500 Subject: [PATCH 12/40] extracted metrics --- .../evolving_chart_scrollytelling.js | 53 ++++++++----------- web/src/views/sleep_analysis_results/index.js | 20 ++++--- .../views/sleep_analysis_results/metric.js | 37 +++++++++++++ .../sleep_mechanisms.js | 10 +++- .../spectrogram_scrollytelling.js | 26 ++++----- 5 files changed, 96 insertions(+), 50 deletions(-) create mode 100644 web/src/views/sleep_analysis_results/metric.js diff --git a/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js b/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js index 1067ab82..7a08405f 100644 --- a/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js +++ b/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js @@ -13,6 +13,7 @@ import createEvolvingChart, { stackedBarChartCallbacks, } from 'd3/evolving_chart/evolving_chart'; import { STAGES_ORDERED } from 'd3/constants'; +import Metric from './metric'; const EvolvingChartScrollyTelling = ({ epochs, report, metadata }) => { const [isInitialized, setIsInitialized] = useState(false); @@ -20,6 +21,7 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata }) => { const { bedTime, wakeUpTime, totalBedTime } = metadata; const { efficientSleepTime, + sleepTime, sleepOnset, sleepOffset, sleepLatency, @@ -34,20 +36,6 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata }) => { const numberStagesTraversed = _.filter(sleepStageTimes, (time) => time > 0).length; const mostProminentStage = _.maxBy(_.keys(sleepStageTimes), (stage) => sleepStageTimes[stage]); - const Metric = ({ children }) => ( - - {children} - - ); - - const getTimeString = (numberSecondsUTC) => {new Date(numberSecondsUTC * 1000).toLocaleTimeString()}; - const getDurationString = (numberSeconds) => { - const nbHours = Math.floor(numberSeconds / 3600); - const nbMinutes = Math.floor((numberSeconds % 3600) / 60); - - return {nbHours > 0 ? `${nbHours} hours and ${nbMinutes} minutes` : `${nbMinutes} minutes`}; - }; - return (
@@ -64,11 +52,15 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata }) => {

We can see that each colored block represents a part of your night. This timeline starts at your bed time, - so {getTimeString(bedTime)}, and ends at the time you got out of bed, whereas {getTimeString(wakeUpTime)}. - Of this total time, you spent {getDurationString(efficientSleepTime)} actually sleeping. You first fell - asleep at {getTimeString(sleepOnset)}, to which we will refer to as sleep onset. You woke up at{' '} - {getTimeString(sleepOffset)}, which can also be referred to as sleep offset. During that night's sleep, - you went through {numberStagesTraversed} different stages. Let's take a look at them. + so {bedTime}, and ends at the time you got out of bed, whereas{' '} + {wakeUpTime}. Out of this {sleepTime}, you spent{' '} + {efficientSleepTime} actually sleeping. +

+

+ You first fell asleep at {sleepOnset}, to which we will refer to as sleep onset. + You woke up at {sleepOffset}, which can also be referred to as sleep offset. + During that night's sleep, you went through {numberStagesTraversed} different stages. + Let's take a look at them.

@@ -81,21 +73,21 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata }) => {

- You spent {getDurationString(report.WTime)} awake through your night. This duration is, in a sleep report, - usually decomposed as three different components. + You spent {report.WTime} awake through your night. This duration is, in a + sleep report, usually decomposed as three different components.

First, sleep latency corresponds to the time you spend in bed before first falling - asleep, which here is {getDurationString(sleepLatency)}. + asleep, which here is {sleepLatency}.

Secondly, wake after sleep onset, often abbreviated as WASO, is the time spent awake - after first falling asleep and before waking up. In your case, it corresponds to {getDurationString(WASO)} - . + after first falling asleep and before waking up. In your case, it corresponds to{' '} + {WASO}.

Thirdly, the time you spend in bed after waking up and getting out of bed, here being{' '} - {getDurationString(wakeAfterSleepOffset)}, is called wake after sleep offset. + {wakeAfterSleepOffset}, is called wake after sleep offset.

@@ -156,13 +148,14 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata }) => {

We are currently looking at your in bed sleep stage proportions. Wake time may be overrepresented, because - it includes your sleep latency ({getDurationString(sleepLatency)}) and the time you spent in bed after - waking up ({getDurationString(wakeAfterSleepOffset)}). + it includes your sleep latency ({sleepLatency}) and the time you spent in bed + after waking up ({wakeAfterSleepOffset}).

We can see that your most prominent sleep stage is {mostProminentStage}, which in your - case corresponds to {getDurationString(sleepStageTimes[mostProminentStage])}. Usually, the most - prominent sleep stage is {mostProminentStage === 'N2' && ', as it is in your case, '}N2. + case corresponds to {sleepStageTimes[mostProminentStage]}. Usually, the + most prominent sleep stage is{' '} + {mostProminentStage === 'N2' && ', as it is in your case, '}N2.

@@ -175,7 +168,7 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata }) => { From here, we can also look at your sleep efficiency, which is the proportion of time spent asleep over the overall time spent in bed. In your case, it corresponds to  {(sleepEfficiency * 100).toFixed()}%, or  - {getDurationString(sleepEfficiency * totalBedTime)}. + {sleepEfficiency * totalBedTime}.

diff --git a/web/src/views/sleep_analysis_results/index.js b/web/src/views/sleep_analysis_results/index.js index a87be57c..dc6c8511 100644 --- a/web/src/views/sleep_analysis_results/index.js +++ b/web/src/views/sleep_analysis_results/index.js @@ -18,6 +18,7 @@ import previewSequence from 'assets/data/predicted_william_cyton'; import './style.css'; import SleepMechanisms from './sleep_mechanisms'; import TipsToImproveSleep from './improve_sleep_tips'; +import Metric from './metric'; const SleepAnalysisResults = ({ location }) => { const [response] = useGlobalState('response'); @@ -76,16 +77,23 @@ const SleepAnalysisResults = ({ location }) => { const hypnogramIntro = (

Hypnogram

-

+

A hypnogram allows you to visually inspect the evolution of your night, through time. The vertical axis represents how hard it is to wake up, namely the sleep deepness. We see that REM is one of the lightest sleep stages (along with N1), because we unknowingly wake up from that stage. Those short periods of arousal often last no longer than 15 seconds, are followed by a lighter sleep stage, and cannot be remembered the next - morning. If they are too frequent, they can affect your sleep quality. [5] We can see that, throughout the - night, stages follow about the same pattern, whereas we go from NREM (either N1, N2 and N3) and then to REM, and - so on. We call those sleep cycles, and those typically range from four to six, each one lasting from 90 to 110 - minutes. Another commonly looked at measurement is the time between sleep onset and the first REM epoch, namely - REM latency, which corresponds to 20 minutes. + morning. If they are too frequent, they can affect your sleep quality. Considering that we only have a 30 + seconds resolution, as we scored the night for each 30 seconds epochs, we can see that you have woken up{' '} + {report.awakenings} times. +

+

+ We can also see that, throughout the night, stages follow about the same pattern, whereas we go from NREM + (either N1, N2 and N3) and then to REM, and so on. We call those sleep cycles, and those typically range from + four to six, each one lasting from 1 hour and a half to almost 2 hours. Another commonly looked at measurement + is the time between sleep onset and the first REM epoch, namely REM latency, which corresponds to{' '} + {report.remLatency}. It can be interesting as paradoxical sleep{' '} + is very sensitive to the effects of medication, sleep deprivation, and circadian rhythm disorders{' '} + (Shrivastava et al., “How to Interpret the Results of a Sleep Study.”).

); diff --git a/web/src/views/sleep_analysis_results/metric.js b/web/src/views/sleep_analysis_results/metric.js new file mode 100644 index 00000000..f7f7d02e --- /dev/null +++ b/web/src/views/sleep_analysis_results/metric.js @@ -0,0 +1,37 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const Metric = ({ isTime, isDuration, children }) => { + const getTimeString = (numberSecondsUTC) => new Date(numberSecondsUTC * 1000).toLocaleTimeString(); + const getDurationString = (numberSeconds) => { + const nbHours = Math.floor(numberSeconds / 3600); + const nbMinutes = Math.floor((numberSeconds % 3600) / 60); + + return nbHours > 0 ? `${nbHours} hours and ${nbMinutes} minutes` : `${nbMinutes} minutes`; + }; + + let content = children; + if (isTime) { + content = getTimeString(children); + } else if (isDuration) { + content = getDurationString(children); + } + + return ( + + {content} + + ); +}; + +Metric.propTypes = { + isTime: PropTypes.bool, + isDuration: PropTypes.bool, +}; + +Metric.defaultProps = { + isTime: false, + isDuration: false, +}; + +export default Metric; diff --git a/web/src/views/sleep_analysis_results/sleep_mechanisms.js b/web/src/views/sleep_analysis_results/sleep_mechanisms.js index c77df4b4..aa1fe439 100644 --- a/web/src/views/sleep_analysis_results/sleep_mechanisms.js +++ b/web/src/views/sleep_analysis_results/sleep_mechanisms.js @@ -23,7 +23,15 @@ const SleepMechanisms = () => ( + Sleep homeostasis is a biological regulatory process that rules over how much sleep time and intensity you + need to get. It is tightly coupled with the sleep debt concept as the more you are awake, the more + and the deeper you'll need to eventually sleep. One of the main factors that explains this comes from the + adenosine cycle. When you are awake, the level of adenosine continuously increases in the brain. When we + sleep, it is the opposite, it continuously falls. +

+ } /> diff --git a/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js b/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js index f3060109..1b9af7ef 100644 --- a/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js +++ b/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js @@ -21,8 +21,8 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => { />
- - + +

Generally, when talking about brain waves, we group certain frequencies together into bands. There are @@ -34,20 +34,20 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => { {isInitialized && }

- - + +

We can associate wake stages with low-amplitude activity in the 15 to 60 Hz frequency range, called the - beta band. [6] + beta band. [6] This means you should be able to see, between 15 to 60 Hz, predominantly pink-ish colors.

{isInitialized && }
- - + +

By slowly falling asleep, the signal frequencies tend to decrease into the 4 to 8 Hz range, or the theta @@ -58,8 +58,8 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => { {isInitialized && }

- - + +

N2 stage has the same characteristics as N1, and also includes sleep spindles. They last only a few @@ -71,8 +71,8 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => { {isInitialized && }

- - + +

Stage N3, also called slow wave sleep, is characterized by slower waves between 0.5 and 4 Hz, known as the @@ -83,8 +83,8 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => { {isInitialized && }

- - + +

REM stage has the same characteristics as Wake stage, whereas there are low voltage high frequency From e16613ea1dd6c265bb8030f163c04d8cb6b09e71 Mon Sep 17 00:00:00 2001 From: Claudia Onorato Date: Sun, 22 Nov 2020 00:56:39 -0500 Subject: [PATCH 13/40] added recommanded time sleep --- .../evolving_chart_scrollytelling.js | 17 ++++++-- web/src/views/sleep_analysis_results/index.js | 42 +++++++++++++++---- .../sleep_mechanisms.js | 13 +++--- 3 files changed, 56 insertions(+), 16 deletions(-) diff --git a/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js b/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js index 7a08405f..46a12da7 100644 --- a/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js +++ b/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js @@ -15,7 +15,7 @@ import createEvolvingChart, { import { STAGES_ORDERED } from 'd3/constants'; import Metric from './metric'; -const EvolvingChartScrollyTelling = ({ epochs, report, metadata }) => { +const EvolvingChartScrollyTelling = ({ epochs, report, metadata, subject }) => { const [isInitialized, setIsInitialized] = useState(false); const { bedTime, wakeUpTime, totalBedTime } = metadata; @@ -35,7 +35,10 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata }) => { ); const numberStagesTraversed = _.filter(sleepStageTimes, (time) => time > 0).length; const mostProminentStage = _.maxBy(_.keys(sleepStageTimes), (stage) => sleepStageTimes[stage]); - + const recommendedSleepStage = + parseInt(subject.age) > 18 + ? 'an adult should sleep more than 7 hours per night to promote optimal health [Watson and al., 2015]' + : 'teenagers, from 13 to 18 years of age, should sleep 8 to 10 hours on a regular basis to promote optimal health [Paruthi and al., 2016]'; return (

@@ -54,8 +57,16 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata }) => { We can see that each colored block represents a part of your night. This timeline starts at your bed time, so {bedTime}, and ends at the time you got out of bed, whereas{' '} {wakeUpTime}. Out of this {sleepTime}, you spent{' '} - {efficientSleepTime} actually sleeping. + {efficientSleepTime} actually sleeping. According to the American Academy of + Sleep Medicine, {recommendedSleepStage}.

+ + + +
+ + +

You first fell asleep at {sleepOnset}, to which we will refer to as sleep onset. You woke up at {sleepOffset}, which can also be referred to as sleep offset. diff --git a/web/src/views/sleep_analysis_results/index.js b/web/src/views/sleep_analysis_results/index.js index dc6c8511..95eac105 100644 --- a/web/src/views/sleep_analysis_results/index.js +++ b/web/src/views/sleep_analysis_results/index.js @@ -34,7 +34,7 @@ const SleepAnalysisResults = ({ location }) => { ); } const data = isPreviewMode ? previewSequence : response.data; - const { epochs, report, metadata } = data; + const { epochs, report, metadata, subject } = data; const encodedJsonEpochs = encodeURIComponent(JSON.stringify(data.epochs)); const sleepAnalysisIntro = ( @@ -76,8 +76,8 @@ const SleepAnalysisResults = ({ location }) => { const hypnogramIntro = ( -

Hypnogram

-

+

Hypnogram

+

A hypnogram allows you to visually inspect the evolution of your night, through time. The vertical axis represents how hard it is to wake up, namely the sleep deepness. We see that REM is one of the lightest sleep stages (along with N1), because we unknowingly wake up from that stage. Those short periods of arousal often @@ -93,7 +93,7 @@ const SleepAnalysisResults = ({ location }) => { is the time between sleep onset and the first REM epoch, namely REM latency, which corresponds to{' '} {report.remLatency}. It can be interesting as paradoxical sleep{' '} is very sensitive to the effects of medication, sleep deprivation, and circadian rhythm disorders{' '} - (Shrivastava et al., “How to Interpret the Results of a Sleep Study.”). + [Shrivastava and al., 2014].

); @@ -111,8 +111,8 @@ const SleepAnalysisResults = ({ location }) => { const spectrogramIntro = ( -

Spectrogram

-

+

Spectrogram

+

Below are represented spectrograms of both your EEG channels. Spectrograms can be viewed as if we took all of your signals, we’ve separated it in contiguous 30 seconds chunks, stacked then horizontally and to which we’ve applied the fast fourier transform. We then have, for each 30 seconds epoch, the corresponding amplitudes for @@ -122,7 +122,7 @@ const SleepAnalysisResults = ({ location }) => { We then converted the scale to logarithmic, to better see the differences in the spectrums. We then speak of signal power instead of signal amplitude, because we look at the spectrums in a logarithmic scale.

-
How to read it?
+

How to read it?

Yellow therefore means that in that 30 seconds time frame, that particular frequency had a big amplitude. Pink means that you had that frequency with a lower amplitude. Purple means that you didn’t have that frequency in @@ -170,6 +170,31 @@ const SleepAnalysisResults = ({ location }) => { ); + const references = ( + + +

+ [Paruthi and al., 2016] S. Paruthi, L. J. Brooks, C. Dambrosio, W. A. Hall, S. Kotagal, R. M. Lloyd, B. A. + Malow, K. Maski, C. Nichols, S. F. Quan, C. L. Rosen, M. M. Troester, and M. S. Wise, “Recommended Amount of + Sleep for Pediatric Populations: A Consensus Statement of the American Academy of Sleep Medicine,” Journal of + Clinical Sleep Medicine, vol. 12, no. 06, pp. 785–786, 2016. +
+
+ [Watson and al., 2015] N. F. Watson, M. S. Badr, G. Belenky, D. L. Bliwise, O. M. Buxton, D. Buysse, D. F. + Dinges, J. Gangwisch, M. A. Grandner, C. Kushida, R. K. Malhotra, J. L. Martin, S. R. Patel, S. F. Quan, and + E. Tasali, “Recommended Amount of Sleep for a Healthy Adult: A Joint Consensus Statement of the American + Academy of Sleep Medicine and Sleep Research Society,” Journal of Clinical Sleep Medicine, vol. 11, no. 06, + pp. 591–592, 2015. +
+
+ [Shrivastava and al., 2014] D. Shrivastava, S. Jung, M. Saadat, R. Sirohi, and K. Crewson, “How to interpret + the results of a sleep study,” Journal of Community Hospital Internal Medicine Perspectives, vol. 4, no. 5, p. + 24983, 2014. +
+ + + ); + return ( <>
{ description={text['header_description']} /> {sleepAnalysisIntro} - + {evolvingChartOutro} {hypnogramIntro} @@ -191,6 +216,7 @@ const SleepAnalysisResults = ({ location }) => { {spectrogramOutro} {callToAction} + {references} ); }; diff --git a/web/src/views/sleep_analysis_results/sleep_mechanisms.js b/web/src/views/sleep_analysis_results/sleep_mechanisms.js index aa1fe439..1d83240c 100644 --- a/web/src/views/sleep_analysis_results/sleep_mechanisms.js +++ b/web/src/views/sleep_analysis_results/sleep_mechanisms.js @@ -12,11 +12,14 @@ const SleepMechanisms = () => ( + This is your biological clock! It is a self-sustained internal proccess responsable for regulating your + sleep and wake cycles every 24 hours. This is why you feel sleepy at night and awake during the day. Some + habits or events may have an influence on these rhythms. Sleep cycles then take place in these broader + processes. +

+ } /> From b6f9624b713547d5d3bb11444983ea75ef3002b2 Mon Sep 17 00:00:00 2001 From: Claudia Onorato Date: Sun, 22 Nov 2020 01:10:53 -0500 Subject: [PATCH 14/40] reviewed spectro --- web/src/d3/spectrogram/constants.js | 2 +- .../sleep_analysis_results/spectrogram_scrollytelling.js | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/web/src/d3/spectrogram/constants.js b/web/src/d3/spectrogram/constants.js index 9b1a7f8d..8b2b7198 100644 --- a/web/src/d3/spectrogram/constants.js +++ b/web/src/d3/spectrogram/constants.js @@ -3,7 +3,7 @@ export const NB_SPECTROGRAM = 2; export const FREQUENCY_KEY = 'frequencies'; export const HYPNOGRAM_KEY = 'epochs'; export const NB_POINTS_COLOR_INTERPOLATION = 3; -export const NOT_HIGHLIGHTED_RECTANGLE_OPACITY = 0.5; +export const NOT_HIGHLIGHTED_RECTANGLE_OPACITY = 0.7; export const CANVAS_WIDTH_TO_HEIGHT_RATIO = 700 / 1000; // width to height ratio export const CANVAS_HEIGHT_WINDOW_FACTOR = 0.8; export const MARGIN = { diff --git a/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js b/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js index 1b9af7ef..e9278a2d 100644 --- a/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js +++ b/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js @@ -51,7 +51,8 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => {

By slowly falling asleep, the signal frequencies tend to decrease into the 4 to 8 Hz range, or the theta - band, and to have larger amplitudes. These characteristics are associated with N1. + band, and to have larger amplitudes. You should then see more yellow in the the specified frequency band + range. These characteristics are associated with N1.

@@ -76,7 +77,7 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => {

Stage N3, also called slow wave sleep, is characterized by slower waves between 0.5 and 4 Hz, known as the - delta range, with large amplitudes. [6] + delta range, with large amplitudes. [6] There should then be bright yellow at the lower freqency range.

@@ -88,7 +89,7 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => {

REM stage has the same characteristics as Wake stage, whereas there are low voltage high frequency - activity. [6] + activity. This means you should once again be able to see, between 15 to 60 Hz, pink-ish colors.

From b14f3c8faff241b31fafd0ea8bd05dfe28233995 Mon Sep 17 00:00:00 2001 From: Claudia Onorato Date: Sun, 22 Nov 2020 01:16:51 -0500 Subject: [PATCH 15/40] added spectro references --- web/src/views/sleep_analysis_results/index.js | 4 ++++ .../spectrogram_scrollytelling.js | 15 +++++++++------ 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/web/src/views/sleep_analysis_results/index.js b/web/src/views/sleep_analysis_results/index.js index 95eac105..fc3ab20d 100644 --- a/web/src/views/sleep_analysis_results/index.js +++ b/web/src/views/sleep_analysis_results/index.js @@ -191,6 +191,10 @@ const SleepAnalysisResults = ({ location }) => { the results of a sleep study,” Journal of Community Hospital Internal Medicine Perspectives, vol. 4, no. 5, p. 24983, 2014.
+
+ [D. Purves et al., 2001] D. Purves et al., “Stages of Sleep,” Neuroscience. 2nd edition, 2001, Accessed: Nov. + 22, 2020. [Online]. Available: https://www.ncbi.nlm.nih.gov/books/NBK10996/. +
); diff --git a/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js b/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js index e9278a2d..d0674953 100644 --- a/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js +++ b/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js @@ -39,7 +39,8 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => {

We can associate wake stages with low-amplitude activity in the 15 to 60 Hz frequency range, called the - beta band. [6] This means you should be able to see, between 15 to 60 Hz, predominantly pink-ish colors. + beta band [D. Purves et al., 2001]. This means you should be able to see, between 15 to 60 Hz, + predominantly pink-ish colors.

@@ -51,8 +52,8 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => {

By slowly falling asleep, the signal frequencies tend to decrease into the 4 to 8 Hz range, or the theta - band, and to have larger amplitudes. You should then see more yellow in the the specified frequency band - range. These characteristics are associated with N1. + band, and to have larger amplitudes [D. Purves et al., 2001]. You should then see more yellow in the the + specified frequency band range. These characteristics are associated with N1.

@@ -65,7 +66,7 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => {

N2 stage has the same characteristics as N1, and also includes sleep spindles. They last only a few seconds and are a large oscillation in the 10 to 15 hz band. Because they do not occur during all of the - 30 seconds period, they cannot be seen here. [6] + 30 seconds period, they cannot be seen here [D. Purves et al., 2001].

@@ -77,7 +78,8 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => {

Stage N3, also called slow wave sleep, is characterized by slower waves between 0.5 and 4 Hz, known as the - delta range, with large amplitudes. [6] There should then be bright yellow at the lower freqency range. + delta range, with large amplitudes [D. Purves et al., 2001]. There should then be bright yellow at the + lower freqency range.

@@ -89,7 +91,8 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => {

REM stage has the same characteristics as Wake stage, whereas there are low voltage high frequency - activity. This means you should once again be able to see, between 15 to 60 Hz, pink-ish colors. + activity [D. Purves et al., 2001]. This means you should once again be able to see, between 15 to 60 Hz, + pink-ish colors.

From ffd543115201a3f30776f8be67439f6117afcdf0 Mon Sep 17 00:00:00 2001 From: Claudia Onorato Date: Sun, 22 Nov 2020 01:30:20 -0500 Subject: [PATCH 16/40] support wake sleep sequence --- web/src/views/sleep_analysis_results/metric.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/web/src/views/sleep_analysis_results/metric.js b/web/src/views/sleep_analysis_results/metric.js index f7f7d02e..0a38946a 100644 --- a/web/src/views/sleep_analysis_results/metric.js +++ b/web/src/views/sleep_analysis_results/metric.js @@ -11,10 +11,11 @@ const Metric = ({ isTime, isDuration, children }) => { }; let content = children; + if (isTime) { - content = getTimeString(children); + content = content !== null ? getTimeString(children) : 'never'; } else if (isDuration) { - content = getDurationString(children); + content = content !== null ? getDurationString(children) : '0 minutes'; } return ( From 32ccc0dd17a8009e6468a3ddebca1941877d145a Mon Sep 17 00:00:00 2001 From: Claudia Onorato Date: Sun, 22 Nov 2020 01:48:57 -0500 Subject: [PATCH 17/40] fixed labels and rectangle width issues --- web/src/d3/evolving_chart/chart_states.js | 25 ++++++++++++++--------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/web/src/d3/evolving_chart/chart_states.js b/web/src/d3/evolving_chart/chart_states.js index 273c88fe..51826085 100644 --- a/web/src/d3/evolving_chart/chart_states.js +++ b/web/src/d3/evolving_chart/chart_states.js @@ -11,6 +11,7 @@ export const createTimelineChartCallbacks = (g, xTime, xTimeAxis, color, tooltip Object({ fromInitial: () => { const annotationRects = g.selectAll('.rect-stacked').interrupt(); + g.selectAll('text.proportion').remove(); setAttrOnAnnotationRects(annotationRects, xTime, 0, color, tooltip); @@ -21,7 +22,7 @@ export const createTimelineChartCallbacks = (g, xTime, xTimeAxis, color, tooltip }, fromInstance: () => { const annotationRects = g.selectAll('.rect-stacked').interrupt(); - + g.selectAll('text.proportion').remove(); g.selectAll('.y.visualization__axis').remove(); setAttrOnAnnotationRects(annotationRects, xTime, 0, color, tooltip); @@ -34,6 +35,7 @@ export const createInstanceChartCallbacks = (g, data, xTime, xTimeAxis, yAxis, c Object({ fromTimeline: () => { const annotationRects = g.selectAll('.rect-stacked').interrupt(); + g.selectAll('text.proportion').remove(); createVerticalAxis(g, yAxis, color); transitionHorizontalAxis(g, STAGES_ORDERED.length * BAR_HEIGHT); @@ -56,7 +58,6 @@ export const createInstanceChartCallbacks = (g, data, xTime, xTimeAxis, yAxis, c export const createBarChartCallbacks = (g, data, xAxisLinear, yAxis, color, tip) => Object({ fromInstance: () => { - const { firstStageIndexes, stageTimeProportions } = data; const annotationRects = g.selectAll('.rect-stacked').interrupt(); const xProportionCallback = getOffsetSleepStageProportionCallback(data); @@ -68,13 +69,7 @@ export const createBarChartCallbacks = (g, data, xAxisLinear, yAxis, color, tip) .duration(TRANSITION_TIME_MS) .attr('y', getVerticalPositionCallback) .attr('x', xProportionCallback) - .on('end', () => { - // Only keep the first rectangle of each stage to be visible - g.selectAll('.rect-stacked') - .attr('x', 0) - .attr('width', getFirstRectangleProportionWidthCallback(firstStageIndexes, stageTimeProportions)); - createProportionLabels(g, data); - }); + .on('end', () => setFirstRectangleToBeAsWideAsStageProportion(data, g)); }, fromStackedBarChart: () => { const annotationRects = g.selectAll('.rect-stacked').interrupt(); @@ -90,7 +85,7 @@ export const createBarChartCallbacks = (g, data, xAxisLinear, yAxis, color, tip) .transition() .duration(TRANSITION_TIME_MS / 2) .attr('x', 0) - .on('end', () => createProportionLabels(g, data)); + .on('end', () => setFirstRectangleToBeAsWideAsStageProportion(data, g)); }, }); @@ -147,6 +142,16 @@ const setAttrOnAnnotationRects = (annotationRects, x, yPosition, color, tooltip) .attr('width', ({ end, start }) => x(end) - x(start)) .attr('fill', ({ stage }) => color(stage)); +const setFirstRectangleToBeAsWideAsStageProportion = (data, g) => { + const { firstStageIndexes, stageTimeProportions } = data; + + // Only keep the first rectangle of each stage to be visible + g.selectAll('.rect-stacked') + .attr('x', 0) + .attr('width', getFirstRectangleProportionWidthCallback(firstStageIndexes, stageTimeProportions)); + createProportionLabels(g, data); +}; + const setTooltip = (element, tooltip) => element .on('mouseover', function (d) { From 96121033e625fd212f974d75c930fd0f278712d6 Mon Sep 17 00:00:00 2001 From: Claudia Onorato Date: Sun, 22 Nov 2020 10:43:50 -0500 Subject: [PATCH 18/40] fixed cards responsive --- .../sleep_analysis_results/sleep_mechanisms.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/web/src/views/sleep_analysis_results/sleep_mechanisms.js b/web/src/views/sleep_analysis_results/sleep_mechanisms.js index 1d83240c..2bd2a79c 100644 --- a/web/src/views/sleep_analysis_results/sleep_mechanisms.js +++ b/web/src/views/sleep_analysis_results/sleep_mechanisms.js @@ -6,34 +6,34 @@ import FloatingCard from 'components/floating_card'; import './style.css'; const SleepMechanisms = () => ( - + - + + This is your biological clock! It is a self-sustained internal proccess responsable for regulating your sleep and wake cycles every 24 hours. This is why you feel sleepy at night and awake during the day. Some habits or events may have an influence on these rhythms. Sleep cycles then take place in these broader processes. -

+ } /> - + + Sleep homeostasis is a biological regulatory process that rules over how much sleep time and intensity you need to get. It is tightly coupled with the sleep debt concept as the more you are awake, the more and the deeper you'll need to eventually sleep. One of the main factors that explains this comes from the adenosine cycle. When you are awake, the level of adenosine continuously increases in the brain. When we sleep, it is the opposite, it continuously falls. -

+ } /> From a17e74eeb409a49ca4d211a13e01d8db28f2d4d6 Mon Sep 17 00:00:00 2001 From: Claudia Onorato Date: Sun, 22 Nov 2020 12:01:55 -0500 Subject: [PATCH 19/40] tooltip begins to work --- web/src/d3/evolving_chart/chart_states.js | 12 +++-- web/src/d3/evolving_chart/evolving_chart.js | 7 ++- web/src/d3/evolving_chart/mouse_over.js | 49 ++++++++++++++----- web/src/d3/evolving_chart/style.css | 4 ++ .../evolving_chart_scrollytelling.js | 1 + 5 files changed, 55 insertions(+), 18 deletions(-) diff --git a/web/src/d3/evolving_chart/chart_states.js b/web/src/d3/evolving_chart/chart_states.js index 51826085..e9559ab0 100644 --- a/web/src/d3/evolving_chart/chart_states.js +++ b/web/src/d3/evolving_chart/chart_states.js @@ -155,12 +155,16 @@ const setFirstRectangleToBeAsWideAsStageProportion = (data, g) => { const setTooltip = (element, tooltip) => element .on('mouseover', function (d) { - tooltip.show(d, this); - d3.select(this).style('opacity', 0.8); + console.log(d); + tooltip.mouseover(d); + d3.select(this).style('stroke', 'black').style('opacity', 0.7); + }) + .on('mousemove', function (d) { + tooltip.mousemove(d, d3.mouse(this)); }) .on('mouseout', function () { - tooltip.hide(); - d3.select(this).style('opacity', 1); + tooltip.mouseleave(); + d3.select(this).style('stroke', 'none').style('opacity', 1); }); const getVerticalPositionCallback = (d) => BAR_HEIGHT * STAGES_ORDERED.indexOf(d.stage); diff --git a/web/src/d3/evolving_chart/evolving_chart.js b/web/src/d3/evolving_chart/evolving_chart.js index 02946cf0..ba116128 100644 --- a/web/src/d3/evolving_chart/evolving_chart.js +++ b/web/src/d3/evolving_chart/evolving_chart.js @@ -54,7 +54,10 @@ const bindAnnotationsToRects = (g, annotations) => g.selectAll('.rect').data(annotations).enter().append('rect').attr('class', 'rect-stacked'); const createEvolvingChart = (containerNode, data) => { - const svg = d3.select(containerNode).attr('viewBox', `0, 0, ${CANVAS_DIMENSION.WIDTH}, ${CANVAS_DIMENSION.HEIGHT}`); + const svg = d3 + .select(containerNode) + .append('svg') + .attr('viewBox', `0, 0, ${CANVAS_DIMENSION.WIDTH}, ${CANVAS_DIMENSION.HEIGHT}`); const { xTime, xLinear, y, colors } = initializeScales(); const { xTimeAxis, xLinearAxis, yAxis } = initializeAxes(xTime, xLinear, y); const g = createDrawingGroup(svg); @@ -63,7 +66,7 @@ const createEvolvingChart = (containerNode, data) => { data = preprocessData(data); setDomainOnScales(xTime, xLinear, y, colors, data.epochs); - const { barToolTip, stackedToolTip } = initializeTooltips(svg, data); + const { barToolTip, stackedToolTip } = initializeTooltips(containerNode, data); bindAnnotationsToRects(g, data.annotations); timelineChartCallbacks = createTimelineChartCallbacks(g, xTime, xTimeAxis, colors, barToolTip); diff --git a/web/src/d3/evolving_chart/mouse_over.js b/web/src/d3/evolving_chart/mouse_over.js index e9587828..e994cdfc 100644 --- a/web/src/d3/evolving_chart/mouse_over.js +++ b/web/src/d3/evolving_chart/mouse_over.js @@ -1,24 +1,49 @@ -import tip from 'd3-tip'; +import * as d3 from 'd3'; import './style.css'; import { EPOCH_DURATION_MS } from '../constants'; import { DateTime, Duration } from 'luxon'; -export const initializeTooltips = (svg, data) => { - const barToolTip = initializeTooltip(svg, getBarToolTipText); - const stackedToolTip = initializeTooltip(svg, (d) => - getStackedToolTipText(d, data.stageTimeProportions, data.epochs.length), - ); +export const initializeTooltips = (containerNode, data) => { + // const barToolTip = initializeTooltip(svg, getBarToolTipText); + // const stackedToolTip = initializeTooltip(svg, (d) => + // getStackedToolTipText(d, data.stageTimeProportions, data.epochs.length), + // ); + const barToolTip = initializeTooltip(containerNode, getBarToolTipText); - return { barToolTip, stackedToolTip }; + return { barToolTip, stackedToolTip: barToolTip }; }; -const initializeTooltip = (svg, getToolTipText) => { - const tooltip = tip().attr('class', 'evolving_chart__tooltip').offset([-10, 0]); - svg.call(tooltip); - tooltip.html(getToolTipText); +// const initializeTooltip = (svg, getToolTipText) => { +// const tooltip = tip().attr('class', 'evolving_chart__tooltip').offset([-10, 0]); +// svg.call(tooltip); +// tooltip.html(getToolTipText); - return tooltip; +// return tooltip; +// }; + +const initializeTooltip = (containerNode, getToolTipText) => { + // const tooltip = tip().attr('class', 'evolving_chart__tooltip').offset([-10, 0]); + // svg.call(tooltip); + // tooltip.html(getToolTipText); + var tooltip = d3.select(containerNode).append('div').style('opacity', 1).style('position', 'absolute').html('fsfse'); + + // Three function that change the tooltip when user hover / move / leave a cell + var mouseover = function (d) { + tooltip.html('fsdisdfjisjie').style('opacity', 1).attr('class', 'tooltip'); + }; + var mousemove = function (d, mouse) { + tooltip + .html('fsdisdfjisjifjejiw deewf wedwejie') + // .html(getToolTipText(d)) + .style('left', mouse[0] + 70 + 'px') + .style('top', mouse[1] + 'px'); + }; + var mouseleave = function () { + tooltip.style('opacity', 0); + }; + + return { mouseover, mousemove, mouseleave }; }; const getBarToolTipText = (d) => `Stage : ${d.stage}
diff --git a/web/src/d3/evolving_chart/style.css b/web/src/d3/evolving_chart/style.css index 7654106f..f4ff3e6d 100644 --- a/web/src/d3/evolving_chart/style.css +++ b/web/src/d3/evolving_chart/style.css @@ -4,4 +4,8 @@ border-radius: 2px; color: #0d0d0d; background: rgba(235, 235, 235, 0.9); + width: 10em; + height: 10em; + position: absolute; + z-index: 100; } diff --git a/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js b/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js index 46a12da7..e41d4ec1 100644 --- a/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js +++ b/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js @@ -47,6 +47,7 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata, subject }) => { data={epochs} isInitialized={isInitialized} setIsInitialized={setIsInitialized} + useDiv />
From 517a20156c5ac5f99b726dfe3675847ce2c66156 Mon Sep 17 00:00:00 2001 From: William Harvey Date: Sun, 22 Nov 2020 12:42:19 -0500 Subject: [PATCH 20/40] add content about hormones --- web/src/components/footer/index.js | 2 +- web/src/views/performance/index.js | 2 +- .../electrodes_application_section/index.js | 3 +- .../evolving_chart_scrollytelling.js | 15 +++++----- .../improve_sleep_tips.js | 25 ++++++++++++++--- web/src/views/sleep_analysis_results/index.js | 28 ++++++++++++++----- .../preview_mode_warning.js | 2 +- .../sleep_mechanisms.js | 18 ++++++------ 8 files changed, 64 insertions(+), 31 deletions(-) diff --git a/web/src/components/footer/index.js b/web/src/components/footer/index.js index 7cc0e156..e5d73495 100644 --- a/web/src/components/footer/index.js +++ b/web/src/components/footer/index.js @@ -37,7 +37,7 @@ PlatformButton.defaultProps = { const Copyright = () => { return (
- © {new Date().getFullYear()}{' '} + © {new Date().getFullYear()}  {text['footer_copyright_polycortex']} diff --git a/web/src/views/performance/index.js b/web/src/views/performance/index.js index 027d4e27..ff4a640b 100644 --- a/web/src/views/performance/index.js +++ b/web/src/views/performance/index.js @@ -68,7 +68,7 @@ const Performance = () => {
  • First, we will check how our classifier’s scoring agrees with the scoring within the Physionet's Sleep-EDF dataset. Of course, we will perform this agreement test on a subset of EEG data that was never trained on. - This subset is composed of full nights of sleep coming from five subject of a different age group.{' '} + This subset is composed of full nights of sleep coming from five subject of a different age group. 
  • Then, we will check how this classifier performs on a full night recorded on one of our members. In order to diff --git a/web/src/views/record_my_sleep/sections/electrodes_application_section/index.js b/web/src/views/record_my_sleep/sections/electrodes_application_section/index.js index 28bddf50..ee4e8428 100644 --- a/web/src/views/record_my_sleep/sections/electrodes_application_section/index.js +++ b/web/src/views/record_my_sleep/sections/electrodes_application_section/index.js @@ -37,7 +37,8 @@ const ElectrodesApplicationSection = () => ( -
    • {' '} +
    +  

    How to place the electrodes

    diff --git a/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js b/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js index 46a12da7..32a8158b 100644 --- a/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js +++ b/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js @@ -55,8 +55,8 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata, subject }) => {

    We can see that each colored block represents a part of your night. This timeline starts at your bed time, - so {bedTime}, and ends at the time you got out of bed, whereas{' '} - {wakeUpTime}. Out of this {sleepTime}, you spent{' '} + so {bedTime}, and ends at the time you got out of bed, whereas  + {wakeUpTime}. Out of this {sleepTime}, you spent  {efficientSleepTime} actually sleeping. According to the American Academy of Sleep Medicine, {recommendedSleepStage}.

    @@ -93,11 +93,11 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata, subject }) => {

    Secondly, wake after sleep onset, often abbreviated as WASO, is the time spent awake - after first falling asleep and before waking up. In your case, it corresponds to{' '} + after first falling asleep and before waking up. In your case, it corresponds to  {WASO}.

    - Thirdly, the time you spend in bed after waking up and getting out of bed, here being{' '} + Thirdly, the time you spend in bed after waking up and getting out of bed, here being  {wakeAfterSleepOffset}, is called wake after sleep offset.

    @@ -136,7 +136,7 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata, subject }) => {

    - N3 stage is when you are deeply asleep, hence it’s also called{' '} + N3 stage is when you are deeply asleep, hence it’s also called  deep sleep, or sometimes slow wave sleep, and is the most difficult to wake up from. It is during those stages that your cells get repaired, and that tissue grows.

    @@ -165,7 +165,7 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata, subject }) => {

    We can see that your most prominent sleep stage is {mostProminentStage}, which in your case corresponds to {sleepStageTimes[mostProminentStage]}. Usually, the - most prominent sleep stage is{' '} + most prominent sleep stage is  {mostProminentStage === 'N2' && ', as it is in your case, '}N2.

    @@ -196,7 +196,8 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata, subject }) => {

    As a rule of thumb, adults approximately stay 5% of their total sleep time in N1, 50% in N2 and 20% in N3. - The remaining 25% is spent in the REM stage sleep. + The remaining 25% is spent in the REM stage sleep. A higher proportion of N3 should correspond to an + overall more intense sleep.

    diff --git a/web/src/views/sleep_analysis_results/improve_sleep_tips.js b/web/src/views/sleep_analysis_results/improve_sleep_tips.js index 5785600a..186120ff 100644 --- a/web/src/views/sleep_analysis_results/improve_sleep_tips.js +++ b/web/src/views/sleep_analysis_results/improve_sleep_tips.js @@ -3,13 +3,31 @@ import React from 'react'; const TipsToImproveSleep = () => ( <> -

    In order to improve your sleep hygiene, many elements can be considered:

    +

    + Sleep deficiency increases the risk of health disorders like high blood pressure, cardiovascular disease, + diabetes, depression and obesity. It can also have huge side effects such as a decrease in mental capabilities + like learning, decision making process and problem-solving skills. Sleep deficiency is often caused by sleep + deprivation but can also be due to other factors like out of sync sleep (going to bed out of sync with your + circadian rythm) and getting poor sleep quality (which may be a symptom of sleep disorders such as sleep apnea or + restless legs syndrome). In order to improve your sleep hygiene and get a better and longer sleep, many actions + should be considered: +

    diff --git a/web/src/views/sleep_analysis_results/sleep_mechanisms.js b/web/src/views/sleep_analysis_results/sleep_mechanisms.js index 080de42d..af433b5c 100644 --- a/web/src/views/sleep_analysis_results/sleep_mechanisms.js +++ b/web/src/views/sleep_analysis_results/sleep_mechanisms.js @@ -14,8 +14,8 @@ const SleepMechanisms = () => ( headerText="Circadian Rhythms" bodyText={ - This is your biological clock. It is a self-sustained internal proccess responsable for regulating your - sleep and wake cycles every 24 hours as well as other biological process such as blood pressure, body + This is your biological clock. It is a self-sustained internal process responsible for regulating your + sleep and wake cycles every 24 hours as well as other biological processes such as blood pressure, body temperature and heart activity. This is why you feel sleepy at night and awake during the day. Some habits or events may have an influence on these rhythms. Sleep cycles then take place in these broader processes. @@ -25,14 +25,14 @@ const SleepMechanisms = () => ( Sleep homeostasis is a biological regulatory process that rules over how much sleep time and intensity you need to get. It is tightly coupled with the sleep debt concept as the more you are awake, the more and the deeper you'll need to eventually sleep. The adenosine cycle is suspected to be one of the responsible for this. When you are awake, the level of adenosine continuously increases in the brain. When - we sleep, it is the opposite, it continuously falls. + we sleep, it is the opposite, it continuously falls. This is why coffee makes us feel more energized, as caffeine acts as an adenosine-receptor antagonist [O. Björklund et al., 2008]. } /> diff --git a/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js b/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js index c2d65803..04205eb7 100644 --- a/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js +++ b/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js @@ -26,7 +26,7 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => {

    Generally, when talking about brain waves, we group certain frequencies together into bands. There are - overall five frequency bands, where each has a general associated behaviour, or state of mind. We will + overall five frequency bands, where each has a general associated behaviour, or state of consciousness. We will cover those when looking at time frames corresponding to each sleep stage.

    @@ -74,7 +74,7 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => {

    - By slowly falling asleep, the signal frequencies tend to decrease into the 4 to 8 Hz range, or the theta + While slowly falling asleep, the signal frequencies tend to decrease into the 4 to 8 Hz range, or the theta band, and to have larger amplitudes [D. Purves et al., 2001]. You should then see more yellow in the specified frequency band range. These characteristics are associated with  N1. From 60a36880f59d3282c47026be5614e0107d15b73b Mon Sep 17 00:00:00 2001 From: William Harvey Date: Sun, 22 Nov 2020 19:29:20 -0500 Subject: [PATCH 37/40] remove adenosine explanation in card --- .../evolving_chart_scrollytelling.js | 36 +++++++++---------- web/src/views/sleep_analysis_results/index.js | 13 ++++++- .../sleep_mechanisms.js | 3 +- .../spectrogram_scrollytelling.js | 12 +++---- 4 files changed, 37 insertions(+), 27 deletions(-) diff --git a/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js b/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js index 6a4a4dde..f63db9e5 100644 --- a/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js +++ b/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js @@ -67,9 +67,9 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata, subject }) => { N1,  N2  and  - N3. Each colored block reprensents a part of - your night that was associated to one of these five stages. You may want to hover them as it shows more - details about that part of your night. + N3. Each colored block reprensents a part of your + night that was associated to one of these five stages. You may want to hover them as it shows more details + about that part of your night.

    @@ -107,10 +107,10 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata, subject }) => {

    - You first fell asleep at {sleepOnset}, which will be refered to as sleep onset. - You woke up at {sleepOffset}, which we will refer to as sleep offset. - During that night's sleep, you went through {numberStagesTraversed} different stages. - Let's take a look at them. + You first fell asleep at {sleepOnset}, which will be refered to as{' '} + sleep onset. You woke up at {sleepOffset}, which we will refer to as sleep + offset. During that night's sleep, you went through {numberStagesTraversed} different + stages. Let's take a look at them.

    @@ -160,10 +160,10 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata, subject }) => {

    REM stage, which is short for  rapid eye movement, is a stage characterized by, like its name implies it, rapid eye movement. - During this stage, your muscles are completely immobilized but your brain and your heart - should be very active, which illustrates why this stage is also called paradoxical sleep. This sleep stage - therefore closely resembles wake and it is hard to tell the difference using EEG signals. Take note here that we dream - during all sleep stages but it is in the  + During this stage, your muscles are completely immobilized but your brain and your heart should be very + active, which illustrates why this stage is also called paradoxical sleep. This sleep stage therefore + closely resembles wake and it is hard to tell the difference using EEG signals. Take note here that we + dream during all sleep stages but it is in the  REM stage that dreams are best remembered and seem the most vivid.

    @@ -175,10 +175,10 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata, subject }) => {

    - N1 stage is associated with the typical drowsiness felt - before falling asleep. It is a transition stage between wake and sleep. This stage is characterized by - reduced alertness, muscle tone and heart rate. Most people won't say they fell asleep if they get - woken up from N1 sleep. + N1 stage is associated with the typical drowsiness + felt before falling asleep. It is a transition stage between wake and sleep. This stage is characterized + by reduced alertness, muscle tone and heart rate. Most people won't say they fell asleep if they get woken + up from N1 sleep.

    @@ -189,8 +189,8 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata, subject }) => {

    N2  stage corresponds to light sleep. The - muscle activity decreases even more, and the eyes stop moving. In this stage, the sensitivity to - external stimuli is still noticeable. On the EEG, this stage can be identified by the presence of  + muscle activity decreases even more, and the eyes stop moving. In this stage, the sensitivity to external + stimuli is still noticeable. On the EEG, this stage can be identified by the presence of  K complexes @@ -224,7 +224,7 @@ const EvolvingChartScrollyTelling = ({ epochs, report, metadata, subject }) => {

    N1,  N2 and  - N3 are called, in opposition to{' '} + N3 are called, in opposition to  REM, the  NREM sleep stages.

    diff --git a/web/src/views/sleep_analysis_results/index.js b/web/src/views/sleep_analysis_results/index.js index d26d667b..51078082 100644 --- a/web/src/views/sleep_analysis_results/index.js +++ b/web/src/views/sleep_analysis_results/index.js @@ -85,6 +85,12 @@ const SleepAnalysisResults = ({ location }) => { sleep and possibly awake. Any imbalance in these hormones or their secretion can have an inhibiting effect on sleep.

    +

    + Adenosine is not a hormone, but it also plays its role into sleep mechanisms. When you are awake, the level of + adenosine continuously increases in the brain. When we sleep, it is the opposite, it continuously falls. This + is why coffee makes us feel more energized, as caffeine acts as an adenosine-receptor antagonist [O. Björklund + et al., 2008]. +

    @@ -303,9 +309,14 @@ const SleepAnalysisResults = ({ location }) => { 24983, 2014.
    - [D. Purves et al., 2001] D. Purves et al., “Stages of Sleep,” Neuroscience. 2nd edition, 2001, Accessed: Nov. + [D. Purves and al., 2001] D. Purves et al., “Stages of Sleep,” Neuroscience. 2nd edition, 2001, Accessed: Nov. 22, 2020. [Online]. Available: https://www.ncbi.nlm.nih.gov/books/NBK10996/.
    +
    + [O. Björklund and al., 2008] Björklund O, Kahlström J, Salmi P, Fredholm BB "Perinatal Caffeine, Acting on + Maternal Adenosine A1 Receptors, Causes Long-Lasting Behavioral Changes in Mouse Offspring". vol. 3, no. 12: + e3977, 2008. https://doi.org/10.1371/journal.pone.0003977 +
    [M. Corsi-Cabrera, and al., 2000] M. Corsi-Cabrera, M. A. Guevara, Y. Del Río-Portilla, C. Arce, and Y. Villanueva-Hernández, “EEG Bands During Wakefulness, Slow-Wave and Paradoxical Sleep as a Result Of Principal diff --git a/web/src/views/sleep_analysis_results/sleep_mechanisms.js b/web/src/views/sleep_analysis_results/sleep_mechanisms.js index af433b5c..f9df8ca6 100644 --- a/web/src/views/sleep_analysis_results/sleep_mechanisms.js +++ b/web/src/views/sleep_analysis_results/sleep_mechanisms.js @@ -31,8 +31,7 @@ const SleepMechanisms = () => ( Sleep homeostasis is a biological regulatory process that rules over how much sleep time and intensity you need to get. It is tightly coupled with the sleep debt concept as the more you are awake, the more and the deeper you'll need to eventually sleep. The adenosine cycle is suspected to be one of the - responsible for this. When you are awake, the level of adenosine continuously increases in the brain. When - we sleep, it is the opposite, it continuously falls. This is why coffee makes us feel more energized, as caffeine acts as an adenosine-receptor antagonist [O. Björklund et al., 2008]. + responsible for this. } /> diff --git a/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js b/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js index 04205eb7..39a4a003 100644 --- a/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js +++ b/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js @@ -26,8 +26,8 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => {

    Generally, when talking about brain waves, we group certain frequencies together into bands. There are - overall five frequency bands, where each has a general associated behaviour, or state of consciousness. We will - cover those when looking at time frames corresponding to each sleep stage. + overall five frequency bands, where each has a general associated behaviour, or state of consciousness. We + will cover those when looking at time frames corresponding to each sleep stage.

    @@ -74,8 +74,8 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => {

    - While slowly falling asleep, the signal frequencies tend to decrease into the 4 to 8 Hz range, or the theta - band, and to have larger amplitudes [D. Purves et al., 2001]. You should then see more yellow in the + While slowly falling asleep, the signal frequencies tend to decrease into the 4 to 8 Hz range, or the + theta band, and to have larger amplitudes [D. Purves et al., 2001]. You should then see more yellow in the specified frequency band range. These characteristics are associated with  N1.

    @@ -112,7 +112,7 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => {

    - We'll now look at how the epochs tagged as{' '} + We'll now look at how the epochs tagged as  slow wave sleep  look like.

    @@ -138,7 +138,7 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => {

    - The last epochs to look at are the ones tagged as{' '} + The last epochs to look at are the ones tagged as  rapid eye movement. Let's see how can they be described.

    From eff48e38620a75c7b6dbd4a7a4a5ea889918fac8 Mon Sep 17 00:00:00 2001 From: William Harvey Date: Sun, 22 Nov 2020 20:57:43 -0500 Subject: [PATCH 38/40] Apply suggestions from code review Co-authored-by: Anes Belfodil --- web/src/views/sleep_analysis_results/index.js | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/web/src/views/sleep_analysis_results/index.js b/web/src/views/sleep_analysis_results/index.js index 51078082..1044d760 100644 --- a/web/src/views/sleep_analysis_results/index.js +++ b/web/src/views/sleep_analysis_results/index.js @@ -66,7 +66,7 @@ const SleepAnalysisResults = ({ location }) => {

    You should now have a pretty good picture of how you spent your night. Also, we have seen that sleep can be - decomposed into two groups, whereas REM and NREM. We’ve also defined other measures of your sleep + decomposed into two groups: REM and NREM. We’ve also defined other measures of your sleep architecture, such as your sleep latency, efficiency and total sleep time. All of these metrics are very interesting. However, it would be interesting to understand a little bit more about sleep in order to make sense of this. @@ -110,7 +110,7 @@ const SleepAnalysisResults = ({ location }) => {

    Hypnogram

    A hypnogram allows you to visually inspect the evolution of your night, through time. The vertical axis - represents how hard it is to wake up, namely the sleep deepness. We see that REM is one of the lightest sleep + represents how hard it is to wake up, namely the sleep depth. We see that REM is one of the lightest sleep stages (along with N1), because we unknowingly wake up from that stage. Those short periods of arousal often last no longer than 15 seconds, are followed by a lighter sleep stage, and cannot be remembered the next morning. If they are too frequent, they can affect your sleep quality. Considering that we only have a 30 @@ -144,12 +144,11 @@ const SleepAnalysisResults = ({ location }) => {

    Spectrogram

    - Below are represented spectrograms of the EEG signals recorded for each channel. Spectrogram is a special + Below are represented spectrograms of the EEG signals recorded for each channel. The spectrogram is a special visualization of a signal in the frequency and time domain. Indeed, it represents the spectrum of a signal as it - changes over time. Concretely, spectrograms can be viewed as if we took your signal, we’ve separated it into 30 - seconds blocs, stacked then horizontally and to which we’ve applied the fast fourier transform. We then have, - for each 30 seconds epoch, the corresponding amplitudes for each frequency that makes up the signal, hence the - spectra. + changes over time. Concretely, spectrograms can be viewed as if we took your signal, separated it into 30 + seconds blocks, stacked them horizontally and then applied the Fast Fourier Transform. We then have, + for each 30 seconds epoch, the corresponding amplitudes for each frequency that makes up the signal hence the spectra.

    We then converted the scale to logarithmic, to better see the differences in the spectrums. We then speak of @@ -157,11 +156,11 @@ const SleepAnalysisResults = ({ location }) => {

    Why are spectrograms useful to observe EEG?

    - Electroencephalography signals allows us to observe brainwaves, which have been traditionnally splitted into + Electroencephalography signals allow us to observe brainwaves which have been traditionally split into defined frequency bands, as they appear and disappear under specific conditions with specific voltage [M. - Corsi-Cabrera and al., 2000]. Thus, observing the spectrum of a signal is great, as we can see the voltage - amplitude for each band, and then try to predict under which physiological condition was the subject in. But, as - we've mentionned, the EEG signals' spectrum do change over time, as EEG is not a stationnary signal. So, we need + Corsi-Cabrera and al., 2000]. Thus, observing the spectrum of a signal is great as we can see the voltage + amplitude for each band and then try to predict under which physiological condition was the subject in. But as + we've mentionned, the EEG signals' spectrum do change over time, as EEG is not a stationnary signal. So we need to split the signal into much smaller chunks, and then observe the spectrum of these chunks, and their evolution over time.

    @@ -246,12 +245,12 @@ const SleepAnalysisResults = ({ location }) => {

    - If you found our visualization helpful in better understanding how sleep works, and especially how you slept + If you found our visualizations helpful in better understanding how sleep works, and especially how you slept on your recorded night, you can come say hi at our   Facebook page - . On another hand, if there has been problems or unexpected results while recording and analyzing your sleep, + . On another hand, if there have been problems or unexpected results while recording and analyzing your sleep, you can always open an issue in our   Github repository From ec7c63e03f2c9c1d3a94d624aba70862ec6b9b07 Mon Sep 17 00:00:00 2001 From: William Harvey Date: Sun, 22 Nov 2020 21:02:22 -0500 Subject: [PATCH 39/40] Apply suggested change --- web/src/views/sleep_analysis_results/index.js | 30 +++++++++---------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/web/src/views/sleep_analysis_results/index.js b/web/src/views/sleep_analysis_results/index.js index 1044d760..cb14f696 100644 --- a/web/src/views/sleep_analysis_results/index.js +++ b/web/src/views/sleep_analysis_results/index.js @@ -66,10 +66,9 @@ const SleepAnalysisResults = ({ location }) => {

    You should now have a pretty good picture of how you spent your night. Also, we have seen that sleep can be - decomposed into two groups: REM and NREM. We’ve also defined other measures of your sleep - architecture, such as your sleep latency, efficiency and total sleep time. All of these metrics are very - interesting. However, it would be interesting to understand a little bit more about sleep in order to make - sense of this. + decomposed into two groups: REM and NREM. We’ve also defined other measures of your sleep architecture, such + as your sleep latency, efficiency and total sleep time. All of these metrics are very interesting. However, it + would be interesting to understand a little bit more about sleep in order to make sense of this.

    This is about your hormones

    @@ -87,9 +86,9 @@ const SleepAnalysisResults = ({ location }) => {

    Adenosine is not a hormone, but it also plays its role into sleep mechanisms. When you are awake, the level of - adenosine continuously increases in the brain. When we sleep, it is the opposite, it continuously falls. This - is why coffee makes us feel more energized, as caffeine acts as an adenosine-receptor antagonist [O. Björklund - et al., 2008]. + adenosine continuously increases in your brain. In contrast, when you sleep, it is the opposite, it + continuously falls. This is why coffee makes us feel more energized, as caffeine acts as an adenosine-receptor + antagonist [O. Björklund et al., 2008].

    @@ -147,8 +146,8 @@ const SleepAnalysisResults = ({ location }) => { Below are represented spectrograms of the EEG signals recorded for each channel. The spectrogram is a special visualization of a signal in the frequency and time domain. Indeed, it represents the spectrum of a signal as it changes over time. Concretely, spectrograms can be viewed as if we took your signal, separated it into 30 - seconds blocks, stacked them horizontally and then applied the Fast Fourier Transform. We then have, - for each 30 seconds epoch, the corresponding amplitudes for each frequency that makes up the signal hence the spectra. + seconds blocks, stacked them horizontally and then applied the Fast Fourier Transform. We then have, for each 30 + seconds epoch, the corresponding amplitudes for each frequency that makes up the signal hence the spectra.

    We then converted the scale to logarithmic, to better see the differences in the spectrums. We then speak of @@ -156,13 +155,12 @@ const SleepAnalysisResults = ({ location }) => {

    Why are spectrograms useful to observe EEG?

    - Electroencephalography signals allow us to observe brainwaves which have been traditionally split into - defined frequency bands, as they appear and disappear under specific conditions with specific voltage [M. - Corsi-Cabrera and al., 2000]. Thus, observing the spectrum of a signal is great as we can see the voltage - amplitude for each band and then try to predict under which physiological condition was the subject in. But as - we've mentionned, the EEG signals' spectrum do change over time, as EEG is not a stationnary signal. So we need - to split the signal into much smaller chunks, and then observe the spectrum of these chunks, and their evolution - over time. + Electroencephalography signals allow us to observe brainwaves which have been traditionally split into defined + frequency bands, as they appear and disappear under specific conditions with specific voltage [M. Corsi-Cabrera + and al., 2000]. Thus, observing the spectrum of a signal is great as we can see the voltage amplitude for each + band and then try to predict under which physiological condition was the subject in. But as we've mentionned, + the EEG signals' spectrum do change over time, as EEG is not a stationnary signal. So we need to split the + signal into much smaller chunks, and then observe the spectrum of these chunks, and their evolution over time.

    Furthermore, brainwaves frequency bands are widely used and their associated states are defined as below. Please From d4a2fc7589cdf1d3842f08168fe3eb8dafdc7364 Mon Sep 17 00:00:00 2001 From: William Harvey Date: Sun, 22 Nov 2020 21:04:17 -0500 Subject: [PATCH 40/40] apply suggested changes --- web/src/views/sleep_analysis_results/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/views/sleep_analysis_results/index.js b/web/src/views/sleep_analysis_results/index.js index cb14f696..92d967bd 100644 --- a/web/src/views/sleep_analysis_results/index.js +++ b/web/src/views/sleep_analysis_results/index.js @@ -86,7 +86,7 @@ const SleepAnalysisResults = ({ location }) => {

    Adenosine is not a hormone, but it also plays its role into sleep mechanisms. When you are awake, the level of - adenosine continuously increases in your brain. In contrast, when you sleep, it is the opposite, it + adenosine continuously increases in your brain. In contrast, when you sleep it is the opposite: it continuously falls. This is why coffee makes us feel more energized, as caffeine acts as an adenosine-receptor antagonist [O. Björklund et al., 2008].