@nyris/nyris-webapp 0.3.3 → 0.3.6

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/Demo2.tsx

@@ -0,0 +1,220 @@
+import React, { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import { Animate, NodeGroup } from "react-move";
+import { useDropzone} from "react-dropzone";
+import {
+  Box,
+  Snackbar
+} from "@material-ui/core";
+import { Alert } from "@material-ui/lab";
+import classNames from "classnames";
+import { loadFilters } from "./actions/searchActions";
+import {AppProps} from "./App";
+import Result from "./components/Result";
+import Sidebar from "./components/Sidebar";
+import Header from "./components/Header";
+import Feedback from "./components/Feedback";
+import CategoryFilter from "./components/CategoryFilter";
+import Codes from "./components/Codes";
+import PredictedCategories from "./components/PredictedCategories";
+import ExampleImages from "./components/ExampleImages";
+import {makeFileHandler, Capture, Preview} from "@nyris/nyris-react-components";
+import { RectCoords, cadExtensions} from "@nyris/nyris-api";
+
+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
+}
+
+const Demo2: React.FC<AppProps> = ({
+    search: {results, regions, previewSelection, requestId, duration, errorMessage, filterOptions, categoryPredictions, codes, toastErrorMessage, filters},
+    showPart, settings, handlers, loading, previewImage, feedbackState
+}) => {
+    
+    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 [toastOpen, setToastOpen] = useState(false);
+    const dispatch = useDispatch();
+
+    const acceptTypes =[ 'image/*' ].concat( settings.cadSearch ? cadExtensions : [] ).join(',');
+
+
+    useEffect(() => {
+        if (toastErrorMessage !== '') {
+            setToastOpen(true);
+        }
+    }, [toastErrorMessage])
+ 
+    useEffect(() =>{
+    dispatch(loadFilters());
+    }, [dispatch])
+    
+  return (
+    <React.Fragment>
+      <Header/>
+      <div className="wrapperBody">    
+      <Sidebar filters={filters}/>
+        
+      <div className="mainContent">
+      {showPart === 'camera' &&
+        <Capture onCaptureComplete={handlers.onCaptureComplete} onCaptureCanceled={handlers.onCaptureCanceled}
+                  useAppText='Use default camera app'/>}
+
+              
+        <div className={classNames('headSection', {hidden: showPart === 'results'})} id="headSection">           
+            <div   {...getRootProps({
+                onClick: e => {
+                    e.stopPropagation();
+                }
+            })} className={classNames('wrapper', 'dragAndDropActionArea', {'fileIsHover': isDragActive})}>
+             
+                <div className={classNames('contentWrap')}>
+                <Box display="flex" flexDirection="column"  justifyContent="center" alignItems="center"  minHeight="100vh">
+                <section className="uploadImage">
+                        <input type="button" name="file" id="capture" className="inputfile" accept="image/*"
+                               capture="environment" onClick={handlers.onCameraClick}/>
+                        <input type="file" name="file" id="capture_file" className="inputfile" accept={acceptTypes}
+                               capture="environment"/>
+                        <input {...getInputProps()} type="file" name="file" id="select_file" className="inputfile"
+                               accept={acceptTypes}
+                               onChange={makeFileHandler(handlers.onSelectFile)}
+                        />
+                        <div className="onDesktop">
+                            Drop an image
+                            <div className="smallText">or</div>
+                        </div>
+                        <div className="onMobile camIcon">
+                            <img src="./images/ic_cam_large.svg" alt="Camera"/>
+                        </div>
+                        <label htmlFor="capture" className="btn primary onMobile"
+                               style={{marginBottom: '2em', width: '22em'}}>
+                            <span className="onMobile">Take a picture</span>
+                        </label>
+                        <br/>
+                        <label htmlFor="select_file" className="btn primary" style={{width: '22em'}}>
+                            <span>Select a file</span>
+                        </label>
+                        <label htmlFor="capture" className="mobileUploadHandler onMobile"/>
+                </section>
+                <ExampleImages images={settings.exampleImages} onExampleImageClicked={handlers.onExampleImageClick}/>
+                  
+                </Box>
+                </div>
+            </div>
+            
+            <div className="headerSeparatorTop"/>
+            <div className="headerSeparatorBack"/>
+            <div className={classNames('tryDifferent', {hidden: showPart !== 'results'})}
+                 onClick={handlers.onShowStart}>
+                <div className="icIcon">
+                </div>
+                <div className="textDesc"> Try a different image</div>
+                <br style={{clear: 'both'}}/>
+            </div>
+        </div>
+        
+         <section className={classNames({hideResults: showPart !== 'results'},'results', {resultsActive: showPart === 'results'}, (results.length === 1 ? 'singleProduct' : 'multipleProducts'))}>
+            {errorMessage &&
+            <div className="errorMsg">
+                {errorMessage}
+                <div style={{textAlign: 'center', fontSize: '0ß.7em', paddingTop: '0.8em'}}><span>Make sure to include the request ID when reporting a problem: {requestId}</span>
+                </div>
+            </div>
+            }
+            <Animate show={loading} start={{opacity: 0.0}} enter={{opacity: [1.0], timing: {duration: 300}}}
+                     leave={{opacity: [0.0], timing: {duration: 300}}}>
+                {s =>
+                    <div className="loadingOverlay" style={{...s}}>
+                        <div className="loading"/>
+                    </div>
+                }
+            </Animate>
+            {settings.preview && previewImage &&
+            <div className="preview">
+                <Preview key={previewImage.id}
+                         maxWidth={document.body.clientWidth} maxHeight={maxPreviewHeight}
+                         dotColor="#4C8F9F"
+                         onSelectionChange={handlers.onSelectionChange} regions={regions}
+                         selection={previewSelection} image={previewImage.canvas}/>
+            </div>
+            }
+            <div className="predicted-categories">
+                <PredictedCategories cs={categoryPredictions}/>
+            </div>
+            <div className="predicted-categories">
+                <Codes codes={codes}/>
+            </div>
+            <CategoryFilter cats={filterOptions}/>
+
+            <div className="wrapper">
+                <NodeGroup data={results}
+                           keyAccessor={r => 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, state}) => <Result
+                        key={key}
+                        noImageUrl={settings.noImageUrl}
+                        template={settings.resultTemplate}
+                        onImageClick={handlers.onImageClick}
+                        onLinkClick={handlers.onLinkClick}
+                        result={data}
+                        style={{opacity: state.opacity, transform: `translateX(${state.translateX}%)`}}/>)}</>}
+                </NodeGroup>
+
+                {results.length === 0 && showPart === 'results' && !loading && (
+
+                    <div className="noResults">We did not find anything <span role="img"
+                                                                              aria-label="sad face">😕</span></div>
+                )}
+
+                <br style={{clear: 'both'}}/>
+
+                {duration && showPart === 'results' && (<div style={{textAlign: 'center', fontSize: '0.7em', paddingTop: '0.8em'}}>Search
+                    took {duration.toFixed(2)} seconds</div>)}
+
+                {requestId && showPart === 'results' && <div style={{textAlign: 'center', fontSize: '0.7em', paddingTop: '0.8em'}}>Request
+                    identifier {requestId}</div>}
+            </div>
+        </section>
+
+        <Snackbar open={toastOpen} autoHideDuration={3000} onClose={() => setToastOpen(false)}>
+            <Alert onClose={() => setToastOpen(false)} severity="error">
+                {toastErrorMessage}
+            </Alert>
+        </Snackbar> 
+       
+      </div>
+        </div> 
+        <section className="footnote">
+            <div className="wrapper">
+                © 2017 - 2019 <a href="https://nyris.io">nyris GmbH</a> - All rights reserved - <a
+                href="https://nyris.io/imprint/">Imprint</a>
+            </div>
+        </section>
+        <Feedback feedbackState={feedbackState} onPositiveFeedback={handlers.onPositiveFeedback}
+                  onNegativeFeedback={handlers.onNegativeFeedback} onClose={handlers.onCloseFeedback}/>
+    
+    </React.Fragment>
+  );
+}
+
+export default Demo2;

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;
+    }
+}