@nyris/nyris-webapp 0.3.9 → 0.3.14

package/src/actions/searchActions.ts

@@ -1,217 +1,309 @@
-import {CanvasWithId} from "../types";
-import {Code, RectCoords, Region, selectFirstCenteredRegion,Filter} from '@nyris/nyris-api';
+import { CanvasWithId } from "../types";
+import {
+  Code,
+  RectCoords,
+  Region,
+  selectFirstCenteredRegion,
+  Filter,
+} from "@nyris/nyris-api";
 
 export type ImageSourceType =
-    | { url: string }
-    | { file: File }
-    | { image: HTMLCanvasElement }
+  | { 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 , selectedFilters?: Filter[] }
-    | { 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}
-    | { type: 'LOAD_FILTERS'}
-    | { type: 'LOAD_FILTERS_SUCCESS', filters: Filter[]}
-    | { type: 'LOAD_FILTERS_FAIL', reason: string, exception: any}
-    | { type: 'ADD_TO_SELECTEDFILTERS', key: string, value : string}
-    | { type: 'REMOVE_FROM_SELECTEDFILTERS', key: string , value: string}
-    | { type: 'CLEAR_SELECTED_FILTERS'}
-
+  | { 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;
+      selectedFilters?: Filter[];
+    }
+  | { 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 }
+  | { type: "LOAD_FILTERS" }
+  | { type: "LOAD_FILTERS_SUCCESS"; filters: Filter[] }
+  | { type: "LOAD_FILTERS_FAIL"; reason: string; exception: any }
+  | { type: "ADD_TO_SELECTEDFILTERS"; key: string; value: string }
+  | { type: "REMOVE_FROM_SELECTEDFILTERS"; key: string; value: string }
+  | { type: "CLEAR_SELECTED_FILTERS" }
+  | { type: "SEARCH_FILTERS"; key: string; value: string }
+  | { type: "FILTER_CHANGED" }
+  | { type: "FILTER_CHANGED_FAIL" }
+  | { type: "CLEAR_REQUEST_IMAGE" }
+  | { type: "UPDATE_FILTERS"; key: string; values: string[] };
 
 interface CategoryPrediction {
-    name: string,
-    score: number
+  name: string;
+  score: number;
 }
 
 export interface SearchState {
-    results: any[]
-    duration?: number
-    requestId?: string
-    sessionId?: string
-    regions: Region[]
-    selectedRegion: RectCoords
-    fetchingRegions: boolean
-    fetchingResults: boolean
-    filterOptions: string[]
-    requestImage?:  CanvasWithId
-    requestCadFile?:  File
-    categoryPredictions: CategoryPrediction[]
-    codes: Code[],
-    errorMessage: string,
-    filters:Filter[],
-    selectedFilters: Map<string, string[]>
+  results: any[];
+  duration?: number;
+  requestId?: string;
+  sessionId?: string;
+  regions: Region[];
+  selectedRegion: RectCoords;
+  fetchingRegions: boolean;
+  fetchingResults: boolean;
+  filterOptions: string[];
+  requestImage?: CanvasWithId;
+  requestCadFile?: File;
+  categoryPredictions: CategoryPrediction[];
+  codes: Code[];
+  errorMessage: string;
+  filters: Filter[];
+  selectedFilters: Map<string, string[]>;
 }
 
-const initialState : SearchState = {
-    results: [],
-    regions: [],
-    selectedRegion: {x1: 0.1, x2: 0.9, y1: 0.1, y2: 0.9},
-    requestImage: undefined,
-    fetchingResults: false,
-    fetchingRegions: false,
-    filterOptions: [],
-    categoryPredictions: [],
-    codes: [],
-    errorMessage: '',
-    filters: [],
-    selectedFilters: new Map<string,string[]>()
+const initialState: SearchState = {
+  results: [],
+  regions: [],
+  selectedRegion: { x1: 0.1, x2: 0.9, y1: 0.1, y2: 0.9 },
+  requestImage: undefined,
+  fetchingResults: false,
+  fetchingRegions: false,
+  filterOptions: [],
+  categoryPredictions: [],
+  codes: [],
+  errorMessage: "",
+  filters: [],
+  selectedFilters: new Map<string, string[]>(),
 };
 
-
-export const loadFile = (file: File ): SearchAction => ({ type: 'LOAD_FILE', file });
-export const loadUrl = (url: string): SearchAction => ({ type: 'LOAD_IMAGE', url });
-export const loadCanvas = (image: HTMLCanvasElement): SearchAction => ({ type: 'LOAD_IMAGE', image });
-export const imageLoaded = (image: HTMLCanvasElement, id: string): SearchAction => ({ type: 'IMAGE_LOADED', image: {canvas: image, id: id} });
-export const cadFileLoaded = (file: File, id: string): SearchAction => ({ type: 'CAD_LOADED', file});
-export const selectionChanged = (normalizedRect: RectCoords) : SearchAction => ({ type: 'REGION_CHANGED', normalizedRect });
-export const searchRegions = (image: HTMLCanvasElement): SearchAction => ({ type: 'REGION_REQUEST_START', image });
-export const searchOffersForImage = (image: HTMLCanvasElement, normalizedRect?: RectCoords, selectedFilters?: Filter[]) : SearchAction => ({
-    type: 'SEARCH_REQUEST_START',
-    image,
-    normalizedRect,
-    selectedFilters
+export const loadFile = (file: File): SearchAction => ({
+  type: "LOAD_FILE",
+  file,
 });
-export const searchOffersForCad = (file: File) : SearchAction => ({
-    type: 'SEARCH_REQUEST_START',
-    file
+export const loadUrl = (url: string): SearchAction => ({
+  type: "LOAD_IMAGE",
+  url,
+});
+export const loadCanvas = (image: HTMLCanvasElement): SearchAction => ({
+  type: "LOAD_IMAGE",
+  image,
+});
+export const imageLoaded = (
+  image: HTMLCanvasElement,
+  id: string
+): SearchAction => ({ type: "IMAGE_LOADED", image: { canvas: image, id: id } });
+export const cadFileLoaded = (file: File, id: string): SearchAction => ({
+  type: "CAD_LOADED",
+  file,
+});
+export const selectionChanged = (normalizedRect: RectCoords): SearchAction => ({
+  type: "REGION_CHANGED",
+  normalizedRect,
+});
+export const searchRegions = (image: HTMLCanvasElement): SearchAction => ({
+  type: "REGION_REQUEST_START",
+  image,
+});
+export const searchOffersForImage = (
+  image: HTMLCanvasElement,
+  normalizedRect?: RectCoords
+): SearchAction => ({
+  type: "SEARCH_REQUEST_START",
+  image,
+  normalizedRect,
+});
+export const searchOffersForCad = (file: File): SearchAction => ({
+  type: "SEARCH_REQUEST_START",
+  file,
+});
+export const submitPositiveFeedback = (): SearchAction => ({
+  type: "FEEDBACK_SUBMIT_POSITIVE",
+});
+export const submitNegativeFeedback = (): SearchAction => ({
+  type: "FEEDBACK_SUBMIT_NEGATIVE",
+});
+export const loadFilters = (): SearchAction => ({ type: "LOAD_FILTERS" });
+export const addToSelectedFilters = (
+  key: string,
+  value: string
+): SearchAction => ({ type: "ADD_TO_SELECTEDFILTERS", key, value });
+export const removeFromSelectedFilters = (
+  key: string,
+  value: string
+): SearchAction => ({ type: "REMOVE_FROM_SELECTEDFILTERS", key, value });
+export const clearAllSelectedFilters = () => ({
+  type: "CLEAR_SELECTED_FILTERS",
+});
+export const searchFilters = (key: string, value: string): SearchAction => ({
+  type: "SEARCH_FILTERS",
+  key,
+  value,
+});
+export const filterChanged = (): SearchAction => ({ type: "FILTER_CHANGED" });
+export const clearRequestImage = (): SearchAction => ({
+  type: "CLEAR_REQUEST_IMAGE",
 });
-export const submitPositiveFeedback = () : SearchAction => ({ type: 'FEEDBACK_SUBMIT_POSITIVE'});
-export const submitNegativeFeedback = () : SearchAction => ({ type: 'FEEDBACK_SUBMIT_NEGATIVE'});
-export const loadFilters = (): SearchAction => ({type: 'LOAD_FILTERS'});
-export const addToSelectedFilters =(key: string , value: string): SearchAction => ({type : 'ADD_TO_SELECTEDFILTERS' , key , value});
-export const removeFromSelectedFilters = (key: string, value: string) : SearchAction => ({type: 'REMOVE_FROM_SELECTEDFILTERS', key, value});
-export const reducer = (state : SearchState = initialState, action: SearchAction)  => {
-    switch (action.type) {
-        case "IMAGE_LOADED":
-            let { image } = action;
-            console.log('image', image)
-            return {
-                ...initialState,
-                requestImage: image,
-                selectedFilters: state.selectedFilters
-
-            };
-        case "CAD_LOADED":
-            let { file } = action;
-            return {
-                ...initialState,
-                requestCadFile: file
-            }
-        case 'REGION_REQUEST_START':
-            return {
-                ...state,
-                fetchingRegions: true
-            };
-        case "REGION_REQUEST_SUCCEED":
-            return {
-                ...state,
-                fetchingRegions: false,
-                regions: action.regions,
-                selectedRegion:  selectFirstCenteredRegion(action.regions, 0.3, state.selectedRegion)
-            };
-        case "REGION_REQUEST_FAIL":
-            return {
-                ...state,
-                fetchingRegions: false,
-                errorMessage: action.exception.response.data.detail
-            };
-        case "SEARCH_REQUEST_START":
-            return {
-                ...state,
-                fetchingResults: true
-            };
-        case "SEARCH_REQUEST_SUCCEED":
-            let { results, requestId, duration, categoryPredictions, codes } = action;
-            return {
-                ...state,
-                results,
-                requestId,
-                fetchingResults: false,
-                sessionId: state.sessionId || requestId,
-                categoryPredictions,
-                codes,
-                duration
-            };
-        case "SEARCH_REQUEST_FAIL":
-            return {
-                ...state,
-                fetchingResults: false,
-                errorMessage: action.reason
-            };
-        case "REGION_CHANGED":
-            return {
-                ...state,
-                selectedRegion: action.normalizedRect
-            };
-        case "LOAD_FILTERS_SUCCESS":
-            return {
-                ...state, 
-                 filters: action.filters
-            };
-        case "LOAD_FILTERS_FAIL":
-            return {
-                ...state,
-                errorMessage: action.exception.response.data.detail
-            }
-        case "ADD_TO_SELECTEDFILTERS":
-            return {
-                ...state,
-                selectedFilters : ADDtoSelectedfilters(state.selectedFilters, action.key, action.value)
-            }
-        case "REMOVE_FROM_SELECTEDFILTERS":
-            return {
-                ...state,
-                selectedFilters : RemoveFromSelectedFilters(state.selectedFilters, action.key, action.value)
-            }
-        case "CLEAR_SELECTED_FILTERS":
-            return {
-                ...state,
-                selectedFilters : new Map<string,string[]>()
-            }
 
-    }
-    return state;
+export const reducer = (
+  state: SearchState = initialState,
+  action: SearchAction
+) => {
+  switch (action.type) {
+    case "IMAGE_LOADED":
+      let { image } = action;
+      console.log("image", image);
+      return {
+        ...initialState,
+        requestImage: image,
+        selectedFilters: state.selectedFilters,
+      };
+    case "CAD_LOADED":
+      let { file } = action;
+      return {
+        ...initialState,
+        requestCadFile: file,
+      };
+    case "REGION_REQUEST_START":
+      return {
+        ...state,
+        fetchingRegions: true,
+      };
+    case "REGION_REQUEST_SUCCEED":
+      return {
+        ...state,
+        fetchingRegions: false,
+        regions: action.regions,
+        selectedRegion: selectFirstCenteredRegion(
+          action.regions,
+          0.3,
+          state.selectedRegion
+        ),
+      };
+    case "REGION_REQUEST_FAIL":
+      return {
+        ...state,
+        fetchingRegions: false,
+        errorMessage: action.exception.response.data.detail,
+      };
+    case "SEARCH_REQUEST_START":
+      return {
+        ...state,
+        fetchingResults: true,
+      };
+    case "SEARCH_REQUEST_SUCCEED":
+      let { results, requestId, duration, categoryPredictions, codes } = action;
+      return {
+        ...state,
+        results,
+        requestId,
+        fetchingResults: false,
+        sessionId: state.sessionId || requestId,
+        categoryPredictions,
+        codes,
+        duration,
+      };
+    case "SEARCH_REQUEST_FAIL":
+      return {
+        ...state,
+        fetchingResults: false,
+        errorMessage: action.reason,
+      };
+    case "REGION_CHANGED":
+      return {
+        ...state,
+        selectedRegion: action.normalizedRect,
+      };
+    case "LOAD_FILTERS_SUCCESS":
+      return {
+        ...state,
+        filters: action.filters,
+      };
+    case "LOAD_FILTERS_FAIL":
+      return {
+        ...state,
+        errorMessage: action.exception.response.data.detail,
+      };
+    case "ADD_TO_SELECTEDFILTERS":
+      return {
+        ...state,
+        selectedFilters: ADDtoSelectedfilters(
+          state.selectedFilters,
+          action.key,
+          action.value
+        ),
+      };
+    case "REMOVE_FROM_SELECTEDFILTERS":
+      return {
+        ...state,
+        selectedFilters: RemoveFromSelectedFilters(
+          state.selectedFilters,
+          action.key,
+          action.value
+        ),
+      };
+    case "CLEAR_SELECTED_FILTERS":
+      return {
+        ...state,
+        selectedFilters: new Map<string, string[]>(),
+      };
+    case "CLEAR_REQUEST_IMAGE":
+      return {
+        ...state,
+        requestImage: undefined,
+      };
+    case "UPDATE_FILTERS":
+      return {
+        ...state,
+        filters: UpdateFilters(state.filters, action.key, action.values),
+      };
+  }
+  return state;
 };
 
- function ADDtoSelectedfilters(selectedFilters: Map<string, string[]>, key: string, value: string): Map<string, string[]> {  
-    if(selectedFilters) 
-            {
-                let values = selectedFilters.get(key);
-                if (values){
-                    values.push(value);
-                }
-                else
-                {
-                    values = new Array<string>(value);
-                }
-                selectedFilters.set(key, values);           
-            }  
-            console.log(selectedFilters);
-            return selectedFilters;
+function ADDtoSelectedfilters(
+  selectedFilters: Map<string, string[]>,
+  key: string,
+  value: string
+): Map<string, string[]> {
+  let values = selectedFilters.get(key) || new Array<string>();
+  values.push(value);
+  selectedFilters.set(key, values);
+  return selectedFilters;
 }
 
-function RemoveFromSelectedFilters(selectedFilters: Map<string, string[]>, key: string, value: string): Map<string, string[]> {
-            if(selectedFilters) 
-            {
-                let values = selectedFilters.get(key);
-                if (values)    
-                {
-                    values = values.filter(x => x!== value);
-                    selectedFilters.set(key, values);      
-                }
-                    
-            }  
-            console.log(selectedFilters);
-            return selectedFilters;
+function RemoveFromSelectedFilters(
+  selectedFilters: Map<string, string[]>,
+  key: string,
+  value: string
+): Map<string, string[]> {
+  let values = selectedFilters.get(key);
+    if (values) {
+      values = values.filter((x) => x !== value);
+      selectedFilters.set(key, values);
+    }
+  
+  return selectedFilters;
+}
+
+function UpdateFilters(filters: Filter[], key: string, values: string[]) {
+  if (filters && filters.length > 0 && filters.find((x) => x.key === key)) {
+    let idx = filters.findIndex((x) => x.key === key);
+    filters[idx].values = values;
+  }
+
+  return filters;
 }

package/src/components/FiltersList.tsx

@@ -1,67 +1,116 @@
-
-import React from 'react';
-import {Filter} from '../../../nyris-api/index';
-import { addToSelectedFilters, removeFromSelectedFilters } from '../actions/searchActions';
-import {  useDispatch } from 'react-redux';
-import { RiLayoutGridLine} from 'react-icons/ri';
+import React, { useEffect, useState } from "react";
+import { Filter } from "@nyris/nyris-api";
+import {
+  addToSelectedFilters,
+  removeFromSelectedFilters,
+  filterChanged,
+  searchFilters,
+} from "../actions/searchActions";
+import { useDispatch } from "react-redux";
+import { RiArrowDropUpLine, RiArrowDropDownLine } from "react-icons/ri";
+import { capitalizeFirstLetter } from "../utils";
+import { AiOutlineSearch } from "react-icons/ai";
 
 interface FilterProps {
-    filter : Filter,
-    selectedValues?: string[]
+  filter: Filter;
+  selectedValues?: string[];
 }
 
+const FiltersList: React.FC<FilterProps> = ({ filter, selectedValues }) => {
+  const dispatch = useDispatch();
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [searchInp, setSearchInp] = useState("");
+  const handleToggler = () => {
+    if (isCollapsed) {
+      setIsCollapsed(false);
+      return;
+    }
+    setIsCollapsed(true);
+  };
+  const onFilterChanged = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    value: string
+  ) => {
+    if (e.target.checked) {
+      if (filter.key) dispatch(addToSelectedFilters(filter.key, value));
+    } else {
+      if (filter.key) dispatch(removeFromSelectedFilters(filter.key, value));
+    }
+    dispatch(filterChanged());
+  };
 
+  const handleChangeOnSearchInputTyped = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setSearchInp(e.target.value);
+  };
 
-const FiltersList : React.FC<FilterProps> = ({filter, selectedValues})=>{
-    const dispatch = useDispatch();
-
-    const onFilterChanged=(e: React.ChangeEvent<HTMLInputElement>,value:string) =>{     
-       if (e.target.checked) {
-        if(filter.key)
-         dispatch(addToSelectedFilters(filter.key , value));
-        } else {
-            if(filter.key)
-            dispatch(removeFromSelectedFilters(filter.key, value));
-       }
+  useEffect(() => {
+    if (searchInp === "") {
+      dispatch(searchFilters(filter.key!, ""));
     }
-    
-    if(filter && filter.values && filter.key && filter.values.length > 0){   
-          
-        return (
-            <div>
-                <div className='item'>
-                <RiLayoutGridLine className="sidebar-icon" />
-                 <span className="sidebar-text"> {filter.key}</span>
-                </div>
-                
-               <div className='item'>
-               <div className="list-container">
-       
-             {filter.values.slice(0, 6).map((item, index) => { 
-                  const checked = selectedValues && selectedValues.includes(item);        
-            return ( 
-              
-                <div key={index}>
-                 
-                <input value={item} checked={checked ? true: false} type="checkbox" onChange={(e)=>onFilterChanged(e,item)} />          
-                <label className='itemLabel'>{item}</label>
-               </div>
-               )
-            })}
-       </div>  
-               </div>
-                                 
-            </div>
-
-        );
+    if (searchInp.length > 3) {
+      dispatch(searchFilters(filter.key!, searchInp));
     }
-    else{
-     return (
-       <div>
-        No filter to load
-       </div>
+  }, [searchInp, filter.key, dispatch]);
+
+  return (
+    <div>
+      <div className="item">
+        <span className="sidebar-text">
+          {capitalizeFirstLetter(filter.key!)}
+        </span>
+        <RiArrowDropUpLine
+          className={
+            isCollapsed ? "sidebar-icon" : "sidebar-icon collapsedHide"
+          }
+          onClick={() => handleToggler()}
+        />
+        <RiArrowDropDownLine
+          className={
+            isCollapsed ? "sidebar-icon collapsedHide" : "sidebar-icon"
+          }
+          onClick={() => handleToggler()}
+        />
+      </div>
+
+      <div
+        className={
+          isCollapsed ? "list-container" : "list-container collapsedHide"
+        }
+      >
+        <div className="searchBar">
+          <input
+            id="searchQueryInput"
+            name="searchQueryInput"
+            placeholder="Search"
+            value={searchInp}
+            onChange={(e) => handleChangeOnSearchInputTyped(e)}
+          />
+          <button id="searchQuerySubmit" type="submit" name="searchQuerySubmit">
+            <AiOutlineSearch />
+          </button>
+        </div>
+        {filter &&
+          filter.values &&
+          filter.values.length > 0 &&
+          filter.values.map((item, index) => {
+            const checked = selectedValues && selectedValues.includes(item);
+            return (
+              <div key={index}>
+                <input
+                  value={item}
+                  checked={checked ? true : false}
+                  type="checkbox"
+                  onChange={(e) => onFilterChanged(e, item)}
+                />
+                <span className="itemLabel">{item}</span>
+              </div>
+            );
+          })}
+      </div>
+    </div>
   );
- } 
-}
+};
 
-export default FiltersList;
+export default FiltersList;