@nyris/nyris-webapp 0.3.9 → 0.3.12

package/src/actions/nyrisAppActions.ts

@@ -1,76 +1,80 @@
-import {AppAction} from "../types";
-
-
-export type NyrisAppPart = 'start' | 'camera' | 'results';
-export type NyrisFeedbackState = 'hidden' | 'question' | 'positive' | 'negative';
+import { AppAction } from "../types";
 
+export type NyrisAppPart = "start" | "camera" | "results";
+export type NyrisFeedbackState =
+  | "hidden"
+  | "question"
+  | "positive"
+  | "negative";
 
 export interface NyrisAppState {
-    showPart: NyrisAppPart,
-    feedbackState: NyrisFeedbackState
+  showPart: NyrisAppPart;
+  feedbackState: NyrisFeedbackState;
 }
 
 export type NyrisAction =
-    | { type: 'SHOW_START' }
-    | { type: 'SHOW_CAMERA' }
-    | { type: 'SHOW_RESULTS' }
-    | { type: 'SHOW_FEEDBACK' }
-    | { type: 'HIDE_FEEDBACK' }
-    | { type: 'RESULT_LINK_CLICKED', position: number, url: string}
-    | { type: 'RESULT_IMAGE_CLICKED', position: number, url: string}
-
+  | { type: "SHOW_START" }
+  | { type: "SHOW_CAMERA" }
+  | { type: "SHOW_RESULTS" }
+  | { type: "SHOW_FEEDBACK" }
+  | { type: "HIDE_FEEDBACK" }
+  | { type: "RESULT_LINK_CLICKED"; position: number; url: string }
+  | { type: "RESULT_IMAGE_CLICKED"; position: number; url: string };
 
-export const showCamera = () :NyrisAction => ({type: 'SHOW_CAMERA'});
-export const showStart = () :NyrisAction => ({type: 'SHOW_START'});
-export const showResults = () :NyrisAction => ({type: 'SHOW_RESULTS'});
-export const showFeedback = () :NyrisAction => ({type: 'SHOW_FEEDBACK'});
-export const hideFeedback = () :NyrisAction => ({type: 'HIDE_FEEDBACK'});
+export const showCamera = (): NyrisAction => ({ type: "SHOW_CAMERA" });
+export const showStart = (): NyrisAction => ({ type: "SHOW_START" });
+export const showResults = (): NyrisAction => ({ type: "SHOW_RESULTS" });
+export const showFeedback = (): NyrisAction => ({ type: "SHOW_FEEDBACK" });
+export const hideFeedback = (): NyrisAction => ({ type: "HIDE_FEEDBACK" });
 
-const initialNyrisState : NyrisAppState = {
-    showPart: 'start',
-    feedbackState: 'hidden'
+const initialNyrisState: NyrisAppState = {
+  showPart: "start",
+  feedbackState: "hidden",
 };
 
-export function reducer(state : NyrisAppState = initialNyrisState, action: AppAction) : NyrisAppState {
-    switch (action.type) {
-        case 'SHOW_START':
-            return {
-                ...state,
-                showPart: 'start'
-            };
-        case 'SHOW_CAMERA':
-            return {
-                ...state,
-                showPart: 'camera'
-            };
-        case 'SEARCH_REQUEST_START':
-        case 'REGION_REQUEST_START':
-        case 'SHOW_RESULTS':
-            return {
-                ...state,
-                showPart: 'results'
-            };
-        case 'SHOW_FEEDBACK':
-            return {
-                ...state,
-                feedbackState: 'question'
-            };
-        case 'HIDE_FEEDBACK':
-            return {
-                ...state,
-                feedbackState: 'hidden'
-            };
-        case 'FEEDBACK_SUBMIT_POSITIVE':
-            return {
-                ...state,
-                feedbackState: 'positive'
-            };
-        case 'FEEDBACK_SUBMIT_NEGATIVE':
-            return {
-                ...state,
-                feedbackState: 'negative'
-            };
-        default:
-            return state;
-    }
+export function reducer(
+  state: NyrisAppState = initialNyrisState,
+  action: AppAction
+): NyrisAppState {
+  switch (action.type) {
+    case "SHOW_START":
+      return {
+        ...state,
+        showPart: "start",
+      };
+    case "SHOW_CAMERA":
+      return {
+        ...state,
+        showPart: "camera",
+      };
+    case "SEARCH_REQUEST_START":
+    case "REGION_REQUEST_START":
+    case "SHOW_RESULTS":
+      return {
+        ...state,
+        showPart: "results",
+      };
+    case "SHOW_FEEDBACK":
+      return {
+        ...state,
+        feedbackState: "question",
+      };
+    case "HIDE_FEEDBACK":
+      return {
+        ...state,
+        feedbackState: "hidden",
+      };
+    case "FEEDBACK_SUBMIT_POSITIVE":
+      return {
+        ...state,
+        feedbackState: "positive",
+      };
+    case "FEEDBACK_SUBMIT_NEGATIVE":
+      return {
+        ...state,
+        feedbackState: "negative",
+      };
+    default:
+      return state;
+  }
 }

package/src/actions/searchActions.ts

@@ -1,217 +1,323 @@
-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 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 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[]>()
-            }
+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);
     }
-    return state;
-};
+    selectedFilters.set(key, values);
+  }
+  console.log(selectedFilters);
+  return selectedFilters;
+}
 
- 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 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[]> {
-            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 UpdateFilters(filters: Filter[], key: string, values: string[]) {
+  console.log(filters);
+  console.log(key);
+  console.log(values);
+  console.log(filters.find((x) => x.key === key));
+  if (filters && filters.length > 0 && filters.find((x) => x.key === key)) {
+    let idx = filters.findIndex((x) => x.key === key);
+    filters[idx].values = values;
+    console.log(filters);
+  }
+
+  return filters;
 }