@nyris/nyris-webapp 0.3.9 → 0.3.14

package/src/epics/search.ts

@@ -2,75 +2,78 @@ 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 {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'),
+
+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;
+
+        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.findByImage(image, options, selectedFilters);
+          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 {
-                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 });
-            }
+      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}`);
+    }
+    throw new Error(`Wrong action content ${action}`);
+
     })
-);
+  );
 
-const regionSearch: EpicConf = (action$, state$, {api}) => action$.pipe(
+  const regionSearch: EpicConf = (action$, state$, {api}) => action$.pipe(
     ofType('REGION_REQUEST_START'),
     withLatestFrom(state$),
     switchMap(async ([action, {settings}]) : Promise<AppAction> => {
@@ -132,33 +135,62 @@ const loadImage: EpicConf = (action$) => action$.pipe(
 );
 
 
-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();
+        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 {
+        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; }

package/src/index.tsx

@@ -5,6 +5,7 @@ import 'react-app-polyfill/stable';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
+import App from './App';
 import AppMD from './AppMD';
 import * as serviceWorker from './serviceWorker';
 
@@ -14,9 +15,8 @@ import {
     loadCanvas,
     loadFile,
     loadUrl,
-    loadFilters,
     reducer as searchReducer,
-    selectionChanged, submitNegativeFeedback, submitPositiveFeedback
+    selectionChanged, submitNegativeFeedback, submitPositiveFeedback, clearRequestImage
 } from './actions/searchActions';
 import {
     hideFeedback,
@@ -34,7 +34,6 @@ import 'typeface-roboto';
 import {defaultMdSettings, defaultSettings} from "./defaults";
 import rootEpic from "./epics";
 import { createHashHistory } from 'history';
-import App from './App';
 
 
 declare var settings: AppSettings;
@@ -84,122 +83,117 @@ epicMiddleware.run(rootEpic);
 
 
 history.listen((location, action) => {
-    console.log('history', location, action)
-    if (action === 'PUSH') {
-        return;
-    }
-    switch (location.pathname) {
-        case '/results':
-            store.dispatch({type: 'SHOW_RESULTS'});
-            store.dispatch({type: 'LOAD_FILTERS'});
-            break;
-        case '/':           
-            store.dispatch({type: 'SHOW_START'});          
-            break;
-    }
+  if (action === "PUSH") {
+    return;
+  }
+  switch (location.pathname) {
+    case "/results":
+      store.dispatch({ type: "SHOW_RESULTS" });
+      store.dispatch({ type: "LOAD_FILTERS" });
+      break;
+    case "/":
+      store.dispatch({ type: "SHOW_START" });
+      break;
+  }
 });
 
-
 // Here comes the really dirty code of the composition-root
 
 const mapStateToProps = (state: AppState) => ({
-    showPart: state.nyrisDesign.showPart,
-    search: {
-        results: state.search.results,
-        categoryPredictions: state.search.categoryPredictions,
-        codes: state.search.codes,
-        filterOptions: state.search.filterOptions,
-        previewSelection: state.search.selectedRegion,
-        regions: state.search.regions,
-        duration: state.search.duration,
-        requestId: state.search.requestId,
-        toastErrorMessage: state.search.errorMessage,
-        filters: state.search.filters,
-        selectedFilters: state.search.selectedFilters
-    },
-    settings: state.settings,
-    previewImage: state.search.requestImage,
-    loading: state.search.fetchingRegions || state.search.fetchingResults,
-    feedbackState: state.nyrisDesign.feedbackState,
-    mdSettings: state.settings.materialDesign || defaultMdSettings,
+  showPart: state.nyrisDesign.showPart,
+  search: {
+    results: state.search.results,
+    categoryPredictions: state.search.categoryPredictions,
+    codes: state.search.codes,
+    filterOptions: state.search.filterOptions,
+    previewSelection: state.search.selectedRegion,
+    regions: state.search.regions,
+    duration: state.search.duration,
+    requestId: state.search.requestId,
+    toastErrorMessage: state.search.errorMessage,
+    filters: state.search.filters,
+    selectedFilters: state.search.selectedFilters,
+  },
+  settings: state.settings,
+  previewImage: state.search.requestImage,
+  loading: state.search.fetchingRegions || state.search.fetchingResults,
+  feedbackState: state.nyrisDesign.feedbackState,
+  mdSettings: state.settings.materialDesign || defaultMdSettings,
 });
 
-
 const mapDispatchToProps = (dispatch: Dispatch<AppAction>) => {
-    return {
-        handlers: {
-            ...bindActionCreators({
-                onPositiveFeedback: submitPositiveFeedback,
-                onNegativeFeedback: submitNegativeFeedback,
-                onCameraClick: showCamera,
-                onCaptureCanceled: showStart,
-                onCaptureComplete: loadCanvas,
-                onSelectFile: loadFile,
-                onExampleImageClick: loadUrl,
-                onFileDropped: loadFile,
-                onSelectionChange: selectionChanged,
-                onCloseFeedback: hideFeedback
-            }, dispatch),
-            onImageClick: (position: number, url: string) => {
-                dispatch({ type: "RESULT_IMAGE_CLICKED", position, url});
-                dispatch(loadUrl(url));
-            },
-            onLinkClick: (position: number, url: string) => {
-                dispatch({type: 'RESULT_LINK_CLICKED', position, url});
-                if (url) {
-                    window.open(url);
-                }
-            },
-            onShowStart: () => {
-                dispatch(showStart());
-                dispatch({type: "CLEAR_SELECTED_FILTERS"});
-                dispatch(loadFilters());
-                scrollTop();
-            },
+  return {
+    handlers: {
+      ...bindActionCreators(
+        {
+          onPositiveFeedback: submitPositiveFeedback,
+          onNegativeFeedback: submitNegativeFeedback,
+          onCameraClick: showCamera,
+          onCaptureCanceled: showStart,
+          onCaptureComplete: loadCanvas,
+          onSelectFile: loadFile,
+          onExampleImageClick: loadUrl,
+          onFileDropped: loadFile,
+          onSelectionChange: selectionChanged,
+          onCloseFeedback: hideFeedback,
+        }, dispatch),
+      onImageClick: (position: number, url: string) => {
+        dispatch({ type: "RESULT_IMAGE_CLICKED", position, url });
+        dispatch(loadUrl(url));
+      },
+      onLinkClick: (position: number, url: string) => {
+        dispatch({ type: "RESULT_LINK_CLICKED", position, url });
+        if (url) {
+          window.open(url);
         }
-    };
+      },
+      onShowStart: () => {
+        dispatch(showStart());
+        dispatch(clearRequestImage());
+        scrollTop();
+      },
+    },
+  };
 };
 
-
 // chrome plugin communication
 function onMessage(evt: MessageEvent) {
-    let msg = evt.data;
-    if (msg.type === "image")  {
-        store.dispatch(loadUrl(msg.image));
-    }
+  let msg = evt.data;
+  if (msg.type === "image") {
+    store.dispatch(loadUrl(msg.image));
+  }
 }
-window.addEventListener('message', onMessage);
-
-
-
+window.addEventListener("message", onMessage);
 
 let useMd = settings.materialDesign !== undefined;
 let md: MDSettings = {
-    ...defaultMdSettings,
-    ...settings.materialDesign
+  ...defaultMdSettings,
+  ...settings.materialDesign,
 };
 let theme = createMuiTheme({
-    typography: {
-        fontFamily: md.customFontFamily,
+  typography: {
+    fontFamily: md.customFontFamily,
+  },
+  palette: {
+    primary: {
+      main: md.primaryColor,
     },
-    palette: {
-        primary: {
-            main: md.primaryColor,
-        },
-        secondary: {
-            main: md.secondaryColor
-        }
-    }
+    secondary: {
+      main: md.secondaryColor,
+    },
+  },
 });
 const SelectedApp = useMd ? AppMD : App;
 const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(SelectedApp);
 
-ReactDOM.render(<Provider store={store}><MuiThemeProvider
-    theme={theme}><ConnectedApp/></MuiThemeProvider></Provider>, document.getElementById('root'));
-
-
-
-
+ReactDOM.render(
+  <Provider store={store}>
+    <MuiThemeProvider theme={theme}>
+      <ConnectedApp />
+    </MuiThemeProvider>
+  </Provider>,
+  document.getElementById("root")
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

package/src/utils.ts

@@ -31,3 +31,8 @@ export function getThumbSizeLongestEdge(maxW: number, maxH: number, iW: number,
     }
 }
 
+export function capitalizeFirstLetter(val: string) {
+    return val.charAt(0).toUpperCase() + val.slice(1);
+  }
+  
+