#15 visualize taskStatus done

src/services/API.ts

@@ -77,4 +77,34 @@ export class APIService {
             }
         });
     };
+
+    public static getTasks = async () => {
+        const token = AuthSelector.getToken();
+        if (!token) {
+            throw Error('Token is required');
+        }
+        return await axios({
+            method: 'get',
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: `Bearer ${token}`
+            },
+            url: `${Settings.API_PREFIX}/labeler/tasks`
+        });
+    };
+
+    public static getTaskStatus = async () => {
+        const token = AuthSelector.getToken();
+        if (!token) {
+            throw Error('Token is required');
+        }
+        return await axios({
+            method: 'get',
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: `Bearer ${token}`
+            },
+            url: `${Settings.API_PREFIX}/labeler/taskStatus`
+        });
+    };
 }

src/store/Actions.ts

@@ -47,5 +47,9 @@ export enum Action {
     DELETE_NOTIFICATION_BY_ID = '@@DELETE_NOTIFICATION_BY_ID',
 
     // AUTH
-    UPDATE_AUTH_DATA = '@@UPDATE_AUTH_DATA'
+    UPDATE_AUTH_DATA = '@@UPDATE_AUTH_DATA',
+
+    // PERFORMANCE
+    UPDATE_TASK_STATUS_DATA = '@@UPDATE_TASK_STATUS_DATA',
+    UPDATE_TASKS_DATA = '@@UPDATE_TASKS_DATA'
 }

src/store/index.ts

@@ -4,13 +4,15 @@ import {generalReducer} from './general/reducer';
 import {aiReducer} from './ai/reducer';
 import {notificationsReducer} from './notifications/reducer';
 import {authReducer} from './auth/reducer';
+import {performanceReducer} from './performance/reducer';
 
 export const rootReducer = combineReducers({
     general: generalReducer,
     labels: labelsReducer,
     ai: aiReducer,
     notifications: notificationsReducer,
-    auth: authReducer
+    auth: authReducer,
+    performance: performanceReducer
 });
 
 export type AppState = ReturnType<typeof rootReducer>;

src/store/performance/actionCreators.ts

@@ -0,0 +1,20 @@
+import {Action} from '../Actions';
+import {Task, TaskStatus} from './types';
+
+export function updateTaskStatus(taskStatus: TaskStatus) {
+    return {
+        type: Action.UPDATE_TASK_STATUS_DATA,
+        payload: {
+            taskStatus
+        }
+    };
+}
+
+export function updateTasks(tasks: Task[]) {
+    return {
+        type: Action.UPDATE_TASKS_DATA,
+        payload: {
+            tasks
+        }
+    };
+}

src/store/performance/reducer.ts

@@ -0,0 +1,40 @@
+import {Action} from 'store/Actions';
+import {PerformanceActionTypes, PerformanceState} from './types';
+
+const initialState: PerformanceState = {
+    taskStatus: {
+        averageTPD: 0,
+        currentAverageTPD: 0,
+        highestRanker: {
+            displayName: '',
+            tpd: 0
+        },
+        me: {
+            displayName: '',
+            tpd: 0
+        }
+    },
+    tasks: []
+};
+
+export function performanceReducer(
+    state = initialState,
+    action: PerformanceActionTypes
+): PerformanceState {
+    switch (action.type) {
+        case Action.UPDATE_TASK_STATUS_DATA: {
+            return {
+                ...state,
+                taskStatus: action.payload.taskStatus
+            };
+        }
+        case Action.UPDATE_TASKS_DATA: {
+            return {
+                ...state,
+                tasks: action.payload.tasks
+            };
+        }
+        default:
+            return state;
+    }
+}

src/store/performance/types.ts

@@ -0,0 +1,46 @@
+import {Action} from '../Actions';
+
+export type PerformanceState = {
+    taskStatus: TaskStatus;
+    tasks: Task[];
+};
+
+export type TaskStatus = {
+    averageTPD: number;
+    currentAverageTPD: number;
+    highestRanker: {
+        displayName: string;
+        tpd: number;
+    };
+    me: {
+        displayName: string;
+        tpd: number;
+    };
+};
+
+export type Task = {
+    name: string;
+    imagesTPD: number;
+    imagesTPH: number;
+    averageTimePerImage: number;
+    labeledTPD: number;
+    labeledTPH: number;
+    averageTimePerLabeled: number;
+    note?: string;
+};
+
+interface UpdateTaskStatusData {
+    type: typeof Action.UPDATE_TASK_STATUS_DATA;
+    payload: {
+        taskStatus: TaskStatus;
+    };
+}
+
+interface UpdateTasksData {
+    type: typeof Action.UPDATE_TASKS_DATA;
+    payload: {
+        tasks: Task[];
+    };
+}
+
+export type PerformanceActionTypes = UpdateTaskStatusData | UpdateTasksData;

src/views/Common/PerformanceProgress/PerformanceProgress.scss

@@ -0,0 +1,70 @@
+@import '../../../settings/Settings';
+
+.PerformanceProgress {
+    display: flex;
+    flex: 1;
+    height: 100%;
+    align-items: flex-end;
+    margin-bottom: 8px;
+    margin-left: 74px;
+    margin-right: 230px;
+    position: relative;
+    .Progress {
+        position: relative;
+        display: flex;
+        flex: 1;
+        border-radius: 10px;
+        height: 10px;
+        overflow-y: hidden;
+        background-color: $darkThemeThirdColor;
+        color: white;
+        font-size: 0.5em;
+    }
+    .Filler {
+        height: 100%;
+        background-color: $secondaryColor;
+        min-width: 10px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        transition: width 1s ease-in-out;
+    }
+    .AverageLabel {
+        margin-right: -25px;
+    }
+    .Me {
+        position: absolute;
+        top: 1px;
+        width: 8px;
+        height: 8px;
+        border-radius: 4px;
+        background-color: white;
+        opacity: 0.9;
+        transition: left 1s ease-in-out;
+    }
+    .Name {
+        display: flex;
+        flex-direction: row;
+        top: 0;
+        position: absolute;
+        font-size: 8px;
+        transition: left right 1s ease-in-out;
+    }
+    .Reverse {
+        flex-direction: row-reverse;
+    }
+    .FlipV {
+        display: inline-block;
+        transform: scale(-1, 1);
+    }
+    .Ranker {
+        position: absolute;
+        top: 1px;
+        width: 8px;
+        height: 8px;
+        border-radius: 4px;
+        border: 1px solid white;
+        background-color: red;
+        transition: left 1s ease-in-out;
+    }
+}

src/views/Common/PerformanceProgress/PerformanceProgress.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import {connect} from 'react-redux';
+import {APIService} from 'services/API';
+import {AppState} from 'store';
+import {updateTaskStatus} from 'store/performance/actionCreators';
+import {TaskStatus} from 'store/performance/types';
+import './PerformanceProgress.scss';
+import arrowDownLeft from './images/arrow-down-left.png';
+import classNames from 'classnames';
+
+interface IProps {
+    taskStatus: TaskStatus;
+    updateTaskStatusAction: (taskStatus: TaskStatus) => any;
+}
+
+const PerformanceProgress: React.FC<IProps> = ({
+    taskStatus,
+    updateTaskStatusAction
+}) => {
+    React.useEffect(() => {
+        const loadData = async () => {
+            const {data} = await APIService.getTaskStatus();
+            updateTaskStatusAction(data.data);
+        };
+        loadData();
+    }, []);
+
+    const {averageTPD, currentAverageTPD, me, highestRanker} = taskStatus;
+
+    const getPercent = (value: number, margin: number = 0) =>
+        `calc(${Math.min(value / averageTPD, 1) * 100}% - ${margin}px`;
+
+    const getPercentInverse = (value: number, margin: number = 0) =>
+        `calc(${100 - Math.min(value / averageTPD, 1) * 100}% + ${margin}px`;
+
+    const overHalf = (value: number) =>
+        Math.min(value / averageTPD, 1) * 100 > 50;
+
+    const cropPercent = (value: number, crop: number = 25) => {
+        const progress = Math.min(value / averageTPD, 1) * 100;
+        return progress < crop || progress > 100 - crop;
+    };
+
+    return (
+        <div className="PerformanceProgress">
+            <div className="Progress">
+                <div
+                    className="Filler"
+                    style={{
+                        width: getPercent(currentAverageTPD)
+                    }}>
+                    {cropPercent(currentAverageTPD, 10) ? null : (
+                        <span className="AverageLabel">average speed</span>
+                    )}
+                </div>
+                <div
+                    className="Ranker"
+                    style={{
+                        left: getPercent(highestRanker.tpd, 10)
+                    }}
+                />
+                <div
+                    className="Me"
+                    style={{
+                        left: getPercent(me.tpd, 10)
+                    }}
+                />
+            </div>
+            <div
+                className={classNames({Name: true, Reverse: overHalf(me.tpd)})}
+                style={
+                    overHalf(me.tpd)
+                        ? {right: getPercentInverse(me.tpd, 4)}
+                        : {left: getPercent(me.tpd, 10)}
+                }>
+                <img
+                    src={arrowDownLeft}
+                    className={classNames({FlipV: overHalf(me.tpd)})}
+                    style={{width: 10, height: 10, marginLeft: 2, marginTop: 4}}
+                />
+                <span>{me.displayName}</span>
+            </div>
+        </div>
+    );
+};
+
+const mapDispatchToProps = {
+    updateTaskStatusAction: updateTaskStatus
+};
+
+const mapStateToProps = (state: AppState) => ({
+    taskStatus: state.performance.taskStatus
+});
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(PerformanceProgress);