@nyris/nyris-webapp 0.3.3 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "homepage": "./",
   "dependencies": {
     "@babel/runtime": "^7.17.2",
@@ -8,8 +8,8 @@
     "@material-ui/data-grid": "^4.0.0-alpha.37",
     "@material-ui/icons": "^4.4.1",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@nyris/nyris-api": "^0.3.3",
-    "@nyris/nyris-react-components": "^0.3.3",
+    "@nyris/nyris-api": "^0.3.4",
+    "@nyris/nyris-react-components": "^0.3.4",
     "@reduxjs/toolkit": "^1.6.1",
     "@types/blueimp-load-image": "^2.23.4",
     "@types/classnames": "^2.2.9",

package/src/App.tsx

@@ -4,17 +4,14 @@ import React from "react";
 import "typeface-roboto";
 import "index.css";
 import { useAppSelector } from "Store/Store";
-import LandingPageApp from "modules/LandingPage/indexApp";
-import LandingPageAppMD from "modules/LandingPage/indexAppMD";
+import LandingPageApp from "modules/LandingPage/index";
 import AppNewVersion from "modules/LandingPage/indexNewVersion";
 import {AppState} from "./types";
 
 function App(): JSX.Element {
   const { settings } = useAppSelector<AppState>((state: any) => state);
-  const { themePage }: any = settings;
-  let SelectedApp = 
-    themePage.default?.active ? LandingPageApp : (
-      themePage.mdWhiteLabel?.active ? LandingPageAppMD : AppNewVersion);
+  const { themePage } = settings;
+  let SelectedApp = themePage.searchSuite?.active ? AppNewVersion : LandingPageApp;
 
   return <SelectedApp />;
 }

package/src/Store/Nyris.ts

@@ -1,4 +1,4 @@
-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { createSlice } from "@reduxjs/toolkit";
 
 export type NyrisAppPart = "start" | "camera" | "results";
 export type NyrisFeedbackState =
@@ -20,7 +20,7 @@ export const nyrisSlice = createSlice({
   name: "nyris",
   initialState,
   reducers: {
-    showStart: (state, _data: PayloadAction<any>) => {
+    showStart: (state) => {
       return {
         ...state,
         showPart: "start",
@@ -32,31 +32,31 @@ export const nyrisSlice = createSlice({
         showPart: "camera",
       };
     },
-    showResults: (state, _data: PayloadAction<any>) => {
+    showResults: (state) => {
       return {
         ...state,
         showPart: "results",
       };
     },
-    showFeedback: (state, _data: PayloadAction<any>) => {
+    showFeedback: (state) => {
       return {
         ...state,
         feedbackState: "question",
       };
     },
-    hideFeedback: (state, _data: PayloadAction<any>) => {
+    hideFeedback: (state) => {
       return {
         ...state,
         feedbackState: "hidden",
       };
     },
-    feedbackSubmitPositive: (state, _data: PayloadAction<any>) => {
+    feedbackSubmitPositive: (state) => {
       return {
         ...state,
         feedbackState: "positive",
       };
     },
-    feedbackNegative: (state, _data: PayloadAction<any>) => {
+    feedbackNegative: (state) => {
       return {
         ...state,
         feedbackState: "negative",

package/src/Store/Search.ts

@@ -80,11 +80,12 @@ const initialState: SearchState = {
   loadingSearchAlgolia: false,
 };
 
-export const searchSlice = createSlice({
-  name: "search",
-  initialState,
-  reducers: {
-    loadFile: (state, data: PayloadAction<any>) => {
+
+  export const searchSlice = createSlice({
+    name: "search",
+    initialState,
+    reducers: {
+      setSearchResults: (state, data) => {
       const { payload } = data;
       const {
         requestImage,
@@ -144,19 +145,19 @@ export const searchSlice = createSlice({
         fetchingRegions: false,
       };
     },
-    submitPositiveFeedback: (state, data: PayloadAction<RectCoords>) => {
+    submitPositiveFeedback: () => {
       return;
     },
-    submitNegativeFeedback: (state, data: PayloadAction<RectCoords>) => {
+    submitNegativeFeedback: () => {
       return;
     },
-    loadingActionResults: (state, _data: PayloadAction<any>) => {
+    loadingActionResults: (state) => {
       return {
         ...state,
         fetchingResults: true,
       };
     },
-    loadingActionRegions: (state, _data: PayloadAction<any>) => {
+    loadingActionRegions: (state) => {
       return {
         ...state,
         fetchingRegions: true,
@@ -249,7 +250,7 @@ export const searchSlice = createSlice({
 });
 
 export const {
-  loadFile,
+  setSearchResults,
   selectionChanged,
   submitPositiveFeedback,
   submitNegativeFeedback,

package/src/Store/Store.ts

@@ -1,21 +1,29 @@
 import { configureStore } from "@reduxjs/toolkit";
 import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 import { combineReducers } from "redux";
-import thunk from "redux-thunk";
 import Auth from "Store/Auth";
-import { AppSettings } from "types";
-import { defaultSettings } from "defaults";
+import {AppSettings, MDSettings} from "types";
 import { getUrlParam } from "utils";
 import Search from "Store/Search";
 import Nyris from "Store/Nyris";
+import {defaultMdSettings, defaultSettings} from "../defaults";
 
 declare var settings: AppSettings;
 
+
+
 let normalizedSettings: AppSettings = {
   ...defaultSettings,
   ...settings,
 };
 
+// spread default settings for material design
+let mdSettings : MDSettings = {
+  ...defaultMdSettings,
+  ...settings.themePage.materialDesign
+}
+normalizedSettings.themePage.materialDesign = mdSettings;
+
 normalizedSettings = {
   ...normalizedSettings,
   apiKey: (getUrlParam("apiKey") as string) || normalizedSettings.apiKey,
@@ -28,7 +36,7 @@ normalizedSettings = {
 
 const reducers = combineReducers({
   auth: Auth,
-  settings: () => normalizedSettings as AppSettings,
+  settings: () => normalizedSettings,
   search: Search,
   nyris: Nyris,
 });
@@ -36,7 +44,6 @@ const reducers = combineReducers({
 export const store = configureStore({
   reducer: reducers,
   devTools: process.env.NODE_ENV !== "production",
-  middleware: [thunk],
 });
 
 export type RootState = ReturnType<typeof store.getState>;

package/src/components/DragDropFile.tsx

@@ -6,7 +6,7 @@ import { makeFileHandler } from "@nyris/nyris-react-components";
 import { useAppDispatch, useAppSelector } from "Store/Store";
 import { serviceImage, serviceImageNonRegion } from "services/image";
 import {
-  loadFile,
+  setSearchResults,
   loadingActionResults,
   searchFileImageNonRegion,
 } from "Store/Search";
@@ -40,7 +40,7 @@ function DragDropFile(props: Props) {
       setLoadingLoadFile(true);
       console.log("fs", fs);
 
-      return serviceImage(fs[0], searchState).then((res: any) => {
+      return serviceImage(fs[0], searchState.settings).then((res: any) => {
         console.log("res?.results", res);
 
         res?.results.map((item: any) => {
@@ -56,29 +56,29 @@ function DragDropFile(props: Props) {
         };
         console.log("payload", payload);
 
-        dispatch(loadFile(payload));
+        dispatch(setSearchResults(payload));
         setLoadingLoadFile(false);
         onChangeLoading(false);
         history.push("/result");
-        return dispatch(showFeedback(""));
+        return dispatch(showFeedback());
       });
     },
   });
 
   const getUrlToCanvasFile = (url: string, position?: number) => {
     onChangeLoading(true);
-    dispatch(showResults(""));
-    dispatch(loadingActionResults(""));
+    dispatch(showResults());
+    dispatch(loadingActionResults());
     if (position) {
       feedbackClickEpic(searchState, position);
     }
 
     if (settings.regions) {
-      serviceImage(url, searchState).then((res) => {
-        dispatch(loadFile(res));
+      serviceImage(url, searchState.settings).then((res) => {
+        dispatch(setSearchResults(res));
         onChangeLoading(false);
         history.push("/result");
-        return dispatch(showFeedback(""));
+        return dispatch(showFeedback());
       });
     } else {
       serviceImageNonRegion(url, searchState, rectCoords).then((res) => {

package/src/components/Feedback.tsx

@@ -19,9 +19,9 @@ const Feedback: React.FC<FeedbackProps> = ({ feedbackState, onClose }) => {
   const onPositiveFeedback = (data: boolean) => {
     feedbackSuccessEpic(state, data);
     if (data) {
-      dispatch(feedbackSubmitPositive(""));
+      dispatch(feedbackSubmitPositive());
     } else {
-      dispatch(feedbackNegative(""));
+      dispatch(feedbackNegative());
     }
   };
 

package/src/components/Footer.tsx

@@ -19,7 +19,7 @@ function FooterComponent(): JSX.Element {
       <Feedback
         feedbackState={feedbackState}
         onClose={() => {
-          return dispatch(hideFeedback(""));
+          return dispatch(hideFeedback());
         }}
       />
     </>

package/src/components/HeaderMd.tsx

@@ -1,17 +1,16 @@
 import React from "react";
 import { Container, Toolbar, Typography, AppBar } from "@material-ui/core";
-import { defaultMdSettings } from "defaults";
 import { useAppSelector } from "Store/Store";
+import {MDSettings} from "../types";
 interface Props {
   settings: any;
 }
 
 function HeaderMdComponent(): JSX.Element {
-  const { settings } = useAppSelector((state: any) => state);
+  const { settings } = useAppSelector((state) => state);
   const { themePage } = settings;
-  const mdSettings: any = themePage.materialDesign.active
-    ? themePage.materialDesign.materialDesign
-    : defaultMdSettings;
+  const mdSettings = themePage.materialDesign as MDSettings;
+
   return (
     <AppBar
       position={"relative"}

package/src/index.tsx

@@ -20,9 +20,10 @@ document.title = window.location.host;
 
 let md: MDSettings = {
   ...defaultMdSettings,
-  ...settings.materialDesign,
+  ...settings.themePage.materialDesign,
 };
 
+
 let theme = createTheme({
   typography: {
     fontFamily: md.customFontFamily,

package/src/modules/LandingPage/{indexApp.tsx → App.tsx}

@@ -1,230 +1,86 @@
 import "App.css";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import Result from "components/Result";
 import ExampleImages from "components/ExampleImages";
 import CategoryFilter from "components/CategoryFilter";
 import PredictedCategories from "components/PredictedCategories";
 import Codes from "components/Codes";
-import {
-  Code,
-  CategoryPrediction,
-  RectCoords,
-  Region,
-  cadExtensions,
-  isCadFile,
-  isImageFile,
-  ImageSearchOptions,
-} from "@nyris/nyris-api";
 import { useDropzone } from "react-dropzone";
 import classNames from "classnames";
 import { Animate, NodeGroup } from "react-move";
-import { AppSettings, MDSettings, CanvasWithId } from "types";
 import {
   makeFileHandler,
-  Capture,
+  Capture, Preview,
 } from "@nyris/nyris-react-components";
 import { Snackbar } from "@material-ui/core";
 import MuiAlert, { AlertProps } from "@material-ui/lab/Alert";
 
-import { useAppDispatch, useAppSelector } from "Store/Store";
-import {
-  loadCadFileLoad,
-  loadFile,
-  loadFileSelectRegion,
-  loadingActionRegions,
-  loadingActionResults,
-  searchFileImageNonRegion,
-} from "Store/Search";
-import {
-  NyrisAppPart,
-  NyrisFeedbackState,
-  showCamera,
-  showFeedback,
-  showResults,
-  showStart,
-} from "Store/Nyris";
-import { serviceImage, serviceImageNonRegion } from "services/image";
-import { findByImage } from "services/findByImage";
-import { debounce, isEmpty } from "lodash";
-import { feedbackClickEpic } from "services/Feedback";
-import Preview from "components/preview/preview";
-export interface AppHandlers {
-  onExampleImageClick: (url: string) => void;
-  onImageClick: (position: number, url: string) => void;
-  onLinkClick: (position: number, url: string) => void;
-  onFileDropped: (file: File) => void;
-  onCaptureComplete: (image: HTMLCanvasElement) => void;
-  onCaptureCanceled: () => void;
-  onSelectFile: (f: File) => void;
-  onCameraClick: () => void;
-  onShowStart: () => void;
-  onSelectionChange: (r: RectCoords) => void;
-  onPositiveFeedback: () => void;
-  onNegativeFeedback: () => void;
-  onCloseFeedback: () => void;
-}
-
-export interface AppProps {
-  search: {
-    results: any[];
-    requestId?: string;
-    duration?: number;
-    categoryPredictions: CategoryPrediction[];
-    codes: Code[];
-    filterOptions: string[];
-    errorMessage?: string;
-    regions: Region[];
-    previewSelection: RectCoords;
-    toastErrorMessage?: string;
-  };
-  previewImage?: CanvasWithId;
-  settings: AppSettings;
-  loading: boolean;
-  showPart: NyrisAppPart;
-  feedbackState: NyrisFeedbackState;
-  handlers: AppHandlers;
-  mdSettings: MDSettings;
-}
+import {AppProps} from "./propsType";
 
 function Alert(props: AlertProps) {
   return <MuiAlert elevation={6} variant="filled" {...props} />;
 }
 
-const LandingPageApp = () => {
-  const dispatch = useAppDispatch();
-  const searchState = useAppSelector((state) => state);
-  const [toastOpen, setToastOpen] = useState(false);
-  const [rectCoords, setRectCoords] = useState<any>(undefined);
-  const { settings, search, nyris } = searchState;
+const LandingPageApp = (props: AppProps) => {
+  const {
+    handlers,
+    showPart,
+    acceptTypes,
+    settings,
+    search,
+    loading,
+    previewImage
+  } = props;
+
   const {
-    errorMessage,
     results,
     requestId,
-    fetchingRegions,
-    fetchingResults,
-    requestImage,
-    regions,
-    selectedRegion,
+    duration,
     categoryPredictions,
     codes,
     filterOptions,
-    duration,
+    errorMessage,
+    regions,
+    previewSelection
   } = search;
-  const { showPart } = nyris;
+
+  const {
+    onExampleImageClick,
+    onImageClick,
+    onLinkClick,
+    onFileDropped,
+    onCaptureComplete,
+    onCaptureCanceled,
+    onSelectFile,
+    onCameraClick,
+    onShowStart,
+    onSelectionChange,
+  } = handlers;
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop: (fs: File[]) => {
-      // console.log("fsssssssss", fs);
-      serviceImage(fs[0], searchState).then((res) => {
-        dispatch(loadFile(res));
-        return dispatch(showFeedback(""));
-      });
-      // return dispatch(loadFile(fs[0]));
+      onFileDropped(fs[0]);
     },
   });
-  // const minPreviewHeight = 400;
-  // const halfOfTheScreenHeight = Math.floor(window.innerHeight * 0.45);
-  // const maxPreviewHeight = Math.max(minPreviewHeight, halfOfTheScreenHeight);
 
-  useEffect(() => {
-    if (isEmpty(rectCoords)) {
-      return;
-    }
-    onSearchOffersForImage(rectCoords);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rectCoords]);
-
-  const acceptTypes = ["image/*"]
-    .concat(settings.cadSearch ? cadExtensions : [])
-    .join(",");
 
+  const [toastOpen, setToastOpen] = useState(false);
   useEffect(() => {
     if (errorMessage !== "") {
       setToastOpen(true);
     }
   }, [errorMessage]);
 
-  function scrollTop() {
-    // TODO might require polyfill for ios and edge
-    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
-  }
-
-  const onShowStart = () => {
-    dispatch(showStart(""));
-    scrollTop();
-  };
-
-  const onLinkClick = (_position: number, url: string) => {
-    feedbackClickEpic(searchState, _position);
-    if (url) {
-      window.open(url);
-    }
-  };
-  // TODO: search image file home page
-  const isCheckImageFile = (file: any) => {
-    dispatch(showResults(""));
-    dispatch(loadingActionResults(""));
-    dispatch(showFeedback(""));
-    if (isImageFile(file) || typeof file === "string") {
-      return serviceImage(file, searchState).then((res) => {
-        return dispatch(loadFile(res));
-      });
-    }
-    if (isCadFile(file)) {
-      return dispatch(loadCadFileLoad(file));
-    }
-  };
-  //
-
-  const getUrlToCanvasFile = (url: string, position?: number) => {
-    dispatch(showResults(""));
-    dispatch(loadingActionResults(""));
-    if (position) {
-      feedbackClickEpic(searchState, position);
-    }
-
-    if (settings.regions) {
-      serviceImage(url, searchState).then((res) => {
-        dispatch(loadFile(res));
-        return dispatch(showFeedback(""));
-      });
-    } else {
-      serviceImageNonRegion(url, searchState, rectCoords).then((res) => {
-        dispatch(searchFileImageNonRegion(res));
-      });
-    }
-  };
-
-  const handlerRectCoords = debounce((value) => {
-    return setRectCoords(value);
-  }, 1200);
-
-  const debounceRectCoords = useCallback(
-    (value) => handlerRectCoords(value),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-
-  const onSearchOffersForImage = (r: RectCoords) => {
-    const { canvas }: any = requestImage;
-    let options: ImageSearchOptions = {
-      cropRect: r,
-    };
-    dispatch(loadingActionRegions(""));
-    return findByImage(canvas, options, settings).then((res) => {
-      dispatch(loadFileSelectRegion(res));
-      return dispatch(showFeedback(""));
-    });
-  };
+  const minPreviewHeight = 400;
+  const halfOfTheScreenHeight = Math.floor(window.innerHeight * 0.45);
+  const maxPreviewHeight = Math.max(minPreviewHeight, halfOfTheScreenHeight);
 
   return (
-    <div>
-      {showPart === "camera" && (
+      <div>
+        {showPart === "camera" && (
         <Capture
-          onCaptureComplete={(image: HTMLCanvasElement) => {
-            return isCheckImageFile(image);
-          }}
-          onCaptureCanceled={() => dispatch(showStart)}
+          onCaptureComplete={ onCaptureComplete }
+          onCaptureCanceled={ onCaptureCanceled }
           useAppText="Use default camera app"
         />
       )}
@@ -253,7 +109,7 @@ const LandingPageApp = () => {
                 className="inputfile"
                 accept="image/*"
                 capture="environment"
-                onClick={() => dispatch(showCamera)}
+                onClick={() => onCameraClick()}
               />
               <input
                 type="file"
@@ -270,9 +126,7 @@ const LandingPageApp = () => {
                 id="select_file"
                 className="inputfile"
                 accept={acceptTypes}
-                onChange={makeFileHandler((e) => {
-                  return isCheckImageFile(e);
-                })}
+                onChange={makeFileHandler(onSelectFile)}
               />
               <div className="onDesktop">
                 Drop an image
@@ -303,9 +157,7 @@ const LandingPageApp = () => {
             </section>
             <ExampleImages
               images={settings.exampleImages}
-              onExampleImageClicked={(url: string) => {
-                return getUrlToCanvasFile(url);
-              }}
+              onExampleImageClicked={onExampleImageClick}
             />
           </div>
         </div>
@@ -348,7 +200,7 @@ const LandingPageApp = () => {
           </div>
         )}
         <Animate
-          show={fetchingRegions || fetchingResults}
+          show={loading}
           start={{ opacity: 0.0 }}
           enter={{ opacity: [1.0], timing: { duration: 300 } }}
           leave={{ opacity: [0.0], timing: { duration: 300 } }}
@@ -359,40 +211,17 @@ const LandingPageApp = () => {
             </div>
           )}
         </Animate>
-        {/* // TODO:Box Preview image. */}
-        {settings.preview && requestImage && (
+        {settings.preview && previewImage && (
           <div className="preview">
-            {/* <Preview
-              key={requestImage?.id}
+            <Preview
+              key={previewImage?.id}
+              onSelectionChange={ onSelectionChange }
+              image={previewImage?.canvas}
+              selection={previewSelection}
+              regions={regions}
               maxWidth={document.body.clientWidth}
               maxHeight={maxPreviewHeight}
               dotColor="#4C8F9F"
-              onSelectionChange={(r: RectCoords) => {
-                dispatch(selectionChanged(r));
-                return debounceRectCoords(r);
-              }}
-              regions={regions}
-              selection={selectedRegion}
-              image={requestImage.canvas}
-            /> */}
-            <Preview
-              key={requestImage?.id}
-              onSelectionChange={(r: RectCoords) => {
-                debounceRectCoords(r);
-                return;
-              }}
-              image={requestImage?.canvas}
-              initialRegion={
-                !selectedRegion
-                  ? regions[0]
-                    ? regions[0]
-                    : { x1: 0, x2: 1, y1: 0, y2: 1 }
-                  : selectedRegion
-              }
-              regions={regions}
-              maxWidth={400}
-              maxHeight={500}
-              dotColor="#FBD914"
             />
           </div>
         )}
@@ -421,9 +250,7 @@ const LandingPageApp = () => {
                     key={key}
                     noImageUrl={settings.noImageUrl}
                     template={settings.resultTemplate}
-                    onImageClick={(_pos, url) => {
-                      return getUrlToCanvasFile(url, _pos);
-                    }}
+                    onImageClick={onImageClick}
                     onLinkClick={onLinkClick}
                     result={data}
                     style={{
@@ -438,8 +265,7 @@ const LandingPageApp = () => {
 
           {(results.length === 0 &&
             showPart === "results" &&
-            fetchingRegions) ||
-            (fetchingResults && (
+            !loading && (
               <div className="noResults">
                 We did not find anything{" "}
                 <span role="img" aria-label="sad face">