From 36d3f037315e3f1f845f92736c673cd10d845361 Mon Sep 17 00:00:00 2001
From: Kyle Mathewson <kylemath@gmail.com>
Date: Mon, 13 Jan 2020 20:06:13 -0700
Subject: [PATCH 1/3] working takeUntil timer

---
 src/components/PageSwitcher/PageSwitcher.js         |  4 ++--
 .../EEGEduHeartSpectra/EEGEduHeartSpectra.js        | 13 ++++++++-----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/PageSwitcher/PageSwitcher.js b/src/components/PageSwitcher/PageSwitcher.js
index c0ab424..7174397 100644
--- a/src/components/PageSwitcher/PageSwitcher.js
+++ b/src/components/PageSwitcher/PageSwitcher.js
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react";
+ import React, { useState, useCallback } from "react";
 import { MuseClient } from "muse-js";
 import { Select, Card, Stack, Button, ButtonGroup, Checkbox } from "@shopify/polaris";
 
@@ -78,7 +78,7 @@ export function PageSwitcher() {
   const [status, setStatus] = useState(generalTranslations.connect);
 
   // for picking a new module
-  const [selected, setSelected] = useState(intro);
+  const [selected, setSelected] = useState(heartSpectra);
   const handleSelectChange = useCallback(value => {
     setSelected(value);
 
diff --git a/src/components/PageSwitcher/components/EEGEduHeartSpectra/EEGEduHeartSpectra.js b/src/components/PageSwitcher/components/EEGEduHeartSpectra/EEGEduHeartSpectra.js
index 386ccb5..c5bb6bc 100644
--- a/src/components/PageSwitcher/components/EEGEduHeartSpectra/EEGEduHeartSpectra.js
+++ b/src/components/PageSwitcher/components/EEGEduHeartSpectra/EEGEduHeartSpectra.js
@@ -3,8 +3,8 @@ import { catchError, multicast } from "rxjs/operators";
 
 import { TextContainer, Card, Stack, RangeSlider, Button, ButtonGroup, Modal } from "@shopify/polaris";
 import { saveAs } from 'file-saver';
-import { take } from "rxjs/operators";
-import { Subject } from "rxjs";
+import { takeUntil } from "rxjs/operators";
+import { Subject, timer  } from "rxjs";
 
 import { channelNames } from "muse-js";
 import { Line } from "react-chartjs-2";
@@ -278,8 +278,8 @@ export function renderRecord(recordPopChange, recordPop, status, Settings) {
 
 
 function saveToCSV(Settings) {
-  const numSamplesToSave = 100;
-  console.log('Saving ' + numSamplesToSave + ' samples...');
+  const secondsToSave = 10;
+  console.log('Saving ' + secondsToSave + ' seconds...');
   var localObservable$ = null;
   const dataToSave = [];
 
@@ -291,9 +291,12 @@ function saveToCSV(Settings) {
     "\n"
   );   
 
+  // Create timer 
+  const timer$ = timer(secondsToSave * 1000);
+
   // put selected observable object into local and start taking samples
   localObservable$ = window.multicastHeartSpectra$.pipe(
-    take(numSamplesToSave)
+    takeUntil(timer$)
   );   
 
   // now with header in place subscribe to each epoch and log it

From 11f6e019a3f12723afe2ed62db771ebe28a42f37 Mon Sep 17 00:00:00 2001
From: Kyle Mathewson <kylemath@gmail.com>
Date: Mon, 13 Jan 2020 21:16:53 -0700
Subject: [PATCH 2/3] added timer to every record module

---
 src/components/PageSwitcher/PageSwitcher.js   | 20 +++++-----
 .../components/EEGEduAlpha/EEGEduAlpha.js     | 31 +++++++++++----
 .../components/EEGEduBands/EEGEduBands.js     | 31 +++++++++++----
 .../components/EEGEduEvoked/EEGEduEvoked.js   | 31 +++++++++++----
 .../components/EEGEduEvoked/sketchEvoked.js   |  2 +-
 .../EEGEduHeartSpectra/EEGEduHeartSpectra.js  | 24 +++++++++---
 .../components/EEGEduRaw/EEGEduRaw.js         | 38 ++++++++++++++-----
 .../components/EEGEduSpectra/EEGEduSpectra.js | 32 ++++++++++++----
 .../components/EEGEduSsvep/EEGEduSsvep.js     | 35 ++++++++++++-----
 9 files changed, 180 insertions(+), 64 deletions(-)

diff --git a/src/components/PageSwitcher/PageSwitcher.js b/src/components/PageSwitcher/PageSwitcher.js
index 7174397..92f2ad1 100644
--- a/src/components/PageSwitcher/PageSwitcher.js
+++ b/src/components/PageSwitcher/PageSwitcher.js
@@ -63,7 +63,7 @@ export function PageSwitcher() {
   // pipe settings
   const [introSettings] = useState(funIntro.getSettings);
   const [heartRawSettings] = useState(funHeartRaw.getSettings);
-  const [heartSpectraSettings] = useState(funHeartSpectra.getSettings);
+  const [heartSpectraSettings, setHeartSpectraSettings] = useState(funHeartSpectra.getSettings);
   const [rawSettings, setRawSettings] = useState(funRaw.getSettings); 
   const [spectraSettings, setSpectraSettings] = useState(funSpectra.getSettings); 
   const [bandsSettings, setBandsSettings] = useState(funBands.getSettings);
@@ -71,14 +71,14 @@ export function PageSwitcher() {
   const [spectroSettings, setSpectroSettings] = useState(funSpectro.getSettings);
   const [alphaSettings, setAlphaSettings] = useState(funAlpha.getSettings);
   const [ssvepSettings, setSsvepSettings] = useState(funSsvep.getSettings);
-  const [evokedSettings] = useState(funEvoked.getSettings);
+  const [evokedSettings, setEvokedSettings] = useState(funEvoked.getSettings);
   const [predictSettings, setPredictSettings] = useState(funPredict.getSettings);
 
   // connection status
   const [status, setStatus] = useState(generalTranslations.connect);
 
   // for picking a new module
-  const [selected, setSelected] = useState(heartSpectra);
+  const [selected, setSelected] = useState(ssvep);
   const handleSelectChange = useCallback(value => {
     setSelected(value);
 
@@ -349,19 +349,19 @@ export function PageSwitcher() {
         return null
       case heartSpectra:
         return (
-          funHeartSpectra.renderRecord(recordPopChange, recordPop, status, heartSpectraSettings)
+          funHeartSpectra.renderRecord(recordPopChange, recordPop, status, heartSpectraSettings, setHeartSpectraSettings)
         )
       case raw: 
         return (
-          funRaw.renderRecord(recordPopChange, recordPop, status, rawSettings)
+          funRaw.renderRecord(recordPopChange, recordPop, status, rawSettings, setRawSettings)
         )    
       case spectra:
         return (
-          funSpectra.renderRecord(recordPopChange, recordPop, status, spectraSettings)
+          funSpectra.renderRecord(recordPopChange, recordPop, status, spectraSettings, setSpectraSettings)
         )      
       case bands:
         return (
-          funBands.renderRecord(recordPopChange, recordPop, status, bandsSettings)
+          funBands.renderRecord(recordPopChange, recordPop, status, bandsSettings, setBandsSettings)
         ) 
       case animate:
         return null
@@ -369,15 +369,15 @@ export function PageSwitcher() {
         return null
       case alpha:
         return (
-          funAlpha.renderRecord(recordPopChange, recordPop, status, alphaSettings, recordTwoPopChange, recordTwoPop)
+          funAlpha.renderRecord(recordPopChange, recordPop, status, alphaSettings, recordTwoPopChange, recordTwoPop, setAlphaSettings)
         )
       case ssvep:
         return (
-          funSsvep.renderRecord(recordPopChange, recordPop, status, ssvepSettings, recordTwoPopChange, recordTwoPop)
+          funSsvep.renderRecord(recordPopChange, recordPop, status, ssvepSettings, recordTwoPopChange, recordTwoPop, setSsvepSettings)
         )
       case evoked:
         return (
-          funEvoked.renderRecord(recordPopChange, recordPop, status, evokedSettings)
+          funEvoked.renderRecord(recordPopChange, recordPop, status, evokedSettings, setEvokedSettings)
         )
       case predict:
         return (
diff --git a/src/components/PageSwitcher/components/EEGEduAlpha/EEGEduAlpha.js b/src/components/PageSwitcher/components/EEGEduAlpha/EEGEduAlpha.js
index 85bd4d9..4204852 100644
--- a/src/components/PageSwitcher/components/EEGEduAlpha/EEGEduAlpha.js
+++ b/src/components/PageSwitcher/components/EEGEduAlpha/EEGEduAlpha.js
@@ -3,8 +3,8 @@ import { catchError, multicast } from "rxjs/operators";
 
 import { TextContainer, Card, Stack, RangeSlider, Button, ButtonGroup, Modal } from "@shopify/polaris";
 import { saveAs } from 'file-saver';
-import { take } from "rxjs/operators";
-import { Subject } from "rxjs";
+import { take, takeUntil } from "rxjs/operators";
+import { Subject, timer } from "rxjs";
 
 import { channelNames } from "muse-js";
 import { Line } from "react-chartjs-2";
@@ -36,7 +36,8 @@ export function getSettings() {
     sliceFFTHigh: 30,
     duration: 1024,
     srate: 256,
-    name: 'Alpha'
+    name: 'Alpha',
+    secondsToSave: 10
   }
 };
 
@@ -247,10 +248,23 @@ export function renderSliders(setData, setSettings, status, Settings) {
   )
 }
 
-export function renderRecord(recordPopChange, recordPop, status, Settings, recordTwoPopChange, recordTwoPop) {
+export function renderRecord(recordPopChange, recordPop, status, Settings, recordTwoPopChange, recordTwoPop, setSettings) {
+  
+  function handleSecondsToSaveRangeSliderChange(value) {
+    setSettings(prevState => ({...prevState, secondsToSave: value}));
+  }
+
   return(
     <Card title={'Record ' + Settings.name +' Data'} sectioned>
       <Stack>
+        <RangeSlider 
+          disabled={status === generalTranslations.connect} 
+          min={2}
+          max={180}
+          label={'Recording Length: ' + Settings.secondsToSave + ' Seconds'} 
+          value={Settings.secondsToSave} 
+          onChange={handleSecondsToSaveRangeSliderChange} 
+        />
         <ButtonGroup>
           <Button 
             onClick={() => {
@@ -318,8 +332,7 @@ export function renderRecord(recordPopChange, recordPop, status, Settings, recor
 
 
 function saveToCSV(Settings, condition) {
-  const numSamplesToSave = 50;
-  console.log('Saving ' + numSamplesToSave + ' samples...');
+  console.log('Saving ' + Settings.secondsToSave + ' seconds...');
   var localObservable$ = null;
   const dataToSave = [];
 
@@ -346,9 +359,13 @@ function saveToCSV(Settings, condition) {
       );   
     }
   });
+
+  // setup timer
+  const timer$ = timer(Settings.secondsToSave * 1000)
+
   // put selected observable object into local and start taking samples
   localObservable$ = window.multicastAlpha$.pipe(
-    take(numSamplesToSave)
+    takeUntil(timer$)
   );   
 
 
diff --git a/src/components/PageSwitcher/components/EEGEduBands/EEGEduBands.js b/src/components/PageSwitcher/components/EEGEduBands/EEGEduBands.js
index f88baa6..05b39fb 100644
--- a/src/components/PageSwitcher/components/EEGEduBands/EEGEduBands.js
+++ b/src/components/PageSwitcher/components/EEGEduBands/EEGEduBands.js
@@ -3,8 +3,8 @@ import { catchError, multicast } from "rxjs/operators";
 
 import { TextContainer, Card, Stack, RangeSlider, Button, ButtonGroup, Modal } from "@shopify/polaris";
 import { saveAs } from 'file-saver';
-import { take } from "rxjs/operators";
-import { Subject } from "rxjs";
+import { takeUntil } from "rxjs/operators";
+import { Subject, timer } from "rxjs";
 
 import { channelNames } from "muse-js";
 import { Bar } from "react-chartjs-2";
@@ -32,7 +32,8 @@ export function getSettings () {
     bins: 256,
     duration: 1024,
     srate: 256,
-    name: 'Bands'
+    name: 'Bands',
+    secondsToSave: 10 
   }
 };
 
@@ -218,10 +219,23 @@ export function renderSliders(setData, setSettings, status, Settings) {
   )
 }
 
-export function renderRecord(recordPopChange, recordPop, status, Settings) {
+export function renderRecord(recordPopChange, recordPop, status, Settings, setSettings) {
+
+  function handleSecondsToSaveRangeSliderChange(value) {
+    setSettings(prevState => ({...prevState, secondsToSave: value}));
+  }
+  
   return (
     <Card title={'Record Data'} sectioned>
       <Stack>
+        <RangeSlider 
+          disabled={status === generalTranslations.connect} 
+          min={2}
+          max={180}
+          label={'Recording Length: ' + Settings.secondsToSave + ' Seconds'} 
+          value={Settings.secondsToSave} 
+          onChange={handleSecondsToSaveRangeSliderChange} 
+        />
         <ButtonGroup>
           <Button 
             onClick={() => {
@@ -257,8 +271,7 @@ export function renderRecord(recordPopChange, recordPop, status, Settings) {
 
 
 function saveToCSV(Settings) {
-  const numSamplesToSave = 50;
-  console.log('Saving ' + numSamplesToSave + ' samples...');
+  console.log('Saving ' + Settings.secondsToSave + ' seconds...');
   var localObservable$ = null;
   const dataToSave = [];
 
@@ -272,9 +285,13 @@ function saveToCSV(Settings) {
     "beta0,beta1,beta2,beta3,betaAux,", 
     "delta0,delta1,delta2,delta3,deltaAux\n"
   );
+
+  // Create timer 
+  const timer$ = timer(Settings.secondsToSave * 1000);
+
   // put selected observable object into local and start taking samples
   localObservable$ = window.multicastBands$.pipe(
-    take(numSamplesToSave)
+    takeUntil(timer$)
   );
   
   // now with header in place subscribe to each epoch and log it
diff --git a/src/components/PageSwitcher/components/EEGEduEvoked/EEGEduEvoked.js b/src/components/PageSwitcher/components/EEGEduEvoked/EEGEduEvoked.js
index 0264a51..982b92c 100644
--- a/src/components/PageSwitcher/components/EEGEduEvoked/EEGEduEvoked.js
+++ b/src/components/PageSwitcher/components/EEGEduEvoked/EEGEduEvoked.js
@@ -1,10 +1,10 @@
 import React from "react";
 import { catchError, multicast } from "rxjs/operators";
-import { Subject } from "rxjs";
+import { Subject, timer } from "rxjs";
 
 import { TextContainer, Card, Stack, RangeSlider, Button, ButtonGroup, Modal } from "@shopify/polaris";
 import { saveAs } from 'file-saver';
-import { take } from "rxjs/operators";
+import { take, takeUntil } from "rxjs/operators";
  
 
 import { zipSamples } from "muse-js";
@@ -31,7 +31,8 @@ export function getSettings () {
     interval: 1,
     srate: 256,
     duration: 1,
-    name: 'Evoked'
+    name: 'Evoked',
+    secondsToSave: 10
   }
 };
 
@@ -171,7 +172,12 @@ export function renderSliders(setData, setSettings, status, Settings) {
   )
 }
 
-export function renderRecord(recordPopChange, recordPop, status, Settings) {
+export function renderRecord(recordPopChange, recordPop, status, Settings, setSettings) {
+
+  function handleSecondsToSaveRangeSliderChange(value) {
+    setSettings(prevState => ({...prevState, secondsToSave: value}));
+  }
+
   return (
     <Card title={'Run ERP experiment'} sectioned>
       <Card.Section>
@@ -196,6 +202,14 @@ export function renderRecord(recordPopChange, recordPop, status, Settings) {
         </p>     
       </Card.Section>
       <Stack>
+         <RangeSlider 
+          disabled={status === generalTranslations.connect} 
+          min={2}
+          max={180}
+          label={'Recording Length: ' + Settings.secondsToSave + ' Seconds'} 
+          value={Settings.secondsToSave} 
+          onChange={handleSecondsToSaveRangeSliderChange} 
+        />   
         <ButtonGroup>
           <Button 
             onClick={() => {
@@ -235,8 +249,7 @@ export function renderRecord(recordPopChange, recordPop, status, Settings) {
 }
 
 function saveToCSV(Settings) {
-  const numSamplesToSave = 10000;
-  console.log('Saving ' + numSamplesToSave + ' samples...');
+  console.log('Saving ' + Settings.secondsToSave + ' seconds...');
   var localObservable$ = null;
   const dataToSave = [];
   window.marker = 0;
@@ -268,9 +281,13 @@ function saveToCSV(Settings) {
     );   
   }
   });
+
+  //create timer
+  const timer$ = timer(Settings.secondsToSave * 1000)
+
   // put selected observable object into local and start taking samples
   localObservable$ = window.multicastEvoked$.pipe(
-  take(numSamplesToSave)
+    takeUntil(timer$)
   );
 
   // now with header in place subscribe to each epoch and log it
diff --git a/src/components/PageSwitcher/components/EEGEduEvoked/sketchEvoked.js b/src/components/PageSwitcher/components/EEGEduEvoked/sketchEvoked.js
index 457156d..699faea 100644
--- a/src/components/PageSwitcher/components/EEGEduEvoked/sketchEvoked.js
+++ b/src/components/PageSwitcher/components/EEGEduEvoked/sketchEvoked.js
@@ -1,8 +1,8 @@
 export default function sketchEvoked (p) {
 
+ const targProp = 0.2;
  let x = 0;
  let thisRand = 0.5; //for random choice of target type
- let targProp = 0.25;
  let isTarget = false;
  
 
diff --git a/src/components/PageSwitcher/components/EEGEduHeartSpectra/EEGEduHeartSpectra.js b/src/components/PageSwitcher/components/EEGEduHeartSpectra/EEGEduHeartSpectra.js
index c5bb6bc..3c8e3c1 100644
--- a/src/components/PageSwitcher/components/EEGEduHeartSpectra/EEGEduHeartSpectra.js
+++ b/src/components/PageSwitcher/components/EEGEduHeartSpectra/EEGEduHeartSpectra.js
@@ -33,7 +33,8 @@ export function getSettings() {
     sliceFFTHigh: 2,
     duration: 4096,
     srate: 256,
-    name: 'HeartSpectra'
+    name: 'HeartSpectra',
+    secondsToSave: 10
   }
 };
 
@@ -239,10 +240,24 @@ export function renderSliders(setData, setSettings, status, Settings) {
   )
 }
 
-export function renderRecord(recordPopChange, recordPop, status, Settings) {
+export function renderRecord(recordPopChange, recordPop, status, Settings, setSettings) {
+
+  function handleSecondsToSaveRangeSliderChange(value) {
+    setSettings(prevState => ({...prevState, secondsToSave: value}));
+  }
+
+
   return(
     <Card title={'Record ' + Settings.name +' Data'} sectioned>
       <Stack>
+        <RangeSlider 
+          disabled={status === generalTranslations.connect} 
+          min={2}
+          max={180}
+          label={'Recording Length: ' + Settings.secondsToSave + ' Seconds'} 
+          value={Settings.secondsToSave} 
+          onChange={handleSecondsToSaveRangeSliderChange} 
+        />
         <ButtonGroup>
           <Button 
             onClick={() => {
@@ -278,8 +293,7 @@ export function renderRecord(recordPopChange, recordPop, status, Settings) {
 
 
 function saveToCSV(Settings) {
-  const secondsToSave = 10;
-  console.log('Saving ' + secondsToSave + ' seconds...');
+  console.log('Saving ' + Settings.secondsToSave + ' seconds...');
   var localObservable$ = null;
   const dataToSave = [];
 
@@ -292,7 +306,7 @@ function saveToCSV(Settings) {
   );   
 
   // Create timer 
-  const timer$ = timer(secondsToSave * 1000);
+  const timer$ = timer(Settings.secondsToSave * 1000);
 
   // put selected observable object into local and start taking samples
   localObservable$ = window.multicastHeartSpectra$.pipe(
diff --git a/src/components/PageSwitcher/components/EEGEduRaw/EEGEduRaw.js b/src/components/PageSwitcher/components/EEGEduRaw/EEGEduRaw.js
index 235e702..c4d6948 100644
--- a/src/components/PageSwitcher/components/EEGEduRaw/EEGEduRaw.js
+++ b/src/components/PageSwitcher/components/EEGEduRaw/EEGEduRaw.js
@@ -1,10 +1,10 @@
 import React from "react";
 import { catchError, multicast } from "rxjs/operators";
-import { Subject } from "rxjs";
+import { Subject, timer } from "rxjs";
 
 import { TextContainer, Card, Stack, RangeSlider, Button, ButtonGroup, Modal } from "@shopify/polaris";
 import { saveAs } from 'file-saver';
-import { take } from "rxjs/operators";
+import { take, takeUntil } from "rxjs/operators";
 
 import { channelNames } from "muse-js";
 import { Line } from "react-chartjs-2";
@@ -30,7 +30,8 @@ export function getSettings () {
     interval: 50,
     srate: 256,
     duration: 1024,
-    name: 'Raw'
+    name: 'Raw',
+    secondsToSave: 10
   }
 };
 
@@ -191,14 +192,14 @@ export function renderSliders(setData, setSettings, status, Settings) {
     <Card title={Settings.name + ' Settings'} sectioned>
       <RangeSlider 
         disabled={status === generalTranslations.connect} 
-        min={128} step={128} max={4096}
+        min={1} step={1} max={4096}
         label={'Epoch duration (Sampling Points): ' + Settings.duration} 
         value={Settings.duration} 
         onChange={handleDurationRangeSliderChange} 
       />          
       <RangeSlider 
         disabled={status === generalTranslations.connect} 
-        min={10} step={1} max={Settings.duration}
+        min={1} step={1} max={Settings.duration}
         label={'Sampling points between epochs onsets: ' + Settings.interval} 
         value={Settings.interval} 
         onChange={handleIntervalRangeSliderChange} 
@@ -221,7 +222,12 @@ export function renderSliders(setData, setSettings, status, Settings) {
   )
 }
 
-export function renderRecord(recordPopChange, recordPop, status, Settings) {
+export function renderRecord(recordPopChange, recordPop, status, Settings, setSettings) {
+  
+  function handleSecondsToSaveRangeSliderChange(value) {
+    setSettings(prevState => ({...prevState, secondsToSave: value}));
+  }
+
   return (
     <Card title={'Record ' + Settings.name + ' Data'} sectioned>
       <Card.Section>
@@ -233,6 +239,14 @@ export function renderRecord(recordPopChange, recordPop, status, Settings) {
         </p>        
       </Card.Section>
       <Stack>
+        <RangeSlider 
+          disabled={status === generalTranslations.connect} 
+          min={2}
+          max={180}
+          label={'Recording Length: ' + Settings.secondsToSave + ' Seconds'} 
+          value={Settings.secondsToSave} 
+          onChange={handleSecondsToSaveRangeSliderChange} 
+        />
         <ButtonGroup>
           <Button 
             onClick={() => {
@@ -270,17 +284,17 @@ export function renderRecord(recordPopChange, recordPop, status, Settings) {
 
 
 function saveToCSV(Settings) {
-  const numSamplesToSave = 50;
-  console.log('Saving ' + numSamplesToSave + ' samples...');
+  console.log('Saving ' + Settings.secondsToSave + ' seconds...');
   var localObservable$ = null;
   const dataToSave = [];
 
   console.log('making ' + Settings.name + ' headers')
 
+ 
   // for each module subscribe to multicast and make header
   // take one sample from selected observable object for headers
   localObservable$ = window.multicastRaw$.pipe(
-  take(1)
+    take(1)
   );
   //take one sample to get header info
   localObservable$.subscribe({ 
@@ -297,9 +311,13 @@ function saveToCSV(Settings) {
     );   
   }
   });
+
+   // Create timer 
+  const timer$ = timer(Settings.secondsToSave * 1000);
+
   // put selected observable object into local and start taking samples
   localObservable$ = window.multicastRaw$.pipe(
-  take(numSamplesToSave)
+    takeUntil(timer$)
   );
 
   // now with header in place subscribe to each epoch and log it
diff --git a/src/components/PageSwitcher/components/EEGEduSpectra/EEGEduSpectra.js b/src/components/PageSwitcher/components/EEGEduSpectra/EEGEduSpectra.js
index 09535f9..f4c9899 100644
--- a/src/components/PageSwitcher/components/EEGEduSpectra/EEGEduSpectra.js
+++ b/src/components/PageSwitcher/components/EEGEduSpectra/EEGEduSpectra.js
@@ -3,8 +3,8 @@ import { catchError, multicast } from "rxjs/operators";
 
 import { TextContainer, Card, Stack, RangeSlider, Button, ButtonGroup, Modal } from "@shopify/polaris";
 import { saveAs } from 'file-saver';
-import { take } from "rxjs/operators";
-import { Subject } from "rxjs";
+import { take, takeUntil } from "rxjs/operators";
+import { Subject, timer } from "rxjs";
 
 import { channelNames } from "muse-js";
 import { Line } from "react-chartjs-2";
@@ -33,7 +33,9 @@ export function getSettings() {
     sliceFFTHigh: 30,
     duration: 1024,
     srate: 256,
-    name: 'Spectra'
+    name: 'Spectra',
+    secondsToSave: 10
+
   }
 };
 
@@ -244,10 +246,23 @@ export function renderSliders(setData, setSettings, status, Settings) {
   )
 }
 
-export function renderRecord(recordPopChange, recordPop, status, Settings) {
+export function renderRecord(recordPopChange, recordPop, status, Settings, setSettings) {
+
+  function handleSecondsToSaveRangeSliderChange(value) {
+    setSettings(prevState => ({...prevState, secondsToSave: value}));
+  }
+ 
   return(
     <Card title={'Record ' + Settings.name +' Data'} sectioned>
       <Stack>
+        <RangeSlider 
+          disabled={status === generalTranslations.connect} 
+          min={2}
+          max={180}
+          label={'Recording Length: ' + Settings.secondsToSave + ' Seconds'} 
+          value={Settings.secondsToSave} 
+          onChange={handleSecondsToSaveRangeSliderChange} 
+        />
         <ButtonGroup>
           <Button 
             onClick={() => {
@@ -283,8 +298,7 @@ export function renderRecord(recordPopChange, recordPop, status, Settings) {
 
 
 function saveToCSV(Settings) {
-  const numSamplesToSave = 50;
-  console.log('Saving ' + numSamplesToSave + ' samples...');
+  console.log('Saving ' + Settings.secondsToSave + ' seconds...');
   var localObservable$ = null;
   const dataToSave = [];
 
@@ -311,9 +325,13 @@ function saveToCSV(Settings) {
       );   
     }
   });
+
+  // Create timer 
+  const timer$ = timer(Settings.secondsToSave * 1000);
+
   // put selected observable object into local and start taking samples
   localObservable$ = window.multicastSpectra$.pipe(
-    take(numSamplesToSave)
+    takeUntil(timer$)
   );   
 
 
diff --git a/src/components/PageSwitcher/components/EEGEduSsvep/EEGEduSsvep.js b/src/components/PageSwitcher/components/EEGEduSsvep/EEGEduSsvep.js
index cfc29a1..053ba5d 100644
--- a/src/components/PageSwitcher/components/EEGEduSsvep/EEGEduSsvep.js
+++ b/src/components/PageSwitcher/components/EEGEduSsvep/EEGEduSsvep.js
@@ -3,8 +3,8 @@ import { catchError, multicast } from "rxjs/operators";
 
 import { TextContainer, Card, Stack, RangeSlider, Button, ButtonGroup, Modal } from "@shopify/polaris";
 import { saveAs } from 'file-saver';
-import { take } from "rxjs/operators";
-import { Subject } from "rxjs";
+import { take, takeUntil } from "rxjs/operators";
+import { Subject, timer } from "rxjs";
 
 import { channelNames } from "muse-js";
 import { Line } from "react-chartjs-2";
@@ -37,7 +37,8 @@ export function getSettings() {
     sliceFFTHigh: 30,
     duration: 1024,
     srate: 256,
-    name: 'Ssvep'
+    name: 'Ssvep',
+    secondsToSave: 10
   }
 };
 
@@ -248,14 +249,25 @@ export function renderSliders(setData, setSettings, status, Settings) {
   )
 }
 
-export function renderRecord(recordPopChange, recordPop, status, Settings, recordTwoPopChange, recordTwoPop) {
-  const cond1 = "11Hz";
-  const cond2 = "14Hz";
+export function renderRecord(recordPopChange, recordPop, status, Settings, recordTwoPopChange, recordTwoPop, setSettings) {
+  const cond1 = "Slow Frequency";
+  const cond2 = "Fast Frequency";
+  
+  function handleSecondsToSaveRangeSliderChange(value) {
+    setSettings(prevState => ({...prevState, secondsToSave: value}));
+  }
   
   return(
     <Card title={'Record ' + Settings.name +' Data'} sectioned>
       <Stack>
-        
+        <RangeSlider 
+          disabled={status === generalTranslations.connect} 
+          min={2}
+          max={180}
+          label={'Recording Length: ' + Settings.secondsToSave + ' Seconds'} 
+          value={Settings.secondsToSave} 
+          onChange={handleSecondsToSaveRangeSliderChange} 
+        />        
         <ButtonGroup>
           <Button 
             onClick={() => {
@@ -327,8 +339,7 @@ export function renderRecord(recordPopChange, recordPop, status, Settings, recor
 
 
 function saveToCSV(Settings, condition) {
-  const numSamplesToSave = 50;
-  console.log('Saving ' + numSamplesToSave + ' samples...');
+  console.log('Saving ' + Settings.secondsToSave + ' seconds...');
   var localObservable$ = null;
   const dataToSave = [];
 
@@ -355,9 +366,13 @@ function saveToCSV(Settings, condition) {
       );   
     }
   });
+
+  //create timer
+  const timer$ = timer(Settings.secondsToSave * 1000);
+
   // put selected observable object into local and start taking samples
   localObservable$ = window.multicastSsvep$.pipe(
-    take(numSamplesToSave)
+    takeUntil(timer$)
   );   
 
 

From e2fc5dbea781ba96c76486af5561179d46b0c94f Mon Sep 17 00:00:00 2001
From: Kyle Mathewson <kylemath@gmail.com>
Date: Mon, 13 Jan 2020 21:20:48 -0700
Subject: [PATCH 3/3] type

---
 src/components/PageSwitcher/PageSwitcher.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/PageSwitcher/PageSwitcher.js b/src/components/PageSwitcher/PageSwitcher.js
index 92f2ad1..28bb64e 100644
--- a/src/components/PageSwitcher/PageSwitcher.js
+++ b/src/components/PageSwitcher/PageSwitcher.js
@@ -1,4 +1,4 @@
- import React, { useState, useCallback } from "react";
+import React, { useState, useCallback } from "react";
 import { MuseClient } from "muse-js";
 import { Select, Card, Stack, Button, ButtonGroup, Checkbox } from "@shopify/polaris";
 
@@ -78,7 +78,7 @@ export function PageSwitcher() {
   const [status, setStatus] = useState(generalTranslations.connect);
 
   // for picking a new module
-  const [selected, setSelected] = useState(ssvep);
+  const [selected, setSelected] = useState(intro);
   const handleSelectChange = useCallback(value => {
     setSelected(value);