Merge pull request #341 from HDI-Project/disabledNavSync

Disabled period navigation while in sync mode (temp functionality)

Author: sergiu-ojoc

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

@@ -96,6 +96,7 @@ const Header = ({
         <li>
           <button
             type="button"
+            disabled={isTimeSyncEnabled}
             onClick={() => !isEditingEventRange && setReviewRange('year')}
             className={reviewRange === 'year' || reviewRange === null ? 'active' : ''}
           >
@@ -107,7 +108,7 @@ const Header = ({
             type="button"
             onClick={() => !isEditingEventRange && setReviewRange('month')}
             className={reviewRange === 'month' ? 'active' : ''}
-            disabled={reviewRange === null}
+            disabled={reviewRange === null || isTimeSyncEnabled}
           >
             Month
           </button>
@@ -117,7 +118,7 @@ const Header = ({
             type="button"
             onClick={() => !isEditingEventRange && setReviewRange('day')}
             className={reviewRange === 'day' ? 'active' : ''}
-            disabled={reviewRange === null || selectedPeriodLevel.month === ''}
+            disabled={reviewRange === null || selectedPeriodLevel.month === '' || isTimeSyncEnabled}
           >
             Day
           </button>

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

@@ -64,8 +64,10 @@
                     background: $btn-blue;
                     color: #fff;
                 }
-                &:disabled{
+                &:disabled, &.active:disabled{
                     opacity: 0.4;
+                    background-color: rgba(0, 0, 0, 0.4);
+                    color: rgba(255, 255, 255, 0.5);
                     cursor: not-allowed;
                 }
             }

client/src/model/utils/Utils.js

@@ -25,6 +25,8 @@ export const toTimestamp = function (strDate) {
   return datum / 1000;
 };
 
+const getEventTag = (currentTag) => (currentTag === null || currentTag === 'None' ? 'Untagged' : currentTag);
+
 export const groupEventsByTimestamp = (events) => {
   let result = {};
   events.forEach((event) => {
@@ -41,7 +43,7 @@ export const groupEventsByTimestamp = (events) => {
         id: event.id,
         start_time: start_time >= yearStartDate ? start_time : yearStartDate,
         stop_time: stop_time <= yearStopDate ? stop_time : yearStopDate,
-        tag: event.tag,
+        tag: getEventTag(event.tag),
         score: event.score,
       };
 
@@ -68,7 +70,7 @@ export const groupEventsByTimestamp = (events) => {
           id: event.id,
           start_time: start_time >= monthDateStart ? start_time : monthDateStart,
           stop_time: stop_time <= monthDateStop ? stop_time : monthDateStop,
-          tag: event.tag,
+          tag: getEventTag(event.tag),
           score: event.score,
           days: {},
         };
@@ -94,7 +96,7 @@ export const groupEventsByTimestamp = (events) => {
             id: event.id,
             start_time: start_time >= dayDateStart ? start_time : dayDateStart,
             stop_time: stop_time <= dayDateStop ? stop_time : dayDateStop,
-            tag: event.tag,
+            tag: getEventTag(event.tag),
             score: event.score,
           };