@nyris/nyris-webapp 0.3.6 → 0.3.13

package/src/actions/searchActions.ts

@@ -1,218 +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: 'ADD_TO_SELECTEDFILTERS_SUCCESS', key: string , value : string}
-    | { type: 'REMOVE_FROM_SELECTEDFILTERS', key: string , value: string}
-    | { type: 'REMOVE_FROM_SELECTEDFILTERS_SUCCESS', 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_SUCCESS":
-            return {
-                ...state,
-                selectedFilters : ADDtoSelectedfilters(state.selectedFilters, action.key, action.value)
-            }
-        case "REMOVE_FROM_SELECTEDFILTERS_SUCCESS":
-            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);      
-                }
-                    
-            }  
-            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;
 }

package/src/components/CategoryFilter.tsx

@@ -1,17 +1,20 @@
-import React from 'react';
+import React from "react";
 
-
-const CategoryFilter = ({cats}: {cats: string[]}) => {
-    if (cats.length === 0) {
-        return null;
-    }
-    return (
-        <div id="catlist" style={{'textAlign': 'center'}}>
-            {
-                cats.map((s) => <a key={s} href="#top">{s}</a>) // TODO fix link
-            }
-        </div>
-    );
+const CategoryFilter = ({ cats }: { cats: string[] }) => {
+  if (cats.length === 0) {
+    return null;
+  }
+  return (
+    <div id="catlist" style={{ textAlign: "center" }}>
+      {
+        cats.map((s) => (
+          <a key={s} href="#top">
+            {s}
+          </a>
+        )) // TODO fix link
+      }
+    </div>
+  );
 };
 
 export default CategoryFilter;

package/src/components/Codes.tsx

@@ -1,20 +1,24 @@
-import React from 'react';
-import {Code} from '@nyris/nyris-api';
+import React from "react";
+import { Code } from "@nyris/nyris-api";
 
 interface Props {
-    codes: Code[]
+  codes: Code[];
 }
-const Codes = ({codes}: Props) =>
-    <>
-        <div className="codes" style={{textAlign: 'center'}}>
-            {codes.length > 0 && <span style={{fontSize: '0.8em'}}>Codes<br/> </span> }
-            {codes.map((c, i) =>
-                <small key={i} title={c.type}>
-                    {c.value}
-                </small>)}
-        </div>
-    </>
-;
-
-
+const Codes = ({ codes }: Props) => (
+  <>
+    <div className="codes" style={{ textAlign: "center" }}>
+      {codes.length > 0 && (
+        <span style={{ fontSize: "0.8em" }}>
+          Codes
+          <br />{" "}
+        </span>
+      )}
+      {codes.map((c, i) => (
+        <small key={i} title={c.type}>
+          {c.value}
+        </small>
+      ))}
+    </div>
+  </>
+);
 export default Codes;

package/src/components/ExampleImages.tsx

@@ -1,24 +1,34 @@
-import React from 'react';
+import React from "react";
 
 interface ExampleImagesProps {
-    images: string[],
-    onExampleImageClicked: (url: string) => void
+  images: string[];
+  onExampleImageClicked: (url: string) => void;
 }
 
-const ExampleImages : React.FC<ExampleImagesProps> = ({images, onExampleImageClicked}) => {
-    if (images.length === 0) {
-        return null;
-    }
-    return (
-        <section className="useExampleImg">
-            You can also try one of these pictures:
-            <div className="exampleImages">
-                <div className="exImagesWrap">
-                    {images.map((i) => (<img key={i} src={i} alt="" onClick={() => onExampleImageClicked(i)}/>))}
-                </div>
-            </div>
-        </section>
-    );
+const ExampleImages: React.FC<ExampleImagesProps> = ({
+  images,
+  onExampleImageClicked,
+}) => {
+  if (images.length === 0) {
+    return null;
+  }
+  return (
+    <section className="useExampleImg">
+      You can also try one of these pictures:
+      <div className="exampleImages">
+        <div className="exImagesWrap">
+          {images.map((i) => (
+            <img
+              key={i}
+              src={i}
+              alt=""
+              onClick={() => onExampleImageClicked(i)}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
 };
 
 export default ExampleImages;