category list

2 files changed, 47 insertions, 22 deletions

diff --git a/app/client/modules/biggan/views/biggan.categoryList.js b/app/client/modules/biggan/views/biggan.categoryList.js
index 4285f3f..e1cc2d1 100644
--- a/app/client/modules/biggan/views/biggan.categoryList.js
+++ b/app/client/modules/biggan/views/biggan.categoryList.js
@@ -6,49 +6,71 @@ import {
   Loading
 } from '../../../common/'
 
-import * as liveActions from '../../../live/live.actions'
+import actions from '../../../actions'
 import * as bigganTasks from '../biggan.tasks'
 import * as bigganActions from '../biggan.actions'
 
 const ALL_CATEGORIES = 'inversion/categories/biggan_all.json'
 
-class CategoryList extends Component {
+class BigGANCategoryList extends Component {
   state = {
     loading: true,
+    error: false,
     categories: {},
     q: "",
     fn: "",
   }
 
   constructor(props) {
+    super(props)
     this.loadCategories(ALL_CATEGORIES)
   }
 
   loadCategories(fn) {
     this.setState({ loading: true, fn })
+    console.log("fetching", fn)
     actions.socket
-       .read_file({ module, fn })
+       .read_file({ module: "biggan", fn })
        .then(({ name, buf }) => {
+          console.log("fetched", fn)
+          const categoryJSON = String.fromCharCode.apply(null, new Uint8Array(buf))
+          const categories = JSON.parse(categoryJSON)
           this.setState({
-            categories: String.fromCharCode.apply(null, new Uint8Array(buf)),
+            categories,
             loading: false,
           })
+       }).catch(() => {
+         this.setState({ error: true })
        })
   }
 
-  loadCategory(index) {
-    actions.live.send_command('loadCategory', str(index))
+  setCategory(index) {
+    actions.live.send_command('setCategory', String(index))
+  }
+
+  updateQuery(q) {
+    this.setState({ q }, () => {
+      this.categoryRef.scrollTo(0, 0)
+    })
   }
 
   render() {
     const { loading, q } = this.state
     if (loading) {
-      return <div><Loading /></div>
+      return <div className="categories"><Loading /></div>
     }
     return (
       <div>
-        <input type="text" value={q} onInput={e => this.setState({ q: e.target.value })} />
-        <div className="categories">
+        <div className="search_form">
+          <div class='button'></div>
+          <input
+            type="text"
+            className="categorySearch"
+            value={q}
+            onInput={e => this.updateQuery(e.target.value)}
+          />
+        </div>
+        <div className="categories" ref={ref => this.categoryRef = ref}>
           {this.renderGroup("inanimate")}
           {this.renderGroup("animate")}
         </div>
@@ -58,23 +80,24 @@ class CategoryList extends Component {
 
   renderGroup(groupName) {
     const { categories, q } = this.state
-    const qRegexp = new Regexp(q || ".*")
-    const group = categories[group_name]
+    const qRegExp = new RegExp(q || ".*")
+    const group = categories[groupName]
+    // console.log(group)
     const groups = Object.keys(group).map(key => {
       const category = group[key]
       const categoryGroup = Object.keys(category).map(categoryName => {
-        if (!categoryName.match(qRegexp)) {
+        if (!categoryName.match(qRegExp)) {
           return null
         }
         return (
-          <a key={categoryName} onClick={() => this.loadCategory(category[categoryName])}>
+          <a key={categoryName} onClick={() => this.setCategory(category[categoryName])}>
             {categoryName}
-          </a>}
+          </a>
         )
       }).filter(g => !! g)
       return !categoryGroup.length ? null : (
         <div key={key}>
-          <h3>{category}</h3>
+          <h3>{key}</h3>
           {categoryGroup}
         </div>
       )
@@ -84,7 +107,7 @@ class CategoryList extends Component {
     }
     return (
       <div>
-        <h2>{groupName}</h2>
+        {groupName === "animate" ? <h2>{groupName}</h2> : null}
         {groups}
       </div>
     )
@@ -99,8 +122,6 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
   actions: {
-    live: bindActionCreators(liveActions, dispatch),
-    socket: bindActionCreators(socketActions, dispatch),
   }
 })
 
diff --git a/app/client/modules/biggan/views/biggan.live.js b/app/client/modules/biggan/views/biggan.live.js
index 20cffe8..af1edea 100644
--- a/app/client/modules/biggan/views/biggan.live.js
+++ b/app/client/modules/biggan/views/biggan.live.js
@@ -13,6 +13,7 @@ import * as liveActions from '../../../live/live.actions'
 import * as queueActions from '../../../queue/queue.actions'
 import * as bigganTasks from '../biggan.tasks'
 import * as bigganActions from '../biggan.actions'
+import BigGANCategoryList from './biggan.categoryList.js'
 
 class BigGANLive extends Component {
   constructor(props) {
@@ -20,7 +21,7 @@ class BigGANLive extends Component {
     props.actions.live.get_params()
   }
   start(){
-    console.log(this.props.opt)
+    // console.log(this.props.opt)
     console.log('starting up!')
     this.props.actions.tasks.live_task({
       // folder_id: this.props.biggan.data.resultsFolder.id,
@@ -31,7 +32,7 @@ class BigGANLive extends Component {
   }
   render() {
     const { biggan, actions } = this.props
-    console.log(actions)
+    // console.log(actions)
     // if (biggan.loading) {
     //   return <Loading progress={biggan.progress} />
     // }
@@ -98,8 +99,8 @@ class BigGANLive extends Component {
               >{"Spin"}</Button>
               <Slider live
                 name='orbit_noise_speed'
-                title={"Noise Speed"}
-                min={0} max={1} type='float'
+                title={"Shuffle Speed"}
+                min={0} max={4} type='float'
               />
             </Group>
 
@@ -116,6 +117,9 @@ class BigGANLive extends Component {
               />
             </Group>
           </div>
+          <div className='params column'>
+            <BigGANCategoryList />
+          </div>
         </div>
       </div>
     )