Web/json download

backend/assets/readme.md

@@ -42,16 +42,6 @@
       ... // Stage of each timestamp. This array has the same size that timestamps. Possible values are "W", "REM", "N1", "N2", "N3"
     ]
   },
-  "annotations": [
-    [1602210380, "W"], // Unix timestamp of the epoch that transitioned to the "W" state
-    [1602211400, "N1"],
-    [1602211910, "N2"],
-    [1602212900, "N3"],
-      ...
-    [1602239180, "W"],
-    [1602239210, "N1"],
-    [1602239240, "W"]
-  ],
   "spectrograms": {
     "frequencies": [...],
     "fpz-cz": [ // Contains an array for each timestamps in epochs.timestamps for the fpz-cz eeg channel

web/package.json

@@ -31,12 +31,13 @@
     "d3": "^5.16.0",
     "d3-tip": "^0.9.1",
     "headroom.js": "^0.11.0",
-    "moment": "^2.27.0",
+    "luxon": "^1.25.0",
     "node-sass": "4.14.1",
     "prop-types": "^15.7.2",
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "react-hook-form": "^6.8.4",
+    "react-hooks-global-state": "^1.0.1",
     "react-router": "5.1.2",
     "react-router-dom": "5.1.2",
     "react-scripts": "3.4.0",

web/src/d3/evolving_chart/chart_states.js

@@ -1,23 +1,28 @@
 import * as d3 from 'd3';
 import _ from 'lodash';
-import moment from 'moment';
+import { DateTime } from 'luxon';
 
 import { BAR_HEIGHT, DIMENSION } from './constants';
 import { EPOCH_DURATION_MS, TRANSITION_TIME_MS, STAGES_ORDERED } from '../constants';
 
+import '../style.css';
+
 export const createTimelineChartCallbacks = (g, xTime, xTimeAxis, color, tooltip) =>
   Object({
     fromInitial: () => {
       const annotationRects = g.selectAll('.rect-stacked').interrupt();
 
       setAttrOnAnnotationRects(annotationRects, xTime, 0, color, tooltip);
 
-      g.append('g').attr('class', 'x axis').attr('transform', `translate(0, ${BAR_HEIGHT})`).call(xTimeAxis);
+      g.append('g')
+        .attr('class', 'x visualization__axis')
+        .attr('transform', `translate(0, ${BAR_HEIGHT})`)
+        .call(xTimeAxis);
     },
     fromInstance: () => {
       const annotationRects = g.selectAll('.rect-stacked').interrupt();
 
-      g.selectAll('.y.axis').remove();
+      g.selectAll('.y.visualization__axis').remove();
 
       setAttrOnAnnotationRects(annotationRects, xTime, 0, color, tooltip);
 
@@ -41,7 +46,7 @@ export const createInstanceChartCallbacks = (g, data, xTime, xTimeAxis, yAxis, c
 
       g.selectAll('text.proportion').remove();
 
-      g.select('.x.axis').interrupt().transition().call(xTimeAxis);
+      g.select('.x.visualization__axis').interrupt().transition().call(xTimeAxis);
       transitionHorizontalAxis(g, STAGES_ORDERED.length * BAR_HEIGHT);
 
       setAttrOnAnnotationRects(annotationRects, xTime, getVerticalPositionCallback, color, tooltip);
@@ -55,7 +60,7 @@ export const createBarChartCallbacks = (g, data, xAxisLinear, yAxis, color, tip)
       const annotationRects = g.selectAll('.rect-stacked').interrupt();
       const xProportionCallback = getOffsetSleepStageProportionCallback(data);
 
-      g.select('.x.axis').transition().call(xAxisLinear);
+      g.select('.x.visualization__axis').transition().call(xAxisLinear);
       transitionHorizontalAxis(g, STAGES_ORDERED.length * BAR_HEIGHT);
 
       setTooltip(annotationRects, tip)
@@ -65,14 +70,14 @@ export const createBarChartCallbacks = (g, data, xAxisLinear, yAxis, color, tip)
         .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));
+          g.selectAll('.rect-stacked')
+            .attr('x', 0)
+            .attr('width', getFirstRectangleProportionWidthCallback(firstStageIndexes, stageTimeProportions));
           createProportionLabels(g, data);
         });
     },
     fromStackedBarChart: () => {
       const annotationRects = g.selectAll('.rect-stacked').interrupt();
-
-      g.selectAll('text.label-sleepType').remove();
       g.selectAll('text.proportion').remove();
 
       createVerticalAxis(g, yAxis, color);
@@ -95,10 +100,11 @@ export const createStackedBarChartCallbacks = (g, data) =>
       const { annotations, firstStageIndexes, stageTimeProportions, epochs } = data;
       const firstAnnotationsByStage = _.filter(annotations, ({ stage }, index) => firstStageIndexes[stage] === index);
       const getHorizontalPositionSleepStage = ({ stage }) =>
-        (getCumulativeProportionOfNightAtStart(stage, stageTimeProportions) + stageTimeProportions[stage] / 2) * DIMENSION.WIDTH;
+        (getCumulativeProportionOfNightAtStart(stage, stageTimeProportions) + stageTimeProportions[stage] / 2) *
+        DIMENSION.WIDTH;
       const annotationRects = g.selectAll('.rect-stacked').interrupt();
 
-      g.selectAll('.y.axis').remove();
+      g.selectAll('.y.visualization__axis').remove();
       g.selectAll('text.proportion').remove();
 
       transitionHorizontalAxis(g, BAR_HEIGHT);
@@ -119,7 +125,11 @@ export const createStackedBarChartCallbacks = (g, data) =>
         .attr('class', 'proportion')
         .style('text-anchor', 'middle')
         .append('tspan')
-        .text(({ stage }) => moment.utc(stageTimeProportions[stage] * epochs.length * EPOCH_DURATION_MS).format('HH:mm'))
+        .text(({ stage }) =>
+          DateTime.fromMillis(stageTimeProportions[stage] * epochs.length * EPOCH_DURATION_MS)
+            .toUTC()
+            .toFormat('hh:mm:ss'),
+        )
         .attr('x', getHorizontalPositionSleepStage)
         .attr('y', 40)
         .append('tspan')
@@ -158,7 +168,7 @@ const getFirstRectangleProportionWidthCallback = (firstStageIndexes, stageTimePr
 const createVerticalAxis = (g, yAxis, color) =>
   g
     .append('g')
-    .attr('class', 'y axis')
+    .attr('class', 'y visualization__axis')
     .style('font-size', '1.5rem')
     .transition()
     .duration(TRANSITION_TIME_MS)
@@ -172,7 +182,11 @@ const createVerticalAxis = (g, yAxis, color) =>
     .style('alignment-baseline', 'middle');
 
 const transitionHorizontalAxis = (g, yPosition) =>
-  g.select('.x.axis').transition().duration(TRANSITION_TIME_MS).attr('transform', `translate(0, ${yPosition})`);
+  g
+    .select('.x.visualization__axis')
+    .transition()
+    .duration(TRANSITION_TIME_MS)
+    .attr('transform', `translate(0, ${yPosition})`);
 
 const createProportionLabels = (g, data) =>
   g
@@ -181,7 +195,9 @@ const createProportionLabels = (g, data) =>
     .enter()
     .append('text')
     .attr('class', 'proportion')
-    .text(({ stage }, i) => (i === data.firstStageIndexes[stage] ? `${_.round(data.stageTimeProportions[stage] * 100, 2)}%` : ''))
+    .text(({ stage }, i) =>
+      i === data.firstStageIndexes[stage] ? `${_.round(data.stageTimeProportions[stage] * 100, 2)}%` : '',
+    )
     .attr('x', DIMENSION.WIDTH / 20)
     .attr('y', ({ stage }) => BAR_HEIGHT * STAGES_ORDERED.indexOf(stage) + BAR_HEIGHT / 2)
     .style('fill', 'black');
@@ -209,7 +225,8 @@ const getOffsetSleepStageProportionCallback = (data) => {
     );
   });
 
-  return (d, index) => DIMENSION.WIDTH * stageTimeProportions[d.stage] * cumulSumProportions[d.stage][annotationIndexSleepStage[index]];
+  return (d, index) =>
+    DIMENSION.WIDTH * stageTimeProportions[d.stage] * cumulSumProportions[d.stage][annotationIndexSleepStage[index]];
 };
 
 const cumulSum = (annotationsProportionByStage) =>

web/src/d3/evolving_chart/evolving_chart.js

@@ -1,10 +1,15 @@
 import * as d3 from 'd3';
 import _ from 'lodash';
-import moment from 'moment';
+import { DateTime } from 'luxon';
 
 import { preprocessData } from './preproc';
 import { createLegend } from './legend';
-import { createTimelineChartCallbacks, createInstanceChartCallbacks, createBarChartCallbacks, createStackedBarChartCallbacks } from './chart_states';
+import {
+  createTimelineChartCallbacks,
+  createInstanceChartCallbacks,
+  createBarChartCallbacks,
+  createStackedBarChartCallbacks,
+} from './chart_states';
 import { MARGIN, CANVAS_DIMENSION, BAR_HEIGHT, DIMENSION } from './constants';
 import { STAGES_ORDERED, STAGE_TO_COLOR } from '../constants';
 import { initializeTooltips } from './mouse_over';
@@ -27,10 +32,10 @@ const initializeScales = () => {
 const setDomainOnScales = (xTime, xLinear, y, colors, epochs) => {
   const start = _.first(epochs).timestamp;
   const end = _.last(epochs).timestamp;
-  const nightDuration = moment.duration(moment(end).diff(start));
+  const nightDuration = DateTime.fromJSDate(end).diff(DateTime.fromJSDate(start), ['hours']);
 
   xTime.domain([start, end]);
-  xLinear.domain([0, nightDuration.asHours()]);
+  xLinear.domain([0, nightDuration.hours]);
   y.domain(STAGES_ORDERED);
   colors.domain(STAGES_ORDERED);
 };
@@ -45,7 +50,8 @@ const initializeAxes = (xTime, xLinear, y) => {
 
 const createDrawingGroup = (svg) => svg.append('g').attr('transform', `translate(${MARGIN.LEFT}, ${MARGIN.TOP})`);
 
-const bindAnnotationsToRects = (g, annotations) => g.selectAll('.rect').data(annotations).enter().append('rect').attr('class', 'rect-stacked');
+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}`);

web/src/d3/evolving_chart/mouse_over.js

@@ -1,31 +1,34 @@
 import tip from 'd3-tip';
-import moment from 'moment';
+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));
+  const stackedToolTip = initializeTooltip(svg, (d) =>
+    getStackedToolTipText(d, data.stageTimeProportions, data.epochs.length),
+  );
 
   return { barToolTip, stackedToolTip };
 };
 
 const initializeTooltip = (svg, getToolTipText) => {
-  const tooltip = tip().attr('class', 'd3-tip').offset([-10, 0]);
+  const tooltip = tip().attr('class', 'evolving_chart__tooltip').offset([-10, 0]);
   svg.call(tooltip);
   tooltip.html(getToolTipText);
 
   return tooltip;
 };
 
-const getBarToolTipText = (d) => {
-  return `Stage : <strong> ${d.stage} </strong> <br>
-            Range  :  <strong> ${moment(d.start).format('HH:mm:ss')} </strong>
-              - <strong> ${moment(d.end).format('HH:mm:ss')} </strong> <br>
-            Duration: <strong> ${moment.utc(moment(d.end).diff(d.start)).format('HH:mm:ss')} </strong>`;
-};
+const getBarToolTipText = (d) => `Stage : <strong> ${d.stage} </strong> <br>
+            Range  :  <strong> ${DateTime.fromJSDate(d.start).toFormat('hh:mm:ss')} </strong>
+              - <strong> ${DateTime.fromJSDate(d.end).toFormat('hh:mm:ss')} </strong> <br>
+            Duration: <strong> ${DateTime.fromJSDate(d.end)
+              .diff(DateTime.fromJSDate(d.start))
+              .toFormat('hh:mm:ss')} </strong>`;
 
 const getStackedToolTipText = (d, stageTimeProportions, nbEpochs) =>
-  `Stage : <strong> ${d.stage} </strong><br>  Duration : <strong> ${moment
-    .utc(stageTimeProportions[d.stage] * nbEpochs * EPOCH_DURATION_MS)
-    .format('HH:mm:ss')} </strong><br>`;
+  `Stage : <strong> ${d.stage} </strong><br>  Duration : <strong> ${Duration.fromMillis(
+    stageTimeProportions[d.stage] * nbEpochs * EPOCH_DURATION_MS,
+  ).toFormat('hh:mm:ss')} </strong><br>`;

web/src/d3/evolving_chart/preproc.js

@@ -1,9 +1,10 @@
 import _ from 'lodash';
 
-import { convertTimestampsToDates, convertEpochsToAnnotations } from '../utils';
+import { convertAPIFormatToCSVFormat, convertTimestampsToDates, convertEpochsToAnnotations } from '../utils';
 import { STAGES_ORDERED } from '../constants';
 
 export const preprocessData = (data) => {
+  data = convertAPIFormatToCSVFormat(data);
   data = convertTimestampsToDates(data);
   const annotations = convertEpochsToAnnotations(data);
   const stageTimeProportions = getStageTimeProportions(data);

web/src/d3/evolving_chart/style.css

@@ -0,0 +1,7 @@
+.evolving_chart__tooltip {
+  line-height: 1;
+  padding: 12px;
+  border-radius: 2px;
+  color: #0d0d0d;
+  background: rgba(235, 235, 235, 0.9);
+}

web/src/d3/hypnogram/hypnogram.js

@@ -4,7 +4,7 @@ import _ from 'lodash';
 import createHypnogramChart from './line_charts';
 import { DIMENSION, MARGIN, COMPARATIVE_COLORS, CANVAS_DIMENSION } from './constants';
 import { STAGES_ORDERED } from '../constants';
-import { convertTimestampsToDates } from '../utils';
+import { convertAPIFormatToCSVFormat, convertTimestampsToDates } from '../utils';
 
 const initializeScales = (comparativeColors) =>
   Object({
@@ -22,8 +22,8 @@ const initializeAxes = (x, y) =>
 const createDrawingGroup = (svg) => svg.append('g').attr('transform', `translate(${MARGIN.LEFT}, ${MARGIN.TOP})`);
 
 const preprocessData = (data, hypnogramNames) => {
+  data = data.map(convertAPIFormatToCSVFormat);
   data = data.map((hypno) => convertTimestampsToDates(hypno));
-
   return _.zip(data, hypnogramNames).map((x) =>
     Object({
       name: x[1],