navigating around, fix api filtering, add episode stats

3 files changed, 48 insertions, 15 deletions

diff --git a/animism-align/frontend/app/views/editor/editor.gate.js b/animism-align/frontend/app/views/editor/editor.gate.js
index 5076350..87ca367 100644
--- a/animism-align/frontend/app/views/editor/editor.gate.js
+++ b/animism-align/frontend/app/views/editor/editor.gate.js
@@ -6,9 +6,12 @@ import { Loader } from 'app/common'
 import actions from 'app/actions'
 
 class EditorGate extends Component {
+  state = {
+    ready: false,
+  }
+
   constructor(props) {
     super(props)
-    this.load()
   }
 
   componentDidMount() {
@@ -30,13 +33,17 @@ class EditorGate extends Component {
     if (!this.props.episode.lookup) return
     if (!this.props.episode_id) return
     if (parseInt(this.props.episode_id) === parseInt(this.props.current_episode_id)) return
+    this.setState({ ready: false })
     const episode = this.props.episode.lookup[this.props.episode_id]
     const project = this.props.project.lookup[episode.project_id]
     actions.site.loadEpisode(project, episode)
+    .then(() => {
+      this.setState({ ready: true })
+    })
   }
 
   render() {
-    if (parseInt(this.props.episode_id) === parseInt(this.props.current_episode_id)) {
+    if (this.state.ready && parseInt(this.props.episode_id) === parseInt(this.props.current_episode_id)) {
       return this.props.children
     }
     return (
@@ -48,7 +55,7 @@ class EditorGate extends Component {
 const mapStateToProps = state => ({
   episode: state.episode.index,
   project: state.project.index,
-  current_episode_id: state.site.episode.id,
+  current_episode_id: state.site.episode ? state.site.episode.id : 0,
 })
 
 export default connect(mapStateToProps)(EditorGate)
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/editor/overview/overview.container.js b/animism-align/frontend/app/views/editor/overview/overview.container.js
index b06a299..d64bd9f 100644
--- a/animism-align/frontend/app/views/editor/overview/overview.container.js
+++ b/animism-align/frontend/app/views/editor/overview/overview.container.js
@@ -7,11 +7,11 @@ import './overview.css'
 // import actions from 'app/actions'
 import { Loader, TableObject } from 'app/common'
 import { groupResponseBy } from 'app/utils/api.utils'
-import { courtesyS, formatDateTime } from 'app/utils'
+import { courtesyS, formatDateTime, timestampHMS } from 'app/utils'
 
 class OverviewContainer extends Component {
   state = {
-    ready: true,
+    ready: false,
   }
 
   constructor(props) {
@@ -29,14 +29,26 @@ class OverviewContainer extends Component {
   }
 
   build() {
-    // const episodes = groupResponseBy(this.props.episodes, 'project_id')
-    // const venues = groupResponseBy(this.props.venues, 'project_id')
-    // this.setState({ ready: true, episodes, venues })
+    const { annotation } = this.props
+    const stats = annotation.order.reduce((stats, annotation_id) => {
+      const { paragraph_id, type } = annotation.lookup[annotation_id]
+      if (paragraph_id) {
+        stats.paragraphs[paragraph_id] = true
+      }
+      if (!stats.types[type]) {
+        stats.types[type] = 0
+      }
+      stats.types[type] += 1
+      return stats
+    }, { types: {}, paragraphs: {} })
+    setTimeout(() => {
+      this.setState({ ready: true, stats })
+    }, 20)
   }
 
   render() {
-    const { project, episode, media, annotation, align } = this.props
-    const { ready } = this.state
+    const { project, episode, media, annotation, align, viewer } = this.props
+    const { ready, stats } = this.state
     if (!ready) {
       return (
         <div className='overview'>
@@ -44,8 +56,7 @@ class OverviewContainer extends Component {
         </div>
       )
     }
-    // console.log(this.props)
-    console.log(annotation.order.length)
+
     return (
       <div className='overview'>
         <div className='project-top'>
@@ -53,15 +64,21 @@ class OverviewContainer extends Component {
             <h1>{`${project.title}: Episode ${episode.episode_number}`}</h1>
             <h2>{episode.title}</h2>
           </div>
-          <h3>Statistics</h3>
-
           <TableObject
-            className="overview"
+            tag="Overview"
             order={"annotations".split(" ")}
             object={{
               annotations: courtesyS(annotation.order.length, 'annotation'),
+              media: media.order.length + ' media',
+              sections: courtesyS(viewer.sections.length, 'section'),
+              paragraphs: courtesyS(Object.keys(stats.paragraphs).length, 'paragraph'),
+              duration: timestampHMS(align.duration),
             }}
           />
+          <TableObject
+            tag="Annotations"
+            object={stats.types}
+          />
         </div>
       </div>
     )
@@ -73,6 +90,7 @@ const mapStateToProps = state => ({
   episode: state.site.episode,
   media: state.media.index,
   annotation: state.annotation.index,
+  viewer: state.viewer,
   align: state.align,
 })
 
diff --git a/animism-align/frontend/app/views/editor/overview/overview.css b/animism-align/frontend/app/views/editor/overview/overview.css
index 2c8b903..6a6e292 100644
--- a/animism-align/frontend/app/views/editor/overview/overview.css
+++ b/animism-align/frontend/app/views/editor/overview/overview.css
@@ -5,3 +5,11 @@
 .overview h2 {
   margin: 0.5rem 0 1rem 0;
 }
+
+.overview .tableObject th, .overview .tableTuples th {
+  color: #ddd;
+}
+
+.overview .tableObject td {
+  color: #eee;
+}
\ No newline at end of file