@nyris/nyris-webapp 0.3.4 → 0.3.9

package/src/epics/feedback.ts

@@ -0,0 +1,59 @@
+import {combineEpics, ofType} from "redux-observable";
+import {debounceTime, ignoreElements, tap, withLatestFrom} from "rxjs/operators";
+import {EpicConf} from "./types";
+
+const feedbackSuccessEpic: EpicConf = (action$, state$, {api}) => action$.pipe(
+    ofType('FEEDBACK_SUBMIT_POSITIVE', "FEEDBACK_SUBMIT_NEGATIVE"),
+    withLatestFrom(state$),
+    tap(async ([{type}, state]) => {
+        const success = type === 'FEEDBACK_SUBMIT_POSITIVE';
+        const sessionId = state.search.sessionId || state.search.requestId;
+        if (sessionId && state.search.requestId) {
+            await api.sendFeedback(sessionId, state.search.requestId, {
+                event: 'feedback', data: {success}
+            });
+        }
+    }),
+    ignoreElements()
+);
+
+const feedbackRegionEpic: EpicConf = (action$, state$, {api}) => action$.pipe(
+    ofType('REGION_CHANGED'),
+    debounceTime(1200),
+    withLatestFrom(state$),
+    tap(async ([action, state]) => {
+        if (action.type === 'REGION_CHANGED') {
+            let {normalizedRect: {x1, x2, y1, y2}} = action;
+            const sessionId = state.search.sessionId || state.search.requestId;
+            if (sessionId && state.search.requestId) {
+                await api.sendFeedback(sessionId, state.search.requestId, {
+                    event: 'region', data: {rect: {x: x1, y: y1, w: x2 - x1, h: y2 - y1}}
+                });
+            }
+        }
+    }),
+    ignoreElements()
+);
+
+const feedbackClickEpic: EpicConf = (action$, state$, {api}) => action$.pipe(
+    ofType('RESULT_LINK_CLICKED', 'RESULT_IMAGE_CLICKED'),
+    withLatestFrom(state$),
+    tap(async ([action, state]) => {
+        if (action.type === 'RESULT_LINK_CLICKED' || action.type === 'RESULT_IMAGE_CLICKED') {
+            let {position} = action;
+            const sessionId = state.search.sessionId || state.search.requestId;
+            if (sessionId && state.search.requestId) {
+                await api.sendFeedback(sessionId, state.search.requestId, {
+                    event: 'click', data: {positions: [position]}
+                });
+            }
+        }
+    }),
+    ignoreElements()
+);
+
+export default combineEpics(
+    feedbackSuccessEpic,
+    feedbackRegionEpic,
+    feedbackClickEpic
+);

package/src/epics/index.ts

@@ -0,0 +1,154 @@
+import {combineEpics, ofType} from "redux-observable";
+import {debounceTime, delay, ignoreElements, map, switchMap, tap, withLatestFrom} from "rxjs/operators";
+import {showFeedback, showResults} from "../actions/nyrisAppActions";
+import {EpicConf} from "./types";
+import feedbackEpics from "./feedback";
+import searchEpics from "./search";
+import {searchOffersForImage, searchOffersForCad, searchRegions} from "../actions/searchActions";
+import {AppAction} from "../types";
+import {selectFirstCenteredRegion} from "@nyris/nyris-api";
+
+
+
+const historyEpic: EpicConf = (action$, state$, {history}) => action$.pipe(
+    ofType('SHOW_RESULTS', 'SHOW_START'),
+    withLatestFrom(state$),
+    tap(([action, state]) => {
+        let { type } = action;
+        console.log("action");
+        console.log(state.search.selectedFilters);
+        // action to clear all filters
+        if (type === 'SHOW_RESULTS' && history.location.pathname !== '/results') {
+            history.push('/results');
+        }
+        if (type === 'SHOW_START' && history.location.pathname !== '/') {
+            
+            history.goBack();
+        }
+    }),
+    ignoreElements()
+);
+
+const onSearchSuccessShowResults: EpicConf = (action$) => action$.pipe(
+    ofType('SEARCH_REQUEST_SUCCEED'),
+    map(showResults)
+);
+
+const onSearchSuccessRedirectToSite: EpicConf = (action$, state$) => action$.pipe(
+    ofType('SEARCH_REQUEST_SUCCEED'),
+    withLatestFrom(state$),
+    tap(([action, {settings}]) => {
+        if (action.type !== 'SEARCH_REQUEST_SUCCEED' || !action.results || action.results.length !== 1) {
+            return;
+        }
+
+        const firstLink = action.results[0].l;
+        const instantRedirectPatterns = settings.instantRedirectPatterns;
+        if (!instantRedirectPatterns.find(r => new RegExp(r).test(firstLink))) {
+            return;
+        }
+        window.location.href = firstLink;
+    }),
+    ignoreElements()
+);
+
+const onSearchSuccessShowFeedbackDelayed: EpicConf = (action$) => action$.pipe(
+    ofType('SEARCH_REQUEST_SUCCEED'),
+    delay(3000),
+    map(showFeedback)
+);
+
+
+const startSearchOnImageLoaded: EpicConf = (action$, state$) => action$.pipe(
+    ofType('IMAGE_LOADED'),
+    withLatestFrom(state$),
+    switchMap(async ([action, {settings}]) : Promise<AppAction> => {
+        if (action.type !== 'IMAGE_LOADED') {
+            throw new Error(`Wrong action type ${action.type}`);
+        }
+
+        let { image } = action;
+         
+        if (settings.regions) {
+            return searchRegions(image.canvas);
+        }
+        return searchOffersForImage(image.canvas);
+    })
+);
+
+const startSearchOnCadLoaded: EpicConf = (action$, state$) => action$.pipe(
+    ofType('CAD_LOADED'),
+    withLatestFrom(state$),
+    switchMap(async ([action, {settings}]) : Promise<AppAction> => {
+        if (action.type !== 'CAD_LOADED') {
+            throw new Error(`Wrong action type ${action.type}`);
+        }
+        let { file } = action;
+        return searchOffersForCad(file);
+    })
+);
+
+const startSearchOnRegionsSuccessful: EpicConf = (action$, state$) => action$.pipe(
+    ofType('REGION_REQUEST_SUCCEED'),
+    withLatestFrom(state$),
+    switchMap(async ([action, { search: { requestImage}}]) : Promise<AppAction> => {
+        if (action.type !== 'REGION_REQUEST_SUCCEED') {
+            throw new Error(`Wrong action type ${action.type}`);
+        }
+        if (!requestImage) {
+            throw new Error(`No requestImage`);
+        }
+        let { regions } = action;
+
+        let selection = selectFirstCenteredRegion(regions, 0.3, {x1: 0, x2: 1, y1: 0, y2: 1});
+        return searchOffersForImage(requestImage.canvas, selection);
+    })
+);
+
+const startSearchOnRegionsFailed: EpicConf = (action$, state$) => action$.pipe(
+    ofType('REGION_REQUEST_FAIL'),
+    withLatestFrom(state$),
+    switchMap(async ([action, { search: { requestImage}}]) : Promise<AppAction> => {
+        if (action.type !== 'REGION_REQUEST_FAIL') {
+            throw new Error(`Wrong action type ${action.type}`);
+        }
+        if (!requestImage) {
+            throw new Error(`No requestImage`);
+        }
+
+        return searchOffersForImage(requestImage.canvas);
+    })
+);
+
+const startSearchOnRegionChange: EpicConf = (action$, state$) => action$.pipe(
+    ofType('REGION_CHANGED'),
+    debounceTime(1200),
+    withLatestFrom(state$),
+    switchMap(async ([action, { search: { requestImage}}]) : Promise<AppAction> => {
+        if (action.type !== 'REGION_CHANGED') {
+            throw new Error(`Wrong action type ${action.type}`);
+        }
+        if (!requestImage) {
+            throw new Error(`No requestImage`);
+        }
+        let { normalizedRect } = action;
+        return searchOffersForImage(requestImage.canvas, normalizedRect);
+    })
+);
+
+
+const rootEpic = combineEpics(
+    searchEpics,
+    feedbackEpics,
+    historyEpic,
+    startSearchOnImageLoaded,
+    startSearchOnCadLoaded,
+    startSearchOnRegionsSuccessful,
+    startSearchOnRegionsFailed,
+    startSearchOnRegionChange,
+    onSearchSuccessShowResults,
+    onSearchSuccessShowFeedbackDelayed,
+    onSearchSuccessRedirectToSite
+);
+
+export default rootEpic;

package/src/epics/search.ts

@@ -0,0 +1,164 @@
+import {EpicConf} from "./types";
+import {combineEpics, ofType} from "redux-observable";
+import {switchMap, withLatestFrom} from "rxjs/operators";
+import {AppAction} from "../types";
+import {ImageSearchOptions, urlOrBlobToCanvas, isCadFile, isImageFile, Filter } from "@nyris/nyris-api";
+import {imageLoaded, cadFileLoaded} from "../actions/searchActions";
+
+const imageSearch: EpicConf = (action$, state$, {api}) => action$.pipe(
+    ofType('SEARCH_REQUEST_START'),
+    withLatestFrom(state$),
+    switchMap(async ([action, state]) : Promise<AppAction> => {
+        if (action.type !== 'SEARCH_REQUEST_START') {
+            throw new Error(`Wrong action type ${action.type}`);
+        }
+        console.log("state search ");
+        console.log(state.search.selectedFilters);
+        
+        if ('image' in action) {
+            let { image, normalizedRect} = action;
+            console.log("Selected Filters");
+            let selectedFilters = new Array<Filter>();
+             if(state.search.selectedFilters.size > 0 ){          
+                state.search.selectedFilters.forEach((values, key) => {
+                    let filterObj: Filter ={
+                        key : key,
+                        values : values
+                    }
+                  selectedFilters.push(filterObj);
+                });
+             }
+           
+            let options : ImageSearchOptions = {
+                cropRect: normalizedRect
+            };
+
+            try {
+                if(selectedFilters && selectedFilters.length> 0)
+                {
+                    console.log("With Filters");
+                    const {results, duration, requestId, categoryPredictions, codes} = await api.findByImageWithFilters(image, options, selectedFilters);
+                    return ({ type: 'SEARCH_REQUEST_SUCCEED', results, requestId, duration, categoryPredictions, codes });
+               
+                }
+                else{
+                    console.log("Without Filters");
+                    const {results, duration, requestId, categoryPredictions, codes} = await api.findByImage(image, options);
+                    return ({ type: 'SEARCH_REQUEST_SUCCEED', results, requestId, duration, categoryPredictions, codes });            
+                }
+            } catch (e) {
+                console.warn('search failed', e);
+                return ({ type: 'SEARCH_REQUEST_FAIL', reason: e.message, exception: e });
+            }
+        }
+
+        if ('file' in action) {
+            console.log('file');
+            let { file } = action;
+
+            let options : ImageSearchOptions = { };
+
+            try {
+                const {results, duration, requestId, categoryPredictions, codes} = await api.findByCad(file, options);
+                return ({ type: 'SEARCH_REQUEST_SUCCEED', results, requestId, duration, categoryPredictions, codes });
+            } catch (e) {
+                console.warn('search failed', e);
+                return ({ type: 'SEARCH_REQUEST_FAIL', reason: e.message, exception: e });
+            }
+        }
+        throw new Error(`Wrong action content ${action}`);
+    })
+);
+
+const regionSearch: EpicConf = (action$, state$, {api}) => action$.pipe(
+    ofType('REGION_REQUEST_START'),
+    withLatestFrom(state$),
+    switchMap(async ([action, {settings}]) : Promise<AppAction> => {
+        if (action.type !== 'REGION_REQUEST_START') {
+            throw new Error(`Wrong action type ${action.type}`);
+        }
+
+        let { image } = action;
+
+        try {
+            let regions = await api.findRegions(image);
+            return {type: 'REGION_REQUEST_SUCCEED', regions };
+
+        } catch (e) {
+            console.error(e);
+            return {type: 'REGION_REQUEST_FAIL', reason: e.message, exception: e};
+        }
+    })
+);
+
+const loadFile: EpicConf = (action$) => action$.pipe(
+    ofType('LOAD_FILE'),
+    switchMap(async (action) : Promise<AppAction> => {
+        if (action.type !== 'LOAD_FILE') {
+            throw new Error(`Wrong action type ${action.type}`);
+        }
+        const randomId = Math.random().toString();
+        if ('file' in action) {
+            const file = action.file;
+            if (isImageFile(file)) {
+                return imageLoaded(await urlOrBlobToCanvas(file), randomId);
+            }
+            if (isCadFile(file)) {
+                return cadFileLoaded(file, randomId);
+            }
+        }
+        throw new Error(`LOAD_FILE action wrong properties ${Object.keys(action).join(',')}`);
+    })
+);
+
+const loadImage: EpicConf = (action$) => action$.pipe(
+    ofType('LOAD_IMAGE'),
+    switchMap(async (action) : Promise<AppAction> => {
+        if (action.type !== 'LOAD_IMAGE') {
+            throw new Error(`Wrong action type ${action.type}`);
+        }
+        const randomId = Math.random().toString();
+        if ('url' in action) {
+            return imageLoaded(await urlOrBlobToCanvas(action.url), randomId);
+        }
+        if ('file' in action) {
+            return imageLoaded(await urlOrBlobToCanvas(action.file), randomId);
+        }
+        if ('image' in action) {
+            return imageLoaded(action.image, randomId);
+        }
+        throw new Error(`LOAD_IMAGE action wrong properties ${Object.keys(action).join(',')}`);
+    })
+);
+
+
+const loadFilters: EpicConf = (action$, state$, {api}) => action$.pipe(
+    ofType('LOAD_FILTERS'),
+    withLatestFrom(state$),
+    switchMap(async ([action, state]) : Promise<AppAction> => {
+        if(action.type !== 'LOAD_FILTERS'){
+            throw new Error(`Wrong action type ${action.type}`);
+        }
+        try {
+            // use find filters
+
+            let filters = await api.getFilters();
+    
+            filters= filters.slice(0, 3);
+            console.log(filters);                                 
+            return {type: 'LOAD_FILTERS_SUCCESS', filters };
+
+        } catch (e) {
+            console.error(e);
+            return {type: 'LOAD_FILTERS_FAIL', reason: e.message, exception: e};
+        }
+    })
+);
+
+
+export default combineEpics(
+    imageSearch,
+    regionSearch,
+    loadFile,
+    loadImage,
+    loadFilters);

package/src/epics/types.ts

@@ -0,0 +1,12 @@
+import NyrisAPI from "@nyris/nyris-api";
+import {Epic} from "redux-observable";
+import {AppAction, AppState} from "../types";
+import {History} from "history";
+
+export interface EpicsDependencies {
+    api: NyrisAPI,
+    history: History
+}
+
+export type EpicConf = Epic<AppAction, AppAction, AppState, EpicsDependencies>;
+