hogumathi-app/hogumathi_app/templates/partial/tweets-timeline.html

<script src="{{ url_for('static', filename='tweets-ui.js') }}"></script>


<script>

{% if notes_app_url %}
var notesAppUrl = {{ notes_app_url | tojson }}
{% endif %}

	if (!window['dataset']) {
		{% if visjs_enabled %}
		window.dataset = new vis.DataSet();
		{% else %}
		window.dataset = {
			items: [],
			update: function (items) {
				dataset.items = dataset.items.concat(items);
			},
			get: function () {
				return items;
			}
		}
		{% endif %}
	}
</script>

<script>
function feed_item_to_activity (fi) {
		
		var group = 'tweet';
		var y = 1;
		if (fi.retweeted_tweet_id) {
			group = 'retweet';
			y = 2;
		} else if (fi.replied_tweet_id) {
			group = 'reply';
			y = 3;
		}
		
		return {
			//'id': fi.id,
			'x': new Date(fi.created_at),
			'y': y,
			'group': group,
			'feed_item': fi
		}
	}
	
	function feed_item_to_likes (fi) {
		
		if ( !fi['public_metrics'] || !fi.public_metrics['like_count'] ) {
			return;
		}
		
		var group = 'likes';
		var y = fi.public_metrics.like_count;
		
		
		return {
			//'id': fi.id,
			'x': new Date(fi.created_at),
			'y': y,
			'group': group,
			'feed_item': fi
		}
	}
	
	function feed_item_to_replies (fi) {
		
		if ( !fi['public_metrics'] || !fi.public_metrics['reply_count'] ) {
			return;
		}
		
		var group = 'replies';
		var y = fi.public_metrics.reply_count;
		
		
		return {
			//'id': fi.id,
			'x': new Date(fi.created_at),
			'y': y,
			'group': group,
			'feed_item': fi
		}
	}
</script>

{% if twitter_live_enabled and visjs_enabled and not skip_plot %}

<div class="w-100" style="position: sticky; top: 20px; background-color: silver; padding: 20px 0; margin: 10px 0;">
		<div id="visualization"></div>
	
</div>

{% endif %}

<ul id="tweets" class="tweets w-75 center z-0">

{% for tweet in tweets %}

<li class="tweet w-100 dt {% if tweet.is_marked %}marked{% endif %}">
<script>
	
	
	var feedItem = {{ tweet | tojson }};
	var plotItems = [];
	
	var likesPoint = feed_item_to_likes(feedItem);
	if (likesPoint) { plotItems.push(likesPoint); }
	
	var repliesPoint = feed_item_to_replies(feedItem);
	if (repliesPoint) { plotItems.push(repliesPoint); }
	
	if (!plotItems.length) {
		plotItems.push(feed_item_to_activity(feedItem))
	}
	
	
	
	dataset.update(plotItems);

</script>


	{% if tweet.retweeted_by %}
	<div class="dt-row moon-gray">
		<p class="dtc w-10 tr pa1">RT</p>
		<p class="dtc w-90"><a class="moon-gray" href="{{ tweet.retweeted_by_url }}">{{ tweet.retweeted_by }} Retweeted</a></p>
	</div>
	{% endif %}
	<div class="dt-row">
		{% include "partial/timeline-tweet.html" %}
		
		
	</div>
	<div class="dt-row">
		<div class="dtc"></div>
		<div class="dtc ">
		
		
		<p class="tweet-actions-box">
		
		
		{% if tweet.actions.view_replies %}
		<a href="{{ url_for(tweet.actions.view_replies.route, **tweet.actions.view_replies.route_params) }}">replies</a>
		|
		{% endif %}
		

		
		
		{% if show_thread_controls and tweet.conversation_id %}
		{% with tweet=tweets[0] %}
		{% if tweet.actions.view_thread %}
		<a href="{{ url_for(tweet.actions.view_thread.route, **tweet.actions.view_thread.route_params) }}">author thread</a>
		|
		{% endif %}
		{% if tweet.actions.view_conversation %}
		<a href="{{ url_for(tweet.actions.view_conversation.route, **tweet.actions.view_conversation.route_params) }}">full convo</a>
		|
		{% endif %}
		{% endwith %}
		{% endif %}
		
		{% if tweet.actions.view_activity %}
		<a href="{{ url_for(tweet.actions.view_activity.route, **tweet.actions.view_activity.route_params) }}">activity</a>
		|
		{% endif %}
		
		{% if tweet.actions.retweet %}
		<a hx-post="{{ url_for(tweet.actions.retweet.route, **tweet.actions.retweet.route_params) }}">retweet</a>
		|
		{% endif %}
		
		{% if tweet.actions.bookmark %}
		<a hx-post="{{ url_for(tweet.actions.bookmark.route, **tweet.actions.bookmark.route_params) }}">bookmark</a>
		{% if tweet.actions.delete_bookmark %}
		[
		<a hx-delete="{{ url_for(tweet.actions.delete_bookmark.route, **tweet.actions.delete_bookmark.route_params) }}">-</a>
		]
		{% endif %}
		|
		{% endif %}
		
		<a class="tweet-action copy-formatted" href="javascript:copyTweetToClipboard('{{ tweet.id }}')">copy formatted</a>
		{% if notes_app_url %}
		|
		<a class="tweet-action swipe-to-note" href="javascript:swipeTweetToNotesApp('{{ tweet.id }}')">swipe to note</a>
		{% endif %}
		</p>
		</div>
	</div>
	

	</li>

{% endfor %}



{% if query.next_data_url %}

	<li style="height: 50px; vertical-align: middle"
		hx-get="{{ query.next_data_url }}"
		hx-trigger="revealed"
		hx-swap="outerHTML"
		hx-select="ul#tweets > li"
		>
		<center style="height: 100%">

		<span class="js-only">
		Loading more tweets...
		</span>

		</center>
	</li>
	
{% elif query.next_page_url %}
	<li style="height: 50px; vertical-align: middle"
		>
		<center style="height: 100%">
		<a href="{{ query.next_page_url }}">
		Go to Next Page
		</a>
		
		
		</center>
	
	</li>
	
{% endif %}
	<li style="display: none">
		<script>
			// https://stackoverflow.com/questions/22663353/algorithm-to-remove-extreme-outliers-in-array
			// we should remove outliers on the X axis. That will mainly be RTs with old dates.
			// we might also be able to get the date of RT as opposed to OG tweet date.
			
			// https://towardsdatascience.com/ways-to-detect-and-remove-the-outliers-404d16608dba
			var profileDataEl = document.querySelector('#profile-data');
			
			if (window['dataset'] && profileDataEl) {
				profileDataEl.innerHTML = dataset.get().filter(i => 'public_metrics' in i).map(i => i.public_metrics.like_count).join(', ');
			}

			{% if visjs_enabled %}
			if (window.profileActivity) {
				window.profileActivity.fit()
			}
			{% endif %}
		</script>
	</li>
</ul>

			{% if twitter_live_enabled and visjs_enabled and not skip_plot %}
			
	<script>



function onClick (e) {
  // we need to scan the dataset between min/max x/y
  // 
  // TODO we want to scale these based on the zoom level / pixel values
  //
  // FIXME sometimes we get several points:
  // We could also go for the closest point within the bound.
  // Perhaps cycle through upon multiple clicks.
  // For now we can just zoom in closer.
  //
  // range: graph2d.components[3].options.dataAxis.left.range.max
  // fixing this is lower priority since it is currently static.
  graph2d = window.profileActivity;
  
  var timeWindow = graph2d.getWindow();
  var windowInSeconds = (timeWindow.end - timeWindow.start) / 1000;
  
  var pixelWidth = graph2d.dom.centerContainer.offsetWidth;
  
  var secondsPerPixel = windowInSeconds / pixelWidth;
  
  console.log('secondsPerPixel = ' + secondsPerPixel);
  
  
  //var MAX_TIME_DIFF  = 1000 * 60 * 60;
  
  var MAX_TIME_DIFF = 10 * secondsPerPixel * 1000;
  var MAX_VALUE_DIFF = 10;
  
  console.log(`click. value=${e.value[0]}, time=${e.time}`);
  console.log(e);
  
  var nearbyItems = dataset.get({filter: function (item) {
	var timeDiff = new Date(item.x).getTime() - e.time.getTime();
	var valueDiff = item.y - e.value[0];
	
	return Math.abs(timeDiff) < MAX_TIME_DIFF 
		   && Math.abs(valueDiff) < MAX_VALUE_DIFF;
	
  }});
  
  //console.log([e.time, e.value[0]]);
  console.log('nearby points:');
  console.log(nearbyItems);
}


var container = document.getElementById('visualization');



var options = {
  sort: false,
  sampling:false,
  style:'points',
  dataAxis: {
		  width: '88px',

	  //visible: false,
	  left: {
		  range: {
			  min: 0, max: 10
		  }
	  }
  },  
  drawPoints: {
	  enabled: true,
	  size: 6,
	  style: 'circle' // square, circle
  },
  defaultGroup: 'Scatterplot',
  graphHeight: '50px',
  width: '100%'
};

var groups = [{id: 'feed_item'}];

window.profileActivity = new vis.Graph2d(container, window.dataset, groups, options);

window.profileActivity.on('click', onClick);

	</script>
			
			{% endif %}