feature/msb-004_orchestrated_error_reporting_system (#193)

* initial commit - refactor + color palette list + color added to LabelName type + color initiation

* use material ui text field

* label creation and edit is working

* refresh button is working

* color labels work in progress

* render settings refactor

* render rect works

* done

* initial commit with Redux store setup

* initial notifications view plugin

* notifications view is ready to use

* refactor

* refactor 2

src/App.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
 import './App.scss';
-import EditorView from "./views/EditorView/EditorView";
-import MainView from "./views/MainView/MainView";
-import {ProjectType} from "./data/enums/ProjectType";
-import {AppState} from "./store";
-import {connect} from "react-redux";
-import PopupView from "./views/PopupView/PopupView";
-import MobileMainView from "./views/MobileMainView/MobileMainView";
-import {ISize} from "./interfaces/ISize";
-import {Settings} from "./settings/Settings";
-import {SizeItUpView} from "./views/SizeItUpView/SizeItUpView";
-import {PlatformModel} from "./staticModels/PlatformModel";
-import classNames from "classnames";
+import EditorView from './views/EditorView/EditorView';
+import MainView from './views/MainView/MainView';
+import {ProjectType} from './data/enums/ProjectType';
+import {AppState} from './store';
+import {connect} from 'react-redux';
+import PopupView from './views/PopupView/PopupView';
+import MobileMainView from './views/MobileMainView/MobileMainView';
+import {ISize} from './interfaces/ISize';
+import {Settings} from './settings/Settings';
+import {SizeItUpView} from './views/SizeItUpView/SizeItUpView';
+import {PlatformModel} from './staticModels/PlatformModel';
+import classNames from 'classnames';
+import NotificationsView from './views/NotificationsView/NotificationsView';
 
 interface IProps {
     projectType: ProjectType;
@@ -36,11 +37,12 @@ const App: React.FC<IProps> = ({projectType, windowSize, ObjectDetectorLoaded, P
     };
 
       return (
-        <div className={classNames("App", {"AI": ObjectDetectorLoaded || PoseDetectionLoaded})}
+        <div className={classNames('App', {'AI': ObjectDetectorLoaded || PoseDetectionLoaded})}
             draggable={false}
         >
             {selectRoute()}
             <PopupView/>
+            <NotificationsView/>
         </div>
       );
 };

src/data/ExportFormatData.ts

@@ -1,54 +1,54 @@
-import {ILabelFormatData} from "../interfaces/ILabelFormatData";
-import {LabelType} from "./enums/LabelType";
-import {AnnotationFormatType} from "./enums/AnnotationFormatType";
+import {ILabelFormatData} from '../interfaces/ILabelFormatData';
+import {LabelType} from './enums/LabelType';
+import {AnnotationFormatType} from './enums/AnnotationFormatType';
 
-export type ExportFormatDataMap = { [s in LabelType]: ILabelFormatData[]; };
+export type ExportFormatDataMap = Record<LabelType, ILabelFormatData[]>;
 
 export const ExportFormatData: ExportFormatDataMap = {
-    "RECT": [
+    [LabelType.RECT]: [
         {
             type: AnnotationFormatType.YOLO,
-            label: "A .zip package containing files in YOLO format."
+            label: 'A .zip package containing files in YOLO format.'
         },
         {
             type: AnnotationFormatType.VOC,
-            label: "A .zip package containing files in VOC XML format."
+            label: 'A .zip package containing files in VOC XML format.'
         },
         {
             type: AnnotationFormatType.CSV,
-            label: "Single CSV file."
+            label: 'Single CSV file.'
         }
     ],
-    "POINT": [
+    [LabelType.POINT]: [
         {
             type: AnnotationFormatType.CSV,
-            label: "Single CSV file."
+            label: 'Single CSV file.'
         }
     ],
-    "LINE": [
+    [LabelType.LINE]: [
         {
             type: AnnotationFormatType.CSV,
-            label: "Single CSV file."
+            label: 'Single CSV file.'
         }
     ],
-    "POLYGON": [
+    [LabelType.POLYGON]: [
         {
             type: AnnotationFormatType.VGG,
-            label: "Single file in VGG JSON format."
+            label: 'Single file in VGG JSON format.'
         },
         {
             type: AnnotationFormatType.COCO,
-            label: "Single file in COCO JSON format."
+            label: 'Single file in COCO JSON format.'
         }
     ],
-    "IMAGE RECOGNITION": [
+    [LabelType.IMAGE_RECOGNITION]: [
         {
             type: AnnotationFormatType.CSV,
-            label: "Single CSV file."
+            label: 'Single CSV file.'
         },
         {
             type: AnnotationFormatType.JSON,
-            label: "Single JSON file."
+            label: 'Single JSON file.'
         }
     ]
-}
+}

src/data/ImporterSpecData.ts

@@ -1,16 +1,16 @@
-import {AnnotationFormatType} from "./enums/AnnotationFormatType";
-import {AnnotationImporter} from "../logic/import/AnnotationImporter";
-import {COCOImporter} from "../logic/import/coco/COCOImporter";
-import {YOLOImporter} from "../logic/import/yolo/YOLOImporter";
+import {AnnotationFormatType} from './enums/AnnotationFormatType';
+import {AnnotationImporter} from '../logic/import/AnnotationImporter';
+import {COCOImporter} from '../logic/import/coco/COCOImporter';
+import {YOLOImporter} from '../logic/import/yolo/YOLOImporter';
 
-export type ImporterSpecDataMap = { [s in AnnotationFormatType]: typeof AnnotationImporter; };
+export type ImporterSpecDataMap = Record<AnnotationFormatType, typeof AnnotationImporter>;
 
 
 export const ImporterSpecData: ImporterSpecDataMap = {
-    COCO: COCOImporter,
-    CSV: undefined,
-    JSON: undefined,
-    VGG: undefined,
-    VOC: undefined,
-    YOLO: YOLOImporter
-}
+    [AnnotationFormatType.COCO]: COCOImporter,
+    [AnnotationFormatType.CSV]: undefined,
+    [AnnotationFormatType.JSON]: undefined,
+    [AnnotationFormatType.VGG]: undefined,
+    [AnnotationFormatType.VOC]: undefined,
+    [AnnotationFormatType.YOLO]: YOLOImporter
+}

src/data/enums/AnnotationFormatType.ts

@@ -1,8 +1,8 @@
 export enum AnnotationFormatType {
-    YOLO = "YOLO",
-    COCO = "COCO",
-    CSV = "CSV",
-    JSON = "JSON",
-    VOC = "VOC",
-    VGG = "VGG"
+    YOLO = 'YOLO',
+    COCO = 'COCO',
+    CSV = 'CSV',
+    JSON = 'JSON',
+    VOC = 'VOC',
+    VGG = 'VGG'
 }

src/data/enums/NotificationType.ts

@@ -0,0 +1,5 @@
+export enum NotificationType {
+    ERROR = 'ERROR',
+    SUCCESS = 'SUCCESS',
+    MESSAGE = 'MESSAGE'
+}

src/data/info/DropDownMenuData.ts

@@ -62,7 +62,7 @@ export const DropDownMenuData: DropDownMenuNode[] = [
         ]
     },
     {
-        name: 'More',
+        name: 'Community',
         imageSrc: 'ico/more.png',
         imageAlt: 'more',
         disabled: false,

src/data/info/LabelToolkitData.ts

@@ -1,5 +1,5 @@
-import {LabelType} from "../enums/LabelType";
-import {ProjectType} from "../enums/ProjectType";
+import {LabelType} from '../enums/LabelType';
+import {ProjectType} from '../enums/ProjectType';
 
 export interface ILabelToolkit {
     labelType: LabelType;
@@ -12,37 +12,37 @@ export interface ILabelToolkit {
 export const LabelToolkitData: ILabelToolkit[] = [
     {
         labelType: LabelType.IMAGE_RECOGNITION,
-        headerText: "Image recognition",
-        imageSrc: "ico/object.png",
-        imageAlt: "object",
+        headerText: 'Image recognition',
+        imageSrc: 'ico/object.png',
+        imageAlt: 'object',
         projectType: ProjectType.IMAGE_RECOGNITION,
     },
     {
         labelType: LabelType.RECT,
-        headerText: "Rect",
-        imageSrc: "ico/rectangle.png",
-        imageAlt: "rectangle",
+        headerText: 'Rect',
+        imageSrc: 'ico/rectangle.png',
+        imageAlt: 'rectangle',
         projectType: ProjectType.OBJECT_DETECTION,
     },
     {
         labelType: LabelType.POINT,
-        headerText: "Point",
-        imageSrc: "ico/point.png",
-        imageAlt: "point",
+        headerText: 'Point',
+        imageSrc: 'ico/point.png',
+        imageAlt: 'point',
         projectType: ProjectType.OBJECT_DETECTION,
     },
     {
         labelType: LabelType.LINE,
-        headerText: "Line",
-        imageSrc: "ico/line.png",
-        imageAlt: "line",
+        headerText: 'Line',
+        imageSrc: 'ico/line.png',
+        imageAlt: 'line',
         projectType: ProjectType.OBJECT_DETECTION,
     },
     {
         labelType: LabelType.POLYGON,
-        headerText: "Polygon",
-        imageSrc: "ico/polygon.png",
-        imageAlt: "polygon",
+        headerText: 'Polygon',
+        imageSrc: 'ico/polygon.png',
+        imageAlt: 'polygon',
         projectType: ProjectType.OBJECT_DETECTION,
     },
 ];

src/data/info/SocialMediaData.ts

@@ -1,4 +1,4 @@
-import {Settings} from "../../settings/Settings";
+import {Settings} from '../../settings/Settings';
 
 export interface ISocialMedia {
     displayName:string;
@@ -10,24 +10,24 @@ export interface ISocialMedia {
 
 export const SocialMediaData: ISocialMedia[] = [
     {
-        displayName: "Github",
-        imageSrc: "/ico/github-logo.png",
-        imageAlt: "GitHub Logo",
+        displayName: 'Github',
+        imageSrc: '/ico/github-logo.png',
+        imageAlt: 'GitHub Logo',
         href: Settings.GITHUB_URL,
-        tooltipMessage: "Show me some love on GitHub",
+        tooltipMessage: 'Show me some love on GitHub',
     },
     {
-        displayName: "Medium",
-        imageSrc: "/ico/medium-logo.png",
-        imageAlt: "Medium Logo",
+        displayName: 'Medium',
+        imageSrc: '/ico/medium-logo.png',
+        imageAlt: 'Medium Logo',
         href: Settings.MEDIUM_URL,
-        tooltipMessage: "Read my AI content on Medium",
+        tooltipMessage: 'Read my AI content on Medium',
     },
     {
-        displayName: "Patreon",
-        imageSrc: "/ico/patreon-logo.png",
-        imageAlt: "Patreon Logo",
+        displayName: 'Patreon',
+        imageSrc: '/ico/patreon-logo.png',
+        imageAlt: 'Patreon Logo',
         href: Settings.PATREON_URL,
-        tooltipMessage: "Support Make Sense on Patreon and help it grow"
+        tooltipMessage: 'Support Make Sense on Patreon and help it grow'
     },
 ];

src/store/Actions.ts

@@ -29,4 +29,8 @@ export enum Action {
     UPDATE_HIGHLIGHTED_LABEL_ID = '@@UPDATE_HIGHLIGHTED_LABEL_ID',
     UPDATE_LABEL_NAMES = '@@UPDATE_LABEL_NAMES',
     UPDATE_FIRST_LABEL_CREATED_FLAG = '@@UPDATE_FIRST_LABEL_CREATED_FLAG',
+
+    // NOTIFICATIONS
+    SUBMIT_NEW_NOTIFICATION = '@@SUBMIT_NEW_NOTIFICATION',
+    DELETE_NOTIFICATION_BY_ID = '@@DELETE_NOTIFICATION_BY_ID'
 }

src/store/index.ts

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

src/store/notifications/actionCreators.ts

@@ -0,0 +1,21 @@
+import {INotification, NotificationsActionType} from './types';
+import {Action} from '../Actions';
+
+export function submitNewNotification(notification: INotification): NotificationsActionType {
+    return {
+        type: Action.SUBMIT_NEW_NOTIFICATION,
+        payload: {
+            notification,
+        },
+    };
+}
+
+
+export function deleteNotificationById(id: string): NotificationsActionType {
+    return {
+        type: Action.DELETE_NOTIFICATION_BY_ID,
+        payload: {
+            id,
+        },
+    };
+}

src/store/notifications/reducer.ts

@@ -0,0 +1,29 @@
+import {INotification, NotificationsActionType, NotificationsState} from './types';
+import {Action} from '../Actions';
+
+const initialState: NotificationsState = {
+    queue: []
+}
+
+export function notificationsReducer(
+    state = initialState,
+    action: NotificationsActionType
+): NotificationsState {
+    switch (action.type) {
+        case Action.SUBMIT_NEW_NOTIFICATION: {
+            return {
+                ...state,
+                queue: [...state.queue, action.payload.notification]
+            }
+        }
+        case Action.DELETE_NOTIFICATION_BY_ID: {
+            return {
+                ...state,
+                queue: state.queue
+                    .filter((message: INotification) => message.id !== action.payload.id)
+            }
+        }
+        default:
+            return state;
+    }
+}

src/store/notifications/types.ts

@@ -0,0 +1,29 @@
+import {NotificationType} from '../../data/enums/NotificationType';
+import {Action} from '../Actions';
+
+export interface INotification {
+    id: string,
+    type: NotificationType,
+    header: string,
+    description: string
+}
+
+export type NotificationsState = {
+    queue: INotification[]
+}
+
+interface SubmitNewNotification {
+    type: typeof Action.SUBMIT_NEW_NOTIFICATION;
+    payload: {
+        notification: INotification;
+    }
+}
+
+interface DeleteNotificationById {
+    type: typeof Action.DELETE_NOTIFICATION_BY_ID;
+    payload: {
+        id: string;
+    }
+}
+
+export type NotificationsActionType = SubmitNewNotification | DeleteNotificationById