@nyris/nyris-webapp 0.3.13 → 0.3.16

package/src/epics/index.ts

@@ -1,184 +1,135 @@
-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 {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]) => {
+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'),
+  tap((action) => {
       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_RESULTS' && history.location.pathname !== '/results') {
+          history.push('/results');
       }
-      if (type === "SHOW_START" && history.location.pathname !== "/") {
-        history.goBack();
+      if (type === 'SHOW_START' && history.location.pathname !== '/') {
+          history.goBack();
       }
-    }),
-    ignoreElements()
-  );
+  }),
+  ignoreElements()
+);
 
-const onSearchSuccessShowResults: EpicConf = (action$) =>
-  action$.pipe(ofType("SEARCH_REQUEST_SUCCEED"), map(showResults));
+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 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;
+      if (!instantRedirectPatterns.find(r => new RegExp(r).test(firstLink))) {
+          return;
       }
       window.location.href = firstLink;
-    }),
-    ignoreElements()
-  );
+  }),
+  ignoreElements()
+);
 
-const onSearchSuccessShowFeedbackDelayed: EpicConf = (action$) =>
-  action$.pipe(
-    ofType("SEARCH_REQUEST_SUCCEED"),
-    delay(3000),
-    map(showFeedback)
-  );
+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}`);
+
+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 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}`);
+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") {
+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) {
+      }
+      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);
       }
-    )
-  );
+      let { regions } = action;
 
-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") {
+      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) {
+      }
+      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") {
+      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) {
+      }
+      if (!requestImage) {
           throw new Error(`No requestImage`);
-        }
-        let { normalizedRect } = action;
-        return searchOffersForImage(requestImage.canvas, normalizedRect);
       }
-    )
-  );
+      let { normalizedRect } = action;
+      return searchOffersForImage(requestImage.canvas, normalizedRect);
+  })
+);
+
 
 const startSearchOnFilterChange: EpicConf = (action$, state$) =>
   action$.pipe(

package/src/epics/search.ts

@@ -1,15 +1,10 @@
-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";
+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(
@@ -22,7 +17,6 @@ const imageSearch: EpicConf = (action$, state$, { api }) =>
       if ("image" in action) {
         let { image, normalizedRect } = action;
 
-        // refactor this
         let selectedFilters = new Array<Filter>();
         if (state.search.selectedFilters.size > 0) {
           state.search.selectedFilters.forEach((values, key) => {
@@ -40,51 +34,9 @@ const imageSearch: EpicConf = (action$, state$, { api }) =>
           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);
+            await api.findByImage(image, options, selectedFilters);
           return {
             type: "SEARCH_REQUEST_SUCCEED",
             results,
@@ -102,76 +54,86 @@ const imageSearch: EpicConf = (action$, state$, { api }) =>
           };
         }
       }
-      throw new Error(`Wrong action content ${action}`);
+
+      if ('file' in action) {
+        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"),
+  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}`);
-      }
+    switchMap(async ([action, {settings}]) : Promise<AppAction> => {
+        if (action.type !== 'REGION_REQUEST_START') {
+            throw new Error(`Wrong action type ${action.type}`);
+        }
 
-      let { image } = action;
+        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 };
-      }
+        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);
+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}`);
         }
-        if (isCadFile(file)) {
-          return cadFileLoaded(file, randomId);
+        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(",")}`
-      );
+        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 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(
@@ -183,7 +145,6 @@ const loadFilters: EpicConf = (action$, state$, { api }) =>
       }
       try {
         // use find filters
-
         let filters = await api.getFilters();
         return { type: "LOAD_FILTERS_SUCCESS", filters };
       } catch (e) {

package/src/index.css

@@ -1447,15 +1447,15 @@ a img.aligncenter {
   display: -ms-flexbox;
   display: flex;
 
-  -webkit-flex-flow: row nowrap;
-  -ms-flex-flow: row nowrap;
-  flex-flow: row nowrap;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   
   padding: 0;
   background: #031F2B;
   
   -ms-flex-pack: justify;
-  height: 100%;
+  height: 100vh;
 }
 .sidebar {
   order: 0;
@@ -1468,14 +1468,14 @@ a img.aligncenter {
   -webkit-flex: 0 0 329px;
   -ms-flex: 0 0 329px;
   flex: 0 0 240px;
-  width: 25%;
-  height:100%
+  height: 100vh;  
 }
 .mainContent{
-  width: calc(100vh-230);
+  width: calc(100vh-230px);
   flex: 0 0 80%;
   flex-grow: 1;
   position: inherit;
+  height: 100vh;
   border-left: 1px solid #eee;
 }
 .sidebarContent {
@@ -1490,7 +1490,7 @@ a img.aligncenter {
   align-items: center;
   padding: 3px;
   }
-  .sidebar-icon{
+.sidebar-icon{
    width: 1.25em;
    height: 1.25em;
    margin-right: 16px;
@@ -1499,26 +1499,26 @@ a img.aligncenter {
    float: right;
 
   }
-  .sidebar-logo{
+.sidebar-logo{
   font-size: 16px;
   float: left;
   color: white;
   margin-top: 7px;
   }
-  .sidebarContent{
+.sidebarContent{
     overflow-y: auto;
  }
-  .Sidebar-items{
+.Sidebar-items{
     display: flex;
     flex-direction: column;
     padding: 0 8px;
   }
   
-  .Sidebar-items .item:hover{
+.Sidebar-items .item:hover{
   background-color: rgba(246, 242, 242, 0.1);
   
   }
-  .Sidebar-items .item{
+.Sidebar-items .item{
   display: flex;
   align-items: center;
   padding: 16px 8px;
@@ -1535,7 +1535,7 @@ a img.aligncenter {
   }
  
 .collapsedHide {
-    display: none;
+    display: none !important;
   }
   .sidebar-text{
     color: white;
@@ -1599,7 +1599,7 @@ a img.aligncenter {
 
   .wrap-box-refinements{
     width: 100%;
-    margin-top: 16px;
+    margin-top: 8px;
   }
   .wrap-box-refinements ul{
     display: flex;