Tweets are now loaded via ajax/vue.

assets/js/tweets.js

@@ -0,0 +1,45 @@
+var apiURL = 'tweets/'
+
+var tweets = new Vue({
+  el: '#tweets',
+
+  data: {
+    page: 1,
+    tweets: null
+  },
+
+  created: function() {
+    this.fetchData()
+  },
+
+  watch: {
+    page: 'fetchData'
+  },
+
+  filters: {
+    truncate: function(v) {
+      var newline = v.indexOf('\n')
+      return newline > 0 ? v.slice(0, newline) : v
+    },
+    formatDate: function(v) {
+      return v.replace(/T|Z/g, ' ')
+    }
+  },
+
+  methods: {
+    fetchData: function() {
+      let uri = window.location.search.substring(1)
+      let params = new URLSearchParams(uri)
+
+      var xhr = new XMLHttpRequest()
+      var self = this
+
+      xhr.open('GET', apiURL + '?' + params.toString())
+      xhr.onload = function() {
+        self.tweets = JSON.parse(xhr.responseText)
+      }
+
+      xhr.send()
+    }
+  }
+})

chirp/models.py

@@ -196,7 +196,7 @@ def get_aggregations(self):
     def get_tweets(self, query=None, page=1):
         collection = self.get_mongo_collection()
         cursor = collection.find(
-            filter=query, sort=[('timestamp_ms', DESCENDING)], limit=10)
+            filter=query, sort=[('timestamp_ms', DESCENDING)], limit=20)
 
         return cursor
 

chirp/templates/chirp/filter_detail.html

@@ -34,25 +34,16 @@ <h2 class="subtitle">
           <canvas id="{{ a.slug }}"></canvas>
         </div>
         {% endfor %}
-      </div>
-      <div class="column is-one-quarter">
-        <p class="title">Tweets ({{ tweets.count }})</p>
-        <ul class="tweets">
-          {% for tweet in tweets %}
-          <li>
-            {% include 'chirp/includes/tweet.html' %}
-          </li>
-          {% endfor %}
-        </ul>
-      </div>
-    </div>
-    <div class="columns is-multiline">
-      <div class="column">
         <div class="chart">
           <p class="title">Words</p>
           <div class="wordcloud" id="wordcloud"></div>
         </div>
       </div>
+      <div class="column is-one-quarter">
+        <div id="tweets">
+          {% include 'chirp/includes/tweets.html' %}
+        </div>
+      </div>
     </div>
   </div>
 </section>
@@ -61,8 +52,10 @@ <h2 class="subtitle">
 {% block footer_scripts %}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
 <script src="https://google.github.io/palette.js/palette.js"></script>
+<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
 <script src="{% static 'vendor/wordcloud2.js/src/wordcloud2.js' %}"></script>
 <script src="{% static 'js/charts.js' %}"></script>
+<script src="{% static 'js/tweets.js' %}"></script>
 <script>
 $(function() {
   {% for a in object.get_aggregations %}

chirp/templates/chirp/includes/tweets.html

@@ -0,0 +1,34 @@
+{% verbatim %}
+<p class="title">Tweets ({{ tweets.total }})</p>
+<ul>
+    <li v-for="tweet in tweets.tweets">
+        <div class="card">
+            <div v-if="tweet.entities.media && tweet.entities.media[0].type === 'photo'" class="card-image">
+                <figure class="image">
+                    <img :src="tweet.entities.media[0].media_url_https">
+                </figure>
+            </div>
+            <div class="card-content">
+                <div class="media">
+                    <div class="media-left">
+                        <figure class="image is-48x48">
+                            <img :src="tweet.user.profile_image_url_https">
+                        </figure>
+                    </div>
+                    <div class="media-content">
+                        <p class="title is-5">{{ tweet.user.name }}</p>
+                        <p class="subtitle is-6">@{{ tweet.user.screen_name }}</p>
+                    </div>
+                </div>
+                <div class="content">
+                    <p v-if="tweet.extended_tweet && tweet.extended_tweet.full_text">{{ tweet.extended_tweet.full_text }}</p>
+                    <p v-else>{{ tweet.text }}</p>
+                    <a :href="'//twitter.com/statuses/' + tweet.id" :target="tweet.id">View</a>
+                    <br>
+                    <time>{{ tweet.created_at }}</time>
+                </div>
+            </div>
+        </div>
+    </li>
+</ul>
+{% endverbatim %}

chirp/views.py

@@ -55,11 +55,15 @@ def get_filters(request):
 def get_tweets(request, filter_id):
     f = Filter.objects.get(id=filter_id)
     query = _get_query(request)
-
-    tweets = [
-        json.loads(json.dumps(item, indent=4, default=json_util.default))
-        for item in f.get_tweets(query=query)
-    ]
+    results = f.get_tweets(query=query)
+
+    tweets = {
+        'total': results.count(),
+        'tweets': [
+            json.loads(json.dumps(item, indent=4, default=json_util.default))
+            for item in results
+        ]
+    }
 
     return Response(tweets)