Dirty fix for rows, added more examples

src/App.css

@@ -21,6 +21,10 @@ body {
   height: calc(100% - 56px);
 }
 
+@media screen and (max-width:990px) {
+  #main { flex-wrap: wrap;  }
+}
+
 #brush-slider-container {
   display: inline-block;
   padding-left: 5px;

src/App.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 
 import * as dl from 'deeplearn';
-//import {SqueezeNet} from 'deeplearn-squeezenet';
 import {SqueezeNet} from './squeezenet/squeezenet.js';
 import {MuiThemeProvider, Toolbar, ToolbarTitle} from 'material-ui';
 import {indigo800, red800} from 'material-ui/styles/colors';
@@ -26,7 +25,7 @@ class App extends Component {
 
     this.state = {
       netStatus: 'Loading SqueezeNet',
-      image: 'boat.png',
+      image: 'lighthouse.jpg',
       topK: new Map(),
       brushSize: 15,
       blurSize: 2,
@@ -93,7 +92,7 @@ class App extends Component {
         <MuiThemeProvider muiTheme={muiTheme}>
           <div id="mui-container">
             <Toolbar id="header" style={{backgroundColor: "rgb(40, 53, 147)", color: "white"}}>
-              <ToolbarTitle text="Deep Vis" />
+              <ToolbarTitle text="Interactive Classification" />
             </Toolbar>
             <div id="main">
               <Options imageChanged={this.imageChanged} brushChanged={this.brushChanged} blurChanged={this.blurChanged} blur={this.blur} reset={this.reset} 

src/Modified.js

@@ -15,7 +15,6 @@ class Modified extends Component {
             clickX: [],
             clickY: [],
             order: 0,
-            cam: [-1]
         };
     }
 
@@ -84,7 +83,7 @@ class Modified extends Component {
             this.setState({
                 results: rows,
                 activation: activation
-            }, () => {if (this.state.cam[0] !== -1) this.drawCAM(null)});
+            });
         }.bind(this));
     }
 
@@ -97,59 +96,43 @@ class Modified extends Component {
     }
 
     drawCAM = (e) => {
-        if (e == null || e[0] !== this.state.cam[0]) {
-            if (e == null) {
-                e = this.state.cam;
-            }
+        if (e.length !== 0) {
             let ar = Object.assign([], IMAGENET_CLASSES);
             let row = this.state.results[e[0]];
             let index = ar.indexOf(row.key);
             drawCAM(this.cImg, this.props.net, this.state.activation, this.cCam, index);
-            this.setState({
-                cam: e
-            })
         } else {
             const ctx = this.cCam.getContext('2d');
             ctx.clearRect(0, 0, 227, 227);
-            this.setState({
-                cam: [-1]
-            })
         }
     }
 
     orderChanged = (e, row, column) => {
-        console.log(e.target);
-        if (this.state.order) {
-            e.target.innerHTML = 'Confidence %';
-        } else {
-            e.target.innerHTML = '↓ Confidence %';
-        }
         if (column === 2) {
-            this.changeOrder(!this.state.order);
-            this.setState({
-                order: !this.state.order
-            })
+            if (this.state.order) {
+                e.target.innerHTML = 'Confidence %';
+            } else {
+                e.target.innerHTML = '↓ Confidence %';
+            }
+                this.changeOrder(!this.state.order);
+                this.setState({
+                    order: !this.state.order
+                });
         }
     }
 
     changeOrder = (val) => {
+        let classes = null;
         if (!val) {
-            predict(this.cImg, this.props.net, Array.from(this.props.topK.keys()), function(top, activation) {
-                let rows = createCompRows(top, this.props.topK);
-                this.setState({
-                    results: rows,
-                    activation: activation
-                });
-            }.bind(this));
-        } else {
-            predict(this.cImg, this.props.net, null, function(top, activation) {
-                let rows = createCompRows(top, this.props.topK);
-                this.setState({
-                    results: rows,
-                    activation: activation
-                });
-            }.bind(this));
+            classes = Array.from(this.props.topK.keys());
         }
+        predict(this.cImg, this.props.net, classes, function(top, activation) {
+            let rows = createCompRows(top, this.props.topK);
+            this.setState({
+                results: rows,
+                activation: activation
+            });
+        }.bind(this));
     }
 
     componentDidMount() {
@@ -191,7 +174,7 @@ class Modified extends Component {
                 this.setState({
                     results: rows,
                     activation: activation
-                }, () => {if (this.state.cam[0] !== -1) this.drawCAM(null)});
+                });
             }.bind(this));
         }
         this.props = nProps;

src/Options.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import {RaisedButton, Slider, SelectField, MenuItem, Toggle} from 'material-ui';
+import {RaisedButton, Slider, SelectField, MenuItem} from 'material-ui';
 import './App.css';
 
 class Options extends Component {
@@ -9,12 +9,20 @@ class Options extends Component {
         <div id="select-container">
           <h4>Select Image</h4>
           <SelectField onChange={this.props.imageChanged} value={this.props.image} fullWidth={true}>
+            <MenuItem value="lighthouse.jpg" primaryText="Lighthouse"/>
+            <MenuItem value="sailboat.jpg" primaryText="Sail Boat"/>
             <MenuItem value="boat.png" primaryText="Boat"/>
+            <MenuItem value="room.jpg" primaryText="Room"/>
             <MenuItem value="elephant.jpg" primaryText="Elephant"/>
             <MenuItem value="crowd.jpg" primaryText="Crowd"/>
             <MenuItem value="ski.jpg" primaryText="Ski Lift"/>
             <MenuItem value="ride.jpg" primaryText="Attraction Park"/>
             <MenuItem value="jazz.jpg" primaryText="Jazz Stage"/>
+            <MenuItem value="desk.jpg" primaryText="Desk"/>
+            <MenuItem value="snow_park.jpg" primaryText="Snowy Park"/>
+            <MenuItem value="beach.jpg" primaryText="Beach"/>
+            <MenuItem value="classic_car.jpg" primaryText="Classic Car"/>
+            <MenuItem value="port.jpg" primaryText="Port"/>
           </SelectField>
         </div>
         <div id="brush-container">

src/util.js

@@ -138,7 +138,7 @@ export function createCompRows(top, originalTop) {
             plus = '+';
         }
 
-        rows.push(<TableRow key={pair[0]} selected={false}>
+        rows.push(<TableRow key={pair[0]}>
             <TableRowColumn style={{wordWrap: 'break-word', whiteSpace: 'normal'}}>{pair[0]}</TableRowColumn>
             <TableRowColumn style={{textAlign: 'right'}}>{pair[1]}</TableRowColumn>
             <TableRowColumn style={{textAlign: 'right', color: color}}>{plus}{change.toFixed(2)}</TableRowColumn>