paragraph list view

3 files changed, 47 insertions, 14 deletions

diff --git a/animism-align/frontend/views/align/components/annotations/annotation.form.js b/animism-align/frontend/views/align/components/annotations/annotation.form.js
index 6972f93..e18d6df 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.form.js
@@ -7,7 +7,7 @@ import actions from '../../../../actions'
 // import * as alignActions from '../align.actions'
 
 import { ZOOM_STEPS } from '../../constants'
-import { clamp } from '../../../../util'
+import { clamp, timestamp } from '../../../../util'
 import { timeToPosition } from '../../align.util'
 import { Select } from '../../../../common'
 
@@ -95,14 +95,17 @@ class AnnotationForm extends Component {
       >
         {annotation.type === 'sentence' && this.renderTextarea()}
         {annotation.type === 'header' && this.renderTextarea()}
-        <div className='row'>
-          <Select
-            name='type'
-            selected={annotation.type}
-            options={ANNOTATION_TYPES}
-            defaultOption='text'
-            onChange={this.handleSelect}
-          />
+        <div className='row buttons'>
+          <div>
+            <Select
+              name='type'
+              selected={annotation.type}
+              options={ANNOTATION_TYPES}
+              defaultOption='text'
+              onChange={this.handleSelect}
+            />
+            <div className='ts'>{timestamp(annotation.start_ts, 1, true)}</div>
+          </div>
           <button onClick={this.handleSubmit}>Save</button>
         </div>
       </div>
diff --git a/animism-align/frontend/views/align/components/annotations/annotation.index.js b/animism-align/frontend/views/align/components/annotations/annotation.index.js
index 8121d1d..d5c1eed 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.index.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.index.js
@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 
 import actions from '../../../../actions'
 
-import { ZOOM_STEPS } from '../../constants'
+import { ZOOM_STEPS, INNER_HEIGHT } from '../../constants'
 import { clamp } from '../../../../util'
 import { positionToTime, timeToPosition } from '../../align.util'
 
@@ -30,7 +30,7 @@ class AnnotationIndex extends Component {
     const { order, lookup } = index
 
     let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step
-    let widthTimeDuration = window.innerHeight * secondsPerPixel // secs per pixel
+    let widthTimeDuration = INNER_HEIGHT * secondsPerPixel // secs per pixel
 
     let timeMin = start_ts - 30.0
     let timeMax = Math.min(start_ts + widthTimeDuration, duration)
@@ -43,9 +43,37 @@ class AnnotationIndex extends Component {
   }
   handleClick(e, annotation) {
     e.stopPropagation()
+    if (e.shiftKey) {
+      e.preventDefault()
+      this.handleParagraphSelection(annotation)
+    }
     actions.audio.seek(annotation.start_ts)
     actions.align.setSelectedAnnotation(annotation.id)
   }
+  handleParagraphSelection(annotation) {
+    const { selected_paragraph_id } = this.props.timeline
+    console.log("___________________")
+    console.log(annotation)
+    console.log(selected_paragraph_id)
+    if (!selected_paragraph_id || selected_paragraph_id === -1) {
+      if (annotation.paragraph_id) {
+        actions.align.setSelectedParagraph(annotation.paragraph_id)
+      } else {
+        actions.paragraph.create({
+          type: 'paragraph',
+          start_ts: annotation.start_ts,
+        }) .then(data => {
+          console.log(data.res)
+          actions.align.setSelectedParagraph(data.res.id)
+          annotation.paragraph_id = data.res.id
+          actions.annotation.update(annotation)
+        })
+      }
+    } else if (selected_paragraph_id !== annotation.paragraph_id) {
+      annotation.paragraph_id = selected_paragraph_id
+      actions.annotation.update(annotation)
+    }
+  }
   handleDoubleClick(e, annotation) {
     e.stopPropagation()
     actions.align.showEditAnnotationForm(annotation)
diff --git a/animism-align/frontend/views/align/components/annotations/annotation.types.js b/animism-align/frontend/views/align/components/annotations/annotation.types.js
index 7639821..f95589d 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.types.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.types.js
@@ -8,9 +8,11 @@ import { positionToTime, timeToPosition } from '../../align.util'
 
 export const AnnotationSentence = ({ y, annotation, selected, onClick, onDoubleClick }) => {
   const { start_ts, text, paragraph_id } = annotation
-  let className = (paragraph_id % 2)
-    ? 'annotation sentence odd'
-    : 'annotation sentence even'
+  let className = !paragraph_id
+    ? 'annotation sentence'
+    : (paragraph_id % 2)
+      ? 'annotation sentence odd'
+      : 'annotation sentence even'
   if (selected) className += ' selected'
   return (
     <div