Feature / Drop Image

.eslintrc.yml

@@ -5,6 +5,7 @@ extends:
 parser: "@typescript-eslint/parser"
 plugins:
   - "@typescript-eslint"
+  - import
 rules:
   "@typescript-eslint/no-inferrable-types": off
   no-shadow: off
@@ -24,6 +25,8 @@ rules:
   no-eval: error
   no-implied-eval: error
   prefer-promise-reject-errors: warn
+  semi: warn
+
 env:
   browser: true
 settings:

docker/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16.16.0
+FROM node:16.20
 
 RUN apt-get update && apt-get -y install git && rm -rf /var/lib/apt/lists/*
 

package.json

@@ -5,16 +5,17 @@
   "dependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
-    "@mui/material": "^5.9.1",
+    "@mui/material": "^5.13.4",
     "@mui/system": "^5.9.1",
+    "@tabler/icons-react": "^2.14.0",
     "@tensorflow-models/coco-ssd": "^2.2.2",
     "@tensorflow-models/posenet": "^2.2.2",
     "@tensorflow/tfjs": "^3.19.0",
     "@tensorflow/tfjs-backend-cpu": "^3.19.0",
     "@tensorflow/tfjs-backend-webgl": "^3.19.0",
     "@tensorflow/tfjs-core": "^3.19.0",
     "@tensorflow/tfjs-node": "^3.19.0",
-    "axios": "^1.1.3",
+    "axios": "^1.6.4",
     "classnames": "^2.3.1",
     "file-saver": "^2.0.5",
     "jszip": "^3.10.0",
@@ -73,6 +74,7 @@
     "@vitejs/plugin-react": "^2.0.0",
     "aws-sdk": "^2.1181.0",
     "eslint": "^8.20.0",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-react": "^7.30.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^28.1.3",

src/App.tsx

@@ -1,28 +1,34 @@
+import { ThemeProvider, createTheme } from '@mui/material';
+import classNames from 'classnames';
 import React from 'react';
+import { connect } from 'react-redux';
 import './App.scss';
+import { ProjectType } from './data/enums/ProjectType';
+import { ISize } from './interfaces/ISize';
+import { Settings } from './settings/Settings';
+import { PlatformModel } from './staticModels/PlatformModel';
+import { AppState } from './store';
+import { RoboflowAPIDetails } from './store/ai/types';
 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';
-import { RoboflowAPIDetails } from './store/ai/types';
+import PopupView from './views/PopupView/PopupView';
+import { SizeItUpView } from './views/SizeItUpView/SizeItUpView';
 
 interface IProps {
     projectType: ProjectType;
     windowSize: ISize;
-    isObjectDetectorLoaded: boolean;
-    isPoseDetectionLoaded: boolean;
+    isObjectDetectorLoaded?: boolean;
+    isPoseDetectionLoaded?: boolean;
     isYOLOV5ObjectDetectorLoaded: boolean;
     roboflowAPIDetails: RoboflowAPIDetails;
 }
+const darkTheme = createTheme({
+    palette: {
+        mode: 'dark',
+    },
+});
 
 const App: React.FC<IProps> = (
     {
@@ -36,29 +42,32 @@ const App: React.FC<IProps> = (
 ) => {
     const selectRoute = () => {
         if (!!PlatformModel.mobileDeviceData.manufacturer && !!PlatformModel.mobileDeviceData.os)
-            return <MobileMainView/>;
+            return <MobileMainView />;
         if (!projectType)
-            return <MainView/>;
+            return <MainView />;
         else {
             if (windowSize.height < Settings.EDITOR_MIN_HEIGHT || windowSize.width < Settings.EDITOR_MIN_WIDTH) {
-                return <SizeItUpView/>;
+                return <SizeItUpView />;
             } else {
-                return <EditorView/>;
+                return <EditorView />;
             }
         }
     };
     const isAILoaded = isObjectDetectorLoaded
         || isPoseDetectionLoaded
         || isYOLOV5ObjectDetectorLoaded
-        || (roboflowAPIDetails.model !== '' && roboflowAPIDetails.key !== '' && roboflowAPIDetails.status)
+        || (roboflowAPIDetails.model !== '' && roboflowAPIDetails.key !== '' && roboflowAPIDetails.status);
 
     return (
-        <div className={classNames('App', {'AI': isAILoaded})} draggable={false}
-        >
-            {selectRoute()}
-            <PopupView/>
-            <NotificationsView/>
-        </div>
+
+        <ThemeProvider theme={darkTheme}>
+            <div className={classNames('App', { 'AI': isAILoaded })} draggable={false}
+            >
+                {selectRoute()}
+                <PopupView />
+                <NotificationsView />
+            </div>
+        </ThemeProvider>
     );
 };
 

src/logic/__tests__/helpers/CSSHelper.test.ts

@@ -0,0 +1,7 @@
+import { CSSHelper } from "../../helpers/CSSHelper";
+
+describe('test make_sense', function () {
+    it('test CSSHelper.getLeadingColor', function () {
+        expect(CSSHelper.getLeadingColor()).toBe('#009efd');
+    });
+});

src/logic/imageRepository/ImageRepository.ts

@@ -5,17 +5,36 @@ export type ImageMap = { [s: string]: HTMLImageElement; };
 export class ImageRepository {
     private static repository: ImageMap = {};
 
+    // Store image and metadata
     public static storeImage(id: string, image: HTMLImageElement) {
         ImageRepository.repository[id] = image;
     }
 
-    public static storeImages(ids: string[], images: HTMLImageElement[]) {
-        zip(ids, images).forEach((pair: [string, HTMLImageElement]) => {
-            ImageRepository.storeImage(...pair);
-        })
+    // Remove image and metadata
+    public static removeImage(id: string): void {
+        if (id in ImageRepository.repository) {
+            delete ImageRepository.repository[id];
+        }
+    }
+
+    // Get image by ID
+    public static getById(id: string): HTMLImageElement | null {
+        if (id in ImageRepository.repository) {
+            return ImageRepository.repository[id];
+        } 
+        return null;
     }
 
-    public static getById(uuid: string): HTMLImageElement {
-        return ImageRepository.repository[uuid];
+    // Batch operation: remove images
+    public static removeImages(ids: string[]): void {
+        ids.forEach(id => ImageRepository.removeImage(id));
+    }
+
+    // Batch operation: store images
+    public static storeImages(ids: string[], images: HTMLImageElement[]) {
+        zip(ids, images).forEach((item) => {
+            const pair = item as [string, HTMLImageElement];
+            ImageRepository.storeImage(...pair);
+        });
     }
 }

src/utils/ImageDataUtil.ts

@@ -1,5 +1,5 @@
 import {ImageData} from '../store/labels/types';
-import { v4 as uuidv4 } from 'uuid';
+import {v4 as uuidv4} from 'uuid';
 import {FileUtil} from './FileUtil';
 import {ImageRepository} from '../logic/imageRepository/ImageRepository';
 
@@ -18,7 +18,7 @@ export class ImageDataUtil {
             isVisitedBySSDObjectDetector: false,
             isVisitedByPoseDetector: false,
             isVisitedByRoboflowAPI: false
-        }
+        };
     }
 
     public static cleanAnnotations(item: ImageData): ImageData {
@@ -29,23 +29,23 @@ export class ImageDataUtil {
             labelLines: [],
             labelPolygons: [],
             labelNameIds: []
-        }
+        };
     }
 
     public static arrange(items: ImageData[], idArrangement: string[]): ImageData[] {
         return items.sort((a: ImageData, b: ImageData) => {
-            return idArrangement.indexOf(a.id) - idArrangement.indexOf(b.id)
-        })
+            return idArrangement.indexOf(a.id) - idArrangement.indexOf(b.id);
+        });
     }
 
     public static loadMissingImages(images: ImageData[]): Promise<void> {
         return new Promise((resolve, reject) => {
             const missingImages = images.filter((i: ImageData) => !i.loadStatus);
             const missingImagesFiles = missingImages.map((i: ImageData) => i.fileData);
             FileUtil.loadImages(missingImagesFiles)
-                .then((htmlImageElements:HTMLImageElement[]) => {
+                .then((htmlImageElements: HTMLImageElement[]) => {
                     ImageRepository.storeImages(missingImages.map((i: ImageData) => i.id), htmlImageElements);
-                    resolve()
+                    resolve();
                 })
                 .catch((error: Error) => reject(error));
         });

src/views/EditorView/SideNavigationBar/ImagePreview/ImagePreview.scss

@@ -67,4 +67,16 @@
       transform: translate(2px, -2px);
     }
   }
+}
+
+.DeleteButton {
+  position: absolute;
+  z-index: 1000;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  stroke: #fff;
+
 }