@nyris/nyris-webapp 0.3.4 → 0.3.9

package/src/AppMD.tsx

@@ -0,0 +1,320 @@
+import {AppProps} from "./App";
+import {useDropzone} from "react-dropzone";
+import {
+    makeStyles,
+    AppBar,
+    Button, Card, CardActions, CardContent,
+    CardMedia, CircularProgress,
+    Container,
+    CssBaseline, Fab,
+    Grid, Hidden,
+    Link,
+    Toolbar,
+    Typography
+} from "@material-ui/core";
+import {PhotoCamera, ArrowBack, Image} from "@material-ui/icons";
+import Icon from "@material-ui/core/Icon";
+import * as React from "react";
+import {NodeGroup} from "react-move";
+import classNames from 'classnames';
+import {Capture, Preview} from "@nyris/nyris-react-components";
+import {cadExtensions} from "@nyris/nyris-api";
+
+
+const useStyles = makeStyles(theme => ({
+    icon: {
+        marginRight: theme.spacing(2),
+    },
+    heroContent: {
+        backgroundColor: theme.palette.background.paper,
+        padding: theme.spacing(8, 0, 6),
+        transition: 'all 300ms',
+        overflow: 'hidden',
+        height: 500
+    },
+    heroContentClosed: {
+        height: 0,
+        padding: 0
+    },
+    heroButtons: {
+        marginTop: theme.spacing(4),
+    },
+    cardGrid: {
+        paddingTop: theme.spacing(8),
+        paddingBottom: theme.spacing(8),
+        minHeight: 600,
+        overflow: 'hidden',
+        transition: 'all 300ms',
+    },
+    cardGridCollapsed: {
+        height: 0,
+        opacity: 0,
+        minHeight: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
+    },
+    card: {
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    cardMedia: {
+        paddingTop: '56.25%', // 16:9
+        backgroundSize: 'contain'
+    },
+    cardContent: {
+        flexGrow: 1,
+        paddingBottom: 0
+    },
+    footer: {
+        backgroundColor: theme.palette.background.paper,
+        padding: theme.spacing(6),
+    },
+    withElipsis: {
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap'
+    },
+    loading: {
+        margin: theme.spacing(2),
+    },
+    fabContainer: {
+        position: 'fixed',
+        bottom: theme.spacing(2),
+
+    },
+    fab: {
+        marginLeft: theme.spacing(2),
+    },
+}));
+
+const makeFileHandler = (action: any) => (e: any) => {
+    let file = (e.dataTransfer && e.dataTransfer.files[0]) || e.target.files[0];
+    if (e.target && e.target.value) {
+        e.target.value = "";
+    }
+
+    if (file) {
+        action(file);
+    }
+};
+
+function Copyright() {
+    return (
+
+        <Typography variant="body2" color="textSecondary" align="center">
+            {'Powered by '}
+            <Link color="inherit" href="https://nyris.io/" component='a' target="_blank">
+                nyris.io
+            </Link>
+        </Typography>
+    );
+}
+
+
+const AppMD: React.FC<AppProps> = ({settings, handlers, showPart, previewImage, loading, search: {results, regions, previewSelection, requestId, duration}, mdSettings}) => {
+    const classes = useStyles();
+    const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop: (fs: File[]) => handlers.onFileDropped(fs[0])});
+
+    const minPreviewHeight = 400;
+    const halfOfTheScreenHeight = Math.floor(window.innerHeight * 0.45);
+    const maxPreviewHeight = Math.max(minPreviewHeight, halfOfTheScreenHeight);
+    const acceptTypes =
+        [ 'image/*' ].concat(
+            settings.cadSearch ? cadExtensions : []
+        ).join(',');
+
+    return (
+        <React.Fragment>
+            {mdSettings.resultLinkIcon && <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />}
+            <CssBaseline/>
+            {showPart === 'camera' &&
+            <Capture onCaptureComplete={handlers.onCaptureComplete} onCaptureCanceled={handlers.onCaptureCanceled}
+                      useAppText='Use default camera app'/>}
+            <AppBar position={"relative"} style={{backgroundColor: mdSettings.appBarCustomBackgroundColor}}>
+
+                <Container maxWidth='md' style={{flexDirection: 'row', display: 'flex'}}>
+                    <img src={mdSettings.appBarLogoUrl} style={{height: '2em', minHeight: '64px', display: 'flex'}} alt="Logo"/>
+                    <Toolbar component="span">
+                        <Typography style={{color: mdSettings.appBarCustomTextColor}}>
+                            { mdSettings.appBarTitle }
+                        </Typography>
+                    </Toolbar>
+                </Container>
+            </AppBar>
+
+            <main>
+                <div
+                    className={classNames(classes.heroContent, showPart === 'results' ? classes.heroContentClosed : null)}>
+                    <Container maxWidth='md'>
+                        <div>
+                            <Hidden mdUp>
+                                <div style={{textAlign: 'center'}}>
+                                    <PhotoCamera style={{fontSize: '20em', color: '#cccccc'}}/>
+                                </div>
+                                <div style={{textAlign: 'center'}}>
+                                    <Button variant={"contained"} color={"primary"} onClick={handlers.onCameraClick}>Take
+                                        a
+                                        picture</Button>
+                                </div>
+                                <div style={{textAlign: 'center'}}>
+                                    <Typography>
+                                        or
+                                    </Typography>
+                                </div>
+                                <div style={{textAlign: 'center'}}>
+                                    <input
+                                        accept={acceptTypes}
+                                        id="raised-button-file"
+                                        type="file"
+                                        onChange={makeFileHandler(handlers.onSelectFile)}
+                                        style={{width: '.1px', height: '.1px', overflow: 'hidden', opacity: 0}}
+                                    />
+                                    <label htmlFor="raised-button-file">
+                                        <Button variant={"contained"} color={"primary"} component="span">
+                                            Select a file
+                                        </Button>
+                                    </label>
+                                </div>
+                            </Hidden>
+                            <Hidden smDown>
+                                <div style={{borderStyle: 'dashed', borderWidth: 5, borderColor: isDragActive ? '#ccc' : '#eee', borderRadius: 10, padding: 10, paddingBottom: 30}}
+                                     {...getRootProps({ onClick: e => { e.stopPropagation() }}) }>
+                                    <div style={{textAlign: 'center'}}>
+                                        <Image style={{fontSize: '20em', color: '#cccccc'}}/>
+                                    </div>
+                                    <div style={{textAlign: 'center'}}>
+                                        <Typography variant='body2'>
+                                            DROP AN IMAGE
+                                        </Typography>
+                                    </div>
+                                    <div style={{textAlign: 'center'}}>
+                                        <Typography variant="subtitle2">
+                                            or
+                                        </Typography>
+                                    </div>
+                                    <div style={{textAlign: 'center'}}>
+                                        <input
+                                            accept={acceptTypes}
+                                            id="raised-button-file"
+                                            type="file"
+                                            {...getInputProps()}
+                                            onChange={makeFileHandler(handlers.onSelectFile)}
+                                            style={{width: '.1px', height: '.1px', overflow: 'hidden', opacity: 0}}
+                                        />
+                                        <label htmlFor="raised-button-file">
+                                            <Button variant={"contained"} color={"primary"} component="span">
+                                                Select an image
+                                            </Button>
+                                        </label>
+                                    </div>
+                                </div>
+                            </Hidden>
+                        </div>
+                    </Container>
+                </div>
+                <Container className={classNames(classes.cardGrid, showPart !== 'results' && classes.cardGridCollapsed)}
+                           maxWidth="md">
+
+                    { previewImage &&
+                    <Card style={{marginBottom: '4em'}} raised={true}>
+                        <Preview key={previewImage.id}
+                                 maxWidth={document.body.clientWidth}
+                                 maxHeight={maxPreviewHeight}
+                                 dotColor={mdSettings.primaryColor}
+                                 onSelectionChange={handlers.onSelectionChange} regions={regions}
+                                 selection={previewSelection} image={previewImage.canvas}/>
+                    </Card>
+                    }
+
+                    {loading && <div style={{textAlign: 'center'}}>
+                        <CircularProgress className={classes.loading}/>
+                    </div>}
+
+                    <Grid container spacing={4}>
+                        <NodeGroup data={results}
+                                   keyAccessor={r => r.position + r.sku}
+                                   start={(r, i) => ({opacity: 0, translateX: -100})}
+                                   enter={(r, i) => ({
+                                       opacity: [1],
+                                       translateX: [0],
+                                       timing: {delay: i * 100, duration: 300}
+                                   })}>
+                            {rs =>
+                                <>
+                                    {rs.map(({key, data: result, state}) =>
+                                        <Grid item key={key} xs={12} sm={4} md={3}>
+                                            <Card className={classes.card} style={{
+                                                opacity: state.opacity,
+                                                position: 'relative',
+                                                transform: `translateX(${state.translateX}%)`
+                                            }}>
+                                                <CardMedia
+                                                    className={classes.cardMedia}
+                                                    image={(result.img && result.img.url) || settings.noImageUrl}
+                                                    title={result.title}
+                                                />
+                                                <CardContent className={classes.cardContent}>
+                                                    <Typography gutterBottom variant="subtitle2" component="h5"
+                                                                className={classes.withElipsis}>
+                                                        {result[mdSettings.resultFirstRowProperty]}
+                                                    </Typography>
+                                                    <Typography variant="body2" className={classes.withElipsis}>
+                                                        {result[mdSettings.resultSecondRowProperty]}
+                                                    </Typography>
+                                                </CardContent>
+                                                {result.l &&
+                                                <CardActions>
+                                                    <Button variant="outlined" style={{marginLeft: 'auto'}}
+                                                            size="small" color="primary"
+                                                            onClick={() => handlers.onLinkClick(result.position, result.l)}
+                                                            onAuxClick={() => handlers.onLinkClick(result.position, result.l)} >
+                                                        { mdSettings.resultLinkIcon && <React.Fragment>
+                                                            <Icon>{ mdSettings.resultLinkIcon }</Icon>
+                                                            {' '}
+                                                        </React.Fragment> }
+                                                        {mdSettings.resultLinkText}
+                                                    </Button>
+                                                </CardActions>
+                                                }
+                                            </Card>
+                                        </Grid>
+                                    )}
+                                </>
+                            }
+
+                        </NodeGroup>
+
+                    </Grid>
+
+                    {results.length === 0 && showPart === 'results' && !loading && (
+                        <Typography variant="h3" align="center">We did not find anything</Typography>
+                    )}
+
+
+                </Container>
+                {showPart !== 'start' &&
+                <Container maxWidth='lg'>
+                    <div className={classes.fabContainer}>
+                        <Fab aria-label='back' className={classes.fab} color='primary' onClick={handlers.onShowStart}>
+                            <ArrowBack/>
+                        </Fab>
+                    </div>
+                </Container>
+                }
+
+            </main>
+
+            <footer className={classes.footer}>
+
+                <Typography variant="subtitle1" align="center" color="textSecondary">
+                    {requestId && showPart === 'results' && <div style={{textAlign: 'center', fontSize: '0.7em', paddingTop: '0.8em'}}>Request
+                        identifier {requestId}</div>}
+                </Typography>
+                <Copyright/>
+            </footer>
+        </React.Fragment>
+    );
+};
+
+export default AppMD;

package/src/actions/nyrisAppActions.ts

@@ -0,0 +1,76 @@
+import {AppAction} from "../types";
+
+
+export type NyrisAppPart = 'start' | 'camera' | 'results';
+export type NyrisFeedbackState = 'hidden' | 'question' | 'positive' | 'negative';
+
+
+export interface NyrisAppState {
+    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}
+
+
+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'
+};
+
+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

@@ -0,0 +1,217 @@
+import {CanvasWithId} from "../types";
+import {Code, RectCoords, Region, selectFirstCenteredRegion,Filter} from '@nyris/nyris-api';
+
+export type ImageSourceType =
+    | { 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'}
+
+
+interface CategoryPrediction {
+    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[]>
+}
+
+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 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 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;
+};
+
+ 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;
+}

package/src/components/ExampleImages.tsx

@@ -1,39 +1,24 @@
-import { Typography } from "@material-ui/core";
-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">
-      <Typography className="title-box text-center">
-        You can also try one of these pictures:
-      </Typography>
-      <div className="exampleImages d-flex justify-center">
-        <div className="exImagesWrap">
-          {images.map((i) => {
-            return (
-              <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;