@nyris/nyris-webapp 0.2.4 → 0.3.1

package/src/AppMD.tsx

@@ -1,320 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,135 +0,0 @@
-import {CanvasWithId} from "../types";
-import {Code, RectCoords, Region, selectFirstCenteredRegion} 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  }
-    | { 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}
-
-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[]
-}
-
-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: []
-};
-
-
-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 submitPositiveFeedback = () : SearchAction => ({ type: 'FEEDBACK_SUBMIT_POSITIVE'});
-export const submitNegativeFeedback = () : SearchAction => ({ type: 'FEEDBACK_SUBMIT_NEGATIVE'});
-
-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
-            };
-        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 "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
-            }
-    }
-    return state;
-};

package/src/epics/index.ts

@@ -1,133 +0,0 @@
-import {combineEpics, ofType} from "redux-observable";
-import {debounceTime, delay, ignoreElements, map, switchMap, tap, withLatestFrom} from "rxjs/operators";
-import {showFeedback, showResults} from "../actions/nyrisAppActions";
-import {EpicConf} from "./types";
-import feedbackEpics from "./feedback";
-import searchEpics from "./search";
-import {searchOffersForImage, searchOffersForCad, searchRegions} from "../actions/searchActions";
-import {AppAction} from "../types";
-import {selectFirstCenteredRegion} from "@nyris/nyris-api";
-
-
-
-const historyEpic: EpicConf = (action$, state$, {history}) => action$.pipe(
-    ofType('SHOW_RESULTS', 'SHOW_START'),
-    tap((action) => {
-        let { type } = action;
-        if (type === 'SHOW_RESULTS' && history.location.pathname !== '/results') {
-            history.push('/results');
-        }
-        if (type === 'SHOW_START' && history.location.pathname !== '/') {
-            history.goBack();
-        }
-    }),
-    ignoreElements()
-);
-
-const onSearchSuccessShowResults: EpicConf = (action$) => action$.pipe(
-    ofType('SEARCH_REQUEST_SUCCEED'),
-    map(showResults)
-);
-
-const onSearchSuccessRedirectToSite: EpicConf = (action$, state$) => action$.pipe(
-    ofType('SEARCH_REQUEST_SUCCEED'),
-    withLatestFrom(state$),
-    tap(([action, {settings}]) => {
-        if (action.type !== 'SEARCH_REQUEST_SUCCEED' || !action.results || action.results.length !== 1) {
-            return;
-        }
-
-        const firstLink = action.results[0].l;
-        const instantRedirectPatterns = settings.instantRedirectPatterns;
-        if (!instantRedirectPatterns.find(r => new RegExp(r).test(firstLink))) {
-            return;
-        }
-        window.location.href = firstLink;
-    }),
-    ignoreElements()
-);
-
-const onSearchSuccessShowFeedbackDelayed: EpicConf = (action$) => action$.pipe(
-    ofType('SEARCH_REQUEST_SUCCEED'),
-    delay(3000),
-    map(showFeedback)
-);
-
-
-const startSearchOnImageLoaded: EpicConf = (action$, state$) => action$.pipe(
-    ofType('IMAGE_LOADED'),
-    withLatestFrom(state$),
-    switchMap(async ([action, {settings}]) : Promise<AppAction> => {
-        if (action.type !== 'IMAGE_LOADED') {
-            throw new Error(`Wrong action type ${action.type}`);
-        }
-
-        let { image } = action;
-
-        if (settings.regions) {
-            return searchRegions(image.canvas);
-        }
-        return searchOffersForImage(image.canvas);
-    })
-);
-
-const startSearchOnCadLoaded: EpicConf = (action$, state$) => action$.pipe(
-    ofType('CAD_LOADED'),
-    withLatestFrom(state$),
-    switchMap(async ([action, {settings}]) : Promise<AppAction> => {
-        if (action.type !== 'CAD_LOADED') {
-            throw new Error(`Wrong action type ${action.type}`);
-        }
-        let { file } = action;
-        return searchOffersForCad(file);
-    })
-);
-
-const startSearchOnRegionsSuccessful: EpicConf = (action$, state$) => action$.pipe(
-    ofType('REGION_REQUEST_SUCCEED'),
-    withLatestFrom(state$),
-    switchMap(async ([action, { search: { requestImage}}]) : Promise<AppAction> => {
-        if (action.type !== 'REGION_REQUEST_SUCCEED') {
-            throw new Error(`Wrong action type ${action.type}`);
-        }
-        if (!requestImage) {
-            throw new Error(`No requestImage`);
-        }
-        let { regions } = action;
-
-        let selection = selectFirstCenteredRegion(regions, 0.3, {x1: 0, x2: 1, y1: 0, y2: 1});
-        return searchOffersForImage(requestImage.canvas, selection);
-    })
-);
-
-const startSearchOnRegionChange: EpicConf = (action$, state$) => action$.pipe(
-    ofType('REGION_CHANGED'),
-    debounceTime(1200),
-    withLatestFrom(state$),
-    switchMap(async ([action, { search: { requestImage}}]) : Promise<AppAction> => {
-        if (action.type !== 'REGION_CHANGED') {
-            throw new Error(`Wrong action type ${action.type}`);
-        }
-        if (!requestImage) {
-            throw new Error(`No requestImage`);
-        }
-        let { normalizedRect } = action;
-        return searchOffersForImage(requestImage.canvas, normalizedRect);
-    })
-);
-
-
-const rootEpic = combineEpics(
-    searchEpics,
-    feedbackEpics,
-    historyEpic,
-    startSearchOnImageLoaded,
-    startSearchOnCadLoaded,
-    startSearchOnRegionsSuccessful,
-    startSearchOnRegionChange,
-    onSearchSuccessShowResults,
-    onSearchSuccessShowFeedbackDelayed,
-    onSearchSuccessRedirectToSite
-);
-
-export default rootEpic;