Merge pull request #340 from HDI-Project/timeSyncOpt

Added time sync switch option

Author: sergiu-ojoc

client/src/components/Timeseries/Sidebar/Header.jsx

@@ -8,8 +8,9 @@ import {
   getIsEditingEventRange,
   getGrouppedDatarunEvents,
   getIsEventModeEnabled,
+  getIsTimeSyncModeEnabled,
 } from '../../../model/selectors/datarun';
-import { reviewPeriodAction, toggleEventModeAction } from '../../../model/actions/datarun';
+import { reviewPeriodAction, toggleEventModeAction, toggleTimeSyncModeAction } from '../../../model/actions/datarun';
 import './Header.scss';
 
 const showPeriod = (selectedPeriodLevel) => {
@@ -28,7 +29,7 @@ const showPeriod = (selectedPeriodLevel) => {
   );
 };
 
-const SidebarHeading = ({ signalName, toggleEvent, isEventModeEnabled }) => (
+const SidebarHeading = ({ signalName, toggleEvent, isEventModeEnabled, toggleTimeSync, isTimeSyncEnabled }) => (
   <div className="sidebar-heading">
     <ul>
       <li className="signal-title">{signalName}</li>
@@ -48,6 +49,22 @@ const SidebarHeading = ({ signalName, toggleEvent, isEventModeEnabled }) => (
           </div>
         </div>
       </li>
+      <li>
+        <div className="switch-control">
+          <div className="row">
+            <label htmlFor="toggleTimeSync">
+              <input
+                type="checkbox"
+                id="toggleTimeSync"
+                onChange={(event) => toggleTimeSync(event.target.checked)}
+                checked={isTimeSyncEnabled}
+              />
+              <span className="switch" />
+              Sync Time Ranges
+            </label>
+          </div>
+        </div>
+      </li>
     </ul>
   </div>
 );
@@ -61,12 +78,16 @@ const Header = ({
   grouppedEvents,
   toggleEventsMode,
   isEventModeEnabled,
+  toggleTimeSync,
+  isTimeSyncEnabled,
 }) => (
   <div className="period-control">
     <SidebarHeading
       signalName={dataRun.signal}
       toggleEvent={toggleEventsMode}
       isEventModeEnabled={isEventModeEnabled}
+      toggleTimeSync={toggleTimeSync}
+      isTimeSyncEnabled={isTimeSyncEnabled}
     />
     <EventSummary selectedPeriodLevel={selectedPeriodLevel} grouppedEvents={grouppedEvents} />
     <div>
@@ -115,9 +136,11 @@ export default connect(
     isEditingEventRange: getIsEditingEventRange(state),
     grouppedEvents: getGrouppedDatarunEvents(state),
     isEventModeEnabled: getIsEventModeEnabled(state),
+    isTimeSyncEnabled: getIsTimeSyncModeEnabled(state),
   }),
   (dispatch) => ({
     setReviewRange: (periodLevel) => dispatch(reviewPeriodAction(periodLevel)),
     toggleEventsMode: (mode) => dispatch(toggleEventModeAction(mode)),
+    toggleTimeSync: (mode) => dispatch(toggleTimeSyncModeAction(mode)),
   }),
 )(Header);

client/src/components/Timeseries/Sidebar/Header.scss

@@ -6,7 +6,7 @@
     }
 
     li{
-        margin-right: 15px;
+        margin-right: 10px;
         vertical-align: middle;
         &.signal-title{
             font-size: 20px;

client/src/model/actions/datarun.ts

@@ -34,6 +34,7 @@ import {
   TOGGLE_EVENT_MODE,
   UPLOAD_JSON_EVENTS,
   EVENT_UPDATE_STATUS,
+  TOGGLE_TIME_SYNC_RANGE,
 } from '../types';
 
 export function selectDatarun(datarunID: string) {
@@ -130,6 +131,15 @@ export function toggleEventModeAction(mode) {
   };
 }
 
+export function toggleTimeSyncModeAction(syncMode) {
+  return function (dispatch) {
+    dispatch({
+      type: TOGGLE_TIME_SYNC_RANGE,
+      isTimeSyncModeEnabled: syncMode,
+    });
+  };
+}
+
 export function updateEventDetailsAction(updatedEventDetails) {
   return function (dispatch, getState) {
     const isAddingNewEvent = getIsAddingNewEvents(getState());

client/src/model/reducers/datarun.ts

@@ -31,6 +31,7 @@ const initialState: DatarunState = {
   eventUpdateStatus: null,
   isTranscriptSupported: false,
   isSpeechInProgress: false,
+  isTimeSyncModeEnabled: true,
 };
 
 /**
@@ -127,6 +128,10 @@ function SPEECH_STATUS(nextState, { isSpeechInProgress }) {
   nextState.isSpeechInProgress = isSpeechInProgress;
 }
 
+function TOGGLE_TIME_SYNC_RANGE(nextState, { isTimeSyncModeEnabled }) {
+  nextState.isTimeSyncModeEnabled = isTimeSyncModeEnabled;
+}
+
 export default createReducer<DatarunState>(initialState, {
   SELECT_DATARUN,
   SET_TIMESERIES_PERIOD,
@@ -149,4 +154,5 @@ export default createReducer<DatarunState>(initialState, {
   EVENT_UPDATE_STATUS,
   SET_TRANSCRIPT_STATUS,
   SPEECH_STATUS,
+  TOGGLE_TIME_SYNC_RANGE,
 });

client/src/model/selectors/datarun.ts

@@ -29,6 +29,7 @@ export const getUploadEventsStatus = (state) => state.datarun.uploadEventsStatus
 export const getUpdateEventStatus = (state) => state.datarun.eventUpdateStatus;
 export const getIsTranscriptSupported = (state) => state.datarun.isTranscriptSupported;
 export const getIsSpeechInProgress = (state) => state.datarun.isSpeechInProgress;
+export const getIsTimeSyncModeEnabled = (state) => state.datarun.isTimeSyncModeEnabled;
 
 // @TODO - check to see if it's really needed
 const filterDatarunPeriod = (period, periodLevel, reviewPeriod) => {
@@ -125,15 +126,25 @@ export const getFilteredPeriodRange = createSelector(
 );
 
 export const getDatarunDetails = createSelector(
-  [getSelectedDatarun, getUpdatedEventsDetails, getFilteredPeriodRange],
-  (dataRun, updatedEventDetails, filteredRange) => {
-    let { events, eventWindows, timeSeries } = dataRun;
+  [
+    getSelectedDatarun,
+    getSelectedPeriodLevel,
+    getReviewPeriod,
+    getUpdatedEventsDetails,
+    getFilteredPeriodRange,
+    getIsTimeSyncModeEnabled,
+  ],
+  (dataRun, periodLevel, reviewPeriod, updatedEventDetails, filteredRange, isTimeSyncEnabled) => {
+    let { period, events, eventWindows, timeSeries } = dataRun;
     let currentEventIndex = events.findIndex((windowEvent) => windowEvent.id === updatedEventDetails.id);
+
     if (currentEventIndex !== -1) {
       updateEventDetails(updatedEventDetails, timeSeries, currentEventIndex, eventWindows);
     }
 
-    const completeDataRun = { ...dataRun, period: filteredRange };
+    const selectedPeriod = isTimeSyncEnabled ? filteredRange : filterDatarunPeriod(period, periodLevel, reviewPeriod);
+
+    const completeDataRun = { ...dataRun, period: selectedPeriod };
     return completeDataRun;
   },
 );

client/src/model/types/datarun.ts

@@ -20,6 +20,7 @@ export const REVIEW_PERIOD_LEVEL = 'REVIEW_PERIOD_LEVEL';
 export const TOGGLE_EVENT_MODE = 'TOGGLE_EVENT_MODE';
 export const UPLOAD_JSON_EVENTS = 'UPLOAD_JSON_EVENTS';
 export const EVENT_UPDATE_STATUS = 'EVENT_UPDATE_STATUS';
+export const TOGGLE_TIME_SYNC_RANGE = 'TOGGLE_TIME_SYNC_RANGE';
 
 export type SelectDatarunAction = {
   type: typeof SELECT_DATARUN;