From ebf473bc78f876cc5ba79f58b452691e1673417c Mon Sep 17 00:00:00 2001 From: Maddie Kasula Date: Thu, 21 Nov 2019 20:46:45 -0800 Subject: [PATCH 1/9] Add recallFish to state --- src/demo/models/pond.js | 21 +++++++++++++-------- src/demo/state.js | 2 ++ 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/src/demo/models/pond.js b/src/demo/models/pond.js index f67ee09e..f9b5a610 100644 --- a/src/demo/models/pond.js +++ b/src/demo/models/pond.js @@ -6,14 +6,21 @@ import constants, {ClassType} from '../constants'; export const init = async () => { const state = getState(); let fishWithConfidence = await predictAllFish(state); - setState({totalPondFish: fishWithConfidence.length}); fishWithConfidence = _.sortBy(fishWithConfidence, ['confidence']); - const pondFishWithConfidence = fishWithConfidence.splice( + const fishByClassType = _.groupBy( + fishWithConfidence, + fish => fish.getResult().predictedClassId + ); + + let pondFish = fishByClassType[ClassType.Like]; + setState({totalPondFish: pondFish.length}); + pondFish = pondFish.splice(0, constants.maxPondFish); + const recallFish = fishByClassType[ClassType.Dislike].splice( 0, constants.maxPondFish ); - arrangeFish(pondFishWithConfidence); - setState({pondFish: pondFishWithConfidence}); + arrangeFish(pondFish); + setState({pondFish, recallFish}); }; const predictAllFish = state => { @@ -21,10 +28,8 @@ const predictAllFish = state => { let fishWithConfidence = []; state.fishData.map((fish, index) => { state.trainer.predict(fish).then(res => { - if (res.predictedClassId === ClassType.Like) { - fish.setResult(res); - fishWithConfidence.push(fish); - } + fish.setResult(res); + fishWithConfidence.push(fish); if (index === state.fishData.length - 1) { resolve(fishWithConfidence); diff --git a/src/demo/state.js b/src/demo/state.js index ef241f85..664c9d08 100644 --- a/src/demo/state.js +++ b/src/demo/state.js @@ -5,6 +5,8 @@ const initialState = { currentMode: null, fishData: [], pondFish: [], + recallFish: [], + showRecallFish: false, totalPondFish: null, backgroundCanvas: null, canvas: null, From cf8bf54b5fc1fb464b9f35f607c6041908e40ae6 Mon Sep 17 00:00:00 2001 From: Maddie Kasula Date: Fri, 22 Nov 2019 10:01:35 -0800 Subject: [PATCH 2/9] Add 'recall' button to toggle pond/recall fish --- src/demo/models/pond.js | 2 +- src/demo/renderer.js | 8 ++++---- src/demo/ui.jsx | 10 ++++++++++ 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/demo/models/pond.js b/src/demo/models/pond.js index f9b5a610..f2a2f0f3 100644 --- a/src/demo/models/pond.js +++ b/src/demo/models/pond.js @@ -39,7 +39,7 @@ const predictAllFish = state => { }); }; -const arrangeFish = fishes => { +export const arrangeFish = fishes => { let fishPositions = formatArrangement(); fishes.forEach(fish => { diff --git a/src/demo/renderer.js b/src/demo/renderer.js index df2c17ab..10684e0a 100644 --- a/src/demo/renderer.js +++ b/src/demo/renderer.js @@ -495,12 +495,12 @@ const drawPredictBot = state => { // Draw the fish for pond mode. const drawPondFishImages = () => { - const canvas = getState().canvas; - const ctx = canvas.getContext('2d'); - + const state = getState(); + const ctx = state.canvas.getContext('2d'); + const fishes = state.showRecallFish ? state.recallFish : state.pondFish; const fishBounds = []; - getState().pondFish.forEach(fish => { + fishes.forEach(fish => { const pondClickedFish = getState().pondClickedFish; const pondClickedFishUs = pondClickedFish && fish.id === pondClickedFish.id; diff --git a/src/demo/ui.jsx b/src/demo/ui.jsx index afd23cae..eb47f5fc 100644 --- a/src/demo/ui.jsx +++ b/src/demo/ui.jsx @@ -7,6 +7,7 @@ import constants, {AppMode, Modes} from './constants'; import {toMode} from './toMode'; import {$time, currentRunTime, finishMovement, resetTraining} from './helpers'; import {onClassifyFish} from './models/train'; +import {arrangeFish} from './models/pond'; import colors from './colors'; import aiBotClosed from '../../public/images/ai-bot/ai-bot-closed.png'; import counterIcon from '../../public/images/data.png'; @@ -927,6 +928,15 @@ class Pond extends React.Component { return ( this.onPondClick(e)}> + {state.canSkipPond && (
From cfdc3a527445619d6377f7e0b222386d10391447 Mon Sep 17 00:00:00 2001 From: Maddie Kasula Date: Fri, 22 Nov 2019 10:02:00 -0800 Subject: [PATCH 3/9] Simplify onClick call --- src/demo/ui.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/demo/ui.jsx b/src/demo/ui.jsx index eb47f5fc..1d425855 100644 --- a/src/demo/ui.jsx +++ b/src/demo/ui.jsx @@ -927,7 +927,7 @@ class Pond extends React.Component { const state = getState(); return ( - this.onPondClick(e)}> + + {state.canSkipPond && (
From 445b6fffe95b77546b3eeb621a5fe5b36eb89b41 Mon Sep 17 00:00:00 2001 From: Maddie Kasula Date: Fri, 22 Nov 2019 10:59:53 -0800 Subject: [PATCH 5/9] Add icon to recall button + styling --- src/demo/ui.jsx | 36 +++++++++++++++++++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/src/demo/ui.jsx b/src/demo/ui.jsx index 3fd17e91..a703bf96 100644 --- a/src/demo/ui.jsx +++ b/src/demo/ui.jsx @@ -13,6 +13,8 @@ import aiBotClosed from '../../public/images/ai-bot/ai-bot-closed.png'; import counterIcon from '../../public/images/data.png'; import eraseButton from '../../public/images/erase.png'; import arrowDownImage from '../../public/images/arrow-down.png'; +import banIcon from '../../public/images/ban-icon.png'; +import checkmarkIcon from '../../public/images/checkmark-icon.png'; import snail from '../../public/images/seaCreatures/Snail.png'; import Typist from 'react-typist'; import {getCurrentGuide, dismissCurrentGuide} from './models/guide'; @@ -296,6 +298,25 @@ const styles = { transform: 'translateX(-45%)', pointerEvents: 'none' }, + recallButton: { + position: 'absolute', + top: '4%', + left: '2.25%', + minWidth: 175, + ':focus': { + outline: 'none' + } + }, + recallContainer: { + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between' + }, + recallIcon: { + width: 24, + height: 24, + marginRight: 10 + }, pill: { display: 'flex', alignItems: 'center' @@ -941,7 +962,20 @@ class Pond extends React.Component { return ( - + {state.canSkipPond && (
From 97ff64e24f39a6ca137613007cfc4d4c76244958 Mon Sep 17 00:00:00 2001 From: Maddie Kasula Date: Fri, 22 Nov 2019 11:11:35 -0800 Subject: [PATCH 6/9] Make default button text grey --- src/demo/colors.js | 2 +- src/demo/ui.jsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/demo/colors.js b/src/demo/colors.js index 82d076cd..9c7ebd0b 100644 --- a/src/demo/colors.js +++ b/src/demo/colors.js @@ -1,7 +1,7 @@ const colors = { white: 'white', black: 'black', - grey: 'grey', + grey: '#4d575f', darkGrey: '#2f353e', lightGrey: '#e7e7e7', green: '#56c568', diff --git a/src/demo/ui.jsx b/src/demo/ui.jsx index a703bf96..07b3d83a 100644 --- a/src/demo/ui.jsx +++ b/src/demo/ui.jsx @@ -45,6 +45,7 @@ const styles = { button: { cursor: 'pointer', backgroundColor: colors.white, + color: colors.grey, borderRadius: 8, minWidth: 160, outline: 'none', From 1662caff0be2363f305c469792c0079df8a4e5d9 Mon Sep 17 00:00:00 2001 From: Maddie Kasula Date: Fri, 22 Nov 2019 12:51:49 -0800 Subject: [PATCH 7/9] Use font-awesome checkmark/ban icons, styling --- src/demo/ui.jsx | 64 ++++++++++++++++++++++++++++++++----------------- 1 file changed, 42 insertions(+), 22 deletions(-) diff --git a/src/demo/ui.jsx b/src/demo/ui.jsx index 07b3d83a..d5f04669 100644 --- a/src/demo/ui.jsx +++ b/src/demo/ui.jsx @@ -13,8 +13,6 @@ import aiBotClosed from '../../public/images/ai-bot/ai-bot-closed.png'; import counterIcon from '../../public/images/data.png'; import eraseButton from '../../public/images/erase.png'; import arrowDownImage from '../../public/images/arrow-down.png'; -import banIcon from '../../public/images/ban-icon.png'; -import checkmarkIcon from '../../public/images/checkmark-icon.png'; import snail from '../../public/images/seaCreatures/Snail.png'; import Typist from 'react-typist'; import {getCurrentGuide, dismissCurrentGuide} from './models/guide'; @@ -25,7 +23,9 @@ import { faPause, faBackward, faForward, - faEraser + faEraser, + faCheck, + faBan } from '@fortawesome/free-solid-svg-icons'; const styles = { @@ -309,14 +309,28 @@ const styles = { } }, recallContainer: { + position: 'absolute', + top: '4%', + right: '2.25%', + color: colors.white, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, recallIcon: { - width: 24, - height: 24, - marginRight: 10 + width: 30, + height: 30, + border: `5px solid ${colors.white}`, + borderRadius: 50, + padding: 6, + marginLeft: 8, + backgroundColor: colors.lightGrey + }, + bgRed: { + backgroundColor: colors.red + }, + bgGreen: { + backgroundColor: colors.green }, pill: { display: 'flex', @@ -878,7 +892,7 @@ let Predict = class Predict extends React.Component { }; Predict = Radium(Predict); -class Pond extends React.Component { +let Pond = class Pond extends React.Component { constructor(props) { super(props); } @@ -963,20 +977,25 @@ class Pond extends React.Component { return ( - +
+ Show + + +
{state.canSkipPond && (
@@ -1021,7 +1040,8 @@ class Pond extends React.Component { ); } -} +}; +Pond = Radium(Pond); class Guide extends React.Component { onShowing() { From 352b9230e696373d1d39aaec649e1462acec4037 Mon Sep 17 00:00:00 2001 From: Maddie Kasula Date: Fri, 22 Nov 2019 12:54:56 -0800 Subject: [PATCH 8/9] Remove unused styles --- src/demo/ui.jsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/demo/ui.jsx b/src/demo/ui.jsx index d5f04669..45567c72 100644 --- a/src/demo/ui.jsx +++ b/src/demo/ui.jsx @@ -299,15 +299,6 @@ const styles = { transform: 'translateX(-45%)', pointerEvents: 'none' }, - recallButton: { - position: 'absolute', - top: '4%', - left: '2.25%', - minWidth: 175, - ':focus': { - outline: 'none' - } - }, recallContainer: { position: 'absolute', top: '4%', From 0983a3adcba0f012e61b37611380105d5c3b0962 Mon Sep 17 00:00:00 2001 From: Maddie Kasula Date: Fri, 22 Nov 2019 12:55:42 -0800 Subject: [PATCH 9/9] Add fish.length check --- src/demo/ui.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/demo/ui.jsx b/src/demo/ui.jsx index 45567c72..521da947 100644 --- a/src/demo/ui.jsx +++ b/src/demo/ui.jsx @@ -894,7 +894,7 @@ let Pond = class Pond extends React.Component { const fish = showRecallFish ? state.recallFish : state.pondFish; // Don't call arrangeFish if fish have already been arranged. - if (!fish[0].getXY()) { + if (fish.length > 0 && !fish[0].getXY()) { arrangeFish(fish); }