@nyris/nyris-webapp 0.3.9 → 0.3.12

package/src/epics/search.ts

@@ -1,164 +1,239 @@
-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'),
+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 });
+    switchMap(async ([action, state]): Promise<AppAction> => {
+      if (action.type !== "SEARCH_REQUEST_START") {
+        throw new Error(`Wrong action type ${action.type}`);
+      }
+      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) => {
+            if (values && values.length > 0) {
+              let filterObj: Filter = {
+                key: key,
+                values: values,
+              };
+              selectedFilters.push(filterObj);
             }
+          });
         }
 
-        if ('file' in action) {
-            console.log('file');
-            let { file } = action;
+        let options: ImageSearchOptions = {
+          cropRect: normalizedRect,
+        };
 
-            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 });
-            }
+        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,
+          };
         }
-        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}`);
-        }
+      if ("file" in action) {
+        console.log("file");
+        let { file } = action;
 
-        let { image } = action;
+        let options: ImageSearchOptions = {};
 
         try {
-            let regions = await api.findRegions(image);
-            return {type: 'REGION_REQUEST_SUCCEED', regions };
-
+          const { results, duration, requestId, categoryPredictions, codes } =
+            await api.findByCad(file, options);
+          return {
+            type: "SEARCH_REQUEST_SUCCEED",
+            results,
+            requestId,
+            duration,
+            categoryPredictions,
+            codes,
+          };
         } catch (e) {
-            console.error(e);
-            return {type: 'REGION_REQUEST_FAIL', reason: e.message, exception: e};
+          console.warn("search failed", e);
+          return {
+            type: "SEARCH_REQUEST_FAIL",
+            reason: e.message,
+            exception: e,
+          };
         }
+      }
+      throw new Error(`Wrong action content ${action}`);
     })
-);
+  );
 
-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 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 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);
+  );
+
+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 ('file' in action) {
-            return imageLoaded(await urlOrBlobToCanvas(action.file), randomId);
+        if (isCadFile(file)) {
+          return cadFileLoaded(file, randomId);
         }
-        if ('image' in action) {
-            return imageLoaded(action.image, randomId);
-        }
-        throw new Error(`LOAD_IMAGE 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 loadFilters: EpicConf = (action$, state$, {api}) => action$.pipe(
-    ofType('LOAD_FILTERS'),
+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 };
+    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 };
+      }
+    })
+  );
 
-        } catch (e) {
-            console.error(e);
-            return {type: 'LOAD_FILTERS_FAIL', reason: e.message, exception: e};
+const searchFilters: EpicConf = (action$, state$, { api }) =>
+  action$.pipe(
+    ofType("SEARCH_FILTERS"),
+    withLatestFrom(state$),
+    switchMap(async ([action, state]): Promise<AppAction> => {
+      if (action.type !== "SEARCH_FILTERS") {
+        throw new Error(`Wrong action type ${action.type}`);
+      }
+      try {
+        // use find filters
+        let { key, value } = action;
+        let values: string[] = [];
+        if (value) {
+          let response = await api.searchFilters(key, value);
+          if (response && response.length > 0) {
+            values = values.concat(await api.searchFilters(key, value));
+          }
+        } else {
+          // if no value load default values in search
+          let defaultfilters = await api.getFilters();
+          let filter = defaultfilters.find((x) => x.key === key);
+          if (filter && filter.values && filter.values.length > 0) {
+            values = filter.values;
+          }
         }
+        return { type: "UPDATE_FILTERS", key, values };
+      } catch (e) {
+        console.error(e);
+        return { type: "LOAD_FILTERS_FAIL", reason: e.message, exception: e };
+      }
     })
-);
-
+  );
 
 export default combineEpics(
-    imageSearch,
-    regionSearch,
-    loadFile,
-    loadImage,
-    loadFilters);
+  imageSearch,
+  regionSearch,
+  loadFile,
+  loadImage,
+  loadFilters,
+  searchFilters
+);

package/src/index.css

@@ -315,7 +315,7 @@ h1, h2 {
 
 h1 {
   font-size: 25px;
-  margin: 0 auto 25px
+  margin: 0 auto
 }
 
 h1.entry-title a {
@@ -1455,7 +1455,7 @@ a img.aligncenter {
   background: #031F2B;
   
   -ms-flex-pack: justify;
-  height: calc( 100vh - 60px);
+  height: 100%;
 }
 .sidebar {
   order: 0;
@@ -1468,14 +1468,15 @@ a img.aligncenter {
   -webkit-flex: 0 0 329px;
   -ms-flex: 0 0 329px;
   flex: 0 0 240px;
-  border-right: 1px solid #eee;
   width: 25%;
+  height:100%
 }
 .mainContent{
   width: calc(100vh-230);
   flex: 0 0 80%;
   flex-grow: 1;
   position: inherit;
+  border-left: 1px solid #eee;
 }
 .sidebarContent {
   height: 100%;
@@ -1487,7 +1488,7 @@ a img.aligncenter {
 .sidebarHeader{
   display: flex;
   align-items: center;
-  padding: 16px;
+  padding: 3px;
   }
   .sidebar-icon{
    width: 1.25em;
@@ -1502,8 +1503,11 @@ a img.aligncenter {
   font-size: 16px;
   float: left;
   color: white;
-  margin-top: 27px;
+  margin-top: 7px;
   }
+  .sidebarContent{
+    overflow-y: auto;
+ }
   .Sidebar-items{
     display: flex;
     flex-direction: column;
@@ -1535,11 +1539,96 @@ a img.aligncenter {
   }
   .sidebar-text{
     color: white;
+    font-size: 16px;
+  }
+  .overflowHidden{
+    overflow-y: hidden;
   }
-
   .itemLabel{
     padding-left: 10px;
+    font-size: 14px;
+    max-width: 3ch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .itemLabel:hover::before {
+    content: attr(data-title);
+    position: absolute;
+    bottom: -46px;
+    padding: 10px;
+    background: #000;
+    color: #fff;
+    font-size: 14px;
+    white-space: nowrap;
+  }
+  .itemLabel:hover::after {
+    content: '';
+    position: absolute;
+    bottom: -12px;
+    left: 8px;
+    border: 8px solid transparent;  
+    border-bottom: 8px solid #000;
+  }
+
+  #searchQueryInput {
+    width: 100%;
+    height: 1.8rem;
+    background: #f5f5f5;
+    outline: none;
+    border: none;
+    border-radius: 1.625rem;
+    padding: 0 3.5rem 0 1.5rem;
+    font-size: 1rem;
+  }
+  
+  #searchQuerySubmit {
+    width: 3.5rem;
+    height: 2.8rem;
+    margin-left: -3.5rem;
+    background: none;
+    border: none;
+    outline: none;
+  }
+
+  .searchBar {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
   }
+
+  .wrap-box-refinements{
+    width: 100%;
+    margin-top: 16px;
+  }
+  .wrap-box-refinements ul{
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    grid-gap: 8px;
+    gap: 8px;
+    align-items: center;
+}
+.summary-label{
+  width: 100%;
+  display: inherit;
+  align-items: inherit;
+  justify-content: inherit;
+}  
+
+.summary-label-key-text{
+  font-size: 13px;
+}
+
+.clear-all-filters-hidden{
+  display: none;
+}
+.clear-all-filters{
+border: 0;
+background: initial;
+color: red;
+font-size: 13px;
+}
 #catlist a { display: inline-block; padding: 10px;  border-radius: 10px;  }
 #catlist a:hover { background-color: white; }
 #catlist a.selected { background-color: #444; color: #ddd; }