Custom explorer view for imported tweets

digitalmethodsinitiative · Jul 3, 2023 · 0f8c28b · 0f8c28b
1 parent bed44b3
commit 0f8c28b
Show file tree

Hide file tree

Showing 3 changed files with 232 additions and 1 deletion.
diff --git a/datasources/twitter-import/explorer/twitter-import-explorer.css b/datasources/twitter-import/explorer/twitter-import-explorer.css
@@ -0,0 +1,84 @@
+/* 
+
+See https://github.com/digitalmethodsinitiative/4cat/wiki/Exploring-and-annotating-datasets for information on how to add custom CSS.
+ 
+ */
+
+body {
+	background-color: white;
+}
+
+.posts .post {
+	position: relative;
+	background-color: white;
+	max-width: 620px;
+	border: 1px solid #d6d6d6;
+	border-radius: 10px;
+	min-height: 50px;
+}
+
+.posts .post header {
+	display: inline-block;
+	line-height: 1.7em;
+	margin-bottom: 5px;
+	border: none;
+	color: rgb(104, 119, 130);
+}
+
+.posts .post header .post_id {
+	display: none;
+}
+
+.posts .post header .author {
+	color: black;
+}
+
+.posts .post header .author_picture {
+	float: left;
+	margin-right: 15px;
+}
+
+.posts .post header .author_picture img {
+	border-radius: 100px;
+	width: 50px;
+}
+
+.posts .post header .author_picture:after {
+	display: none;
+}
+
+.posts .post article {
+	margin: 0;
+	padding: 0;
+}
+
+.posts .post.op {
+	background-color: white;
+	color: black;
+}
+
+.posts .post .post-content {
+	display: inline-block;
+}
+
+.posts .post .post-image {
+	margin-bottom: 10px;
+}
+
+.posts .post .post-image img {
+	border-radius: 10px;
+}
+
+.posts .external-url {
+	color: rgb(104, 119, 130);
+}
+
+.posts .post.op .post-annotations, .posts .post .post-annotations {
+	border-radius: 10px;
+	background-color: rgb(241, 249, 255);
+	color: #474747;
+}
+
+span.hashtag {
+	color: rgb(29, 155, 240);
+}
diff --git a/datasources/twitter-import/explorer/twitter-import-explorer.json b/datasources/twitter-import/explorer/twitter-import-explorer.json
@@ -0,0 +1,140 @@
+{
+	"ndjson": {
+		"id": "{{ rest_id }}",
+		"author_picture": "<img src='{{ core.user_results.result.legacy.profile_image_url_https }}'>",
+		"author": "{{ core.user_results.result.legacy.name }}",
+		"created": "{{ core.user_results.result.legacy.created_at }}",
+		"body": "{{ legacy.full_text }}",
+		"likes": "{{ legacy.favorite_count }} <i class='fas fa-heart'></i>",
+		"retweets": "{{ legacy.retweet_count }} <i class='fas fa-retweet'></i>",
+		"replies": "{{ legacy.reply_count }} <i class='fas fa-reply'></i>",
+		"external_url": "https://twitter.com/{{ core.user_results.result.rest_id }}/status/{{ rest_id }}",
+		"image": "{{ legacy.extended_entities.media.media_url_https }}",
+		"sort_options": [
+			{
+				"key": "core.user_results.result.legacy.created_at",
+				"label": "Old to new"
+			},
+			{
+				"key": "core.user_results.result.legacy.created_at",
+				"label": "New to old",
+				"descending": true
+			},
+			{
+				"key": "rest_id",
+				"label": "Post id",
+				"force_int": true
+			},
+			{
+				"key": "core.legacy.favorite_count",
+				"label": "Most likes",
+				"descending": true,
+				"force_int": true
+			},
+			{
+				"key": "core.legacy.retweet_count",
+				"label": "Most retweets",
+				"descending": true,
+				"force_int": true
+			},
+			{
+				"key": "core.legacy.reply_count",
+				"label": "Most replies",
+				"descending": true,
+				"force_int": true
+			}
+		]
+	},
+	"csv": {
+		"author_picture": "<img src='{{ profile_image_url }}'>",
+		"author": "{{ author }}",
+		"likes": "{{ like_count }} <i class='fas fa-heart'></i>",
+		"retweets": "{{ retweet_count }} <i class='fas fa-retweet'></i>",
+		"replies": "{{ reply_count }} <i class='fas fa-reply'></i>",
+		"external_url": "https://twitter.com/{{ author }}/status/{{ id }}",
+		"images": "{{ images }}",
+		"body": "{{ body }}",
+		"sort_options": [
+			{
+				"key": "unix_timestamp",
+				"label": "Old to new",
+				"force_int": true
+			},
+			{
+				"key": "unix_timestamp",
+				"label": "New to old",
+				"descending": true,
+				"force_int": true
+			},
+			{
+				"key": "id",
+				"label": "Post id",
+				"force_int": true,
+				"force_int": true
+			},
+			{
+				"key": "like_count",
+				"label": "Most likes",
+				"descending": true,
+				"force_int": true
+			},
+			{
+				"key": "retweet_count",
+				"label": "Most retweets",
+				"descending": true,
+				"force_int": true
+			},
+			{
+				"key": "reply_count",
+				"label": "Most replies",
+				"descending": true,
+				"force_int": true
+			}
+		]		
+	},
+	"ndjson_old_api": {
+		"author_picture": "<img src='{{ author_user.profile_image_url }}'>",
+		"author": "{{ author_user.name }}",
+		"created": "{{ created_at }}",
+		"likes": "{{ public_metrics.like_count }} <i class='fas fa-heart'></i>",
+		"retweets": "{{ public_metrics.retweet_count }} <i class='fas fa-retweet'></i>",
+		"replies": "{{ public_metrics.reply_count }} <i class='fas fa-reply'></i>",
+		"external_url": "https://twitter.com/{{ author_user.username }}/status/{{ id }}",
+		"image": "{{ attachments.media_keys.url }}",
+		"body": "{{ text }}",
+		"sort_options": [
+			{
+				"key": "created_at",
+				"label": "Old to new"
+			},
+			{
+				"key": "created_at",
+				"label": "New to old",
+				"descending": true
+			},
+			{
+				"key": "id",
+				"label": "Post id",
+				"force_int": true
+			},
+			{
+				"key": "public_metrics.like_count",
+				"label": "Most likes",
+				"descending": true,
+				"force_int": true
+			},
+			{
+				"key": "public_metrics.retweet_count",
+				"label": "Most retweets",
+				"descending": true,
+				"force_int": true
+			},
+			{
+				"key": "public_metrics.reply_count",
+				"label": "Most replies",
+				"descending": true,
+				"force_int": true
+			}
+		]
+	}
+}
diff --git a/webtool/views/api_explorer.py b/webtool/views/api_explorer.py
@@ -76,6 +76,7 @@ def explorer_dataset(key, page):
 	# If the dataset is local, we can add some more features
 	# (like the ability to navigate to threads)
 	is_local = False
+
 	if datasource in list(all_modules.datasources.keys()):
 		is_local = True if all_modules.datasources[datasource].get("is_local") else False
 
@@ -603,11 +604,14 @@ def get_custom_css(datasource):
 	"""
 
 	# Set the directory name of this datasource.
-	# Do some conversion for some imageboard names (4chan, 8chan).
+	# Some naming inconsistensies are caught here
 	if datasource.startswith("4"):
 		datasource_dir = datasource.replace("4", "four")
 	elif datasource.startswith("8"):
 		datasource_dir = datasource.replace("8", "eight")
+	elif datasource == "twitter":
+		datasource_dir = "twitter-import"
+		datasource = "twitter-import"
 	else:
 		datasource_dir = datasource
 
@@ -654,6 +658,9 @@ def get_custom_fields(datasource, filetype=None):
 	elif "facebook" in datasource or "instagram" in datasource:
 		datasource_dir = "import-from-tool"
 		datasource = "import-from-tool"
+	elif datasource == "twitter":
+		datasource_dir = "twitter-import"
+		datasource = "twitter-import"
 	else:
 		datasource_dir = datasource