@nyris/nyris-webapp 0.3.4 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "homepage": "./",
   "dependencies": {
     "@babel/runtime": "^7.17.2",
@@ -8,8 +8,8 @@
     "@material-ui/data-grid": "^4.0.0-alpha.37",
     "@material-ui/icons": "^4.4.1",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@nyris/nyris-api": "^0.3.4",
-    "@nyris/nyris-react-components": "^0.3.4",
+    "@nyris/nyris-api": "^0.3.5",
+    "@nyris/nyris-react-components": "^0.3.5",
     "@reduxjs/toolkit": "^1.6.1",
     "@types/blueimp-load-image": "^2.23.4",
     "@types/classnames": "^2.2.9",

package/src/App.tsx

@@ -6,10 +6,9 @@ import "index.css";
 import { useAppSelector } from "Store/Store";
 import LandingPageApp from "modules/LandingPage/index";
 import AppNewVersion from "modules/LandingPage/indexNewVersion";
-import {AppState} from "./types";
 
 function App(): JSX.Element {
-  const { settings } = useAppSelector<AppState>((state: any) => state);
+  const { settings } = useAppSelector((state) => state);
   const { themePage } = settings;
   let SelectedApp = themePage.searchSuite?.active ? AppNewVersion : LandingPageApp;
 

package/src/Store/Search.ts

@@ -2,37 +2,6 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { CanvasWithId } from "types";
 import { Code, RectCoords, Region } from "@nyris/nyris-api";
 
-export type ImageSourceType =
-  | { url: string }
-  | { file: File }
-  | { image: HTMLCanvasElement };
-
-export type SearchAction =
-  | { type: "FEEDBACK_SUBMIT_POSITIVE" }
-  | { type: "FEEDBACK_SUBMIT_NEGATIVE" }
-  | { type: "IMAGE_LOADED"; image: CanvasWithId }
-  | { type: "REGION_REQUEST_START"; image: HTMLCanvasElement }
-  | { type: "REGION_REQUEST_SUCCEED"; regions: Region[] }
-  | { type: "REGION_REQUEST_FAIL"; reason: string; exception: any }
-  | {
-      type: "SEARCH_REQUEST_START";
-      image: HTMLCanvasElement;
-      normalizedRect?: RectCoords;
-    }
-  | { type: "SEARCH_REQUEST_START"; file: File }
-  | {
-      type: "SEARCH_REQUEST_SUCCEED";
-      results: any[];
-      requestId: string;
-      duration: number;
-      categoryPredictions: CategoryPrediction[];
-      codes: Code[];
-    }
-  | { type: "SEARCH_REQUEST_FAIL"; reason: string; exception?: any }
-  | { type: "REGION_CHANGED"; normalizedRect: RectCoords }
-  | ({ type: "LOAD_IMAGE" } & ImageSourceType)
-  | { type: "LOAD_FILE"; file: File }
-  | { type: "CAD_LOADED"; file: File };
 
 interface CategoryPrediction {
   name: string;
@@ -45,12 +14,11 @@ export interface SearchState {
   requestId?: string;
   sessionId?: string;
   regions: Region[];
-  selectedRegion: RectCoords;
+  selectedRegion?: RectCoords;
   fetchingRegions: boolean;
   fetchingResults: boolean;
   filterOptions: string[];
   requestImage?: CanvasWithId;
-  requestCadFile?: File;
   categoryPredictions: CategoryPrediction[];
   codes: Code[];
   errorMessage: string;
@@ -65,7 +33,7 @@ export interface SearchState {
 const initialState: SearchState = {
   results: [],
   regions: [],
-  selectedRegion: { x1: 0.1, x2: 0.9, y1: 0.1, y2: 0.9 },
+  selectedRegion: undefined,
   requestImage: undefined,
   fetchingResults: false,
   fetchingRegions: false,
@@ -88,39 +56,43 @@ const initialState: SearchState = {
       setSearchResults: (state, data) => {
       const { payload } = data;
       const {
-        requestImage,
         results,
         requestId,
         categoryPredictions,
         codes,
         duration,
-        regions,
-        selectedRegion,
         filters,
       } = payload;
       return {
         ...state,
         filters,
-        requestImage,
         results,
         requestId,
         categoryPredictions,
         codes,
         duration,
         sessionId: state.sessionId || requestId,
-        regions,
-        selectedRegion,
         fetchingResults: false,
       };
     },
 
-    loadCadFileLoad: (state, data: PayloadAction<any>) => {
-      const { payload } = data;
-      return {
+    setRegions: (state, data: PayloadAction<Region[]>) => ({
+      ...state,
+      regions: data.payload
+    }),
+
+    setSelectedRegion: (state, data: PayloadAction<RectCoords|undefined>) => ({
+      ...state,
+      selectedRegion: data.payload
+    }),
+
+    setRequestImage: (state, data: PayloadAction<HTMLCanvasElement>) => ({
         ...state,
-        requestCadFile: payload,
-      };
-    },
+        requestImage: {
+          canvas: data.payload,
+          id: Math.random().toString()
+        }
+    }),
 
     selectionChanged: (state, data: PayloadAction<RectCoords>) => {
       const { payload } = data;
@@ -145,12 +117,6 @@ const initialState: SearchState = {
         fetchingRegions: false,
       };
     },
-    submitPositiveFeedback: () => {
-      return;
-    },
-    submitNegativeFeedback: () => {
-      return;
-    },
     loadingActionResults: (state) => {
       return {
         ...state,
@@ -171,7 +137,6 @@ const initialState: SearchState = {
         duration,
         categoryPredictions,
         codes,
-        requestImage,
       } = payload;
       return {
         ...state,
@@ -180,32 +145,31 @@ const initialState: SearchState = {
         duration,
         categoryPredictions,
         codes,
-        requestImage,
         fetchingResults: false,
       };
     },
-    changeValueTextSearch: (state: any, data: PayloadAction<any>) => {
+    changeValueTextSearch: (state, data: PayloadAction<any>) => {
       const { payload } = data;
       return {
         ...state,
         valueTextSearch: payload,
       };
     },
-    resultSearchText: (state: any, data: PayloadAction<any>) => {
+    resultSearchText: (state, data: PayloadAction<any>) => {
       const { payload } = data;
       return {
         ...state,
         resultSearchText: payload,
       };
     },
-    updateResults: (state: any, data: PayloadAction<any>) => {
+    updateResults: (state, data: PayloadAction<any>) => {
       const { payload } = data;
       return {
         ...state,
         results: payload,
       };
     },
-    reset: (state: any, data: PayloadAction<any>) => {
+    reset: (state, data: PayloadAction<any>) => {
       return {
         results: [],
         regions: [],
@@ -223,22 +187,21 @@ const initialState: SearchState = {
         loadingSearchAlgolia: false,
       };
     },
-    configureFilter: (state: any, data: PayloadAction<any>) => {
+    configureFilter: (state, data: PayloadAction<any>) => {
       const { payload } = data;
       return {
         ...state,
         configureFilter: payload,
       };
     },
-    setUpdateSession: (state: any, data: PayloadAction<any>) => {
+    setUpdateSession: (state, data: PayloadAction<string>) => {
       const { payload } = data;
       return {
         ...state,
-        requestId: payload.requestId,
-        sessionId: payload.sessionId,
+        sessionId: payload,
       };
     },
-    updateResultChangePosition: (state: any, data: PayloadAction<any>) => {
+    updateResultChangePosition: (state, data: PayloadAction<any>) => {
       const { payload } = data;
       const { results } = payload;
       return {
@@ -246,16 +209,25 @@ const initialState: SearchState = {
         results,
       };
     },
+
+    setError: (state, data: PayloadAction<string>) => {
+        return {
+          ...state,
+          fetchingRegions: false,
+          fetchingResults: false,
+          errorMessage: data.payload
+        }
+    }
   },
 });
 
 export const {
   setSearchResults,
   selectionChanged,
-  submitPositiveFeedback,
-  submitNegativeFeedback,
-  loadCadFileLoad,
+  setRequestImage,
   loadFileSelectRegion,
+  setRegions,
+  setSelectedRegion,
   loadingActionResults,
   loadingActionRegions,
   searchFileImageNonRegion,
@@ -266,5 +238,6 @@ export const {
   configureFilter,
   setUpdateSession,
   updateResultChangePosition,
+  setError,
 } = searchSlice.actions;
 export default searchSlice.reducer;

package/src/components/DragDropFile.tsx

@@ -4,17 +4,18 @@ import { useDropzone } from "react-dropzone";
 import IconSearch from "common/assets/icons/icon_search_image.svg";
 import { makeFileHandler } from "@nyris/nyris-react-components";
 import { useAppDispatch, useAppSelector } from "Store/Store";
-import { serviceImage, serviceImageNonRegion } from "services/image";
+import {createImage, findByImage, findRegions} from "services/image";
 import {
   setSearchResults,
   loadingActionResults,
-  searchFileImageNonRegion,
+  setRequestImage, setRegions, setSelectedRegion,
 } from "Store/Search";
 import { showFeedback, showResults } from "Store/Nyris";
 import { useHistory } from "react-router-dom";
 import ExampleImages from "./ExampleImages";
 import { feedbackClickEpic } from "services/Feedback";
 import { useState } from "react";
+import {RectCoords} from "@nyris/nyris-api";
 
 interface Props {
   acceptTypes: any;
@@ -28,11 +29,10 @@ function DragDropFile(props: Props) {
   const { acceptTypes, onChangeLoading, isLoading } = props;
   const searchState = useAppSelector((state) => state);
   const { settings } = searchState;
-  const [rectCoords] = useState<any>(undefined);
   const [isLoadingLoadFile, setLoadingLoadFile] = useState<any>(false);
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop: (fs: File[]) => {
+    onDrop: async (fs: File[]) => {
       onChangeLoading(true);
       console.log("321");
       let payload: any;
@@ -40,7 +40,10 @@ function DragDropFile(props: Props) {
       setLoadingLoadFile(true);
       console.log("fs", fs);
 
-      return serviceImage(fs[0], searchState.settings).then((res: any) => {
+      let image = await createImage(fs[0]);
+      dispatch(setRequestImage(image));
+      // TODO support regions
+      return findByImage(image, searchState.settings).then((res: any) => {
         console.log("res?.results", res);
 
         res?.results.map((item: any) => {
@@ -65,7 +68,7 @@ function DragDropFile(props: Props) {
     },
   });
 
-  const getUrlToCanvasFile = (url: string, position?: number) => {
+  const getUrlToCanvasFile = async (url: string, position?: number) => {
     onChangeLoading(true);
     dispatch(showResults());
     dispatch(loadingActionResults());
@@ -73,20 +76,21 @@ function DragDropFile(props: Props) {
       feedbackClickEpic(searchState, position);
     }
 
+    let image = await createImage(url);
+    dispatch(setRequestImage(image));
+    let searchRegion: RectCoords| undefined = undefined;
     if (settings.regions) {
-      serviceImage(url, searchState.settings).then((res) => {
-        dispatch(setSearchResults(res));
-        onChangeLoading(false);
-        history.push("/result");
-        return dispatch(showFeedback());
-      });
-    } else {
-      serviceImageNonRegion(url, searchState, rectCoords).then((res) => {
-        onChangeLoading(false);
-        history.push("/result");
-        dispatch(searchFileImageNonRegion(res));
-      });
+      let res = await findRegions(image, settings);
+      dispatch(setRegions(res.regions));
+      searchRegion = res.selectedRegion;
+      dispatch(setSelectedRegion(searchRegion));
     }
+    return findByImage(image, searchState.settings, searchRegion).then((res) => {
+      dispatch(setSearchResults(res));
+      onChangeLoading(false);
+      history.push("/result");
+      return dispatch(showFeedback());
+    });
   };
 
   return (

package/src/modules/LandingPage/index.tsx

@@ -3,42 +3,35 @@ import {
     RectCoords,
     cadExtensions,
     isCadFile,
-    isImageFile,
-    ImageSearchOptions,
 } from "@nyris/nyris-api";
 
 import { useAppDispatch, useAppSelector } from "Store/Store";
 import {
-    loadCadFileLoad,
     setSearchResults,
-    loadFileSelectRegion,
-    loadingActionRegions,
     loadingActionResults,
-    searchFileImageNonRegion,
+    searchFileImageNonRegion, selectionChanged, setRequestImage, setRegions, setSelectedRegion, setError,
 } from "Store/Search";
 import {
     feedbackNegative,
     feedbackSubmitPositive,
     hideFeedback,
     showCamera,
-    showFeedback,
-    showResults,
+    showFeedback, showResults,
     showStart,
 } from "Store/Nyris";
-import { serviceImage, serviceImageNonRegion } from "services/image";
-import { findByImage } from "services/findByImage";
-import { debounce, isEmpty } from "lodash";
-import { feedbackClickEpic } from "services/Feedback";
+import {createImage, findByCadFile, findByImage, findRegions} from "services/image";
+import { debounce } from "lodash";
+import {feedbackClickEpic, feedbackRegionEpic, feedbackSuccessEpic} from "services/Feedback";
 import AppMD from "./AppMD";
 import App from "./App";
 import {AppHandlers, AppProps} from "./propsType";
 import {defaultMdSettings} from "../../defaults";
 
+const defaultSelection = {x1: 0.1, x2: 0.9, y1: 0.1, y2: 0.9};
+
 const LandingPageApp = () => {
     const dispatch = useAppDispatch();
     const searchState = useAppSelector((state) => state);
-    const [rectCoords, setRectCoords] = useState<any>();
-    const defaultSelection = {x1: 0.1, x2: 0.9, y1: 0.1, y2: 0.9};
     const [selection, setSelection] = useState<RectCoords>(defaultSelection);
 
     const { settings, search, nyris } = searchState;
@@ -50,24 +43,15 @@ const LandingPageApp = () => {
     } = search;
     const { showPart } = nyris;
 
-    const isDefaultRect = (r: RectCoords) => r.x1 === 0 && r.x2 === 1 && r.y1 === 0 && r.y2 === 1;
-
     // update selection, if it is not the default one
     useEffect(() => {
-        if (!isDefaultRect(selectedRegion)) {
+        if (selectedRegion) {
             setSelection(selectedRegion);
+        } else {
+            setSelection(defaultSelection);
         }
     }, [selectedRegion]);
 
-
-    useEffect(() => {
-        if (isEmpty(rectCoords)) {
-            return;
-        }
-        onSearchOffersForImage(rectCoords);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [rectCoords]);
-
     const acceptTypes = ["image/*"]
         .concat(settings.cadSearch ? cadExtensions : [])
         .join(",");
@@ -84,82 +68,74 @@ const LandingPageApp = () => {
             window.open(url);
         }
     };
-    // TODO: search image file home page
-    const isCheckImageFile = (file: any) => {
-        dispatch(loadingActionResults());
-        dispatch(showResults());
-        dispatch(showFeedback());
-        if (isImageFile(file) || typeof file === "string") {
-            return serviceImage(file, searchState.settings).then((res) => {
-                dispatch(setSearchResults(res));
-            });
-        }
-        if (isCadFile(file)) {
-            return dispatch(loadCadFileLoad(file));
-        }
-    };
-    //
-
-    const searchByUrl = (url: string, position?: number) => {
-        dispatch(loadingActionResults());
-        dispatch(showResults());
-        if (position) {
-            feedbackClickEpic(searchState, position);
-        }
 
-        if (settings.regions) {
-            serviceImage(url, searchState.settings).then((res) => {
+    const startSearch = async (file: File | HTMLCanvasElement | string) => {
+        try {
+            dispatch(loadingActionResults());
+            dispatch(showResults());
+            if (file instanceof File && isCadFile(file)) {
+                let res = await findByCadFile(file, settings);
                 dispatch(setSearchResults(res));
-                dispatch(showFeedback());
-            });
-        } else {
-            serviceImageNonRegion(url, searchState, rectCoords).then((res) => {
-                dispatch(searchFileImageNonRegion(res));
-                dispatch(showFeedback());
-            });
+            } else {
+                let image = await createImage(file);
+                dispatch(setRequestImage(image));
+                let searchRegion : RectCoords | undefined;
+                if (settings.regions) {
+                    let {
+                        regions: foundRegions,
+                        selectedRegion: suggestedRegion
+                    } = await findRegions(image, settings);
+                    searchRegion = suggestedRegion;
+                    dispatch(setRegions(foundRegions));
+                    dispatch(setSelectedRegion(searchRegion))
+                }
+                return findByImage(image, searchState.settings, searchRegion).then((res) => {
+                    dispatch(setSearchResults(res));
+                    dispatch(showFeedback());
+                });
+            }
+        } catch (e) {
+            // TODO show error messages
+            dispatch(setError("There was an error while performing the request. Please try again later."));
         }
-    };
 
-    const handlerRectCoords = debounce((value) => {
-        return setRectCoords(value);
-    }, 1200);
+    };
 
     const debouncedSetRectCoords = useCallback(
-        (value) => handlerRectCoords(value),
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        []
+        debounce(value => {
+            dispatch(selectionChanged(value));
+            feedbackRegionEpic(searchState, value);
+            findByImage(requestImage!!.canvas, settings, value).then((res) => {
+                dispatch(searchFileImageNonRegion(res));
+                dispatch(showFeedback());
+            }).catch(e => console.warn('catch', e));
+        }, 1200),
+        [requestImage, searchState]
     );
 
-    const onSearchOffersForImage = (r: RectCoords) => {
-        const { canvas }: any = requestImage;
-        let options: ImageSearchOptions = {
-            cropRect: r,
-        };
-        dispatch(loadingActionRegions());
-        return findByImage(canvas, options, settings).then((res) => {
-            dispatch(loadFileSelectRegion(res));
-            return dispatch(showFeedback());
-        });
-    };
-
     const handlers : AppHandlers = {
-        onExampleImageClick: url => searchByUrl(url),
+        onExampleImageClick: url => {
+            startSearch(url);
+        },
         onCameraClick: () => dispatch(showCamera),
         onCaptureCanceled: () => dispatch(showStart),
-        onCaptureComplete: (i) => isCheckImageFile(i),
+        onCaptureComplete: (i) => startSearch(i),
         onCloseFeedback: () => dispatch(hideFeedback),
-        onFileDropped: (f) => isCheckImageFile(f),
-        onImageClick: (position, url) => searchByUrl(url, position),
+        onFileDropped: (f) => startSearch(f),
+        onImageClick: (position, url) => {
+            startSearch(url);
+            feedbackClickEpic(searchState, position);
+        },
         onLinkClick: onLinkClick,
         onPositiveFeedback: () => {
             dispatch(feedbackSubmitPositive());
-            // TODO submit positive feedback to the api
+            feedbackSuccessEpic(searchState, true);
         },
         onNegativeFeedback: () => {
             dispatch(feedbackNegative());
-            // TODO submit negative feedback to the api
+            feedbackSuccessEpic(searchState, false);
         },
-        onSelectFile: (f) => isCheckImageFile(f),
+        onSelectFile: (f) => startSearch(f),
         onSelectionChange: r => {
             setSelection(r);
             debouncedSetRectCoords(r);

package/src/modules/LandingPage/indexNewVersion.tsx

@@ -15,23 +15,23 @@ import {
 import algoliasearch from "algoliasearch/lite";
 import CustomSearchBox from "components/input/inputSearch";
 import {createSessionByApi} from "../../services/session";
+import {AlgoliaSettings} from "../../types";
 
 interface Props {}
 
 function AppNewVersion(props: Props) {
   const dispatch = useAppDispatch();
   const history = useHistory();
-  const searchState = useAppSelector((state) => state);
-  const { settings, search }: any = searchState;
+  const { settings, search } = useAppSelector((state) => state);
   const [searchStateInput, setSearchStateInput] = useState<any>({});
   const [isLoading, setLoading] = useState<boolean>(false);
-  const { apiKeyAlgolia, appIdAlgolia, indexNameAlgolia } = settings;
-  const searchClient = algoliasearch(appIdAlgolia, apiKeyAlgolia);
-  searchClient.initIndex(indexNameAlgolia);
+  const { apiKey, appId, indexName } = settings.algolia as AlgoliaSettings;
+  const searchClient = algoliasearch(appId, apiKey);
+  searchClient.initIndex(indexName);
 
   useEffect(() => {
     const createSession = async () => {
-      let payload = await createSessionByApi(searchState.settings);
+      let payload = await createSessionByApi(settings);
       dispatch(setUpdateSession(payload));
     };
 
@@ -67,10 +67,10 @@ function AppNewVersion(props: Props) {
   return (
     <Box className={`box-content-main ${isLoading ? "loading" : ""}`}>
       <InstantSearch
-        indexName={indexNameAlgolia}
+        indexName={indexName}
         searchClient={searchClient}
         searchState={searchStateInput}
-        onSearchStateChange={(state: any) => {
+        onSearchStateChange={(state) => {
           setSearchStateInput(state);
           dispatch(changeValueTextSearch(state));
           history.push("/result");